514 lines
13 KiB
Vue
514 lines
13 KiB
Vue
<!-- 扫码弹窗 -->
|
||
<template>
|
||
<div class="dialog">
|
||
<el-dialog title="扫码支付" width="600" v-model="dialogVisible" :close-on-click-modal="false" :show-close="!userPayWait"
|
||
@open="reset" @closed="resetScanCode">
|
||
<div class="content">
|
||
<div class="left">
|
||
<el-image :src="icon" style="width: 60px; height: 60px"></el-image>
|
||
</div>
|
||
<div class="right" v-if="!userPayWait">
|
||
<div class="amount">
|
||
<span class="t">扫码支付</span>
|
||
<span class="n">{{ goodsStore.cartInfo.costSummary.finalPayAmount }}</span>
|
||
</div>
|
||
<div class="input">
|
||
<el-input ref="inputRef" v-model="scanCode" :maxlength="18"
|
||
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>
|
||
<div class="item disabled">.</div>
|
||
<div class="item" @click="inputHandle(0)">0</div>
|
||
<div class="item" @click="delHandle">
|
||
<el-icon>
|
||
<CloseBold />
|
||
</el-icon>
|
||
</div>
|
||
</div> -->
|
||
<div class="btn">
|
||
<el-button type="primary" style="width: 100%" v-loading="loading" @click="submitHandle">
|
||
立即支付
|
||
</el-button>
|
||
</div>
|
||
</div>
|
||
<div class="pay_wait" v-else>
|
||
<div class="loading" v-loading="loading" element-loading-text="用户支付中..."></div>
|
||
<div class="btn">
|
||
<el-button style="width: 100%" :disabled="!closeState" type="primary" @click="resetScanCode">
|
||
<span v-if="!closeState">{{ closeStateTime }}秒后可重新扫码</span>
|
||
<span v-else>重新扫码</span>
|
||
</el-button>
|
||
</div>
|
||
<div class="btn">
|
||
<el-button style="width: 100%" :disabled="!closeState" @click="closeScanCode">
|
||
<span v-if="!closeState">{{ closeStateTime }}秒后可关闭</span>
|
||
<span v-else>关闭</span>
|
||
</el-button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</el-dialog>
|
||
</div>
|
||
</template>
|
||
|
||
<script setup>
|
||
import _ from "lodash";
|
||
import { ref } from "vue";
|
||
import icon from "@/assets/icon_scan.png";
|
||
import { quickPay, queryQuickPayStatus, accountPay } from "@/api/pay";
|
||
import { useUser } from "@/store/user.js";
|
||
import { useGlobal } from '@/store/global.js'
|
||
import { formatDecimal } from '@/utils'
|
||
import { microPay, queryOrderStatus, microPayVip, vipPay, queryPayStatus } from '@/api/order.js'
|
||
import { ElMessage } from "element-plus";
|
||
import { useGoods } from "@/store/goods.js";
|
||
const goodsStore = useGoods();
|
||
|
||
const store = useUser();
|
||
const emits = defineEmits(["success", 'orderExpired']);
|
||
|
||
const props = defineProps({
|
||
amount: {
|
||
type: [Number, String],
|
||
default: 0,
|
||
},
|
||
// 0 订单支付 1 会员充值 2 快捷收款
|
||
selecttype: {
|
||
type: [Number, String],
|
||
default: 0,
|
||
},
|
||
orderId: {
|
||
type: [Number, String],
|
||
default: "",
|
||
},
|
||
fast: {
|
||
type: Boolean,
|
||
default: false,
|
||
},
|
||
// 支付类型
|
||
payType: {
|
||
type: [Number, String],
|
||
default: "",
|
||
},
|
||
money: {
|
||
type: [Number, String],
|
||
default: 0,
|
||
},
|
||
payData: {
|
||
type: Object,
|
||
default: {}
|
||
},
|
||
chargeId: {
|
||
type: [Number, String],
|
||
default: "",
|
||
}
|
||
});
|
||
|
||
const dialogVisible = ref(false);
|
||
const scanCode = ref("");
|
||
const inputRef = ref(null);
|
||
|
||
const loading = ref(false);
|
||
const userPayWait = ref(false);
|
||
|
||
const fastOrder = ref('')
|
||
|
||
const submitHandle = _.throttle(submitHandleAjax, 200);
|
||
const table_code = ref('')
|
||
|
||
// 提交扫码支付
|
||
async function submitHandleAjax() {
|
||
// console.log('props.selecttype===', props.selecttype);
|
||
try {
|
||
if (!scanCode.value || scanCode.value.length > 18) return;
|
||
loading.value = true;
|
||
|
||
console.log('props.selecttype===', props.selecttype);
|
||
console.log('props.payType===', props.payType);
|
||
|
||
if (props.selecttype == 0) {
|
||
// 判断订单是否锁定
|
||
await goodsStore.isOrderLock({
|
||
table_code: goodsStore.orderListInfo.tableCode
|
||
})
|
||
// 下单扫码支付
|
||
if (props.payType == 'scanCode') {
|
||
await microPay({
|
||
...props.payData,
|
||
authCode: scanCode.value
|
||
});
|
||
} else if (props.payType == 'deposit') {
|
||
await vipPay({
|
||
...props.payData,
|
||
payType: 'scanCode',
|
||
authCode: scanCode.value
|
||
});
|
||
}
|
||
} else if (props.selecttype == 1) {
|
||
console.log('进入会员扫码充值');
|
||
// 会员扫码充值
|
||
await microPayVip({
|
||
shopId: store.shopInfo.id,
|
||
shopUserId: props.orderId,
|
||
amount: props.amount,
|
||
authCode: scanCode.value,
|
||
rechargeDetailId: props.chargeId,
|
||
})
|
||
} else {
|
||
// 快捷收银
|
||
if (props.fast) {
|
||
await quickPay({
|
||
amount: props.amount,
|
||
authCode: scanCode.value,
|
||
payType: "scanCode",
|
||
});
|
||
} else {
|
||
if (props.payType == 'scanCode') {
|
||
if (props.selecttype == 1) {
|
||
|
||
} else if (props.selecttype == 2) {
|
||
|
||
}
|
||
}
|
||
if (props.payType == 'deposit') {
|
||
await accountPay({
|
||
orderId: props.orderId,
|
||
memberId: '',
|
||
memberAccount: scanCode.value,
|
||
payAmount: props.money < props.amount ? props.money : '',
|
||
discountAmount: props.money < props.amount ? formatDecimal(props.amount - props.money) : ''
|
||
})
|
||
}
|
||
}
|
||
}
|
||
loading.value = false;
|
||
scanCode.value = "";
|
||
dialogVisible.value = false;
|
||
emits("success");
|
||
} catch (error) {
|
||
console.log(error);
|
||
if (error.code === 211) {
|
||
// 开始锁单
|
||
goodsStore.isOrderLock({
|
||
table_code: table_code.value
|
||
}, 'pay_lock')
|
||
|
||
userPayWait.value = true;
|
||
fastOrder.value = error.data
|
||
autoCheckOrder()
|
||
} else if (error.code == 701) {
|
||
// 订单已过期需刷新购物车和订单
|
||
emits('orderExpired')
|
||
} else {
|
||
scanCode.value = "";
|
||
loading.value = false;
|
||
console.log(error);
|
||
}
|
||
}
|
||
}
|
||
|
||
// 关闭扫码支付
|
||
function closeScanCode() {
|
||
dialogVisible.value = false;
|
||
}
|
||
|
||
const closeState = ref(false)
|
||
const closeStateTime = ref(5);
|
||
const closeStateTimer = ref(null)
|
||
|
||
function closeStateTimerFuc() {
|
||
closeStateTimer.value = setInterval(() => {
|
||
closeStateTime.value--
|
||
if (closeStateTime.value <= 0) {
|
||
clearInterval(closeStateTimer.value)
|
||
closeStateTimer.value = null
|
||
closeState.value = true
|
||
}
|
||
}, 1000)
|
||
}
|
||
|
||
// 自动查询订单状态
|
||
const timer = ref(null)
|
||
function autoCheckOrder() {
|
||
closeStateTimerFuc()
|
||
timer.value = setInterval(() => {
|
||
// 开始锁单
|
||
goodsStore.isOrderLock({
|
||
table_code: table_code.value
|
||
}, 'pay_lock')
|
||
checkPayStauts(false)
|
||
}, 2000)
|
||
}
|
||
|
||
// 查询用户支付状态
|
||
async function checkPayStauts(tips = true) {
|
||
try {
|
||
if (props.selecttype == 1) {
|
||
// 会员扫码充值
|
||
const res = await queryPayStatus({
|
||
shopId: store.shopInfo.id,
|
||
payOrderNo: fastOrder.value.payOrderNo,
|
||
});
|
||
if (res == 'TRADE_SUCCESS') {
|
||
userPayWait.value = false
|
||
loading.value = false;
|
||
scanCode.value = "";
|
||
ElMessage.success("支付成功");
|
||
dialogVisible.value = false;
|
||
clearAutoCheckOrder()
|
||
emits("success");
|
||
return;
|
||
} else if (res == 'TRADE_AWAIT') {
|
||
if (tips) {
|
||
ElMessage.warning("用户支付中...");
|
||
}
|
||
return;
|
||
} else {
|
||
clearAutoCheckOrder()
|
||
ElMessage.error(res.payRemark || "支付失败！");
|
||
return;
|
||
}
|
||
} else {
|
||
// 其他扫码支付
|
||
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 {
|
||
// 扫码下单
|
||
const res = await queryOrderStatus({ orderId: props.payData.checkOrderPay.orderId });
|
||
if (res == "done") {
|
||
// 支付成功，解锁订单
|
||
await goodsStore.isOrderLock({
|
||
table_code: table_code.value
|
||
}, 'pay_unlock')
|
||
|
||
userPayWait.value = false
|
||
loading.value = false;
|
||
scanCode.value = "";
|
||
dialogVisible.value = false;
|
||
clearAutoCheckOrder()
|
||
emits("success");
|
||
return;
|
||
}
|
||
if (res == "unpaid") {
|
||
if (tips) {
|
||
ElMessage.warning("用户支付中...");
|
||
}
|
||
return;
|
||
} else {
|
||
clearAutoCheckOrder()
|
||
ElMessage.warning(res.msg || '');
|
||
return;
|
||
}
|
||
}
|
||
}
|
||
} catch (error) {
|
||
console.log(error);
|
||
}
|
||
}
|
||
|
||
function clearAutoCheckOrder() {
|
||
clearInterval(timer.value)
|
||
timer.value = null
|
||
}
|
||
|
||
// 重新扫码
|
||
function resetScanCode() {
|
||
clearInterval(timer.value)
|
||
timer.value = null
|
||
|
||
clearInterval(closeStateTimer.value)
|
||
closeStateTimer.value = null
|
||
|
||
reset()
|
||
setTimeout(() => {
|
||
inputRef.value.focus();
|
||
}, 500)
|
||
}
|
||
|
||
// 输入
|
||
function inputHandle(n) {
|
||
scanCode.value += n;
|
||
inputRef.value.focus();
|
||
}
|
||
|
||
// 删除
|
||
function delHandle() {
|
||
if (!scanCode.value) return;
|
||
scanCode.value = scanCode.value.substring(0, scanCode.value.length - 1);
|
||
inputRef.value.focus();
|
||
}
|
||
|
||
// 监听扫码枪回车事件
|
||
// function enterHandle() {
|
||
// inputRef.value.focus()
|
||
// }
|
||
|
||
const inputChange = _.debounce(function (e) {
|
||
submitHandle();
|
||
}, 100);
|
||
|
||
function show() {
|
||
dialogVisible.value = true;
|
||
table_code.value = goodsStore.orderListInfo.tableCode
|
||
setTimeout(() => {
|
||
inputRef.value.focus();
|
||
}, 500);
|
||
}
|
||
|
||
function close() {
|
||
dialogVisible.value = false;
|
||
}
|
||
|
||
function reset() {
|
||
userPayWait.value = false;
|
||
loading.value = false;
|
||
scanCode.value = "";
|
||
closeState.value = false
|
||
closeStateTime.value = 5
|
||
|
||
// 关闭锁单
|
||
// goodsStore.isOrderLock({
|
||
// table_code: table_code.value
|
||
// }, 'pay_unlock')
|
||
}
|
||
|
||
defineExpose({
|
||
show,
|
||
close,
|
||
loading,
|
||
});
|
||
</script>
|
||
|
||
<style scoped lang="scss">
|
||
.tips {
|
||
padding-top: 10px;
|
||
color: #999;
|
||
}
|
||
|
||
.dialog :deep(.el-dialog__body) {
|
||
padding: 0 !important;
|
||
}
|
||
|
||
.content {
|
||
display: flex;
|
||
|
||
.left {
|
||
width: 200px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
background-color: #efefef;
|
||
}
|
||
|
||
.right {
|
||
flex: 1;
|
||
padding: var(--el-font-size-base);
|
||
|
||
.amount {
|
||
display: flex;
|
||
height: calc(var(--el-component-size-large) + 20px);
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
color: var(--primary-color);
|
||
background-color: #555;
|
||
border-radius: 6px;
|
||
padding: 0 var(--el-font-size-base);
|
||
font-size: calc(var(--el-font-size-base) + 10px);
|
||
}
|
||
|
||
.input {
|
||
padding: var(--el-font-size-base) 0;
|
||
|
||
:deep(.el-input__inner) {
|
||
font-size: calc(var(--el-font-size-base) + 10px);
|
||
}
|
||
}
|
||
|
||
.number_warp {
|
||
--h: 50px;
|
||
display: grid;
|
||
grid-template-columns: 1fr 1fr 1fr;
|
||
grid-template-rows: var(--h) var(--h) var(--h) var(--h);
|
||
gap: 8px;
|
||
|
||
.item {
|
||
background-color: #dddddd;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-size: calc(var(--el-font-size-base) + 10px);
|
||
border-radius: 4px;
|
||
|
||
&.disabled {
|
||
color: #999;
|
||
background-color: #efefef;
|
||
|
||
&:active {
|
||
background-color: #efefef;
|
||
}
|
||
}
|
||
|
||
&:active {
|
||
background-color: #b9b9b9;
|
||
}
|
||
}
|
||
}
|
||
|
||
// .btn {
|
||
// padding-top: 20px;
|
||
// }
|
||
}
|
||
|
||
.pay_wait {
|
||
flex: 1;
|
||
padding: 0 var(--el-font-size-base);
|
||
height: 400px;
|
||
padding-bottom: 100px;
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: center;
|
||
align-items: center;
|
||
|
||
.loading {
|
||
width: 200px;
|
||
height: 200px;
|
||
--el-loading-spinner-size: 100px;
|
||
|
||
:deep(.el-loading-text) {
|
||
font-size: 20px;
|
||
}
|
||
}
|
||
|
||
.btn {
|
||
width: 200px;
|
||
padding-top: var(--el-font-size-base);
|
||
}
|
||
}
|
||
}
|
||
</style>
|