siyu_app/pages/course/myNote.vue

<template>
	<view class="content-box" >
	    <image class="bg-img" src="/static/image/home/home_top_bg.png"></image>
	    <view class="nav-bar">
	    	<view class="grace-page-header" :style="{ background:headerBG }">
	    		<!-- 沉浸式状态栏 -->
	    		<view class="grace-page-status-bar" :style="{ background:statusBarBG}"></view>
	    		<!-- 头部核心 -->
	    		<view class="grace-page-header-nav" id="gracePageHeader" :style="{minHeight:headerHeight+'px', height:headerHeight+'px', overflow:'hidden'}">
	    			<view class="u-nav-left" @tap="$navBack()">
	    				<image class="back" src="@/static/images/other/ret-white.png"  ></image>
	    			</view>
					<view class="grace-header-main es-fw-500">我的笔记</view>
	    			<view class="u-nav-right">
	    				<image class="right-icon" src="@/static/image/edit.png" @tap="deleteNote()" ></image>
						<view v-if="noteType!=2" class="edit" @tap="changeEdit()">{{!isEdit?'编辑':'取消'}}</view>
	    			</view>
	    		</view>
	    	</view>
	    	<view class="nav_box">
	    		<view class="status_bar"></view>
	    		<view class="nav_bar"></view>
	    	</view>
			
	    </view>
	
		<mescroll-body ref="mescrollRef" style="background-color:#f7f7f7;min-height: 700px;"  @init="mescrollInit" top="0" bottom="200" :down="downOption" :up="upOption" @down="downCallback" @up="upCallback">				
		   <view class="es-ml-30 es-mr-30 es-mt-30">
			   <image  @tap="goDetail" class="cover" :src="noteData.imgUrl" mode="scaleToFill"></image>
			   <view  @tap="goDetail" class="title es-fw-500 es-fs-30 es-mb-20">{{noteData.courseName}}</view>
			   <view  @tap="goDetail" class="es-fw-500 es-fs-26 es-c-33">{{noteData.videoName}}</view>
			   <view class="x-start es-mt-20">
				   <view  class="calendar x-c es-w-60 es-h-60">
					    <image class="es-w-28 es-h-30" src="@/static/image/course/calendar.png"></image>
				   </view>
				   <view class="es-ml-20 es-mt-20 es-fw-500 es-fs-24 es-c-99">{{ $formatDate(noteData.createTime)}}</view>
			   </view>
			   
			   <view v-if="!isEdit" class="textAreaBox es-bc-ff es-br-20 es-mt-20  es-fw-n es-fs-30 es-c-33 es-pl-20 es-pt-20">
			   		{{noteData.content}} 
			   </view>
			   
			   <view v-if="isEdit" class="textAreaBox es-bc-ff es-br-20 es-mt-20  es-fw-n es-fs-30 es-c-33 x-c es-pl-20 es-pt-20">
				  <textarea class="textArea"  :focus="isEdit" :disabled="noteType==2" v-model="noteData.content" placeholder-style="color:#999" placeholder="请填写笔记内容"/>		  
			   </view>
			   
			   <view  v-if="isEdit" class="btn-box">
			      	<view class="sub-btn" @click="doSend()()">保存</view>
			   </view>
			   
		   </view>
		</mescroll-body>
	</view>
</template>

<script>
	import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
	import mescrollBody from "@/uni_modules/mescroll-uni/components/mescroll-body/mescroll-body.vue";
	import { getDictByKey } from '@/api/common'
	import { editCourseNote,getMyCourseNoteByNoteId,delCourseNote } from '@/api/course'
	export default {
		mixins: [MescrollMixin], // 使用mixin
		components: {
		    mescrollBody,
		 },
		data() {
			return {
				headerHeight:44,
				statusBarBG:"none",
				headerIndex:98,
				downOption: {   //下拉刷新
				 	auto: false, // 不自动加载 (mixin已处理第一个tab触发downCallback)
					use:false
				},
				upOption: {   //上拉加载
				 	auto: false, // 不自动加载
					use:false,
				 	page: {
				 		num: 0, // 当前页码,默认0,回调之前会加1,即callback(page)会从1开始
				 		size: 10 // 每页数据的数量
				 	},
				 	noMoreSize: 5, //如果列表已无数据,可设置列表的总数量要大于半页才显示无更多数据;避免列表数据过少(比如只有一条数据),显示无更多数据会不好看; 默认5
				 	empty: {
				 		tip: '~ 空空如也 ~' // 提示
				 		// btnText: '去看看'
				 	}
				},
				dataList:[],
				noteId:null,
				fixedTop: false,
				top:0,
				isEdit:false,
				noteType:0,
				noteData:{"content":"","courseId":0,"noteType":0} 
				
			}
		},
		onPageScroll(e) {
			this.top=e.scrollTop;
		},
		computed: {
			// 计算属性的 getter
			headerBG:function() {
				var top=this.top/88;
				return 'rgba(255,92,3, ' + top + ')';
			},
		},
		onShow(){
		   
		},
		onLoad(options){
			this.noteId=options.noteId;
			this.noteType=options.noteType;
			this.requestData();
		},
		
		methods: {
			/*下拉刷新的回调 */
			downCallback() {
				this.mescroll.resetUpScroll();
				var that=this;
			},
			/*上拉加载的回调*/
			upCallback(page) { 
				//this.mescroll.endByPage(1, 1); 
				//this.mescroll.endSuccess(8,false);
				// if (page.num == 1) {
				// 	this.mescroll.endSuccess(8, false);
				// } else {
				// 	this.mescroll.endErr()
				// }
			},
			requestData(){
			    getMyCourseNoteByNoteId(this.noteId).then(res => {
			    		if(res.code==200){
			    			this.noteData=res.data;
			    		}
			    	},
			    	rej => {}
			    );
			},
			changeEdit(){
			   this.isEdit=!this.isEdit;	
			},
			doSend(){
				if(this.$isEmpty(this.noteData.content)){
					uni.showToast({title: '请输入笔记内容',icon: 'none'});
					return;
				}
				uni.showLoading({title:""});
				editCourseNote(this.noteData).then(res => {
						uni.hideLoading();
						if(res.code==200){
							uni.showToast({title: res.msg,icon: 'none'});
						}else{
							uni.showToast({title: res.msg,icon: 'none'});
						}
						this.isLike=!this.isLike;
						//this.isEdit=!this.isEdit;
					},
					rej => {}
				);
			},
			deleteNote(){
				   let that=this;
				   uni.showModal({
						title:"系统提示",
						content:"确定删除吗?",
						cancelText:'取消',
						confirmText:'确定',
						success: (res) => {
							console.log("qxj res:"+JSON.stringify(res));
							if (res.confirm) {
								that.deleteNoteAction();
							}
							else if(res.cancel) {
							
							}
						},
							fail: () => {
								uni.hideLoading();
							}
					   });
			},
			deleteNoteAction(){
				uni.showLoading({title:""});
				delCourseNote({"noteId":this.noteId}).then(res => {
						uni.hideLoading();
						if(res.code==200){
							uni.showToast({title: "删除成功",icon: 'none'});
							setTimeout(e => {
								this.$navBack();
								uni.$emit('refreshMyNote', { });
							}, 2000);
							
						}else{
							uni.showToast({title: res.msg,icon: 'none'});
						}
						this.isLike=!this.isLike;
					},
					rej => {}
				);
			},
			goDetail() {
				if(this.noteData.courseIsDel == 1 || this.noteData.courseIsShow == 0) {
					uni.showToast({
						title: '该课程已下架',
						icon: 'error'
					})
					return
				}
				this.$navTo('./info?courseId='+this.noteData.courseId)
			}
		}
	}
