Compare commits
6 Commits
45468fd8e0
...
8400bd158c
| Author | SHA1 | Date |
|---|---|---|
 科技小王子
|
8400bd158c | 6 days ago |
|
科技小王子
|
6de1086701 | 6 days ago |
|
科技小王子
|
6c0bd88e31 | 6 days ago |
|
科技小王子
|
2450169eac | 6 days ago |
|
科技小王子
|
10886da744 | 6 days ago |
|
科技小王子
|
7372eed3e2 | 6 days ago |
12 changed files with 272 additions and 5 deletions
@ -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> |
|||
@ -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> |
|||
|
After Width: | Height: | Size: 2.1 KiB |
|
After Width: | Height: | Size: 1.9 KiB |
Loading…
Reference in new issue