172 lines
4.1 KiB
Vue
172 lines
4.1 KiB
Vue
<template>
|
||
<view class="visitor-detail-page">
|
||
<!-- 访客信息卡片 -->
|
||
<view class="info-card">
|
||
<view class="info-header">
|
||
<text class="title">来访者：{{ visitorInfo.name }}</text>
|
||
<text class="status {{ visitorInfo.status === 'visited' ? 'visited' : 'waiting' }}">
|
||
{{ visitorInfo.status === 'visited' ? '已到访' : '等待来访' }}
|
||
</text>
|
||
</view>
|
||
|
||
<uni-divider margin="10rpx 0"></uni-divider>
|
||
|
||
<view class="info-list">
|
||
<view class="info-item">
|
||
<text class="label">来访地址：</text>
|
||
<text class="value">{{ visitorInfo.address }}</text>
|
||
</view>
|
||
<view class="info-item">
|
||
<text class="label">联系方式：</text>
|
||
<text class="value">{{ visitorInfo.phone }}</text>
|
||
</view>
|
||
<!-- 车牌号可选显示 -->
|
||
<view class="info-item" v-if="visitorInfo.carNumber">
|
||
<text class="label">车牌号：</text>
|
||
<text class="value">{{ visitorInfo.carNumber }}</text>
|
||
</view>
|
||
<view class="info-item">
|
||
<text class="label">随行人数：</text>
|
||
<text class="value">{{ visitorInfo.escortNum }}人</text>
|
||
</view>
|
||
<view class="info-item">
|
||
<text class="label">有效期：</text>
|
||
<text class="value">{{ visitorInfo.validTime }}</text>
|
||
</view>
|
||
<view class="info-item">
|
||
<text class="label">邀请时间：</text>
|
||
<text class="value">{{ visitorInfo.inviteTime }}</text>
|
||
</view>
|
||
<!-- 已到访状态显示到访时间 -->
|
||
<view class="info-item" v-if="visitorInfo.status === 'visited'">
|
||
<text class="label">到访时间：</text>
|
||
<text class="value">{{ visitorInfo.visitTime }}</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 提示文字 -->
|
||
<view class="tips-text">
|
||
<view>预计来访时间盒预计离开时间间隔不能超过24小时</view>
|
||
车辆停留请勿超出有效期，需及时驶出小区
|
||
</view>
|
||
|
||
<!-- 分享二维码按钮（仅等待来访状态显示） -->
|
||
<view class="btn-wrap" v-if="visitorInfo.status === 'waiting'">
|
||
<button class="share-btn" @click="goToQrcode">分享通行二维码</button>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { ref } from 'vue';
|
||
import {onLoad} from '@dcloudio/uni-app'
|
||
|
||
// 访客信息（实际项目中从接口获取）
|
||
// const visitorInfo = ref({})
|
||
const visitorInfo = ref({
|
||
name: '张三',
|
||
status: 'waiting', // waiting:等待来访，visited:已到访
|
||
address: '桂花园（别墅）2号楼2层',
|
||
phone: '13866666666',
|
||
carNumber: '京A88888', // 可传空隐藏
|
||
escortNum: 0,
|
||
validTime: '2023.06.30 10:00至2023.06.30 23:00',
|
||
inviteTime: '2023年06月30日 09:35',
|
||
visitTime: '2023年06月30日 14:32' // 已到访时显示
|
||
});
|
||
|
||
|
||
onLoad((option) =>{
|
||
const infoStr = decodeURIComponent(JSON.stringify(option))
|
||
// console.log('infoStr',infoStr)
|
||
visitorInfo.value = infoStr.item
|
||
})
|
||
// 跳转到二维码页面
|
||
const goToQrcode = () => {
|
||
uni.navigateTo({
|
||
url: '/pageSubPack/visitor/qrcode-page'
|
||
});
|
||
};
|
||
</script>
|
||
|
||
<style scoped>
|
||
.visitor-detail-page {
|
||
background-color: #f8f8f8;
|
||
min-height: 100vh;
|
||
}
|
||
|
||
.info-card {
|
||
background: #fff;
|
||
margin: 20rpx;
|
||
padding: 20rpx;
|
||
border-radius: 12rpx;
|
||
}
|
||
|
||
.info-header {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
margin-bottom: 10rpx;
|
||
}
|
||
|
||
.title {
|
||
font-size: 32rpx;
|
||
font-weight: 600;
|
||
}
|
||
|
||
.status {
|
||
font-size: 28rpx;
|
||
padding: 6rpx 16rpx;
|
||
border-radius: 20rpx;
|
||
}
|
||
|
||
.waiting {
|
||
color: #007aff;
|
||
background: #e8f4ff;
|
||
}
|
||
|
||
.visited {
|
||
color: #34c759;
|
||
background: #e6fffa;
|
||
}
|
||
|
||
.info-list {
|
||
margin-top: 20rpx;
|
||
}
|
||
|
||
.info-item {
|
||
display: flex;
|
||
margin-bottom: 16rpx;
|
||
font-size: 28rpx;
|
||
}
|
||
|
||
.label {
|
||
color: #666;
|
||
width: 160rpx;
|
||
}
|
||
|
||
.value {
|
||
color: #333;
|
||
flex: 1;
|
||
}
|
||
|
||
.tips-text {
|
||
margin: 0 20rpx;
|
||
font-size: 24rpx;
|
||
color: #999;
|
||
line-height: 1.6;
|
||
}
|
||
|
||
.btn-wrap {
|
||
margin: 40rpx 20rpx;
|
||
}
|
||
|
||
.share-btn {
|
||
background-color: #007aff;
|
||
color: #fff;
|
||
border-radius: 8rpx;
|
||
height: 88rpx;
|
||
font-size: 32rpx;
|
||
}
|
||
</style> |