frontend-app/components/winning_record.vue

<template>
	<!-- <up-loading-page :loading="listLoading"></up-loading-page> -->
	<scroll-view scroll-y="true" @scrolltolower="loadMore" :style="{ 'height': heightRef }">
		<view class="prize_draw_item" v-for="item in prizeDrawList" :key="item.id"
			v-if="prizeDrawList && prizeDrawList.length !== 0">
			<view class="prize_draw_left_warp">
				<up-image :src="item.iconUrl ? item.iconUrl : 'https://cex-pub.s3.ap-southeast-1.amazonaws.com/static/zj_f.jpg'"
					width="60" height="60" bgColor="#f1f6ff00"></up-image>
				<view style="margin-left: 20rpx;">
					<view class="title_">{{ item.prizeName }}</view>
					<view class="time_">{{ formatDate(item.ctdate) }}</view>
					<view class="delivery_"
						v-if="[DELIVER_STATUS.AWAIT_DELIVERY_REQUIRED, DELIVER_STATUS.YES_DELIVERY_REQUIRED, DELIVER_STATUS.RECEIVED].includes(item.deliveryStatus)">
						<view class="delivery_status">{{ getValue(DELIVER_STATUS_, item.deliveryStatus) }}</view>
						<view class="delivery_num" v-if="item.deliveryNum">
							<text style="margin-right: 10rpx;">运单号：{{ item.deliveryNum }}</text>
							<up-image src="/static/common/copy.png" width="10" height="10" bgColor="#f1f6ff00"
								@click="copyData(item.deliveryNum)"></up-image>
						</view>
						<view class="delivery_num" v-else>运单号：暂无</view>
					</view>
				</view>
			</view>
			<view class="prize_draw_right_warp" v-if="item.type === 4" v-show="item.status === 1" @click="jumpGetFun(item)">
				去领取</view>
			<view class="prize_draw_right_warp yes_" v-if="item.type === 4" v-show="item.status === 2">已领取</view>
		</view>
		<view v-else class="not_order_warp">
			<up-image src="https://cex-pub.s3.ap-southeast-1.amazonaws.com/static/not_order.png" width="80" height="80"
				bgColor="#f1f6ff00"></up-image>
			<view class="not_order_msg_warp">还未中奖哦～</view>
		</view>
		<view v-if="loading" style="text-align: center;">加载中...</view>
	</scroll-view>

</template>

<script>
import { getWinningList } from '@/api/raffle.js';
import { formatDate, copyData } from '@/utils/index.js';
import { DELIVER_STATUS, DELIVER_STATUS_, getValue } from '@/utils/enumUtils.js'

export default {
	name: "winning_record",
	props: {
		heightRef: { //当前选中的tab项
			type: Number,
			default: 'calc(100vh - 100rpx)'
		}
	},
	computed: {
		DELIVER_STATUS() {
			return DELIVER_STATUS;
		},
		DELIVER_STATUS_() {
			return DELIVER_STATUS_;
		}
	},
	data() {
		return {
			prizeDrawList: [],// 抽奖列表
			form: {
				status: '',
				page: 1,
				pageSize: 20,
			},
			loading: false, // 加载状态标志
		};
	},
	mounted() {
		// this.jumpMine();
		this.loadData(); // 页面加载时加载数据
	},
	methods: {
		formatDate,
		copyData,
		getValue,
		jumpGetFun(item) {
			uni.navigateTo({
				url: '/pages/other_package/get_prize/get_prize?id=' + item.id,
			})
		},

		// 加载数据的方法
		async loadData() {
			if (this.loading) return; // 如果正在加载，则不重复加载
			this.loading = true; // 设置加载状态为true
			try {
				// 模拟异步获取数据，实际应用中应该替换为你的数据获取逻辑，例如API调用
				const newData = await this.fetchData(this.form.page, this.form.pageSize);
				if (newData.entitys && newData.entitys.length !== 0) {
					this.prizeDrawList = [...this.prizeDrawList, ...newData.entitys]; // 将新数据添加到列表中
					this.form.page++; // 页码加1
				}
			} catch (error) {
				console.error('加载数据失败:', error);
			} finally {
				this.loading = false; // 设置加载状态为false
			}
		},
		// 模拟获取数据的方法，实际应用中应该替换为你的数据获取逻辑，例如从服务器获取数据
		async fetchData(page, pageSize) {
			const params = {
				page,
				pageSize,
			}
			const data = await getWinningList(params);
			if (data && data.bizcode === 100) {
				return data.data
			} else {
				return [];
			}
		},
		// 当滚动到底部时触发的方法
		loadMore() {
			this.loadData(); // 加载更多数据
		}
	}
}
</script>

<style lang="scss" scoped>
.prize_draw_warp {}

.prize_draw_item {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 20rpx 0;
	border-bottom: 1rpx solid #EEEEEE;
}

.prize_draw_left_warp {
	display: flex;
	align-items: center;
}

.title_ {
	font-weight: bold;
	font-size: 28rpx;
	color: #333333;
}

.time_ {
	font-size: 24rpx;
	color: #666666;
	margin-top: 10rpx;
}

.delivery_ {
	display: flex;
	align-items: center;
	font-size: 20rpx;
	margin-top: 10rpx;

	.delivery_status {
		padding: 6rpx 10rpx;
		border-radius: 10rpx;
		color: $app-bt-bj;
		border: 1rpx solid $app-bt-bj;
	}

	.delivery_num {
		margin-left: 10rpx;
		display: flex;
		align-items: center;
	}
}

.prize_draw_right_warp {
	background: $app-bt-bj;
	border-radius: 10rpx;
	text-align: center;
	color: #FFFFFF;
	padding: 10rpx 28rpx;
	height: 48rpx;
}

.yes_ {
	background: #F5F5F5;
	color: #666666;
}
</style>