|
|
@@ -1,5 +1,6 @@
|
|
|
<template>
|
|
|
<view class="app-collect_money">
|
|
|
+ <view class="close-icon" @click="closePayPanel">×</view>
|
|
|
<view v-if="showSuccess == false">
|
|
|
<view class="collect-code_box">
|
|
|
<image class="img" :src="`${constant.imgUrl}/icon/scan/scan.png`" mode="scaleToFill" @click="beginScan()" />
|
|
|
@@ -15,7 +16,22 @@
|
|
|
</view>
|
|
|
<view style="margin-top:10upx;font-weight:bold;font-size:34upx;color:black;">¥{{price}}</view>
|
|
|
|
|
|
- <view class="show-code" v-if="goPay == 0">请出示付款码</view>
|
|
|
+ <view class="show-code" v-if="goPay == 0 && !showManualInput" @click="openManualInput">请出示付款码</view>
|
|
|
+ <view class="manual-code-box" v-if="goPay == 0 && showManualInput">
|
|
|
+ <input
|
|
|
+ class="manual-code-input"
|
|
|
+ v-model="manualAuthCode"
|
|
|
+ type="number"
|
|
|
+ maxlength="32"
|
|
|
+ placeholder="请输入付款码"
|
|
|
+ :focus="manualInputFocus"
|
|
|
+ @confirm="submitManualCode"
|
|
|
+ />
|
|
|
+ <view class="manual-code-actions">
|
|
|
+ <view class="btn-default" @click="closeManualInput">返回</view>
|
|
|
+ <view class="btn-default btn-primary" @click="submitManualCode">确认支付</view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
<view class="paying" v-if="goPay == 1">请求中</view>
|
|
|
<view style="font-size:18upx;margin:8upx auto;color:red;font-weight:bold;text-align:center;" v-if="goPay == 2">
|
|
|
<view style="font-size:16upx;line-height:1.3;max-width:90%;margin:0 auto;">{{ remindText }}</view>
|
|
|
@@ -51,12 +67,22 @@
|
|
|
</view>
|
|
|
</uni-popup>
|
|
|
|
|
|
+ <uni-popup ref="closePaymentRef" type="dialog">
|
|
|
+ <view style="width:60vw;height:70vh;background-color: white;padding:70upx 20upx 0 20upx;">
|
|
|
+ <view style="margin-bottom:40upx;text-align: center;font-size:24upx;">确认关闭？</view>
|
|
|
+ <view style="text-align:center;">
|
|
|
+ <button class="admin-button-com mini-btn default" @click="returnClose">返回</button>
|
|
|
+ <button class="admin-button-com mini-btn default" @click="confirmClose" style="margin-left:30upx;">确认</button>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </uni-popup>
|
|
|
+
|
|
|
</view>
|
|
|
</template>
|
|
|
<script>
|
|
|
/**
|
|
|
* 扫码支付组件（供货商收银机端）
|
|
|
- * 解决客户扫码后转圈状态被卡住、钱未到账的问题，支持网络异常降级和自动后台复查
|
|
|
+ * 支持扫码与手动输入付款码，解决客户扫码后转圈状态被卡住、钱未到账的问题，支持网络异常降级和自动后台复查
|
|
|
*/
|
|
|
import { codePay,codePayCheck,codePayVerify,cancelOrderFn,getDetail} from "@/api/order";
|
|
|
export default {
|
|
|
@@ -72,9 +98,13 @@ export default {
|
|
|
returnCode:'',
|
|
|
cancelText:'确认要取消？',
|
|
|
isCancelDialogOpen:false,
|
|
|
+ isCloseDialogOpen:false, // 关闭确认弹框是否打开
|
|
|
isPaymentProcessing:false, // 标志位：防重复扫码
|
|
|
pollingTimer:null, // 后台轮询复查定时器
|
|
|
- pollingCount:0 // 轮询计数器
|
|
|
+ pollingCount:0, // 轮询计数器
|
|
|
+ showManualInput:false, // 是否展示手动输入付款码
|
|
|
+ manualAuthCode:'', // 手动输入的付款码
|
|
|
+ manualInputFocus:false // 控制输入框自动聚焦
|
|
|
}
|
|
|
},
|
|
|
props: {
|
|
|
@@ -124,6 +154,38 @@ export default {
|
|
|
this.goPay = 0
|
|
|
this.returnCode = ''
|
|
|
this.isPaymentProcessing = false
|
|
|
+ this.closeManualInput()
|
|
|
+ },
|
|
|
+ /**
|
|
|
+ * 点击「请出示付款码」后展开手动输入区域
|
|
|
+ */
|
|
|
+ openManualInput(){
|
|
|
+ this.showManualInput = true
|
|
|
+ this.manualAuthCode = ''
|
|
|
+ this.manualInputFocus = false
|
|
|
+ this.$nextTick(() => {
|
|
|
+ this.manualInputFocus = true
|
|
|
+ })
|
|
|
+ },
|
|
|
+ /**
|
|
|
+ * 关闭手动输入付款码区域
|
|
|
+ */
|
|
|
+ closeManualInput(){
|
|
|
+ this.showManualInput = false
|
|
|
+ this.manualAuthCode = ''
|
|
|
+ this.manualInputFocus = false
|
|
|
+ },
|
|
|
+ /**
|
|
|
+ * 提交手动输入的付款码
|
|
|
+ */
|
|
|
+ submitManualCode(){
|
|
|
+ const authCode = String(this.manualAuthCode || '').replace(/\s+/g, '')
|
|
|
+ if (!authCode) {
|
|
|
+ this.$msg('请输入付款码')
|
|
|
+ return
|
|
|
+ }
|
|
|
+ this.closeManualInput()
|
|
|
+ this.requestCodePay(authCode)
|
|
|
},
|
|
|
checkOrder(){
|
|
|
let that = this
|
|
|
@@ -152,8 +214,8 @@ export default {
|
|
|
},
|
|
|
requestCodePay(authCode){
|
|
|
// 如果取消对话框打开，则不处理扫码
|
|
|
- if(this.isCancelDialogOpen){
|
|
|
- this.$msg('请先完成取消操作')
|
|
|
+ if(this.isCancelDialogOpen || this.isCloseDialogOpen){
|
|
|
+ this.$msg('请先完成当前操作')
|
|
|
return
|
|
|
}
|
|
|
|
|
|
@@ -257,6 +319,30 @@ export default {
|
|
|
this.clearPolling()
|
|
|
this.$emit('payFinish')
|
|
|
},
|
|
|
+ /**
|
|
|
+ * 右上角关闭：先弹框确认，确认后仅关闭弹层不取消订单
|
|
|
+ */
|
|
|
+ closePayPanel(){
|
|
|
+ this.isCloseDialogOpen = true
|
|
|
+ this.$refs.closePaymentRef.open('center')
|
|
|
+ },
|
|
|
+ returnClose(){
|
|
|
+ this.isCloseDialogOpen = false
|
|
|
+ this.$refs.closePaymentRef.close()
|
|
|
+ },
|
|
|
+ confirmClose(){
|
|
|
+ this.isCloseDialogOpen = false
|
|
|
+ this.$refs.closePaymentRef.close()
|
|
|
+ this.clearPolling()
|
|
|
+ this.isPaymentProcessing = false
|
|
|
+ this.isCancelDialogOpen = false
|
|
|
+ this.closeManualInput()
|
|
|
+ if (this.showSuccess) {
|
|
|
+ this.payFinish()
|
|
|
+ return
|
|
|
+ }
|
|
|
+ this.$emit('closePay')
|
|
|
+ },
|
|
|
cancelPayFn(){
|
|
|
this.isCancelDialogOpen = true
|
|
|
if(this.returnCode=='BBS11105' || this.returnCode=='BBS10000'){
|
|
|
@@ -279,7 +365,7 @@ export default {
|
|
|
this.isCancelDialogOpen = false
|
|
|
this.clearPolling() // 取消时，必须清除定时器
|
|
|
this.isPaymentProcessing = false
|
|
|
- cancelOrderFn({id:this.orderId}).then(res=>{
|
|
|
+ cancelOrderFn({id:this.orderId,cashier:1}).then(res=>{
|
|
|
if(res.code == 1){
|
|
|
that.$msg('已取消')
|
|
|
}
|
|
|
@@ -302,6 +388,17 @@ export default {
|
|
|
flex-direction: column;
|
|
|
box-sizing: border-box;
|
|
|
width:60vw;
|
|
|
+ position: relative;
|
|
|
+ & .close-icon {
|
|
|
+ position: absolute;
|
|
|
+ top: 10upx;
|
|
|
+ right: 10upx;
|
|
|
+ z-index: 10;
|
|
|
+ font-size: 40upx;
|
|
|
+ line-height: 1;
|
|
|
+ color: #999999;
|
|
|
+ padding: 0 8upx;
|
|
|
+ }
|
|
|
& .price-box {
|
|
|
min-height: 100upx;
|
|
|
& > .title {
|
|
|
@@ -335,6 +432,40 @@ export default {
|
|
|
font-size: 19upx;
|
|
|
margin: 10upx 0 10upx 0;
|
|
|
font-weight:bold;
|
|
|
+ color: #3385ff;
|
|
|
+ }
|
|
|
+ & .manual-code-box{
|
|
|
+ width: 90%;
|
|
|
+ margin: 10upx auto 0 auto;
|
|
|
+ }
|
|
|
+ & .manual-code-input{
|
|
|
+ width: 100%;
|
|
|
+ height: 60upx;
|
|
|
+ line-height: 60upx;
|
|
|
+ border: 1upx solid #cccccc;
|
|
|
+ border-radius: 8upx;
|
|
|
+ font-size: 20upx;
|
|
|
+ text-align: center;
|
|
|
+ color: #333333;
|
|
|
+ background-color: #fafafa;
|
|
|
+ box-sizing: border-box;
|
|
|
+ }
|
|
|
+ & .manual-code-actions{
|
|
|
+ margin-top: 15upx;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ }
|
|
|
+ & .manual-code-actions .btn-default{
|
|
|
+ margin-left: 0;
|
|
|
+ }
|
|
|
+ & .manual-code-actions .btn-default + .btn-default{
|
|
|
+ margin-left: 20upx;
|
|
|
+ }
|
|
|
+ & .btn-primary{
|
|
|
+ background-color: #3385ff;
|
|
|
+ color: #ffffff;
|
|
|
+ border-color: #3385ff;
|
|
|
}
|
|
|
& .paying{
|
|
|
font-size: 19upx;
|
