jewelry-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.title}}</text>
			</view>
		</scroll-view>
		
		<!-- 祝福语区域 -->
		<view class="blessing-area">
			<view class="blessing-header">
                <view class="blessing-title">送祝福给TA</view>
                <view class="refresh-btn" @click="getRiceBlessingWords">
                    <uv-icon name="reload" size="32" color="#666"></uv-icon>
                    <text>换一个</text>
                </view>
            </view>
			<view class="blessing-input">
				<input type="text" v-model="blessing" :placeholder="giveTitle" />
			</view>
		</view>
		
		<!-- 底部区域 -->
		<view class="bottom-area">
			<!-- <view class="countdown">距离礼包失效：{{countdownText}}</view> -->
			<button class="send-btn" 
			open-type="share"
			@click="submit">立即送礼</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				selectedIndex: 0,
				blessing: '',
				countdown: 24 * 60 * 60, // 倒计时秒数
				countdownTimer: null,
				giftList: [],
                giveTitle : '',
                id : 0,
			}
		},
		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}秒`
			}
		},
		onShareAppMessage(res) {
		    return this.getShareData(res)
		},
		//2.分享到朋友圈
		onShareTimeline(res) {
		    return this.getShareData(res)
		},
		methods: {
			getShareData(res){
				let o = {
					title : `${this.configList.logo_name}用户${this.userInfo.nickName}挑选了1份礼物送给你，请收下这份心意`,
					path : '/pages_order/order/receiveGift?id=' + this.id,
					imageUrl : this.giftList[this.selectedIndex].image,
				}
				if(this.userInfo.id){
					o.path += '&shareId=' + this.userInfo.id
				}
				return o
			},
			navigateBack() {
				uni.navigateBack()
			},
			selectGift(index) {
				this.selectedIndex = index
			},
            // 获取祝福背景图
            getRiceBlessing(){
                this.$api('getRiceBlessing')
                .then(res => {
                   if(res.code == 200){
                       this.giftList = res.result
                   }
               })
            },
            // 随机获取祝福语
            getRiceBlessingWords(){
                this.$api('getRiceBlessingWords')
                .then(res => {
                   if(res.code == 200){
                       this.giveTitle = res.result
                   }
               })
            },
			startCountdown() {
				this.countdownTimer = setInterval(() => {
					if (this.countdown > 0) {
						this.countdown--
					} else {
						clearInterval(this.countdownTimer)
					}
				}, 1000)
			},
            submit(){
                this.$api('updateOrderBlessing', {
					orderId : this.id,
                    giveTitle : this.blessing || this.giveTitle,
                    giveImage : this.giftList[this.selectedIndex].image,
                }).then(res => {
                    if(res.code == 200){
                        // 调用微信小程序转发功能
                        
                    }
                })
            },
		},
        onLoad(args){
            this.id = args.id
        },
		mounted() {
			// this.startCountdown()
            this.getRiceBlessing()
            this.getRiceBlessingWords()
		},
		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-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 20rpx;
            
            .blessing-title {
                font-size: 30rpx;
                color: #666;
            }
            
            .refresh-btn {
                display: flex;
                align-items: center;
                color: #666;
                font-size: 26rpx;
                
                text {
                    margin-left: 6rpx;
                }
            }
        }
		
		.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>