580 lines
14 KiB
Vue
580 lines
14 KiB
Vue
<template>
|
|
<div class="Detail" v-if="pageShow">
|
|
<div class="top">
|
|
<div class="item-top">
|
|
<image :src="info.createUserAvatar || 'https://cdn.cunwuyun.cn/wxmp/fengdu/avatar.png'" />
|
|
<div class="right">
|
|
<h3>{{ info.createUserName }}</h3>
|
|
<span v-if="item.publishDepartName">{{ info.publishDepartName }}</span>
|
|
</div>
|
|
</div>
|
|
<div class="item-content">
|
|
<span v-if="name" @click="toTopic('./TopicDetail?themeId=' + themeId + '&name=' + name)">#【{{ name }}】</span>
|
|
<text>{{ info.content }}</text>
|
|
</div>
|
|
<div class="item-imgs" v-if="info.files && info.files.length">
|
|
<image mode="aspectFill" v-for="(item, index) in item.files" :key="index" :src="item.url" />
|
|
</div>
|
|
<p>{{ info.createTime }}</p>
|
|
<div class="item-bottom">
|
|
<div @click="isShow = true">
|
|
<image src="https://cdn.cunwuyun.cn/wxmp/fengdu/ic-zhuanfa.png" />
|
|
<i>{{ info.sharedCount }}</i>
|
|
</div>
|
|
<div>
|
|
<image :src="info.appreciateStatus ? 'https://cdn.cunwuyun.cn/wxmp/fengdu/zan-active.png' : 'https://cdn.cunwuyun.cn/wxmp/fengdu/zan.png'" @click="reciate"/>
|
|
<i>{{ info.appreciateCount }}</i>
|
|
</div>
|
|
<div>
|
|
<image src="https://cdn.cunwuyun.cn/wxmp/fengdu/ic-pinglun.png" />
|
|
<i>{{ info.commentCount }}</i>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="comment">
|
|
<h2>评论</h2>
|
|
<div class="comment-wrapper">
|
|
<div class="comment-item" v-for="(item, index) in list" :key="index">
|
|
<image :src="item.createUserAvatar || 'https://cdn.cunwuyun.cn/wxmp/fengdu/avatar.png'" />
|
|
<div class="right">
|
|
<h3>{{ item.createUserName }}</h3>
|
|
<p>{{ item.content }}</p>
|
|
<div class="bottom">
|
|
<span>{{ item.createTime }}</span>
|
|
<div hover-class="text-hover" @click="commentId = item.id, replyName = item.createUserName, focus = true">回复</div>
|
|
</div>
|
|
<div class="replay-list" v-if="item.replyList.length">
|
|
<div class="replay-item" v-for="replay in item.replyList" :key="replay.id">
|
|
<image :src="replay.createUserAvatar || 'https://cdn.cunwuyun.cn/wxmp/fengdu/avatar.png'" />
|
|
<div class="replay-item__right">
|
|
<div class="top">
|
|
<div class="replay-left">
|
|
<h3>{{ replay.createUserName }}</h3>
|
|
<span>回复</span>
|
|
<h3>{{ item.createUserName }}</h3>
|
|
</div>
|
|
<p>{{ replay.createTime }}</p>
|
|
</div>
|
|
<p>{{ replay.content }}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<AiEmpty v-if="!list.length"></AiEmpty>
|
|
</div>
|
|
</div>
|
|
<div class="footer">
|
|
<input :placeholder="commentId ? '回复' + replyName : '请输入'" :focus="focus" v-model="content">
|
|
<div hover-class="hover-class" @click="send">发送</div>
|
|
</div>
|
|
<u-popup v-model="isShow" mode="bottom" hidden height="350rpx" border-radius="30">
|
|
<div class="popup">
|
|
<div class="popup-title">
|
|
<h2>请选择</h2>
|
|
<image @click="isShow = false" src="https://cdn.cunwuyun.cn/wxmp/fengdu/ic-guanbi.png" />
|
|
</div>
|
|
<div class="popup-list">
|
|
<button open-type="share">
|
|
<image src="https://cdn.cunwuyun.cn/wxmp/fengdu/ic-wechat.png" />
|
|
<span>微信</span>
|
|
</button>
|
|
<!-- <button open-type="share">
|
|
<image src="https://cdn.cunwuyun.cn/wxmp/fengdu/ic-pyq.png" />
|
|
<span>朋友圈</span>
|
|
</button>
|
|
<button>
|
|
<image src="https://cdn.cunwuyun.cn/wxmp/fengdu/ic-link.png" />
|
|
<span>复制链接</span>
|
|
</button> -->
|
|
</div>
|
|
</div>
|
|
</u-popup>
|
|
<AiLogin ref="login"/>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
name: 'Detail',
|
|
appName: '详情',
|
|
|
|
data () {
|
|
return {
|
|
id: '',
|
|
isShow: false,
|
|
info: {},
|
|
name: '',
|
|
themeId: '',
|
|
isFrom: '',
|
|
list: [],
|
|
isMore: false,
|
|
current: 1,
|
|
content: '',
|
|
focus: false,
|
|
pageShow: false,
|
|
commentId: '',
|
|
replyName: ''
|
|
}
|
|
},
|
|
|
|
onLoad (query) {
|
|
this.isFrom = query.isFrom
|
|
this.id = query.id
|
|
this.themeId = query.themeId
|
|
this.name = query.name || ''
|
|
|
|
this.$loading()
|
|
this.getInfo(query.id)
|
|
this.getCommontList(query.id)
|
|
},
|
|
|
|
methods: {
|
|
getInfo (id) {
|
|
this.$instance.post(`/app/appneighborhoodassistance/queryDetailById?id=${id}`).then(res => {
|
|
if (res.code === 0) {
|
|
this.info = res.data
|
|
|
|
this.pageShow = true
|
|
}
|
|
|
|
uni.hideLoading()
|
|
})
|
|
},
|
|
|
|
reciate () {
|
|
this.$loading()
|
|
this.$instance.post(`/app/appneighborhoodassistance/appreciate?id=${this.id}`).then(res => {
|
|
if (res.code === 0) {
|
|
this.$toast(this.info.appreciateStatus ? '取消点赞' : '点赞成功')
|
|
|
|
this.getInfo(this.id)
|
|
}
|
|
uni.hideLoading()
|
|
})
|
|
},
|
|
|
|
send () {
|
|
if (!this.content) {
|
|
return this.$toast('内容不能为空')
|
|
}
|
|
|
|
this.$loading()
|
|
this.$instance.post(!this.commentId ? `/app/appneighborhoodassistance/addComment` : `/app/appneighborhoodassistance/addReply`, {
|
|
content: this.content,
|
|
naId: this.id,
|
|
type: this.commentId ? 1 : 0,
|
|
commentId: this.commentId || ''
|
|
}).then(res => {
|
|
uni.hideLoading()
|
|
if (res.code === 0) {
|
|
this.$toast('提交成功')
|
|
this.content = ''
|
|
this.replyName = ''
|
|
this.commentId = ''
|
|
this.focus = false
|
|
|
|
this.isMore = false
|
|
this.current = 1
|
|
|
|
this.$nextTick(() => {
|
|
this.getCommontList(this.id)
|
|
})
|
|
}
|
|
})
|
|
},
|
|
|
|
toTopic (url) {
|
|
if (this.isFrom === 'topic') {
|
|
uni.navigateBack({
|
|
delta: 1
|
|
})
|
|
} else {
|
|
this.$linkTo(url)
|
|
}
|
|
},
|
|
|
|
getCommontList (id) {
|
|
if (this.isMore) return
|
|
|
|
this.$loading()
|
|
this.$instance.post(`/app/appneighborhoodassistance/commontList`, null, {
|
|
params: {
|
|
withoutToken: this.token ? false : true,
|
|
id,
|
|
current: this.current,
|
|
size: 10
|
|
}
|
|
}).then(res => {
|
|
if (res.code === 0) {
|
|
this.$hideLoading()
|
|
if (this.current > 1) {
|
|
this.list = [...this.list, ...res.data.records]
|
|
} else {
|
|
this.list = res.data.records
|
|
}
|
|
|
|
if (res.data.records.length < 10) {
|
|
this.isMore = true
|
|
|
|
return false
|
|
}
|
|
|
|
this.current = this.current + 1
|
|
} else {
|
|
this.isMore = true
|
|
}
|
|
}).catch(() => {
|
|
this.$hideLoading()
|
|
})
|
|
}
|
|
},
|
|
|
|
onReachBottom () {
|
|
this.getCommontList()
|
|
},
|
|
|
|
onShareTimeline () {
|
|
return {
|
|
title: this.title,
|
|
path: `/pages/AppCircle/Detail?id=${this.id}`
|
|
}
|
|
},
|
|
|
|
onShareAppMessage () {
|
|
return {
|
|
title: this.title,
|
|
path: `/pages/AppCircle/Detail?id=${this.id}`
|
|
}
|
|
},
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.Detail {
|
|
padding-top: 24px;
|
|
padding-bottom: 100px;
|
|
|
|
div {
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.popup {
|
|
height: 700px;
|
|
border-radius: 20px 20px 0 0;
|
|
|
|
.popup-title {
|
|
position: relative;
|
|
height: 98px;
|
|
line-height: 98px;
|
|
text-align: center;
|
|
|
|
image {
|
|
position: absolute;
|
|
right: 40px;
|
|
top: 50%;
|
|
z-index: 1;
|
|
width: 32px;
|
|
height: 32px;
|
|
transform: translateY(-50%);
|
|
}
|
|
|
|
h2 {
|
|
color: #333333;
|
|
font-size: 34px;
|
|
font-weight: 600;
|
|
}
|
|
}
|
|
|
|
.popup-list {
|
|
display: flex;
|
|
align-items: center;
|
|
margin-top: 30px;
|
|
|
|
button {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
flex: 1;
|
|
flex-direction: column;
|
|
|
|
image {
|
|
width: 94px;
|
|
height: 94px;
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
span {
|
|
font-size: 26px;
|
|
color: #1D2229;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.footer {
|
|
display: flex;
|
|
align-items: center;
|
|
position: fixed;
|
|
left: 0;
|
|
bottom: 0;
|
|
z-index: 111;
|
|
width: 100%;
|
|
padding: 14px 32px;
|
|
background: #fff;
|
|
|
|
input {
|
|
flex: 1;
|
|
height: 60px;
|
|
margin-right: 16px;
|
|
padding: 0 24px;
|
|
border-radius: 30px;
|
|
font-size: 26px;
|
|
color: #333;
|
|
box-sizing: border-box;
|
|
background: #eeeeeeff;
|
|
}
|
|
|
|
div {
|
|
width: 100px;
|
|
height: 60px;
|
|
line-height: 60px;
|
|
text-align: center;
|
|
font-size: 26px;
|
|
color: #fff;
|
|
border-radius: 30px;
|
|
background: #2d7dffff;
|
|
}
|
|
}
|
|
|
|
.comment {
|
|
margin-top: 24px;
|
|
padding: 32px 32px 26px;
|
|
background: #fff;
|
|
|
|
.comment-wrapper {
|
|
.comment-item {
|
|
display: flex;
|
|
padding: 26px 0;
|
|
|
|
&:first-child {
|
|
padding-top: 0;
|
|
}
|
|
|
|
&:last-child {
|
|
padding-bottom: 0;
|
|
}
|
|
|
|
& > image {
|
|
width: 72px;
|
|
height: 72px;
|
|
margin-right: 16px;
|
|
border-radius: 50%;
|
|
}
|
|
|
|
.replay-list {
|
|
margin-top: 32px;
|
|
|
|
.replay-item {
|
|
display: flex;
|
|
margin-bottom: 32px;
|
|
|
|
&:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
image {
|
|
width: 48px;
|
|
height: 48px;
|
|
margin-right: 16px;
|
|
border-radius: 50%;
|
|
}
|
|
|
|
.replay-item__right {
|
|
flex: 1;
|
|
|
|
.top {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
margin-bottom: 6px;
|
|
|
|
.replay-left {
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
h3 {
|
|
color: #666666;
|
|
font-size: 24px;
|
|
}
|
|
|
|
span {
|
|
margin: 0 8px;
|
|
font-size: 24px;
|
|
color: #687DA6;
|
|
}
|
|
|
|
p {
|
|
color: #999999;
|
|
font-size: 24px;
|
|
}
|
|
}
|
|
|
|
& > p {
|
|
line-height: 1.3;
|
|
color: #333333;
|
|
font-size: 24px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
& > .right {
|
|
flex: 1;
|
|
padding-bottom: 32px;
|
|
border-bottom: 1px solid #EEEEEE;
|
|
|
|
& > h3 {
|
|
line-height: 40px;
|
|
margin-bottom: 8px;
|
|
color: #666666;
|
|
font-size: 28px;
|
|
}
|
|
|
|
& > p {
|
|
line-height: 42px;
|
|
margin-bottom: 24px;
|
|
color: #333;
|
|
font-size: 28px;
|
|
}
|
|
|
|
.bottom {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
|
|
span {
|
|
color: #999999;
|
|
font-size: 24px;
|
|
}
|
|
|
|
div {
|
|
color: #687DA6;
|
|
font-size: 24px;
|
|
}
|
|
}
|
|
}
|
|
|
|
&:last-child {
|
|
padding-bottom: 0;
|
|
|
|
.right {
|
|
padding-bottom: 0;
|
|
border-bottom: none;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
& > h2 {
|
|
margin-bottom: 32px;
|
|
color: #3d3d3d;
|
|
font-size: 38px;
|
|
font-weight: 600;
|
|
}
|
|
}
|
|
|
|
& > .top {
|
|
padding: 32px 32px 0;
|
|
background: #ffffff;
|
|
|
|
.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;
|
|
|
|
image {
|
|
flex: 1;
|
|
height: 202px;
|
|
margin-right: 12px;
|
|
|
|
&:nth-of-type(3n) {
|
|
margin-right: 0;
|
|
}
|
|
}
|
|
}
|
|
|
|
& > p {
|
|
margin: 24px 0;
|
|
font-size: 28px;
|
|
color: #333333;
|
|
}
|
|
|
|
.item-bottom {
|
|
display: flex;
|
|
align-items: center;
|
|
height: 88px;
|
|
border-top: 1px solid #eeeeee;
|
|
|
|
div {
|
|
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;
|
|
|
|
span {
|
|
font-size: 28px;
|
|
color: #4181FF;
|
|
}
|
|
|
|
text {
|
|
font-size: 28px;
|
|
color: #333333;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|