zhibo/pages/list/index.vue

<template>
	<view class=" content ">
		<mescroll-body bottom="0" ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="upCallback"
			:down="downOption" :up="upOption">
			<view class="list">
				<view class="list-item" @click="goLive(item)" v-for="(item,index) in list" :key="index">
					<image :src="item.liveImgUrl"></image>
					<view class="info">
						<text>{{item.liveName}}</text>
					</view>
				</view>

			</view>
		</mescroll-body>
	</view>

</template>
<script>
	import {
		liveList
	} from '@/api/list'
	import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
	// import { LiveWS } from '@/utils/liveWS'
	// import { login,loginByWeChat,getUserInfo,loginByApple } from '@/api/user'
	export default {
		mixins: [MescrollMixin], // 使用mixin
		data() {
			return {
				list: [],
				liveId: null, // mescroll配置
				downOption: {
					use: true,
					auto: false // 是否在初始化后自动执行下拉回调
				},
				upOption: {
					use: true,
					auto: true, // 是否在初始化时自动执行上拉回调
					page: {
						num: 0, // 当前页码
						size: 10 // 每页数据条数
					},
					noMoreSize: 5, // 如果列表已无数据，可设置列表的总数量要大于等于5条才显示无更多数据
					empty: {
						icon: '/static/images/empty.png', // 可配置空状态图片
						tip: '暂无订单数据' // 空状态提示文字
					}
				},
				mescroll: null // mescroll实例
			}
		},
		methods: {
			goLive(item) {
				this.liveId = item.liveId
				console.log("要传的liveId", this.liveId)
				uni.navigateTo({
					url: `/pages/home/living?liveId=${item.liveId}&immediate=true`
				});
			},
			// mescroll初始化
			mescrollInit(mescroll) {
				this.mescroll = mescroll;
			},
			// 下拉刷新回调
			downCallback(mescroll) {
				// 重置列表数据
				this.list = [];
				mescroll.resetUpScroll();
			},
			// 上拉加载回调
			upCallback(mescroll) {
				const pageNum = mescroll.num;
				const pageSize = mescroll.size;

				let data = {
					pageSize: pageSize,
					page: pageNum,
				}
				liveList(data).then(res => {
					if (res.code == 200) {
						// 请求成功，处理数据
						let curPageData = res.rows || [];
						let curPageLen = curPageData.length;
						let totalSize = res.total || 0;

						// 如果是第一页，直接赋值
						if (pageNum === 1) {
							this.list = [];
						}

						// 追加新数据
						this.list = this.list.concat(curPageData);

						mescroll.endBySize(curPageLen, totalSize);

					} else {
						// 请求失败
						mescroll.endErr();
						uni.showToast({
							title: res.msg,
							icon: 'none'
						});
					}
				}).catch(err => {
					// 请求异常
					mescroll.endErr();
					console.log("请求异常:" + JSON.stringify(err));
				});
			},
			// getList() {
			// 	const data = {
			// 		page: 1,
			// 		page_size: 10,
			// 	};
			// 	uni.showLoading({
			// 		title: "处理中..."
			// 	});
			// 	liveList(data)
			// 		.then(res => {
			// 			if (res.code == 200) {
			// 				this.list = res.rows; // 直接赋值给 this.list
			// 				console.log("list>>", this.list); // ✅ 打印已定义的 this.list
			// 			} else {
			// 				uni.showToast({
			// 					title: res.msg,
			// 					icon: 'none'
			// 				});
			// 			}
			// 		})
			// 		.catch(rej => {
			// 			console.log("请求失败:", JSON.stringify(rej));
			// 		})
			// 		.finally(() => {
			// 			uni.hideLoading();
			// 		});
			// }
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		background-color: #111;
		min-height: 100vh;
		padding: 24rpx;

		.list {
			display: flex;
			justify-content: space-between;
			flex-wrap: wrap;

			.list-item {
				border-radius: 16rpx;
				width: 340rpx;
				height: 600rpx;
				background-color: #0d0d0d;
				margin-right: 10rpx;
				margin-bottom: 24rpx;
				overflow: hidden;
				position: relative;

				.info {
					position: absolute;
					left: 20rpx;
					bottom: 14rpx;
					color: #ffffff;
				}

				image {
					width: 100%;
					height: 100%;
				}

			}
		}

	}
</style>