优化新增串口

This commit is contained in:
gyq
2024-03-07 18:29:19 +08:00
parent fc810fd02f
commit 58993e00ee
9 changed files with 186 additions and 188 deletions

View File

@@ -1,51 +1,53 @@
<!-- 扫码弹窗 -->
<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 class="dialog">
<el-dialog title="扫码支付" width="600" v-model="dialogVisible" @open="reset">
<div class="content">
<div class="left">
<el-image :src="icon" style="width: 60px;height: 60px;"></el-image>
</div>
<div class="input">
<el-input ref="inputRef" v-model="scanCode"
style="height: calc(var(--el-component-size-large) + 20px);" 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 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: calc(var(--el-component-size-large) + 20px);" 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%;" v-loading="loading"
@click="submitHandle">立即支付</el-button>
</div>
</div>
<div class="btn">
<el-button type="primary" style="width: 100%;" v-loading="loading"
@click="submitHandle">立即支付</el-button>
<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>
<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>
</el-dialog>
</div>
</template>
<script setup>
@@ -86,11 +88,14 @@ async function submitHandle() {
orderId: props.orderId,
authCode: scanCode.value
})
loading.value = false
scanCode.value = ''
emits('success')
} catch (error) {
if (error.code === '100015') {
userPayWait.value = true
} else {
loading.value = false
console.log(error)
}
}
@@ -168,7 +173,7 @@ defineExpose({
</script>
<style scoped lang="scss">
:deep(.el-dialog__body) {
.dialog :deep(.el-dialog__body) {
padding: 0 !important;
}
@@ -176,7 +181,7 @@ defineExpose({
display: flex;
.left {
width: 300px;
width: 200px;
display: flex;
align-items: center;
justify-content: center;
@@ -185,7 +190,7 @@ defineExpose({
.right {
flex: 1;
padding: 0 var(--el-font-size-base);
padding: var(--el-font-size-base);
.amount {
display: flex;
@@ -209,11 +214,11 @@ defineExpose({
}
.number_warp {
--h: 40px;
--h: 50px;
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: var(--h) var(--h) var(--h) var(--h);
gap: var(--el-font-size-base);
gap: 8px;
.item {
background-color: #dddddd;