feat(community): 实现小区详情页面功能

- 新增获取小区详情的API接口communityDetailReq
- 优化小区详情页面展示逻辑，完善数据回显- 增加小区详情数据加载状态提示与异常处理
- 完善小区列表跳转详情页的参数校验与错误提示
- 调整小区详情页面UI布局与字段展示逻辑
- 优化小区列表页点击事件绑定位置提升交互体验

api/common.js

@@ -12,6 +12,8 @@ export const swiperListReq = () => get('/sys/sys-swiper')
 
 export const communityListReq = () => get('/zhsq/zhsq-base-village?withFeeItem=true&withPopulation=true')
 
+export const communityDetailReq = (id) => get(`/zhsq/zhsq-base-village/${id}?withFeeItem=true&withPopulation=true`)
+
 export const roomListReq = params => get('/zhsq/zhsq-base-room', {params})
 
 export const miniRoomListReq = params => get('/zhsq/zhsq-base-room/mini', {params})

pages/community/detail.vue

@@ -1,13 +1,11 @@
 <template>
   <view class="container">
     <view class="detail-card" v-if="detail">
-      <u-cell-group>
+      <u-cell-group :border="false">
         <u-cell title="小区名称" :value="detail.name"></u-cell>
-        <u-cell title="联系电话" :value="detail.contactPhone || '暂无'"></u-cell>
-        <u-cell title="服务等级" :value="detail.serviceLevel || '暂无'"></u-cell>
-        <u-cell title="物业费单价" :value="detail.propertyFeeUnit ? detail.propertyFeeUnit + '元/㎡' : '暂无'"></u-cell>
-        <u-cell title="地址" :value="detail.address || '暂无'"></u-cell>
-        <u-cell title="简介" :value="detail.intro || '暂无'"></u-cell>
+        <u-cell title="联系电话" :value="detail.contactPhone || detail.tel || '暂无'"></u-cell>
+        <u-cell title="服务等级" :value="[ '一级', '二级', '三级', '四级', '五级' ][detail.level] || detail.serviceLevel || '暂无'"></u-cell>
+        <u-cell title="物业费单价" :value="detail.feeItem || '暂无'"></u-cell>
       </u-cell-group>
 
       <view class="intro-section" v-if="detail.intro">
@@ -23,36 +21,55 @@
 </template>
 
 <script>
-import {communityListReq} from "@/api/common";
+import {communityDetailReq} from "@/api/common";
 
 export default {
   data() {
     return {
       id: null,
-      detail: null,
-      allCommunityList: [] // 缓存所有小区数据
+      detail: null
     }
   },
   methods: {
-    async getCommunityList() {
+    async getCommunityDetail() {
       try {
-        const {data} = await communityListReq()
-        this.allCommunityList = data
-        // 根据ID找到对应的小区详情
-        this.detail = data.find(item => item.id === this.id) || null
+        // 显示加载提示
+        uni.showLoading({
+          title: '加载中...'
+        })
+
+        const {data} = await communityDetailReq(this.id)
+        this.detail = data
+
+        // 添加调试信息
+        console.log('获取到的小区详情:', data)
       } catch (error) {
         console.error('获取小区详情失败:', error)
         uni.showToast({
           title: '获取数据失败',
-          icon: 'none'
+          icon: 'none',
+          duration: 2000
         })
+      } finally {
+        // 隐藏加载提示
+        uni.hideLoading()
       }
     }
   },
   onLoad(options) {
+    console.log('页面加载参数:', options)
     this.id = options.id
+
+    // 检查ID是否存在
     if (this.id) {
-      this.getCommunityList()
+      this.getCommunityDetail()
+    } else {
+      console.error('缺少小区ID参数')
+      uni.showToast({
+        title: '参数错误',
+        icon: 'none',
+        duration: 2000
+      })
     }
   }
 }

pages/community/index.vue

@@ -12,8 +12,8 @@
           </view>
         </u-list-item>
         <!-- 列表项 -->
-        <u-list-item v-for="(item, index) in list" :key="index" @click="goToDetail(item)">
-          <view class="table-row">
+        <u-list-item v-for="(item, index) in list" :key="index">
+          <view class="table-row" @click="goToDetail(item)">
             <view class="table-cell name-cell">{{ item.name }}</view>
            <view class="table-cell">{{ item.tel || '暂无' }}</view>
             <view class="table-cell">{{ ['一级', '二级', '三级', '四级', '五级'][item.level] || '暂无' }}</view>
@@ -53,9 +53,30 @@ export default {
       }
     },
     goToDetail(item) {
+      console.log('点击详情，item:', item)
+      // 检查item和item.id是否存在
+      if (!item || !item.id) {
+        console.error('缺少小区ID，无法跳转到详情页')
+        uni.showToast({
+          title: '数据异常，无法查看详情',
+          icon: 'none'
+        })
+        return
+      }
+
       // 跳转到详情页，传递小区ID
       uni.navigateTo({
-        url: `/pages/community/detail?id=${item.id}`
+        url: `/pages/community/detail?id=${item.id}`,
+        success: () => {
+          console.log('成功跳转到详情页')
+        },
+        fail: (err) => {
+          console.error('跳转详情页失败:', err)
+          uni.showToast({
+            title: '跳转失败，请重试',
+            icon: 'none'
+          })
+        }
       })
     }
   },