teambuy-front/pages_order/order/instantGift.vue

<template>
	<view class="instant-gift">
		<navbar title="立即送礼" leftClick @leftClick="$utils.navigateBack" />
		
		<!-- 主图片展示区 -->
		<view class="main-image">
			<image :src="selectedGift.image" mode="aspectFill"></image>
		</view>
		
		<!-- 礼品选择列表 -->
		<scroll-view scroll-x class="gift-list">
			<view 
				class="gift-item" 
				v-for="(item, index) in giftList" 
				:key="index"
				:class="{ active: selectedIndex === index }"
				@click="selectGift(index)"
			>
				<image :src="item.image" mode="aspectFill"></image>
				<text class="gift-name">{{item.name}}</text>
			</view>
		</scroll-view>
		
		<!-- 祝福语区域 -->
		<view class="blessing-area">
			<view class="blessing-title">送祝福给TA</view>
			<view class="blessing-input">
				<input type="text" v-model="blessing" placeholder="蛇年到，福气绕。钱包满满当当！" />
			</view>
		</view>
		
		<!-- 底部区域 -->
		<view class="bottom-area">
			<view class="countdown">距离礼包失效：{{countdownText}}</view>
			<button class="send-btn" @click="sendGift">立即送礼</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				selectedIndex: 0,
				blessing: '',
				countdown: 24 * 60 * 60, // 倒计时秒数
				countdownTimer: null,
				giftList: [
					{
						name: '蛇行大运',
						image: 'https://picb3.photophoto.cn/38/090/38090873_1.jpg'
					},
					{
						name: '蛇来运转',
						image: 'https://picb3.photophoto.cn/38/090/38090873_1.jpg'
					},
					{
						name: '2025',
						image: 'https://picb3.photophoto.cn/38/090/38090873_1.jpg'
					},
					{
						name: '身体健康',
						image: 'https://picb3.photophoto.cn/38/090/38090873_1.jpg'
					}
				]
			}
		},
		computed: {
			selectedGift() {
				return this.giftList[this.selectedIndex]
			},
			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: {
			navigateBack() {
				uni.navigateBack()
			},
			selectGift(index) {
				this.selectedIndex = index
			},
			sendGift() {
				// 实现送礼逻辑
				uni.showToast({
					title: '送礼成功',
					icon: 'success'
				})
			},
			startCountdown() {
				this.countdownTimer = setInterval(() => {
					if (this.countdown > 0) {
						this.countdown--
					} else {
						clearInterval(this.countdownTimer)
					}
				}, 1000)
			}
		},
		mounted() {
			this.startCountdown()
		},
		beforeDestroy() {
			if (this.countdownTimer) {
				clearInterval(this.countdownTimer)
			}
		}
	}
</script>

<style lang="scss" scoped>
.instant-gift {
	min-height: 100vh;
	background: #fff;
	
	.nav-header {
		display: flex;
		align-items: center;
		height: 88rpx;
		padding: 0 30rpx;
		
		.back-icon, .more-icon {
			width: 60rpx;
			text-align: center;
		}
		
		.title {
			flex: 1;
			text-align: center;
			font-size: 32rpx;
			font-weight: 500;
		}
	}
	
	.main-image {
		width: 100%;
		height: 400rpx;
		
		image {
			width: 100%;
			height: 100%;
		}
	}
	
	.gift-list {
		padding: 30rpx;
		white-space: nowrap;
		
		.gift-item {
			display: inline-block;
			width: 200rpx;
			margin-right: 20rpx;
			text-align: center;
			position: relative;
			z-index: 1;
            border: 4rpx solid transparent;
            padding: 0 10rpx 10rpx 10rpx;
			
			&.active {
				position: relative;
				z-index: 2;
				border: 4rpx solid $uni-color;
				border-radius: 12rpx;
			}
			
			image {
				width: 100%;
				height: 200rpx;
				border-radius: 12rpx;
			}
			
			.gift-name {
				display: block;
				font-size: 28rpx;
				margin-top: 10rpx;
			}
		}
	}
	
	.blessing-area {
		padding: 30rpx;
		
		.blessing-title {
			font-size: 30rpx;
			color: #666;
			margin-bottom: 20rpx;
		}
		
		.blessing-input {
			background: #FFF5F5;
			padding: 20rpx;
			border-radius: 12rpx;
			border: 2rpx solid #FFE0E0;
			
			input {
				width: 100%;
				height: 60rpx;
				color: #333;
				font-size: 28rpx;
			}
		}
	}
	
	.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;
		}
		
		.send-btn {
			width: calc(100%);
			height: 88rpx;
			line-height: 88rpx;
			background: linear-gradient(to right, #FF4B4B, $uni-color);
			color: #fff;
			border-radius: 44rpx;
			font-size: 32rpx;
			font-weight: 500;
		}
	}
}
</style>