teambuy-front/pages_order/order/receiveGift.vue

<template>
	<view class="receive-gift">
		<navbar title="礼品领取" leftClick @leftClick="$utils.navigateBack" />
		
		<!-- 主图片展示区 -->
		<view class="main-image">
			<image :src="giftInfo.image" mode="aspectFill"></image>
		</view>
		
		<!-- 礼品信息区域 -->
		<view class="gift-info">
			<view class="gift-name">{{giftInfo.name}}</view>
			<view class="gift-value">
				<text>礼品价值：</text>
				<text class="price">￥{{giftInfo.price}}</text>
			</view>
		</view>
		
		<!-- 祝福语区域 -->
		<view class="blessing-area">
			<view class="sender-info">
				<text class="label">来自</text>
				<text class="sender">{{giftInfo.senderName}}</text>
				<text class="label">的祝福</text>
			</view>
			<view class="blessing-content">
				{{giftInfo.message}}
			</view>
		</view>
		
		<!-- 底部区域 -->
		<view class="bottom-area">
			<view class="countdown">距离礼包失效：{{countdownText}}</view>
			<button class="receive-btn" @click="receiveGift" :disabled="giftInfo.state !== 0">{{giftInfo.state === 0 ? '立即领取' : '已领取'}}</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				giftId: '',
				giftInfo: {
					name: '',
					image: '',
					price: 0,
					senderName: '',
					message: '',
					state: 0, // 0-未领取 1-已领取
					expireTime: ''
				},
				countdown: 24 * 60 * 60, // 倒计时秒数
				countdownTimer: null
			}
		},
		computed: {
			countdownText() {
				const hours = Math.floor(this.countdown / 3600)
				const minutes = Math.floor((this.countdown % 3600) / 60)
				const seconds = this.countdown % 60
				return `${hours}时${minutes}分${seconds}秒`
			}
		},
		methods: {
			// 获取礼品信息
			async getGiftInfo() {
				try {
					const res = await this.$http.get(`/gift/detail/${this.giftId}`)
					this.giftInfo = res.data
					// 计算倒计时
					if (this.giftInfo.expireTime) {
						const expireTime = new Date(this.giftInfo.expireTime).getTime()
						const now = new Date().getTime()
						this.countdown = Math.max(0, Math.floor((expireTime - now) / 1000))
						this.startCountdown()
					}
				} catch (e) {
					uni.showToast({
						title: '获取礼品信息失败',
						icon: 'none'
					})
				}
			},
			// 领取礼品
			async receiveGift() {
				try {
					await this.$http.post('/gift/receive', {
						id: this.giftId
					})
					uni.showToast({
						title: '领取成功',
						icon: 'success'
					})
					this.giftInfo.state = 1
				} catch (e) {
					uni.showToast({
						title: '领取失败',
						icon: 'none'
					})
				}
			},
			// 开始倒计时
			startCountdown() {
				this.countdownTimer = setInterval(() => {
					if (this.countdown > 0) {
						this.countdown--
					} else {
						clearInterval(this.countdownTimer)
					}
				}, 1000)
			}
		},
		onLoad(options) {
			if (options.id) {
				this.giftId = options.id
				this.getGiftInfo()
			}
		},
		beforeDestroy() {
			if (this.countdownTimer) {
				clearInterval(this.countdownTimer)
			}
		}
	}
</script>

<style lang="scss" scoped>
.receive-gift {
	min-height: 100vh;
	background: #fff;
	
	.main-image {
		width: 100%;
		height: 400rpx;
		
		image {
			width: 100%;
			height: 100%;
		}
	}
	
	.gift-info {
		padding: 30rpx;
		
		.gift-name {
			font-size: 36rpx;
			font-weight: 600;
			color: #333;
			margin-bottom: 20rpx;
		}
		
		.gift-value {
			font-size: 28rpx;
			color: #666;
			
			.price {
				color: #E3441A;
				font-weight: 600;
				margin-left: 10rpx;
			}
		}
	}
	
	.blessing-area {
		padding: 30rpx;
		background: #FFF5F5;
		margin: 30rpx;
		border-radius: 12rpx;
		
		.sender-info {
			text-align: center;
			margin-bottom: 20rpx;
			
			.label {
				color: #666;
				font-size: 28rpx;
			}
			
			.sender {
				color: #333;
				font-size: 32rpx;
				font-weight: 600;
				margin: 0 10rpx;
			}
		}
		
		.blessing-content {
			color: #333;
			font-size: 30rpx;
			line-height: 1.6;
			text-align: center;
		}
	}
	
	.bottom-area {
		position: fixed;
		left: 0;
		bottom: 0;
		width: 100%;
		box-sizing: border-box;
		padding: 20rpx 30rpx calc(30rpx + env(safe-area-inset-bottom)) 30rpx;
		background: #fff;
		box-shadow: 0 -2rpx 10rpx rgba(0,0,0,0.05);
		z-index: 10;
		
		.countdown {
			text-align: center;
			font-size: 28rpx;
			color: #666;
			margin-bottom: 20rpx;
			font-weight: 500;
		}
		
		.receive-btn {
			width: 100%;
			height: 88rpx;
			line-height: 88rpx;
			background: linear-gradient(to right, #FF4B4B, #E3441A);
			color: #fff;
			border-radius: 44rpx;
			font-size: 32rpx;
			font-weight: 500;
			
			&[disabled] {
				background: #ccc;
				opacity: 0.8;
			}
		}
	}
}
</style>