ylrz_scrm_uniapp/pages_course/note.vue

<template>
	<view class="">
		<es-nav-bg ref="nav" title="学习笔记"></es-nav-bg>
		<mescroll-body  ref="mescrollRef"  @init="mescrollInit" top="0"  :height="pageHei"   :down="downOption" @down="downCallback" :up="upOption"
			   @up="upCallback" @emptyclick="emptyClick">
				<view class="es-view-w-x es-mt-10">
					<view class="banner es-icon-auto es-br-20">
						<image :src="courseData.imgUrl"></image>
					</view>
				</view>
				 <view class="es-bc-white es-br-20" style="margin-top: -194rpx;min-height: 300rpx;">
					<view class="es-h-194"></view>
					<view class="es-view-w-x es-mt-25">
						<view class="es es-ac">
							<view class="es-icon es-w-35 es-h-31 es-icon-course-icon-5"></view>
							<view class="es-ml-20 es-fs-30 es-fw-600 es-f1">笔记
							<text class="es-ml-1 es-fs-24 es-c-99">（{{totalNum}}）</text></view>
							<!-- <view class="es-icon-25 es-icon-course-close"></view> -->
						</view>

						<view class="es es-ac es-mt-25 es-pb-30 es-fs-22 es-c" style="border-bottom: 1px #FAFAFA solid;">
							<view class="es-on-act nav es-icon-auto es es-ac es-pc" :class="sortType==1?'ac':''" @tap="tapNoteType(1)">
								<view class="es-icon-20 es-icon-course-icon-2"></view>
								<view class="es-ml-19" :class="sortType==1?'es-fw-600':''">热度</view>
							</view>
							<view class="es-on-act nav es-icon-auto es es-ac es-pc es-ml-14" :class="sortType==2?'ac':''" @tap="tapNoteType(2)">
								<view class="es-icon-20 es-icon-course-icon-2"></view>
								<view class="es-ml-19" :class="sortType==2?'es-fw-600':''">时间</view>
							</view>
							<view class="es-on-act nav es-icon-auto es es-ac es-pc es-ml-14" :class="sortType==3?'ac':''" @tap="tapNoteType(3)">
								<view class="es-icon-20 es-icon-course-icon-3"></view>
								<view class="es-ml-19" :class="sortType==3?'es-fw-600':''">我的发布</view>
							</view>
							
						</view>

						<view v-for="(item, index) in dataList"  :key="index" class="es es-mt-20 es-b-b es-pb-20">
							<view class="es-icon-80 es-br">
								<image :src="utils.isEmpty(item.avatar)?defHeadImg:item.avatar"></image>
							</view>
							<view class="es-f1 es-ml-21">
								<view class="es-fs-28 es-fw">{{item.userNickName}}</view>
								<view class="es-c-99 es-fs-22 es-mt-4">{{ utils.formatDate(item.createTime) }}</view>
								<view class="es-fs-26 es-fw-500 es-pt-24 es-pb-25">
									<text>{{item.content}}</text>
								</view>
								
						<!-- 		<view class="es es-pe es-pt-10 es-pb-20">
									<view class="es-w-87 es-h-21 es-icon es-icon-course-icon-look-all"></view>
								</view> -->
		
								<view class="es es-c-99">
									<view class="es es-ac" @tap="doLike(item)">
										<view class="es-icon-28" :class="item.isLike?'es-icon-course-like2-ac':'es-icon-course-like2'"></view>
										<view class="es-ml-11 es-fs-26">{{item.likes}}</view>
									</view>
									<view class="es es-ac es-ml-23" @tap="saveNote(item,index)">
										<view class="es-icon-28 es-icon-course-icon-save"></view>
										<view class="es-ml-11 es-fs-26">{{item.isSave==1?"已转存":"转存"}}</view>

									</view>
									
									<view class="es es-ac es-ml-23"  v-if="isMySend(item.userId)" @tap="deleteNote(item,index)">
										<view class="es-icon-24 es-icon-course-icon-delete"></view>
										<view class="es-ml-11 es-fs-26">删除</view>
									</view>
									
									<view class="es-f1"></view>
									<view class="es es-ac es-pc es-icon-33" v-if="isMySend(item.userId)">
										<view class="es-w-33 es-h-9 es-icon es-icon-course-point"></view>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
		 </mescroll-body>
		
		<view class="" :style="'height:'+(KeyHight)+'px'" v-if="KeyHight" ></view>
		<view class="es-h-120 es-auto-bottom" v-else></view>
		<view class="es-fix-bottom es-bc-white es-b-t">
			<view class="es-h-120 es-view-w-x es es-ac">
				<view class="es-f1 es-ipt es-f1 es-br es-icon-auto es-icon-course-bg2">
					<input placeholder="写笔记" v-model="pingContent" placeholder-class="es-c" />
				</view>
				<view class="es-fs-30 es-fw-600 es-ml-50 es-c"  :adjust-position="false"
					:always-system="true" @tap="doSend()" >发布</view>
			</view>
			<view class="es-auto-bottom" v-if="!KeyHight"></view>
		</view>
	
	</view>
