388 lines
9.5 KiB
Vue
388 lines
9.5 KiB
Vue
<template>
|
|
<div class="page" v-if="pageShow">
|
|
<div class="header">
|
|
<div class="user-info">
|
|
<image class="user-name-bg" :src="info.avatar" />
|
|
<div class="info">
|
|
<div>{{ info.name }}</div>
|
|
<p>{{ info.createTime }}<span v-if="info.userId == user.id" @click="del">删除帖子</span></p>
|
|
</div>
|
|
</div>
|
|
<p class="text-content">{{ info.content }}</p>
|
|
<div class="img-list" v-if="info.images.length">
|
|
<img :src="item.url" :key="index" v-for="(item, index) in info.images" @click.stop="previewImage(info.images, item.url)" />
|
|
</div>
|
|
</div>
|
|
<div class="reply-list">
|
|
<div class="item" v-for="(item, index) in info.replyList" :key="index" @click="replyClick(item)">
|
|
<div class="user-img">
|
|
<img :src="item.headPortrait" alt="" />
|
|
</div>
|
|
<div class="item-info">
|
|
<div class="user-info">
|
|
<span class="user-name">{{ item.createUserName }}</span>
|
|
<span class="time">{{ item.createTime }}</span>
|
|
</div>
|
|
<p class="text">
|
|
<span v-if="item.lastReplyName"
|
|
>回复<span class="color-365D92">{{ item.lastReplyName }}</span></span
|
|
>{{ item.content }}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="reply-bottom">
|
|
<div class="input" @click="showReply = true">我来说两句…</div>
|
|
<div class="support" @click="support()">
|
|
<!-- <AiIcon icon="iconpraiseactive2x" size="18" v-if="info.mySupport == 1" style="vertical-align: middle" />
|
|
<i class="iconfont" v-else></i>赞 -->
|
|
</div>
|
|
</div>
|
|
<u-popup v-model="showReply" mode="bottom">
|
|
<div class="reply-content">
|
|
<u-input v-model.trim="content" type="textarea" :height="144" :auto-height="true" placeholder="写下你的想法…" placeholder-style="color:#999999;font-size:24rpx;" maxlength="1000" />
|
|
<div class="btn">
|
|
<span class="clear" @click="content = ''">清空内容</span>
|
|
<span class="confirm" @click="confirmReply()">发表</span>
|
|
</div>
|
|
</div>
|
|
</u-popup>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import { mapState } from 'vuex'
|
|
|
|
export default {
|
|
name: 'Detail',
|
|
computed: {
|
|
...mapState(['user']),
|
|
},
|
|
data() {
|
|
return {
|
|
info: {},
|
|
pageShow: false,
|
|
id: '',
|
|
supportFlag: true,
|
|
showReply: false,
|
|
content: '',
|
|
lastReplyId: '',
|
|
lastReplyName: '',
|
|
}
|
|
},
|
|
|
|
onLoad(query) {
|
|
this.id = query.id
|
|
this.getInfo()
|
|
uni.$emit('refresh')
|
|
},
|
|
|
|
methods: {
|
|
getInfo() {
|
|
this.$loading()
|
|
this.$http.post(`/app/apppostinfo/queryDetailById?id=${this.id}`).then((res) => {
|
|
if (res.code === 0) {
|
|
this.info = res.data
|
|
|
|
if (res.data.images) {
|
|
this.info.images = JSON.parse(res.data.images)
|
|
} else {
|
|
this.info.images = []
|
|
}
|
|
if (res.data.replyList.length) {
|
|
res.data.replyList.map((item) => {
|
|
item.createTime = item.createTime.substring(0, 19)
|
|
})
|
|
}
|
|
uni.setNavigationBarTitle({ title: this.info.userId == this.user.id ? '我的帖子' : 'Ta的帖子' })
|
|
this.$nextTick(() => {
|
|
this.pageShow = true
|
|
})
|
|
}
|
|
})
|
|
},
|
|
support() {
|
|
if (this.supportFlag) {
|
|
this.supportFlag = false
|
|
this.$http
|
|
.post(`/app/apppostsupport/support`, {
|
|
postId: this.id,
|
|
createUserId: this.user.partyId,
|
|
})
|
|
.then((res) => {
|
|
if (res.code == 0) {
|
|
uni.$emit('refresh')
|
|
this.supportFlag = true
|
|
if (this.info.mySupport == 1) {
|
|
this.info.mySupport = 0
|
|
} else {
|
|
this.info.mySupport = 1
|
|
}
|
|
}
|
|
})
|
|
}
|
|
},
|
|
confirmReply() {
|
|
if (!this.content) {
|
|
return this.$toast('请输入回复内容')
|
|
}
|
|
var params = {
|
|
postId: this.id,
|
|
content: this.content,
|
|
createUserId: this.user.partyId,
|
|
createUserName: this.user.realName,
|
|
headPortrait: this.user.avatarUrl,
|
|
lastReplyId: this.lastReplyId ? this.lastReplyId : '',
|
|
lastReplyName: this.lastReplyName ? this.lastReplyName : '',
|
|
}
|
|
this.$http.post(`/app/apppostreply/addOrUpdate`, params).then((res) => {
|
|
if (res.code == 0) {
|
|
uni.$emit('refresh')
|
|
this.$toast('提交成功')
|
|
this.lastReplyId = ''
|
|
this.lastReplyName = ''
|
|
this.content = ''
|
|
this.showReply = false
|
|
this.getInfo()
|
|
}
|
|
})
|
|
},
|
|
replyClick(e) {
|
|
uni.showModal({
|
|
title: '提示',
|
|
content: `是否回复${e.createUserName}的评论？`,
|
|
confirmText: '确定',
|
|
success: (res) => {
|
|
if (res.confirm) {
|
|
uni.$emit('refresh')
|
|
this.showReply = true
|
|
this.lastReplyId = e.id
|
|
this.lastReplyName = e.createUserName
|
|
}
|
|
},
|
|
})
|
|
},
|
|
del() {
|
|
uni.showModal({
|
|
title: '提示',
|
|
content: `是否删除该帖子？`,
|
|
confirmText: '确定',
|
|
success: (res) => {
|
|
if (res.confirm) {
|
|
this.confirmDel()
|
|
}
|
|
},
|
|
})
|
|
},
|
|
confirmDel() {
|
|
this.$http.post(`/app/apppostinfo/delete?id=${this.id}`).then((res) => {
|
|
if (res.code == 0) {
|
|
this.$toast('删除成功')
|
|
setTimeout(() => {
|
|
uni.$emit('refresh')
|
|
uni.navigateBack({ delta: 1 })
|
|
}, 3000)
|
|
}
|
|
})
|
|
},
|
|
previewImage(images, img) {
|
|
uni.previewImage({
|
|
urls: images.map((v) => v.url),
|
|
current: img,
|
|
})
|
|
},
|
|
},
|
|
}
|
|
</script>
|
|
<style lang="scss" scoped>
|
|
.page {
|
|
width: 100%;
|
|
height: 100%;
|
|
background-color: #f6f7f9;
|
|
}
|
|
.color-365D92 {
|
|
color: #365d92;
|
|
}
|
|
.header {
|
|
background-color: #fff;
|
|
padding: 26px 30px 32px;
|
|
.user-info {
|
|
display: flex;
|
|
margin-bottom: 32px;
|
|
.user-name-bg {
|
|
width: 64px;
|
|
height: 64px;
|
|
line-height: 64px;
|
|
text-align: center;
|
|
background: #4e8eee;
|
|
font-size: 24px;
|
|
font-family: PingFangSC-Medium, PingFang SC;
|
|
font-weight: 500;
|
|
color: #fff;
|
|
margin-right: 16px;
|
|
border-radius: 50%;
|
|
}
|
|
.info {
|
|
div {
|
|
font-size: 26px;
|
|
font-family: PingFangSC-Medium, PingFang SC;
|
|
font-weight: 500;
|
|
color: #333;
|
|
line-height: 26px;
|
|
margin-bottom: 10px;
|
|
}
|
|
p {
|
|
font-size: 22px;
|
|
font-family: PingFangSC-Regular, PingFang SC;
|
|
font-weight: 400;
|
|
color: #999;
|
|
line-height: 22px;
|
|
}
|
|
span {
|
|
color: #3376fd;
|
|
margin-left: 16px;
|
|
}
|
|
}
|
|
}
|
|
.text-content {
|
|
font-size: 26px;
|
|
font-family: PingFangSC-Regular, PingFang SC;
|
|
font-weight: 400;
|
|
color: #333;
|
|
line-height: 42px;
|
|
word-break: break-all;
|
|
}
|
|
.img-list {
|
|
margin-top: 16px;
|
|
img {
|
|
width: 224px;
|
|
height: 224px;
|
|
margin-right: 8px;
|
|
}
|
|
img:nth-of-type(3n) {
|
|
margin-right: 0;
|
|
}
|
|
}
|
|
}
|
|
.reply-list {
|
|
padding: 0 32px 112px;
|
|
.item {
|
|
display: flex;
|
|
padding: 32px 0;
|
|
border-bottom: 2px solid #eee;
|
|
.user-img {
|
|
width: 96px;
|
|
height: 96px;
|
|
margin-right: 24px;
|
|
img {
|
|
width: 96px;
|
|
height: 96px;
|
|
border-radius: 50%;
|
|
}
|
|
}
|
|
.item-info {
|
|
width: calc(100% - 116px);
|
|
}
|
|
.user-info {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
margin-bottom: 10px;
|
|
.user-name {
|
|
font-size: 30px;
|
|
font-family: PingFangSC-Medium, PingFang SC;
|
|
font-weight: 500;
|
|
color: #365d92;
|
|
line-height: 42px;
|
|
}
|
|
.time {
|
|
font-size: 22px;
|
|
font-family: PingFangSC-Regular, PingFang SC;
|
|
font-weight: 400;
|
|
color: #999;
|
|
line-height: 42px;
|
|
}
|
|
}
|
|
.text {
|
|
font-size: 28px;
|
|
font-family: PingFangSC-Regular, PingFang SC;
|
|
color: #333;
|
|
line-height: 40px;
|
|
word-break: break-all;
|
|
}
|
|
}
|
|
}
|
|
.reply-bottom {
|
|
position: fixed;
|
|
bottom: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 104px;
|
|
padding: 22px 30px 24px;
|
|
box-sizing: border-box;
|
|
background-color: #fff;
|
|
font-size: 30px;
|
|
font-family: PingFangSC-Regular, PingFang SC;
|
|
color: #333;
|
|
line-height: 58px;
|
|
.input {
|
|
display: inline-block;
|
|
width: 580px;
|
|
height: 58px;
|
|
line-height: 58px;
|
|
text-align: center;
|
|
background: #f0f0f0;
|
|
border-radius: 30px;
|
|
font-size: 26px;
|
|
font-family: PingFangSC-Regular, PingFang SC;
|
|
color: #666;
|
|
margin-right: 42px;
|
|
}
|
|
.support {
|
|
display: inline-block;
|
|
}
|
|
.iconfont {
|
|
display: inline-block;
|
|
width: 36px;
|
|
height: 36px;
|
|
font-size: 36px;
|
|
color: #333;
|
|
margin-right: 8px;
|
|
}
|
|
}
|
|
.reply-content {
|
|
width: 100%;
|
|
padding: 32px;
|
|
box-sizing: border-box;
|
|
background: #fff;
|
|
::v-deep .u-input {
|
|
background-color: #f7f7f7 !important;
|
|
border-radius: 8px !important;
|
|
padding: 24px !important;
|
|
font-size: 26px !important;
|
|
}
|
|
.btn {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
padding: 24px 0;
|
|
span {
|
|
line-height: 64px;
|
|
}
|
|
.clear {
|
|
font-size: 26px;
|
|
font-family: PingFangSC-Regular, PingFang SC;
|
|
color: #666;
|
|
}
|
|
.confirm {
|
|
width: 144px;
|
|
height: 64px;
|
|
text-align: center;
|
|
background: #135ab8;
|
|
border-radius: 32px;
|
|
font-size: 28px;
|
|
font-family: PingFangSC-Regular, PingFang SC;
|
|
color: #fff;
|
|
}
|
|
}
|
|
}
|
|
</style>
|