You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
238 lines
4.6 KiB
238 lines
4.6 KiB
<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.title}}</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.name}}</text>
|
|
<text class="label">的祝福</text>
|
|
</view>
|
|
<view class="blessing-content">
|
|
{{ giftInfo.giveTitle }}
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 底部区域 -->
|
|
<view class="bottom-area">
|
|
<!-- <view class="countdown">距离礼包失效：{{countdownText}}</view> -->
|
|
<!-- <button class="receive-btn"
|
|
@click="receiveGift"
|
|
:disabled="giftInfo.giveStatus !== 0">
|
|
{{giftInfo.giveStatus === 0 ? '立即领取' : '已领取'}}
|
|
</button> -->
|
|
|
|
<button class="receive-btn"
|
|
@click="receiveGift">
|
|
立即领取
|
|
</button>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
data() {
|
|
return {
|
|
giftId: '',
|
|
giftInfo: {
|
|
},
|
|
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.$api('getOrderDetail', {
|
|
id: this.giftId
|
|
})
|
|
this.giftInfo = res.result
|
|
// 计算倒计时
|
|
// 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 {
|
|
let res = await this.$api('getGiveShop', {
|
|
orderId : this.giftId
|
|
})
|
|
if(res.code == 200){
|
|
uni.showToast({
|
|
title: '领取成功',
|
|
icon: 'success'
|
|
})
|
|
}
|
|
this.giftInfo.giveStatus = 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>
|