<script setup lang="ts">
|
import { ref } from 'vue'
|
|
definePage({
|
name: 'visitorCode',
|
layout: 'default',
|
style: {
|
navigationStyle: 'custom',
|
},
|
})
|
|
const router = useRouter()
|
const sysInfo = uni.getSystemInfoSync()
|
const statusBarHeight = sysInfo.statusBarHeight || 0
|
const navBarHeight = 44
|
|
function handleBack() {
|
router.back()
|
}
|
</script>
|
|
<template>
|
<view class="min-h-screen w-full relative box-border flex flex-col pb-[100rpx]">
|
<!-- 整个页面的背景图 -->
|
<view class="fixed left-0 top-0 z-0 w-full h-full">
|
<image src="/static/viewCode/bg@2x.png" class="w-full h-full" mode="scaleToFill" />
|
</view>
|
|
<!-- 自定义导航栏 -->
|
<view class="relative z-50 w-full shrink-0" :style="{ height: (statusBarHeight + navBarHeight) + 'px' }">
|
<view class="fixed left-0 top-0 w-full z-50" :style="{ height: (statusBarHeight + navBarHeight) + 'px' }">
|
<view class="flex items-center justify-between w-full absolute left-0 z-10"
|
:style="{ top: statusBarHeight + 'px', height: navBarHeight + 'px' }">
|
<view class="flex h-full w-[88rpx] items-center justify-center relative z-10" @click="handleBack">
|
<wd-icon name="arrow-left" size="40rpx" color="#ffffff" />
|
</view>
|
<view class="absolute left-0 w-full text-center text-[34rpx] font-medium text-white z-0">
|
预约记录
|
</view>
|
<view class="w-[88rpx]"></view>
|
</view>
|
</view>
|
</view>
|
|
<!-- 内容区 -->
|
<view class="relative z-10 px-[32rpx] pt-[24rpx] flex-1 flex flex-col items-center">
|
|
<!-- 提示文字 -->
|
<view class="flex items-center justify-center mb-[24rpx]">
|
<wd-icon name="info-circle" size="32rpx" color="#FFC140" class="mr-[10rpx]" />
|
<text class="text-[24rpx] text-[#FFF] ml-[10rpx]">使用方式：前往访问单位，使用访客机刷此码进场</text>
|
</view>
|
|
<!-- 卡片区域 -->
|
<view class="bg-white rounded-[16rpx] shadow-[0_4rpx_16rpx_rgba(0,0,0,0.05)] w-full mb-[64rpx] overflow-hidden">
|
<view class="h-[96rpx] flex items-center justify-center border-b-[2rpx] border-solid border-[#F5F5F5]">
|
<text class="text-[28rpx] text-[#1A1A1A1] font-medium">王琦的访客码</text>
|
</view>
|
<view class="py-[24rpx] flex flex-col items-center">
|
<view class="flex items-center mb-[16rpx]">
|
<text class="text-[28rpx] text-[#1D2129] font-medium">被访人：</text>
|
<text class="text-[28rpx] text-[#B3B3B3]">王明（管理部）</text>
|
</view>
|
<view class="w-full h-[64rpx] flex items-center justify-center mb-[52rpx]" style="background: linear-gradient(90deg, rgba(0, 104, 255, 0) 0%, #0068FF 50%, rgba(0, 104, 255, 0) 100%);">
|
<text class="text-[28rpx] text-white">2023-10-10 11:30至2023-10-15 18:30</text>
|
</view>
|
|
<!-- 二维码与左右箭头 -->
|
<view class="flex items-center justify-between w-full px-[40rpx] mb-[20rpx] box-border">
|
<view class="w-[24rpx] h-[48rpx] bg-[#EAF2FF] flex items-center justify-center transition-opacity active:opacity-70">
|
<wd-icon name="arrow-left" size="24rpx" color="#0068FF" />
|
</view>
|
<view class="w-[448rpx] h-[448rpx] flex items-center justify-center">
|
<image src="https://api.qrserver.com/v1/create-qr-code/?size=400x400&data=VisitorCode" class="w-full h-full" mode="aspectFit" />
|
</view>
|
<view class="w-[24rpx] h-[48rpx] bg-[#EAF2FF] flex items-center justify-center transition-opacity active:opacity-70">
|
<wd-icon name="arrow-right" size="24rpx" color="#0068FF" />
|
</view>
|
</view>
|
|
<text class="text-[24rpx] text-[#1A1A1A1] mb-[16rpx]">门岗访客机自主登记，刷身份证原件</text>
|
</view>
|
</view>
|
|
<!-- 底部按钮 -->
|
<view class="w-[480rpx] flex flex-col items-center gap-[32rpx]">
|
<view class="w-full h-[96rpx] rounded-full bg-[#0068FF] flex items-center justify-center shadow-[0_8rpx_24rpx_rgba(0,104,255,0.2)] transition-opacity active:opacity-70">
|
<image src="/static/viewCode/Download@2x.png" class="w-[40rpx] h-[40rpx] mr-[16rpx]" mode="aspectFit" />
|
<text class="text-[32rpx] text-white font-medium">下载访客码</text>
|
</view>
|
<view class="w-full h-[96rpx] rounded-full bg-white border-[2rpx] border-solid border-[#0068FF] flex items-center justify-center transition-opacity active:opacity-70 box-border">
|
<image src="/static/home/share.png" class="w-[40rpx] h-[40rpx] mr-[16rpx]" mode="aspectFit" />
|
<text class="text-[32rpx] text-[#0068FF] font-medium">分享好友</text>
|
</view>
|
</view>
|
</view>
|
</view>
|
</template>
|
|
<style scoped>
|
</style>
|
