奖品记录

2025-01-15 11:32:52 +08:00
parent 9e30dbbc83
commit 24d076575b
6 changed files with 208 additions and 7 deletions
--- a/pages/index/prizeDraw/LotteryRecords.vue
+++ b/pages/index/prizeDraw/LotteryRecords.vue
@@ -0,0 +1,180 @@
+<template>
+	<view class="gift-bg"></view>
+	<view class="list">
+		<view class="tab">
+			<view class="tab_item" :class="{ active: item.type == datas.tabIndex }" @click="tabClickczgw(item)"
+				v-for="(item, index) in datas.tab" :key="index">{{ item.label }}</view>
+		</view>
+		<view class="item" v-for="(item, index) in datas.list" :key="index">
+			<view class="color-666 u-font-24">中奖时间 {{item.drawDay}}</view>
+			<view class="u-m-t-24 u-flex u-row-between">
+				<view class="u-flex-1 u-flex u-col-top">
+					<u-image width="128rpx" height="128rpx" src="@/static/index/redPack.png"></u-image>
+					<view class="u-m-l-16">
+						<view>大额红包</view>
+						<view class="color-999 u-font-24 u-m-t-16">×1</view>
+					</view>
+				</view>
+				<view class="">
+					<!-- <view class="btn-circle duihuan" @click="toDuiHuan(item)">立即兑换</view> -->
+				</view>
+			</view>
+		</view>
+
+		<view class="empty" v-if="!datas.list.length">
+			<u-empty text="暂无记录" src="/static/icon-empty.svg"></u-empty>
+		</view>
+	</view>
+</template>
+
+<script setup>
+	import {
+		reactive
+	} from 'vue';
+	import {
+		onReachBottom,
+		onShow
+	} from '@dcloudio/uni-app'
+	import {
+		selectDiscSpinningRecord,
+		userPrizeExchange
+	} from '@/api/index/index.js'
+	let datas = reactive({
+		list: [],
+		tab: [{
+				label: '抽奖记录',
+				type: 1
+			},
+			{
+				label: '兑换记录',
+				type: 2
+			}
+		],
+		tabIndex: 1,
+		page: 1
+	})
+	onShow(() => {
+		getList();
+	})
+	onReachBottom(() => {
+		++datas.page
+		getList();
+	})
+
+	async function getList() {
+		let res = '';
+		if (datas.tabIndex == 1) {
+			res = await selectDiscSpinningRecord({
+				page: datas.page,
+				limit: 10,
+				source: 1
+			})
+		} else {
+			res = await userPrizeExchange({
+				page: datas.page,
+				limit: 10,
+				source: 1
+			})
+		}
+		if (datas.tabIndex == 1) {
+			if (datas.page == 1) {
+				datas.list = res.records;
+			} else {
+				if (res.records.length) {
+					datas.list.push(...datas.list, res.records)
+				}
+			}
+		} else {
+			if (datas.page == 1) {
+				datas.list = res.page.list;
+			} else {
+				if (res.records.length) {
+					datas.list.push(...datas.list, res.records)
+				}
+			}
+			// datas.total = res.page.totalCount;
+		}
+
+	}
+
+	function tabClickczgw(item) {
+		datas.list = [];
+		datas.tabIndex = item.type;
+		datas.page = 1
+		getList();
+	}
+	// 立即兑换
+	function toDuiHuan(item) {
+		uni.navigateTo({
+			url: `/me/gift/duihuan?source=${this.query.source}&id=${item.id}`
+		});
+	}
+</script>
+
+
+<style lang="scss" scoped>
+	.gift-bg {
+		position: relative;
+		width: 100%;
+		height: 524rpx;
+		background: url('@/static/index/giftbg.png') no-repeat center center/cover;
+		background-repeat: no-repeat;
+		background-position: center center;
+		background-size: cover;
+
+
+	}
+
+	.duihuan {
+		background: linear-gradient(87deg, #ed8087 0%, #eca2aa 100%);
+		font-size: 24rpx;
+		color: #fff;
+		padding: 8rpx 16rpx;
+		text-align: center;
+
+		&.finish {
+			background: #e5e5e5;
+			color: #999;
+		}
+	}
+
+
+
+	.empty {
+		margin-top: 140rpx;
+	}
+
+
+	.list {
+		margin: 0 20rpx;
+		position: relative;
+		z-index: 2;
+		margin-top: -148rpx;
+		border-radius: 18rpx 18rpx 18rpx 18rpx;
+		overflow: hidden;
+		background-color: #fff;
+
+		.tab {
+			display: flex;
+
+			.tab_item {
+				height: 80rpx;
+				line-height: 80rpx;
+				width: 50%;
+				text-align: center;
+				font-size: 32rpx;
+				color: #333;
+			}
+
+			.active {
+				background-color: #eca2aa;
+				color: #fff;
+			}
+		}
+
+		.item {
+			padding: 32rpx 24rpx;
+			border-bottom: 1rpx solid #e5e5e5;
+		}
+	}
+</style>