LandSurveyApplet/pages/investigator/Households/index.vue

<template>
  <view class="page-container">
    <!-- 搜索栏 -->
    <view class="search-bar">
      <input 
        v-model="searchKey" 
        class="search-input" 
        placeholder="请输入承包方姓名/身份证号"
      />
      <button class="search-btn" @click="handleSearch">搜索</button>
    </view>

    <!-- 数据统计 -->
    <view class="total-count">
      共计 {{ total }} 条
    </view>

    <!-- 列表区域 -->
    <view class="list-container">
      <!-- 列表项（循环渲染） -->
      <view class="list-item" v-for="(item, index) in contractorList" :key="index" @click="progressPage()">
        <!-- 姓名 + 状态标签 -->
        <view class="item-header">
          <text class="name">{{ item.name }}</text>
          <view class="status-tag">
            {{ item.status }}
          </view>
        </view>

        <!-- 详情信息（一行多列） -->
        <view class="item-info-row">
          <view class="info-item">
            <text class="label">身份证号：</text>
            <text class="value">{{ item.idCard }}</text>
          </view>
        </view>
        <view class="item-info-row">
          <view class="info-item">
            <text class="label">上报时间：</text>
            <text class="value">{{ item.reportTime }}</text>
          </view>
        </view>
        <view class="item-info-row">
          <view class="info-item">
            <text class="label">家庭人口：</text>
            <text class="value">{{ item.familyCount }}</text>
          </view>
          <view class="info-item">
            <text class="label">地块数量：</text>
            <text class="value">{{ item.landCount }}</text>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, onMounted } from 'vue';

// 搜索关键词
const searchKey = ref('');
// 列表数据（模拟接口返回）
const contractorList = ref([
  {
    name: '王战伟',
    status: '已上报·审核通过',
    idCard: '430322******1015',
    reportTime: '2025-08-09 16:09:13',
    familyCount: 2,
    landCount: 2
  },
  {
    name: '王战克',
    status: '已上报·审核通过',
    idCard: '430322******1032',
    reportTime: '2025-07-09 16:20:55',
    familyCount: 4,
    landCount: 1
  },
  {
    name: '王城埠',
    status: '已上报·审核通过',
    idCard: '430322******1019',
    reportTime: '2025-07-09 16:25:02',
    familyCount: 8,
    landCount: 1
  },
  {
    name: '王怀埠',
    status: '已上报·审核通过',
    idCard: '430322******1031',
    reportTime: '2025-07-09 16:27:07',
    familyCount: 2,
    landCount: 1
  },
  {
    name: '董庆林',
    status: '已上报·审核通过',
    idCard: '430322******1010',
    reportTime: '2025-07-09 16:29:05',
    familyCount: 3,
    landCount: 1
  },
  {
    name: '王立位',
    status: '已上报·审核通过',
    idCard: '430322******1014',
    reportTime: '2025-07-09 16:30:03',
    familyCount: 3,
    landCount: 2
  }
]);
// 总条数
const total = ref(contractorList.value.length);

// 页面加载时初始化（可替换为接口请求）
onMounted(() => {
  // 实际项目中这里调用接口获取列表数据
  // getContractorList().then(res => {
  //   contractorList.value = res.data;
  //   total.value = res.total;
  // });
});

// 搜索事件
const handleSearch = () => {
  // 实际项目中这里调用搜索接口
  uni.showToast({
    title: `搜索关键词：${searchKey.value}`,
    icon: 'none'
  });
  // 模拟搜索（过滤本地数据）
  // const filteredList = 原始数据.filter(item => 
  //   item.name.includes(searchKey.value) || item.idCard.includes(searchKey.value)
  // );
  // contractorList.value = filteredList;
  // total.value = filteredList.length;
};

const progressPage = () => {
	uni.navigateTo({
		url: `/pages/investigator/Households/progress`
	})
}
</script>

<style scoped>
/* 页面容器 */
.page-container {
  padding: 20rpx;
  background-color: #f5f5f5;
  min-height: 100vh;
}

/* 搜索栏 */
.search-bar {
  display: flex;
  gap: 16rpx;
  margin-bottom: 20rpx;
}
.search-input {
  flex: 1;
  height: 68rpx;
  padding: 0 20rpx;
  border: 1rpx solid #ddd;
  border-radius: 8rpx;
  background-color: #fff;
  font-size: 28rpx;
}
.search-btn {
  width: 120rpx;
  height: 68rpx;
  line-height: 68rpx;
  background-color: #1677ff;
  color: #fff;
  border-radius: 8rpx;
  font-size: 28rpx;
  text-align: center;
}

/* 总条数 */
.total-count {
  font-size: 28rpx;
  color: #666;
  margin-bottom: 20rpx;
}

/* 列表容器 */
.list-container {
  display: flex;
  flex-direction: column;
  gap: 16rpx;
}

/* 列表项 */
.list-item {
  background-color: #fff;
  border-radius: 8rpx;
  padding: 20rpx;
}
.item-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16rpx;
}
.name {
  font-size: 32rpx;
  font-weight: 600;
  color: #333;
}
.status-tag {
  font-size: 24rpx;
  color: #1677ff;
  background-color: #e6f0ff;
  padding: 4rpx 12rpx;
  border-radius: 4rpx;
}

/* 信息行 */
.item-info-row {
  display: flex;
  flex-wrap: wrap;
  gap: 20rpx;
  margin-bottom: 12rpx;
}
.info-item {
  display: flex;
  font-size: 26rpx;
}
.label {
  color: #999;
  margin-right: 8rpx;
}
.value {
  color: #333;
}
</style>