wash_admin_ui/src/components/payStatusPopup/index.vue

<template>
    <div class="payStatusPopup">
        <el-dialog :visible.sync="show" width="30%" :close-on-click-modal="false" :close-on-press-escape="false" :show-close="false">
            <!-- 支付成功打印小票 -->
            <div v-if="type === 1">
                <div class="icon">
                    <i class="el-icon-success success"></i>
                </div>
                <div class="message">支付成功</div>
                <div class="btn_box" v-if="hidePointer">
                    <div class="btn" @click="confirm">确认</div>
                </div>
                <div class="btn_box" v-else>
                    <div class="btn" @click="setPointer(0)">打印小票</div>
                    <div class="line"></div>
                    <div class="btn" @click="setPointer(1)">打印条码</div>
                    <div class="line"></div>
                    <div class="btn" @click="close">关闭</div>
                </div>
            </div>
            <!-- 未支付 -->
            <div v-if="type === 2">
                <div class="icon">
                    <i class="el-icon-warning warning"></i>
                </div>
                <div class="message">请支付后取衣</div>
                <div class="cell">
                    <div class="label">需支付金额</div>
                    <div class="amount_box">
                        <span>￥</span>
                        <span>{{ orderInfo.payAmount }}</span>
                    </div>
                </div>
                <div class="cell">
                    <div class="label">支付方式</div>
                    <el-radio-group v-model="payType" @input="changePayType">
                        <el-radio-button :label="3">余额</el-radio-button>
                        <el-radio-button :label="2">现金</el-radio-button>
                        <el-radio-button :label="0">微信/支付宝</el-radio-button>
                    </el-radio-group>
                </div>
                <el-descriptions border direction="vertical" :column="3" :labelStyle="{ width: '140px' }" v-if="payType == '3'" style="margin: 0 30px">
                    <el-descriptions-item label="用户" v-if="appUserInfo">{{ appUserInfo.realName }}</el-descriptions-item>
                    <el-descriptions-item label="当前余额（元）" v-if="appUserInfo">{{ appUserInfo.rechargeBalance + appUserInfo.giveBalance }}</el-descriptions-item>
                    <el-descriptions-item label="支付后余额（元）" v-if="appUserInfo">{{ appUserInfo.rechargeBalance + appUserInfo.giveBalance - orderInfo.payAmount }}</el-descriptions-item>
                </el-descriptions>
                <div class="cell" v-if="payType == 0">
                    <div class="label">付款码</div>
                    <!-- @change="handleQuery" -->
                    <el-input ref="autoFocus" v-model="authCode" clearable placeholder="请选择付款码" />
                </div>
                <div class="btn_box">
                    <div class="btn" style="color: #67c23a" @click="pay">确认支付</div>
                    <div class="line"></div>
                    <div class="btn" @click="close">关闭</div>
                </div>
            </div>
            <!-- 支付中，请等待 -->
            <div v-if="type == 3 || type == 5">
                <div class="icon">
                    <i class="el-icon-loading loading"></i>
                </div>
                <div class="message">支付确认中，请等待...</div>

                <el-button type="primary" style="width: 70%; height: 40px; margin: 20px 15%" @click="close" v-if="showPaySuccessBtn">已确认支付</el-button>
            </div>
            <!-- 支付失败 -->
            <div v-if="type == 4">
                <div class="icon">
                    <i class="el-icon-error error"></i>
                </div>
                <div class="message">{{ errorMessage }}</div>
                <div class="cell" v-if="!hideUser">
                    <div class="label">支付方式</div>
                    <el-radio-group v-model="payType" @input="changePayType">
                        <el-radio-button :label="3">余额</el-radio-button>
                        <el-radio-button :label="2">现金</el-radio-button>
                        <el-radio-button :label="0">微信/支付宝</el-radio-button>
                    </el-radio-group>
                </div>
                <el-descriptions border direction="vertical" :column="3" :labelStyle="{ width: '140px' }" v-if="payType == '3' && !hideUser" style="margin: 0 30px">
                    <el-descriptions-item label="用户" v-if="appUserInfo">{{ appUserInfo.realName }}</el-descriptions-item>
                    <el-descriptions-item label="当前余额（元）" v-if="appUserInfo">{{ appUserInfo.rechargeBalance + appUserInfo.giveBalance }}</el-descriptions-item>
                    <el-descriptions-item label="支付后余额（元）" v-if="appUserInfo">{{ appUserInfo.rechargeBalance + appUserInfo.giveBalance - orderInfo.payAmount }}</el-descriptions-item>
                </el-descriptions>
                <div class="cell" v-if="payType == 0 && !hideUser">
                    <div class="label">付款码</div>
                    <!-- @change="handleQuery" -->
                    <el-input ref="autoFocus" v-model="authCode" clearable placeholder="请选择付款码" />
                </div>
                <div class="btn_box">
                    <div class="btn" style="color: #67c23a" @click="pay" v-if="!hideUser">确认支付</div>
                    <div class="line" v-if="!hideUser"></div>
                    <div class="btn" @click="close">关闭</div>
                </div>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import { getLodop } from '@/utils/lodopUtils'