</script>

<style scoped lang="scss">
	page{
		 height: 100%;
		 background-color: #f7f7f7;
	}
	.grace-page-header {
			position: fixed;
			width: 100%;
			left: 0;
			top: 0;
			z-index: 98;
			border-bottom: 0px solid #FFFFFF;
			.grace-page-status-bar {
				width: 100%;
				height: var(--status-bar-height);
			}
			.grace-page-header-nav {
				width: 100%;
				display: flex;
				flex-direction: row;
				flex-wrap: nowrap;
				align-items: center;
				justify-content: space-between;
			}
			.grace-header-main {
				width: 300rpx;
				flex: auto;
				overflow: hidden;
				margin:0 20rpx;
				height: 48rpx;
				text-align: center;
				color: #fff;
			}
	}
	.u-nav-left{
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-left: 25rpx;
			.back{
				width: 18rpx;
				height: 31rpx;
			}
		 }
		 
		
	.u-nav-right{
		    position: absolute;
			right:20rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			.right-icon{
				width: 27rpx;
				height: 29rpx;
				margin-right: 30rpx;
			}
			.edit{
				color: #fff;
				font-size: 34rpx;
				margin-right: 10rpx;
				font-weight: normal;
			}
		}
		
	.bg-img{
	     position: fixed;
	     width: 100%;
	 	   height: 524rpx;
	     top: 0;
	     left: 0;
	     right: 0;
	     bottom: 0;
	 	   z-index: 0;
	 }
	 
	
	.nav_box{
		width: 100%;
		.status_bar {
			height: var(--status-bar-height);
			width: 100%;
		}
		.nav_bar {
			height: 44px;
			width: 100%;
		}
	}
	
	
	.search-box {
			width: calc(100% - 60rpx);
			height: 70rpx;
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: space-between;
			background: #fff;
			border-radius: 35rpx;
			margin:30rpx;
			margin-top: 10rpx;
	      padding-left: 30rpx;
			position: relative;
			z-index: 10;
			.left{
				display: flex;
				flex-direction: row;
				align-items: center;
				justify-content: flex-start;
			}
			
			image{
				width: 28upx;
				height: 28upx;
				margin-right: 16upx;
			}
			.input-text{
				color: #333;
				font-size: 24rpx;
				height: 70rpx;
				line-height:70rpx ;
			}
			.uni-input-placeholder{
				color:#999;
			}
			.button{
				background: #FF5C03;
				border-radius: 29rpx;
				width: 108rpx;
				height: 54rpx;
				line-height: 54rpx;
				color: #fff;
				font-size: 26rpx;
				margin-right: 10rpx;
			}
	}
	
	.cover{
		height:300rpx ;
		width: 100%;
		border-radius: 20rpx;
	}  
	.title{
		color:#0173FF;
	}
	
	.calendar{
		background-color:#FFE8DC ;
		width: 60rpx;
		height: 60rpx;
		border-radius: 50%;
	}
	
	.textAreaBox{
		background-color: #fff;
		padding-left: 15rpx;
		padding-right: 15rpx;
		height: 200px;
	}
	
	.textArea{
		background-color: #fff;
		border-radius: 10rpx;
		width: 100%;
		height: 100%;
		font-size: 30rpx;
	}
	
	.btn-box{
		margin-top: 15rpx;
		height: 120upx;
		padding: 0 30upx;
		display: flex;
		align-items: center;
		justify-content: center;
		.sub-btn{
			width: 100%;
			height: 88upx;
			line-height: 88upx;
			text-align: center;
			font-size: 30upx;
			font-family: PingFang SC;
			font-weight: bold;
			color: #FFFFFF;
			background: #FF5C03;
			border-radius: 44upx;
		}
	}
	
	
</style>