对接访客邀请接口

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

@@ -20,8 +20,7 @@
           <text class="label">联系方式：</text>
           <text class="value">{{ visitorInfo.phone }}</text>
         </view>
-        <!-- 车牌号可选显示 -->
-        <view class="info-item" v-if="visitorInfo.carNumber">
+        <view class="info-item">
           <text class="label">车牌号：</text>
           <text class="value">{{ visitorInfo.carNumber }}</text>
         </view>
@@ -52,35 +51,68 @@
     </view>
 
     <!-- 分享二维码按钮（仅等待来访状态显示） -->
-    <view class="btn-wrap" v-if="visitorInfo.status === 'waiting'">
+   <!-- <view class="btn-wrap" v-if="visitorInfo.status === 'waiting'">
       <button class="share-btn" @click="goToQrcode">分享通行二维码</button>
-    </view>
+    </view> -->
   </view>
 </template>
 
 <script setup>
 import { ref } from 'vue';
 import {onLoad} from '@dcloudio/uni-app'
+import {getVisitorDetail} from '../api/api.js'
 
 // 访客信息（实际项目中从接口获取）
-// const visitorInfo = ref({})
 const visitorInfo = ref({
-  name: '张三',
+  name: '',
   status: 'waiting', // waiting:等待来访，visited:已到访
-  address: '桂花园（别墅）2号楼2层',
-  phone: '13866666666',
-  carNumber: '京A88888', // 可传空隐藏
+  address: '',
+  phone: '',
+  carNumber: '',
   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' // 已到访时显示
-});
+  validTime: '',
+  inviteTime: '',
+  visitTime: ''
+})
 
+// 把后端返回的字段映射成详情页
+const mapDetail = (item) => {
+  const addressParts = [
+    item.villageName,
+    item.floorNo ? item.floorNo + '栋' : '',
+    item.unitNo ? item.unitNo + '单元' : '',
+    item.houseNo
+  ].filter(Boolean)
+  const status = item.status === 1 || item.status === '1' ? 'visited' : 'waiting'
+  return {
+    name: item.visitorName || '',
+    status,
+    address: addressParts.join(''),
+    phone: item.visitorPhone || '',
+    carNumber: item.carNum || '',
+    escortNum: item.visitorNum || 0,
+    validTime: item.startTime && item.endTime ? `${item.startTime} 至 ${item.endTime}` : '',
+    inviteTime: item.createTime || '',
+    visitTime: item.visitTime || ''
+  }
+}
 
-onLoad((option) =>{
-	const infoStr = decodeURIComponent(JSON.stringify(option))
-	// console.log('infoStr',infoStr)
-	visitorInfo.value = infoStr.item
+// 获取访客详情
+const fetchVisitorDetail = async (id) => {
+  try {
+    const res = await getVisitorDetail(id)
+    if (res && res.data) {
+      visitorInfo.value = mapDetail(res.data)
+    }
+  } catch (e) {
+    console.error('获取访客详情失败:', e)
+  }
+}
+
+onLoad((option) => {
+  if (option && option.id) {
+    fetchVisitorDetail(option.id)
+  }
 })
 // 跳转到二维码页面
 const goToQrcode = () => {
@@ -92,7 +124,7 @@ const goToQrcode = () => {
 
 <style scoped>
 .visitor-detail-page {
-  background-color: #f8f8f8;
+  background-color: #fff;
   min-height: 100vh;
 }
 
@@ -111,8 +143,7 @@ const goToQrcode = () => {
 }
 
 .title {
-  font-size: 32rpx;
-  font-weight: 600;
+  font-size: 28rpx;
 }
 
 .status {
@@ -123,7 +154,6 @@ const goToQrcode = () => {
 
 .waiting {
   color: #007aff;
-  background: #e8f4ff;
 }
 
 .visited {
@@ -142,20 +172,22 @@ const goToQrcode = () => {
 }
 
 .label {
-  color: #666;
+  color: #222;
   width: 160rpx;
 }
 
 .value {
-  color: #333;
+  color: #222;
   flex: 1;
 }
 
 .tips-text {
   margin: 0 20rpx;
   font-size: 24rpx;
-  color: #999;
+  color: #666;
   line-height: 1.6;
+  text-align: center;
+  margin-top: 98rpx;
 }
 
 .btn-wrap {