museum-H5/pages/persomInfo/index.vue

<template>
    <div class="main">
        <up-button type="primary" :text="'审核员 ' + name" shape="circle" color="#AB2F23" style="width:700rpx "></up-button>
        <image src="" mode="scaleToFill" class="img" style="" />
        <card>
            <template #l1>
                <div class="box-left">
                    姓名
                </div>
            </template>
            <template #r1>
                {{ userInfo[0]?.userName }}
            </template>
            <template #l2>
                <div class="box-left">
                    身份证号
                </div>
            </template>
            <template #r2>
                <div class="box-right">
                    {{ userInfo[0]?.idCard }}
                </div>
            </template>
            <template #l3>
                <div class="box-left">
                    领票日期
                </div>
            </template>
            <template #r3>
                {{ ticketsInfo.drawDay }}
            </template>
            <template #l4>
                <div class="box-left">
                    核验项目
                </div>
            </template>
            <template #r4>
                {{ ticketsInfo.ticketName }}
            </template>
            <template #l5 v-if="userInfo[0]?.checkTime">
                <div class="box-left">
                    核验日期
                </div>
            </template>
            <template #r5 v-if="userInfo[0]?.checkTime">
                {{ userInfo[0]?.checkTime }}
            </template>
        </card>
        <up-button type="primary" text="核验人像" shape="circle" color="#000" style="width:436rpx " @click="checkPerson"
            v-if="ticketsInfo.status === 1"></up-button>
    </div>
</template>

<script setup>
import card from '@/components/card/index.vue'
import { reactive } from "vue";
import { onLoad } from "@dcloudio/uni-app"
import { ref, getCurrentInstance } from 'vue';
const currentInstance = getCurrentInstance();
const { $request } =
    currentInstance.appContext.config.globalProperties;
onLoad((option) => {
    console.log(option);
    getQrInfo()
});

let ticketsInfo = reactive({})
let userInfo = ref([])

const name = ref(uni.getStorageSync('nickName'))

const getQrInfo = () => {
    $request.qrCodeInfo({ appointmentUid: 'd7db1538-eb98-4ef8-86ed-0400adcee6ac' }).then((res) => {
        if (res.status === 0) {
            ticketsInfo = res.data.ticketsInfo
            userInfo.value = res.data.userInfo
            console.log(res.data.userInfo)
        } else {
            uni.$u.toast(res.msg);
        }
    })
}
const checkPerson = () => {
    uni.connectSocket({
        url: `ws://warehouse.szjixun.cn/ticket/api/smart/check/issue/msg?AppointmentUid=d7db1538-eb98-4ef8-86ed-0400adcee6ac`,
        success: function () {
            console.log('WebSocket连接已创建成功！');
        }
    });
    uni.onSocketOpen((res) => {
        console.log(res, 'onSocketOpen')
    });
    uni.onSocketMessage((res) => {
        console.log('WebSocket接收到消息：', res);
        if (res.data) {
            checkQr(res.data)
        }
    });
    uni.onSocketError(function (res) {
        console.log(res);
    });

}
const checkQr = (img) => {
    $request.checkQr({
        appointmentUid: '',
        imageUrl: img
    }).then((res) => {
        if (res.status === 0) {
            getQrInfo()
        } else {
            uni.$u.toast(res.msg);
        }
    })
}
</script>

<style lang="scss" scoped>
.main {
    width: 100%;
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    background: url('@/static/bg.png');
    background-size: cover;
    box-sizing: border-box;
    padding: 42rpx 26rpx;

    .img {
        width: 100%;
        height: 354rpx;
        margin-top: 40rpx;
    }

    .box-left {
        font-size: 28rpx;
    }
}
</style>