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

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

api/bill.js

@@ -3,3 +3,5 @@ import post, {get} from "@/api/request";
 export const listBillReq = (params, getTask) => get('/zhsq/zhsq-tollcenter-record-bill-estate/userList', {params, getTask})
 export const makePayReq = data => post('/union-pay/make-pay', data)
 
+
+// https://xq-api.ggsxiangan.com/api/zhsq/zhsq-base-village?withFeeItem=true&withPopulation=true

api/common.js

@@ -10,7 +10,9 @@ 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 communityDetailReq = (id) => get(`/zhsq/zhsq-base-village/${id}?withFeeItem=true&withPopulation=true`)
 
 export const roomListReq = params => get('/zhsq/zhsq-base-room', {params})
 

components/customTabbar.vue

@@ -46,6 +46,12 @@ export default {
             "selectedIconPath": "static/tabbar/service-active.png",
             "text": "服务"
           },
+		  {
+		    "pagePath": "pages/community/index",
+		    "iconPath": "static/tabbar/xiaoqu.png",
+		    "selectedIconPath": "static/tabbar/xiaoqu-active.png",
+		    "text": "小区"
+		  },
           {
             "pagePath": "pages/index/index",
             "iconPath": "static/tabbar/store.png",
@@ -67,7 +73,7 @@ export default {
     tabClick(val) {
       console.log('val', val)
       if (val === 0 && this.current === 0) this.$jump('/pages/index/index')
-      if (val === 2) {
+      if (val === 3) {
         uni.navigateToMiniProgram({
           appId: 'wxad2376fd45fb7eca',
           complete() {

manifest.json

@@ -50,7 +50,6 @@
     "quickapp" : {},
     /* 小程序特有相关 */
     "mp-weixin" : {
-        //        "appid" : "wxd1adb2bb3c51298c",
         "appid" : "wx9a7a82430d0bdd6c",
         "setting" : {
             "urlCheck" : false,

package-lock.json

@@ -4,6 +4,9 @@
   "requires": true,
   "packages": {
     "": {
+      "dependencies": {
+        "dayjs": "^1.11.13"
+      },
       "devDependencies": {
         "sass": "^1.89.2",
         "sass-loader": "^16.0.5"
@@ -333,6 +336,12 @@
         "url": "https://paulmillr.com/funding/"
       }
     },
+    "node_modules/dayjs": {
+      "version": "1.11.18",
+      "resolved": "https://registry.npmjs.org/dayjs/-/dayjs-1.11.18.tgz",
+      "integrity": "sha512-zFBQ7WFRvVRhKcWoUh+ZA1g2HVgUbsZm9sbddh8EC5iv93sui8DVVz1Npvz+r6meo9VKfa8NyLWBsQK1VvIKPA==",
+      "license": "MIT"
+    },
     "node_modules/detect-libc": {
       "version": "1.0.3",
       "resolved": "https://registry.npmmirror.com/detect-libc/-/detect-libc-1.0.3.tgz",
@@ -671,6 +680,11 @@
         "readdirp": "^4.0.1"
       }
     },
+    "dayjs": {
+      "version": "1.11.18",
+      "resolved": "https://registry.npmjs.org/dayjs/-/dayjs-1.11.18.tgz",
+      "integrity": "sha512-zFBQ7WFRvVRhKcWoUh+ZA1g2HVgUbsZm9sbddh8EC5iv93sui8DVVz1Npvz+r6meo9VKfa8NyLWBsQK1VvIKPA=="
+    },
     "detect-libc": {
       "version": "1.0.3",
       "resolved": "https://registry.npmmirror.com/detect-libc/-/detect-libc-1.0.3.tgz",

package.json

@@ -1,6 +1,6 @@
 {
   "devDependencies": {
-    "sass": "^1.89.2",
+    "sass": "^1.90.0",
     "sass-loader": "^16.0.5"
   },
   "dependencies": {

pages.json

@@ -92,6 +92,20 @@
       "style": {
         "navigationBarTitleText": "我的房产"
       }
+    },
+    {
+    	"path" : "pages/community/index",
+    	"style" : 
+    	{
+    		"navigationBarTitleText" : "小区概览"
+    	}
+    },
+    {
+    	"path" : "pages/community/detail",
+    	"style" : 
+    	{
+    		"navigationBarTitleText" : "详情"
+    	}
     }
   ],
   "subPackages": [
@@ -272,6 +286,12 @@
         "iconPath": "static/service.png",
         "selectedIconPath": "static/service-active.png"
       },
+      {
+        "pagePath": "pages/community/index",
+        "text": "小区",
+        "iconPath": "static/xiaoqu.png",
+        "selectedIconPath": "static/xiaoqu-active.png"
+      },
       {
         "pagePath": "pages/store/index",
         "text": "商城",

pages/community/detail.vue

@@ -0,0 +1,106 @@
+<template>
+  <view class="container">
+    <view class="detail-card" v-if="detail">
+      <u-cell-group :border="false">
+        <u-cell title="小区名称" :value="detail.name"></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">
+        <view class="section-title">小区介绍</view>
+        <view class="intro-content">
+          {{ detail.intro }}
+        </view>
+      </view>
+    </view>
+
+    <u-empty v-else text="加载中..." />
+  </view>
+</template>
+
+<script>
+import {communityDetailReq} from "@/api/common";
+
+export default {
+  data() {
+    return {
+      id: null,
+      detail: null
+    }
+  },
+  methods: {
+    async getCommunityDetail() {
+      try {
+        // 显示加载提示
+        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',
+          duration: 2000
+        })
+      } finally {
+        // 隐藏加载提示
+        uni.hideLoading()
+      }
+    }
+  },
+  onLoad(options) {
+    console.log('页面加载参数:', options)
+    this.id = options.id
+
+    // 检查ID是否存在
+    if (this.id) {
+      this.getCommunityDetail()
+    } else {
+      console.error('缺少小区ID参数')
+      uni.showToast({
+        title: '参数错误',
+        icon: 'none',
+        duration: 2000
+      })
+    }
+  }
+}
+</script>
+
+<style scoped>
+.container {
+  padding: 20rpx;
+}
+
+.detail-card {
+  background-color: #fff;
+  border-radius: 10rpx;
+  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1);
+  padding: 20rpx;
+  margin-bottom: 20rpx;
+}
+
+.section-title {
+  font-size: 32rpx;
+  font-weight: bold;
+  margin: 30rpx 0 20rpx 0;
+  color: #333;
+}
+
+.intro-content {
+  font-size: 28rpx;
+  line-height: 1.6;
+  color: #666;
+  padding: 20rpx;
+  background-color: #f9f9f9;
+  border-radius: 10rpx;
+}
+</style>

pages/community/index.vue

@@ -0,0 +1,118 @@
+<template>
+  <view>
+    <template v-if="list.length">
+      <u-list>
+        <!-- 表头 -->
+        <u-list-item class="table-header">
+          <view class="table-row bg-gray-light">
+            <view class="table-cell header-cell name-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">
+          <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>
+            <view class="table-cell">{{ item.feeItem ? item.feeItem + '元/㎡' : '暂无' }}</view>
+          </view>
+        </u-list-item>
+      </u-list>
+    </template>
+    <u-empty v-else text="暂无小区信息"/>
+    <custom-tabbar :current="1"/>
+  </view>
+</template>
+
+<script>
+import CustomTabbar from "@/components/customTabbar.vue";
+import {communityListReq} from "@/api/common";
+
+export default {
+  name: "CommunityIndex",
+  components: {CustomTabbar},
+  data() {
+    return {
+      list: []
+    }
+  },
+  methods: {
+    async getList() {
+      try {
+        const {data} = await communityListReq()
+        this.list = data
+      } catch (error) {
+        console.error('获取小区列表失败:', error)
+        uni.showToast({
+          title: '获取数据失败',
+          icon: 'none'
+        })
+      }
+    },
+    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}`,
+        success: () => {
+          console.log('成功跳转到详情页')
+        },
+        fail: (err) => {
+          console.error('跳转详情页失败:', err)
+          uni.showToast({
+            title: '跳转失败，请重试',
+            icon: 'none'
+          })
+        }
+      })
+    }
+  },
+  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: 14px;
+}
+
+.name-cell {
+  flex: 2; /* 小区名称列宽度是其他列的两倍 */
+  text-align: left;
+  padding-left: 15px;
+}
+
+.header-cell {
+  color: #333;
+}
+</style>

pnpm-lock.yaml

@@ -13,7 +13,7 @@ importers:
         version: 1.11.13
     devDependencies:
       sass:
-        specifier: ^1.89.2
+        specifier: ^1.90.0
         version: 1.90.0
       sass-loader:
         specifier: ^16.0.5