提交一波居民议事
This commit is contained in:
aixianling
237
src/apps/AppVillageDiscuss/Detail.vue
Normal file
237
src/apps/AppVillageDiscuss/Detail.vue
Normal file
@@ -0,0 +1,237 @@
|
||||
<template>
|
||||
<div class="Detail">
|
||||
<AiTopFixed>
|
||||
<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 && data.contentType != 1">
|
||||
<img :src="item.accessUrl" alt="" v-for="(item, index) in data.images" :key="index"
|
||||
@click="previewImage(data.images, item.accessUrl)"/>
|
||||
</div>
|
||||
<div class="img-list" v-if="data.images && data.images.length && data.contentType == 1">
|
||||
<video class="video" :src="data.images[0].url"></video>
|
||||
</div>
|
||||
</AiTopFixed>
|
||||
<div v-if="data.type==0" class="comments">
|
||||
<b class="total" v-text="`全部评论(${commentCount})`"/>
|
||||
<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>
|
||||
</div>
|
||||
<div v-else-if="data.type==1" class="comments">
|
||||
|
||||
</div>
|
||||
<div class="bottomBar">
|
||||
<div v-if="data.status<2" @click="handleComplete">结束公示</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'Detail',
|
||||
props: {},
|
||||
data() {
|
||||
return {
|
||||
data: {},
|
||||
id: '',
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
commentCount() {
|
||||
return this.data.messages?.length || 0
|
||||
}
|
||||
},
|
||||
watch: {},
|
||||
onLoad(o) {
|
||||
this.id = o.id
|
||||
this.getDetail()
|
||||
this.$dict.load("discussStatus")
|
||||
},
|
||||
onShow() {
|
||||
document.title = "议事详情"
|
||||
},
|
||||
methods: {
|
||||
previewImage(images, img) {
|
||||
uni.previewImage({
|
||||
urls: images.map(v => v.url),
|
||||
current: img
|
||||
})
|
||||
},
|
||||
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) || "游客",
|
||||
images: JSON.parse(res.data.images),
|
||||
messages: res.data.messages || []
|
||||
}
|
||||
}
|
||||
})
|
||||
},
|
||||
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 {
|
||||
height: 100vh;
|
||||
background: #fff;
|
||||
padding-bottom: 112px;
|
||||
|
||||
::v-deep.AiTopFixed {
|
||||
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;
|
||||
font-size: 28px;
|
||||
|
||||
.total {
|
||||
display: block;
|
||||
font-size: 30px;
|
||||
height: 120px;
|
||||
padding-top: 44px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.u-avatar {
|
||||
margin-right: 24px;
|
||||
}
|
||||
|
||||
.content {
|
||||
color: #333;
|
||||
margin-left: 72px;
|
||||
margin-top: 10px;
|
||||
|
||||
&.color-999 {
|
||||
color: #999999;
|
||||
font-size: 24px;
|
||||
margin-bottom: 48px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user