<template>
|
<div class="act_detail">
|
<v-header title="活动详情"></v-header>
|
<v-tool-scroll
|
class="content"
|
ids="act-detail-scroll"
|
:up="pageType"
|
@next="morePage"
|
>
|
<div class="fm w_row clearfix">
|
<p class="w_col_24">活动名称：{{ detail.activityName }}</p>
|
<!-- <p class="w_col_8">活动负责人：{{detail.sponsorName}}</p> -->
|
<p class="w_col_16">创建时间：{{ detail.createAt }}</p>
|
<p class="w_col_8">活动地点：{{ detail.activityAddr }}</p>
|
<p class="w_col_16">状态：{{ isStatus(+detail.status - 1) }}</p>
|
<p class="w_col_8">报名人数: {{ detail.participantNow }}</p>
|
<!-- <p class="w_col_16">志愿者人数: {{ detail.volunteerNow }}</p> -->
|
<p class="w_col_8">
|
报名人数区间：{{ detail.participantMin }}~{{
|
detail.participantMax >= 0 ? detail.participantMax : "无限"
|
}}
|
</p>
|
<!-- <p class="w_col_16">
|
志愿者人数区间：{{ detail.volunteerMin }}~{{
|
detail.volunteerMax >= 0 ? detail.volunteerMax : "无限"
|
}}
|
</p> -->
|
<p class="w_col_8">
|
首页展示广告：{{ detail.isTop === 1 ? "是" : "否" }}
|
</p>
|
<p class="w_col_8">
|
扫描二维码签到：{{ detail.isQrCode === 1 ? "是" : "否" }}
|
</p>
|
<p class="w_col_8">联系人姓名：{{ detail.contactName }}</p>
|
<p class="w_col_8">联系人电话：{{ detail.contactPhone }}</p>
|
<p class="w_col_8">报名时间：{{ detail.signUpBegin }}~{{ detail.signUpEnd }}</p>
|
<p class="w_col_16">
|
活动时间：{{ detail.beginAt }}~{{ detail.endAt }}
|
</p>
|
<p class="w_col_24">
|
报名情况：<b class="col_primary curp" @click="onDetail">点击查看</b>
|
</p>
|
<!-- <p class="w_col_24">志愿者活动积分：</p> -->
|
<section class="w_col_24">
|
<p>活动封面：</p>
|
<img
|
:src="detail.cover"
|
@click="onScaleUploadImage"
|
alt=""
|
class="avatar"
|
/>
|
</section>
|
<section
|
class="w_col_24 fs"
|
v-if="
|
detail.comActActPrizeVOList && detail.comActActPrizeVOList.length
|
"
|
>
|
<p>活动奖品：</p>
|
<article
|
v-for="(i, j) in detail.comActActPrizeVOList"
|
:key="j + '-win'"
|
>
|
<img :src="i.prizePhoto" @click="onScaleUploadImage2(j)" alt="" /><b
|
>{{ i.prizeName }}</b
|
><span>{{ +i.type === 1 ? "(报名即有)" : "" }}</span>
|
</article>
|
</section>
|
<p
|
class="w_col_24"
|
v-if="
|
detail.comActActPrizeVOList && detail.comActActPrizeVOList.length
|
"
|
>
|
奖品备注：{{ detail.prizeRemark }}
|
</p>
|
<p
|
class="w_col_24"
|
v-if="
|
detail.comActActPrizeVOList && detail.comActActPrizeVOList.length
|
"
|
>
|
奖励说明：{{ detail.rewardDesc }}
|
</p>
|
<div class="w_col_24">
|
<p class="auto">活动内容：</p>
|
<div class="ql-snow">
|
<div class="ql-editor">
|
<div v-html="detail.content"></div>
|
</div>
|
</div>
|
</div>
|
</div>
|
<br />
|
<br />
|
<div class="comment-list-content">
|
<div
|
class="comment-row-box"
|
v-for="(item, index) in commentList"
|
:key="index"
|
>
|
<div class="fl-sb">
|
<div class="fl-al">
|
<img class="user-header" :src="item.imageUrl" />
|
<div class="fl-co">
|
<span class="fw-bold fz-12">{{ item.nickName }}</span>
|
<el-rate
|
class="mr-t-style"
|
v-model="item.starLevel"
|
disabled
|
></el-rate>
|
</div>
|
</div>
|
<span class="fc-999">{{ item.createAt }}</span>
|
</div>
|
<div class="mr-t-style" v-if="item.evaluateContent">
|
{{ item.evaluateContent }}
|
</div>
|
<div class="fl-fw">
|
<el-image
|
v-for="(i, ix) in item.photo"
|
:key="ix"
|
class="comment-img-list"
|
:src="i"
|
fit="cover"
|
:preview-src-list="item.photo"
|
>
|
</el-image>
|
</div>
|
</div>
|
</div>
|
<br />
|
</v-tool-scroll>
|
<div class="foot">
|
<el-button size="small" @click="$router.go(-1)">返回</el-button>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
export default {
|
props: {},
|
components: {},
|
data() {
|
return {
|
count: 0,
|
id: "",
|
detail: {},
|
value1: 3,
|
pageType: true,
|
more: 1,
|
pageNum: 1,
|
pageSize: 10,
|
commentList: [],
|
};
|
},
|
watch: {},
|
methods: {
|
onScaleUploadImage() {
|
this.$store.dispatch("setImage", {
|
time: Date.now(),
|
pic: this.detail.cover,
|
tool: true,
|
});
|
},
|
|
onScaleUploadImage2(j) {
|
this.$store.dispatch("setImage", {
|
time: Date.now(),
|
pic: this.detail.comActActPrizeVOList[j].prizePhoto,
|
tool: true,
|
});
|
},
|
|
onDetail() {
|
this.$router.push(this.$nav.url("/act_act_list/" + this.detail.id));
|
},
|
// 状态
|
isStatus(v) {
|
return (
|
["待发布", "未开始", "报名中", "进行中", "已结束", "已取消"][v] || ""
|
);
|
},
|
morePage() {
|
this.pageNum++;
|
this.init();
|
},
|
init() {
|
if (!this.id) {
|
demo.toast("失效详情");
|
return 0;
|
}
|
this.$api.get(
|
"communityactivity/detailactivity",
|
{ id: this.id, pageNum: this.pageNum, pageSize: this.pageSize },
|
(e) => {
|
if (e.comActActEvaluateVOList.length) {
|
this.pageType = true;
|
this.commentList = [
|
...this.commentList,
|
...e.comActActEvaluateVOList,
|
];
|
} else {
|
this.pageType = false;
|
}
|
this.commentList.forEach((item) => {
|
item.photo = item.photo ? item.photo.split(",") : [];
|
});
|
this.detail = e;
|
}
|
);
|
},
|
},
|
mounted() {
|
this.id = this.$route.params.id;
|
this.init();
|
},
|
};
|
</script>
|
<style lang='less' scoped>
|
.act_detail {
|
.content {
|
height: calc(~"100% - 90px");
|
}
|
.foot {
|
margin-top: 5px;
|
}
|
.fs {
|
p {
|
float: left;
|
height: 100%;
|
}
|
}
|
.curp {
|
cursor: pointer;
|
}
|
.fm {
|
p {
|
font-size: 14px;
|
line-height: 22px;
|
color: #000;
|
padding: 8px 0;
|
min-height: 38px;
|
&.auto {
|
min-height: 20px;
|
}
|
}
|
section {
|
padding: 8px 0;
|
display: flex;
|
flex-wrap: wrap;
|
img {
|
width: 175px;
|
height: 97px;
|
margin: 5px;
|
background-color: #eee;
|
display: block;
|
border-radius: 3px;
|
cursor: pointer;
|
&.avatar {
|
width: 300px;
|
height: 170px;
|
}
|
& + b {
|
text-align: center;
|
font-size: 12px;
|
margin: 5px 0;
|
display: block;
|
height: 12px;
|
& + span {
|
font-size: 12px;
|
text-align: center;
|
font-size: 12px;
|
display: block;
|
height: 14px;
|
}
|
}
|
}
|
}
|
}
|
}
|
.comment-list-content {
|
display: flex;
|
flex-direction: column;
|
}
|
.fl-f {
|
display: flex;
|
}
|
.fl-al {
|
display: flex;
|
align-items: center;
|
}
|
.fl-sb {
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
}
|
.fl-co {
|
display: flex;
|
flex-direction: column;
|
}
|
.fl-fw {
|
display: flex;
|
flex-wrap: wrap;
|
}
|
.user-header {
|
margin-right: 20px;
|
width: 80px;
|
height: 80px;
|
}
|
.comment-list-content {
|
width: 450px;
|
}
|
.fz-12 {
|
font-size: 24px;
|
}
|
.mr-t-style {
|
margin-top: 20px;
|
}
|
.comment-row-box {
|
margin-bottom: 20px;
|
padding-bottom: 20px;
|
border-bottom: 1px solid #dddada;
|
}
|
.comment-img-list {
|
margin-top: 20px;
|
margin-right: 10px;
|
width: 90px;
|
height: 90px;
|
}
|
.fc-999 {
|
color: #999;
|
}
|
.infinite-list-item {
|
display: flex;
|
align-items: center;
|
height: 50px;
|
}
|
</style>
|
