rtim/pages/courseAnswer/winningRecord.vue

<template>
	<view class="lottery-list">
		<!-- 中奖记录列表 -->
		<mescroll-body ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="upCallback" :down="downOption" :up="upOption">
		<view v-for="item in dataList" :key="item.roundId" class="record-card u-border-bottom">
			<view class="left">
				<view class="name">{{ item.content }}</view>
				<view class="time">{{ item.createTime }}</view>
			</view>

			<!-- 纯芳华币不显示按钮 -->
			<view v-if="item.goodsId" class="u-btn x-ac" @click="goDetail(item)">
				详情
			</view>
		</view>
		</mescroll-body>
	</view>
</template>

<script>
	import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
	import {rewardList} from "@/api/courseAnswer.js"
	export default {
		mixins: [MescrollMixin], // 关键：混入 mescroll 生命周期
		data() {
			return {
				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: 10, // 配置列表的总数量要大于等于5条才显示'-- END --'的提示
					textNoMore: "已经到底了",
					empty: {
						icon: 'https://cos.his.cdwjyyh.com/fs/20240423/cf4a86b913a04341bb44e34bb4d37aa2.png',
						tip: '暂无数据'
					}
				},
				dataList: []
			}
		},
		methods: {
			mescrollInit(mescroll) {
				this.mescroll = mescroll;
			},
			/*下拉刷新的回调 */
			downCallback(mescroll) {
				mescroll.resetUpScroll()
			},
			upCallback(page) {
				//联网加载数据
				let that = this;
				let data = {
					pageNum: page.num,
					pageSize: page.size
				};
				rewardList(data).then(res => {
					if (res.code == 200) {
						//设置列表数据
						if (page.num == 1) {
							that.dataList = res.data.list;

						} else {
							that.dataList = that.dataList.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();
					}
				});
			},
			/* 跳转详情 */
			goDetail(item) {
				//orderType，订单类型1企微2app
				if(item.orderId) {
					uni.navigateTo({
						url: `/pages/courseAnswer/orderDetail?orderId=${item.orderId}&orderType=${item.orderType}`
					})
				} else {
					uni.navigateTo({
						url: `/pages/courseAnswer/winningRecordDetail?goodsId=${item.goodsId}&roundId=${item.roundId}&orderType=${item.orderType}`
					})
				}
				
			}
		}
	}
</script>

<style lang="scss" scoped>
	.lottery-list {
		background-color: #f5f5f5;
		padding: 20rpx;
		box-sizing: border-box;
	}

	/* 单条卡片 */
	.record-card {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 28rpx 32rpx;
		margin-bottom: 20rpx;
		background: #ffffff;
		border-radius: 16rpx;
		box-shadow: 0 4rpx 16rpx 0 rgba(0, 0, 0, 0.05);
		transition: transform 0.15s ease;

		&:active {
			transform: scale(0.98);
		}

		.left {
			flex: 1;
			margin-right: 20rpx;

			.time {
				font-size: 24rpx;
				color: #999;
				line-height: 1.6;
			}

			.name {
				margin-top: 8rpx;
				font-size: 30rpx;
				color: #333;
				font-weight: 500;
				line-height: 1.4;
				/* 超长折行 */
				word-break: break-all;
			}
		}

		/* 详情按钮 */
		.u-btn {
			width: 132rpx;
			height: 64rpx;
			background: #FF5C03;
			border-radius: 32rpx 32rpx 32rpx 32rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 28rpx;
			color: #FFFFFF;
		}
	}

	/* 底线微调 */
	.u-border-bottom::after {
		display: none;
	}
</style>