cashierdesktop/src/components/payCard/scanModal.vue

<!-- 扫码弹窗 -->

<template>
    <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="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="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>
    </div>
</template>

<script setup>
import _ from 'lodash'
import { ref } from 'vue'
import icon from '@/assets/icon_scan.png'
import { scanpay, queryOrder } from '@/api/pay'
import { useUser } from "@/store/user.js"
const store = useUser()
import { queryMembermember, createMembermember, membermemberScanPay, accountPaymember } from '@/api/member/index.js'
import { ElMessage } from "element-plus";
const emits = defineEmits(['success'])

const props = defineProps({
    amount: {
        type: [Number, String],
        default: 0
    },
    selecttype: {
        type: Number,
        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
        if (props.selecttype == 1) {
            await membermemberScanPay({
                shopId: store.userInfo.shopId,
                memberId: props.orderId,
                amount: props.amount,
                authCode: scanCode.value
            })
        } else {
            await scanpay({
                orderId: props.orderId,
                authCode: scanCode.value
            })
        }

        loading.value = false
        scanCode.value = ''
        ElMessage.success('支付成功')
        dialogVisible.value = false
        emits('success')
    } catch (error) {
        if (error.code === '100015') {
            userPayWait.value = true
        } else {
            loading.value = false
            console.log(error)
        }
    }
}

// 查询用户支付状态
async function checkPayStauts() {
    try {
        const res = await queryOrder({ orderId: props.orderId })
        if (res.status == 'closed') {
            emits('success')
        } else {
            ElMessage.error(res.payRemark || '支付失败！')
        }
    } 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">
.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>