</template>

<script>
	import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
	import { getCourseById,getCourseNoteList,addCourseNote,noteDoLike,saveNote,delCourseNote } from '@/api/course'
	export default {
		mixins: [MescrollMixin],
		components: {
			
		},
		props: {
			keyword: String,
		},
		onLoad(){
		
		},
		mounted() {
			this.mescroll.hideTopBtn();
			this.mescroll.resetUpScroll(true);
		},
		
		data() {
			return {
				pingContent: '',
				KeyHight:0,
				cateId:0,
				courseId:0,
				totalNum:0,
				courseData:{},
				pageHei:400,
				textNoMore:"已经到底了",
                downOption: {
					auto: false ,// 不自动加载 (mixin已处理第一个tab触发downCallback)
					use:false
				},
				upOption: {
					auto: false, // 不自动加载
					page: {
						num: 0, // 当前页码,默认0,回调之前会加1,即callback(page)会从1开始
						size: 10 // 每页数据的数量
					},
					empty:{
						tip: '~ 暂无数据 ~', // 提示
						btnText: '去看看'
					},
					noMoreSize: 4, //如果列表已无数据,可设置列表的总数量要大于半页才显示无更多数据;避免列表数据过少(比如只有一条数据),显示无更多数据会不好看; 默认5
				    use:true,
				},
				curLoginUser:null,
				sortType:1,
				dataList: [],//列表数据
				defHeadImg:"/static/images/course/defHead.png",
				isLogin: false
			}
		},
		mounted() {
			try {
				const res = uni.getSystemInfoSync();
				let navigationBarHeight=88,tabHei=120;
				let tempHei=res.windowHeight-uni.upx2px(navigationBarHeight+tabHei);
				this.pageHei=tempHei+"px";
				this.mescroll.hideTopBtn();
				this.mescroll.resetUpScroll(true);
			} catch (e) {
				
			}
		},
		onLoad(options) {
			this.courseId=options.courseId;
			this.getCourseInfo();
		    // #ifdef APP-PLUS
		    uni.onKeyboardHeightChange(this.boardHeightChange);
		    // #endif
			this.utils.isLogin().then(res=>{
				if(res) {
					this.isLogin = true
					let userInfo=JSON.parse(uni.getStorageSync('userInfo'));
					this.curLoginUser=userInfo;
				} else {
					this.isLogin = false
				}
			})
		},
		onShow() {
			this.utils.isLogin().then(res=>{
				if(res) {
					this.isLogin = true
				} else {
					this.isLogin = false
				}
			})
		},
		onUnload: function() {
			uni.offKeyboardHeightChange(this.boardHeightChange);
		},
		methods: {
			getCourseInfo(){
			   getCourseById(this.courseId).then(res => {
					if(res.code==200){
						this.courseData=res.data;
					}
				},
				rej => {}
			   );
			},
			upCallback(page) {   	
				/*上拉加载的回调: 其中page.num:当前页 从1开始, page.size:每页数据条数,默认10 */
				const params={"courseId":this.courseId,"sortType":this.sortType};
				uni.showLoading({title:""});
				getCourseNoteList(params,page.num).then(res => {
					    uni.hideLoading();
						if(res.code==200){
							setTimeout(()=>{
								this.mescroll.endByPage(res.data.list.length, res.data.pages);
								if(page.num == 1) this.dataList = []; //如果是第一页需手动制空列表
								this.dataList=this.dataList.concat(res.data.list); //追加新数据
								this.totalNum=res.data.total;
							},100);
						}
					},
					rej => {}
				).catch(()=>{
					//联网失败, 结束加载
					this.mescroll.endErr();
				});
			},
			refreshPage(){
			    this.mescroll.hideTopBtn();
			    this.mescroll.resetUpScroll(true);
			},
			doSend(){
			
				if(this.utils.isEmpty(this.pingContent)){
					uni.showToast({title: '评论内容不能为空',icon: 'none'});
					return;
				}
				if(!this.isLogin){
					this.$showLoginPage();
					return;
				}
				const params={"courseId":this.courseId,"content":this.pingContent};
				uni.showLoading({title:""});
				addCourseNote(params).then(res => {
						uni.hideLoading();
						if(res.code==200){
							uni.showToast({title: '添加笔记成功',icon: 'none'});
						}else{
							uni.showToast({title: res.msg,icon: 'none'});
						}
						this.pingContent="";
						this.refreshPage();
					},
					rej => {}
				);
			},
			doLike(item){
				if(!this.isLogin){
					this.$showLoginPage();
					return;
				}
				const params={"noteId":item.noteId};
				uni.showLoading({title:""});
				noteDoLike(params).then(res => {
						uni.hideLoading();
						if(res.code==200){
							uni.showToast({title: '操作成功',icon: 'none'});
						}else{
							uni.showToast({title: res.msg,icon: 'none'});
						}
						this.refreshPage();
					},
					rej => {}
				);
			},
			tapNoteType(type){
				this.sortType=type;
				this.refreshPage();
			},
			saveNote(note,index){
				if(!this.isLogin){
					this.$showLoginPage();
					return;
				}
				const params={"noteId":note.noteId};
				uni.showLoading({title:""});
				let that=this;
				saveNote(params).then(res => {
						uni.hideLoading();
						if(res.code==200){
							uni.showToast({title: "转存成功",icon: 'none'});
						}else{
							uni.showToast({title: res.msg,icon: 'none'});
						}
						this.pingContent="";
						note.isSave=!note.isSave;
						this.dataList[index]=note;
						this.$forceUpdate();
					
						// setTimeout(function() {
						// 	that.refreshPage();
						// }, 1800);
						
					},
					rej => {}
				);
			},
			deleteNote(note,index){
				if(!this.isLogin){
					this.$showLoginPage();
					return;
				}
				let that=this;
				uni.showModal({
					title:"系统提示",
					content:"确定删除吗?",
					cancelText:'取消',
					confirmText:'确定',
					success: (res) => {
						console.log("qxj res:"+JSON.stringify(res));
						if (res.confirm) {
							that.deleteNoteAction(note,index);
						}
						else if(res.cancel) {
						}
					},
						fail: () => {
							uni.hideLoading();
						}
				 });
			},
			deleteNoteAction(note,index){
				const params={"noteId":note.noteId};
				uni.showLoading({title:""});
				let that=this;
				delCourseNote(params).then(res => {
						uni.hideLoading();
						if(res.code==200){
							uni.showToast({title: "删除成功",icon: 'none'});
						}else{
							uni.showToast({title: res.msg,icon: 'none'});
						}
						this.dataList.splice(index,1);
						this.$forceUpdate();
						// setTimeout(function() {
						// 	that.refreshPage();
						// }, 1800);
						
					},
					rej => {}
				);
			},
			isMySend(userId){
				if(!this.isLogin){
					return false;
				}
				return this.curLoginUser.userId==userId
			},
			
			//点击空布局按钮的回调
			emptyClick(){
				this.mescroll.resetUpScroll(true);
			},
			boardHeightChange:function(res){
				console.log('changeHeight', res.height);
				//转化为rpx 
				this.KeyHight = res.height;
			},
			
		},
		onPageScroll(e) {
			let nav = this.$refs["nav"];
			nav.scrollBody(e);
		},
	}
