property-resident-side/property-uniapp-project/pageSubPack/visitor/visitor-detail.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.type !== '1'">
          <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'
import {getVisitorDetail} from '../api/api.js'

// 访客信息（实际项目中从接口获取）
const visitorInfo = ref({
  name: '',
  status: 'waiting', // waiting:等待来访，visited:已到访
  type: '',
  address: '',
  phone: '',
  carNumber: '',
  escortNum: 0,
  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,
    type: item.type || '',
    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 || ''
  }
}

// 获取访客详情
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 = () => {
  uni.navigateTo({
    url: '/pageSubPack/visitor/qrcode-page'
  });
};
</script>

<style scoped>
.visitor-detail-page {
  background-color: #fff;
  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: 28rpx;
}

.status {
  font-size: 28rpx;
  padding: 6rpx 16rpx;
  border-radius: 20rpx;
}

.waiting {
  color: #007aff;
}

.visited {
  color: #34c759;
  background: #e6fffa;
}

.info-list {
  margin-top: 20rpx;
}

.info-item {
  display: flex;
  margin-bottom: 16rpx;
  font-size: 28rpx;
}

.label {
  color: #222;
  width: 160rpx;
}

.value {
  color: #222;
  flex: 1;
}

.tips-text {
  margin: 0 20rpx;
  font-size: 24rpx;
  color: #666;
  line-height: 1.6;
  text-align: center;
  margin-top: 98rpx;
}

.btn-wrap {
  margin: 40rpx 20rpx;
}

.share-btn {
  background-color: #007aff;
  color: #fff;
  border-radius: 8rpx;
  height: 88rpx;
  font-size: 28rpx;
  line-height: 88rpx
}
</style>