<template>
|
<view class="">
|
<z-paging ref="paging" v-model="list" @query="queryList" @onRefresh="refreshList"
|
loading-more-no-more-text="没有更多了" :auto="false">
|
<view class="" slot="top">
|
<u-navbar :autoBack="false">
|
<view class="" slot="left" style="width:500rpx">
|
<u-search placeholder="搜索" v-model="keyword" :clearabled="true" animation="true"
|
:showAction="true" @clear="clearSearch" @search="searchList"
|
@custom="searchList"></u-search>
|
</view>
|
</u-navbar>
|
</view>
|
<view class="content">
|
<view class="topic-item" v-for="(item,index) in list">
|
<view class="flex">
|
<u-avatar size="44" :src="showAvatar(item.avatar)"></u-avatar>
|
<view class="ml-20 flex f-d-c">
|
<text class="f-26 mb-10">{{item.name}}</text>
|
<text class="f-24 c-66">{{item.createTime}}</text>
|
</view>
|
</view>
|
<view class="topic-content f-28">
|
{{item.circleText}}
|
</view>
|
|
|
|
|
<u-album v-if="item.circleImages" :urls="setImgUrl(item.circleImages)" singleSize="100"
|
multipleSize="100"></u-album>
|
|
|
<view class="link-btn flex a-i-c" @click="linkTo(item)" v-if="item.eventId">
|
<u-icon name="attach"></u-icon>
|
<text class="c-main ml-10 f-28">查看详情</text>
|
</view>
|
|
<view class="topic-action flex j-c-f-e">
|
<view class="flex a-i-c" @click="handleThumpsUp(item.id,item.likeFlag,index)">
|
<u-icon v-if="item.likeFlag == 0" name="heart-fill" color="#C4C8CB" size="24"></u-icon>
|
<u-icon v-if="item.likeFlag == 1" name="heart-fill" color="#CC0000" size="24"></u-icon>
|
<text class="f-22 c-66 ml-10">{{item.likeCount}}</text>
|
</view>
|
<view class="flex ml-30 a-i-c" @click="showPopup(item)">
|
<u-icon name="chat-fill" color="#C4C8CB" size="24"></u-icon>
|
<text class="f-22 c-66 ml-10">{{item.commentCount}}</text>
|
</view>
|
</view>
|
</view>
|
</view>
|
|
<u-popup :show="isShowPop" :round="10" mode="bottom" @close="isShowPop = false" :closeable="true"
|
:safeAreaInsetBottom="true">
|
<view class="popup-content">
|
<view class="popup-top f-28" v-if="current.commentCount > 0">
|
{{current.commentCount}}条评论
|
</view>
|
<view class="popup-list">
|
<view class="popup-empty f-28 flex j-c-c a-i-c" v-if="!commentList.length">
|
暂无评论~
|
</view>
|
<scroll-view scroll-y="true" class="popup-scroll" v-if="commentList.length">
|
<view class="comment-item flex" v-for="(i,k) in commentList" :key="k">
|
<u-avatar size="40" :src="showAvatar(i.avatar)"></u-avatar>
|
<view class="ml-20 flex f-d-c">
|
<text class="f-26 c-99">{{i.name}}</text>
|
<view class="comment-content f-28">
|
{{i.content}}
|
</view>
|
<text class="f-24 c-99">{{i.createTime}}</text>
|
</view>
|
</view>
|
</scroll-view>
|
</view>
|
<view class="popup-bottom flex j-c-s-b a-i-c">
|
<view class="popup-input">
|
<input class="input-box" type="text" v-model="commentContent" placeholder="说点什么..."
|
placeholder-class="f-26 c-99" />
|
</view>
|
<button v-if="commentContent" class="popup-btn bgc-main c-ff f-26"
|
@click="handleSubmitComment">发送</button>
|
</view>
|
</view>
|
</u-popup>
|
|
|
<view class="float flex j-c-c a-i-c" @click="navToPublish">
|
<view class="float-box bgc-main flex j-c-c f-d-c a-i-c">
|
<u-icon name="plus" color="#fff" size="24"></u-icon>
|
<text class="f-26 c-ff">发布</text>
|
</view>
|
</view>
|
</z-paging>
|
|
<tabBar :current="2" :list="tabList" />
|
|
</view>
|
|
</template>
|
|
<script>
|
import tabBar from "@/components/tabBar/tabBar.vue"
|
import {
|
getList,
|
handleLike,
|
handleAddComment,
|
getComment
|
} from "@/api/circle/circle.js"
|
import {
|
minioBaseUrl
|
} from "@/common/setting.js"
|
import {
|
getTabbarList
|
} from "@/common/common.js"
|
export default {
|
components: {
|
tabBar
|
},
|
data() {
|
return {
|
keyword: "",
|
urls: [{
|
src: 'https://cdn.uviewui.com/uview/album/1.jpg',
|
}],
|
roleType: 0,
|
list: [],
|
isShowPop: false,
|
current: "",
|
commentContent: "", //评论内容
|
page: 1,
|
isSearch: false,
|
commentList: [],
|
envVersion: "",
|
tabList: []
|
}
|
},
|
|
onLoad() {
|
let role = uni.getStorageSync('activeRole')
|
if (role.roleName == "居民") {
|
this.roleType = 0
|
} else {
|
this.roleType = 1;
|
}
|
|
|
// this.getCircleList()
|
uni.$on("refreshList", () => {
|
// this.getCircleList()
|
this.$refs.paging.reload();
|
})
|
},
|
|
|
onShow() {
|
// #ifdef APP
|
let accountInfo = wx.getAccountInfoSync();
|
this.envVersion = accountInfo.miniProgram.envVersion;
|
// #endif
|
let role = uni.getStorageSync('activeRole')
|
if (role.roleName == "居民") {
|
this.tabList = getTabbarList(1);
|
this.roleType = 0
|
} else if (role.roleName == '网格员') {
|
this.roleType = 1;
|
this.tabList = getTabbarList(3);
|
} else if (role.roleName == '民警') {
|
this.roleType = 1;
|
this.tabList = getTabbarList(2);
|
} else if (role.roleName == '系统管理员') {
|
this.roleType = 1;
|
this.tabList = getTabbarList(4);
|
} else {
|
this.tabList = getTabbarList(1);
|
this.roleType = 0
|
}
|
this.$refs.paging.reload();
|
},
|
|
|
// onPullDownRefresh() {
|
// this.getCircleList();
|
// setTimeout(() => {
|
// uni.stopPullDownRefresh();
|
// }, 300)
|
// },
|
|
methods: {
|
|
|
showAvatar(src) {
|
return `${minioBaseUrl}${src}`
|
},
|
|
refreshList() {
|
this.keyword = "";
|
this.$refs.paging.reload();
|
},
|
|
searchList() {
|
this.isSearch = true;
|
this.page = 1;
|
this.list = [];
|
// this.getCircleList()
|
this.$refs.paging.reload();
|
},
|
|
clearSearch() {
|
if (!this.isSearch) return;
|
this.keyword = "";
|
this.page = 1;
|
this.list = [];
|
// this.getCircleList();
|
this.$refs.paging.reload();
|
this.isSearch = false;
|
},
|
|
queryList(pageNo, pageSize) {
|
getList({
|
circleText: this.keyword,
|
current: pageNo,
|
size: pageSize,
|
circleType: this.roleType
|
}).then(res => {
|
this.$refs.paging.complete(res.data.records);
|
})
|
},
|
|
getCircleList() {
|
let params = {
|
current: this.page,
|
size: 20,
|
circleType: this.roleType,
|
}
|
if (this.keyword) {
|
params.circleText = this.keyword;
|
}
|
getList(params).then(res => {
|
if (res.code == 200) {
|
this.list = res.data.records
|
}
|
})
|
},
|
|
setImgUrl(str) {
|
// let urls = str.split(",");
|
// let arr = [];
|
// for (let i of urls) {
|
// arr.push(`${minioBaseUrl}${i}`)
|
// }
|
//return arr;
|
return this.$setImageUrl(str)
|
},
|
|
getCommentList() {
|
getComment({
|
circleId: this.current.id
|
}).then(res => {
|
if (res.code == 200) {
|
this.commentList = res.data.records;
|
}
|
})
|
},
|
|
|
//点赞
|
handleThumpsUp(id, status, index) {
|
handleLike({
|
circleId: id,
|
deleteFlag: status
|
}).then(res => {
|
if (res.code == 200) {
|
if (status == 0) {
|
this.list[index].likeFlag = 1;
|
this.list[index].likeCount++
|
} else {
|
this.list[index].likeFlag = 0;
|
this.list[index].likeCount--
|
}
|
}
|
})
|
},
|
|
showPopup(item) {
|
this.current = item;
|
this.isShowPop = true;
|
this.getCommentList();
|
},
|
|
//评论
|
handleSubmitComment() {
|
handleAddComment({
|
circleId: this.current.id,
|
content: this.commentContent
|
}).then(res => {
|
if (res.code == 200) {
|
uni.showToast({
|
title: res.msg
|
})
|
this.commentContent = ""
|
this.getCommentList()
|
this.current.commentCount = this.commentList.length;
|
}
|
})
|
},
|
|
navToDetail(id) {
|
uni.navigateTo({
|
url: `/subPackage/circle/detail?id=${id}`
|
})
|
},
|
|
navToPublish() {
|
uni.navigateTo({
|
url: "publish"
|
})
|
},
|
linkTo(item) {
|
// 报事报修
|
if (item.evenType == 1) {
|
uni.navigateTo({
|
url: `/subPackage/workbench/views/reportDetail?id=${item.eventId}&from=circle`
|
})
|
}
|
// E呼即办
|
if (item.evenType == 2) {
|
uni.navigateTo({
|
url: `/subPackage/workbench/views/eCallReportDetail?id=${item.eventId}&from=circle`
|
})
|
}
|
// E呼即办2
|
if (item.evenType == 3) {
|
uni.navigateTo({
|
url: `/subPackage/ecall/detail?id=${item.eventId}&types=circle`
|
})
|
}
|
// 校园
|
if (item.evenType == 4) {
|
uni.navigateTo({
|
url: `/subPackage/school/troubleDetail?id=${item.eventId}&disable=true`
|
})
|
}
|
// 二手交易
|
if (item.evenType == 5) {
|
uni.navigateTo({
|
url: `/subPackage/workbench/views/labelReportDetail?id=${item.eventId}&disable=true`
|
})
|
}
|
// 无诈
|
if (item.evenType == 6) {
|
uni.navigateTo({
|
url: `/subPackage/workbench/views/counterfraudReportDetail?id=${item.eventId}&roleType=3`
|
})
|
}
|
}
|
}
|
}
|
</script>
|
|
<style lang="scss">
|
.content {
|
padding: 0 30rpx;
|
margin-top: 130rpx;
|
|
.topic-item {
|
padding: 30rpx 0 0;
|
border-bottom: 1px solid #F5F5F5;
|
}
|
|
.topic-content {
|
padding: 20rpx 0;
|
}
|
|
.topic-action {
|
padding: 30rpx 0;
|
}
|
}
|
|
.float {
|
width: 120rpx;
|
height: 120rpx;
|
border-radius: 50%;
|
border: 1px solid #3A74F1;
|
position: fixed;
|
bottom: 20%;
|
right: 30rpx;
|
|
.float-box {
|
width: 110rpx;
|
height: 110rpx;
|
border-radius: 50%;
|
|
}
|
}
|
|
.popup-content {
|
width: 100%;
|
padding-bottom: 100rpx;
|
|
.popup-top {
|
text-align: center;
|
padding: 30rpx 0;
|
}
|
|
.popup-list {
|
height: 600rpx;
|
padding-top: 20rpx;
|
box-sizing: border-box;
|
}
|
|
.popup-scroll {
|
width: 100%;
|
height: 100%;
|
}
|
|
.popup-empty {
|
width: 100%;
|
height: 200rpx;
|
}
|
|
.popup-bottom {
|
width: 100%;
|
padding: 20rpx;
|
box-sizing: border-box;
|
border-top: 1px solid #F5F5F5;
|
}
|
|
.popup-btn {
|
width: 160rpx;
|
height: 70rpx;
|
line-height: 70rpx;
|
border-radius: 35rpx;
|
border: none;
|
margin: 0;
|
padding: 0;
|
margin: 0 0 0 20rpx;
|
}
|
|
.popup-btn {
|
border: none;
|
}
|
|
.popup-input {
|
// width:70%;
|
flex: 1;
|
height: 70rpx;
|
border-radius: 35rpx;
|
padding: 0 10rpx 0 30rpx;
|
box-sizing: border-box;
|
background-color: #f5f5f5;
|
transition: all .2s;
|
}
|
|
.input-box {
|
width: 100%;
|
height: 70rpx;
|
font-size: 28rpx;
|
}
|
|
.comment-item {
|
padding: 20rpx;
|
}
|
|
.comment-content {
|
padding: 14rpx 0;
|
}
|
|
.tc {
|
text-align: center;
|
}
|
}
|
|
.link-btn {
|
padding: 10rpx 0;
|
width: 200rpx;
|
}
|
</style>
|
