<template>
|
<view class="">
|
<!-- <view class="tab">
|
<u-tabs :list="tabList" :current="tabIndex" @click="changeTab" :inactiveStyle="{color:'#999999'}"
|
:activeStyle="{color:'#017BFC'}"></u-tabs>
|
</view> -->
|
|
<view class="grid flex flex-wrap bgc-ff">
|
<view class="grid-item flex f-d-c a-i-c j-c-c" v-for="i in gridList">
|
<!-- <text class="mb-20 f-28"></text> -->
|
<u-image v-if="i.picUrl" :src="i.picUrl" width="100" height="100"></u-image>
|
<u-image v-else src="/static/icon/user-01.png" width="100" height="100"></u-image>
|
<text class="mt-20">{{i.gridmanName}}</text>
|
<text class="c-99 f-26">{{i.mobile}}</text>
|
</view>
|
</view>
|
|
<view class="detail bgc-ff">
|
<caption-row title="网格基本情况" />
|
<view class="detail-content f-28">
|
<text v-for="i in houseList" v-if="i.aoiName">{{i.aoiName?i.aoiName:''}} {{i.buildingName|| ""}} </text>
|
</view>
|
</view>
|
|
<view class="comment" v-if="false">
|
<caption-row title="留言" />
|
<view class="comment-list ">
|
<view class="comment-item flex " v-for="(item,index) in commentList" :key="index">
|
<u-avatar size="45" src="/static/icon/user-01.png"></u-avatar>
|
<view class="comment-item-content">
|
<view class="flex j-c-s-b a-i-c mb-20">
|
<text class="f-28 c-99">{{item.name}}</text>
|
<text class="c-99 f-24">{{item.createTime}}</text>
|
</view>
|
<view class="f-30">
|
{{item.content}}
|
</view>
|
</view>
|
</view>
|
</view>
|
</view>
|
<!-- <view class="footer">
|
<u-search searchIcon='edit-pen' :animation="true" placeholder="写评论" disabled
|
@click="navToComment"></u-search>
|
</view> -->
|
</view>
|
</template>
|
|
<script>
|
import captionRow from "@/components/caption/caption.vue"
|
import {
|
getGridDetail
|
} from "@/api/grid/grid.js"
|
export default {
|
components: {
|
captionRow
|
},
|
data() {
|
return {
|
gridList: [],
|
houseList: [],
|
commentList: []
|
}
|
},
|
|
onLoad(option) {
|
if (option.from) {
|
uni.setNavigationBarTitle({
|
title: "我的网格"
|
})
|
}
|
this.getDetailInfo()
|
},
|
|
methods: {
|
|
getDetailInfo() {
|
getGridDetail({
|
houseCode: uni.getStorageSync("siteInfo").houseCode
|
}).then(res => {
|
console.log(res)
|
this.houseList = res.data.doorplateAddress;
|
this.gridList = res.data.grid;
|
})
|
},
|
|
navToComment() {
|
uni.navigateTo({
|
url: `comment?id=${this.params.id}`
|
})
|
}
|
}
|
}
|
</script>
|
|
<style lang="scss">
|
page {
|
background-color: #F5F5F5;
|
}
|
|
.tab {
|
width: 100%;
|
height: 88rpx;
|
position: fixed;
|
/*#ifdef H5*/
|
top: 88rpx;
|
/*#endif*/
|
/*#ifdef MP-WEIXIN*/
|
top: 0;
|
/*#endif*/
|
left: 0;
|
background-color: #fff;
|
padding: 0 30rpx;
|
box-sizing: border-box;
|
z-index: 999;
|
|
}
|
|
.grid {
|
width: 100%;
|
padding: 20rpx;
|
box-sizing: border-box;
|
|
.grid-item {
|
width: 32.8%;
|
padding: 20rpx 0;
|
// border:1px solid #333;
|
}
|
}
|
|
.detail {
|
padding: 0 30rpx;
|
margin: 40rpx 0 20rpx;
|
|
.detail-content {
|
padding: 20rpx 0;
|
text-indent: 2em;
|
}
|
}
|
|
.comment {
|
width: 100%;
|
padding: 0 30rpx 160rpx;
|
box-sizing: border-box;
|
}
|
|
.comment-list {
|
width: 100%;
|
padding-top: 20rpx;
|
|
.comment-item {
|
width: 100%;
|
padding: 20rpx 0;
|
}
|
|
.comment-item-content {
|
flex: 1;
|
margin-left: 20rpx;
|
}
|
}
|
|
.footer {
|
width: 100%;
|
padding: 20rpx 30rpx;
|
box-sizing: border-box;
|
background-color: #fff;
|
position: fixed;
|
bottom: 0;
|
left: 0;
|
z-index: 10;
|
border-top: 1px solid #f5f5f5;
|
}
|
</style>
|
