rtim/pages/expert/collectionDetail.vue

<template>
	<view>
		<view class="infobox">
			<view class="infobox-title">{{data.title || ''}}</view>
			<view class="es-mt-24">{{data.description || ''}}</view>
			<view class="es es-ac es-mt-24">
				<image class="es-h-40 es-w-40 es-br-40" :src="expertInfo.avatar || ''"
					mode="aspectFill"></image>
				<view class="es-ml-10 textOne" style="color: #555;max-width: 50vw;">
					{{expertInfo.nickName || ''}}</view>
				<view class="es-ml-16 es-fs-24" style="color: #aaa;" v-if="list.length>0">共{{list.length}}条视频</view>
			</view>
			<view class="es es-ac">
				<view class="btn es es-ac es-pc">
					<u-icon name="edit-pen" color="#666" size="36rpx"></u-icon>
					<text class="es-ml-10" @click="navTo('/pages/expert/collectionEdit?id=2')">编辑</text>
				</view>
				<view class="btn es es-ac es-pc" @tap="collectionManage">
					<u-icon name="list-dot" color="#666" size="36rpx"></u-icon>
					<text class="es-ml-10">管理</text>
				</view>
			</view>
		</view>
		<mescroll-body  ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="upCallback"
			:down="downOption" :up="upOption">
		<view v-if="list.length>0">
			<view class="es es-ac es-pl-28 es-pr-28 es-pt-28 es-pb-28 border-line" style="background-color: #fff;"
				@click="detail(item)" v-for="(item,index) in list" :key="item.collectionId">
				<image class="es-w-150 es-h-150 es-br-10" style="flex-shrink: 0;"
					:src="item.thumbnail || '/static/images/mine/dd_mg.png'" mode="aspectFill"></image>
				<view class="es es-ver flex es-h-150 es-pl-28" style="justify-content: space-evenly;overflow: hidden;">
					<view class="es es-ac" style="overflow: hidden;">
						<text class="flex es-fs-30 es-fw-400 textOne">{{item.title}}</text>
					</view>
					<view class="es es-ac es-fs-30">
						<view class="es es-ac es-mr-24 item-footer">
							<u-icon name="heart" color="#999999" size="34rpx"></u-icon>
							<text>5566</text>
						</view>
						<view class="es es-ac es-mr-24 item-footer">
							<u-icon name="star" color="#999999" size="34rpx"></u-icon>
							<text>5566</text>
						</view>
						<view class="es es-ac item-footer">
							<u-icon name="chat" color="#999999" size="34rpx"></u-icon>
							<text>5566</text>
						</view>
					</view>
				</view>
			</view>
		</view>
		</mescroll-body>
		<view class="addbtn" @click="navTo('./collectionManage')">添加视频</view>
	</view>
</template>

<script>
	import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
	import {
		collectionList
	} from "@/api/expert.js"
	export default {
		mixins: [MescrollMixin],
		data() {
			return {
				list: [],
				data: {},
				expertInfo: {},
				mescroll: null,
				downOption: { //下拉刷新
					use: false,
					auto: false // 不自动加载 (mixin已处理第一个tab触发downCallback)
				},
				upOption: {
					onScroll: false,
					use: true, // 是否启用上拉加载; 默认true
					page: {
						pae: 0, // 当前页码,默认0,回调之前会加1,即callback(page)会从1开始
						size: 10 // 每页数据的数量,默认10
					},
					noMoreSize: 5, // 配置列表的总数量要大于等于5条才显示'-- END --'的提示
					textNoMore: "已经到底了",
					empty: {
						icon: 'https://cos.his.cdwjyyh.com/fs/20240423/cf4a86b913a04341bb44e34bb4d37aa2.png',
						tip: '暂无数据'
					}
				},
			}
		},
		onLoad() {
			this.expertInfo = uni.getStorageSync('expertInfo')
		},
		onShow() {
			this.data = uni.getStorageSync('collectionData') || ''
		},
		onUnload() {
			uni.removeStorageSync('collectionData')
		},
		methods: {
			collectionManage(data) {
				this.navTo('/pages/expert/collectionManage?type=edit')
			},
			detail(data) {
				uni.setStorageSync('collectionData', data)
				this.navTo('/pages/expert/collectionDetail')
			},
			navTo(url) {
				console.log(4354,url);
				this.$loginNavTo(url)
			},
			mescrollInit(mescroll) {
				this.mescroll = mescroll;
			},
			downCallback(mescroll) {
				mescroll.resetUpScroll()
			},
			async upCallback(page) {
				let that = this;
				let params = {
					status: 1,
					collectionId: this.data.collectionId,
					pageNum: page.num,
					pageSize: page.size
				}
				const res = await collectionList(params)
				if (res.code == 200) {
					if (page.num == 1) that.list = []
					that.list = that.list.concat(res.data.list);
					that.mescroll.endBySize(res.data.list.length, res.data.total);
				} else {
					uni.showToast({
						icon: 'none',
						title: "请求失败",
					});
					that.dataList = null;
					that.mescroll.endErr();
				}
			},
			
			async getList() {
				let params = {
					status: 1,
					collectionId: this.data.collectionId
				}
				const res = await collectionList(params)
				if (res.code == 200) {
					this.list = res.data.list
				}
			}
		}
	}
</script>
<style>
	page {
		background-color: #fff;
	}
</style>
<style scoped lang="scss">
	.infobox {
		background-color: #fff;
		padding: 24rpx 32rpx;
		box-sizing: border-box;
		font-size: 28rpx;
		color: #222;

		&-title {
			font-size: 32rpx;
			font-weight: 500;
		}

		.btn {
			border: 1rpx solid #eee;
			padding: 10rpx 0;
			flex: 1;
			margin: 60rpx 20rpx 0 20rpx;
			border-radius: 40rpx;
			color: #666;
		}
	}

	.item-footer {
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		font-size: 12px;
		color: #999999;

		.img {
			width: 32rpx;
			height: 32rpx;
			margin-right: 8rpx;
			flex-shrink: 0;
		}
	}

	.addbtn {
		padding: 20rpx 40rpx;
		position: fixed;
		bottom: 80rpx;
		left: 50%;
		transform: translateX(-50%);
		background-color: #ff5c03;
		color: #fff;
		border-radius: 50rpx;
		font-size: 28rpx;
	}
</style>