466 lines
14 KiB
Vue
466 lines
14 KiB
Vue
<template>
|
||
<view class="dialog-conent" v-show="isLogin">
|
||
<view class="gift-card-modal" >
|
||
<image class="bg-image" :src="!card.isBlind ? card.cover : card.blindBoxImage" mode="widthFix" lazy-load="false"></image>
|
||
<view v-if="card.isBlind !== 1" class="image-wrap" :style="{
|
||
top: card.productImageY*2 + 'rpx',
|
||
left: card.productImageX*2+ 'rpx'
|
||
}">
|
||
<image v-if="!isTravelGroup" class="pro-image" :src="card.giftProducts[0].productImage" mode="aspectFit|aspectFill|widthFix" lazy-load="false">
|
||
|
||
</image>
|
||
<image v-if="isTravelGroup" class="pro-image" :src="card.travelGroupProduct.mainImage" mode="aspectFit|aspectFill|widthFix" lazy-load="false">
|
||
|
||
</image>
|
||
</view>
|
||
<view
|
||
class="good-story"
|
||
v-if="card.isBlind !== 1"
|
||
:style="{
|
||
right: (card.productStoryX*2 || 0) + 'rpx',
|
||
top: (card.productStoryY*2 || 0) + 'rpx'
|
||
}"
|
||
>
|
||
<view v-for="(line, j) in card.productStory ? card.productStory.split('/n') : productStory.split('/n')" :key="j">{{ line }}</view>
|
||
</view>
|
||
<view class="wrap-box">
|
||
|
||
</view>
|
||
<view class="auto-text-color">
|
||
<!-- {{ card.message || '礼笺轻启，礼藏心意' }} -->
|
||
</view>
|
||
|
||
</view>
|
||
<view v-if="!isTravelGroup" style="margin-top: 200rpx;">
|
||
<view class="blind-box" v-if="card.isBlind">
|
||
<u-icon :name="webUrl + '/orderIcon/礼物.png'" size="30" ></u-icon>
|
||
<text class="v12-font-30 v12-dark-text v12-font-bold v12-ml-2">您收到一份来自朋友的神秘礼物</text>
|
||
</view>
|
||
<view class="btn-wrap" style="margin-top: 0rpx;">
|
||
<button v-if="!isReceive && myGift.isCurrentUser !== 1" class="share-btn v12-white-text v12-primary" @click="setAddress(0)">
|
||
填写地址并收下
|
||
</button>
|
||
<button v-if="card.canTransfer !== 0 && !isReceive && myGift.isCurrentUser !== 1" open-type="share" class="share-btn share-btn-second v12-white v12-primary-text v12-d-flex" >
|
||
点击转赠给好友
|
||
<u-icon :name="webUrl + '/icon/share.png'" ></u-icon>
|
||
</button>
|
||
</view>
|
||
<view v-if="myGift.isCurrentUser === 1 && !card.isBlind" @click="toOrder" style="z-index: 10; display: flex;flex-direction: column;align-items: center;margin-top:200rpx;">
|
||
<view class="address-btn v12-white-text v12-primary">
|
||
您已领取礼包
|
||
</view>
|
||
<view class="info-btn v12-text-center v12-font-32 v12-mt-3" @click.stop="searchGift">我也要送礼</view>
|
||
<view class="info-btn v12-text-center v12-font-32 v12-mt-3">查看礼包详情>></view>
|
||
</view>
|
||
<view v-if="myGift.isCurrentUser === 1 && card.isBlind" style="z-index: 10; display: flex;flex-direction: column;align-items: center;margin-top:200rpx;">
|
||
<view style="width: fit-content;" class="address-btn v12-white-text v12-primary" @click="toOrder">
|
||
您已领取礼包，去看看>>
|
||
</view>
|
||
<view class="info-btn v12-text-center v12-font-32 v12-mt-3" @click.stop="searchGift">我也要送礼</view>
|
||
</view>
|
||
<view v-if="isReceive && myGift.isCurrentUser !== 1" @click="toHome" style="z-index: 10; display: flex;flex-direction: column;align-items: center;margin-top:200rpx;">
|
||
<view class="address-btn v12-white-text v12-primary">
|
||
礼包已被领取
|
||
</view>
|
||
<view class="info-btn v12-text-center v12-font-32 v12-mt-3" style="z-index: 10">去商城看看>></view>
|
||
</view>
|
||
</view>
|
||
<view v-if="isTravelGroup">
|
||
<view class="btn-wrap" v-if="card.isOverReceive === 0 && card.isUserReceive === 0">
|
||
<button class="share-btn v12-white-text v12-primary" @click="setShowAddressForm(true)">
|
||
填写信息并收下
|
||
</button>
|
||
<button v-if="card.canTransfer !== 0" open-type="share" class="share-btn share-btn-second v12-white v12-primary-text v12-d-flex" >
|
||
点击转赠给好友
|
||
<u-icon :name="webUrl + '/icon/share.png'" ></u-icon>
|
||
</button>
|
||
</view>
|
||
<view v-if="card.isOverReceive === 1" @click="toHome" style="z-index: 10; display: flex;flex-direction: column;align-items: center;margin-top:200rpx;">
|
||
<view class="address-btn v12-white-text v12-primary">
|
||
礼包已被领取
|
||
</view>
|
||
<view class="info-btn v12-text-center v12-font-32 v12-mt-3" style="z-index: 10">去商城看看>></view>
|
||
</view>
|
||
<view v-if="card.isUserReceive === 1 && card.isOverReceive === 0" style="z-index: 10; display: flex;flex-direction: column;align-items: center;margin-top:200rpx;">
|
||
<view style="width: fit-content;" class="address-btn v12-white-text v12-primary" @click="toOrder">
|
||
您已领取礼包，去看看>>
|
||
</view>
|
||
<view class="info-btn v12-text-center v12-font-32 v12-mt-3" @click.stop="searchGift">我也要送礼</view>
|
||
</view>
|
||
</view>
|
||
<view class="tips">
|
||
<view class="tip-text v12-mr-1" @click="showTips">
|
||
未领取礼包，将于24小时后自动退回
|
||
<u-icon name="error-circle" color="#666" size="24rpx"></u-icon>
|
||
</view>
|
||
</view>
|
||
<giftTips ref="giftTips" :richText="giftNotice"></giftTips>
|
||
<AddressDialog ref="addressDialog" @save="getReceive"></AddressDialog>
|
||
<AddressList ref="AddressList" :addressList="address" @save="getReceive"></AddressList>
|
||
<GiftAddressForm
|
||
ref="giftAddressForm"
|
||
:show="showAddressForm"
|
||
:unavailableDates="unavailableDates"
|
||
:mid="card.travelGroupProduct.id"
|
||
:minBookingDays="card.travelGroupProduct.minBookingDays"
|
||
@close="closeAddressForm"
|
||
@submit="handleAddressSubmit"
|
||
/>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import { getGiftCardSendNotice, getGiftCardReceive, receiveSojoumGroupBuyGift } from '@/api/gift'
|
||
import cookie from "@/utils/store/cookie";
|
||
import { getAddressList } from '@/api/user'
|
||
import giftTips from './giftTips.vue'
|
||
import GiftAddressForm from './GiftAddressForm.vue'
|
||
import AddressDialog from './AddressDialog.vue'
|
||
import AddressList from './AddressList.vue'
|
||
export default {
|
||
name: 'GiftCard',
|
||
components: {
|
||
giftTips,
|
||
GiftAddressForm,
|
||
AddressDialog,
|
||
AddressList
|
||
},
|
||
props: {
|
||
isTravelGroup: {
|
||
type: Boolean,
|
||
default: false
|
||
},
|
||
// 组件属性
|
||
card: {
|
||
type: Object,
|
||
default: () => {}
|
||
},
|
||
addr: {
|
||
type: Object,
|
||
default: () => {}
|
||
}
|
||
},
|
||
data() {
|
||
return {
|
||
productStory: '源自云南的宣威火腿月饼，/n以匠心手作，外皮酥香，/n内馅甜咸交融。/n每一口，都是月圆情浓的/n团圆滋味，载着滇地独特的/n饮食文化记忆。',
|
||
webUrl: this.$VUE_APP_RESOURCES_URL,
|
||
// 组件数据
|
||
giftNotice: '',
|
||
order: '',
|
||
address: [],
|
||
showAddressForm: false,
|
||
unavailableDates: ['2025-08-13', '2025-08-14', '2025-08-15', '2025-08-16', '2025-08-17', '2025-08-18', '2025-08-19', '2025-08-20', '2025-08-21', '2025-08-22', '2025-08-23']
|
||
}
|
||
},
|
||
computed: {
|
||
isReceive() {
|
||
const gitfNum = this.card.giftProducts && this.card.giftProducts.length
|
||
const isReceiveNum = this.card.giftProducts && this.card.giftProducts.filter(e => e.isReceive === 1).length
|
||
return gitfNum === isReceiveNum
|
||
},
|
||
isLogin() {
|
||
return !!cookie.get('login_status');
|
||
},
|
||
myGift() {
|
||
return this.card.giftProducts && this.card.giftProducts.filter(item => item.isCurrentUser === 1).length > 0 && this.card.giftProducts.filter(item => item.isCurrentUser === 1)[0] || this.card.giftProduct && this.card.giftProducts[0]
|
||
}
|
||
},
|
||
watch: {
|
||
addr: {
|
||
handler(newVal, oldVal) {
|
||
if (newVal && newVal.id) {
|
||
// this.address = newVal
|
||
this.setAddress(1)
|
||
}
|
||
},
|
||
deep: true
|
||
},
|
||
// 修改后的监听器
|
||
myGift: {
|
||
handler(newVal) {
|
||
this.order = newVal && newVal.orderId
|
||
},
|
||
deep: true,
|
||
immediate: true
|
||
}
|
||
},
|
||
methods: {
|
||
setShowAddressForm(show) {
|
||
this.showAddressForm = true
|
||
},
|
||
searchGift() {
|
||
this.$yrouter.push('/pages/shop/GoodsList/index?s=' +'送礼' )
|
||
},
|
||
// 分享到微信好友
|
||
toShare() {
|
||
// 分享到微信好友
|
||
},
|
||
toOrder() {
|
||
if (this.isTravelGroup) {
|
||
this.$yrouter.push({
|
||
path: '/pkg_product/views/sojoumOrderDetails',
|
||
query: {
|
||
id: this.order,
|
||
isView: 1
|
||
}
|
||
})
|
||
return
|
||
}
|
||
this.$yrouter.push({
|
||
path: "/pages/order/OrderDetails/index",
|
||
query: {
|
||
id: this.order
|
||
}
|
||
});
|
||
},
|
||
toHome() {
|
||
uni.switchTab({
|
||
url: '/pages/home/index'
|
||
})
|
||
},
|
||
getReceive(e) {
|
||
uni.showLoading({
|
||
title: '领取中...',
|
||
mask: true
|
||
})
|
||
// 领取礼包
|
||
getGiftCardReceive({
|
||
code: this.card.code,
|
||
recipientsNum : 1,
|
||
addressId: e
|
||
}).then(res => {
|
||
this.$refs.addressDialog.close()
|
||
this.$refs.AddressList.close()
|
||
this.order = res.data.orderId
|
||
this.$emit('receive', this.card.code)
|
||
uni.hideLoading()
|
||
}).finally(() => {
|
||
})
|
||
},
|
||
setAddress(flag) {
|
||
getAddressList().then(res => {
|
||
if (res.data.length === 0) {
|
||
this.$refs.addressDialog.open()
|
||
} else {
|
||
this.address = res.data
|
||
if(flag) return
|
||
this.$refs.AddressList.open()
|
||
}
|
||
})
|
||
},
|
||
|
||
closeAddressForm() {
|
||
this.showAddressForm = false;
|
||
},
|
||
|
||
handleAddressSubmit(formData) {
|
||
console.log(formData);
|
||
|
||
uni.showLoading({
|
||
title: '领取中...',
|
||
mask: true
|
||
});
|
||
// code string 礼品卡code
|
||
// realName string 真实姓名
|
||
// phone string 手机号码
|
||
// orderStartDate string 起始日期（yyyy-MM-dd）
|
||
// orderEndDate string 结束日期（yyyy-MM-dd）
|
||
// 调用领取礼包API
|
||
receiveSojoumGroupBuyGift({
|
||
code: this.card.code,
|
||
realName: formData.realName,
|
||
phone: formData.phone,
|
||
orderStartDate: formData.checkInDate,
|
||
orderEndDate: formData.checkOutDate
|
||
}).then(res => {
|
||
this.showAddressForm = false;
|
||
this.order = res.data.orderId;
|
||
this.$emit('receive', this.card.code);
|
||
uni.showToast({
|
||
title: '领取成功',
|
||
icon: 'success'
|
||
});
|
||
uni.reLaunch({ url: '/pkg_user/views/gift/receiveDone?obj=' + JSON.stringify(res.data) })
|
||
}).catch(() => {
|
||
uni.showToast({
|
||
title: '礼品卡已失效',
|
||
icon: 'none'
|
||
});
|
||
}).finally(() => {
|
||
// uni.hideLoading();
|
||
});
|
||
},
|
||
async showTips() {
|
||
// 获取发礼提示
|
||
getGiftCardSendNotice().then(res => {
|
||
this.$refs.giftTips.showTips = true
|
||
this.giftNotice = res.data
|
||
})
|
||
|
||
},
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style scoped>
|
||
.blind-box{
|
||
width: 578rpx;
|
||
height: 90rpx;
|
||
background: rgba(255,255,255,0.39);
|
||
box-shadow: 0rpx 2rpx 20rpx rgba(0,0,0,0.05);
|
||
border-radius: 16rpx;
|
||
line-height: 90rpx;
|
||
display: flex;
|
||
padding-left: 35rpx;
|
||
align-items: center;
|
||
}
|
||
.info-btn{
|
||
border: 1px solid #C52733;
|
||
color: #C52733;
|
||
width: 240rpx;
|
||
border-radius: 100rpx;
|
||
padding: 5rpx 40rpx;
|
||
line-height: 60rpx;
|
||
height: 60rpx;
|
||
font-weight: 600;
|
||
font-size: 32rpx;
|
||
white-space: nowrap;
|
||
}
|
||
.dialog-conent{
|
||
height: 100vh;
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: space-evenly;
|
||
align-items: center
|
||
}
|
||
.btn-wrap{
|
||
position: relative;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-content: center;
|
||
margin-top: 200rpx;
|
||
}
|
||
.bg-image{
|
||
width: 420rpx;
|
||
/* height: 560rpx; */
|
||
position: absolute;
|
||
border-radius: 16rpx;
|
||
top: 0;
|
||
}
|
||
.tips{
|
||
display: flex;
|
||
align-items: center;
|
||
margin-top: 40rpx;
|
||
position: absolute;
|
||
bottom: 50rpx;
|
||
width: 100%;
|
||
}
|
||
.tip-text{
|
||
font-family: Source Han Sans SC;
|
||
font-weight: 500;
|
||
font-size: 24rpx;
|
||
color: #666;
|
||
opacity: 0.6;
|
||
width: 100%;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
text-align: center;
|
||
line-height: 36rpx;
|
||
}
|
||
.wrap-box{
|
||
width: 296rpx;
|
||
height: 296rpx;
|
||
}
|
||
.image-wrap{
|
||
width: 320rpx;
|
||
height: 320rpx;
|
||
/*border: 10rpx solid #FDF0D3;*/
|
||
border-radius: 16rpx;
|
||
position: absolute;
|
||
overflow: hidden;
|
||
top: -140rpx;
|
||
right: 0;
|
||
margin: auto;
|
||
}
|
||
.pro-image{
|
||
width: 320rpx;
|
||
height: 320rpx;
|
||
border-radius: 16rpx;
|
||
/* border-radius: 30rpx; */
|
||
}
|
||
.auto-text-color {
|
||
color: #fff;
|
||
font-size: 32rpx;
|
||
opacity: 0.8;
|
||
margin-top: 150rpx;
|
||
width: 400rpx;
|
||
text-align: center;
|
||
}
|
||
.share-btn{
|
||
width: fit-content;
|
||
border-radius: 100rpx;
|
||
font-size: 32rpx;
|
||
margin-top: 40rpx;
|
||
z-index: 999;
|
||
align-items: center;
|
||
border: 1rpx solid #C52733 ;
|
||
font-weight: bold;
|
||
height: 80rpx;
|
||
line-height: 80rpx;
|
||
}
|
||
.share-btn-second{
|
||
margin-left: 20rpx;
|
||
}
|
||
.share-btn::before{
|
||
border: none;
|
||
}
|
||
.share-btn::after{
|
||
border: none ;
|
||
}
|
||
.address-btn{
|
||
width: fit-content;
|
||
padding: 5rpx 40rpx;
|
||
border-radius: 100rpx;
|
||
font-size: 32rpx;
|
||
font-weight: bold;
|
||
height: 60rpx;
|
||
line-height: 60rpx;
|
||
width: 240rpx;
|
||
/* margin-top: 40rpx; */
|
||
z-index: 999;
|
||
text-align: center;
|
||
}
|
||
.gift-card-modal {
|
||
height: 560rpx;
|
||
width: 420rpx;
|
||
justify-content: center;
|
||
z-index: 999;
|
||
/* margin-top: 100rpx; */
|
||
zoom: 1.2;
|
||
border-radius: 16rpx;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: start;
|
||
position: relative;
|
||
}
|
||
|
||
.gift-card-content {
|
||
background-color: #fff;
|
||
padding: 20px;
|
||
border-radius: 10px;
|
||
width: 80%;
|
||
max-width: 300px;
|
||
}
|
||
.good-story{
|
||
position: absolute;
|
||
color: #fff;
|
||
height: 160px;
|
||
writing-mode: vertical-rl;
|
||
color: #ffefd2;
|
||
font-size: 12px;
|
||
line-height: 16px;
|
||
}
|
||
</style>
|