yudao
/
mall-uniapp
mirror of https://gitee.com/yudaocode/yudao-mall-uniapp.git
3
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity
mall-uniapp/pages/goods/cashier/index.vue

768 lines
20 KiB
Vue
Raw Normal View History

【收银台】 1. 从 crmeb php 项目迁移
2023-06-30 16:05:01 +00:00
<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,
【订单确认】 1. 接入支付页
2023-06-30 16:19:38 +00:00
}],
【收银台】 1. 从 crmeb php 项目迁移
2023-06-30 16:05:01 +00:00
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
【订单确认】 1. 接入支付页
2023-06-30 16:19:38 +00:00
this.payPriceShow = this.payPrice;
},
【收银台】 1. 从 crmeb php 项目迁移
2023-06-30 16:05:01 +00:00
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>