居民活动
This commit is contained in:
花有清香月有阴
@@ -1,52 +1,149 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="page" v-if="pageShow">
|
<div class="page">
|
||||||
<div class="header">
|
<div class="header-content">
|
||||||
<div class="user-info">
|
<div class="header-top">
|
||||||
<image class="user-name-bg" :src="info.avatar" />
|
<img :src="detail.url" alt="" />
|
||||||
<div class="info">
|
|
||||||
<div>{{ info.name }}</div>
|
|
||||||
<p>{{ info.createTime }}<span v-if="info.userId == user.id" @click="del">删除帖子</span></p>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
<p class="text-content">{{ info.content }}</p>
|
|
||||||
<div class="img-list" v-if="info.images.length">
|
<div class="header-middle">
|
||||||
<img :src="item.url" :key="index" v-for="(item, index) in info.images" @click.stop="previewImage(info.images, item.url)" />
|
<div class="img-title">{{ detail.title }}</div>
|
||||||
</div>
|
|
||||||
</div>
|
<div class="header-middle-bottom">
|
||||||
<div class="reply-list">
|
<div class="left">
|
||||||
<div class="item" v-for="(item, index) in info.replyList" :key="index" @click="replyClick(item)">
|
<div class="left-btn" :class="'status' + detail.status">{{ $dict.getLabel('newActivityStatus', detail.status) }}</div>
|
||||||
<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>
|
</div>
|
||||||
<p class="text">
|
<div class="right">
|
||||||
<span v-if="item.lastReplyName"
|
<img :src="detail.avatar" alt="" />
|
||||||
>回复<span class="color-365D92">{{ item.lastReplyName }}</span></span
|
<span>{{ detail.createUserName }}</span>
|
||||||
>{{ item.content }}
|
</div>
|
||||||
</p>
|
</div>
|
||||||
|
|
||||||
|
<div class="cards">
|
||||||
|
<div class="cards-left">活动时间</div>
|
||||||
|
<div class="cards-right">{{ detail.beginTime }}-{{ detail.endTime }}</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="cards">
|
||||||
|
<div class="cards-left">活动人数</div>
|
||||||
|
<div class="cards-right" @click="toSignUser()">
|
||||||
|
<span>
|
||||||
|
<span :style="{ color: detail.realNum == detail.total ? '#FF4466 ' : '#1C6BDF' }">{{ detail.realNum || 0 }}</span>
|
||||||
|
<span v-if="detail.total != 0">/{{ detail.total }}</span>
|
||||||
|
<span v-else>/不限</span>
|
||||||
|
</span>
|
||||||
|
<u-icon name="arrow-right" color="#DDDDDD" size="28" style="margin-left: 8px"></u-icon>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="cards">
|
||||||
|
<div class="cards-left">活动地点</div>
|
||||||
|
<div class="cards-right" style="width: 75%; text-align: right">{{ detail.address }}</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="header-bottom">
|
||||||
|
<!-- v-if="detail.status == 1 || detail.status == 2 || detail.status == 3" -->
|
||||||
|
<div class="tab-title">
|
||||||
|
<span :class="current == 0 ? 'active' : ''" @click="change(0)">活动详情</span>
|
||||||
|
<span :class="current == 1 ? 'active' : ''" @click="change(1)">活动动态</span>
|
||||||
|
</div>
|
||||||
|
<!-- <div class="info-title" v-else>活动详情</div> -->
|
||||||
|
<div class="content-details" v-if="current == 0">
|
||||||
|
<div v-html="detail.content"></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="content-trends" v-if="current == 1">
|
||||||
|
<div class="details" v-if="activeList.length > 0">
|
||||||
|
<div class="card" v-for="(item, index) in activeList" :key="index" @click="toDetail(item.id)">
|
||||||
|
<div class="card-nav">
|
||||||
|
<div class="avatar">
|
||||||
|
<img :src="item.avatar" alt="" style="width: 100%; height: 100%" v-if="item.avatar" />
|
||||||
|
<span v-else>
|
||||||
|
<span v-if="item.name">{{ item.name.substring(item.name.length, item.name.length - 2) }}</span>
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="right">
|
||||||
|
<span class="name">{{ item.name }}</span>
|
||||||
|
<span class="time">{{ item.createTime }}</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="card-font">
|
||||||
|
{{ item.content }}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="card-img">
|
||||||
|
<img :src="e.url" v-for="(e, i) in imgList[index]" :key="i" alt="" @click.stop="previewImage(info.images, item.url)" />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="card-icon">
|
||||||
|
<div>
|
||||||
|
<i class="iconfont"></i>
|
||||||
|
<span>{{ item.viewNum ? item.viewNum : 0 }}</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<i class="iconfont"></i>
|
||||||
|
<span>{{ item.replyNum ? item.replyNum : 0 }}</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<i class="iconfont"></i>
|
||||||
|
<span>{{ item.supportNum ? item.supportNum : 0 }}</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="card-bottom"></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<AiEmpty v-else />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="reply-bottom">
|
|
||||||
<div class="input" @click="showReply = true">我来说两句…</div>
|
<div class="addicon" @click="toPublicPage()">
|
||||||
<div class="support" @click="support()">
|
<u-icon name="plus" color="#1365DD" size="50"></u-icon>
|
||||||
<!-- <AiIcon icon="iconpraiseactive2x" size="18" v-if="info.mySupport == 1" style="vertical-align: middle" />
|
</div>
|
||||||
<i class="iconfont" v-else></i>赞 -->
|
|
||||||
</div>
|
<div class="btn" v-if="detail.status == 0 && detail.createUserId == user.partyId">
|
||||||
|
<div class="edit" @click="editActive">编辑</div>
|
||||||
|
<div class="public" style="background: #3671ee" @click="changeStatus(1, '是否发布？')">发布活动</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="btn" v-if="detail.realNum < detail.total && detail.status == 1 && detail.myReport == 0">
|
||||||
|
<div class="edit" @click="callPhone(detail.contactPhone)">电话咨询</div>
|
||||||
|
<div class="public" style="background: #3671ee" @click="changeStatus(2, '是否报名？')">立即报名</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="btn" v-if="detail.status == 1 && detail.myReport == 0 && detail.total == 0">
|
||||||
|
<div class="edit" @click="callPhone(detail.contactPhone)">电话咨询</div>
|
||||||
|
<div class="public" style="background: #3671ee" @click="changeStatus(2, '是否报名？')">立即报名</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="btn" v-if="detail.status == 1 && detail.myReport == 1">
|
||||||
|
<div class="edit" @click="callPhone(detail.contactPhone)">电话咨询</div>
|
||||||
|
<div class="public" style="background: #3671ee" @click="changeStatus(3, '是否取消报名？取消报名无法重新报名！')">取消报名</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="btn" v-if="detail.realNum == detail.total && detail.status == 1 && detail.status == 1 && detail.total != 0">
|
||||||
|
<div class="max">已满员</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="btn" v-if="detail.myReport == 1 && detail.status == 2">
|
||||||
|
<div class="edit" @click="callPhone(detail.contactPhone)">联系负责人</div>
|
||||||
|
<div class="public" style="background: #ffd8df; color: #ff4466" v-if="detail.allow1 == 0">未签到</div>
|
||||||
|
<div class="public" style="background: #3671ee; color: #ffffff" v-if="detail.allow1 == 1" @click="sign(0)">签到</div>
|
||||||
|
<div class="public" style="background: #cbead9; color: #20bc65" v-if="detail.allow1 == 2">已签到</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="btn" v-if="detail.status == 5">
|
||||||
|
<div class="edit" @click="callPhone(detail.contactPhone)">联系负责人</div>
|
||||||
|
<div class="public" style="background: #cbead9; color: #20bc65" v-if="detail.allow2 == 1" @click="sign(1)">离场签到</div>
|
||||||
|
<div class="public" style="background: #cbead9; color: #20bc65" v-if="detail.allow2 == 2">已离场签到</div>
|
||||||
|
<div class="public" style="background: #ffd8df; color: #ff4466" v-if="detail.allow2 == 0">未离场签到</div>
|
||||||
</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>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
@@ -60,130 +157,156 @@ export default {
|
|||||||
},
|
},
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
info: {},
|
|
||||||
pageShow: false,
|
|
||||||
id: '',
|
id: '',
|
||||||
supportFlag: true,
|
detail: {},
|
||||||
showReply: false,
|
activeList: [],
|
||||||
content: '',
|
imgList: [],
|
||||||
lastReplyId: '',
|
list: [
|
||||||
lastReplyName: '',
|
{
|
||||||
|
name: '活动详情',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '活动动态',
|
||||||
|
},
|
||||||
|
],
|
||||||
|
current: 0,
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
onLoad(option) {
|
||||||
onLoad(query) {
|
this.id = option.id
|
||||||
this.id = query.id
|
this.$dict.load(['newActivityStatus']).then(() => {
|
||||||
this.getInfo()
|
this.getDetail()
|
||||||
uni.$emit('refresh')
|
})
|
||||||
},
|
},
|
||||||
|
|
||||||
methods: {
|
methods: {
|
||||||
getInfo() {
|
getDetail() {
|
||||||
this.$loading()
|
this.$instance.post(`/app/appactivityinfo/queryDetailById?id=${this.id}&partyId=${this.user.partyId}`).then((res) => {
|
||||||
this.$http.post(`/app/apppostinfo/queryDetailById?id=${this.id}`).then((res) => {
|
if (res?.data) {
|
||||||
if (res.code === 0) {
|
res.data.beginTime = res.data.beginTime.substring(0, 16)
|
||||||
this.info = res.data
|
res.data.endTime = res.data.endTime.substring(0, 16)
|
||||||
|
this.detail = res.data
|
||||||
|
this.getActiveList()
|
||||||
|
}
|
||||||
|
})
|
||||||
|
},
|
||||||
|
getActiveList() {
|
||||||
|
this.$instance.post(`/app/apppostinfo/list?activityId=${this.id}`).then((res) => {
|
||||||
|
if (res?.data) {
|
||||||
|
this.activeList = res.data.records
|
||||||
|
|
||||||
if (res.data.images) {
|
if (this.activeList) {
|
||||||
this.info.images = JSON.parse(res.data.images)
|
let imagesList = []
|
||||||
} else {
|
this.activeList.map((item) => {
|
||||||
this.info.images = []
|
if (item.images) {
|
||||||
}
|
item.images = JSON.parse(item.images || '[]')
|
||||||
if (res.data.replyList.length) {
|
imagesList.push(item.images)
|
||||||
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
|
|
||||||
}
|
}
|
||||||
}
|
return item
|
||||||
})
|
})
|
||||||
}
|
this.imgList = imagesList
|
||||||
},
|
}
|
||||||
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) {
|
change(index) {
|
||||||
|
this.current = index
|
||||||
|
},
|
||||||
|
toPublicPage() {
|
||||||
|
uni.navigateTo({
|
||||||
|
url: `./AddPosts?id=${this.id}`,
|
||||||
|
})
|
||||||
|
},
|
||||||
|
editActive() {
|
||||||
|
uni.navigateTo({ url: `./AddActive?id=${this.id}` })
|
||||||
|
},
|
||||||
|
changeStatus(status, text) {
|
||||||
uni.showModal({
|
uni.showModal({
|
||||||
title: '提示',
|
title: '提示',
|
||||||
content: `是否回复${e.createUserName}的评论？`,
|
content: `${text}`,
|
||||||
confirmText: '确定',
|
confirmText: '确定',
|
||||||
success: (res) => {
|
success: (e) => {
|
||||||
if (res.confirm) {
|
if (status == 1) {
|
||||||
uni.$emit('refresh')
|
//发布
|
||||||
this.showReply = true
|
this.changeStatusConfirm(status)
|
||||||
this.lastReplyId = e.id
|
}
|
||||||
this.lastReplyName = e.createUserName
|
if (status == 2) {
|
||||||
|
//报名
|
||||||
|
this.report()
|
||||||
|
}
|
||||||
|
if (status == 3) {
|
||||||
|
//取消报名
|
||||||
|
this.cancelReport()
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
})
|
})
|
||||||
},
|
},
|
||||||
del() {
|
cancelReport() {
|
||||||
uni.showModal({
|
this.$instance
|
||||||
title: '提示',
|
.post(`/app/appactivityuser/removeReport`, {
|
||||||
content: `是否删除该帖子？`,
|
activityId: this.id,
|
||||||
confirmText: '确定',
|
partyId: this.user.partyId,
|
||||||
success: (res) => {
|
})
|
||||||
if (res.confirm) {
|
.then((res) => {
|
||||||
this.confirmDel()
|
if (res.code == 0) {
|
||||||
|
this.$toast('提交成功')
|
||||||
|
this.getDetail()
|
||||||
}
|
}
|
||||||
},
|
})
|
||||||
})
|
|
||||||
},
|
},
|
||||||
confirmDel() {
|
changeStatusConfirm(status) {
|
||||||
this.$http.post(`/app/apppostinfo/delete?id=${this.id}`).then((res) => {
|
this.$instance
|
||||||
if (res.code == 0) {
|
.post(`/app/appactivityinfo/changeStatus`, {
|
||||||
this.$toast('删除成功')
|
id: this.id,
|
||||||
setTimeout(() => {
|
status: status,
|
||||||
uni.$emit('refresh')
|
})
|
||||||
uni.navigateBack({ delta: 1 })
|
.then((res) => {
|
||||||
}, 3000)
|
if (res.code == 0) {
|
||||||
}
|
this.$toast('提交成功')
|
||||||
})
|
this.getDetail()
|
||||||
|
}
|
||||||
|
})
|
||||||
|
},
|
||||||
|
callPhone(phone) {
|
||||||
|
uni.makePhoneCall({ phoneNumber: phone })
|
||||||
|
},
|
||||||
|
report() {
|
||||||
|
this.$instance
|
||||||
|
.post(`/app/appactivityuser/report`, {
|
||||||
|
activityId: this.id,
|
||||||
|
partyId: this.user.partyId,
|
||||||
|
name: this.user.realName,
|
||||||
|
orgId: this.user.partyOrgId,
|
||||||
|
orgName: this.user.partyOrgName,
|
||||||
|
phone: this.user.phone,
|
||||||
|
communityId: this.user.communityId,
|
||||||
|
})
|
||||||
|
.then((res) => {
|
||||||
|
if (res.code == 0) {
|
||||||
|
this.$toast('报名成功')
|
||||||
|
this.getDetail()
|
||||||
|
}
|
||||||
|
})
|
||||||
|
},
|
||||||
|
toSignUser() {
|
||||||
|
var isAdmin = this.detail.createUserId == this.user.partyId ? 1 : 0
|
||||||
|
uni.navigateTo({ url: `./SignUser?id=${this.id}&isAdmin=${isAdmin}&status=${this.detail.status}` })
|
||||||
|
},
|
||||||
|
sign(status) {
|
||||||
|
//status 0开始签到 1离场签到
|
||||||
|
this.$instance
|
||||||
|
.post(`/app/appactivityuser/sign`, {
|
||||||
|
activityId: this.id,
|
||||||
|
partyId: this.user.partyId,
|
||||||
|
})
|
||||||
|
.then((res) => {
|
||||||
|
if (res.code == 0) {
|
||||||
|
this.$toast(status == 1 ? '离场签到成功' : '签到成功')
|
||||||
|
this.getDetail()
|
||||||
|
}
|
||||||
|
})
|
||||||
|
},
|
||||||
|
toDetail(id) {
|
||||||
|
this.linkTo(`./detail?id=${id}`)
|
||||||
},
|
},
|
||||||
previewImage(images, img) {
|
previewImage(images, img) {
|
||||||
uni.previewImage({
|
uni.previewImage({
|
||||||
@@ -194,193 +317,286 @@ export default {
|
|||||||
},
|
},
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
<style lang="scss" scoped>
|
<style scoped lang="scss">
|
||||||
.page {
|
.page {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
background-color: #f6f7f9;
|
|
||||||
}
|
|
||||||
.color-365D92 {
|
|
||||||
color: #365d92;
|
|
||||||
}
|
|
||||||
.header {
|
|
||||||
background-color: #fff;
|
background-color: #fff;
|
||||||
padding: 26px 30px 32px;
|
|
||||||
.user-info {
|
.info-title {
|
||||||
display: flex;
|
padding-left: 32px;
|
||||||
margin-bottom: 32px;
|
line-height: 108px;
|
||||||
.user-name-bg {
|
font-size: 32px;
|
||||||
width: 64px;
|
font-family: PingFangSC-Semibold, PingFang SC;
|
||||||
height: 64px;
|
font-weight: 600;
|
||||||
line-height: 64px;
|
color: #333;
|
||||||
|
}
|
||||||
|
.tab-title {
|
||||||
|
line-height: 108px;
|
||||||
|
font-size: 32px;
|
||||||
|
font-family: PingFangSC-Semibold, PingFang SC;
|
||||||
|
font-weight: 600;
|
||||||
|
color: #333;
|
||||||
|
span {
|
||||||
|
display: inline-block;
|
||||||
|
width: 192px;
|
||||||
text-align: center;
|
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 {
|
.active {
|
||||||
div {
|
color: #3671ee;
|
||||||
font-size: 26px;
|
border-bottom: 4px solid #3671ee;
|
||||||
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 {
|
.status0 {
|
||||||
font-size: 26px;
|
background: #000;
|
||||||
font-family: PingFangSC-Regular, PingFang SC;
|
|
||||||
font-weight: 400;
|
|
||||||
color: #333;
|
|
||||||
line-height: 42px;
|
|
||||||
word-break: break-all;
|
|
||||||
}
|
}
|
||||||
.img-list {
|
.status1 {
|
||||||
margin-top: 16px;
|
background: #ff883c;
|
||||||
img {
|
|
||||||
width: 224px;
|
|
||||||
height: 224px;
|
|
||||||
margin-right: 8px;
|
|
||||||
}
|
|
||||||
img:nth-of-type(3n) {
|
|
||||||
margin-right: 0;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
.status3 {
|
||||||
.reply-list {
|
background: #1aaaff;
|
||||||
padding: 0 32px 112px;
|
}
|
||||||
.item {
|
.status2 {
|
||||||
display: flex;
|
background: #42d784;
|
||||||
padding: 32px 0;
|
}
|
||||||
border-bottom: 2px solid #eee;
|
.status4,
|
||||||
.user-img {
|
.status5 {
|
||||||
width: 96px;
|
background: #e4e4e4;
|
||||||
height: 96px;
|
}
|
||||||
margin-right: 24px;
|
.header-content {
|
||||||
|
padding-bottom: 150px;
|
||||||
|
.header-top {
|
||||||
|
width: 100%;
|
||||||
|
height: 440px;
|
||||||
img {
|
img {
|
||||||
width: 96px;
|
width: 100%;
|
||||||
height: 96px;
|
height: 100%;
|
||||||
border-radius: 50%;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.item-info {
|
|
||||||
width: calc(100% - 116px);
|
.header-middle {
|
||||||
}
|
padding: 32px 32px 0 32px;
|
||||||
.user-info {
|
|
||||||
display: flex;
|
.img-title {
|
||||||
justify-content: space-between;
|
font-size: 36px;
|
||||||
margin-bottom: 10px;
|
font-weight: 600;
|
||||||
.user-name {
|
|
||||||
font-size: 30px;
|
|
||||||
font-family: PingFangSC-Medium, PingFang SC;
|
|
||||||
font-weight: 500;
|
|
||||||
color: #365d92;
|
|
||||||
line-height: 42px;
|
|
||||||
}
|
}
|
||||||
.time {
|
|
||||||
font-size: 22px;
|
.header-middle-bottom {
|
||||||
font-family: PingFangSC-Regular, PingFang SC;
|
display: flex;
|
||||||
font-weight: 400;
|
justify-content: space-between;
|
||||||
color: #999;
|
margin-top: 32px;
|
||||||
line-height: 42px;
|
.left {
|
||||||
|
.left-btn {
|
||||||
|
padding: 4px 8px;
|
||||||
|
border-radius: 8px;
|
||||||
|
|
||||||
|
font-size: 26px;
|
||||||
|
color: #ffffff;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.right {
|
||||||
|
img {
|
||||||
|
width: 40px;
|
||||||
|
height: 40px;
|
||||||
|
border-radius: 50%;
|
||||||
|
vertical-align: text-top;
|
||||||
|
margin-right: 8px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.cards {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
border-bottom: 2px solid #eee;
|
||||||
|
padding: 36px 0;
|
||||||
|
line-height: 40px;
|
||||||
|
font-size: 28px;
|
||||||
|
|
||||||
|
.cards-left {
|
||||||
|
color: #999;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cards-right {
|
||||||
|
color: #333;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.text {
|
|
||||||
font-size: 28px;
|
.header-bottom {
|
||||||
font-family: PingFangSC-Regular, PingFang SC;
|
background: #fff;
|
||||||
color: #333;
|
|
||||||
line-height: 40px;
|
.content-details {
|
||||||
word-break: break-all;
|
padding: 32px 32px 80px 32px;
|
||||||
|
.font {
|
||||||
|
margin-top: 32px;
|
||||||
|
font-size: 30px;
|
||||||
|
line-height: 1.5;
|
||||||
|
}
|
||||||
|
.font-img {
|
||||||
|
margin-top: 26px;
|
||||||
|
width: 100%;
|
||||||
|
height: 480px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.content-trends {
|
||||||
|
// padding-bottom: 40px;
|
||||||
|
.details {
|
||||||
|
.card {
|
||||||
|
padding: 26px 32px 28px 32px;
|
||||||
|
.card-nav {
|
||||||
|
display: flex;
|
||||||
|
.avatar {
|
||||||
|
width: 64px;
|
||||||
|
height: 64px;
|
||||||
|
line-height: 60px;
|
||||||
|
background: #4e8eee;
|
||||||
|
border-radius: 50%;
|
||||||
|
text-align: center;
|
||||||
|
|
||||||
|
font-size: 24px;
|
||||||
|
font-weight: 500;
|
||||||
|
color: #ffffff;
|
||||||
|
margin-right: 16px;
|
||||||
|
}
|
||||||
|
.right {
|
||||||
|
// display: inline;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
|
||||||
|
.name {
|
||||||
|
font-size: 26px;
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
.time {
|
||||||
|
font-size: 22px;
|
||||||
|
color: #999999;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-font {
|
||||||
|
margin-top: 36px;
|
||||||
|
line-height: 1.6;
|
||||||
|
text-overflow: -o-ellipsis-lastline;
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
display: -webkit-box;
|
||||||
|
-webkit-line-clamp: 2;
|
||||||
|
line-clamp: 2;
|
||||||
|
-webkit-box-orient: vertical;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-img {
|
||||||
|
margin-top: 16px;
|
||||||
|
img {
|
||||||
|
width: 224px;
|
||||||
|
height: 224px;
|
||||||
|
margin-right: 8px;
|
||||||
|
}
|
||||||
|
img:last-child {
|
||||||
|
margin-right: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-icon {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
margin-top: 28px;
|
||||||
|
div {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
span {
|
||||||
|
font-size: 24px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
::v-deep .emptyWrap {
|
||||||
|
// background-color: pink;
|
||||||
|
padding-bottom: 50px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.noDeatil {
|
||||||
|
background-color: #f3f6f9;
|
||||||
|
img {
|
||||||
|
width: 400px;
|
||||||
|
height: 240px;
|
||||||
|
transform: translate(50%, 25%);
|
||||||
|
padding-bottom: 156px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-bottom {
|
||||||
|
height: 20px;
|
||||||
|
background-color: #f3f6f9;
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
|
||||||
.reply-bottom {
|
.addicon {
|
||||||
position: fixed;
|
position: fixed;
|
||||||
bottom: 0;
|
bottom: 280px;
|
||||||
left: 0;
|
right: 30px;
|
||||||
width: 100%;
|
background: #fefefe;
|
||||||
height: 104px;
|
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
|
||||||
padding: 22px 30px 24px;
|
border-radius: 50%;
|
||||||
box-sizing: border-box;
|
padding: 26px 24px 22px 24px;
|
||||||
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 {
|
.btn {
|
||||||
|
position: fixed;
|
||||||
|
bottom: 0;
|
||||||
|
width: 100%;
|
||||||
|
// height: 112px;
|
||||||
|
background: #f3f6f9;
|
||||||
|
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
padding: 24px 0;
|
padding: 32px 0;
|
||||||
span {
|
text-align: center;
|
||||||
line-height: 64px;
|
.edit {
|
||||||
|
width: 254px;
|
||||||
|
height: 92px;
|
||||||
|
line-height: 92px;
|
||||||
|
background: #ffffff;
|
||||||
|
border-radius: 8px;
|
||||||
|
border: 2px solid #3671ee;
|
||||||
|
|
||||||
|
font-size: 34px;
|
||||||
|
font-weight: 500;
|
||||||
|
color: #3671ee;
|
||||||
|
margin-left: 32px;
|
||||||
}
|
}
|
||||||
.clear {
|
|
||||||
font-size: 26px;
|
.public {
|
||||||
font-family: PingFangSC-Regular, PingFang SC;
|
width: 400px;
|
||||||
color: #666;
|
|
||||||
|
line-height: 92px;
|
||||||
|
border-radius: 8px;
|
||||||
|
font-size: 34px;
|
||||||
|
font-weight: 500;
|
||||||
|
color: #ffffff;
|
||||||
|
margin-right: 32px;
|
||||||
}
|
}
|
||||||
.confirm {
|
|
||||||
width: 144px;
|
.max {
|
||||||
height: 64px;
|
margin: 0 auto;
|
||||||
text-align: center;
|
width: 686px;
|
||||||
background: #135ab8;
|
height: 92px;
|
||||||
border-radius: 32px;
|
line-height: 92px;
|
||||||
font-size: 28px;
|
background: #cbddf9;
|
||||||
font-family: PingFangSC-Regular, PingFang SC;
|
border-radius: 8px;
|
||||||
color: #fff;
|
|
||||||
|
font-size: 34px;
|
||||||
|
font-weight: 500;
|
||||||
|
color: #ffffff;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -126,8 +126,8 @@
|
|||||||
import { mapState } from 'vuex'
|
import { mapState } from 'vuex'
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: 'AppActive',
|
name: 'AppActive',
|
||||||
appName: '居民活动',
|
appName: '居民议事',
|
||||||
components: {},
|
components: {},
|
||||||
computed: {
|
computed: {
|
||||||
...mapState(['user']),
|
...mapState(['user']),
|
||||||
|
|||||||
323
src/apps/AppResidentActivitie/Add.vue
Normal file
323
src/apps/AppResidentActivitie/Add.vue
Normal file
@@ -0,0 +1,323 @@
|
|||||||
|
<template>
|
||||||
|
<div class="add">
|
||||||
|
<div class="header-description">
|
||||||
|
<u-form :model="forms" ref="uForm" label-width="auto" :border-bottom="false">
|
||||||
|
<u-form-item label="标题" prop="title" required :border-bottom="false" class="titles" label-position="top">
|
||||||
|
<u-input v-model="forms.title" placeholder="请输入标题(30字以内)" type="textarea" auto-height height="60" maxlength="30" />
|
||||||
|
</u-form-item>
|
||||||
|
|
||||||
|
<u-form-item label="活动详情" prop="content" required :border-bottom="false" label-position="top" class="contents">
|
||||||
|
<u-input v-model="forms.content" placeholder="请输入活动详情(500字以内)" type="textarea" auto-height height="100" maxlength="500" />
|
||||||
|
</u-form-item>
|
||||||
|
|
||||||
|
<div class="line"></div>
|
||||||
|
|
||||||
|
<u-form-item label="活动封面图" prop="fileIds" required :border-bottom="false" class="avatars" label-position="top">
|
||||||
|
<AiUploader :def.sync="forms.fileIds" multiple placeholder="上传图片" :limit="9"></AiUploader>
|
||||||
|
</u-form-item>
|
||||||
|
|
||||||
|
<div class="line"></div>
|
||||||
|
|
||||||
|
<u-form-item label="活动类型" prop="status" required :border-bottom="false" right-icon="arrow-right">
|
||||||
|
<u-input v-model="forms.status" disabled placeholder="请选择活动类型" @click="showStstus = true" />
|
||||||
|
|
||||||
|
<u-select v-model="showStstus" :list="$dict.getDict('realityStatus')" value-name="dictValue" label-name="dictName" @confirm="selectStatus"></u-select>
|
||||||
|
</u-form-item>
|
||||||
|
|
||||||
|
<u-form-item label="报名范围" prop="fanwe" required :border-bottom="false" right-icon="arrow-right">
|
||||||
|
<u-input v-model="forms.fanwe" disabled placeholder="请选择报名范围" @click="showStstus = true" />
|
||||||
|
|
||||||
|
<u-select v-model="showStstus" :list="$dict.getDict('realityStatus')" value-name="dictValue" label-name="dictName" @confirm="selectStatus"></u-select>
|
||||||
|
</u-form-item>
|
||||||
|
|
||||||
|
<u-form-item label="活动名额" prop="nums" required :border-bottom="false">
|
||||||
|
<u-input v-model="forms.nums" type="number" placeholder="如不限制人数，填写0" />
|
||||||
|
</u-form-item>
|
||||||
|
|
||||||
|
<div class="line"></div>
|
||||||
|
|
||||||
|
<u-form-item label="开始时间" prop="startTime" required :border-bottom="false" right-icon="arrow-right">
|
||||||
|
<u-input v-model="forms.startTime" placeholder="请选择开始时间" @click="showStartTime = true" />
|
||||||
|
|
||||||
|
<u-picker mode="time" :params="params" v-model="showStartTime" @confirm="confirm"></u-picker>
|
||||||
|
</u-form-item>
|
||||||
|
|
||||||
|
<u-form-item label="结束时间" prop="endTime" required :border-bottom="false" right-icon="arrow-right">
|
||||||
|
<u-input v-model="forms.endTime" placeholder="请选择结束时间" @click="showEndTime = true" />
|
||||||
|
|
||||||
|
<u-picker mode="time" :params="params" v-model="showEndTime" @confirm="confirm"></u-picker>
|
||||||
|
</u-form-item>
|
||||||
|
|
||||||
|
<u-form-item label="报名截止时间" prop="deadTime" required :border-bottom="false" right-icon="arrow-right">
|
||||||
|
<u-input v-model="forms.deadTime" placeholder="请选择报名截止时间" @click="showDeadTime = true" />
|
||||||
|
|
||||||
|
<u-picker mode="time" :params="params" v-model="showDeadTime" @confirm="confirm"></u-picker>
|
||||||
|
</u-form-item>
|
||||||
|
|
||||||
|
<u-form-item label="活动地点" prop="areaNmae" required :border-bottom="false" label-position="top" class="areaNmaes">
|
||||||
|
<u-input v-model="forms.areaNmae" placeholder="请输入活动地点" type="textarea" auto-height height="70" />
|
||||||
|
</u-form-item>
|
||||||
|
|
||||||
|
<div class="line"></div>
|
||||||
|
|
||||||
|
<u-form-item label="联系人" prop="people" required :border-bottom="false">
|
||||||
|
<u-input v-model="forms.people" placeholder="请输入联系人" maxlength="30" />
|
||||||
|
</u-form-item>
|
||||||
|
|
||||||
|
<u-form-item label="联系方式" prop="phone" required :border-bottom="false">
|
||||||
|
<u-input v-model="forms.phone" placeholder="请输入联系方式" maxlength="16" />
|
||||||
|
</u-form-item>
|
||||||
|
</u-form>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="btn" @click="submit">保存</div>
|
||||||
|
|
||||||
|
<AiBack></AiBack>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import { mapState } from 'vuex'
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: 'Add',
|
||||||
|
components: {},
|
||||||
|
props: {},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
id: '',
|
||||||
|
forms: {
|
||||||
|
title: '',
|
||||||
|
content: '',
|
||||||
|
fileIds: [],
|
||||||
|
status: '',
|
||||||
|
statusValue: '',
|
||||||
|
|
||||||
|
fanwe: '',
|
||||||
|
nums: '',
|
||||||
|
startTime: '',
|
||||||
|
endTime: '',
|
||||||
|
|
||||||
|
deadTime: '',
|
||||||
|
areaNmae: '',
|
||||||
|
people: '',
|
||||||
|
phone: '',
|
||||||
|
},
|
||||||
|
showStstus: false,
|
||||||
|
showStartTime: false,
|
||||||
|
showEndTime: false,
|
||||||
|
showDeadTime: false,
|
||||||
|
flag: false,
|
||||||
|
params: {
|
||||||
|
year: true,
|
||||||
|
month: true,
|
||||||
|
day: true,
|
||||||
|
hour: true,
|
||||||
|
minute: true,
|
||||||
|
second: true,
|
||||||
|
timestamp: true,
|
||||||
|
},
|
||||||
|
id: '',
|
||||||
|
}
|
||||||
|
},
|
||||||
|
computed: { ...mapState(['user']) },
|
||||||
|
onLoad(o) {
|
||||||
|
console.log(o)
|
||||||
|
this.id = o.id
|
||||||
|
this.$dict.load('realityStatus').then(() => {
|
||||||
|
// this.getDetail()
|
||||||
|
})
|
||||||
|
},
|
||||||
|
|
||||||
|
mounted() {},
|
||||||
|
methods: {
|
||||||
|
// getDetail() {
|
||||||
|
// this.$http.post(`/app/appvisitvondolence/queryDetailById?id=${this.id}`).then((res) => {
|
||||||
|
// if (res?.data) {
|
||||||
|
// this.forms = res.data
|
||||||
|
// this.forms.statusValue = res.data.status
|
||||||
|
// this.forms.status = this.$dict.getLabel('realityStatus', res.data.status)
|
||||||
|
// if (res.data.images) {
|
||||||
|
// this.forms.images = JSON.parse(res.data.images || '[]')
|
||||||
|
// }
|
||||||
|
// }
|
||||||
|
// })
|
||||||
|
// },
|
||||||
|
|
||||||
|
submit() {
|
||||||
|
if (this.flag) return
|
||||||
|
|
||||||
|
this.$refs.uForm.validate((valid) => {
|
||||||
|
if (valid) {
|
||||||
|
if (!this.forms.title) {
|
||||||
|
return this.$u.toast('请输入标题')
|
||||||
|
}
|
||||||
|
if (!this.forms.content) {
|
||||||
|
return this.$u.toast('请输入活动详情')
|
||||||
|
}
|
||||||
|
if (this.forms.fileIds.length == 0) {
|
||||||
|
return this.$u.toast('请输入活动详情')
|
||||||
|
}
|
||||||
|
if (!this.forms.status) {
|
||||||
|
return this.$u.toast('请选择活动类型')
|
||||||
|
}
|
||||||
|
if (!this.forms.fanwe) {
|
||||||
|
return this.$u.toast('请选择报名范围')
|
||||||
|
}
|
||||||
|
if (!this.forms.nums) {
|
||||||
|
return this.$u.toast('请输入活动名额')
|
||||||
|
}
|
||||||
|
if (!this.forms.startTime) {
|
||||||
|
return this.$u.toast('请选择开始时间')
|
||||||
|
}
|
||||||
|
if (!this.forms.endTime) {
|
||||||
|
return this.$u.toast('请选择结束时间')
|
||||||
|
}
|
||||||
|
if (!this.forms.deadTime) {
|
||||||
|
return this.$u.toast('请选择报名截止时间')
|
||||||
|
}
|
||||||
|
if (!this.forms.areaNmae) {
|
||||||
|
return this.$u.toast('请输入活动地点')
|
||||||
|
}
|
||||||
|
if (!this.forms.people) {
|
||||||
|
return this.$u.toast('请输入联系人')
|
||||||
|
}
|
||||||
|
if (!this.forms.phone) {
|
||||||
|
return this.$u.toast('请输入联系方式')
|
||||||
|
}
|
||||||
|
|
||||||
|
const imgs = []
|
||||||
|
if (this.forms.fileIds) {
|
||||||
|
this.forms.fileIds.map((e) => {
|
||||||
|
imgs.push({ url: e.url, id: e.id })
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
this.flag = true
|
||||||
|
this.$http
|
||||||
|
.post(`/app/appvisitvondolence/addOrUpdate`, {
|
||||||
|
title: this.forms.title,
|
||||||
|
content: this.forms.content,
|
||||||
|
// images: JSON.stringify(imgs) || [],
|
||||||
|
images: imgs || [],
|
||||||
|
|
||||||
|
status: this.forms.statusValue ? this.forms.statusValue : this.forms.status,
|
||||||
|
fanwe: this.forms.fanwe,
|
||||||
|
nums: this.forms.fanumsnwe,
|
||||||
|
|
||||||
|
startTime: this.forms.startTime,
|
||||||
|
endTime: this.forms.endTime,
|
||||||
|
deadTime: this.forms.deadTime,
|
||||||
|
areaNmae: this.forms.areaNmae,
|
||||||
|
|
||||||
|
people: this.forms.people,
|
||||||
|
phone: this.forms.phone,
|
||||||
|
id: this.id,
|
||||||
|
})
|
||||||
|
.then((res) => {
|
||||||
|
if (res.code == 0) {
|
||||||
|
this.$u.toast('发布成功')
|
||||||
|
this.flag = false
|
||||||
|
uni.navigateTo({ url: `./AppActive` })
|
||||||
|
}
|
||||||
|
})
|
||||||
|
} else {
|
||||||
|
this.$u.toast('失败')
|
||||||
|
}
|
||||||
|
})
|
||||||
|
},
|
||||||
|
|
||||||
|
confirm(e) {
|
||||||
|
if (this.showStartTime == true) {
|
||||||
|
console.log(1, e.year + '-' + e.month + '-' + e.day + ' ' + e.hour + ':' + e.minute + ':' + e.second)
|
||||||
|
this.forms.startTime = e.year + '-' + e.month + '-' + e.day + ' ' + e.hour + ':' + e.minute + ':' + e.second
|
||||||
|
}
|
||||||
|
if (this.showEndTime == true) {
|
||||||
|
console.log(2, e.year + '-' + e.month + '-' + e.day + ' ' + e.hour + ':' + e.minute + ':' + e.second)
|
||||||
|
this.forms.endTime = e.year + '-' + e.month + '-' + e.day + ' ' + e.hour + ':' + e.minute + ':' + e.second
|
||||||
|
}
|
||||||
|
if (this.showDeadTime == true) {
|
||||||
|
console.log(3, e.year + '-' + e.month + '-' + e.day + ' ' + e.hour + ':' + e.minute + ':' + e.second)
|
||||||
|
this.forms.deadTime = e.year + '-' + e.month + '-' + e.day + ' ' + e.hour + ':' + e.minute + ':' + e.second
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
selectStatus(e) {
|
||||||
|
this.forms.status = e[0].label
|
||||||
|
this.forms.statusValue = e[0].value
|
||||||
|
},
|
||||||
|
},
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.add {
|
||||||
|
height: 100%;
|
||||||
|
padding-bottom: 112px;
|
||||||
|
|
||||||
|
.header-description {
|
||||||
|
::v-deep .u-form {
|
||||||
|
.u-form-item {
|
||||||
|
padding: 0 45px !important;
|
||||||
|
.u-form-item__body {
|
||||||
|
.u-form-item--right__content__slot {
|
||||||
|
padding-bottom: 0;
|
||||||
|
.u-input {
|
||||||
|
text-align: right !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.u-form-item:last-child {
|
||||||
|
margin-bottom: 40px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.titles,
|
||||||
|
.contents,
|
||||||
|
.areaNmaes {
|
||||||
|
.u-form-item__body {
|
||||||
|
.u-form-item--right__content__slot {
|
||||||
|
.u-input {
|
||||||
|
text-align: left !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.avatars,
|
||||||
|
.areaNmaes,
|
||||||
|
.contents {
|
||||||
|
padding-bottom: 20px !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.avatars {
|
||||||
|
.u-form-item__body {
|
||||||
|
.default {
|
||||||
|
width: 160px;
|
||||||
|
height: 160px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.line {
|
||||||
|
height: 16px;
|
||||||
|
background: #f3f6f9;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
194
src/apps/AppResidentActivitie/AppResidentActivities.vue
Normal file
194
src/apps/AppResidentActivitie/AppResidentActivities.vue
Normal file
@@ -0,0 +1,194 @@
|
|||||||
|
<template>
|
||||||
|
<div class="AppActive">
|
||||||
|
<u-tabs :list="tabList" :is-scroll="false" :current="currentTabs" height="96" bg-color="#3975C6" inactive-color="#fff" active-color="#fff" @change="change"></u-tabs>
|
||||||
|
|
||||||
|
<div class="dataTop">
|
||||||
|
<div class="dataLeft">活动列表</div>
|
||||||
|
|
||||||
|
<div class="dataRight">
|
||||||
|
<span>共</span>
|
||||||
|
<span class="specialColor">12</span>
|
||||||
|
<span>个活动</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<template v-if="datas.length < 1">
|
||||||
|
<AiCard v-for="(item, i) in 6" :key="i" @click.native="toDetail(item, 1)">
|
||||||
|
<template #custom>
|
||||||
|
<div class="left">
|
||||||
|
<div class="titles">【敬老爱幼】带你在洞庭湖兜兜风 寻觅江豚的身影</div>
|
||||||
|
|
||||||
|
<div class="nums">
|
||||||
|
<span class="specialColor">6人</span>
|
||||||
|
<span>已报名</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="times">
|
||||||
|
<span class="timesCont">2021-12-16</span>
|
||||||
|
|
||||||
|
<span>| 2天</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="areaNmae">湖南省岳阳市岳阳县荣家湾镇六…湖南省岳阳市岳阳县荣家湾镇六…</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<img src="./yan.jpg" alt="" />
|
||||||
|
</template>
|
||||||
|
</AiCard>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<AiFixedBtn>
|
||||||
|
<div class="addBtn iconfont iconfont-iconfangda" @tap.stop="toAdd()" />
|
||||||
|
</AiFixedBtn>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name: 'AppResidentActivities',
|
||||||
|
appName: '居民活动',
|
||||||
|
components: {},
|
||||||
|
props: {},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
datas: [],
|
||||||
|
tabList: [
|
||||||
|
{
|
||||||
|
name: '全部活动',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '我发布的',
|
||||||
|
},
|
||||||
|
],
|
||||||
|
currentTabs: 0,
|
||||||
|
current: 1,
|
||||||
|
}
|
||||||
|
},
|
||||||
|
computed: {},
|
||||||
|
watch: {},
|
||||||
|
onLoad() {
|
||||||
|
this.getList()
|
||||||
|
},
|
||||||
|
mounted() {},
|
||||||
|
methods: {
|
||||||
|
getList() {},
|
||||||
|
|
||||||
|
change(index) {
|
||||||
|
this.currentTabs = index
|
||||||
|
this.getList()
|
||||||
|
},
|
||||||
|
|
||||||
|
toAdd() {
|
||||||
|
uni.navigateTo({ url: `./Add` })
|
||||||
|
},
|
||||||
|
|
||||||
|
toDetail(item) {
|
||||||
|
uni.navigateTo({ url: `./Detail` })
|
||||||
|
// uni.navigateTo({ url: `./Detail?id=${item.id}` })
|
||||||
|
},
|
||||||
|
},
|
||||||
|
onReachBottom() {
|
||||||
|
this.current = this.current + 1
|
||||||
|
this.getList()
|
||||||
|
},
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped lang="scss">
|
||||||
|
uni-page-body {
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
.AppActive {
|
||||||
|
height: 100%;
|
||||||
|
background: #f3f6f9;
|
||||||
|
|
||||||
|
.dataTop {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
margin-top: 48px;
|
||||||
|
margin-bottom: 8px;
|
||||||
|
padding: 0 32px;
|
||||||
|
.dataLeft {
|
||||||
|
font-size: 38px;
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
.dataRight {
|
||||||
|
font-size: 28px;
|
||||||
|
color: #666666;
|
||||||
|
.specialColor {
|
||||||
|
color: #4181ff;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
::v-deep .AiCard {
|
||||||
|
background: #f3f6f9;
|
||||||
|
.start {
|
||||||
|
background: #fff;
|
||||||
|
padding: 32px;
|
||||||
|
border-radius: 16px;
|
||||||
|
.fill {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
// align-items: center;
|
||||||
|
.left {
|
||||||
|
width: calc(100% - 205px);
|
||||||
|
// background: pink;
|
||||||
|
.titles {
|
||||||
|
margin-bottom: 8px;
|
||||||
|
color: #333333;
|
||||||
|
font-weight: 500;
|
||||||
|
font-size: 30px;
|
||||||
|
line-height: 1.3;
|
||||||
|
word-break: break-all;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
display: -webkit-box;
|
||||||
|
-webkit-box-orient: vertical;
|
||||||
|
-webkit-line-clamp: 2;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
.nums {
|
||||||
|
.specialColor {
|
||||||
|
color: #4181ff;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.times {
|
||||||
|
.timesCont {
|
||||||
|
margin-right: 10px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.areaNmae {
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
img {
|
||||||
|
width: 182px;
|
||||||
|
height: 182px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.AiFixedBtn {
|
||||||
|
.movableArea {
|
||||||
|
.addBtn {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
width: 96px;
|
||||||
|
height: 96px;
|
||||||
|
flex-shrink: 0;
|
||||||
|
background: $uni-color-primary;
|
||||||
|
box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
|
||||||
|
font-size: 48px;
|
||||||
|
background: #fff;
|
||||||
|
color: #1365dd;
|
||||||
|
border-radius: 50%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
25
src/apps/AppResidentActivitie/Detail.vue
Normal file
25
src/apps/AppResidentActivitie/Detail.vue
Normal file
@@ -0,0 +1,25 @@
|
|||||||
|
<template>
|
||||||
|
<div class="Detail">Detail</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name: 'Detail',
|
||||||
|
components: {},
|
||||||
|
props: {},
|
||||||
|
data() {
|
||||||
|
return {}
|
||||||
|
},
|
||||||
|
computed: {},
|
||||||
|
watch: {},
|
||||||
|
created() {},
|
||||||
|
mounted() {},
|
||||||
|
methods: {},
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped lang="scss">
|
||||||
|
.Detail {
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
BIN
src/apps/AppResidentActivitie/yan.jpg
Normal file
BIN
src/apps/AppResidentActivitie/yan.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 88 KiB |
Reference in New Issue
Block a user