<template>
|
<div>
|
<el-tabs type="border-card" v-model="activeName" class="drawer-tabs pt16">
|
<el-tab-pane label="活动信息" name="detail">
|
<div class="section">
|
<div class="common-form" v-if="!is_edit">活动信息</div>
|
<div class="table-wrap" v-if="!is_edit">
|
<el-row>
|
<el-col :span="12">
|
<div class="pb16 d-s-c">
|
<div class="gray9 item-title">活动标题：</div>
|
<span>{{ detailData.name }}</span>
|
</div>
|
</el-col>
|
<el-col :span="12">
|
<div class="pb16 d-s-c">
|
<div class="gray9 item-title">所属连盟：</div>
|
<span v-if="detailData.branch">{{ detailData.branch.name }}</span>
|
</div>
|
</el-col>
|
<el-col :span="12">
|
<div class="pb16 d-s-c">
|
<div class="gray9 item-title">活动分类：</div>
|
<span v-if="detailData.category">{{ detailData.category.name }}</span>
|
</div>
|
</el-col>
|
<el-col :span="12">
|
<div class="pb16 d-s-c">
|
<div class="gray9 item-title">是否显示：</div>
|
<span>{{ detailData.status ? '显示' : '不显示' }}</span>
|
</div>
|
</el-col>
|
<el-col :span="12">
|
<div class="pb16 d-s-c">
|
<div class="gray9 item-title">报名时间：</div>
|
<span>{{ detailData.register_time_text }}</span>
|
</div>
|
</el-col>
|
<el-col :span="12">
|
<div class="pb16 d-s-c">
|
<div class="gray9 item-title">活动时间：</div>
|
<span>{{ detailData.activity_time_text }}</span>
|
</div>
|
</el-col>
|
<el-col :span="24">
|
<div class="pb16 d-s-s">
|
<div class="gray9 item-title">活动简介：</div>
|
<span class="flex-1">{{ detailData.describe }}</span>
|
</div>
|
</el-col>
|
<el-col :span="12">
|
<div class="pb16 d-s-s">
|
<div class="gray9 item-title">封面图：</div>
|
<span class="flex-1" v-if="detailData.image">
|
<img v-img-url="detailData.image.file_path" height="100" />
|
</span>
|
</div>
|
</el-col>
|
<el-col :span="12">
|
<div class="pb16 d-s-s">
|
<div class="gray9 item-title">分享海报：</div>
|
<span class="flex-1" v-if="detailData.pic">
|
<el-image :src="detailData.pic.file_path" title="点击可预览" style="height:100px" :preview-src-list="[detailData.pic.file_path]" ></el-image>
|
</span>
|
</div>
|
</el-col>
|
<el-col :span="12">
|
<div class="pb16 d-s-s">
|
<div class="gray9 item-title">活动地址：</div>
|
<span class="flex-1">{{ detailData.address }}</span>
|
</div>
|
</el-col>
|
<el-col :span="12">
|
<div class="pb16 d-s-s">
|
<div class="gray9 item-title">联系电话：</div>
|
<span class="flex-1">{{ detailData.phone }}</span>
|
</div>
|
</el-col>
|
<el-col :span="12">
|
<div class="pb16 d-s-s">
|
<div class="gray9 item-title">是否走访企业：</div>
|
<span class="flex-1">{{ detailData.is_visit ? '是' : '否' }}</span>
|
</div>
|
</el-col>
|
<el-col :span="12" v-if="detailData.is_visit">
|
<div class="pb16 d-s-s">
|
<div class="gray9 item-title">走访企业对象：</div>
|
<span class="flex-1">{{ detailData.visit_supplier_id ? detailData.visitSupplier.name : '' }}</span>
|
</div>
|
</el-col>
|
<el-col :span="12" v-else>
|
<div class="pb16 d-s-s">
|
<div class="gray9 item-title">提供场地企业：</div>
|
<span class="flex-1">{{ detailData.space_supplier_id ? detailData.spaceSupplier.name : '无' }}</span>
|
</div>
|
</el-col>
|
<el-col :span="12">
|
<div class="pb16 d-s-s">
|
<div class="gray9 item-title">页面背景色：</div>
|
<div class="color-show-box">
|
<div :style="'background:'+detailData.background_color"></div>
|
</div>
|
</div>
|
</el-col>
|
<el-col :span="12">
|
<div class="pb16 d-s-c">
|
<div class="gray9 item-title">排序：</div>
|
<span>{{ detailData.sort }}</span>
|
</div>
|
</el-col>
|
<el-col :span="24">
|
<div class="pb16 d-s-s">
|
<div class="gray9 item-title">活动内容：</div>
|
<div class="flex-1" v-html="detailData.content"></div>
|
</div>
|
</el-col>
|
</el-row>
|
</div>
|
<div v-else>
|
<Edit ref="editForm" :form="detailData" :category="category" @success="success"></Edit>
|
</div>
|
</div>
|
</el-tab-pane>
|
<el-tab-pane label="报名统计" name="user" v-if="!is_edit">
|
<User ref="userStatistics" :activity_id="activity_id"></User>
|
</el-tab-pane>
|
<el-tab-pane label="活动相册" name="pic" v-if="!is_edit">
|
<Pic ref="activityPic" :activity_id="activity_id"></Pic>
|
</el-tab-pane>
|
<el-tab-pane label="活动视频" name="video" v-if="!is_edit">
|
<Video ref="activityVideo" :activity_id="activity_id"></Video>
|
</el-tab-pane>
|
</el-tabs>
|
|
</div>
|
</template>
|
|
<script>
|
import Edit from './edit.vue';
|
import User from './user.vue';
|
import Pic from './pic.vue';
|
import Video from './video.vue';
|
export default {
|
components: {
|
Edit,
|
User,
|
Pic,
|
Video,
|
},
|
data() {
|
return {
|
loading: true,
|
activeName: 'detail',
|
activity_id: '',
|
userForm: {
|
keyword: ""
|
}
|
};
|
},
|
props: ['is_edit', 'detailData', 'category', 'activity_id'],
|
|
methods: {
|
// 编辑成功回调
|
success(){
|
this.$emit('success')
|
},
|
|
onSubmit(id){
|
this.$refs.editForm.onSubmit(id);
|
},
|
|
setFormData() {
|
this.$nextTick(()=>{
|
this.activeName = 'detail';
|
this.$refs.editForm.formatData();
|
})
|
},
|
}
|
|
};
|
</script>
|
|
<style lang="scss" scoped>
|
.drawer-tabs {
|
border: 0;
|
box-shadow: none;
|
margin-left: -15px;
|
margin-right: -15px;
|
}
|
.drawer-tabs>.el-tabs__header .el-tabs__item.is-active:before {
|
content: "";
|
display: block;
|
width: 100%;
|
height: 2px;
|
background: #409EFF;
|
position: absolute;
|
top: 0;
|
left: 0
|
}
|
.item-title {
|
width: 90px;
|
text-align: right;
|
}
|
.color-show-box {
|
border: 1px solid #e6e6e6;
|
border-radius: 3px;
|
padding: 3px;
|
}
|
.color-show-box > div {
|
width: 25px;
|
height: 25px;
|
border-radius: 2px;
|
}
|
</style>
|
