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:
花有清香月有阴
2021-12-17 11:55:28 +08:00
parent 65bcb8bc7c
commit a48554d9f9
6 changed files with 1070 additions and 312 deletions
Download Patch File Download Diff File Expand all files Collapse all files

836
src/apps/AppActive/ActiveDetail.vue
View File

@@ -1,52 +1,149 @@
<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 class="page">
<div class="header-content">
<div class="header-top">
<img :src="detail.url" alt="" />
</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 class="header-middle">
<div class="img-title">{{ detail.title }}</div>
<div class="header-middle-bottom">
<div class="left">
<div class="left-btn" :class="'status' + detail.status">{{ $dict.getLabel('newActivityStatus', detail.status) }}</div>
</div>
<p class="text">
<span v-if="item.lastReplyName"
>回复<span class="color-365D92">{{ item.lastReplyName }}</span></span
>{{ item.content }}
</p>
<div class="right">
<img :src="detail.avatar" alt="" />
<span>{{ detail.createUserName }}</span>
</div>
</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">&#xe69d;</i>
<span>{{ item.viewNum ? item.viewNum : 0 }}</span>
</div>
<div>
<i class="iconfont">&#xe6a2;</i>
<span>{{ item.replyNum ? item.replyNum : 0 }}</span>
</div>
<div>
<i class="iconfont">&#xe698;</i>
<span>{{ item.supportNum ? item.supportNum : 0 }}</span>
</div>
</div>
</div>
<div class="card-bottom"></div>
</div>
<AiEmpty v-else />
</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>&#xe698;</i>赞 -->
</div>
<div class="addicon" @click="toPublicPage()">
<u-icon name="plus" color="#1365DD" size="50"></u-icon>
</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>
<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>
@@ -60,130 +157,156 @@ export default {
},
data() {
return {
info: {},
pageShow: false,
id: '',
supportFlag: true,
showReply: false,
content: '',
lastReplyId: '',
lastReplyName: '',
detail: {},
activeList: [],
imgList: [],
list: [
{
name: '活动详情',
},
{
name: '活动动态',
},
],
current: 0,
}
},
onLoad(query) {
this.id = query.id
this.getInfo()
uni.$emit('refresh')
onLoad(option) {
this.id = option.id
this.$dict.load(['newActivityStatus']).then(() => {
this.getDetail()
})
},
methods: {
getInfo() {
this.$loading()
this.$http.post(`/app/apppostinfo/queryDetailById?id=${this.id}`).then((res) => {
if (res.code === 0) {
this.info = res.data
getDetail() {
this.$instance.post(`/app/appactivityinfo/queryDetailById?id=${this.id}&partyId=${this.user.partyId}`).then((res) => {
if (res?.data) {
res.data.beginTime = res.data.beginTime.substring(0, 16)
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) {
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
if (this.activeList) {
let imagesList = []
this.activeList.map((item) => {
if (item.images) {
item.images = JSON.parse(item.images || '[]')
imagesList.push(item.images)
}
}
})
}
},
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()
return item
})
this.imgList = imagesList
}
}
})
},
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({
title: '提示',
content: `是否回复${e.createUserName}的评论？`,
content: `${text}`,
confirmText: '确定',
success: (res) => {
if (res.confirm) {
uni.$emit('refresh')
this.showReply = true
this.lastReplyId = e.id
this.lastReplyName = e.createUserName
success: (e) => {
if (status == 1) {
//发布
this.changeStatusConfirm(status)
}
if (status == 2) {
//报名
this.report()
}
if (status == 3) {
//取消报名
this.cancelReport()
}
},
})
},
del() {
uni.showModal({
title: '提示',
content: `是否删除该帖子？`,
confirmText: '确定',
success: (res) => {
if (res.confirm) {
this.confirmDel()
cancelReport() {
this.$instance
.post(`/app/appactivityuser/removeReport`, {
activityId: this.id,
partyId: this.user.partyId,
})
.then((res) => {
if (res.code == 0) {
this.$toast('提交成功')
this.getDetail()
}
},
})
})
},
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)
}
})
changeStatusConfirm(status) {
this.$instance
.post(`/app/appactivityinfo/changeStatus`, {
id: this.id,
status: status,
})
.then((res) => {
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) {
uni.previewImage({
@@ -194,193 +317,286 @@ export default {
},
}
</script>
<style lang="scss" scoped>
<style scoped lang="scss">
.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;
.info-title {
padding-left: 32px;
line-height: 108px;
font-size: 32px;
font-family: PingFangSC-Semibold, PingFang SC;
font-weight: 600;
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;
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;
}
.active {
color: #3671ee;
border-bottom: 4px solid #3671ee;
}
}
.text-content {
font-size: 26px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #333;
line-height: 42px;
word-break: break-all;
.status0 {
background: #000;
}
.img-list {
margin-top: 16px;
img {
width: 224px;
height: 224px;
margin-right: 8px;
}
img:nth-of-type(3n) {
margin-right: 0;
}
.status1 {
background: #ff883c;
}
}
.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;
.status3 {
background: #1aaaff;
}
.status2 {
background: #42d784;
}
.status4,
.status5 {
background: #e4e4e4;
}
.header-content {
padding-bottom: 150px;
.header-top {
width: 100%;
height: 440px;
img {
width: 96px;
height: 96px;
border-radius: 50%;
width: 100%;
height: 100%;
}
}
.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;
.header-middle {
padding: 32px 32px 0 32px;
.img-title {
font-size: 36px;
font-weight: 600;
}
.time {
font-size: 22px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #999;
line-height: 42px;
.header-middle-bottom {
display: flex;
justify-content: space-between;
margin-top: 32px;
.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;
font-family: PingFangSC-Regular, PingFang SC;
color: #333;
line-height: 40px;
word-break: break-all;
.header-bottom {
background: #fff;
.content-details {
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 {
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;
.addicon {
position: fixed;
bottom: 280px;
right: 30px;
background: #fefefe;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
border-radius: 50%;
padding: 26px 24px 22px 24px;
}
.btn {
position: fixed;
bottom: 0;
width: 100%;
// height: 112px;
background: #f3f6f9;
display: flex;
justify-content: space-between;
padding: 24px 0;
span {
line-height: 64px;
padding: 32px 0;
text-align: center;
.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;
font-family: PingFangSC-Regular, PingFang SC;
color: #666;
.public {
width: 400px;
line-height: 92px;
border-radius: 8px;
font-size: 34px;
font-weight: 500;
color: #ffffff;
margin-right: 32px;
}
.confirm {
width: 144px;
height: 64px;
text-align: center;
background: #135ab8;
border-radius: 32px;
font-size: 28px;
font-family: PingFangSC-Regular, PingFang SC;
color: #fff;
.max {
margin: 0 auto;
width: 686px;
height: 92px;
line-height: 92px;
background: #cbddf9;
border-radius: 8px;
font-size: 34px;
font-weight: 500;
color: #ffffff;
}
}
}

4
src/apps/AppActive/AppActive.vue
View File

@@ -126,8 +126,8 @@
import { mapState } from 'vuex'
export default {
name: 'AppActive',
appName: '居民活动',
name: 'AppActive',
appName: '居民议事',
components: {},
computed: {
...mapState(['user']),

323
src/apps/AppResidentActivitie/Add.vue Normal file
View 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
View 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
View 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
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 88 KiB