ylrz_scrm_uniapp/pages_course/studyCenter/courseCollect.vue

<template>
	<view>
		<mescroll-body ref="mescrollRef" style="background-color: #FAFAFA;" @init="mescrollInit"  top="0" bottom="0" :down="downOption" @down="downCallback" :up="upOption"
		 @up="upCallback" @emptyclick="emptyClick">
		 
			<view class="goods-list">
				<goodsItemVertical :isOperate="isOperate" :showCollect="false" v-for="(item, index) in dataList" :item="item" :key="index" :index="index"  @canCalFav="canCalFav" @handleChoose='handleChoose' />
			</view>
			<uni-view v-if="dataList.length==0 && isPostBack" data-v-79c5cef0="" data-v-6f5cf468="" class="mescroll-empty" style="z-index: 99; top: 50px;padding: 0 25px 25px;">
				<uni-view data-v-79c5cef0="">
					<uni-image data-v-79c5cef0="" class="empty-icon" style="height: 186px;">
						<div style="background-image: url(&quot;/static/images/icon_img_empty.png&quot;); background-size: 100% 100%; background-repeat: no-repeat;"></div><uni-resize-sensor><div><div></div></div><div><div></div></div></uni-resize-sensor>
						<img src="/static/images/icon_img_empty.png" draggable="false">
					</uni-image>
				</uni-view>
				<uni-view data-v-79c5cef0="" class="empty-tip">~ 暂无数据 ~</uni-view>
				<uni-view data-v-79c5cef0="" class="empty-btn">刷新重试</uni-view>
			</uni-view>
			
			<!-- 推荐 -->
			<view class="recommend-title">
				<view class="line"></view>
				<text>为你推荐</text>
				<view class="line"></view>
			</view>
			<view class="recommend-box">
				<hallItem  class="gapitem"  v-for="(item, index) in recommendList " :key="index" :item="item"  @click.native="$navTo('/pages_course/info?courseId='+item.courseId)"  />
			</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 goodsItemVertical from "@/pages_course/components/goodsItemVertical.vue";
	import hallItem from "@/pages/course/components/hallItem.vue";
	import { getMyFavoriteCourseList,getCourseList,doFavorite } from '@/api/course' 
	export default {
		mixins: [MescrollMixin], // 使用mixin
		components: {
			goodsItemVertical,
			hallItem
		},
		data() {
			return {
				showCollect: false, // 是否显示收藏
				text: '管理',
				isOperate: false, // 是否操作
				downOption: {   //下拉刷新
				    use:true,
				 	auto: true // 不自动加载 (mixin已处理第一个tab触发downCallback)
				},
				totalNum:0,
				upOption: {   //上拉加载
				    use:true,
				 	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"
					}
				},
				recommendList:[],
				dataList:[],
				isPostBack:false,
			}
		},
		onNavigationBarButtonTap(e) {
			if(this.text == "管理") {
				if(this.dataList.length == 0) {
					uni.showToast({
						title: '暂无数据',
						icon: "none"
					})
					return
				}
				this.isOperate = true
				this.resetTitle( "删除")
				return
			}
			// 删除
			if(this.text == "删除") {
				this.handleDel()
				return
			}
		},
		onLoad() {
			this.getRecommendList();
			this.upCallback({num:1});
		},
		methods: {
			/*下拉刷新的回调 */
			downCallback() {
				this.refreshPage();
			},
			/*上拉加载的回调*/
			upCallback(page) { 
				/*上拉加载的回调: 其中page.num:当前页 从1开始, page.size:每页数据条数,默认10 */
				let params={};
				getMyFavoriteCourseList(params,page.num).then(res => {
					   if(res.code==200){
							setTimeout(()=>{
								let list = res.data.list.map(item=>({
									...item,
									checked: false
								}))
								//this.mescroll.endByPage(res.data.list.length, res.data.pages);
								if(page.num == 1) this.dataList = []; //如果是第一页需手动制空列表
								this.dataList=this.dataList.concat(list); //追加新数据
								this.totalNum=res.data.total;
								this.isPostBack=true;
							},300);
						}else{
							this.mescroll.endByPage(0, 1); 
						}
					},
					rej => {}
				).catch(()=>{
					//联网失败, 结束加载
					this.mescroll.endErr();
				});
			},
			getRecommendList:function(){
				let that=this;
				const params={"isTui":1};
				getCourseList(params,1,10).then(res => {
						if(res.code==200){
							this.recommendList=res.data.list;  
						}
					},
					rej => {}
				);
			},
			refreshPage(){  
			    // this.mescroll.hideTopBtn();
			    // this.mescroll.resetUpScroll(true);
				this.upCallback({num:1});
			},
			back() {
				uni.navigateBack({
					delta: 1
				})
			},
			canCalFav(item) {
				uni.showLoading({title:""});
				doFavorite(item.courseId).then(res => {
						uni.hideLoading();
						if(res.code==200){
							uni.showToast({title: '操作成功',icon: 'none'});
							this.dataList.splice(item.index,1);
						}else{
							uni.showToast({title: res.msg,icon: 'none'});
						}
					},
					rej => {}
				);
			},
			emptyClick(){
				
			},
			resetTitle(text) {
				this.text = text
				// #ifdef H5
				document.querySelector('.uni-page-head-ft .uni-page-head-btn .uni-btn-icon').innerHTML = text;
				// #endif
				// #ifdef APP-PLUS 
				let pages = getCurrentPages();
				let page= pages[pages.length - 1];
				let webView = page.$getAppWebview()
				// 修改buttons  
				// index: 按钮索引, style {WebviewTitleNViewButtonStyles }  
				webView.setTitleNViewButtonStyle(0, {  text: text });  
				// #endif
			},
			handleDel(){
				this.isOperate = false;
				this.resetTitle("管理")
			},
			handleChoose(index) {
				this.dataList[index].checked = !this.dataList[index].checked
			},
		}
	}
</script>

<style lang="scss" scoped>
	.navbar-title {
		font-weight: 700;
		font-size: 16px;
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.goods-list {
		padding: 20rpx 24rpx;
		.vertical-goods-itembox {
			margin-bottom: 20rpx;
		}
	}

	.recommend-title {
		width: 100%;
		height: 80rpx;
		padding: 0 24rpx;
		box-sizing: border-box;
		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
		font-size: 26rpx;
		color: #FF5C03;
		text-align: center;
		line-height: 80rpx;
		display: flex;
		align-items: center;

		text {
			margin: 0 32rpx;
		}

		.line {
			flex: 1;
			height: 0;
			border: 2rpx solid #ECECEC;
		}
	}

    .recommend-box {
		padding: 8rpx 24rpx;
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		margin-right: -18rpx;
	}
	.gapitem {
		margin-right: 18rpx;
		margin-bottom: 18rpx;
	}
</style>