mall-uniapp/pages/goods/cashier/index.vue

768 lines
20 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters!

This file contains ambiguous Unicode characters that may be confused with others in your current locale. If your use case is intentional and legitimate, you can safely ignore this warning. Use the Escape button to highlight these characters.

<template>
<view class="page" v-if="payPriceShow">
<view class="pay-price">
<view class="price">
<text class="unit"></text>
<numberScroll :num='(payPriceShow / 100.0).toFixed(2)' color="#E93323" width='30' height='50' fontSize='50' />
</view>
<view class="count-down">
支付剩余时间
<countDown :is-day="false" :tip-text="' '" :day-text="' '" :hour-text="' : '" :minute-text="' : '" :second-text="' '"
:datatime="invalidTime / 1000" :is-col="true" :bgColor="bgColor" />
</view>
</view>
<view class="payment">
<view class="title">
支付方式
</view>
<view class="item acea-row row-between-wrapper" v-for="(item,index) in cartArr" :key="index"
v-show='item.payStatus' @click="payType(item.number || 0, item.value, index, item.channelCode)">
<view class="left acea-row row-between-wrapper">
<view class="iconfont" :class="item.icon"></view>
<view class="text">
<view class="name">{{item.name}}</view>
<view class="info" v-if="item.value == 'yue'">
{{item.title}} <span class="money">¥{{ item.number }}</span>
</view>
<view class="info" v-else>{{item.title}}</view>
</view>
</view>
<view class="iconfont" :class="active==index?'icon-xuanzhong11 font-num':'icon-weixuan'"></view>
</view>
</view>
<view class="btn">
<view class="button acea-row row-center-wrapper" @click='goPay(number, paytype, channelCode)'>确认支付</view>
<view class="wait-pay" @click="waitPay">暂不支付</view>
</view>
<view v-show="false" v-html="formContent"></view>
</view>
</template>
<script>
import CountDown from "@/components/countDown";
import numberScroll from '@/components/numberScroll.vue'
import * as PayOrderApi from '@/api/pay/order.js';
export default {
components: {
CountDown,
numberScroll
},
data() {
return {
bgColor: {
'bgColor': '#fff',
'Color': '#E93323',
'width': '44rpx',
'timeTxtwidth': '16rpx',
'isDay': true
},
checked: false,
datatime: 1676344056, // 支付的过期时间
// 支付方式
cartArr: [{
"name": '微信支付',
"icon": "icon-weixin2",
value: 'weixin',
title: '使用微信快捷支付',
payStatus: 1,
"channelCode": "wx_pub" // TODO 芋艿:未来要考虑各种端
},
{
"name": '支付宝支付',
"icon": "icon-zhifubao",
value: 'alipay',
title: '使用支付宝支付',
payStatus: 1,
"channelCode": "alipay_wap" // TODO 芋艿:未来要考虑各种端
},
{
"name": '余额支付',
"icon": "icon-yuezhifu",
value: 'yue',
title: '可用余额',
payStatus: 1,
}],
orderId: 0,
// fromType: '', // TODO 芋艿:没用
active: 0,
payPrice: 0,
payPriceShow: 0,
payPostage: 0,
invalidTime: 0,
initIn: false,
jumpData: {
orderId: '',
msg: ''
},
formContent: '',
channelCode: '', // 选中的支付渠道
form: { // 展示形式form
html: '',
},
}
},
watch: {
cartArr: {
handler(newV, oldValue) {
let newPayList = [];
newV.forEach((item, index) => {
if (item.payStatus) {
item.index = index;
newPayList.push(item)
}
});
this.active = newPayList[0].index;
this.paytype = newPayList[0].value;
this.number = newPayList[0].number || 0;
this.channelCode = newPayList[0].channelCode || '';
},
immediate: true,
deep: true
}
},
onLoad(options) {
if (options.order_id) this.orderId = options.order_id
if (options.from_type) this.fromType = options.from_type
this.getCashierOrder()
},
onShow() {
let options = wx.getEnterOptionsSync();
console.log(options)
if (options.scene == '1038' && options.referrerInfo.appId == 'wxef277996acc166c3' && this.initIn) {
// 代表从收银台小程序返回
let extraData = options.referrerInfo.extraData;
this.initIn = false
if (!extraData) {
// "当前通过物理按键返回,未接收到返参,建议自行查询交易结果";
this.$util.Tips({
title: '取消支付'
}, {
tab: 5,
url: `/pages/goods/order_pay_status/index?order_id=${this.orderId}&msg=${this.$t(`取消支付`)}&type=3&totalPrice=${this.payPriceShow}&status=2`
});
} else {
if (extraData.code == 'success') {
this.$util.Tips({
title: '支付成功',
icon: 'success'
}, {
tab: 5,
url: `/pages/goods/order_pay_status/index?order_id=${this.orderId}&msg=${this.jumpData.msg}&type=3&totalPrice=${this.payPriceShow}`
});
} else if (extraData.code == 'cancel') {
// "支付已取消";
this.$util.Tips({
title: '取消支付'
}, {
tab: 5,
url: `/pages/goods/order_pay_status/index?order_id=${this.orderId}&msg=${this.$t(`取消支付`)}&type=3&totalPrice=${this.payPriceShow}&status=2`
});
} else {
// "支付失败:" + extraData.errmsg;
uni.reLaunch({
url: `/pages/goods/order_pay_status/index?order_id=${this.orderId}&msg=${this.$t(`支付失败`)}&totalPrice=${this.payPriceShow}`
})
}
}
}
},
methods: {
getCashierOrder() {
uni.showLoading({
title: '创建订单中'
});
PayOrderApi.getOrder(this.orderId).then(res => {
console.log(res)
this.payPrice = this.payPriceShow = res.data.price
this.payPostage = res.data.pay_postage
this.invalidTime = res.data.expireTime
// 微信支付是否开启 TODO 芋艿:强制开启
// this.cartArr[0].payStatus = res.data.wechat_pay_status || 0
this.cartArr[0].payStatus = res.data.wechat_pay_status || 1
// 支付宝是否开启 TODO 芋艿:强制开启
// this.cartArr[1].payStatus = res.data.ali_pay_status || 0;
this.cartArr[1].payStatus = res.data.ali_pay_status || 1;
//#ifdef MP
this.cartArr[1].payStatus = false;
//#endif
// 余额支付是否开启
// that.cartArr[2].title = '可用余额:' + res.data.userInfo.now_money;
this.cartArr[2].number = res.data.now_money;
this.cartArr[2].payStatus = res.data.yue_pay_status
uni.hideLoading();
}).catch(err => {
uni.hideLoading();
return this.$util.Tips({
title: err
})
})
},
payType(number, paytype, index, channelCode) {
this.active = index;
this.paytype = paytype;
this.number = number;
this.channelCode = channelCode
this.payPriceShow = this.payPrice;
},
formpost(url, postData) {
let tempform = document.createElement("form");
tempform.action = url;
tempform.method = "post";
tempform.target = "_self";
tempform.style.display = "none";
if (postData) {
for (let x in postData) {
let opt = document.createElement("input");
opt.name = x;
opt.value = postData[x];
tempform.appendChild(opt);
}
}
document.body.appendChild(tempform);
this.$nextTick(e => {
tempform.submit();
})
},
waitPay() {
uni.reLaunch({
url: '/pages/goods/order_pay_status/index?order_id=' + this.orderId + '&msg=取消支付&type=3' +
'&status=2&totalPrice=' + this.payPriceShow
})
},
goPay(number, paytype, channelCode) {
let that = this;
if (!that.orderId) return that.$util.Tips({
title: '请选择要支付的订单'
});
if (paytype === 'yue' && parseFloat(number) < parseFloat(that.payPriceShow)) return that.$util.Tips({
title: '余额不足'
});
uni.showLoading({
title: '支付中'
});
if (paytype === 'friend' && that.orderId) {
uni.hideLoading();
return uni.navigateTo({
url: '/pages/users/payment_on_behalf/index?order_id=' + that.orderId + '&spread=' +
this.$store.state.app.uid,
success: res => {},
fail: () => {},
complete: () => {}
});
}
PayOrderApi.submitOrder({
id: that.orderId,
channelCode: channelCode,
displayMode: 'url', // TODO 芋艿:后续可以优化
// TODO 芋艿:下面是他们原始的参数
uni: that.orderId,
paytype: paytype,
type: that.friendPay ? 1 : 0,
// TODO 芋艿:不需要传递 quitUrl因为支付宝 pc 和 wap 如果不传递,则会调回到原前台页面;
// TODO 芋艿returnUrl 的时候,默认跳转到支付结果页;如果支付成功,则展示支付成功的信息;如果支付取消,则跳转到详情页;
// #ifdef H5
quitUrl: location.port ? location.protocol + '//' + location.hostname + ':' + location
.port +
'/pages/goods/order_details/index?order_id=' + this.orderId : location.protocol +
'//' + location.hostname +
'/pages/goods/order_details/index?order_id=' + this.orderId
// #endif
// #ifdef APP-PLUS
quitUrl: '/pages/goods/order_details/index?order_id=' + this.orderId
// #endif
}).then(res => {
// TODO 芋艿:临时做技术打样的
this.formpost(res.data.displayContent)
if (true) {
return;
}
let status = res.data.status,
orderId = res.data.result.orderId,
jsConfig = res.data.result.jsConfig,
goPages = '/pages/goods/order_pay_status/index?order_id=' + this.orderId + '&msg=' +
res
.msg +
'&type=3' + '&totalPrice=' + this.payPriceShow,
friendPay = '/pages/users/payment_on_behalf/index?order_id=' + this.orderId +
'&spread=' +
this.$store.state.app.uid
switch (status) {
case 'ORDER_EXIST':
case 'EXTEND_ORDER':
uni.hideLoading();
return that.$util.Tips({
title: res.msg
}, {
tab: 5,
url: goPages
});
case 'ALLINPAY_PAY':
uni.hideLoading();
// #ifdef MP
this.initIn = true
wx.openEmbeddedMiniProgram({
appId: 'wxef277996acc166c3',
extraData: {
cusid: jsConfig.cusid,
appid: jsConfig.appid,
version: jsConfig.version,
trxamt: jsConfig.trxamt,
reqsn: jsConfig.reqsn,
notify_url: jsConfig.notify_url,
body: jsConfig.body,
remark: jsConfig.remark,
validtime: jsConfig.validtime,
randomstr: jsConfig.randomstr,
paytype: jsConfig.paytype,
sign: jsConfig.sign,
signtype: jsConfig.signtype
}
})
this.jumpData = {
orderId: res.data.result.orderId,
msg: res.msg,
}
// #endif
// #ifdef APP-PLUS
plus.runtime.openURL(jsConfig.payinfo);
setTimeout(e => {
uni.reLaunch({
url: goPages
})
}, 1000)
// #endif
// #ifdef H5
this.formpost(res.data.result.pay_url, jsConfig)
// #endif
break;
case 'PAY_ERROR':
uni.hideLoading();
return that.$util.Tips({
title: res.msg
}, {
tab: 5,
url: goPages
});
break;
case 'SUCCESS':
uni.hideLoading();
if (paytype !== 'friend') {
return that.$util.Tips({
title: res.msg,
icon: 'success'
}, {
tab: 4,
url: goPages
});
} else {
return that.$util.Tips({
title: res.msg,
icon: 'success'
}, {
tab: 4,
url: friendPay
});
}
break;
case 'WECHAT_PAY':
that.toPay = true;
// #ifdef MP
/* that.toPay = true; */
let mp_pay_name = ''
if (uni.requestOrderPayment) {
mp_pay_name = 'requestOrderPayment'
} else {
mp_pay_name = 'requestPayment'
}
uni[mp_pay_name]({
timeStamp: jsConfig.timestamp,
nonceStr: jsConfig.nonceStr,
package: jsConfig.package,
signType: jsConfig.signType,
paySign: jsConfig.paySign,
success: function(res) {
uni.hideLoading();
if (that.BargainId || that.combinationId || that.pinkId ||
that
.seckillId || that.discountId)
return that.$util.Tips({
title: that.$t(`支付成功`),
icon: 'success'
}, {
tab: 4,
url: goPages
});
return that.$util.Tips({
title: '支付成功',
icon: 'success'
}, {
tab: 5,
url: goPages
});
},
fail: function(e) {
uni.hideLoading();
return that.$util.Tips({
title: '取消支付'
}, {
tab: 5,
url: goPages + '&status=2'
});
},
complete: function(e) {
uni.hideLoading();
//关闭当前页面跳转至订单状态
if (res.errMsg == 'requestPayment:cancel' || e.errMsg == 'requestOrderPayment:cancel') return that.$util
.Tips({
title: '取消支付'
}, {
tab: 5,
url: goPages + '&status=2'
});
},
})
// #endif
// #ifdef H5
this.$wechat.pay(res.data.result.jsConfig).then(res => {
return that.$util.Tips({
title: '支付成功',
icon: 'success'
}, {
tab: 5,
url: goPages
});
}).catch(res => {
if (!this.$wechat.isWeixin()) {
uni.redirectTo({
url: goPages + '&msg=' + that.$t(`支付失败`) +
'&status=2'
// '&msg=支付失败&status=2'
})
}
if (res.errMsg == 'chooseWXPay:cancel') return that.$util.Tips({
title: '取消支付'
}, {
tab: 5,
url: goPages + '&status=2'
});
})
// #endif
// #ifdef APP-PLUS
uni.requestPayment({
provider: 'wxpay',
orderInfo: jsConfig,
success: (e) => {
let url = goPages;
uni.showToast({
title: '支付成功'
})
setTimeout(res => {
uni.redirectTo({
url: url
})
}, 2000)
},
fail: (e) => {
let url = '/pages/goods/order_pay_status/index?order_id=' +
orderId +
'&msg=' + '支付失败';
uni.showModal({
content: '支付失败',
showCancel: false,
success: function(res) {
if (res.confirm) {
uni.redirectTo({
url: url
})
} else if (res.cancel) {}
}
})
},
complete: () => {
uni.hideLoading();
},
});
// #endif
break;
case 'PAY_DEFICIENCY':
uni.hideLoading();
//余额不足
return that.$util.Tips({
title: res.msg
}, {
tab: 5,
url: goPages + '&status=1'
});
break;
case "WECHAT_H5_PAY":
uni.hideLoading();
that.$util.Tips({
title: '等待支付中'
}, {
tab: 4,
url: goPages + '&status=0'
});
setTimeout(() => {
location.href = res.data.result.jsConfig.h5_url;
}, 1500);
break;
case 'ALIPAY_PAY':
//#ifdef H5
uni.hideLoading();
that.$util.Tips({
title: '等待支付中'
}, {
tab: 4,
url: goPages + '&status=0'
});
that.formContent = res.data.result.jsConfig;
setTimeout(() => {
document.getElementById('alipaysubmit').submit();
}, 1500);
//#endif
// #ifdef MP
uni.navigateTo({
url: `/pages/users/alipay_invoke/index?id=${orderId}&link=${jsConfig.qrCode}`
});
// #endif
// #ifdef APP-PLUS
uni.requestPayment({
provider: 'alipay',
orderInfo: jsConfig,
success: (e) => {
uni.showToast({
title: '支付成功'
})
let url = '/pages/goods/order_pay_status/index?order_id=' +
orderId +
'&msg=' + '支付成功';
setTimeout(res => {
uni.redirectTo({
url: url
})
}, 2000)
},
fail: (e) => {
let url = '/pages/goods/order_pay_status/index?order_id=' +
orderId +
'&msg=' + '支付失败';
uni.showModal({
content: '支付失败',
showCancel: false,
success: function(res) {
if (res.confirm) {
uni.redirectTo({
url: url
})
} else if (res.cancel) {}
}
})
},
complete: () => {
uni.hideLoading();
},
});
// #endif
break;
}
}).catch(err => {
uni.hideLoading();
return that.$util.Tips({
title: err
}, () => {
that.$emit('onChangeFun', {
action: 'pay_fail'
});
});
})
}
}
}
</script>
<style lang="scss" scoped>
.page {
.pay-price {
display: flex;
justify-content: center;
flex-direction: column;
align-items: center;
padding: 50rpx 0 40rpx 0;
.price {
color: #E93323;
margin-bottom: 20rpx;
display: flex;
align-items: flex-end;
.unit {
font-size: 34rpx;
font-weight: 500;
line-height: 41rpx;
}
.num {
font-size: 50rpx;
font-weight: 600;
}
}
.count-down {
display: flex;
align-items: center;
background-color: #fff;
padding: 8rpx 28rpx;
border-radius: 40rpx;
font-size: 24rpx;
color: #E93323;
.time {
margin-top: 0 !important;
}
/deep/.red {
margin: 0 !important;
}
}
}
.payment {
width: 690rpx;
border-radius: 14rpx 14rpx;
background-color: #fff;
z-index: 999;
margin: 0 30rpx;
.title {
color: #666666;
font-size: 26rpx;
padding: 30rpx 0 0 30rpx;
}
.payMoney {
font-size: 28rpx;
color: #333333;
text-align: center;
margin-top: 50rpx;
.font-color {
margin-left: 10rpx;
.money {
font-size: 40rpx;
}
}
}
}
.payment.on {
transform: translate3d(0, 0, 0);
}
.icon-xuanzhong11 {
color: #E93323 !important;
}
.payment .item {
border-bottom: 1rpx solid #eee;
height: 130rpx;
margin-left: 30rpx;
padding-right: 30rpx;
}
.payment .item:last-child {
border-bottom: none;
}
.payment .item .left {
flex: 1;
}
.payment .item .left .text {
flex: 1;
}
.payment .item .left .text .name {
font-size: 30rpx;
color: #333;
}
.payment .item .left .text .info {
font-size: 22rpx;
color: #999;
}
.payment .item .left .text .info .money {
color: #ff9900;
}
.payment .item .left .iconfont {
font-size: 50rpx;
color: #09bb07;
margin-right: 28rpx;
}
.payment .item .left .iconfont.icon-zhifubao {
color: #00aaea;
}
.payment .item .left .iconfont.icon-yuezhifu {
color: #ff9900;
}
.payment .item .left .iconfont.icon-yuezhifu1 {
color: #eb6623;
}
.payment .item .left .iconfont.icon-tonglianzhifu1 {
color: #305fd8;
}
.payment .item .iconfont {
font-size: 40rpx;
color: #ccc;
}
.icon-haoyoudaizhifu {
color: #F34C3E !important;
}
.btn {
position: fixed;
left: 30rpx;
display: flex;
flex-direction: column;
align-items: center;
bottom: 30rpx;
bottom: calc(30rpx + constant(safe-area-inset-bottom)); ///兼容 IOS<11.2/
bottom: calc(30rpx + env(safe-area-inset-bottom)); ///兼容 IOS>11.2/
}
.wait-pay {
color: #aaa;
font-size: 24rpx;
padding-top: 20rpx;
}
.button {
width: 690rpx;
height: 90rpx;
border-radius: 45rpx;
color: #FFFFFF;
background-color: #E93323;
}
}
</style>