</script>

<style scoped>
	page {
		background-color: white;
	}
	.banner {
		height: 430rpx;
	}

	.es-icon-course-bg {
		background-image: url(/static/images/course/bg.png);
	}

	.es-icon-course-icon-1 {
		background-image: url(/static/images/course/icon-1.png);
	}

	.es-icon-course-icon-2 {
		background-image: url(/static/images/course/icon-2.png);
	}

	.es-icon-course-icon-3 {
		background-image: url(/static/images/course/icon-3.png);
	}

	.es-icon-course-close {
		background-image: url(/static/images/course/close.png);
	}

	.es-icon-course-info {
		background-image: url(/static/images/course/info.png);
	}

	.es-icon-course-bg2 {
		background-image: url(/static/images/course/bg2.png);
	}

	.es-icon-course-bg3 {
		background-image: url(/static/images/course/bg3.png);
	}

	.es-icon-course-comment {
		background-image: url(/static/images/course/comment.png);
	}

	.es-icon-course-comment2 {
		background-image: url(/static/images/course/comment2.png);
	}

	.es-icon-course-nav-bg,
	.nav {
		background-image: url(/static/images/course/nav-bg.png);
	}

	.es-icon-course-nav-bg-ac,
	.nav.ac {
		background-image: url(/static/images/course/nav-bg-ac.png);
	}

	.es-icon-course-point {
		background-image: url(/static/images/course/point.png);
	}

	.es-icon-course-share {
		background-image: url(/static/images/course/share.png);
	}

	.es-icon-course-like2 {
		background-image: url(/static/images/course/like2.png);
	}

	.es-icon-course-like2-ac {
		background-image: url(/static/images/course/like2-ac.png);
	}
	.es-icon-course-icon-4 {
		background-image: url(/static/images/course/icon-4.png);
	}
	.es-icon-course-icon-5 {
		background-image: url(/static/images/course/icon-5.png);
	}
	.es-icon-course-icon-look-all {
		background-image: url(/static/images/course/look-all.png);
	}
	.es-icon-course-icon-save {
		background-image: url(/static/images/course/save.png);
	}
	
   .es-icon-course-icon-delete {
		background-image: url(/static/images/icon_delete.png);
	}


	.item {
		width: calc(33.33% - 14rpx);
	}

	.nav {
		width: 216rpx;
		height: 60rpx;
	}

	.comment-reply-item {
		border-bottom: 1px #fff solid;
	}

	.es-ipt input {
		padding-left: 43rpx;
	}

	.es-ipt,
	.es-ipt input {
		background-color: inherit;
	}

	.es-b-b{border-bottom: 1px solid #DDDDDD;}
	
	.es-icon-24{
		width: 12px;
		height: 18px;
		background-size: 100% 100% !important;
	}
</style>