property-resident-side/property-uniapp-project/pages/visitor/visitor-list.vue

<template>
  <view class="visitor-page">

    <!-- 标签切换栏 -->
    <view class="tab-bar">
      <view 
        class="tab-item" 
        :class="{ active: activeTab === 'waiting' }"
        @click="activeTab = 'waiting'"
      >
        等待来访
      </view>
      <view 
        class="tab-item" 
        :class="{ active: activeTab === 'visited' }"
        @click="activeTab = 'visited'"
      >
        已到访
      </view>
    </view>

    <!-- 访客列表 -->
    <scroll-view class="list-container" scroll-y>
      <!-- 列表项：根据标签切换显示对应数据 -->
      <view 
        class="visitor-item" 
        v-for="(item, index) in filterdList" 
        :key="index"
      >
        <!-- 访客基本信息 -->
        <view class="item-header">
          <text class="visitor-name" :class="item.status">来访者：{{ item.name }}</text>
          <text class="status-tag" :class="item.status">{{ item.statusText }}</text>
        </view>

        <!-- 有效期/到访时间 -->
        <view class="item-row">
          <text class="label" :class="item.status">{{ item.status === 'waiting' ? '有效期' : '到访时间' }}：</text>
          <text class="value" :class="item.status">{{ item.timeRange }}</text>
        </view>

        <!-- 联系方式 -->
        <view class="item-row">
          <text class="label" :class="item.status">联系方式：</text>
          <text class="value" :class="item.status">{{ item.phone }}</text>
        </view>

        <!-- 车牌号 -->
        <view class="item-row" v-if="item.carNumber">
          <text class="label" :class="item.status">车牌号：</text>
          <text class="value" :class="item.status">{{ item.carNumber }}</text>
        </view>

        <!-- 时间+查看详情 -->
        <view class="item-footer">
          <text class="time-text">时间：{{ item.createTime }}</text>
          <view class="detail-btn" @click="viewDetail(item)">
            <text>查看详情</text>
            <uni-icons type="arrowright" size="14"></uni-icons>
          </view>
        </view>
      </view>
    </scroll-view>

    <!-- 新增邀请按钮 -->
    <view class="add-btn" @click="addInvitation">
      <uni-icons type="plus" size="18" color="#fff"></uni-icons>
      <text class="add-text">新增邀请</text>
    </view>
  </view>
</template>

<script setup>
import { ref, computed } from 'vue'
// import { uniNavigateTo, uniShowToast } from '@dcloudio/uni-app'

// 激活的标签（waiting=等待来访，visited=已到访）
const activeTab = ref('waiting')

// 模拟访客数据（可替换为接口请求数据）
const visitorList = ref([
  {
    name: '张三',
    status: 'waiting', // waiting/visited
    statusText: '等待来访',
    timeRange: '2023.06.30 10:00至2023.06.30 23:00',
    phone: '13866666666',
    carNumber: '京A88888',
    createTime: '2023年06月30日 09:35'
  },
  {
    name: '张三',
    status: 'visited',
    statusText: '已到访',
    timeRange: '2023.06.30 16:32:28',
    phone: '13866666666',
    carNumber: '京A88888',
    createTime: '2023年06月30日 09:35'
  },
  {
    name: '张三',
    status: 'waiting',
    statusText: '等待来访',
    timeRange: '2023.06.30 10:00至2023.06.30 23:00',
    phone: '13866666666',
    carNumber: '',
    createTime: '2023年06月30日 09:35'
  }
])

// 根据标签筛选列表
const filterdList = computed(() => {
  return visitorList.value.filter(item => item.status === activeTab.value)
})


// 查看详情
const viewDetail = (item) => {
	const itemStr = encodeURIComponent(JSON.stringify(item))
	console.log('eeeee',itemStr)
  uni.navigateTo({
    url: `/pages/visitor/visitor-detail?item=${itemStr}` // 传参到详情页
  })
}

// 新增邀请
const addInvitation = () => {
  uni.navigateTo({
    url: '/pages/visitor/visitor-add'
  })
}
</script>

<style scoped>
/* 页面整体样式 */
.visitor-page {
  background-color: #f5f5f5;
  min-height: 100vh;
}

/* 标签切换栏 */
.tab-bar {
  display: flex;
  background-color: #fff;
  border-bottom: 2px solid #f5f5f5;
}
.tab-item {
  flex: 1;
  text-align: center;
  padding: 12px 0;
  font-size: 16px;
  color: #666;
  position: relative;
}
.tab-item.active {
  color: #007aff;
  font-weight: 500;
}
/* 激活标签下划线 */
.tab-item.active::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 50%;
  transform: translateX(-50%);
  width: 40px;
  height: 2px;
  background-color: #007aff;
}

/* 列表容器 */
.list-container {
  height: calc(100vh - 150px); /* 预留导航、标签、按钮高度 */
}

/* 访客列表项 */
.visitor-item {
  background-color: #fff;
  margin: 10px 15px;
  padding: 15px;
  border-radius: 8px;
}
/* 列表项头部（姓名+状态） */
.item-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}
.visitor-name {
  font-size: 16px;
  color: #333;
  font-weight: 500;
}
.visitor-name.visited{
	color: #999;
}
.status-tag {
  font-size: 14px;
  padding: 2px 8px;
  border-radius: 12px;
}
.status-tag.waiting {
  color: #2F77FD;
  /* background-color: #fff8e6; */
}
.status-tag.visited {
  color: #999999;
  /* background-color: #e6fffa; */
}

/* 列表项行数据 */
.item-row {
  display: flex;
  margin-bottom: 8px;
  font-size: 14px;
}
.label {
  color: #222;
  min-width: 80px;
}
.value {
  color: #333;
  flex: 1;
}
.label.visited{
	color: #999;
}
.value.visited{
	color: #999;
}

/* 列表项底部（时间+查看详情） */
.item-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid #f5f5f5;
}
.time-text {
  font-size: 12px;
  color: #666;
}
.detail-btn {
  display: flex;
  align-items: center;
  font-size: 14px;
  color: #666;
}

/* 新增邀请按钮 */
.add-btn {
  position: fixed;
  bottom: 20px;
  left: 15px;
  right: 15px;
  height: 44px;
  line-height: 44px;
  background-color: #007aff;
  color: #fff;
  border-radius: 8px;
  text-align: center;
  font-size: 16px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.add-text {
  margin-left: 5px;
}
</style>