<template>
|
<!--
|
作者：luoyiming
|
时间：2019-06-04
|
描述：插件中心-优惠券-优惠券列表-添加优惠券
|
-->
|
<div class="product-add">
|
<!--form表单-->
|
<el-form size="small" ref="form" :model="form" label-width="200px">
|
<el-tabs v-model="activeName" type="card">
|
<el-tab-pane label="基本信息" name="1"></el-tab-pane>
|
<el-tab-pane label="适用商品" name="2"></el-tab-pane>
|
</el-tabs>
|
<template v-if="activeName=='1'">
|
<!--添加门店-->
|
<div class="common-form">添加优惠券</div>
|
<el-form-item label="优惠券名称" prop="name" :rules="[{ required: true, message: ' ' }]">
|
<el-input v-model="form.name" placeholder="请输入优惠券名称"></el-input>
|
<div class="tips">例如：满100减10</div>
|
</el-form-item>
|
<el-form-item label="优惠券颜色">
|
<el-radio-group v-model="form.color">
|
<el-radio label="10">蓝色</el-radio>
|
<el-radio label="20">红色</el-radio>
|
<el-radio label="30">紫色</el-radio>
|
<el-radio label="40">黄色</el-radio>
|
</el-radio-group>
|
</el-form-item>
|
<el-form-item label="优惠券类型">
|
<el-radio-group v-model="form.coupon_type" @change="changeType">
|
<el-radio :label="10">满减券</el-radio>
|
<el-radio :label="20">折扣券</el-radio>
|
<el-radio :label="30">兑换券</el-radio>
|
</el-radio-group>
|
</el-form-item>
|
<div v-if="form.coupon_type == 10">
|
<el-form-item label="减免金额">
|
<el-input v-model="form.reduce_price" placeholder="请输入减免金额" type="number"></el-input>
|
</el-form-item>
|
</div>
|
<div v-if="form.coupon_type == 30">
|
<!-- <el-form-item label="兑换金额">
|
<el-input v-model="form.reduce_price" placeholder="请输入兑换金额" type="number"></el-input>
|
<div class="tips">兑换商品时需要支付的金额，0或空为免费兑换</div>
|
</el-form-item> -->
|
<el-form-item label="可使用次数" v-if="form.coupon_type == 30">
|
<el-input v-model="form.total_use_num" placeholder="请输入可使用次数" type="number" v-if="form.coupon_type == 30"></el-input>
|
<div class="tips">兑换券可使用的次数，最少1次</div>
|
</el-form-item>
|
<el-form-item label="价值金额">
|
<el-input v-model="form.product_price" placeholder="请输入价值金额" type="number"></el-input>
|
<div class="tips">价值金额指所兑换商品的售价，仅用于展示</div>
|
</el-form-item>
|
<el-form-item label="优惠项目" prop="coupon_project">
|
<el-button icon="el-icon-plus" @click="addProject">添加项目</el-button>
|
<div class="d-a-c border-t border-l border-r" style="width: 780px">
|
<div style="width: 40px;" class="d-c-c border-r">排序</div>
|
<div class="flex-1 d-c-c border-r">项目内容</div>
|
<div style="width: 100px;" class="d-c-c border-r">项目成本</div>
|
<div style="width: 100px;" class="d-c-c border-r">每天核销上限</div>
|
<div style="width: 80px;" class="d-c-c">操作</div>
|
</div>
|
<draggable class="wrapper" v-model="form.coupon_project">
|
<transition-group>
|
<div v-for="(item, index) in form.coupon_project" :key="item" class="d-a-c border-t border-l border-r" style="width: 780px">
|
<div class="icon iconfont icon-tuodong d-c-c p6 border-r" style="width: 40px;"></div>
|
<div style="min-width: 200px;" class="flex-1 p6 border-r d-c-c">
|
<el-input type="text" v-model="item.content"></el-input>
|
</div>
|
<div style="width: 100px;" class="p6 border-r d-c-c">
|
<el-input type="text" v-model="item.cost_price"></el-input>
|
</div>
|
<div style="width: 100px;" class="p6 border-r d-c-c">
|
<el-input type="text" v-model="item.verify_num"></el-input>
|
</div>
|
<div style="width: 80px;" class="d-c-c p6">
|
<el-button type="text" size="small" @click.stop="deleteItem(index)">删除</el-button>
|
</div>
|
</div>
|
</transition-group>
|
</draggable>
|
<div class="tips">注意：核销券时用户只能选一个项目</div>
|
</el-form-item>
|
<!-- <el-form-item label="优惠说明">
|
<el-input v-model="form.limit_notice" placeholder="请输入优惠说明" type="text" class="max-w460"></el-input>
|
<div class="tips">如：以上活动二选一。没有限制可留空</div>
|
</el-form-item> -->
|
<el-form-item label="使用规则" prop="coupon_rule">
|
<el-button icon="el-icon-plus" @click="addRule">添加规则</el-button>
|
<div class="d-a-c border-t border-l border-r" style="width: 720px">
|
<div style="width: 40px;" class="d-c-c border-r">排序</div>
|
<div class="flex-1 d-c-c border-r">规则内容</div>
|
<div style="width: 80px;" class="d-c-c">操作</div>
|
</div>
|
<draggable class="wrapper" v-model="form.coupon_rule">
|
<transition-group>
|
<div v-for="(item, index2) in form.coupon_rule" :key="item" class="d-a-c border-t border-l border-r" style="width: 720px">
|
<div class="icon iconfont icon-tuodong d-c-c p6 border-r" style="width: 40px;"></div>
|
<div class="flex-1 p6 border-r d-c-c">
|
<el-input type="text" v-model="item.content"></el-input>
|
</div>
|
<div style="width: 80px;" class="d-c-c p6">
|
<el-button type="text" size="small" @click.stop="deleteRule(index2)">删除</el-button>
|
</div>
|
</div>
|
</transition-group>
|
</draggable>
|
</el-form-item>
|
</div>
|
<div v-if="form.coupon_type == 20">
|
<el-form-item label="折扣率">
|
<el-input v-model="form.discount" placeholder="请输入折扣率" type="number"></el-input>
|
<div class="tips">折扣率范围0-10，9.5代表9.5折，整数或1位小数</div>
|
</el-form-item>
|
</div>
|
<div v-if="form.coupon_type != 30">
|
<el-form-item label="返还金额">
|
<el-input v-model="form.back_money" placeholder="请输入返还金额" type="number"></el-input>
|
<div class="tips">订单完成后返还到用户余额，0或空为不返还</div>
|
</el-form-item>
|
</div>
|
<el-form-item label="最低消费金额">
|
<el-input v-model="form.min_price" placeholder="请输入最低消费金额" type="number"></el-input>
|
</el-form-item>
|
<el-form-item label="到期类型">
|
<el-radio-group v-model="form.expire_type">
|
<el-radio label="10">领取后生效</el-radio>
|
<el-radio label="20">固定时间</el-radio>
|
</el-radio-group>
|
</el-form-item>
|
<div v-if="form.expire_type == 10">
|
<el-form-item label="有效天数">
|
<el-input v-model="form.expire_day" placeholder="请输入有效天数" type="number"></el-input>
|
</el-form-item>
|
</div>
|
<div v-else>
|
<el-form-item label="有效时间">
|
<el-date-picker v-model="form.active_time" type="daterange" align="right" unlink-panels
|
value-format="yyyy-MM-dd" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"
|
:picker-options="pickerOptions0"></el-date-picker>
|
</el-form-item>
|
</div>
|
<el-form-item label="发放总数量 " prop="total_num" :rules="[{ required: true, message: ' ' }]">
|
<el-input v-model="form.total_num" placeholder="请输入发放总数量" type="number"></el-input>
|
<div class="tips">限制领取的优惠券数量，-1为不限制</div>
|
</el-form-item>
|
<el-form-item label="使用条件">
|
<el-radio-group v-model="form.free_limit">
|
<el-radio :label="0">不限制</el-radio>
|
<el-radio :label="1">不可与促销同时使用</el-radio>
|
<el-radio :label="2">不可与等级优惠同时使用</el-radio>
|
<el-radio :label="3">不可于促销和等级优惠同时使用</el-radio>
|
</el-radio-group>
|
<div class="tips">促销是指满减，等级优惠券值商品的会员等级折扣</div>
|
</el-form-item>
|
<el-form-item label="是否显示在领券中心">
|
<el-radio-group v-model="form.show_center">
|
<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.is_card_user">
|
<el-radio :label="1">是</el-radio>
|
<el-radio :label="0">否</el-radio>
|
</el-radio-group>
|
<div class="tips">需要平台添加有会员卡才有效</div>
|
</el-form-item> -->
|
<el-form-item label="排序">
|
<el-input type="number" v-model="form.sort" placeholder="请输入排序"></el-input>
|
</el-form-item>
|
</template>
|
<template v-if="activeName=='2'">
|
<div class="common-form">适用商品</div>
|
<el-form-item label="选择">
|
<el-radio-group v-model="form.apply_range">
|
<el-radio :label="10">全部商品</el-radio>
|
<el-radio :label="20">
|
<span>指定商品</span>
|
</el-radio>
|
<el-radio :label="30">
|
<span>指定分类</span>
|
</el-radio>
|
</el-radio-group>
|
<div class="tips">如果兑换券，无需指定商品和分类</div>
|
</el-form-item>
|
<el-form-item v-if="form.apply_range==20">
|
<el-button class="mb10" @click="is_product=true" type="primary" plain>添加商品
|
</el-button>
|
<el-table v-if="product_list.length>0" :data="product_list" max-height="400" border style="width: 100%">
|
<el-table-column prop="product_id" label="ID" width="180">
|
</el-table-column>
|
<el-table-column prop="product_name" label="商品名称" width="180">
|
</el-table-column>
|
<el-table-column prop="image" label="图片">
|
<template slot-scope="scope">
|
<img v-img-url="hasImages(scope.row.product_image)" alt="" width="50px" />
|
</template>
|
</el-table-column>
|
<el-table-column label="操作">
|
<template slot-scope="scope">
|
<el-button @click="deleteClick(scope.$index)" type="text" size="small">删除</el-button>
|
</template>
|
</el-table-column>
|
</el-table>
|
</el-form-item>
|
<el-form-item label="" v-if="form.apply_range==30">
|
<el-button class="mb10" @click="is_category=true" type="primary" plain>添加分类
|
</el-button>
|
<div>
|
<el-tag class=" mr10 mb10" type="info" v-if="category_list.first.length>0" v-for="(item,index) in category_list.first"
|
:key="item.category_id">
|
{{item.parent?item.parent+'→'+item.name:item.name}}
|
</el-tag>
|
<el-tag class=" mr10 mb10" type="info" v-if="category_list.second.length>0"
|
v-for="(item,index) in category_list.second" :key="item.category_id">
|
{{item.parent?item.parent+'→'+item.name:item.name}}
|
</el-tag>
|
</div>
|
</el-form-item>
|
</template>
|
<!--提交-->
|
<div class="common-button-wrapper">
|
<el-button type="info" size="small" @click="cancelFunc">取消</el-button>
|
<el-button type="primary" size="small" @click="onSubmit" :loading="loading">提交</el-button>
|
</div>
|
</el-form>
|
<!--选择商品-->
|
<Product :isproduct="is_product" :excludeIds="exclude_ids" :islist="true" @closeDialog="closeProductFunc"></Product>
|
<Category :is_category="is_category" :excludeIds='category_ids' @close="closeCategoryFunc"></Category>
|
</div>
|
</template>
|
|
<script>
|
import CouponApi from '@/api/coupon.js';
|
import Product from '@/components/product/Product.vue';
|
import Category from '@/components/category/category.vue';
|
export default {
|
components: {
|
Product,
|
Category
|
},
|
data() {
|
return {
|
activeName: '1',
|
/*form表单数据*/
|
form: {
|
color: '10',
|
coupon_type: 10,
|
expire_type: '10',
|
sort: 100,
|
active_time: '',
|
/*优惠限制0不显示1不可与促销同时2不可与等级优惠同时3不可于促销和等级同*/
|
free_limit: 0,
|
apply_range: 10,
|
product: [],
|
total_use_num: 1,
|
// 兑换券内容 by lyzflash
|
coupon_project: [],
|
// 兑换券使用规则 by lyzflash
|
coupon_rule: []
|
},
|
loading: false,
|
pickerOptions0: {
|
disabledDate(time) {
|
return time.getTime() < Date.now() - 8.64e7; //如果没有后面的-8.64e7就是不可以选择今天的
|
}
|
},
|
prodcutData: [],
|
exclude_ids: [],
|
isproduct: false,
|
is_category: false,
|
is_product: false,
|
exclude_ids: [],
|
product_list: [],
|
category_list: {
|
second: [],
|
first: []
|
},
|
category_ids: []
|
};
|
},
|
created() {},
|
|
methods: {
|
addProject() {
|
this.form.coupon_project.push({
|
content: ''
|
});
|
},
|
deleteItem(index){
|
this.form.coupon_project.splice(index, 1);
|
},
|
addRule() {
|
this.form.coupon_rule.push({
|
content: ''
|
});
|
},
|
deleteRule(index){
|
this.form.coupon_rule.splice(index, 1);
|
},
|
/*添加用户*/
|
onSubmit() {
|
let self = this;
|
let form = self.form;
|
form.product_ids = self.exclude_ids;
|
form.category_list = self.category_list;
|
// if (form.coupon_type == 30 && form.product_ids.length == 0) {
|
// self.$message({
|
// message: '兑换券需要选择指定商品',
|
// type: 'error'
|
// });
|
// return;
|
// }
|
if (form.coupon_type == 30 && form.coupon_project.length == 0) {
|
self.$message({
|
message: '请添加优惠项目',
|
type: 'error'
|
});
|
return;
|
}
|
// 如果是折扣，则判断折扣是否大于0小于10
|
if(form.coupon_type == 20){
|
if(form.discount <= 0 || form.discount >= 10){
|
self.$message({
|
message: '折扣率介于0和10之间',
|
type: 'error'
|
});
|
return;
|
}
|
}
|
self.$refs.form.validate(valid => {
|
if (valid) {
|
self.loading = true;
|
CouponApi.addCoupon(form, true)
|
.then(data => {
|
self.loading = false;
|
self.$message({
|
message: '恭喜你，添加成功',
|
type: 'success'
|
});
|
self.$router.push('/coupon/coupon/index');
|
})
|
.catch(error => {
|
self.loading = false;
|
});
|
}
|
});
|
},
|
closeCategoryFunc(e) {
|
let self = this;
|
self.is_category = false;
|
if (e) {
|
self.category_list = e;
|
console.log(e)
|
}
|
},
|
/*关闭商品*/
|
closeProductFunc(e) {
|
let self = this;
|
self.is_product = e.openDialog;
|
if (e.type == 'success') {
|
e.params.forEach((item, index) => {
|
let params = {
|
product_id: item.product_id,
|
product_name: item.product_name,
|
product_image: item.product_image,
|
}
|
self.exclude_ids.push(params.product_id)
|
self.product_list.push(params);
|
})
|
// // 如果是兑换券，只保留第一个商品
|
// if (self.form.coupon_type == 30) {
|
// self.setProductOne();
|
// }
|
}
|
},
|
// 兑换券商品处理
|
setProductOne() {
|
let self = this;
|
if (self.exclude_ids.length > 0) {
|
self.exclude_ids = [self.exclude_ids[0]];
|
self.product_list = [self.product_list[0]];
|
}
|
},
|
changeType(e) {
|
if (e == 30) {
|
this.setProductOne();
|
}
|
},
|
deleteClick(e){
|
this.exclude_ids.splice(e, 1);
|
this.product_list.splice(e, 1);
|
},
|
hasImages(e) {
|
if (e) {
|
return e;
|
} else {
|
return '';
|
}
|
},
|
/*取消*/
|
cancelFunc() {
|
this.$router.push({
|
path: '/coupon/coupon/index',
|
});
|
},
|
}
|
};
|
</script>
|
|
<style lang="scss" scoped>
|
.product-add {
|
padding-bottom: 50px;
|
}
|
|
.tips {
|
color: #ccc;
|
border: none;
|
}
|
.mb8{
|
margin-bottom: 8px;
|
}
|
.p6{
|
padding: 6px;
|
}
|
</style>
|
