czg_team/cashierdesktop
7
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

优化快捷支付

Browse Source
This commit is contained in:
gyq
2024-05-17 18:33:52 +08:00
parent 6f378cc3c0
commit dbc7444e78
7 changed files with 152 additions and 109 deletions
Download Patch File Download Diff File Expand all files Collapse all files

125
src/components/payCard/scanModal.vue
View File

@@ -2,12 +2,7 @@
<template>
<div class="dialog">
<el-dialog
title="扫码支付"
width="600"
v-model="dialogVisible"
@open="reset"
>
<el-dialog title="扫码支付" width="600" v-model="dialogVisible" @open="reset" @close="clearAutoCheckOrder">
<div class="content">
<div class="left">
<el-image :src="icon" style="width: 60px; height: 60px"></el-image>
@@ -18,15 +13,9 @@
<span class="n">{{ props.amount }}</span>
</div>
<div class="input">
<el-input
ref="inputRef"
v-model="scanCode"
style="height: calc(var(--el-component-size-large) + 30px)"
placeholder="请扫描付款码"
clearable
@change="inputChange"
></el-input>
<div class="tips">注意：扫码支付请保证输入框获得焦点</div>
<el-input ref="inputRef" v-model="scanCode" style="height: calc(var(--el-component-size-large) + 30px)"
placeholder="请扫描付款码" clearable @change="inputChange"></el-input>
<div class="tips">注意：扫码支付请保证输入框获得焦点，输入内容结束后会自动支付，请勿重复操作</div>
</div>
<!-- <div class="number_warp">
<div class="item" v-for="item in 9" :key="item" @click="inputHandle(item)">{{ item }}</div>
@@ -39,36 +28,21 @@
</div>
</div> -->
<div class="btn">
<el-button
type="primary"
style="width: 100%"
v-loading="loading"
@click="submitHandle"
>立即支付</el-button
>
<el-button type="primary" style="width: 100%" v-loading="loading">立即支付</el-button>
</div>
</div>
<div class="pay_wait" v-else>
<div
class="loading"
v-loading="loading"
element-loading-text="用户支付中..."
></div>
<div class="loading" v-loading="loading" element-loading-text="用户支付中..."></div>
<div class="btn">
<el-button
type="primary"
style="width: 100%"
v-loading="checkPayStatusLoading"
@click="checkPayStauts"
>
<el-button type="primary" style="width: 100%" v-loading="checkPayStatusLoading" @click="checkPayStauts">
<span v-if="!checkPayStatusLoading">查询用户支付状态</span>
<span v-else>查询中...</span>
</el-button>
</div>
<div class="btn">
<el-button style="width: 100%" @click="resetScanCode"
>重新扫码</el-button
>
<el-button style="width: 100%" @click="resetScanCode">
重新扫码
</el-button>
</div>
</div>
</div>
@@ -80,7 +54,7 @@
import _ from "lodash";
import { ref } from "vue";
import icon from "@/assets/icon_scan.png";
import { scanpay, queryOrder, quickPay } from "@/api/pay";
import { scanpay, queryOrder, quickPay, queryQuickPayStatus } from "@/api/pay";
import { useUser } from "@/store/user.js";
const store = useUser();
import {
@@ -119,6 +93,8 @@ const loading = ref(false);
const userPayWait = ref(false);
const checkPayStatusLoading = ref(false);
const fastOrder = ref('')
// 提交扫码支付
async function submitHandle() {
try {
@@ -152,8 +128,11 @@ async function submitHandle() {
dialogVisible.value = false;
emits("success");
} catch (error) {
console.log(error);
if (error.code === "100015") {
userPayWait.value = true;
fastOrder.value = error.data
autoCheckOrder()
} else {
loading.value = false;
console.log(error);
@@ -161,21 +140,68 @@ async function submitHandle() {
}
}
const timer = ref(null)
// 自动查询订单状态
function autoCheckOrder() {
timer.value = setInterval(() => {
checkPayStauts(false)
}, 2000)
}
// 清除自动查询扫码支付订单
function clearAutoCheckOrder() {
clearInterval(timer.value)
timer.value = null
}
// 查询用户支付状态
async function checkPayStauts() {
async function checkPayStauts(tips = true) {
try {
const res = await queryOrder({ orderId: props.orderId });
if (res.status == "closed") {
ElMessage.success("支付成功");
emits("success");
return;
}
if (res.status == "paying") {
ElMessage.warning("用户支付中...");
return;
if (props.fast) {
const res = await queryQuickPayStatus({ orderId: fastOrder.value.orderNo });
if (res.status == 0) {
userPayWait.value = false
loading.value = false;
scanCode.value = "";
ElMessage.success("支付成功");
dialogVisible.value = false;
clearAutoCheckOrder()
emits("success");
return;
}
if (res.status == 1) {
if (tips) {
ElMessage.warning("用户支付中...");
}
return;
} else {
clearAutoCheckOrder()
ElMessage.error(res.payRemark || "支付失败！");
return;
}
} else {
ElMessage.error(res.payRemark || "支付失败！");
return;
const res = await queryOrder({ orderId: props.orderId });
if (res.status == "closed") {
userPayWait.value = false
loading.value = false;
scanCode.value = "";
ElMessage.success("支付成功");
dialogVisible.value = false;
clearAutoCheckOrder()
emits("success");
return;
}
if (res.status == "paying") {
if (tips) {
ElMessage.warning("用户支付中...");
}
return;
} else {
clearAutoCheckOrder()
ElMessage.error(res.payRemark || "支付失败！");
return;
}
}
} catch (error) {
console.log(error);
@@ -184,6 +210,7 @@ async function checkPayStauts() {
// 重新扫码
function resetScanCode() {
clearAutoCheckOrder()
userPayWait.value = false;
loading.value = false;
scanCode.value = "";