Browse Source
- 接口请求增加费用项和人口信息参数 - 列表页面添加表头和数据展示样式- 支持点击列表项跳转至详情页 - 增加异常处理和错误提示 - 页面名称从 articleList 更改为 CommunityIndex- 添加详情页面路由配置master
1 changed files with 89 additions and 0 deletions
@ -0,0 +1,89 @@ |
|||
<template> |
|||
<view class="container"> |
|||
<view class="detail-card" v-if="detail"> |
|||
<u-cell-group> |
|||
<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-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 {communityListReq} from "@/api/common"; |
|||
|
|||
export default { |
|||
data() { |
|||
return { |
|||
id: null, |
|||
detail: null, |
|||
allCommunityList: [] // 缓存所有小区数据 |
|||
} |
|||
}, |
|||
methods: { |
|||
async getCommunityList() { |
|||
try { |
|||
const {data} = await communityListReq() |
|||
this.allCommunityList = data |
|||
// 根据ID找到对应的小区详情 |
|||
this.detail = data.find(item => item.id === this.id) || null |
|||
} catch (error) { |
|||
console.error('获取小区详情失败:', error) |
|||
uni.showToast({ |
|||
title: '获取数据失败', |
|||
icon: 'none' |
|||
}) |
|||
} |
|||
} |
|||
}, |
|||
onLoad(options) { |
|||
this.id = options.id |
|||
if (this.id) { |
|||
this.getCommunityList() |
|||
} |
|||
} |
|||
} |
|||
</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> |
Loading…
Reference in new issue