feat(community):优化小区列表展示与详情跳转功能

- 接口请求增加费用项和人口信息参数
- 列表页面添加表头和数据展示样式- 支持点击列表项跳转至详情页
- 增加异常处理和错误提示
- 页面名称从 articleList 更改为 CommunityIndex- 添加详情页面路由配置

api/common.js

@@ -10,7 +10,7 @@ export const indexListReq = data => post('/com/publish-list/list', data)
 
 export const swiperListReq = () => get('/sys/sys-swiper')
 
-export const communityListReq = () => get('/zhsq/zhsq-base-village')
+export const communityListReq = () => get('/zhsq/zhsq-base-village?withFeeItem=true&withPopulation=true')
 
 export const roomListReq = params => get('/zhsq/zhsq-base-room', {params})
 

pages.json

@@ -99,6 +99,13 @@
     	{
     		"navigationBarTitleText" : "小区概览"
     	}
+    },
+    {
+    	"path" : "pages/community/detail",
+    	"style" : 
+    	{
+    		"navigationBarTitleText" : "详情"
+    	}
     }
   ],
   "subPackages": [

pages/community/index.vue

@@ -2,18 +2,27 @@
   <view>
     <template v-if="list.length">
       <u-list>
-		<u-list-item>
-			<td title="adsdsdf">小区名称</td>
-			<td title="adsdsdf">联系电话</td>
-			<td title="adsdsdf">服务等级</td>
-			<td title="adsdsdf">物业费单价</td>
-		</u-list-item>
-        <u-list-item v-for="(item, index) in list" :key="index">
-          <u-cell :title="item.name" is-link :url="`/userPages/pages/article?id=${item.articleId}`" :label="item.createTime"></u-cell>
+        <!-- 表头 -->
+        <u-list-item class="table-header">
+          <view class="table-row">
+            <view class="table-cell header-cell">小区名称</view>
+            <view class="table-cell header-cell">联系电话</view>
+            <view class="table-cell header-cell">等级</view>
+            <view class="table-cell header-cell">物业费单价</view>
+          </view>
+        </u-list-item>
+        <!-- 列表项 -->
+        <u-list-item v-for="(item, index) in list" :key="index" @click="goToDetail(item)">
+          <view class="table-row">
+            <view class="table-cell">{{ item.name }}</view>
+            <view class="table-cell">{{ item.tel || '暂无' }}</view>
+            <view class="table-cell">{{ ['一级', '二级', '三级', '四级', '五级'][item.level] || '暂无' }}</view>
+            <view class="table-cell">{{ item.feeItem ? item.feeItem + '元/㎡' : '暂无' }}</view>
+          </view>
         </u-list-item>
       </u-list>
     </template>
-    <u-empty v-else text="暂无文章"/>
+    <u-empty v-else text="暂无小区信息"/>
     <custom-tabbar :current="1"/>
   </view>
 </template>
@@ -23,22 +32,60 @@ import CustomTabbar from "@/components/customTabbar.vue";
 import {communityListReq} from "@/api/common";
 
 export default {
-  name: "articleList",
+  name: "CommunityIndex",
   components: {CustomTabbar},
   data() {
     return {
-      cateId: null,
       list: []
     }
   },
   methods: {
     async getList() {
-      const {data} = await communityListReq()
-      this.list = data
+      try {
+        const {data} = await communityListReq()
+        this.list = data
+      } catch (error) {
+        console.error('获取小区列表失败:', error)
+        uni.showToast({
+          title: '获取数据失败',
+          icon: 'none'
+        })
+      }
+    },
+    goToDetail(item) {
+      // 跳转到详情页，传递小区ID
+      uni.navigateTo({
+        url: `/pages/community/detail?id=${item.id}`
+      })
     }
   },
-  onLoad({id}) {
+  onLoad() {
     this.getList()
   }
 }
 </script>
+
+<style scoped>
+.table-header {
+  background-color: #f5f5f5;
+  font-weight: bold;
+}
+
+.table-row {
+  display: flex;
+  flex-direction: row;
+  width: 100%;
+  padding: 10px 0;
+}
+
+.table-cell {
+  flex: 1;
+  text-align: center;
+  padding: 5px;
+  font-size: 12px;
+}
+
+.header-cell {
+  color: #333;
+}
+</style>