SFH5/pages/orderdetail/door.vue

<template>
	<view class="container" :class="[`${themeInfo.theme}-theme`]">
        <navBar></navBar>
        <view class="box">
            <view class="top-box">
                <view class="number">
                    {{ lockDetail.lockerName }}
                </view>
                <view class="detail">
                    {{ $t("detail.store") }}： {{ lockDetail.siteName }} <br>
                    {{ $t("detail.unit") }}： {{ lockDetail.unitTypeName }}<br>
                    <view v-if="lockDetail.orderStartStatus == 2 && lockDetail.refundLockerStatus === 0">{{ $t("detail.remain", { days: lockDetail.remainingDays }) }}</view>
					<view style="color: red;" v-else>
						{{ $t('common.status') }}：
						<template v-if="lockDetail.refundLockerStatus === 0">{{ $t("common.notStarted") }}</template>
						<template v-else-if="lockDetail.refundLockerStatus === 1">{{ $t("unlock.cancelPending") }}</template>
						<template v-else-if="lockDetail.refundLockerStatus === 2">{{ $t("unlock.outComplete") }}</template>
						<template v-else-if="lockDetail.refundLockerStatus === 3">{{ $t("unlock.disapproval") }}</template>
					</view>
                </view>
            </view>
            <view class="paw" v-show="ifShow === false">
                <uv-toast ref="toast"></uv-toast>
            </view>
            <img v-show="ifShow" class="paw" width="600rpx" height="600rpx" :src="QRCode" @click="ClickToZoomIn"></img>
            <view class="tip">
                {{ $t("door.tip") }}<br>
                {{ $t("door.valid") }}
            </view>
            <button class="refresh" @click="GetQRCode">
                <uv-icon name="reload" size="24" :color="themeInfo.iconColor"></uv-icon>
                {{ $t("door.refresh") }}
            </button>
			<button class="refresh" @click="ClickToZoomIn">
			    <uv-icon name="search" size="24" :color="themeInfo.iconColor"></uv-icon>
			    {{ $t("common.ClickToZoomIn") }}
			</button>
            <view style="text-align: center;color: #FFFFFF;padding: 10rpx 0;">{{ $t("common.tryZooming") }}</view>
        </view>
        
    </view>
</template>

<script setup>
	import {
		ref
	} from 'vue';
	import navBar from '@/components/navBar.vue'
	import { onLoad } from '@dcloudio/uni-app'
	import { useOrderApi } from '@/Apis/order.js'
    import { useLockApi } from '@/Apis/lock.js'
    // 主题色配置
	import { useMainStore } from "@/store/index.js";
	const { themeInfo } = useMainStore();

	const getApi = useOrderApi()
    const getLockApi = useLockApi()
    const orderId = ref()
    const siteId = ref()
    const lockDetail = ref([])
    const QRCode = ref([])
    const ifShow = ref(false)
    const toast = ref()
    onLoad((params) => {
        // uni.showLoading({mask:true})
        orderId.value = params.id
        siteId.value = params.siteId
        GetOrderDetail()
    })

    const ClickToZoomIn = () => {
        uni.previewImage({
            urls: [QRCode.value],
            longPressActions: {
                itemList: ['发送给朋友', '保存图片'],
            }
        })
    }

    async function GetOrderDetail() {
        uni.showLoading({mask:true})
        await getApi.GetOrderById({ orderId: orderId.value }).then(res=>{
            lockDetail.value = res.data
            GetQRCode()
        })
        
    }
    // 获取二维码

    function GetQRCode() {
        uni.showLoading({mask:true})
        getLockApi.GetAccesscontrolQRCodeBySite({siteId: siteId.value, orderId: orderId.value}).then(res=>{
            if(res.code === 200) {
                QRCode.value = res.data
                ifShow.value = true
            } else {
                ifShow.value = false
            }
            uni.hideLoading();
        })
    }
</script>

<style scoped  lang="scss">
	@import '@/static/style/theme.scss';
.container {
    height: 100vh;
    background: linear-gradient(0.00deg, var(--left-linear) 0%,var(--right-linear) 94.004%);
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}
.box {
    position: relative;
    width: 680rpx;
    border-image-width: 14rpx;
    border-image-slice: 72;
    border-image-repeat: repeat;
    border-image-outset: 20rpx;
    background: #fff;
    border-radius: 26rpx;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.top-box {
    width: 710rpx;
    background: linear-gradient(180.00deg, var(--left-linear), var(--right-linear) 100%);
    border-radius: 26rpx;
    margin-top: -2rpx;
    display: flex;
    align-items: center;
    padding: 40rpx;

    & > .number {
        padding: 0 40rpx;
        color: var(--text-color);
        font-size: 64rpx;
        font-weight: bold;
        width: 50%;
        line-height: 1;
        word-break: break-all;
    }
    & > .detail {
        color: var(--text-color);
        display: flex;
        flex-direction: column;
        font-size: 24rpx;
        font-weight: 500;
        line-height: 1.5;
    }

    &::before {
        content: "";
        position: absolute;
        top: -7px;
        left: 4px;
        width: 100%;
        height: 14px;
        background: radial-gradient(var(--right-linear) 0px, var(--right-linear) 5px, transparent 5px, transparent);
        background-size: 14px 14px;
    }
}
.paw {
    width: 600rpx;
    height: 600rpx;
    background: #F2F2F2;
    margin-top: 74rpx;
    display: flex;
    justify-content: center;
    align-items: center;
}
.tip {
    font-size: 27rpx;
    font-weight: 500;
    margin-top: 34rpx;
    text-align: center;
    color: var(--blackOrWhite);
    letter-spacing: 1px;
}
.refresh {
    width: 520rpx;
    position: relative;
    background: var(--btn-color1);
    border-radius: 12rpx;
    padding: 14rpx 0;
    margin: 50rpx 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28rpx;
    font-weight: 700;
    color: var(--text-color);

    ::v-deep .uv-icon {
        margin-right: 30rpx;
    }
}
.container.golden-theme {
    background: #FFFFFF;

    ::v-deep .back .left span,
    ::v-deep .back .left text {
        color: var(--bg-color) !important;
    }

    .box {
        background: var(--bg-color);
    }

    .top-box::before {
        content: "";
        position: absolute;
        top: -7px;
        left: 4px;
        width: 100%;
        height: 14px;
        background: radial-gradient(#FFFFFF 0px, #FFFFFF 5px, transparent 5px, transparent);
        background-size: 14px 14px;
        z-index: 9;
    }
}
</style>