<template>
|
<div>
|
<el-drawer :visible.sync="drawerVisible" :with-header="false" @close="drawerClose(false)" :direction="direction" :destroy-on-close="true" size="1000px" custom-class="drawer-box">
|
<div class="detail-wrap" v-loading="loading">
|
<div class="detail-top-fixed d-b-c">
|
<div class="d-s-c">
|
<div>
|
<el-avatar shape="square" :size="50" icon="el-icon-s-shop"></el-avatar>
|
</div>
|
<div class="pl10">
|
<div class="f16 fb">{{ detailData.name }}</div>
|
<div class="gray6">活动ID：{{ detailData.activity_id }}</div>
|
</div>
|
</div>
|
<div>
|
<el-button size="small" @click="is_edit = false" v-if="is_edit">取消</el-button>
|
<el-button size="small" type="success" @click="onSubmit" v-if="is_edit">完成</el-button>
|
<el-button size="small" type="primary" @click="onEdit" v-else>编辑</el-button>
|
<el-button size="small" @click="drawerClose(false)">关闭</el-button>
|
<!-- <el-dropdown>
|
<el-button size="small">
|
<i class="el-icon-more"></i>
|
</el-button>
|
<el-dropdown-menu slot="dropdown">
|
<el-dropdown-item>修改管理员密码</el-dropdown-item>
|
</el-dropdown-menu>
|
</el-dropdown> -->
|
</div>
|
</div>
|
<div class="d-b-c" v-if="!loading">
|
<div>
|
<div class="gray9">报名状态</div>
|
<div>{{ detailData.status_text.reg_status_text }}</div>
|
</div>
|
<div>
|
<div class="gray9">活动状态</div>
|
<div>{{ detailData.status_text.status_text }}</div>
|
</div>
|
<div>
|
<div class="gray9">已报名人数</div>
|
<div>{{ detailData.total }}</div>
|
</div>
|
<div>
|
<div class="gray9">总名额</div>
|
<div>{{ detailData.limit_num || '不限制' }}</div>
|
</div>
|
<div>
|
<div class="gray9">活动费用</div>
|
<div>{{ detailData.fee }}</div>
|
</div>
|
<div>
|
<div class="gray9">创建时间</div>
|
<div>{{ detailData.create_time }}</div>
|
</div>
|
</div>
|
<Info ref="activityInfo" :is_edit="is_edit" :activity_id="activity_id" :category="category" @success="editSuccess" :detailData="detailData"></Info>
|
</div>
|
</el-drawer>
|
</div>
|
</template>
|
|
<script>
|
import BranchApi from '@/api/branch.js';
|
// import {formatModel} from '@/utils/base.js'
|
import User from './part/user.vue';
|
import Info from './part/info.vue';
|
export default {
|
components: {
|
User,
|
Info
|
},
|
data() {
|
return {
|
loading: true,
|
drawerVisible: false, // 抽屉是否显示
|
direction: 'rtl', // 抽屉呼出方向
|
activity_id: '',
|
detailData: {},
|
category: [],
|
is_edit: false,
|
};
|
},
|
props: ['open'],
|
watch:{
|
open:function(n, o){
|
this.drawerVisible = this.open;
|
}
|
},
|
|
methods: {
|
getDetail(activity_id, is_edit) {
|
let self = this;
|
self.activity_id = activity_id;
|
BranchApi.toEditActivity({activity_id: activity_id},true).then(res => {
|
self.detailData = res.data.model;
|
if (!self.detailData.image) {
|
self.detailData.image = {};
|
}
|
if (!self.detailData.pic) {
|
self.detailData.pic = {};
|
}
|
self.category = res.data.catgory;
|
self.loading = false;
|
self.$nextTick(()=>{
|
if (is_edit) {
|
this.$refs.activityInfo.setFormData();
|
}
|
self.is_edit = is_edit;
|
});
|
})
|
.catch(error => {});
|
},
|
|
onEdit() {
|
this.is_edit = true;
|
this.$nextTick(()=>{
|
this.$refs.activityInfo.setFormData();
|
});
|
},
|
|
onSubmit(){
|
let self = this;
|
self.$refs.activityInfo.onSubmit(self.activity_id);
|
},
|
|
// 编辑成功后回调
|
editSuccess() {
|
setTimeout(()=>{
|
this.is_edit = false;
|
this.$emit('getList');
|
this.getDetail(this.activity_id, false);
|
}, 500);
|
},
|
|
/*关闭抽屉*/
|
drawerClose(e) {
|
this.$emit('close', e);
|
},
|
}
|
|
};
|
</script>
|
|
<style lang="scss" scoped>
|
.detail-wrap {
|
padding-top: 90px;
|
position: relative;
|
|
.detail-top-fixed {
|
position: fixed;
|
top: 0;
|
right: 0;
|
width: 1000px;
|
z-index: 8;
|
background: #ffffff;
|
border-bottom: 1px solid #eee;
|
padding: 15px 16px 8px 16px;
|
}
|
|
.el-avatar {
|
background-color: #409EFF;
|
}
|
|
.el-avatar i {
|
font-size: 50px;
|
}
|
}
|
|
</style>
|
