161 lines
3.8 KiB
Vue
161 lines
3.8 KiB
Vue
<template>
|
||
<view class="gift-page">
|
||
<view class="top-card">
|
||
<view class="v12-justify-between v12-pa-2">
|
||
<view>
|
||
<view></view>
|
||
<view class="v12-font-28 v12-secondary-dark-text">送礼寄语</view>
|
||
</view>
|
||
<view class="v12-primary-text v12-font-26">
|
||
<view @click="showCoverPicker = true">默认封面</view>
|
||
<view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="v12-px-2">
|
||
<view class="line"></view>
|
||
</view>
|
||
<view class="v12-pa-2 ">
|
||
<textarea class="v12-font-28 v12-secondary-dark-text" placeholder="礼笺轻启，礼藏心意" name="" id="" cols="30" rows="10"></textarea>
|
||
</view>
|
||
</view>
|
||
<view class="gift-good-card"></view>
|
||
<view class="swich-btn">
|
||
<view class="v12-font-28 v12-dark-text">是否支持好友转赠</view>
|
||
<view>
|
||
<u-switch v-model="canTransfe" ></u-switch>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="btn-wrap v12-mt-16 v12-justify-center">
|
||
<view class="gift-submit" @click="submitGift">付款并赠送</view>
|
||
</view>
|
||
<view class="tip-wrap v12-justify-center">
|
||
<view class="tip-text v12-mr-1">好友未收下礼包，将于24小时后自动退款</view>
|
||
<u-icon @click="showTips" name="error-circle" color="#666" size="28rpx"></u-icon>
|
||
</view>
|
||
<giftTips ref="giftTips" :richText="giftNotice"></giftTips>
|
||
<CoverPicker
|
||
:show.sync="showCoverPicker"
|
||
:list="coverList"
|
||
@confirm="onCoverConfirm"
|
||
/>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import { getGiftCardSendOrderConfirm } from '@/api/gift'
|
||
import giftTips from './components/giftTips.vue'
|
||
import CoverPicker from './components/CoverPicker.vue'
|
||
export default {
|
||
components: {
|
||
giftTips,
|
||
CoverPicker
|
||
},
|
||
data() {
|
||
return {
|
||
canTransfe: false,
|
||
cartId: '',
|
||
couponId: '',
|
||
coverList: [],
|
||
giftNotice: '',
|
||
showCoverPicker: false,
|
||
selectedCover: '',
|
||
orderKey: '',
|
||
goodsInfo: {}
|
||
}
|
||
},
|
||
onLoad(opts) {
|
||
console.log(opts, 'gift');
|
||
this.cartId = opts.cartId
|
||
this.couponId = opts.couponId
|
||
this.getGift()
|
||
},
|
||
methods: {
|
||
// 付款并赠送
|
||
submitGift() {
|
||
const params = {
|
||
cartId: this.cartId,
|
||
couponId: this.couponId,
|
||
cover: this.selectedCover,
|
||
canTransfe: this.canTransfe
|
||
}
|
||
},
|
||
onCoverConfirm(cover) {
|
||
this.selectedCover = cover.image
|
||
},
|
||
showTips() {
|
||
this.$refs.giftTips.showTips = true
|
||
},
|
||
getGift() {
|
||
const params = {
|
||
cartId: this.cartId,
|
||
}
|
||
getGiftCardSendOrderConfirm(params).then(res => {
|
||
this.coverList = res.data.giftCardTemplates
|
||
this.giftNotice = res.data.giftCardGiftNotice
|
||
this.orderKey = res.data.orderKey
|
||
this.goodsInfo = res.data.cartInfo[0]
|
||
})
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="less" scoped>
|
||
.tip-wrap{
|
||
position: absolute;
|
||
bottom: 100rpx;
|
||
left: 0;
|
||
margin: auto;
|
||
right: 0;
|
||
align-items: center;
|
||
}
|
||
.tip-text{
|
||
font-family: Source Han Sans SC;
|
||
font-weight: 500;
|
||
font-size: 28rpx;
|
||
color: #666666;
|
||
line-height: 36rpx;
|
||
}
|
||
.gift-submit{
|
||
width: 240rpx;
|
||
height: 80rpx;
|
||
background: rgba(197,39,51,1);
|
||
border-radius: 16rpx;
|
||
color: #fff;
|
||
line-height: 80rpx;
|
||
text-align: center;
|
||
font-size: 32rpx;
|
||
font-weight: 500;
|
||
}
|
||
.gift-page{
|
||
padding: 10rpx 20rpx;
|
||
}
|
||
.top-card{
|
||
height: 280rpx;
|
||
background: #fff;
|
||
border-radius: 16rpx;
|
||
}
|
||
.line{
|
||
width: 100%;
|
||
height: 2rpx;
|
||
background: #d2d2d2;
|
||
}
|
||
.gift-good-card{
|
||
height: 240rpx;
|
||
background: #fff;
|
||
border-radius: 16rpx;
|
||
margin-top: 30rpx;
|
||
}
|
||
.swich-btn{
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
height: 60rpx;
|
||
background: #fff;
|
||
border-radius: 30rpx;
|
||
padding: 5rpx 20rpx;
|
||
margin-top: 30rpx;
|
||
}
|
||
</style> |