ylrz_scrm_uniapp/pages_course/noteList.vue

<template>
	<view class="content">
		<es-nav-title title="我的笔记" mode=""></es-nav-title>
	    <view class="search-box" >
			<view class="left">
				<image src="@/static/images/course/icon_search.png" mode=""></image>
				<input v-model="keyword" class="input-text" type="text" placeholder="搜索笔记内容"/>
			</view>
			<view class="right">
				<button class="button" @tap="refreshPage()">搜索</button>
			</view>
		</view>
	    <view  class="tabBg es-pt-10 es-pb-10 es-bc-white" style="z-index: 100;">
			<me-tabs :value="tabIndex"  :tabs="mtabs" nameKey="dictLabel"   @change="tabChange" :fixed="false" ></me-tabs>
		</view>
	
	    <mescroll-uni ref="mescrollRef" style="background-color: #FAFAFA;" @init="mescrollInit"  :top="mescrollTopY" bottom="0" :down="downOption" @down="downCallback" :up="upOption"
	     @up="upCallback" @emptyclick="emptyClick">
		   <view class="es-bc-white es-p-r" >
			    <view class="es-view-w-x es-mt-10">
					<block v-for="(item, index) in dataList" :key="index" >
					   <view v-if="index%3==0" @tap="goToMyNote(item)" class="es-br-20 es-bc-white es-pl-23 es-pr-23 es-pt-20 es-pb-20 es es-ac es-mt-20 es-mb-20 item_bg1">
							<view class="es-f1 es-ml-16 " >
								<view class="es es-ac">
									<view class="es-f1 es-omit es-fs-30 tit_color_1">{{item.courseName}}</view>
								    <view v-if="item.noteType==2" class="es-bc-theme es-brc-yellow es-br-30 es-bc-ff es-fs-22 es-w-110 es-h-40  x-c" >转存笔记</view>
								</view>
								<view class="es-fs-26 es-mt-19 es-omit es-c-33">{{item.content }}</view>
								<view class="es es-ac es-mt-21">
									<view class="es-f1 es-omit es-fs-24 cor_6a">{{item.subCateName}}</view>
									<view class="es-fs-24 cor_6a">{{ utils.formatDate(item.createTime) }}</view>
								</view>
							</view>
					  </view>
					  
					   <view v-else-if="index%3==1"  @tap="goToMyNote(item)" class="es-br-20 es-bc-white es-pl-23 es-pr-23 es-pt-20 es-pb-20 es es-ac es-mt-20 es-mb-20 item_bg2">
							<view class="es-f1 es-ml-16 item_bg2">
								<view class="es es-ac">
									<view class="es-f1 es-omit es-fs-30 tit_color_2">{{item.courseName}}</view>
								    <view v-if="item.noteType==2" class="es-bc-theme es-brc-yellow es-br-30 es-bc-ff es-fs-22 es-w-110 es-h-40  x-c" >转存笔记</view>
								</view>
								<view class="es-fs-26 es-mt-19 es-omit es-c-33">{{item.content}}</view>
								<view class="es es-ac es-mt-21">
									<view class="es-f1 es-omit es-fs-24 cor_6a">{{item.subCateName}}</view>
									<view class="es-fs-24 cor_6a">{{ utils.formatDate(item.createTime) }}</view>
								</view>
							</view>
					   </view>
						
						<view v-else  @tap="goToMyNote(item)"  class="es-br-20 es-bc-white es-pl-23 es-pr-23 es-pt-20 es-pb-20 es es-ac es-mt-20 es-mb-20 item_bg3">	
							<view class="es-f1 es-ml-16">
								<view class="es es-ac">
									<view class="es-f1 es-omit es-fs-30 tit_color_3">{{item.courseName}}</view>
							        <view v-if="item.noteType==2" class="es-bc-theme es-brc-yellow es-br-30 es-bc-ff es-fs-22 es-w-110 es-h-40  x-c" >转存笔记</view>
								</view>
								<view class="es-fs-26 es-mt-19 es-omit es-c-33">{{item.content}}</view>
								<view class="es es-ac es-mt-21">
									<view class="es-f1 es-omit es-fs-24 cor_6a">{{item.subCateName}}</view>
									<view class="es-fs-24 cor_6a">{{ utils.formatDate(item.createTime) }}</view>
								</view>
							</view>		    	
						</view>
					</block>	
				</view>		
		   </view>
		 
		</mescroll-uni> 
	
	</view>
</template>

