407 lines
9.6 KiB
Vue
407 lines
9.6 KiB
Vue
<template>
|
|
<div class="Detail">
|
|
<div class="detail-top">
|
|
<div flex class="w-100">
|
|
<div class="avatar" v-text="data.avatar" />
|
|
<div flex class="column start fill">
|
|
<b class="color-333" v-text="data.createUserName" />
|
|
<span class="color-999" v-text="data.createTime" />
|
|
</div>
|
|
<div class="statusTag" :class="{ over: data.status > 0 }" v-text="data.status == 0 ? (data.type == 0 ? '征集中' : '投票中') : $dict.getLabel('discussStatus', data.status)" />
|
|
</div>
|
|
|
|
<div class="header-middle">
|
|
<div class="contsnts">
|
|
<u-parse :html="data.content"></u-parse>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="img-list" v-if="data.images && data.images.length">
|
|
<img :src="item.url" alt="" v-for="(item, index) in data.images" :key="index" @click="previewImage(data.images, item.url)" />
|
|
</div>
|
|
</div>
|
|
<div v-if="data.type == 0" class="comments">
|
|
<span class="totalCount">
|
|
<span class="total" v-text="`全部评论(${commentCount})`" />
|
|
<span class="rightCount">
|
|
<u-icon name="clock"></u-icon>
|
|
<u-count-down :timestamp="timestamp" separator="zh" show-days show-hours show-minutes show-seconds></u-count-down>
|
|
</span>
|
|
</span>
|
|
<div v-for="op in data.messages" :key="op.id">
|
|
<div flex class="header">
|
|
<u-avatar :src="op.avatar" size="48" />
|
|
<b class="fill" v-text="op.createUserName" />
|
|
<u-icon name="thumb-up" :label="op.suport" />
|
|
</div>
|
|
<div class="content" v-text="op.content" />
|
|
<div class="content color-999" v-text="op.createTime" />
|
|
</div>
|
|
<AiEmpty v-if="!data.messages.length"></AiEmpty>
|
|
</div>
|
|
|
|
<div v-else-if="data.type == 1" class="comments"></div>
|
|
|
|
<div class="bottomInput" v-if="isAnnouncer">
|
|
<div class="leftInput" @click="showBottomInput = true">我来说两句...</div>
|
|
</div>
|
|
|
|
<u-popup v-model="showBottomInput" height="200px" mode="bottom">
|
|
<u-input v-model="content" placeholder="写下你的想法" type="textarea" auto-height height="180" maxlength="140"> </u-input>
|
|
<div class="words">字数{{ content.length }}/140</div>
|
|
|
|
<div class="bottombtn">
|
|
<div class="emptys" @click="content = ''">清空内容</div>
|
|
|
|
<div class="publishs" @click="publish">发表</div>
|
|
</div>
|
|
</u-popup>
|
|
|
|
<!-- <div class="bottomBar">
|
|
<div v-if="data.status < 2" @click="handleComplete">结束公示</div>
|
|
</div> -->
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import { mapState } from 'vuex'
|
|
|
|
export default {
|
|
name: 'Detail',
|
|
props: {},
|
|
data() {
|
|
return {
|
|
data: {},
|
|
id: '',
|
|
timestamp: '',
|
|
showBottomInput: false,
|
|
content: '',
|
|
flag: false,
|
|
isAnnouncer: false
|
|
}
|
|
},
|
|
computed: {
|
|
...mapState(['user']),
|
|
|
|
commentCount() {
|
|
return this.data.messages?.length || 0
|
|
},
|
|
},
|
|
watch: {},
|
|
onLoad(o) {
|
|
console.log(this.user)
|
|
this.id = o.id
|
|
this.getDetail()
|
|
this.$dict.load('discussStatus')
|
|
},
|
|
onShow() {
|
|
document.title = '议事详情'
|
|
},
|
|
methods: {
|
|
getDetail() {
|
|
this.$http.post(`/app/appvillagediscuss/queryDetailById?id=${this.id}`).then((res) => {
|
|
if (res?.data) {
|
|
this.data = {
|
|
...res.data,
|
|
avatar: res.data.createUserName?.substr(0, 2) || '游客',
|
|
messages: res.data.messages || [],
|
|
}
|
|
this.data.images = JSON.parse(res.data.images) || []
|
|
this.isAnnouncer = this.user.id === this.info.createUserId
|
|
|
|
var discussTime = (new Date(res.data.discussDeadline).getTime() * 1) / 1000
|
|
var nowTime = (new Date().getTime() * 1) / 1000
|
|
if (discussTime >= nowTime) {
|
|
this.timestamp = discussTime - nowTime
|
|
}
|
|
}
|
|
})
|
|
},
|
|
|
|
publish() {
|
|
if (this.flag) return
|
|
if (!this.content) {
|
|
return this.$u.toast('请输入你的想法')
|
|
}
|
|
|
|
this.$http
|
|
.post(`/app/appvillagediscussmessage/addOrUpdate`, {
|
|
content: this.content,
|
|
avatar: this.user.avatar,
|
|
createUserId: this.user.id,
|
|
createUserName: this.user.name,
|
|
discussId: this.id,
|
|
})
|
|
.then((res) => {
|
|
if (res?.code == 0) {
|
|
this.$u.toast('留言成功')
|
|
this.flag = true
|
|
this.showBottomInput = false
|
|
this.getDetail()
|
|
}
|
|
})
|
|
},
|
|
|
|
praise() {
|
|
console.log('点赞')
|
|
this.$http.post(`/app/appvillagediscussmessage/suport?id=${this.id}&userId=${this.user.id}`).then((res) => {
|
|
if (res?.code == 0) {
|
|
this.$u.toast('点赞成功!')
|
|
this.getDetail()
|
|
}
|
|
})
|
|
},
|
|
|
|
a() {
|
|
console.log(aa)
|
|
},
|
|
|
|
previewImage(images, img) {
|
|
uni.previewImage({
|
|
urls: images.map((v) => v.url),
|
|
current: img,
|
|
})
|
|
},
|
|
|
|
handleSubmitComment(content) {
|
|
if (!!content) {
|
|
let { id } = this
|
|
this.$http
|
|
.post('/app/appvillagediscussmessage/addOrUpdate', {
|
|
id,
|
|
content,
|
|
})
|
|
.then((res) => {
|
|
if (res?.code == 0) {
|
|
this.$u.toast('提交成功!')
|
|
this.getDetail()
|
|
}
|
|
})
|
|
} else {
|
|
this.$u.toast('不能提交空评论!')
|
|
}
|
|
},
|
|
handleComplete() {
|
|
this.$confirm('是否要结束公示')
|
|
.then(() => {
|
|
let { id } = this
|
|
this.$http.post('/app/appvillagediscuss/finishPublic', { id }).then((res) => {
|
|
if (res?.code == 0) {
|
|
this.$u.toast('已结束公示!')
|
|
this.getDetail()
|
|
}
|
|
})
|
|
})
|
|
.catch(() => 0)
|
|
},
|
|
},
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.Detail {
|
|
padding-bottom: 112px;
|
|
|
|
.detail-top {
|
|
padding: 30px;
|
|
background: #fff;
|
|
border-bottom: 16px solid #f6f7f9;
|
|
|
|
.avatar {
|
|
height: 64px;
|
|
width: 64px;
|
|
color: #fff;
|
|
background: $uni-color-primary;
|
|
border-radius: 50%;
|
|
font-size: 24px;
|
|
text-align: center;
|
|
line-height: 64px;
|
|
margin-right: 16px;
|
|
}
|
|
|
|
.color-999 {
|
|
color: #999999;
|
|
}
|
|
|
|
.color-333 {
|
|
color: #333;
|
|
}
|
|
|
|
.w-100 {
|
|
width: 100%;
|
|
}
|
|
|
|
.statusTag {
|
|
padding: 0 12px;
|
|
line-height: 30px;
|
|
border: 1px solid #2573ff;
|
|
color: #2573ff;
|
|
font-size: 22px;
|
|
|
|
&.over {
|
|
border-color: #666;
|
|
color: #666;
|
|
}
|
|
}
|
|
|
|
.header-middle {
|
|
padding: 32px 0 48px 0;
|
|
|
|
.contsnts {
|
|
font-size: 26px;
|
|
line-height: 1.5;
|
|
word-break: break-all;
|
|
}
|
|
|
|
img {
|
|
margin-top: 30px;
|
|
width: 686px;
|
|
height: 486px;
|
|
}
|
|
}
|
|
|
|
.img-list {
|
|
img {
|
|
width: calc(33vw - 6px - 24px);
|
|
height: calc(33vw - 6px - 24px);
|
|
margin: 0 12px 12px 0;
|
|
|
|
&:nth-of-type(3n) {
|
|
margin-right: 0;
|
|
}
|
|
}
|
|
|
|
.title {
|
|
width: 100%;
|
|
line-height: 112px;
|
|
background: #fff;
|
|
font-size: 32px;
|
|
font-family: PingFangSC-Regular, PingFang SC;
|
|
color: #999;
|
|
}
|
|
}
|
|
}
|
|
|
|
::v-deep uni-video {
|
|
width: 100%;
|
|
}
|
|
|
|
.comments {
|
|
padding: 0 32px 20px;
|
|
font-size: 28px;
|
|
background: #fff;
|
|
.totalCount {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
|
|
.total {
|
|
display: block;
|
|
font-size: 30px;
|
|
height: 120px;
|
|
box-sizing: border-box;
|
|
padding-top: 44px;
|
|
}
|
|
.rightCount {
|
|
padding-top: 44px;
|
|
}
|
|
}
|
|
|
|
.u-avatar {
|
|
margin-right: 24px;
|
|
}
|
|
|
|
.content {
|
|
color: #333;
|
|
margin-left: 72px;
|
|
margin-top: 10px;
|
|
|
|
&.color-999 {
|
|
color: #999999;
|
|
font-size: 24px;
|
|
margin-bottom: 48px;
|
|
}
|
|
}
|
|
}
|
|
|
|
.bottomInput {
|
|
position: fixed;
|
|
bottom: 0;
|
|
z-index: 11;
|
|
width: 100%;
|
|
background: #fff;
|
|
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
padding: 24px 30px;
|
|
box-sizing: border-box;
|
|
border-top: 1px solid #eee;
|
|
.leftInput {
|
|
flex: 1;
|
|
height: 58px;
|
|
line-height: 58px;
|
|
text-align: center;
|
|
background: #f0f0f0;
|
|
border-radius: 30px;
|
|
}
|
|
// .righticon {
|
|
// .icontext {
|
|
// margin-left: 10px;
|
|
// }
|
|
// }
|
|
}
|
|
|
|
::v-deep .u-drawer {
|
|
.u-drawer-content {
|
|
.u-drawer__scroll-view {
|
|
.uni-scroll-view {
|
|
// overflow: hidden;
|
|
overflow: inherit !important;
|
|
.u-input {
|
|
background: #f7f7f7;
|
|
border-radius: 8px 8px 0 0;
|
|
margin: 32px 30px 0 30px;
|
|
.uni-textarea-placeholder {
|
|
padding: 16px 0 0 16px;
|
|
}
|
|
.uni-textarea-textarea {
|
|
padding: 16px 0 0 16px;
|
|
}
|
|
}
|
|
.words {
|
|
background: #f7f7f7;
|
|
border-radius: 0 0 8px 8px;
|
|
margin: 0 30px;
|
|
padding-bottom: 10px;
|
|
text-align: right;
|
|
font-size: 26px;
|
|
color: #999999;
|
|
}
|
|
.bottombtn {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
margin: 0 30px;
|
|
padding: 20px 0;
|
|
.emptys {
|
|
padding: 20px 0;
|
|
font-size: 26px;
|
|
color: #666666;
|
|
}
|
|
.publishs {
|
|
width: 144px;
|
|
height: 64px;
|
|
line-height: 64px;
|
|
text-align: center;
|
|
background: #1365dd;
|
|
border-radius: 32px;
|
|
color: #fff;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|