对接完毕下单
This commit is contained in:
272
src/components/payCard/scanModal.vue
Normal file
272
src/components/payCard/scanModal.vue
Normal file
@@ -0,0 +1,272 @@
|
||||
<!-- 扫码弹窗 -->
|
||||
|
||||
<template>
|
||||
<el-dialog title="扫码支付" width="800" v-model="dialogVisible" @open="reset">
|
||||
<div class="content">
|
||||
<div class="left">
|
||||
<el-image :src="icon"></el-image>
|
||||
</div>
|
||||
<div class="right" v-if="!userPayWait">
|
||||
<div class="amount">
|
||||
<span class="t">扫码支付</span>
|
||||
<span class="n">{{ props.amount }}</span>
|
||||
</div>
|
||||
<div class="input">
|
||||
<el-input ref="inputRef" v-model="scanCode" style="height: 80px;" placeholder="请扫描付款码"
|
||||
@keydown.enter="enterHandle" clearable></el-input>
|
||||
</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%;height: 60px;" 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 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>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import _ from 'lodash'
|
||||
import { ref } from 'vue'
|
||||
import icon from '@/assets/icon_scan.png'
|
||||
import { scanpay, queryOrder } from '@/api/pay'
|
||||
|
||||
import { ElMessage } from "element-plus";
|
||||
|
||||
const emits = defineEmits(['success'])
|
||||
|
||||
const props = defineProps({
|
||||
amount: {
|
||||
type: [Number, String],
|
||||
default: 0
|
||||
},
|
||||
orderId: {
|
||||
type: [Number, String],
|
||||
default: ''
|
||||
}
|
||||
})
|
||||
|
||||
const dialogVisible = ref(false)
|
||||
const scanCode = ref('')
|
||||
const inputRef = ref(null)
|
||||
|
||||
const loading = ref(false)
|
||||
const userPayWait = ref(false)
|
||||
const checkPayStatusLoading = ref(false)
|
||||
|
||||
// 提交扫码支付
|
||||
async function submitHandle() {
|
||||
try {
|
||||
if (!scanCode.value) return
|
||||
loading.value = true
|
||||
await scanpay({
|
||||
orderId: props.orderId,
|
||||
authCode: scanCode.value
|
||||
})
|
||||
emits('success')
|
||||
} catch (error) {
|
||||
if (error.code === '100015') {
|
||||
userPayWait.value = true
|
||||
} else {
|
||||
console.log(error)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 查询用户支付状态
|
||||
async function checkPayStauts() {
|
||||
try {
|
||||
const res = await queryOrder({ orderId: props.orderId })
|
||||
loading.value = false
|
||||
if (res.status == 'closed') {
|
||||
emits('success')
|
||||
scanModalRef.value.close()
|
||||
} else {
|
||||
checkPayStatusLoading.value = false
|
||||
ElMessage.error(res.payRemark || '支付失败！')
|
||||
scanModalRef.value.loading = false
|
||||
}
|
||||
} catch (error) {
|
||||
console.log(error)
|
||||
}
|
||||
}
|
||||
|
||||
// 重新扫码
|
||||
function resetScanCode() {
|
||||
userPayWait.value = false
|
||||
loading.value = false
|
||||
scanCode.value = ''
|
||||
inputRef.value.focus()
|
||||
}
|
||||
|
||||
// 输入
|
||||
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) {
|
||||
// console.log(e);
|
||||
// }, 300)
|
||||
|
||||
function show() {
|
||||
dialogVisible.value = true
|
||||
setTimeout(() => {
|
||||
inputRef.value.focus()
|
||||
}, 500)
|
||||
}
|
||||
|
||||
function close() {
|
||||
dialogVisible.value = false
|
||||
}
|
||||
|
||||
function reset() {
|
||||
loading.value = false
|
||||
scanCode.value = ''
|
||||
}
|
||||
|
||||
defineExpose({
|
||||
show,
|
||||
close,
|
||||
loading
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
:deep(.el-dialog__body) {
|
||||
padding: 0 !important;
|
||||
}
|
||||
|
||||
.content {
|
||||
display: flex;
|
||||
|
||||
.left {
|
||||
width: 300px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background-color: #efefef;
|
||||
}
|
||||
|
||||
.right {
|
||||
flex: 1;
|
||||
padding: 0 20px;
|
||||
|
||||
.amount {
|
||||
display: flex;
|
||||
height: 80px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
color: var(--primary-color);
|
||||
background-color: #555;
|
||||
border-radius: 6px;
|
||||
padding: 0 20px;
|
||||
font-size: 30px;
|
||||
}
|
||||
|
||||
.input {
|
||||
padding: 20px 0;
|
||||
|
||||
:deep(.el-input__inner) {
|
||||
font-size: 30px;
|
||||
}
|
||||
}
|
||||
|
||||
.number_warp {
|
||||
--h: 70px;
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr 1fr;
|
||||
grid-template-rows: var(--h) var(--h) var(--h) var(--h);
|
||||
gap: 20px;
|
||||
|
||||
.item {
|
||||
background-color: #dddddd;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 30px;
|
||||
border-radius: 6px;
|
||||
|
||||
&.disabled {
|
||||
color: #999;
|
||||
background-color: #efefef;
|
||||
|
||||
&:active {
|
||||
background-color: #efefef;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
&:active {
|
||||
background-color: #b9b9b9;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.btn {
|
||||
padding-top: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.pay_wait {
|
||||
flex: 1;
|
||||
padding: 0 20px;
|
||||
height: 600px;
|
||||
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: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user