first commit

property-uniapp-project/pages/visitor/visitor-detail.vue

@@ -0,0 +1,172 @@
+<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: '/pages/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>