147 lines
3.4 KiB
Vue
147 lines
3.4 KiB
Vue
<template>
|
||
<div class="userDetail">
|
||
<AiTopFixed>
|
||
<div class="currentLeft-top">
|
||
<div class="left">
|
||
<AiAreaPicker v-model="areaId" :areaId="user.areaId" @select="getListInit" :name.sync="areaName" selectRoot>
|
||
<span class="label" v-if="areaName">{{ areaName }}</span>
|
||
<span v-else>请选择</span>
|
||
<u-icon name="arrow-down" color="#666" size="24" style="margin-left: 4px" />
|
||
</AiAreaPicker>
|
||
</div>
|
||
<u-search v-model="groupName" :clearabled="true" placeholder="请输入群昵称" :show-action="false" bg-color="#F5F5F5" search-icon-color="#ccc" color="#666" height="58" @search="getListInit" @clear="handerClear"></u-search>
|
||
</div>
|
||
</AiTopFixed>
|
||
<div class="list">
|
||
<div class="item" v-for="(item, index) in list" :key="index">
|
||
<div class="left">
|
||
<img src="./img/group-icon.jpg" alt="">
|
||
</div>
|
||
<div class="right">
|
||
<p>{{item.groupName || '群聊'}}</p>
|
||
<div>{{item.personCount}}人 | 群主：{{item.ownerName}}</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<AiEmpty description="暂无数据" v-if="!list.length"/>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import {mapState} from 'vuex'
|
||
|
||
export default {
|
||
name: "userDetail",
|
||
data() {
|
||
return {
|
||
areaId: '',
|
||
current: 1,
|
||
areaName: '',
|
||
groupName: '',
|
||
list: []
|
||
}
|
||
},
|
||
computed: {...mapState(['user'])},
|
||
created() {
|
||
this.areaId = this.user.areaId
|
||
this.areaName = this.user.areaName
|
||
this.getListInit()
|
||
},
|
||
onShow() {
|
||
document.title = '居民群详情'
|
||
},
|
||
methods: {
|
||
handerClear() {
|
||
this.groupName = ''
|
||
this.getListInit()
|
||
},
|
||
getListInit() {
|
||
this.list = []
|
||
this.current = 1
|
||
this.getList()
|
||
},
|
||
getList() {
|
||
this.$http.post(`/app/wxcp/wxgroup/allGroupInfo`, null, {
|
||
params: {
|
||
areaId: this.areaId,
|
||
groupName: this.groupName,
|
||
current: this.current,
|
||
size: 10
|
||
}}).then(res => {
|
||
if (res?.code == 0) {
|
||
if (this.current > 1) {
|
||
this.list = [...this.list, ...res.data.records]
|
||
} else {
|
||
this.list = res.data.records
|
||
}
|
||
} else {
|
||
uni.hideLoading()
|
||
}
|
||
}).catch(() => {
|
||
uni.hideLoading()
|
||
})
|
||
}
|
||
},
|
||
onReachBottom() {
|
||
this.current ++
|
||
this.getList()
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.userDetail {
|
||
.currentLeft-top {
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
.left {
|
||
width: 200px;
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
img {
|
||
width: 48px;
|
||
height: 48px;
|
||
}
|
||
}
|
||
}
|
||
.list{
|
||
background-color: #fff;
|
||
padding-left: 32px;
|
||
margin-top: 16px;
|
||
.item{
|
||
padding: 34px 32px 34px 0;
|
||
display: flex;
|
||
box-sizing: border-box;
|
||
border-bottom: 1px solid #ddd;
|
||
.left{
|
||
width: 110px;
|
||
img{
|
||
width: 88px;
|
||
height: 88px;
|
||
vertical-align: bottom;
|
||
margin-right: 22px;
|
||
border-radius: 8px;
|
||
}
|
||
}
|
||
.right{
|
||
width: calc(100% - 110px);
|
||
p{
|
||
line-height: 44px;
|
||
margin-bottom: 8px;
|
||
color: #333;
|
||
font-size: 30px;
|
||
word-break: break-all;
|
||
}
|
||
div{
|
||
font-size: 28px;
|
||
color: #999;
|
||
line-height: 34px;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</style>
|