import { getClothItem, listOrderClothItem } from '@/api/order/clothItem'
import { getMemberInfoById } from '@/api/app/user'
import { clothOrderPay, getOrderPayResult } from '@/api/order/cloth'

export default {
    props: {
        hidePointer: {
            type: Boolean,
            default: false
        },
        hideUser: {
            type: Boolean,
            default: false
        }
    },
    data() {
        return {
            show: false,
            type: 1,
            orderInfo: {},
            number: 1,
            // 打印机设置
            LODOP: null,
            pointerList: [],
            // 打印收衣订单的数据
            pointerInfo: null,
            payType: 3,
            appUserInfo: {},
            authCode: '',
            time: '',
            showPaySuccessBtn: false,
            resultCount: 0,
            errorMessage: ''
        }
    },

    mounted() {
        this.number = 1
        const printerTime = setInterval(() => {
            this.LODOP = getLodop()
            this.number++
            if (this.number == 25) {
                clearInterval(printerTime)
            }
            if (this.LODOP) {
                clearInterval(printerTime)
            }
        }, 200)

        this.pointerList = JSON.parse(this.$cache.local.get('printerSeting'))
    },

    methods: {
        open(type, info, appUserInfo = null) {
            this.orderInfo = info
            this.type = type
            if (type == 1) {
                if (info.id && !this.hidePointer) {
                    this.getClothItemInfo(info)
                }
            }
            if (type == 2) {
                this.appUserInfo = {}
                this.authCode = ''
                this.showPaySuccessBtn = false
                if (this.hideUser) {
                    this.payType = 2
                } else {
                    this.payType = 3
                    this.getUserInfo(info.appUserId)
                }
            }
            if (type == 3) {
                this.payType = info.payType
                this.authCode = info.authCode
                this.showPaySuccessBtn = false
                console.log(appUserInfo)
                if (appUserInfo.id) {
                    this.appUserInfo = appUserInfo
                }
                console.log('aasss', this.appUserInfo)
                this.pay()
            }
            if (type == 4) {
                this.errorMessage = info.payMsg
            }
            if (type == 5) {
                // this.getPayResult()
            }
            this.show = true
        },

        close() {
            const _ = this
            if (this.type == 1) {
                this.$confirm('是否关闭打印操作？')
                    .then(() => {
                        _.show = false
                    })
                    .catch(() => {})
            }
            if (this.type == 2) {
                this.$confirm('是否取消支付操作？')
                    .then(() => {
                        _.show = false
                    })
                    .catch(() => {})
            }
            if (this.type == 3 || this.type == 5) {
                this.$confirm('请确认客户已完成付款再关闭？')
                    .then(() => {
                        _.show = false
                        _.clearTimeOut(_.time)
                        _.$emit('paySuccess')
                    })
                    .catch(() => {})
            }
            if (this.type == 4) {
                _.show = false
            }
        },

        confirm() {
            this.show = false
            this.$emit('confirm', this.orderInfo)
        },

        setPointer(type) {
            if (!this.LODOP) {
                this.$modal.msgError('请安装打印机软件')
                return
            }

            let p_name = ''

            this.pointerList.forEach((pointer) => {
                if (pointer.printType == type) {
                    p_name = pointer.printName
                }
            })

            if (type == 0) {
                this.collectClothPrinter(this.LODOP, this.pointerInfo, p_name)
            } else {
                this.barCodePrinter(this.LODOP, this.pointerInfo, p_name)
            }

            this.show = false
        },

        // 获取打印数据
        getClothItemInfo(data) {
            getClothItem(data.id).then((res) => {
                if (res) {
                    this.pointerInfo = res.data
                    listOrderClothItem({ pageSize: 99999, pageNum: 1, orderNo: data.orderNo }).then((res) => {
                        this.pointerInfo.orderClothDetails = res.data.records
                    })
                }
            })
        },

        // 获取用户信息
        getUserInfo(id) {
            getMemberInfoById({
                appUserId: id
            }).then((response) => {
                this.appUserInfo = response.data
            })
        },

        changePayType() {
            if (this.payType == 0) {
                this.$nextTick((_) => {
                    this.$refs.autoFocus.focus()
                })
            }
        },

        handleQuery(e, event) {
            console.log(event)
            console.log(this.authCode)
        },

        pay() {
            if (this.payType == 0 && !this.authCode) {
                this.type = 4
                this.errorMessage = '请先扫码'
                this.authCode = ''
                this.changePayType()
                return
            }
            if (this.payType == 3 && this.appUserInfo.rechargeBalance + this.appUserInfo.giveBalance < this.orderInfo.payAmount) {
                this.errorMessage = '余额不足'
                this.type = 4
                this.authCode = ''
                this.changePayType()
                return
            }
            this.type = 3
            clothOrderPay({
                appUserId: this.orderInfo.appUserId,
                payType: this.payType,
                authCode: this.authCode,
                orderNo: this.orderInfo.orderNo,
                payAmount: this.orderInfo.payAmount
            })
                .then((res) => {
                    console.log('支付结果', res)
                    if (res) {
                        if (res.data.payResult == 100) {
                            this.getPayResult()
                        }
                        if (res.data.payResult == 101 || res.data.payResult == 0) {
                            this.errorMessage = res.data.payMsg
                            this.type = 4
                            this.authCode = ''
                            this.changePayType()
                        }
                        if (res.data.payResult == 200) {
                            this.type = 1
                            this.$emit('paySuccess')
                        }
                    }
                })
                .catch((e) => {
                    this.type = 4
                    this.authCode = ''
                    this.changePayType()
                    this.errorMessage = e.data.msg
                    // this.$message.error(e.data.msg)
                })
        },

        getPayResult() {
            getOrderPayResult({
                orderNo: this.orderInfo.orderNo
            })
                .then((res) => {
                    console.log('支付结果1', res)
                    if (res) {
                        if (res.data.payResult == 100) {
                            this.time = setTimeout(() => {
                                if (this.resultCount == 6) {
                                    this.showPaySuccessBtn = true
                                } else {
                                    this.resultCount++
                                }
                                this.getPayResult()
                            }, 5000)
                        }
                        if (res.data.payResult == 101 || res.data.payResult == 0) {
                            this.errorMessage = res.data.payMsg
                            this.type = 4
                            this.authCode = ''
                            this.changePayType()
                        }
                        if (res.data.payResult == 200) {
                            this.type = 1
                            this.$emit('paySuccess')
                        }
                    }
                })
                .catch((e) => {
                    this.type = 4
                    this.authCode = ''
                    this.errorMessage = e.data.msg
                })
        }
    }
}
</script>
<style>
.payStatusPopup .el-dialog__body {
    padding: 0;
}
</style>
<style scoped lang="scss">
.icon {
    font-size: 100px;
    text-align: center;

    .success {
        color: #67c23a;
    }

    .warning {
        color: #e6a23c;
    }

    .loading {
        color: #e4e7ed;
    }

    .error {
        color: #f56c6c;
    }
}

.btn_box {
    display: flex;
    align-items: center;
    margin-top: 20px;
    font-size: 16px;
    font-weight: 500;
    border-top: 1px solid #ebeef5;

    .btn {
        flex: 1;
        text-align: center;
        line-height: 60px;
        cursor: pointer;
    }

    .line {
        width: 1px;
        height: 60px;
        background: #ebeef5;
    }
}

.del_btn {
    position: absolute;
    top: 20px;
    right: 20px;
    font-size: 20px;
    cursor: pointer;
}

.cell {
    display: flex;
    align-items: center;
    padding: 0 40px 20px;

    .label {
        margin-right: 20px;
        min-width: 80px;
    }
}

.amount_box {
    span {
        color: #f56c6c;
        font-weight: bold;
        font-size: 20px;
        &:first-child {
            font-size: 16px;
        }
    }
}

.message {
    font-size: 20px;
    text-align: center;
    padding: 10px 0 20px;
    color: #606266;
}
</style>