rtim/pages/expert/collection.vue

<template>
	<view class="">
		<view class="es-fx box">
			<mescroll-body :sticky="true" ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="upCallback"
				:down="downOption" :up="upOption">
				<view class="" 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.coverUrl || ''"
							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;">
								<image class="es-h-40 es-w-40 es-mr-16" style="flex-shrink: 0;"
									src="/static/images/mine/dd_mg.png" mode="aspectFill"></image>
								<text class="flex es-fs-32 es-fw-600 textOne">{{item.title}}</text>
							</view>
							<view class="es-fs-30" style="color: #777;">1.3w播放 · 更新至第7集</view>
						</view>
					</view>
				</view>
			</mescroll-body>
		</view>
		<view class="footer">
			<button class="footer-btn" @click="navTo('/pages/expert/collectionEdit')">创建合集</button>
		</view>
	</view>
</template>

<script>
	import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
	import {
		videoCollectionMyList,
	} from "@/api/expert.js"
	export default {
		mixins: [MescrollMixin],
		data() {
			return {
				list: [],
				mescroll: null,
				downOption: { //下拉刷新
					use: true,
					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: '暂无数据'
					}
				},
			}
		},
		onUnload() {
			uni.removeStorageSync('collectionData')
		},
		methods: {
			mescrollInit(mescroll) {
				this.mescroll = mescroll;
			},
			downCallback(mescroll) {
				mescroll.resetUpScroll()
			},
			async upCallback(page) {
				let that = this;
				let params = {
					status: 1,
					pageNum: page.num,
					pageSize: page.size
				}
				const res = await videoCollectionMyList(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();
				}
			},
			navTo(url) {
				this.$loginNavTo(url)
			},
			detail(data) {
				uni.setStorageSync('collectionData', data)
				this.navTo('/pages/expert/collectionDetail')
			},
		}
	}
</script>

<style scoped lang="scss">

	.border-line {
		position: relative;

		&::after {
			position: absolute;
			left: 28rpx;
			right: 28rpx;
			bottom: 0;
			content: "";
			border-bottom: 1px solid #f7f7f7;
			width: calc(100% - 56rpx);
			transform: scaleY(0.5);
			border-top-color: #f7f7f7;
			border-right-color: #f7f7f7;
			border-left-color: #f7f7f7;
		}
	}

	.footer {
		width: 100%;
		height: 142rpx;
		padding: 20rpx 24rpx;
		box-sizing: border-box;
		position: fixed;
		bottom: var(--window-bottom);
		left: 0;
		background: #FFFFFF;

		&-btn {
			height: 92rpx;
			background: #FF5C03;
			border-radius: 12rpx;
			font-weight: 400;
			font-size: 34rpx;
			color: #FFFFFF;
			line-height: 92rpx;
			text-align: center;

			&::after {
				border: none;
			}
		}
	}

	.box {
		padding-bottom: 142rpx;
	}
</style>