| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226 |
- ```vue
- <template>
- <!-- 页面容器 -->
- <view class="container">
- <!-- 顶部标签栏 -->
- <view class="tab-bar">
- <view v-for="(tab, index) in tabs" :key="index" :class="['tab-item', currentTab === index ? 'active' : '']"
- @click="switchTab(index)">
- {{ tab }}
- </view>
- </view>
- <!-- 搜索区域 -->
- <!-- <view class="search-bar">
- <input type="text" placeholder="请输入承包方姓名" v-model="searchName" class="search-input" />
- <button class="search-btn" @click="handleSearch">搜索</button>
- </view> -->
- <!-- 数据列表 -->
- <view class="list" v-if="!isDataEmpty">
- <view class="list-item" v-for="(item, idx) in dataList" :key="idx" @click="goDetail(item,currentTab)">
- <!-- 地块数据展示 -->
- <view class="item-title" v-if="currentTab === 0">
- 地块编号:{{ item.dkTemp.dkbm }}
- </view>
- <view class="item-desc" v-if="currentTab === 0">
- 地块名称:{{ item.dkTemp.dkmc || '未知' }} | 实测面积:{{ item.dkTemp.scmjm || 0 }}亩
- </view>
- <!-- 家庭成员数据展示 -->
- <view class="item-title" v-if="currentTab === 1">
- 姓名:{{ item.cbfJtcyTemp.cyxm || '未知姓名' }}
- </view>
- <view class="item-desc" v-if="currentTab === 1">
- 身份证:{{ item.cbfJtcyTemp.yhzgx || '无' }} | 与户主关系:{{ item.yhzgx || '未知' }}
- </view>
- </view>
- </view>
- <!-- 无数据占位区域 -->
- <view class="empty-data" v-else>
- <text class="empty-text">暂无数据</text>
- </view>
- </view>
- </template>
- <script setup>
- import {
- ref
- } from 'vue';
- import {
- getintermediateTableBeReviewed,
- getFamilyMembersData
- } from '@/api/villageCadre.js';
- import {
- onLoad
- } from '@dcloudio/uni-app';
- // 标签
- const tabs = ref(['地块数据', '家庭成员数据']);
- const currentTab = ref(0);
- const searchName = ref('');
- // 接口数据
- const dataList = ref([]);
- const isDataEmpty = ref(true);
- // ============= 根据标签自动调用对应接口 =============
- async function getListData() {
- try {
- const params = {
- fbfbm: searchName.value
- };
- let res = null;
- // 标签0 → 地块数据
- if (currentTab.value === 0) {
- res = await getintermediateTableBeReviewed(params);
- }
- // 标签1 → 家庭成员数据
- else if (currentTab.value === 1) {
- res = await getFamilyMembersData(params);
- }
- console.log('当前标签:', currentTab.value, '数据:', res.data);
- dataList.value = res.data || [];
- isDataEmpty.value = dataList.value.length === 0;
- } catch (err) {
- console.error('获取失败:', err);
- dataList.value = [];
- isDataEmpty.value = true;
- }
- }
- // 跳转详情(可自行修改)
- const goDetail = (item, tabs) => {
- console.log('点击项:', item, tabs);
- if (tabs == 0) {
- uni.navigateTo({
- url: `/pages/investigator/Households/currentDetails`
- })
- } else {
- uni.navigateTo({
- url: `/pages/...?id=${item.id}`
- })
- }
- };
- // 切换标签
- function switchTab(index) {
- currentTab.value = index;
- getListData();
- }
- // ==================== 入口 ====================
- onLoad(async (options) => {
- const info = options.fbfbm;
- searchName.value = info;
- console.log(123, info)
- // 初始化
- getListData();
- });
- </script>
- <style scoped>
- /* 页面容器 */
- .container {
- padding: 10rpx;
- background-color: #f5f5f5;
- min-height: 100vh;
- }
- /* 标签栏样式 */
- .tab-bar {
- display: flex;
- margin-bottom: 20rpx;
- background: #fff;
- border-radius: 8rpx;
- }
- .tab-item {
- flex: 1;
- text-align: center;
- padding: 20rpx 0;
- font-size: 28rpx;
- color: #333;
- }
- .tab-item.active {
- background-color: #2c83ff;
- color: #fff;
- border-radius: 8rpx;
- }
- /* 搜索栏样式 */
- .search-bar {
- display: flex;
- align-items: center;
- margin-bottom: 20rpx;
- background: #fff;
- padding: 15rpx;
- border-radius: 8rpx;
- }
- .search-input {
- flex: 1;
- height: 60rpx;
- border: 1px solid #e5e5e5;
- border-radius: 8rpx 0 0 8rpx;
- padding: 0 20rpx;
- font-size: 28rpx;
- }
- .search-btn {
- width: 120rpx;
- height: 60rpx;
- background-color: #2c83ff;
- color: #fff;
- font-size: 28rpx;
- border-radius: 0 8rpx 8rpx 0;
- display: flex;
- align-items: center;
- justify-content: center;
- border: none;
- }
- /* 列表样式 */
- .list {
- background: #fff;
- border-radius: 12rpx;
- overflow: hidden;
- }
- .list-item {
- padding: 25rpx;
- border-bottom: 1rpx solid #f0f0f0;
- position: relative;
- }
- .item-title {
- font-size: 32rpx;
- color: #333;
- font-weight: 500;
- margin-bottom: 10rpx;
- }
- .item-desc {
- font-size: 26rpx;
- color: #666;
- }
- /* 无数据占位样式 */
- .empty-data {
- display: flex;
- justify-content: center;
- margin-top: 150rpx;
- }
- .empty-text {
- font-size: 28rpx;
- color: #999;
- }
- </style>
|