<template>
|
<div class="activty-edit-container pb50">
|
<!--添加活动-->
|
<el-form size="small" :model="form" ref="form" :rules="rules" label-width="100px">
|
<div class="common-form">添加活动</div>
|
<!-- <el-form-item label="活动所属连盟" prop="branch_id">
|
<el-row>
|
<el-button @click="selectBranch" icon="el-icon-plus">选择连盟</el-button>
|
<div class="mt10" v-if="form.branch_id!=''">
|
<el-tag>{{ branch_name }}</el-tag>
|
</div>
|
</el-row>
|
</el-form-item> -->
|
<el-form-item label="活动标题" prop="name">
|
<el-input v-model="form.name" placeholder="请输入活动标题" class="max-w460"></el-input>
|
</el-form-item>
|
<el-form-item label="活动分类" prop="category_id">
|
<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="describe"><el-input type="textarea" v-model="form.describe" rows="4" maxlength="200" show-word-limit placeholder="请输入活动简介" class="max-w460"></el-input></el-form-item>
|
<el-form-item label="封面图">
|
<div>
|
<el-button @click="openUpload('image')">上传封面</el-button>
|
<span class="gray9 pl16">建议尺寸750*350px</span>
|
<img :src="image_path" class="mt10" width="120px;" v-if="form.image_id" />
|
</div>
|
</el-form-item>
|
<el-form-item label="活动分享海报">
|
<div>
|
<el-button @click="openUpload('pic')">上传海报</el-button>
|
<span class="gray9 pl16">建议尺寸750*1250px</span>
|
<img :src="pic_path" class="mt10" width="120px;" v-if="form.pic_id" />
|
</div>
|
</el-form-item>
|
<el-form-item label="活动页面背景色">
|
<div class="d-s-c">
|
<el-color-picker v-model="form.background_color" class="mr16"></el-color-picker>
|
<span class="gray9">若未设置颜色，则使用默认色</span>
|
</div>
|
</el-form-item>
|
<el-form-item label="是否走访企业">
|
<el-radio-group v-model="form.is_visit">
|
<el-radio :label="1">是</el-radio>
|
<el-radio :label="0">否</el-radio>
|
</el-radio-group>
|
</el-form-item>
|
<el-form-item label="被走访企业" prop="visit_supplier_id" v-if="form.is_visit">
|
<el-row>
|
<el-button @click="selectSupplier('visit')" icon="el-icon-plus">选择企业</el-button>
|
<div v-if="form.visit_supplier_id!=''" class="mt10">
|
<el-tag>{{ visit_supplier_name }}</el-tag>
|
</div>
|
</el-row>
|
</el-form-item>
|
<el-form-item label="提供场地企业" prop="space_supplier_id" v-if="!form.is_visit">
|
<el-row>
|
<el-button @click="selectSupplier('space')" icon="el-icon-plus">选择企业</el-button>
|
<div v-if="form.space_supplier_id!=''" class="mt10">
|
<el-tag closable @close="cancelSpace">{{ space_supplier_name }}</el-tag>
|
</div>
|
<div class="gray9" v-if="form.space_supplier_id==''">如没有可不选</div>
|
</el-row>
|
</el-form-item>
|
<el-form-item label="促销商品" v-if="form.visit_supplier_id > 0">
|
<el-button icon="el-icon-plus" @click="selectProduct">选择商品</el-button>
|
<div class="gray9">当有走访企业时，可以选择该企业的商品进行促销</div>
|
</el-form-item>
|
<el-form-item label="商品列表" v-if="form.product_list.length > 0 && form.is_visit">
|
<ProductPrice :products="form.product_list" @confirm="handlePriceConfirm"></ProductPrice>
|
</el-form-item>
|
<el-form-item label="活动费用" prop="activity_fee">
|
<el-input v-model="form.fee" placeholder="请输入活动费用" class="max-w460">
|
<template slot="append">元</template>
|
</el-input>
|
<div class="gray9">0为免费报名</div>
|
</el-form-item>
|
<el-form-item label="活动名额" prop="limit_num">
|
<el-input v-model="form.limit_num" placeholder="请输入活动名额" class="max-w460">
|
<template slot="append">人</template>
|
</el-input>
|
<div class="gray9">0为不限制人数</div>
|
</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="报名起止时间" prop="reg_date">
|
<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="活动起止时间" prop="act_date">
|
<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="活动核销员">
|
<div class="d-s-s d-c">
|
<el-button @click="openGetUser" icon="el-icon-plus">选择会员</el-button>
|
<ul class="d-s-s select-user pt16">
|
<li class="mr10 d-c-c d-c pr" v-for="(item, index) in select_list" :key="index">
|
<a href="javascript:void(0)" class="delete-btn" @click="deleteVerifyUser(index)"><i class="el-icon-error"></i></a>
|
<img :src="item.avatarUrl" class="radius" width="50" height="50" />
|
<p class="lh18 ww100 text-ellipsis">{{item.nickName}}</p>
|
</li>
|
</ul>
|
</div>
|
<div class="gray9">会长及管理员默认已有核销权限，请添加不是管理员的核销人员</div>
|
</el-form-item> -->
|
<el-form-item label="活动限定范围" prop="radius">
|
<el-input v-model="form.radius" placeholder="请输入活动限定范围" class="max-w460">
|
<template slot="append">米</template>
|
</el-input>
|
<div class="gray9">用户在限定范围内才能进行核销签到等操作，0为不限制</div>
|
</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>
|
<div class="gray9">请从地图定位活动地点的坐标</div>
|
</el-col>
|
</el-row>
|
<el-row class="mb16">
|
<el-col :span="18">
|
<Getpoint :form="form" @chose="selectFromMap"></Getpoint>
|
</el-col>
|
</el-row>
|
</el-form-item>
|
<el-form-item label="活动地址" prop="address">
|
<el-input v-model="form.address" placeholder="请输入活动地址" class="max-w460"></el-input>
|
<div class="gray9">获取坐标后，地址会自动填充，你也可以手动修改</div>
|
</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="活动内容">
|
<div class="edit_container">
|
<Uediter v-model="form.content" :text="ueditor.text" :config="ueditor.config" ref="ue"></Uediter>
|
</div>
|
</el-form-item>
|
<el-form-item label="排序"><el-input type="number" v-model="form.sort" placeholder="请输入数字" class="max-w460"></el-input></el-form-item>
|
<el-form-item label="是否启用">
|
<el-radio-group v-model="form.status">
|
<el-radio :label="1">启用</el-radio>
|
<el-radio :label="0">关闭</el-radio>
|
</el-radio-group>
|
</el-form-item>
|
<!--提交-->
|
<div class="common-button-wrapper">
|
<el-button size="small" @click="cancelFunc">取消</el-button>
|
<el-button size="small" type="primary" @click="onSubmit" :loading="loading">提交</el-button>
|
</div>
|
</el-form>
|
<!--上传图片组件-->
|
<Upload v-if="isupload" :isupload="isupload" @returnImgs="returnImgsFunc">上传图片</Upload>
|
<!--选择连盟-->
|
<GetBranch :open="open_branch" @close="closeBranchFunc"></GetBranch>
|
<!--选择商户-->
|
<GetSupplier :open="open_supplier" @close="closeSupplierFunc"></GetSupplier>
|
<!--选择用户-->
|
<GetUser :is_open="open_user" @close="closeGetUserFunc"></GetUser>
|
<!--选择商品-->
|
<ProductSelect :isproduct="isproduct" :shop_supplier_id="form.visit_supplier_id" :excludeIds="excludeIds" :islist="islist" @closeDialog="closeProductDialogFunc($event)">
|
产品列表弹出层
|
</ProductSelect>
|
</div>
|
</template>
|
|
<script>
|
import BranchApi from '@/api/branch.js';
|
import Uediter from '@/components/UE.vue';
|
import Upload from '@/components/file/Upload';
|
import Getpoint from '@/components/map/Getpoint.vue';
|
import GetBranch from '@/components/branch/Branch.vue';
|
import GetSupplier from '@/components/supplier/Supplier.vue';
|
import GetUser from '@/components/user/GetUser.vue';
|
import ProductSelect from '@/components/product/Product';
|
import ProductPrice from './dialog/Price.vue';
|
export default {
|
components: {
|
/*编辑器*/
|
Uediter,
|
/*图片上传*/
|
Upload: Upload,
|
/*腾讯地图拾取器*/
|
Getpoint,
|
GetBranch,
|
GetSupplier,
|
GetUser,
|
ProductSelect,
|
ProductPrice
|
},
|
data() {
|
return {
|
/*是否上传图片*/
|
isupload: false,
|
isImg: false,
|
/*富文本配置*/
|
ueditor: {
|
text: '',
|
config: {
|
initialFrameWidth: 400,
|
initialFrameHeight: 500
|
}
|
},
|
image_path: '',
|
pic_path: '',
|
/*form表单数据*/
|
form: {
|
branch_id: '',
|
name: '',
|
category_id: '',
|
image_id: '', // 封面
|
pic_id: '', // 分享海报
|
sort: 100,
|
is_visit: 0, // 是否需要走访企业
|
visit_supplier_id: '', // 被走访企业
|
space_supplier_id: '', // 提供场地企业
|
background_color: '',
|
status: 1,
|
content: '',
|
describe: '',
|
fee: 0,
|
limit_num: 0,
|
address: '',
|
coordinate: '',
|
phone: '',
|
reg_date: '',
|
act_date: '',
|
radius: 0, // 活动限定范围，在范围内才能进行相关操作，如签到、下单
|
product_list: [] //选择的产品列表
|
},
|
/*活动类别*/
|
category: [],
|
loading: false,
|
upload_type: 'image', // 封面image 分享海报pic
|
open_branch: false,
|
branch_name: '',
|
open_supplier: false,
|
visit_supplier_name: '', // 走访企业
|
space_supplier_name: '', // 提供场地企业
|
supplier_type: 'visit',
|
select_list:[], // 选择的核销员列表
|
open_user: false,
|
excludeIds: [],
|
islist: true, //多选
|
isproduct: false,
|
/*验证规则*/
|
rules: {
|
name: [{ required: true, message: '请输入活动标题', trigger: 'blur' }],
|
category_id: [{ required: true, message: '请选择活动分类', trigger: 'blur' }],
|
reg_date: [{ required: true, message: '请选择报名起止时间', trigger: 'blur' }],
|
act_date: [{ required: true, message: '请选择活动起止时间', trigger: 'blur' }],
|
address: [{ required: true, message: '请输入活动举办的地址', trigger: 'blur' }],
|
/* dec: [{ required: true, message: '请输入活动描述', trigger: 'blur' }] */
|
}
|
};
|
},
|
created() {
|
/*获取列表*/
|
this.getCategoryList();
|
},
|
methods: {
|
/*上传*/
|
openUpload(t) {
|
this.upload_type = t;
|
this.isupload = true;
|
},
|
|
/*获取图片*/
|
returnImgsFunc(e) {
|
let self = this;
|
if (e != null) {
|
if (self.upload_type == 'image') {
|
this.form.image_id = e[0].file_id;
|
this.image_path = e[0].file_path;
|
} else {
|
this.form.pic_id = e[0].file_id;
|
this.pic_path = e[0].file_path;
|
}
|
}
|
this.isupload = false;
|
},
|
|
/*获取活动类别*/
|
getCategoryList() {
|
let self = this;
|
let Params = {};
|
BranchApi.category(Params, true)
|
.then(res => {
|
self.category = res.data.category;
|
if(self.category.length > 0){
|
self.form.category_id = self.catgory[0].category_id;
|
}
|
})
|
.catch(error => {
|
|
});
|
},
|
|
/*添加活动*/
|
onSubmit() {
|
let self = this;
|
let form = self.form;
|
// 整理核销人员数据
|
// if (self.select_list.length > 0) {
|
// let verify_user_ids = [];
|
// self.select_list.forEach((item) => {
|
// verify_user_ids.push(item.user_id);
|
// });
|
// form.verify_user_ids = verify_user_ids.join(',');
|
// }
|
self.$refs.form.validate(valid => {
|
if (valid) {
|
self.loading = true;
|
form.content = this.$refs.ue.getUEContent();
|
// 如果走访企业，则被走访企业就是场地提供者
|
if (form.is_visit) {
|
form.space_supplier_id = '';
|
} else {
|
form.visit_supplier_id = '';
|
}
|
BranchApi.addActivity({formData: JSON.stringify(form)}, true)
|
.then(data => {
|
self.loading = false;
|
self.$message({
|
message: data.msg,
|
type: 'success'
|
});
|
self.$router.push('/activity/activity/index');
|
})
|
.catch(error => {
|
self.loading = false;
|
});
|
}
|
});
|
},
|
|
/*选择的地址*/
|
selectFromMap(e){
|
this.form.coordinate = e.location.lat + ',' + e.location.lng;
|
this.form.address = e.address;
|
|
},
|
|
// 取消选择的提供场地企业
|
cancelSpace() {
|
this.form.space_supplier_id = '';
|
this.space_supplier_name = '';
|
},
|
|
/*取消添加，返回活动列表*/
|
cancelFunc() {
|
this.$router.back(-1);
|
},
|
|
/*打开选择会员弹出层*/
|
selectBranch() {
|
this.open_branch = true;
|
},
|
|
/*关闭获取用户弹窗*/
|
closeBranchFunc(e) {
|
if (e.type != 'error') {
|
console.log(e)
|
this.branch_name = e.params.name;
|
this.form.branch_id = e.params.branch_id;
|
}
|
this.open_branch = false;
|
},
|
|
/*打开选择商户弹出层*/
|
selectSupplier(t) {
|
this.supplier_type = t;
|
this.open_supplier = true;
|
},
|
|
/*关闭获取商户弹窗*/
|
closeSupplierFunc(e) {
|
if (e.type != 'error') {
|
if (this.supplier_type == 'visit') {
|
// 如果换了走访企业，清除促销商品
|
if (this.form.visit_supplier_id != e.params.shop_supplier_id) {
|
this.form.product_list = [];
|
}
|
this.form.visit_supplier_id = e.params.shop_supplier_id;
|
this.visit_supplier_name = e.params.name;
|
} else {
|
this.form.space_supplier_id = e.params.shop_supplier_id;
|
this.space_supplier_name = e.params.name;
|
}
|
|
}
|
this.open_supplier = false;
|
},
|
|
/*打开获取用户*/
|
openGetUser() {
|
this.open_user = true;
|
},
|
|
/*关闭获取用户*/
|
closeGetUserFunc(e) {
|
if (e.type != 'error') {
|
this.select_list=this.select_list.concat(e.params);
|
}
|
this.open_user = false;
|
},
|
|
/*删除核销用户*/
|
deleteVerifyUser(i) {
|
this.select_list.splice(i, 1);
|
},
|
|
selectProduct() {
|
this.isproduct = true;
|
},
|
handlePriceConfirm(changedProducts) {
|
const excludeIds = changedProducts.map((row) => row.product_id);
|
this.excludeIds = excludeIds;
|
changedProducts;
|
this.form.product_list = changedProducts;
|
},
|
/*商品选择关闭弹窗*/
|
closeProductDialogFunc(e) {
|
const self = this;
|
self.isproduct = false;
|
const excludeIds = [];
|
if (e.type == 'success') {
|
let product = [];
|
e.params.forEach((item) => {
|
const arr1 = {
|
image: item.image,
|
product_name: item.product_name,
|
product_price: item.product_price,
|
product_id: item.product_id,
|
product_sku_id: item.sku[0].product_sku_id,
|
spec_sku_id: item.sku[0].spec_sku_id,
|
product_sku_name: '单规格'
|
};
|
if (item.specList.length > 0 && item.spec_type == 20) {
|
item.specList.forEach((cell, colIndex) => {
|
const arr2 = {
|
image: item.image,
|
product_name: item.product_name,
|
product_price: cell.spec_form.product_price,
|
product_id: item.product_id,
|
product_sku_id: cell.product_sku_id,
|
spec_sku_id: cell.spec_sku_id,
|
product_sku_name: cell.spec_name
|
};
|
product.push(arr2);
|
});
|
} else {
|
product.push(arr1);
|
}
|
|
excludeIds.push(item.product_id);
|
});
|
|
self.excludeIds = excludeIds;
|
const product_list = self.form.product_list;
|
const new_arr = self.mergeArraysByProductId(product_list, product, 'product_id');
|
self.form.product_list = new_arr;
|
|
}
|
},
|
|
/**
|
* 将 B 数组中不存在于 A 数组中的项（基于 product_id）合并到 A 数组中
|
* @param {Array} arrayA - 目标数组
|
* @param {Array} arrayB - 源数组
|
* @param {string} idKey - 用于比较的键名（默认为 'product_id'）
|
* @returns {Array} - 合并后的新数组
|
*/
|
mergeArraysByProductId(arrayA, arrayB, idKey = 'product_id') {
|
// 创建 A 数组中所有 product_id 的集合
|
const idsInA = new Set(arrayA.map((item) => item[idKey]));
|
// 筛选出 B 数组中不存在于 A 数组的项
|
const itemsToAdd = arrayB.filter((item) => !idsInA.has(item[idKey]));
|
// 合并数组（不改变原数组）
|
return [...arrayA, ...itemsToAdd];
|
},
|
}
|
};
|
</script>
|
|
<style lang="scss">
|
.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;
|
}
|
|
.activty-edit-container .select-user .delete-btn {
|
position: absolute;
|
top: -10px;
|
right: -10px;
|
|
i {
|
font-size: 20px;
|
}
|
}
|
</style>
|
