MiniScm/subpkg/elevatorControl/elevatorControl.vue

<template>
<view>
    <view class="have-reservation" v-if="Object.keys(checkinInfo).length > 0">
        <view class="checkin-info" :style="{width: diaplayWidth}">
            <view class="checkin-info--title">
                {{ checkinInfo.hotelName }}
            </view>
            <view class="checkin-info--desc">
                <view class="card-item" v-if="checkinInfo.building">
                    <view class="card-item-left">
                        <text>所属楼栋：</text>
                    </view>
                    <text>{{ checkinInfo.building }}</text>
                </view>
                <view class="card-item">
                    <view class="card-item-left">
                        <text>所在楼层：</text>
                    </view>
                    <text>{{ checkinInfo.floor }}</text>
                </view>
                <view class="card-item">
                    <view class="card-item-left">
                        <text>房间信息：</text>
                    </view>
                    <text>{{ checkinInfo.room }}</text>
                </view>
                <view class="card-item">
                    <view class="card-item-left">
                        <text>起始时间：</text>
                    </view>
                    <text>{{ formatDateTime(checkinInfo.startTime) }}\n</text>
                </view>
                <view class="card-item">
                    <view class="card-item-left">
                        <text>结束时间：</text>
                    </view>
                    <text>{{ formatDateTime(checkinInfo.endTime) }}</text>
                </view>
            </view>
        </view>
        <view class="qrcode" :style="{width:qrCodeWidth, height:qrCodeWidth, display:showQRCode ? '' : 'none' }" >
            <img style="width: 100%; height: 100%;" :src="getUrl()"/>
        </view>
    </view>
    <view v-else class="not-reservation">
      <text class="tip">您还未入住</text>
    </view>
  </view>
</template>

<script>
    import { mapState } from "vuex";
    import {
        getCheckinInfo,
        getElevatorQRCode
    } from "../../utils/api";
    import moment from "moment";
    import { QRCodeSVG } from '../../utils/qrCode/qrcode/src/index';
    import svgToDataURL  from "svg-to-dataurl";
    import { YUN_XIANG_ZHU} from "../../static/yun_xiang_zhuBase64"
    export default {
        data() {
            return {
                checkinInfo: {},
                qrCodeDate:"",
                qrCode:"",
                diaplayWidth:"",
                qrCodeWidth: "",
                showQRCode:false
            } 
        },
        computed:{
            ...mapState("m_business",["currentHotelId"]),
            ...mapState("m_user", ["userInfo"])
        },
        methods:{
            getUrl(){
                return svgToDataURL(this.qrCode)
            },
            formatDateTime(dateTime) {
                return  moment(dateTime).format("YYYY年MM月DD日 HH时mm分");
            }
        },
        async onLoad(){
            const info = await getCheckinInfo({
                userIdNumber: this.userInfo.idNumber,
                hotelId: this.currentHotelId,
                status: 1,
                pageNo: 1,
                pageSize: 1,
            })
            // console.log("getCheckinInfo", info);

            if (!info.data.data.records.length) {
                console.log("未查询到入住记录");
                return
            }

            this.checkinInfo = info.data.data.records[0];
            // console.log("入住记录", this.checkinInfo);

            const qrCodeMsg = await getElevatorQRCode({
                hotelId: this.currentHotelId,
                building: 1,
                floor: this.checkinInfo.floor,
                customerId: this.checkinInfo.customerUserId,
                customerType: 1,
                status: 1,
                activeTime: this.checkinInfo.endTime
            })
            // console.log("qrCodeMsg", qrCodeMsg);
            if (!qrCodeMsg.data.success) {
                console.log("获取梯控二维码data数据失败", qrCodeMsg.data);
                return
            }
            this.qrCodeDate = qrCodeMsg.data.data.data
            console.log("获取qrCodeDate", this.qrCodeDate);

            // #ifdef MP-WEIXIN
                const wxSystemInfo = await wx.getSystemInfo()
                // console.log("systeminfo", systemInfo.screenWidth);
                this.diaplayWidth = (wxSystemInfo.screenWidth - 40).toFixed() + "px"
                this.qrCodeWidth = (wxSystemInfo.screenWidth * 3 / 5).toFixed() + "px"
            // #endif

            // #ifdef MP-ALIPAY
                let alipaySystemInfo = await wx.getSystemInfo()
                alipaySystemInfo = alipaySystemInfo[1].screen
                console.log("alipaySystemInfo",alipaySystemInfo);
                this.diaplayWidth = (alipaySystemInfo.width - 40).toFixed() + "px"
                this.qrCodeWidth = (alipaySystemInfo.width * 3 / 5).toFixed() + "px"
            // #endif

            // console.log("qrcodr", this.qrCodeDate);
            this.$nextTick(() => {
                const qrSvg = new QRCodeSVG(
                    this.qrCodeDate,
                    {
                        padding: 0,
                        image: {
                            source: YUN_XIANG_ZHU,
                            width: '40%',
                            height: '40%',
                            x: 'center',
                            y: 'center',
                            border: 1
                        },
                        level: "Q"
                    }
                )
                this.qrCode = qrSvg.toString()
                this.showQRCode = true
            })
        },
    }
</script>

<style lang="scss">
page {
    margin: 0;
    padding: 0;

    .have-reservation{
        height: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        margin-top: 10rpx;

        .checkin-info{
            height: 100%;
            display: flex;
            flex-direction: column;
            justify-content: center;
            margin: 10rpx 20rpx;
            padding: 10rpx 20rpx;
            background-color: #ffffff;
            border-radius: 10rpx;

            .checkin-info--title {
                margin: 10rpx 20rpx;
                padding-bottom: 10rpx;
                border-bottom: 2px solid #f5f5f5;
                font-size: 34rpx;
            }

            .checkin-info--desc {
                margin: 0 20rpx;
                font-size: 30rpx;
                color: #6a6a82;

                .card-item {
                    margin-top: 4rpx;
                    margin-bottom: 4rpx;
                    display: flex;

                    .card-item-left {
                        width: 160rpx;
                    }
                }
            }
        }

        .qrcode{
            display: flex;
            margin: 10rpx 20rpx;
            padding: 10rpx 20rpx;
            background: #ffffff;
            border-radius: 10rpx;
        }
    }



    .not-reservation {
        display: flex;
        justify-content: center;
        height: 100%;
        text-align: center;
        vertical-align: 100rpx;

        .tip {
            padding-top: 40%;
        }
    }
}

</style>