siyu_app/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>
			
			<view v-if="dataList.length==0 && isPostBack" class="mescroll-empty">
				<image class="empty-icon" src="/static/image/nodata.png" mode="widthFix" style="width: 316rpx;"></image>
				<view class="empty-tip">~ 暂无数据 ~</view>
				<view class="empty-btn" @tap="refreshPage()">刷新重试</view>
			</view>
			
			<!-- 推荐 -->
			<view class="recommend-title">
				<view class="line"></view>
				<text>为你推荐</text>
				<view class="line"></view>
			</view>
			<view class="recommend-box">
				<!-- <goodsItem  v-for="(item, index) in recommendList " :key="index" :item="item"  /> -->
				<hallItem  class="gapitem"  v-for="(item, index) in recommendList " :key="index" :item="item"  @click="$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 "../components/goodsItemVertical.vue";
	import goodsItem from "../components/goodsItem.vue";
	import hallItem from "../components/hallItem.vue";
	import { getMyFavoriteCourseList,getCourseList,doFavorite,cancelFavorite } from '@/api/course' 
	export default {
		mixins: [MescrollMixin], // 使用mixin
		components: {
			goodsItemVertical,
			goodsItem,
			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/image/nodata.png"
					}
				},
				recommendList:[],
				dataList:[],
				isPostBack:false,
			}
		},
		onNavigationBarButtonTap(e) {
			if(this.text == "管理") {
				if(this.dataList.length == 0) {
					uni.showToast({
						title: '暂无数据',
						icon: "none"
					})
					return
				}
				this.dataList = this.dataList.map(item=>({
					...item,
					checked: false
				}))
				this.isOperate = true
				this.resetTitle( "删除")
				return
			}
			// 删除
			if(this.text == "删除") {
				this.handleDel()
				return
			}
		},
		onLoad() {
			this.getRecommendList();
		},
		onShow() {
			this.upCallback({num:1});
		},
		methods: {
			/*下拉刷新的回调 */
			downCallback() {
				this.refreshPage();
			},
			/*上拉加载的回调*/
			upCallback(page) { 
				/*上拉加载的回调: 其中page.num:当前页 从1开始, page.size:每页数据条数,默认10 */
				let params={};
				getMyFavoriteCourseList(params,page.num).then(res => {
					    // console.log("qxj data:"+JSON.stringify(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(()=>{
					//联网失败, 结束加载
					that.dataList = []
					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(){
				const courseIds = this.dataList.filter(item=>item.checked).map(it=>it.courseId)
				if(courseIds&&courseIds.length>0) {
					cancelFavorite(courseIds).then(res=>{
						uni.showToast({
							title: res.msg,
							icon: "none"
						})
						if(res.code == 200) {
							this.isOperate = false;
							this.resetTitle("管理")
							this.refreshPage()
						}
					})
				} else {
					this.isOperate = false;
					this.resetTitle("管理")
				}
			},
			handleChoose(index) {
				this.dataList[index].checked = !this.dataList[index].checked
			},
		}
	}
</script>

<style lang="scss" scoped>
	.mescroll-empty {
		box-sizing: border-box;
		width: 100%;
		padding: 100rpx 50rpx;
		text-align: center;
		.empty-tip {
			margin-top: 20rpx;
			font-size: 24rpx;
			color: gray;
		}
		.empty-btn {
			display: inline-block;
			margin-top: 40rpx;
			min-width: 100rpx;
			padding: 18rpx;
			font-size: 28rpx;
			border:1rpx solid #e04b28;
			border-radius: 1.875rem;
			color: #e04b28;
		}
	}
	.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>