kubbo/dvcp_v2_wxcp_app
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

提交一波居民议事

Browse Source
This commit is contained in:
aixianling
2021-12-30 21:05:45 +08:00
parent 24d5fa8f5d
commit f510951dc7
13 changed files with 891 additions and 2401 deletions
Download Patch File Download Diff File Expand all files Collapse all files

206
src/apps/AppVillageDiscuss/Add.vue Normal file
View File

@@ -0,0 +1,206 @@
<template>
<div class="add">
<div class="header-description">
<u-form :model="form" ref="uForm" label-width="auto">
<u-form-item label="主题" prop="content" required label-position="top">
<u-input v-model="form.content" placeholder="请输入标题(1000字以内)" type="textarea" auto-height height="280"
maxlength="1000"/>
</u-form-item>
<u-form-item label="图片(最多9张)" prop="images" class="avatars" label-position="top">
<AiUploader :def.sync="form.images" multiple placeholder="上传图片" :limit="9"
action="/admin/file/add2"></AiUploader>
</u-form-item>
<u-form-item label="议事截止时间" prop="discussDeadline" required>
<AiDateTime v-model="form.discussDeadline"/>
</u-form-item>
<u-form-item label="公示截止时间" prop="publicityDeadline">
<AiDateTime v-model="form.publicityDeadline"/>
</u-form-item>
<u-form-item label="议事类型" prop="type" required label-position="top">
<div v-for="op in $dict.getDict('discussType')" :key="op.dictValue" class="discussType"
@click="form.type=op.dictValue" :class="{current:form.type==op.dictValue}">
{{ op.dictName }}
</div>
</u-form-item>
</u-form>
</div>
<div class="pad-b112"></div>
<div class="btn" @click="submit">保存</div>
</div>
</template>
<script>
import {mapState} from 'vuex'
export default {
name: 'Add',
props: {},
data() {
return {
id: '',
form: {type: 0},
flag: false,
}
},
computed: {...mapState(['user'])},
onLoad(o) {
if (o.id) {
this.id = o.id
this.getDetail()
}
this.$dict.load("discussType")
},
onShow() {
document.title = "新增议事"
},
methods: {
getDetail() {
this.$http.post(`/app/appvillagediscuss/queryDetailById?id=${this.id}`).then((res) => {
if (res?.data) {
this.form = {...res.data}
if (res.data.images) {
this.form.images = JSON.parse(res.data.images || '[]')
}
}
})
},
submit() {
if (this.flag) return
if (!this.form.content) {
return this.$u.toast('请输入 主题')
}
if (!this.form.discussDeadline) {
return this.$u.toast('请选择 议事截止时间')
}
this.$http.post(`/app/appvillagediscuss/addOrUpdate`, {
...this.form,
images: JSON.stringify(this.form.images),
id: this.id,
}).then((res) => {
if (res?.code == 0) {
uni.$emit('update')
this.$u.toast('发布成功')
this.flag = true
setTimeout(() => {
uni.navigateBack({})
}, 600)
}
})
},
},
}
</script>
<style lang="scss" scoped>
.add {
height: 100%;
.header-description {
::v-deep .u-form {
.u-form-item {
.u-form-item__body {
.u-form-item--right__content__slot {
padding-bottom: 0;
}
}
}
.u-form-item:last-child {
margin-bottom: 0;
padding-bottom: 20px !important;
}
.avatars {
margin: 16px 0;
.u-form-item__body {
.default {
width: 160px;
height: 160px;
}
}
}
}
}
.pad-b112 {
padding-bottom: 224px;
}
.btn {
position: fixed;
bottom: 0;
width: 100%;
height: 112px;
line-height: 112px;
background: #1365dd;
text-align: center;
font-size: 32px;
font-weight: 500;
color: #ffffff;
z-index: 999;
}
.right {
width: 100%;
text-align: right;
.right-icon {
margin-left: 8px;
}
}
.discussType {
width: 320px;
height: 112px;
background: #F5F5F5;
border-radius: 4px;
font-size: 30px;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: bold;
color: #333333;
letter-spacing: 1px;
text-align: center;
line-height: 112px;
& + .discussType {
margin-left: 42px;
}
&.current {
color: #1174FE;
background: #E7F1FE;
position: relative;
&:before {
position: absolute;
display: block;
content: " ";
bottom: 0;
right: 0;
border: 24px solid #1576FE;
border-top-color: transparent;
border-left-color: transparent;
border-radius: inherit;
z-index: 1;
}
&:after {
position: absolute;
display: block;
content: "✓";
bottom: 0;
right: 0;
color: #fff;
z-index: 2;
line-height: normal;
font-weight: normal;
}
}
}
.color-999 {
color: #999;
}
}
</style>

