276 lines
6.8 KiB
Vue
276 lines
6.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
|
||
v-model="message"
|
||
class="v12-font-28 v12-secondary-dark-text"
|
||
placeholder="礼笺轻启，礼藏心意"
|
||
cols="30"
|
||
rows="10"></textarea>
|
||
</view>
|
||
</view>
|
||
<view class="gift-good-card">
|
||
<view>
|
||
<image :src="goodsInfo.productInfo.image" mode="scaleToFill" class="cover-image"></image>
|
||
</view>
|
||
<view class="v12-ml-2 info-wrap">
|
||
<view class="v12-dark-text v12-font-bold v12-font-28 t-more">
|
||
{{ goodsInfo.productInfo.storeName }}
|
||
</view>
|
||
<view class="gift-sku">
|
||
{{ goodsInfo.productInfo.attrInfo.sku }}
|
||
</view>
|
||
<view class="v12-justify-between">
|
||
<view>
|
||
<text class="v12-primary-text v12-font-bold v12-font-22">￥</text>
|
||
<text class="v12-primary-text v12-font-bold v12-font-30">{{ goodsInfo.productInfo.otPrice }}</text>
|
||
</view>
|
||
<view>
|
||
<u-number-box
|
||
v-model="goodsInfo.cartNum"
|
||
:max="goodsInfo['productInfo']['attrInfo']['stock']"
|
||
integer
|
||
disabledInput
|
||
iconStyle="color: #fff"
|
||
class="num-step"
|
||
>
|
||
<template v-slot:minus>
|
||
<view class="v12-minus-btn v12-font-bold flex jc-center ai-center">
|
||
<u-icon name="minus" size="12" color="#FFFFFF"/>
|
||
</view>
|
||
</template>
|
||
<template v-slot:input>
|
||
<view class="num-input tc v12-num-input">{{ goodsInfo['cartNum'] }}</view>
|
||
</template>
|
||
<template v-slot:plus>
|
||
<view class="v12-plus-btn v12-font-bold flex jc-center ai-center v12-primary">
|
||
<u-icon name="plus" size="12" color="#FFFFFF"/>
|
||
</view>
|
||
</template>
|
||
</u-number-box>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</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,
|
||
message: '',
|
||
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]
|
||
})
|
||
},
|
||
/**
|
||
* 确认赠送
|
||
* @param {*}
|
||
*/
|
||
confirmGift() {
|
||
const params = {
|
||
orderKey: this.orderKey,
|
||
cartId: this.cartId,
|
||
couponId: this.couponId,
|
||
cover: this.selectedCover,
|
||
canTransfe: this.canTransfe
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="less" scoped>
|
||
.info-wrap{
|
||
width: 100%;
|
||
height: 200rpx;
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: space-between;
|
||
}
|
||
.v12-num-input{
|
||
height: 40rpx;
|
||
width: 40rpx;
|
||
border: 1px solid #E6E6E6;
|
||
line-height: 40rpx;
|
||
font-weight: bold;
|
||
font-size: 28rpx;
|
||
color: #333;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
.v12-minus-btn{
|
||
border-radius: 28rpx 0rpx 0rpx 28rpx;
|
||
border: 1px solid #E6E6E6;
|
||
background-color: rgba(208,208,208,0.39);
|
||
height: 40rpx;
|
||
width: 40rpx;
|
||
font-weight: bold;
|
||
}
|
||
.v12-plus-btn{
|
||
border-radius: 0rpx 28rpx 28rpx 0rpx;
|
||
border: 1px solid #C52733;
|
||
background-color: #C52733;
|
||
height: 40rpx;
|
||
width: 40rpx;
|
||
font-weight: bold;
|
||
}
|
||
.gift-sku{
|
||
font-size: 24rpx;
|
||
color: #333333;
|
||
border-radius: 124rpx;
|
||
border: 1px solid #999999;
|
||
padding: 5rpx 10rpx;
|
||
text-align: center;
|
||
margin-top: 20rpx;
|
||
width: fit-content;
|
||
}
|
||
.cover-image{
|
||
width: 200rpx;
|
||
height: 200rpx;
|
||
background: rgba(139,33,33,0.39);
|
||
border-radius: 16rpx;
|
||
}
|
||
.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{
|
||
background: #fff;
|
||
border-radius: 16rpx;
|
||
padding: 30rpx;
|
||
display: flex;
|
||
justify-content: flex-start;
|
||
align-items: center;
|
||
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> |