fbfListPage.vue 4.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226
  1. ```vue
  2. <template>
  3. <!-- 页面容器 -->
  4. <view class="container">
  5. <!-- 顶部标签栏 -->
  6. <view class="tab-bar">
  7. <view v-for="(tab, index) in tabs" :key="index" :class="['tab-item', currentTab === index ? 'active' : '']"
  8. @click="switchTab(index)">
  9. {{ tab }}
  10. </view>
  11. </view>
  12. <!-- 搜索区域 -->
  13. <!-- <view class="search-bar">
  14. <input type="text" placeholder="请输入承包方姓名" v-model="searchName" class="search-input" />
  15. <button class="search-btn" @click="handleSearch">搜索</button>
  16. </view> -->
  17. <!-- 数据列表 -->
  18. <view class="list" v-if="!isDataEmpty">
  19. <view class="list-item" v-for="(item, idx) in dataList" :key="idx" @click="goDetail(item,currentTab)">
  20. <!-- 地块数据展示 -->
  21. <view class="item-title" v-if="currentTab === 0">
  22. 地块编号:{{ item.dkTemp.dkbm }}
  23. </view>
  24. <view class="item-desc" v-if="currentTab === 0">
  25. 地块名称:{{ item.dkTemp.dkmc || '未知' }} | 实测面积:{{ item.dkTemp.scmjm || 0 }}亩
  26. </view>
  27. <!-- 家庭成员数据展示 -->
  28. <view class="item-title" v-if="currentTab === 1">
  29. 姓名:{{ item.cbfJtcyTemp.cyxm || '未知姓名' }}
  30. </view>
  31. <view class="item-desc" v-if="currentTab === 1">
  32. 身份证:{{ item.cbfJtcyTemp.yhzgx || '无' }} | 与户主关系:{{ item.yhzgx || '未知' }}
  33. </view>
  34. </view>
  35. </view>
  36. <!-- 无数据占位区域 -->
  37. <view class="empty-data" v-else>
  38. <text class="empty-text">暂无数据</text>
  39. </view>
  40. </view>
  41. </template>
  42. <script setup>
  43. import {
  44. ref
  45. } from 'vue';
  46. import {
  47. getintermediateTableBeReviewed,
  48. getFamilyMembersData
  49. } from '@/api/villageCadre.js';
  50. import {
  51. onLoad
  52. } from '@dcloudio/uni-app';
  53. // 标签
  54. const tabs = ref(['地块数据', '家庭成员数据']);
  55. const currentTab = ref(0);
  56. const searchName = ref('');
  57. // 接口数据
  58. const dataList = ref([]);
  59. const isDataEmpty = ref(true);
  60. // ============= 根据标签自动调用对应接口 =============
  61. async function getListData() {
  62. try {
  63. const params = {
  64. fbfbm: searchName.value
  65. };
  66. let res = null;
  67. // 标签0 → 地块数据
  68. if (currentTab.value === 0) {
  69. res = await getintermediateTableBeReviewed(params);
  70. }
  71. // 标签1 → 家庭成员数据
  72. else if (currentTab.value === 1) {
  73. res = await getFamilyMembersData(params);
  74. }
  75. console.log('当前标签:', currentTab.value, '数据:', res.data);
  76. dataList.value = res.data || [];
  77. isDataEmpty.value = dataList.value.length === 0;
  78. } catch (err) {
  79. console.error('获取失败:', err);
  80. dataList.value = [];
  81. isDataEmpty.value = true;
  82. }
  83. }
  84. // 跳转详情(可自行修改)
  85. const goDetail = (item, tabs) => {
  86. console.log('点击项:', item, tabs);
  87. if (tabs == 0) {
  88. uni.navigateTo({
  89. url: `/pages/investigator/Households/currentDetails`
  90. })
  91. } else {
  92. uni.navigateTo({
  93. url: `/pages/...?id=${item.id}`
  94. })
  95. }
  96. };
  97. // 切换标签
  98. function switchTab(index) {
  99. currentTab.value = index;
  100. getListData();
  101. }
  102. // ==================== 入口 ====================
  103. onLoad(async (options) => {
  104. const info = options.fbfbm;
  105. searchName.value = info;
  106. console.log(123, info)
  107. // 初始化
  108. getListData();
  109. });
  110. </script>
  111. <style scoped>
  112. /* 页面容器 */
  113. .container {
  114. padding: 10rpx;
  115. background-color: #f5f5f5;
  116. min-height: 100vh;
  117. }
  118. /* 标签栏样式 */
  119. .tab-bar {
  120. display: flex;
  121. margin-bottom: 20rpx;
  122. background: #fff;
  123. border-radius: 8rpx;
  124. }
  125. .tab-item {
  126. flex: 1;
  127. text-align: center;
  128. padding: 20rpx 0;
  129. font-size: 28rpx;
  130. color: #333;
  131. }
  132. .tab-item.active {
  133. background-color: #2c83ff;
  134. color: #fff;
  135. border-radius: 8rpx;
  136. }
  137. /* 搜索栏样式 */
  138. .search-bar {
  139. display: flex;
  140. align-items: center;
  141. margin-bottom: 20rpx;
  142. background: #fff;
  143. padding: 15rpx;
  144. border-radius: 8rpx;
  145. }
  146. .search-input {
  147. flex: 1;
  148. height: 60rpx;
  149. border: 1px solid #e5e5e5;
  150. border-radius: 8rpx 0 0 8rpx;
  151. padding: 0 20rpx;
  152. font-size: 28rpx;
  153. }
  154. .search-btn {
  155. width: 120rpx;
  156. height: 60rpx;
  157. background-color: #2c83ff;
  158. color: #fff;
  159. font-size: 28rpx;
  160. border-radius: 0 8rpx 8rpx 0;
  161. display: flex;
  162. align-items: center;
  163. justify-content: center;
  164. border: none;
  165. }
  166. /* 列表样式 */
  167. .list {
  168. background: #fff;
  169. border-radius: 12rpx;
  170. overflow: hidden;
  171. }
  172. .list-item {
  173. padding: 25rpx;
  174. border-bottom: 1rpx solid #f0f0f0;
  175. position: relative;
  176. }
  177. .item-title {
  178. font-size: 32rpx;
  179. color: #333;
  180. font-weight: 500;
  181. margin-bottom: 10rpx;
  182. }
  183. .item-desc {
  184. font-size: 26rpx;
  185. color: #666;
  186. }
  187. /* 无数据占位样式 */
  188. .empty-data {
  189. display: flex;
  190. justify-content: center;
  191. margin-top: 150rpx;
  192. }
  193. .empty-text {
  194. font-size: 28rpx;
  195. color: #999;
  196. }
  197. </style>