<script>
	import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
	import { getCourseCate,getCourseList,getMyCourseNoteList } from '@/api/course'
	export default {
		mixins: [MescrollMixin], // 使用mixin
		components: {
		    
		},
		data() {
			return {
				headerHeight:44,
				navigationBarHeight:44,
				statusBarBG:"none",
				headerIndex:98,
				downOption: {   //下拉刷新
				    use:true,
				 	auto: true // 不自动加载 (mixin已处理第一个tab触发downCallback)
				},
				upOption: {   //上拉加载
				 	auto: false, // 不自动加载
				 	page: {
				 		num: 0, // 当前页码,默认0,回调之前会加1,即callback(page)会从1开始
				 		size: 10 // 每页数据的数量
				 	},
				 	noMoreSize: 5, //如果列表已无数据,可设置列表的总数量要大于半页才显示无更多数据;避免列表数据过少(比如只有一条数据),显示无更多数据会不好看; 默认5
				 
					empty:{
						tip: '~ 暂无数据 ~', // 提示
						btnText: '刷新重试',
						icon:"/static/images/icon_img_empty.png"
					}
				},
				tabIndex: 0, // tab下标
				current: 0,
				mtabs:[],
				fixedTop: false, 
				tabTop:0,
				top:0,
				cateId:0,
				dataList:[],
				keyword:"",
				mescrollTopY:0,
			}
		},
		onPageScroll(e) {
			this.top=e.scrollTop;
		},
		computed: {
			// 计算属性的 getter
			headerBG:function() {
				var top=this.top/88;
				return 'rgba(255,92,3, ' + top + ')';
			},
		},
		mounted() {
			const system = uni.getSystemInfoSync();
			let navigationBarHeight=44,tabHei=110,searchBarHei=44;
		    let tempHei=navigationBarHeight+searchBarHei+system.statusBarHeight;
			tempHei=tempHei+uni.upx2px(tabHei);
			this.mescrollTopY=tempHei+"px";
		},
		onShow(){
		   
		},
		onLoad(){
			this.getCourseCate();
		},
		created(){
			let that = this;
			uni.$on('refreshMyNote', function(data) {
				that.refreshPage();
			});
		},
		destroyed() {
			// 注销全局配置监听
			uni.$off('refreshMyNote');
		},
		methods: {
			/*下拉刷新的回调 */
			downCallback() {
				this.refreshPage();
			},
			/*上拉加载的回调*/
			upCallback(page) { 
				/*上拉加载的回调: 其中page.num:当前页 从1开始, page.size:每页数据条数,默认10 */
				let params={};
				if(this.cateId==0){
					params={"keyword":this.keyword};
				}else{
					params={"cateId":this.cateId,"keyword":this.keyword};
				}
				getMyCourseNoteList(params,page.num).then(res => {
						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;
							},300);
						}else{
							this.mescroll.endByPage(0, 1); 
						}
					},
					rej => {}
				).catch(()=>{
					//联网失败, 结束加载
					this.mescroll.endErr();
				});
				
			},
			refreshPage(){  
			    this.mescroll.hideTopBtn();
			    this.mescroll.resetUpScroll(true);
			},
		
			getCourseCate:function(){
				let that=this;
				getCourseCate().then(res => {
						if(res.code==200){
						    this.mtabs=[{"dictValue": 0,"dictLabel": "全部"}];
							this.mtabs=this.mtabs.concat(res.data);
							if(this.mtabs.length>0){
								 this.refreshPage();
							}
						}
					},
					rej => {}
				);
			},
			tabChange(index){
				this.tabIndex=index;
				const item=this.mtabs[index];
				if(item){
					this.cateId=item.dictValue;
					this.refreshPage();
				}
			},
			goToMyNote(item){
				//if(item.noteType!=2){
					this.$navTo('./myNote?noteId='+item.noteId+"&noteType="+item.noteType);
				//}
			},
			emptyClick() {
				
			},
			
		}
	}
</script>

<style scoped lang="scss">
	
 page{
 	 height: 100%;
 	 background-color: #f7f7f7;
 }
 
 .content{
 	/* #ifdef APP-PLUS */
 	flex: 1;
 	/* #endif */
 	/* #ifndef APP-PLUS */
 	//display: flex;
 	/* #endif */
 	display: flex;
 	flex-direction: column;
 	width: 100%;
 	min-height: 100%;
 	flex: 1;
 }
 
 .grace-page-header {
 		width: 100%;
 		position: fixed;
 		left: 0;
 		top: 0;
 		z-index: 99;
 		border-bottom: 0px solid #FFFFFF;
 		.grace-page-status-bar {
 			width: 100%;
 			height: 0;
 		}
 		.grace-page-header-nav {
 			width: 100%;
 			display: flex;
 			flex-direction: row;
 			flex-wrap: nowrap;
 			align-items: center;
 		}
 		.grace-header-main {
 			width: 300rpx;
 			flex: auto;
 			overflow: hidden;
 			margin:0 20rpx;
 			height: 48rpx;
 			text-align: center;
 			color: #fff;
 		}
 }
 
 .u-nav-back{
 		display: flex;
 		align-items: center;
 		position: absolute;
 		left:32rpx;
 		.img{
 			height: 42upx;
 		}
  }
 
  .u-nav-right{
	    position: absolute;
	    right:20rpx;
		.right-icon{
			width: 35rpx;
			height: 33rpx;
			margin-right: 10rpx;
		}
	}
  .bg-img{
       position: fixed;
       width: 100%;
   	   height: 500rpx;
       top: 0;
       left: 0;
       right: 0;
       bottom: 0;
   	   z-index: 0;
   }
   
  .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-bottom: 20rpx;
        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;
  		}
  }

 .item_bg1{ background-color:#EBF2FB;}
 .tit_color_1{color: #0173FF;}
 
 .item_bg2{background-color:#FFF0EA;}
 .tit_color_2{color: #FF661A;}
 
 .item_bg3{background-color:#ECFBF1;}
 .tit_color_3{color: #00A31B;}
 
 .cor_6a{ color: #6A6A6A;}
 
 .tabBg{
	 z-index: 20;
	 position: relative;
	 &::after{
	 	content: '';
	 	width: 100%;
	 	height:2rpx;
	 	position: absolute;
	 	left: 0;
	 	bottom: 0;
	 	background: #E5E5E5;
	 }
	
 }
 
 .mescroll-uni-fixed{
	 background-color: #f7f7f7 !important;
 }
 
 .mescroll-empty{
	 background-color: #f7f7f7 !important;
 }

</style>