542 lines
15 KiB
Vue
542 lines
15 KiB
Vue
<template>
|
||
<view class="gift-page">
|
||
<view class="top-card" v-if="!isPayOk">
|
||
<view class="v12-justify-between v12-pa-2">
|
||
<view>
|
||
<view></view>
|
||
<view class="v12-font-28 v12-secondary-dark-text v12-d-flex">
|
||
<u-icon :name="webUrl + '/icon/gift-primary.png'"></u-icon>
|
||
送礼寄语
|
||
</view>
|
||
</view>
|
||
<view class="v12-primary-text v12-font-26 v12-d-flex v12-align-center">
|
||
<image class="custom-cover" :src="webUrl + '/icon/custom.png'" mode="heightFix" lazy-load="false">
|
||
|
||
</image>
|
||
<view @click="showCoverPicker = true">{{ cover }}封面</view>
|
||
<view>
|
||
<u-icon name="arrow-right" color="#c52733"></u-icon>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="v12-px-2">
|
||
<view class="line"></view>
|
||
</view>
|
||
<view class="v12-pa-2 ">
|
||
<u-textarea
|
||
v-model="message"
|
||
placeholderClass="v12-font-28"
|
||
placeholder="礼笺轻启，礼藏心意"
|
||
maxlength="30"
|
||
border="none"
|
||
count
|
||
ref="textarea"
|
||
cols="30"
|
||
@input="messageChange"
|
||
rows="10"></u-textarea>
|
||
</view>
|
||
</view>
|
||
<view class="gift-good-card">
|
||
<view class="v12-align-center v12-justify-start">
|
||
<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">{{ payPrice }}</text>
|
||
</view>
|
||
<view>
|
||
|
||
<u-number-box
|
||
v-if="!isPayOk"
|
||
v-model="goodsInfo.cartNum"
|
||
:max="goodsInfo['productInfo']['attrInfo']['stock']"
|
||
integer
|
||
iconStyle="color: #fff"
|
||
class="num-step"
|
||
@change="numberChange"
|
||
|
||
>
|
||
<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>
|
||
<input type="number" @input="numberChange" class="num-input tc v12-num-input" v-model="goodsInfo['cartNum']" />
|
||
</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 v-else> x{{ goodsInfo['cartNum'] }} </view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<u-divider v-if="isPayOk"></u-divider>
|
||
<view class="v12-font-26 v12-secondary-dark-text" v-if="isPayOk">
|
||
赠言：{{ message || '礼笺轻启，礼藏心意'}}
|
||
</view>
|
||
</view>
|
||
<view class="swich-btn" v-if="!isPayOk">
|
||
<view class="v12-font-28 v12-dark-text">是否支持好友转赠</view>
|
||
<view>
|
||
<u-switch v-model="canTransfer" ></u-switch>
|
||
</view>
|
||
</view>
|
||
<button v-if="isPayOk" open-type="share" class="share-btn" >
|
||
<view class="v12-font-28 v12-primary-text v12-align-center">
|
||
<u-icon :name="webUrl + '/icon/gift-primary.png'" size="18"></u-icon>
|
||
点击送给朋友</view>
|
||
<view class="share-icon" >
|
||
<u-icon :name="webUrl + '/icon/share.png'" ></u-icon>
|
||
</view>
|
||
</button>
|
||
<view class="btn-wrap v12-mt-16 v12-justify-center" v-if="!isPayOk">
|
||
<view class="gift-submit" @click="showPayPicker = true">付款并赠送</view>
|
||
</view>
|
||
<view class="btn-wrap v12-mt-16 v12-justify-center" v-if="isPayOk">
|
||
<view class="gift-submit" @click="makeAgain">再送一份</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"
|
||
:product="goodsInfo.productInfo"
|
||
@confirm="onCoverConfirm"
|
||
:index="defaultIndex"
|
||
:message="message"
|
||
/>
|
||
<passkeyborad
|
||
ref='payPwdPop'
|
||
showMoney
|
||
:money="payPrice"
|
||
:show="isShowPayPwdPop"
|
||
@close="isShowPayPwdPop = false"
|
||
@finish="pwdPopFinish"
|
||
/>
|
||
<PayPicker
|
||
ref="payPicker"
|
||
:show.sync="showPayPicker"
|
||
@confirm="onPayConfirm"
|
||
/>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import passkeyborad from '@/components/yzc-paykeyboard/yzc-paykeyboard'
|
||
import { getGiftCardSendOrderConfirm, getGiftCardSendOrder, getGiftCardSendOrderAmount, getGiftCardResend } from '@/api/gift'
|
||
import { weappPay } from "@/libs/wechat";
|
||
import {mapGetters} from "vuex";
|
||
import giftTips from './components/giftTips.vue'
|
||
import CoverPicker from './components/CoverPicker.vue'
|
||
import PayPicker from './components/PayPicker.vue';
|
||
export default {
|
||
components: {
|
||
giftTips,
|
||
CoverPicker,
|
||
PayPicker,
|
||
passkeyborad
|
||
},
|
||
data() {
|
||
return {
|
||
webUrl: this.$VUE_APP_RESOURCES_URL,
|
||
canTransfer: false,
|
||
message: '',
|
||
cartId: '',
|
||
couponId: '',
|
||
coverList: [],
|
||
giftNotice: '',
|
||
showCoverPicker: false,
|
||
showPayPicker: false,
|
||
selectedCover: '',
|
||
giftImage: '',
|
||
orderKey: '',
|
||
goodsInfo: {},
|
||
cover: '默认',
|
||
orderGroupInfo: {
|
||
priceGroup: {}
|
||
},
|
||
templateId: '',
|
||
isShowPayPwdPop: false,
|
||
payPassword: '',
|
||
payType: '',
|
||
isPayOk: false,
|
||
giftKey: '',
|
||
payPrice: 0,
|
||
orderId: '',
|
||
defaultIndex:0
|
||
}
|
||
},
|
||
onLoad(opts) {
|
||
this.cartId = opts.cartId
|
||
this.couponId = opts.couponId
|
||
this.getGift()
|
||
},
|
||
computed: mapGetters(["userInfo"]),
|
||
onShareAppMessage() {
|
||
return {
|
||
title: this.message || '礼笺轻启，礼藏心意',
|
||
path: `/pkg_user/views/gift/receive?code=${this.giftKey}`,
|
||
imageUrl: this.giftImage
|
||
}
|
||
},
|
||
onReady() {
|
||
this.$nextTick(() => {
|
||
this.$refs.textarea.setFormatter(val => {
|
||
return val.length > 30 ? val.substring(0, 30) : val
|
||
})
|
||
})
|
||
},
|
||
methods: {
|
||
makeAgain() {
|
||
const params = {
|
||
orderId: this.orderId,
|
||
}
|
||
getGiftCardResend(params).then(res => {
|
||
this.isPayOk = false
|
||
this.coverList = [...res.data.giftCardTemplates, res.data.specialGiftCardTemplate]
|
||
this.cartId = res.data.cartInfo[0].id
|
||
this.giftNotice = res.data.giftCardGiftNotice
|
||
this.orderKey = res.data.orderKey
|
||
this.goodsInfo = res.data.cartInfo[0]
|
||
this.templateId = res.data.specialGiftCardTemplate.id
|
||
this.defaultIndex = this.coverList.findIndex(item => item.id === this.templateId)
|
||
console.log(this.defaultIndex, 'defaultIndex');
|
||
this.selectedCover = res.data.specialGiftCardTemplate.cover
|
||
this.giftImage = res.data.specialGiftCardTemplate.image
|
||
this.couponId = ''
|
||
this.computedPrice(this.goodsInfo.cartNum)
|
||
})
|
||
},
|
||
messageChange(e) {
|
||
this.message = e.substring(0, 30)
|
||
},
|
||
numberChange(e) {
|
||
this.computedPrice(e.value)
|
||
},
|
||
computedPrice(num) {
|
||
const params = {
|
||
cartId: this.cartId,
|
||
couponId: this.couponId,
|
||
cartNum : num,
|
||
}
|
||
getGiftCardSendOrderAmount(this.orderKey, params).then(res => {
|
||
this.payPrice = res.data.result.payPrice
|
||
this.$forceUpdate()
|
||
})
|
||
},
|
||
pwdPopFinish(payPwd) {
|
||
this.payPassword = payPwd;
|
||
this.confirmGift(true);
|
||
},
|
||
onPayConfirm(e) {
|
||
this.payType = e
|
||
this.confirmGift(false)
|
||
},
|
||
onCoverConfirm(cover) {
|
||
this.cover = cover.name
|
||
this.templateId = cover.id
|
||
this.selectedCover = cover.cover
|
||
this.giftImage = cover.image
|
||
},
|
||
showTips() {
|
||
this.$refs.giftTips.showTips = true
|
||
},
|
||
getGift() {
|
||
const params = {
|
||
cartId: this.cartId,
|
||
}
|
||
getGiftCardSendOrderConfirm(params).then(res => {
|
||
this.coverList = res.data.giftCardTemplates.map(e => e.id).includes(res.data.specialGiftCardTemplate.id) ? [...res.data.giftCardTemplates] : [...res.data.giftCardTemplates, res.data.specialGiftCardTemplate]
|
||
this.giftNotice = res.data.giftCardGiftNotice
|
||
this.orderKey = res.data.orderKey
|
||
this.goodsInfo = res.data.cartInfo[0]
|
||
this.templateId = res.data.specialGiftCardTemplate.id
|
||
this.selectedCover = res.data.specialGiftCardTemplate.cover
|
||
this.giftImage = res.data.specialGiftCardTemplate.image
|
||
this.defaultIndex = this.coverList.findIndex(item => item.id === this.templateId)
|
||
console.log(this.defaultIndex, 'defaultIndex');
|
||
if(!this.couponId) {
|
||
this.couponId = res.data.couponList.usable[0] && res.data.couponList.usable[0].id || ''
|
||
}
|
||
this.computedPrice(this.goodsInfo.cartNum)
|
||
})
|
||
},
|
||
/**
|
||
* 确认赠送
|
||
* @param {*}
|
||
*/
|
||
confirmGift(isPay) {
|
||
if(!isPay && this.payType === 'yue') {
|
||
//先判断用户是否绑定过手机
|
||
if (this.userInfo.phone) {
|
||
//再判断用户是否设置过支付密码
|
||
if (this.userInfo.hasPwdPay) {
|
||
//显示输入支付密码
|
||
this.isShowPayPwdPop = true;
|
||
} else {
|
||
//设置支付密码
|
||
this.$yrouter.push("/pkg_user/views/payPassword?isSetMode=true");
|
||
}
|
||
} else {
|
||
//跳转到绑定手机
|
||
this.$yrouter.push("/pkg_user/views/bindPhone");
|
||
}
|
||
return
|
||
}
|
||
|
||
uni.showLoading({
|
||
title: "生成订单中"
|
||
});
|
||
const params = {
|
||
orderKey: this.orderKey,
|
||
from: 'routine',
|
||
cartId: this.cartId,
|
||
couponId: this.couponId,
|
||
recipientsNum: this.goodsInfo.cartNum,
|
||
templateId: this.templateId,
|
||
message : this.message || '礼笺轻启，礼藏心意',
|
||
cover: this.selectedCover,
|
||
canTransfer: this.canTransfer ? 1 : 0,
|
||
payType: this.payType,
|
||
seckillId: this.orderGroupInfo.seckill_id,
|
||
combinationId: this.orderGroupInfo.combination_id,
|
||
bargainId: this.orderGroupInfo.bargain_id,
|
||
}
|
||
if (this.payType == 'yue') {
|
||
params.passwordPay = this.payPassword;
|
||
}
|
||
getGiftCardSendOrder(this.orderKey, params).then(res => {
|
||
uni.hideLoading();
|
||
|
||
const data = res.data;
|
||
this.giftKey = data.giftCard.code;
|
||
this.orderId = data.result.orderId || ''
|
||
switch (data.status) {
|
||
case "ORDER_EXIST":
|
||
case "EXTEND_ORDER":
|
||
uni.showToast({
|
||
title: res.msg,
|
||
icon: "none",
|
||
duration: 2000
|
||
});
|
||
|
||
break;
|
||
case "PAY_DEFICIENCY":
|
||
break;
|
||
|
||
case "PAY_ERROR":
|
||
uni.showToast({
|
||
title: res.msg,
|
||
icon: "none",
|
||
duration: 2000
|
||
});
|
||
|
||
break;
|
||
case "SUCCESS":
|
||
uni.showToast({
|
||
title: res.msg,
|
||
icon: "none",
|
||
duration: 2000
|
||
});
|
||
this.isPayOk = true;
|
||
break;
|
||
case "WECHAT_H5_PAY":
|
||
// H5支付
|
||
|
||
setTimeout(() => {
|
||
// location.href = data.result.jsConfig.mweb_url;
|
||
}, 100);
|
||
break;
|
||
case "WECHAT_PAY":
|
||
// 小程序支付
|
||
weappPay(data.result.jsConfig).then((e) => {
|
||
uni.showToast({
|
||
title: res.msg,
|
||
icon: "none",
|
||
duration: 2000
|
||
});
|
||
this.isPayOk = true;
|
||
|
||
}).catch(err => {
|
||
this.makeAgain()
|
||
uni.showToast({
|
||
title: '支付取消,请在我的礼品卡中完成支付',
|
||
icon: "none",
|
||
duration: 3000
|
||
});
|
||
}).finally(() => {
|
||
|
||
})
|
||
break;
|
||
|
||
case "WECHAT_APP_PAY":
|
||
// APP支付
|
||
weappPay(data.result.jsConfig).finally(() => {
|
||
|
||
});
|
||
break;
|
||
}
|
||
}) .catch(err => {
|
||
console.log(err);
|
||
uni.hideLoading();
|
||
uni.showToast({
|
||
title:err.msg,
|
||
icon: "none",
|
||
duration: 2000
|
||
});
|
||
}).finally(() => {
|
||
this.isShowPayPwdPop = false;
|
||
this.$refs.payPwdPop.clear();//清空支付密码
|
||
this.$refs.payPwdPop.close();//关闭支付密码弹窗
|
||
});
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
<style>
|
||
.gift-page .u-number-box input {
|
||
height: 40rpx !important;
|
||
}
|
||
</style>
|
||
<style lang="less" scoped>
|
||
.custom-cover{
|
||
height: 40rpx;
|
||
}
|
||
.info-wrap{
|
||
width: 100%;
|
||
height: 200rpx;
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: space-between;
|
||
}
|
||
.v12-num-input{
|
||
height: 56rpx;
|
||
width: 56rpx;
|
||
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;
|
||
background-color: rgba(208,208,208,0.39);
|
||
border: 1px solid 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;
|
||
|
||
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;
|
||
}
|
||
.share-btn{
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
background: #fff;
|
||
border-radius: 30rpx;
|
||
padding: 5rpx 20rpx;
|
||
margin-top: 30rpx;
|
||
border: none;
|
||
}
|
||
.share-btn::after {
|
||
border: none;
|
||
}
|
||
</style> |