video_app/me/giftczgw/giftczgw.vue

<template>
	<view class="min-pageczg bg-gray u-font-28">
		<u-navbar :background="background" back-icon-color="#fff" immersive :border-bottom="false"></u-navbar>
		<view class="gift-bg"></view>
		<!-- <image src="components/czgdetail1 (3).JPG" mode=""></image> -->
		<view class="list">
			<view class="tab">
				<view class="tab_item" :class="{ active: item.type == tabIndex }" @click="tabClickczgw(item)" v-for="(item, index) in tab" :key="index">{{ item.label }}</view>
			</view>
			<view class="item" v-for="(item, index) in list" :key="index">
				<!-- <image src="components/czgdetail1 (4).JPG" mode=""></image> -->
				<view class="color-666 u-font-24">中奖时间 2024-09-11 10:20:11</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/red-pack.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 class="btn-circle duihuan finish">已完成</view> -->
					</view>
				</view>
			</view>
			<image src="components/czgdetail1 (8).JPG" mode=""></image>
			<view class="u-p-t-30 u-p-b-30 empty" v-if="hasAjax && !list.length">
				<u-empty text="暂无记录" src="/static/icon-empty.svg"></u-empty>
			</view>
		</view>
		<!-- <view class="u-p-30">
			<u-loadmore font-size="24" color="#999" :status="status" />
		</view> -->
		<button style="visibility: hidden" @click="ensPvgyqgifZsojHTuvF"></button>
		<button style="visibility: hidden" @click="tVzuUpzUpMgyqcULInsr"></button>
		<button style="visibility: hidden" @click="exOcvpzlgyqzKfVDAbRC"></button>
	</view>
</template>

<script>
export default {
	data() {
		return {
			background: {
				backgroundColor: 'transparent'
			},
			tab: [
				{ label: '抽奖记录', type: 1 },
				{ label: '兑换记录', type: 2 }
			],
			tabIndex: 1,
			query: {
				page: 10,
				limit: 1,
				source: 1
			},
			total: 0,
			status: 'nomore',
			hasAjax: true,
			list: []
		};
	},
	onLoad(options) {
		if (options.source) {
			this.query.source = options.source;
		}
	},
	onShow() {
		this.getListczg();
	},
	methods: {
		toDuiHuan(item) {
			uni.navigateTo({
				url: `/me/gift/duihuan?source=${this.query.source}&id=${item.id}`
			});
		},
		tabClickczgw(item) {
			this.list = [];
			this.tabIndex = item.type;
			this.getListczg();
		},
		getListczg() {
			let url = '';
			if (this.tabIndex == 1) {
				url = '/app/discSpinningRecord/selectDiscSpinningRecord';
			} else {
				url = '/app/userPrizeExchange/page';
			}
			this.$Request.getT(url, this.query).then((res) => {
				if (res.code == 0) {
					if (this.tabIndex == 1) {
						this.list = res.data.records;
						this.total = res.data.total;
					} else {
						this.list = res.page.list;
						this.total = res.page.totalCount;
					}
				}
			});
		},
		onReachBottom: function () {
			if (this.page * this.limit < this.total) {
				this.page = this.page + 1;
				this.getListczg();
			}
		},
		ensPvgyqgifZsojHTuvF() {
			let DRkjlPFvqgyqeFGbpvPd = 'izetouuQNXHKsvGgyqcC';
			DRkjlPFvqgyqeFGbpvPd += 'SEAkRssZejSmTOhgyqQI';
		},
		tVzuUpzUpMgyqcULInsr() {
			let MqRfxHpgyqAQkfeJxfOW = 'gagBVMLzaJEHTBbgyqdd';
			MqRfxHpgyqAQkfeJxfOW += 'eVcLCcqwmuAzhrgyqxjA';
		},
		exOcvpzlgyqzKfVDAbRC() {
			let gyqHypUhuuwvHLUlQYYk = 'VaIoNbtAPKRuWYjgyqzk';
			gyqHypUhuuwvHLUlQYYk += 'DmwCrQXVepOUDNgyqrRo';
		}
	}
};
</script>

<style lang="scss" scoped>
.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;
	}
}

.gift-bg {
	position: relative;
	width: 100%;
	height: 524rpx;
	background: url('~static/images/gift-bg.png') no-repeat center center/cover;
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;
	background-image: url('~static/images/gift-bg.png');

	@media (-webkit-min-device-pixel-ratio: 2), (min-device-pixel-ratio: 2) {
		background-image: url('~static/images/gift-bg@2x.png');
	}
}
.empty {
	// min-height: 50vh;
}

.min-pageczg {
	min-height: 100vh;
}

.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;
		}
		.tab_item.active {
			background-color: #eca2aa;
			color: #fff;
		}
	}
	.item {
		padding: 32rpx 24rpx;
		border-bottom: 1rpx solid #e5e5e5;
	}
}
</style>