162 lines
3.3 KiB
Vue
162 lines
3.3 KiB
Vue
<template>
|
||
<view class="mask">
|
||
<view class="gift-card-modal" >
|
||
<image class="bg-image" :src="card.cover" mode="aspectFit|aspectFill|widthFix" lazy-load="false"></image>
|
||
<view class="image-wrap">
|
||
<image class="pro-image" :src="card.giftProducts[0].productImage" mode="aspectFit|aspectFill|widthFix" lazy-load="false" @error="" @load="">
|
||
|
||
</image>
|
||
</view>
|
||
<view class="wrap-box">
|
||
|
||
</view>
|
||
<view class="auto-text-color">
|
||
{{ card.message || '礼笺轻启，礼藏心意' }}
|
||
</view>
|
||
<!-- 弹窗内容 -->
|
||
<view class="address-btn v12-white v12-primary-text" @click="setAddress">
|
||
填写地址并收下
|
||
</view>
|
||
<view class="share-btn v12-white v12-primary-text" v-if="card.canTransfer !== 0">
|
||
点击转增给好友
|
||
</view>
|
||
<view class="tips">
|
||
<view class="tip-text v12-mr-1">
|
||
未领取礼包，将于24小时后自动
|
||
</view>
|
||
<u-icon @click="showTips" name="error-circle" color="#fff" size="28rpx"></u-icon>
|
||
</view>
|
||
</view>
|
||
<giftTips ref="giftTips" :richText="giftNotice"></giftTips>
|
||
<AddressDialog ref="addressDialog" ></AddressDialog>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import { getGiftCardSendNotice } from '@/api/gift'
|
||
import giftTips from './giftTips.vue'
|
||
import AddressDialog from './AddressDialog.vue'
|
||
export default {
|
||
name: 'GiftCard',
|
||
components: {
|
||
giftTips,
|
||
AddressDialog
|
||
},
|
||
props: {
|
||
// 组件属性
|
||
card: {
|
||
type: Object,
|
||
default: () => {}
|
||
}
|
||
},
|
||
data() {
|
||
return {
|
||
// 组件数据
|
||
giftNotice: ''
|
||
}
|
||
},
|
||
methods: {
|
||
setAddress() {
|
||
this.$refs.addressDialog.open()
|
||
},
|
||
async showTips() {
|
||
// 获取发礼提示
|
||
getGiftCardSendNotice().then(res => {
|
||
this.$refs.giftTips.showTips = true
|
||
this.giftNotice = res.data
|
||
})
|
||
|
||
},
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style scoped>
|
||
.bg-image{
|
||
width: 586rpx;
|
||
height: 704rpx;
|
||
position: absolute;
|
||
top: 0;
|
||
}
|
||
.tips{
|
||
display: flex;
|
||
align-items: center;
|
||
margin-top: 40rpx;
|
||
position: absolute;
|
||
bottom: 50rpx;
|
||
}
|
||
.tip-text{
|
||
font-family: Source Han Sans SC;
|
||
font-weight: 500;
|
||
font-size: 28rpx;
|
||
color: #fff;
|
||
opacity: 0.6;
|
||
line-height: 36rpx;
|
||
}
|
||
.wrap-box{
|
||
width: 296rpx;
|
||
height: 296rpx;
|
||
}
|
||
.image-wrap{
|
||
width: 296rpx;
|
||
height: 296rpx;
|
||
border: 10rpx solid #FDF0D3;
|
||
border-radius: 30rpx;
|
||
position: absolute;
|
||
top: -60px;
|
||
}
|
||
.pro-image{
|
||
width: 296rpx;
|
||
height: 296rpx;
|
||
border-radius: 30rpx;
|
||
}
|
||
.auto-text-color {
|
||
color: #fff;
|
||
font-size: 24rpx;
|
||
opacity: 0.9;
|
||
}
|
||
.share-btn{
|
||
width: fit-content;
|
||
padding: 15rpx 30rpx;
|
||
border-radius: 100rpx;
|
||
font-size: 24rpx;
|
||
margin-top: 40rpx;
|
||
z-index: 999;
|
||
}
|
||
.address-btn{
|
||
width: fit-content;
|
||
padding: 20rpx 30rpx;
|
||
border-radius: 100rpx;
|
||
font-size: 32rpx;
|
||
font-weight: bold;
|
||
margin-top: 40rpx;
|
||
z-index: 999;
|
||
}
|
||
.gift-card-modal {
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
right: 0;
|
||
bottom: 0;
|
||
width: 586rpx;
|
||
height: 704rpx;
|
||
background-color: #C52733;
|
||
justify-content: center;
|
||
z-index: 999;
|
||
margin: auto;
|
||
border-radius: 16rpx;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: start;
|
||
}
|
||
|
||
.gift-card-content {
|
||
background-color: #fff;
|
||
padding: 20px;
|
||
border-radius: 10px;
|
||
width: 80%;
|
||
max-width: 300px;
|
||
}
|
||
</style>
|