101 lines
2.2 KiB
Vue
101 lines
2.2 KiB
Vue
<template>
|
||
<view>
|
||
<GiftCard v-if="!giftCard.isExpire" :card="giftCard" :addr="giftChooseAddress" @receive="getGiftCard($event)" />
|
||
<view v-else>
|
||
<view class="no-img-wrap">
|
||
<view class="wrap-box" >
|
||
<image :src="webUrl + '/icon/no-gift.png'" mode="widthFix"></image>
|
||
<view class="v12-font-28 v12-dark1-text v12-mt-8">礼包超过24小时未领取，订单已取消</view>
|
||
<view @click="toHome" class="v12-font-28 v12-primary-text v12-primary-border go-btn">去商城看看</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import GiftCard from './components/GiftCard.vue'
|
||
import { getGiftCardDetail } from '@/api/gift'
|
||
export default {
|
||
components: {
|
||
GiftCard
|
||
},
|
||
data() {
|
||
return {
|
||
webUrl: this.$VUE_APP_RESOURCES_URL,
|
||
giftCard: {},
|
||
giftChooseAddress: {}
|
||
}
|
||
},
|
||
onLoad(opts) {
|
||
this.getGiftCard(opts.code)
|
||
},
|
||
onShow() {
|
||
this.giftChooseAddress = uni.getStorageSync('giftChooseAddress') || {}
|
||
},
|
||
onShareAppMessage() {
|
||
return {
|
||
title: this.giftCard.message || '礼笺轻启，礼藏心意',
|
||
path: `/pkg_user/views/gift/receive?code=${this.giftCard.code}`,
|
||
imageUrl: this.giftCard.image
|
||
}
|
||
},
|
||
methods: {
|
||
toHome() {
|
||
uni.switchTab({
|
||
url: '/pages/home/index'
|
||
})
|
||
},
|
||
getGiftCard(code) {
|
||
getGiftCardDetail({
|
||
code: code
|
||
}).then(res => {
|
||
console.log(res.data,'res.data');
|
||
|
||
this.giftCard = res.data || {}
|
||
}).catch(err => {
|
||
this.giftCard = {
|
||
canTransfer: 0,
|
||
isReceive: true
|
||
}
|
||
})
|
||
},
|
||
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="less" scoped>
|
||
.wrap-box{
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
margin-bottom: 400rpx;
|
||
}
|
||
.go-btn{
|
||
border-radius: 200rpx;
|
||
padding: 8rpx 20rpx;
|
||
font-weight: bold;
|
||
margin-top: 60rpx;
|
||
width: fit-content;
|
||
}
|
||
.no-img-wrap{
|
||
height: 100vh;
|
||
display: flex;
|
||
align-items: center;
|
||
flex-direction: column;
|
||
justify-content: center;
|
||
}
|
||
.no-img-wrap image{
|
||
width: 280rpx;
|
||
height: 280rpx;
|
||
}
|
||
.top-card{
|
||
width: 710rpx;
|
||
height: 280rpx;
|
||
background: #fff;
|
||
border-radius: 16rpx;
|
||
}
|
||
|
||
|
||
</style> |