<template>
|
<!--
|
作者：yj
|
时间：2022-05-27
|
描述：插件中心-活动-编辑
|
-->
|
<div class="product-add pb50" v-loading="loading">
|
<!--编辑活动-->
|
<el-form size="small" :model="form" ref="form" :rules="rules" label-width="100px">
|
<div class="common-form">编辑活动</div>
|
<el-form-item label="活动标题" prop="activity_title"><el-input v-model="form.activity_title" placeholder="请输入活动标题" class="max-w460"></el-input></el-form-item>
|
<!-- <el-form-item label="描述" prop="dec"><el-input v-model="form.dec" placeholder="请输入文章描述" class="max-w460"></el-input></el-form-item> -->
|
<el-form-item label="活动缩略图">
|
<div>
|
<el-button type="primary" @click="openUpload">上传图片</el-button>
|
<img class="mt10" v-img-url="'image.file_path',form" width="120px;" alt="" />
|
<!--上传图片组件-->
|
<Upload v-if="isupload" :isupload="isupload" @returnImgs="returnImgsFunc">上传图片</Upload>
|
</div>
|
</el-form-item>
|
<el-form-item label="活动分类">
|
<el-select v-model="form.category_id" placeholder="请选择">
|
<el-option v-for="(item, index) in category" :key="index" :label="item.name" :value="item.category_id"></el-option>
|
</el-select>
|
</el-form-item>
|
|
<el-form-item label="活动费用" prop="activity_fee"><el-input v-model="form.activity_fee" placeholder="请输入活动费用" class="max-w460"></el-input>元</el-form-item>
|
<el-form-item label="活动名额" prop="limit_num"><el-input v-model="form.limit_num" placeholder="请输入活动名额" class="max-w460"></el-input>位</el-form-item>
|
<el-form-item label="报名时间">
|
<div class="block">
|
<span class="demonstration"></span>
|
<el-date-picker v-model="form.reg_date" type="datetimerange" range-separator="至"
|
start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>
|
</div>
|
</el-form-item>
|
<el-form-item label="活动时间">
|
<div class="block">
|
<span class="demonstration"></span>
|
<el-date-picker v-model="form.act_date" type="datetimerange" range-separator="至"
|
start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>
|
</div>
|
</el-form-item>
|
<el-form-item label="活动地址" prop="address"><el-input v-model="form.address" placeholder="请输入活动地址" class="max-w460"></el-input></el-form-item>
|
<el-form-item label="活动坐标">
|
<el-row class="mb16">
|
<el-col :span="24">
|
<el-input v-model="form.coordinate" class="max-w460"></el-input>
|
</el-col>
|
</el-row>
|
<el-row class="mb16">
|
<el-col :span="24">
|
<Getpoint :form="form" @getMapdata="getMapdataFunc" @chose="choseFunc"></Getpoint>
|
</el-col>
|
</el-row>
|
|
</el-form-item>
|
<el-form-item label="联系电话" prop="phone"><el-input v-model="form.phone" placeholder="请输入联系电话" class="max-w460"></el-input></el-form-item>
|
|
<el-form-item label="报名状态">
|
<el-radio-group v-model="form.register_status">
|
<el-radio :label="1">开启</el-radio>
|
<el-radio :label="0">关闭</el-radio>
|
</el-radio-group>
|
</el-form-item>
|
|
<el-form-item label="活动状态">
|
<el-radio-group v-model="form.activity_status">
|
<el-radio :label="1">启用</el-radio>
|
<el-radio :label="0">关闭</el-radio>
|
</el-radio-group>
|
</el-form-item>
|
<el-form-item label="活动内容">
|
<div class="edit_container">
|
<Uediter v-if="!loading" :text="ueditor.text" :config="ueditor.config" ref="ue"></Uediter>
|
</div>
|
</el-form-item>
|
<el-form-item label="排序"><el-input type="number" v-model="form.activity_sort" placeholder="请输入数字" class="max-w460"></el-input></el-form-item>
|
<!--提交-->
|
<div class="common-button-wrapper">
|
<el-button size="small" type="info" @click="cancelFunc" :loading="loading">取消</el-button>
|
<el-button size="small" type="primary" @click="onSubmit" :loading="loading">提交</el-button>
|
</div>
|
</el-form>
|
</div>
|
</template>
|
|
<script>
|
import RegApi from '@/api/regactivity.js';
|
import Uediter from '@/components/UE.vue';
|
import Upload from '@/components/file/Upload';
|
import Getpoint from '@/components/map/Getpoint.vue';
|
export default {
|
components: {
|
/*编辑器*/
|
Uediter,
|
/*图片上传*/
|
Upload: Upload,
|
/*腾讯地图拾取器*/
|
Getpoint,
|
},
|
data() {
|
return {
|
/*是否加载完成*/
|
loading: true,
|
/*是否上传图片*/
|
isupload: false,
|
/*富文本配置*/
|
ueditor: {
|
text: '',
|
config: {
|
initialFrameWidth: 400,
|
initialFrameHeight: 500
|
}
|
},
|
/*form表单数据*/
|
form: {
|
activity_title: '',
|
category_id: '',
|
image_id: '',
|
activity_sort: 1,
|
register_status: 0,
|
activity_status: 1,
|
activity_content: '',
|
dec: '',
|
activity_fee:0,
|
limit_num:0,
|
address:'',
|
coordinate: '',
|
phone:'',
|
reg_date:'',
|
act_date:'',
|
},
|
/*新闻类别*/
|
category: [],
|
/*验证规则*/
|
rules: {
|
activity_title: [{ required: true, message: '请输入活动标题', trigger: 'blur' }],
|
/* dec: [{ required: true, message: '请输入活动描述', trigger: 'blur' }] */
|
}
|
};
|
},
|
created() {
|
|
this.getDetail();
|
|
},
|
|
methods: {
|
|
/*上传*/
|
openUpload() {
|
this.isupload = true;
|
},
|
|
getContent: function() {
|
return this.$refs.ue.getUEContent();
|
},
|
|
/*获取图片*/
|
returnImgsFunc(e) {
|
let self = this;
|
if (e != null) {
|
this.form.image_id = e[0].file_id;
|
this.form.image.file_path = e[0].file_path;
|
}
|
this.isupload = false;
|
},
|
|
getDetail() {
|
let self = this;
|
// 取到路由带过来的参数
|
const params = self.$route.query.activity_id;
|
RegApi.toEdit({activity_id: params},true).then(res => {
|
self.ueditor.text = res.data.model.activity_content;
|
self.form = res.data.model;
|
if(!self.form.image){
|
self.form.image={};
|
}
|
self.category = res.data.catgory;
|
self.loading = false;
|
})
|
.catch(error => {});
|
},
|
|
/*获取经纬度*/
|
getMapdataFunc(e) {
|
this.form.coordinate = e.data[0].toFixed(6) + ',' + e.data[1].toFixed(6);
|
},
|
|
/*修改*/
|
onSubmit() {
|
let self = this;
|
let params = this.form;
|
self.form.activity_content = this.$refs.ue.getUEContent();
|
// 取到路由带过来的参数
|
RegApi.edit(params, true)
|
.then(data => {
|
self.$message({
|
message: data.msg,
|
type: 'success'
|
});
|
self.$router.push('/plus/regactivity/index');
|
})
|
.catch(error => {});
|
},
|
|
/*选择的地址*/
|
choseFunc(e){
|
this.form.coordinate=e.location.lat+','+e.location.lng;
|
this.form.address=e.address;
|
|
},
|
|
/*取消添加，返回列表*/
|
cancelFunc() {
|
this.$router.push({
|
path: '/plus/regactivity/index'
|
});
|
}
|
}
|
};
|
</script>
|
|
<style>
|
.edit_container {
|
font-family: 'Avenir', Helvetica, Arial, sans-serif;
|
-webkit-font-smoothing: antialiased;
|
-moz-osx-font-smoothing: grayscale;
|
text-align: center;
|
color: #2c3e50;
|
}
|
|
.ql-editor {
|
height: 400px;
|
}
|
</style>
|