382
src/apps/AppVillageDiscuss/AppVillageDiscuss.vue Normal file
View File

@@ -0,0 +1,382 @@
<template>
<div class="AppVillageDiscuss">
<AiTopFixed v-if="tabs.length>0">
<div class="tab-select">
<div class="item" :class="{active:type == item.dictValue}" v-for="(item) in tabs" :key="item.dictValue"
@click="tabClick(item.dictValue)">{{ item.dictName }}<span/>
</div>
</div>
</AiTopFixed>
<template v-if="datas.length > 0">
<AiCard v-for="(item, i) in datas" :ref="item.id" :key="i" @click.native="toAdd(item, 1)">
<template #custom>
<div flex class="w-100">
<div class="avatar" v-text="item.avatar"/>
<div flex class="column start fill">
<b class="color-333" v-text="item.createUserName"/>
<span class="color-999" v-text="item.createTime"/>
</div>
<div class="statusTag" :class="{over:item.status>0}"
v-text="item.status==0? item.type==0?'征集中':'投票中':$dict.getLabel('discussStatus',item.status)"/>
</div>
<p class="item-content">
<u-parse :html="item.content"></u-parse>
</p>
<div v-if="item.images&&item.images.length">
<div class="img-list" v-if="item.contentType != 1">
<img :src="items.accessUrl" alt="" v-for="(items, index) in item.images" :key="index" v-if="index < 3"
@click.stop="previewImage(item.images, items.accessUrl)"/>
</div>
<div class="img-list" v-else>
<video class="video" :src="item.images[0].url"/>
</div>
</div>
</template>
</AiCard>
<u-loadmore :status="loadmore" color="#999" font-size="24" margin-top="32" margin-bottom="80"/>
</template>
<AiEmpty description="暂无数据" v-else></AiEmpty>
<AiFixedBtn>
<div class="addBtn iconfont iconfont-iconfangda" @tap.stop="toAdd()"/>
<div class="addBtn iconfont iconfont-iconDouble_Up" @tap.stop="backTop" v-if="showBackTop"/>
</AiFixedBtn>
<u-modal v-model="deletShow" content="您确认要删除该条信息吗？" :show-cancel-button="true" :mask-close-able="true"
:show-title="false" @confirm="delet"></u-modal>
</div>
</template>
<script>
import {mapState} from 'vuex'
export default {
name: 'AppVillageDiscuss',
appName: '居民议事',
components: {},
props: {},
data() {
return {
datas: [],
current: 1,
size: 10,
pages: 0,
deletShow: false,
deletId: '',
type: '0',
listName: '',
tabIndex: 0,
showBackTop: false
}
},
computed: {
...mapState(['user']),
loadmore() {
return this.pages <= this.current ? 'loading ' : 'nomore'
},
tabs() {
return this.$dict.getDict("discussStatus")
}
},
onLoad(o) {
this.moduleId = o.moduleId
this.listName = o.listName
this.getList()
uni.$on('update', () => {
this.getList()
})
this.$dict.load("discussStatus")
},
onShow() {
document.title = "居民议事"
},
onPageScroll(obj) {
this.showBackTop = obj.scrollTop > 0
},
methods: {
previewImage(images, img) {
uni.previewImage({
urls: images.map(v => v.url),
current: img
})
},
tabClick(type) {
this.type = type
this.current = 1
this.getList()
},
search() {
this.current = 1
this.getList()
},
getList() {
let {current, type} = this
this.$http.post('/app/appvillagediscuss/list', null, {
params: {size: 20, current, type},
})
.then((res) => {
if (res?.data) {
res.data.records.forEach(e => {
e.avatar = e.createUserName?.substring(0, 2) || "游客"
if (e.images) {
e.images = JSON.parse(e.images)
}
})
this.datas = this.current > 1 ? [...this.datas, ...res.data.records] : res.data.records
this.pages = res.data.pages
}
})
},
toAdd(item, type) {
if (item?.id) {
this.$refs?.[item.id]?.[0]?.handleClose()
}
if (type == '1') {
uni.navigateTo({url: `./Detail?id=${item.id}`})
}
if (type == '2') {
uni.navigateTo({url: `./Add?id=${item.id}`})
}
if (type == null) {
uni.navigateTo({url: `./Add`})
}
},
toDetele(item) {
this.deletShow = true
this.deletId = item.id
this.$refs?.[item.id]?.[0]?.handleClose()
},
delet() {
this.$http.post(`/app/appcontentinfo/delete?ids=${this.deletId}`).then((res) => {
if (res.code == 0) {
this.current = 1
this.$u.toast('删除成功！')
this.getList()
}
})
},
backTop() {
uni.pageScrollTo({
scrollTop: 0
});
}
},
onReachBottom() {
this.current++
this.getList()
},
}
</script>
<style scoped lang="scss">
.AppVillageDiscuss {
height: 100%;
.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;
}
}
::v-deep.AiTopFixed {
.content {
padding: 0;
}
}
.tab-select {
width: 100%;
height: 96px;
line-height: 96px;
background: #3975C6;
display: flex;
.item {
flex: 1;
text-align: center;
font-size: 28px;
font-family: PingFangSC-Regular, PingFang SC;
color: #CDDCF0;
}
.active {
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
position: relative;
color: #fff;
span {
width: 48px;
height: 4px;
background: #FFF;
position: absolute;
bottom: 14px;
left: 50%;
margin-left: -24px;
}
}
}
::v-deep .AiCard {
background: #f3f6f9;
position: relative;
padding: 0;
margin-bottom: 16px;
& > .start {
background: #fff;
padding: 32px;
border-radius: 16px;
.titles {
width: 600px;
font-size: 32px;
font-weight: 500;
color: #333333;
margin-bottom: 16px;
line-height: 50px;
word-break: break-all;
}
.item-content {
width: 100%;
word-break: break-all;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 4;
-webkit-box-orient: vertical;
font-size: 26px;
font-family: PingFangSC-Regular, PingFang SC;
color: #333;
line-height: 44px;
margin-top: 32px;
margin-bottom: 16px;
}
.img-list {
margin-bottom: 24px;
img {
width: calc(33% - 16px);
height: 204px;
margin: 0 16px 8px 0;
}
}
.flex {
display: flex;
justify-content: space-between;
.left {
.garydiv {
font-size: 28px;
color: #999999;
background: #eeeeee;
border-radius: 24px;
padding: 4px 16px;
}
.times {
font-size: 28px;
color: #999999;
}
.type {
display: inline-block;
padding: 0 16px;
line-height: 48px;
background: #EEE;
border-radius: 24px;
font-size: 24px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #999;
margin-right: 16px;
}
}
.right {
font-size: 28px;
color: #999;
img {
width: 32px;
height: 32px;
vertical-align: middle;
margin-right: 8px;
}
.font {
color: #4181ff;
}
}
}
}
}
.AiFixedBtn {
.movableArea {
.addBtn {
display: flex;
justify-content: center;
align-items: center;
width: 96px;
height: 96px;
flex-shrink: 0;
box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
font-size: 48px;
background: #fff;
color: $uni-color-primary;
border-radius: 50%;
& + .addBtn {
margin-top: 22px;
}
}
}
}
::v-deep uni-video {
width: 100%;
}
}
</style>

237
src/apps/AppVillageDiscuss/Detail.vue Normal file
View 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>