560 lines
15 KiB
Vue
560 lines
15 KiB
Vue
<template>
|
|
<div class="AppCircle">
|
|
<u-navbar :is-back="true" title="邻里互助" title-color="#000" title-width="300" title-size="32" :title-bold="true" :background="backgroundNavbar"></u-navbar>
|
|
<div class="header-bg">
|
|
<div class="header">
|
|
<div class="top">
|
|
<div class="left">
|
|
<span @click="changeTab(0)" :class="{active:currIndex === 0}">广场</span>
|
|
<!-- <span @click="changeTab(1)" :class="{active:currIndex === 1}">社区</span> -->
|
|
</div>
|
|
<div class="right" @click="$linkTo('./MyPostList')" hover-class="text-hover">
|
|
<span>我的贴子<img src="https://cdn.cunwuyun.cn/wechat/wuxi/circle-top-icon.png" alt=""></span>
|
|
<i></i>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="nav-content" v-if="topic.length">
|
|
<div class="nav">
|
|
<div
|
|
class="nav-item"
|
|
hover-class="text-hover"
|
|
v-for="(item, index) in topic" :key="index" @click="$linkTo('./TopicDetail?themeId=' + item.id + '&name=' + item.title)">
|
|
<image :src="item.picUrl" mode="aspectFill"/>
|
|
<h2>{{ item.title }}</h2>
|
|
</div>
|
|
<div class="nav-item" hover-class="text-hover" @click="$linkTo('./Topic')" v-if="topicList.length > 6">
|
|
<image src="https://cdn.cunwuyun.cn/wxmp/fengdu/ic-more.png"/>
|
|
<h2>更多</h2>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="AppCircle-list">
|
|
<div class="item"
|
|
v-for="(item, index) in list"
|
|
:key="index"
|
|
@click="$linkTo('./Detail?id=' + item.id + '&name=' + item.topicName + '&themeId=' + item.themeId)">
|
|
<div class="item-top">
|
|
<image :src="item.createUserAvatar || 'https://cdn.cunwuyun.cn/wxmp/fengdu/avatar.png'"/>
|
|
<div class="right">
|
|
<h3>{{ item.createUserName }}</h3>
|
|
<!-- <span v-if="item.publishDepartName">{{ item.publishDepartName }}</span> -->
|
|
<span>{{ item.createTime }}</span>
|
|
</div>
|
|
</div>
|
|
<div class="item-content">
|
|
<span hover-stop-propagation v-if="item.topicName"
|
|
@click.stop="$linkTo('./TopicDetail?themeId=' + item.themeId + '&name=' + item.topicName)">#{{ item.topicName }}</span>
|
|
<text>{{ item.content }}</text>
|
|
</div>
|
|
<div class="item-imgs" v-if="item.files.length">
|
|
<image mode="aspectFill" @click.stop="previewImage(e.url, item.files)" v-for="(e, i) in item.files" :key="i" :src="e.url"/>
|
|
</div>
|
|
<p v-if="item.publishDepartName">{{ item.publishDepartName }}</p>
|
|
<div class="item-bottom">
|
|
<button hover-stop-propagation @click.stop="onBtnClick" open-type="share" :data-content="item.content" :data-themeid="item.themeId" :data-id="item.id"
|
|
:data-name="item.topicName">
|
|
<image src="https://cdn.cunwuyun.cn/wechat/wuxi/circle-zf-icon.png"/>
|
|
<i>{{ item.sharedCount }}</i>
|
|
</button>
|
|
<div hover-stop-propagation @click.stop="reciate(item.id, item.appreciateStatus)">
|
|
<image :src="item.appreciateStatus ? 'https://cdn.cunwuyun.cn/wechat/wuxi/circle-dz-select-icon.png' : 'https://cdn.cunwuyun.cn/wechat/wuxi/circle-dz-icon.png'"/>
|
|
<i>{{ item.appreciateCount }}</i>
|
|
</div>
|
|
<div>
|
|
<image src="https://cdn.cunwuyun.cn/wechat/wuxi/circle-pl-icon.png"/>
|
|
<i>{{ item.commentCount }}</i>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<AiEmpty v-if="!list.length"/>
|
|
</div>
|
|
<div class="add" hover-class="text-hover" @click="toAdd">
|
|
<image src="https://cdn.cunwuyun.cn/wechat/wuxi/circle-add.png" mode="aspectFill" />
|
|
</div>
|
|
<AiLogin ref="login"/>
|
|
</div>
|
|
</template>
|
|
<script>
|
|
import {mapActions, mapState} from 'vuex'
|
|
|
|
export default {
|
|
customNavigation: true,
|
|
name: 'AppCircle',
|
|
appName: '邻里互助',
|
|
data() {
|
|
return {
|
|
currIndex: 0,
|
|
topicList: [],
|
|
list: [],
|
|
isMore: false,
|
|
current: 1,
|
|
isFixed: false,
|
|
statusBarHeight: uni.getSystemInfoSync().statusBarHeight,
|
|
total: 0,
|
|
backgroundNavbar: {
|
|
background: 'url(https://cdn.cunwuyun.cn/wechat/wuxi/wuxi-nav-bg.png) no-repeat',
|
|
backgroundSize: 'cover',
|
|
}
|
|
}
|
|
},
|
|
|
|
computed: {
|
|
...mapState(['user', 'token']),
|
|
|
|
topic() {
|
|
return this.topicList.filter((v, index) => index < 7)
|
|
}
|
|
},
|
|
|
|
onLoad(option) {
|
|
if(option.id) { //有id直接跳入话题详情页
|
|
this.$linkTo('./TopicDetail?themeId=' + option.id + '&name=' + option.name)
|
|
}
|
|
uni.setNavigationBarTitle({
|
|
title: '邻里互助'
|
|
});
|
|
|
|
this.getTopicList()
|
|
|
|
uni.$on('updateList', () => {
|
|
this.getMyPublishCount()
|
|
this.changeTab(this.currIndex)
|
|
})
|
|
|
|
if (!this.token) {
|
|
this.autoLogin({ loginWay: 'qujing' }).then(() => {
|
|
this.getMyPublishCount()
|
|
})
|
|
} else {
|
|
this.getMyPublishCount()
|
|
}
|
|
},
|
|
|
|
onPageScroll (params) {
|
|
this.isFixed = params.scrollTop > 60
|
|
},
|
|
|
|
onUnload() {
|
|
uni.$off('updateList')
|
|
},
|
|
|
|
methods: {
|
|
...mapActions(['autoLogin']),
|
|
|
|
previewImage(url, files) {
|
|
uni.previewImage({
|
|
current: url,
|
|
urls: files.map(v => v.url)
|
|
})
|
|
},
|
|
|
|
onBtnClick(e) {
|
|
},
|
|
|
|
reciate(id, appreciateStatus) {
|
|
this.$instance.post(`/app/appneighborhoodassistance/appreciate?id=${id}`).then(res => {
|
|
if (res.code === 0) {
|
|
this.$toast(appreciateStatus ? '取消点赞' : '点赞成功')
|
|
|
|
this.changeTab(this.currIndex)
|
|
}
|
|
})
|
|
},
|
|
|
|
getMyPublishCount() {
|
|
this.$instance.post(`/app/appneighborhoodassistance/list`, null, {
|
|
params: {
|
|
current: 1,
|
|
size: 10,
|
|
listType: 0,
|
|
createUserId: this.user.id
|
|
}
|
|
}).then(res => {
|
|
if (res.code === 0) {
|
|
this.total = res.data.total
|
|
}
|
|
})
|
|
},
|
|
|
|
toAdd() {
|
|
if (this.user.areaId) {
|
|
this.$linkTo('./Add')
|
|
} else {
|
|
this.$dialog.confirm({
|
|
content: '您只有完成信息认证后，才可进行相关操作。',
|
|
confirmText: '去认证'
|
|
}).then(() => {
|
|
this.$linkTo('/pages/AppMine/userInfo?isFromTabbar=1&path=/pages/AppCircle/AppCircle')
|
|
}).catch(() => {
|
|
})
|
|
}
|
|
},
|
|
|
|
getTopicList() {
|
|
this.$instance.post(`/app/appneighborhoodassistancetheme/list`, null, {
|
|
withoutToken: true,
|
|
params: {
|
|
current: 1,
|
|
size: 100,
|
|
status: 1
|
|
}
|
|
}).then(res => {
|
|
if (res.code === 0) {
|
|
this.topicList = res.data.records
|
|
this.getList()
|
|
}
|
|
})
|
|
},
|
|
|
|
changeTab(index) {
|
|
this.currIndex = index
|
|
this.isMore = false
|
|
this.current = 1
|
|
this.$nextTick(() => {
|
|
this.getList()
|
|
})
|
|
},
|
|
|
|
getList() {
|
|
if (this.isMore) return
|
|
this.$loading()
|
|
this.$instance.post(`/app/appneighborhoodassistance/list`, null, {
|
|
withoutToken: !this.token,
|
|
params: {
|
|
current: this.current,
|
|
size: 10,
|
|
visibleRange: this.currIndex === 0 ? 1 : 0
|
|
}
|
|
}).then(res => {
|
|
if (res.code === 0) {
|
|
if (this.current > 1) {
|
|
this.list = [...this.list, ...res.data.records.map(e => {
|
|
return {
|
|
...e,
|
|
files: e.files.filter((v, index) => index < 3),
|
|
topicName: this.topicList.filter(v => v.id === e.themeId).length ? this.topicList.filter(v => v.id === e.themeId)[0].title : ''
|
|
}
|
|
})]
|
|
} else {
|
|
this.list = res.data.records.map(e => {
|
|
return {
|
|
...e,
|
|
files: e.files.filter((v, index) => index < 3),
|
|
topicName: this.topicList.filter(v => v.id === e.themeId).length ? this.topicList.filter(v => v.id === e.themeId)[0].title : ''
|
|
}
|
|
})
|
|
}
|
|
|
|
if (res.data.records.length < 10) {
|
|
this.isMore = true
|
|
|
|
return false
|
|
}
|
|
|
|
this.current = this.current + 1
|
|
} else {
|
|
this.isMore = true
|
|
}
|
|
}).finally(() => this.$hideLoading())
|
|
}
|
|
},
|
|
|
|
onReachBottom() {
|
|
this.getList()
|
|
},
|
|
|
|
onShareAppMessage(e) {
|
|
this.$instance.post(`/app/appneighborhoodassistance/share?id=${e.target.dataset.id}`).then(res => {
|
|
if (res.code === 0) {
|
|
this.changeTab(this.currIndex)
|
|
}
|
|
})
|
|
|
|
return {
|
|
title: e.target.dataset.content.substr(0, 20),
|
|
path: `/mods/AppCircle/Detail?id=${e.target.dataset.id}&themeId=${e.target.dataset.themeid}&name=${e.target.dataset.name}`
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.AppCircle {
|
|
// padding-top: 100px;
|
|
padding-bottom: 40px;
|
|
.header-bg {
|
|
background: url('https://cdn.cunwuyun.cn/wechat/wuxi/wuxi-header-bg.png') center;
|
|
background-size: 100% 100%;
|
|
}
|
|
.header {
|
|
width: 100%;
|
|
opacity: 1;
|
|
transition: all 0.2s ease;
|
|
}
|
|
|
|
div {
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.add {
|
|
position: fixed;
|
|
right: 32px;
|
|
bottom: 32px;
|
|
z-index: 111;
|
|
|
|
image {
|
|
width: 124px;
|
|
height: 124px;
|
|
}
|
|
}
|
|
|
|
.nav-content {
|
|
padding-top: 16px;
|
|
width: 100%;
|
|
height: 192px;
|
|
margin-bottom: 230px;
|
|
}
|
|
.nav {
|
|
display: flex;
|
|
align-items: center;
|
|
flex-wrap: wrap;
|
|
margin: 0 32px 24px;
|
|
padding-top: 30px;
|
|
background: #ffffff;
|
|
border-radius: 16px;
|
|
// box-shadow: inset 0 -1px 0 0 #eeeeee;
|
|
|
|
.nav-item {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
flex-direction: column;
|
|
width: 25%;
|
|
padding-bottom: 32px;
|
|
|
|
image {
|
|
width: 108px;
|
|
height: 108px;
|
|
}
|
|
|
|
h2 {
|
|
line-height: 32px;
|
|
margin-top: 8px;
|
|
font-size: 26px;
|
|
font-weight: 400;
|
|
}
|
|
}
|
|
}
|
|
|
|
.AppCircle-list {
|
|
.item {
|
|
margin: 0 32px 24px;
|
|
padding: 24px 24px 0;
|
|
background: #ffffff;
|
|
border-radius: 16px;
|
|
box-shadow: inset 0 -1px 0 0 #eeeeee;
|
|
|
|
.item-top {
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
image {
|
|
width: 96px;
|
|
height: 96px;
|
|
margin-right: 16px;
|
|
border-radius: 50%;
|
|
}
|
|
|
|
h3 {
|
|
color: #333333;
|
|
text-align: left;
|
|
font-size: 34px;
|
|
font-weight: 500;
|
|
}
|
|
|
|
span {
|
|
margin-top: 12px;
|
|
color: #999999;
|
|
font-size: 28px;
|
|
}
|
|
}
|
|
|
|
.item-imgs {
|
|
display: flex;
|
|
align-items: center;
|
|
flex-wrap: wrap;
|
|
|
|
image {
|
|
height: 208px;
|
|
width: 33.33%;
|
|
padding-right: 12px;
|
|
margin-bottom: 12px;
|
|
box-sizing: border-box;
|
|
|
|
&:nth-of-type(3n) {
|
|
padding-right: 0;
|
|
}
|
|
}
|
|
}
|
|
|
|
& > p {
|
|
margin: 12px 0;
|
|
font-family: PingFangSC-Regular;
|
|
font-size: 26px;
|
|
color: #999;
|
|
line-height: 36px;
|
|
}
|
|
|
|
.item-bottom {
|
|
display: flex;
|
|
align-items: center;
|
|
height: 88px;
|
|
border-top: 1px solid #eeeeee;
|
|
|
|
div, button {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
flex: 1;
|
|
|
|
image {
|
|
width: 40px;
|
|
height: 40px;
|
|
margin: 16px;
|
|
}
|
|
|
|
i {
|
|
color: #687DA6;
|
|
font-size: 28px;
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
.item-content {
|
|
margin: 16px 0;
|
|
line-height: 1.3;
|
|
text-align: justify;
|
|
word-break: break-all;
|
|
text-overflow: ellipsis;
|
|
overflow: hidden;
|
|
display: -webkit-box;
|
|
-webkit-box-orient: vertical;
|
|
-webkit-line-clamp: 2;
|
|
|
|
span {
|
|
font-size: 28px;
|
|
color: #4181FF;
|
|
}
|
|
|
|
text {
|
|
font-size: 28px;
|
|
color: #333333;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.top {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
top: 0;
|
|
left: 0;
|
|
z-index: 11;
|
|
width: 100%;
|
|
height: 100px;
|
|
padding: 0 32px;
|
|
|
|
.left {
|
|
display: flex;
|
|
align-items: center;
|
|
height: 100px;
|
|
|
|
span {
|
|
position: relative;
|
|
height: 100px;
|
|
line-height: 100px;
|
|
color: #222;
|
|
font-size: 30px;
|
|
|
|
&:first-child {
|
|
margin-right: 64px;
|
|
}
|
|
|
|
&.active {
|
|
font-weight: 600;
|
|
font-size: 32px;
|
|
|
|
&::after {
|
|
position: absolute;
|
|
bottom: 12px;
|
|
left: 50%;
|
|
width: 40px;
|
|
height: 8px;
|
|
background: #026AF2;
|
|
border-radius: 4px;
|
|
transform: translateX(-50%);
|
|
content: ' ';
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.right {
|
|
position: relative;
|
|
|
|
i {
|
|
position: absolute;
|
|
top: -6px;
|
|
right: 0;
|
|
z-index: 11;
|
|
width: 16px;
|
|
height: 16px;
|
|
border-radius: 50%;
|
|
background: #FF4747;
|
|
// height: 24px;
|
|
// line-height: 24px;
|
|
// padding: 0 10px;
|
|
// font-size: 16px;
|
|
// color: #4181FF;
|
|
// border-radius: 50%;
|
|
// border: 2px solid #4181FF;
|
|
// background: #fff;
|
|
// box-sizing: border-box;
|
|
// transform: translateX(50%);
|
|
}
|
|
|
|
span {
|
|
display: block;
|
|
font-family: PingFangSC-Regular;
|
|
font-size: 24px;
|
|
color: #333;
|
|
line-height: 54px;
|
|
text-align: center;
|
|
width: 164px;
|
|
height: 56px;
|
|
border: 1px solid #8A929F;
|
|
border-radius: 28px;
|
|
img {
|
|
display: inline-block;
|
|
width: 24px;
|
|
height: 24px;
|
|
vertical-align: middle;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.row2 {
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
display: -webkit-box;
|
|
-webkit-line-clamp: 2;
|
|
-webkit-box-orient: vertical;
|
|
}
|
|
}
|
|
</style>
|