baiyuApp/pages/course/noteList.vue

<template>
	<view class="content">
		<view style="padding: 24rpx 0;">
			<view class="search-box">
				<view class="left">
					<image src="@/static/image/home/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>
		<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">{{ $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">{{ $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">{{ $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/image/nodata.png"
					}
				},
				imageList:["../../static/image/home/banner1.png"],
				tabIndex: 0, // tab下标
				current: 0,
				mtabs:[],
				fixedTop: false, 
				tabTop:0,
				top:0,
				cateId:0,
				dataList:[],
				keyword:"",
				mescrollTopY:0,
			}
		},
		mounted() {
			const system = uni.getSystemInfoSync();
			let navigationBarHeight=0,tabHei=88,searchBarHei=120;
		    let tempHei=navigationBarHeight;
			tempHei=tempHei+uni.upx2px(tabHei+searchBarHei);
			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;
 }
   
  .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: 0 auto;
        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: #2583EB;
  			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>