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 13:44:06 +08:00
parent a48554d9f9
commit 6009ba8ae3
1 changed files with 594 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

606
src/apps/AppResidentActivitie/Detail.vue
View File

@@ -1,25 +1,607 @@
<template>
<div class="Detail">Detail</div>
<div class="page">
<div class="header-content">
<div class="header-top">
<img :src="detail.url" alt="" />
</div>
<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>
<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="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>
</div>
</template>
<script>
import { mapState } from 'vuex'
export default {
name: 'Detail',
components: {},
props: {},
data() {
return {}
computed: {
...mapState(['user']),
},
data() {
return {
id: '',
detail: {},
activeList: [],
imgList: [],
list: [
{
name: '活动详情',
},
{
name: '活动动态',
},
],
current: 0,
}
},
onLoad(option) {
this.id = option.id
this.$dict.load(['newActivityStatus']).then(() => {
this.getDetail()
})
},
methods: {
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 (this.activeList) {
let imagesList = []
this.activeList.map((item) => {
if (item.images) {
item.images = JSON.parse(item.images || '[]')
imagesList.push(item.images)
}
return item
})
this.imgList = imagesList
}
}
})
},
change(index) {
this.current = index
},
toPublicPage() {
uni.navigateTo({
url: `./AddPosts?id=${this.id}`,
})
},
editActive() {
uni.navigateTo({ url: `./Add?id=${this.id}` })
},
changeStatus(status, text) {
uni.showModal({
title: '提示',
content: `${text}`,
confirmText: '确定',
success: (e) => {
if (status == 1) {
//发布
this.changeStatusConfirm(status)
}
if (status == 2) {
//报名
this.report()
}
if (status == 3) {
//取消报名
this.cancelReport()
}
},
})
},
cancelReport() {
this.$instance
.post(`/app/appactivityuser/removeReport`, {
activityId: this.id,
partyId: this.user.partyId,
})
.then((res) => {
if (res.code == 0) {
this.$toast('提交成功')
this.getDetail()
}
})
},
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({
urls: images.map((v) => v.url),
current: img,
})
},
},
computed: {},
watch: {},
created() {},
mounted() {},
methods: {},
}
</script>
<style scoped lang="scss">
.Detail {
.page {
width: 100%;
height: 100%;
background-color: #fff;
.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;
}
.active {
color: #3671ee;
border-bottom: 4px solid #3671ee;
}
}
.status0 {
background: #000;
}
.status1 {
background: #ff883c;
}
.status3 {
background: #1aaaff;
}
.status2 {
background: #42d784;
}
.status4,
.status5 {
background: #e4e4e4;
}
.header-content {
padding-bottom: 150px;
.header-top {
width: 100%;
height: 440px;
img {
width: 100%;
height: 100%;
}
}
.header-middle {
padding: 32px 32px 0 32px;
.img-title {
font-size: 36px;
font-weight: 600;
}
.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;
}
}
}
.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;
}
}
}
}
.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: 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;
}
.public {
width: 400px;
line-height: 92px;
border-radius: 8px;
font-size: 34px;
font-weight: 500;
color: #ffffff;
margin-right: 32px;
}
.max {
margin: 0 auto;
width: 686px;
height: 92px;
line-height: 92px;
background: #cbddf9;
border-radius: 8px;
font-size: 34px;
font-weight: 500;
color: #ffffff;
}
}
}
</style>