<template>
|
<!--
|
作者：luoyiming
|
时间：2019-06-04
|
描述：插件中心-优惠券-优惠券列表-修改优惠券
|
-->
|
<div v-loading="loading">
|
<!--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="请输入优惠券名称" class="max-w460"></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>
|
<div class="tips">兑换券仅支持线下到店核销使用</div>
|
</el-form-item>
|
<div v-if="form.coupon_type == 10">
|
<el-form-item label="减免金额">
|
<el-input v-model="form.reduce_price" placeholder="请输入减免金额" type="number" class="max-w460"></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" class="max-w460" v-if="form.coupon_type == 30"></el-input>
|
</el-form-item>
|
<el-form-item label="价值金额">
|
<el-input v-model="form.product_price" placeholder="请输入兑换券价值金额" type="number" class="max-w460"></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 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" class="max-w460"></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" class="max-w460"></el-input>
|
<div class="tips">订单完成后返还到用户余额，0或空为不返还</div>
|
</el-form-item>
|
</div>
|
<el-form-item label="最低消费金额" v-if="form.coupon_type != 30">
|
<el-input v-model="form.min_price" placeholder="请输入最低消费金额" type="number" class="max-w460"></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" class="max-w460"></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" class="max-w460"></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="请输入排序" class="max-w460"></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>
|
</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" :loading="loading">取消</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';
|
import draggable from 'vuedraggable';
|
import {
|
formatModel
|
} from '@/utils/base.js'
|
export default {
|
components: {
|
Product,
|
Category,
|
draggable
|
},
|
data() {
|
return {
|
activeName: '1',
|
/*form表单数据*/
|
form: {
|
/*优惠券ID*/
|
coupon_id: '',
|
/*优惠券名称*/
|
name: '',
|
/*优惠券颜色*/
|
color: '',
|
/*优惠券类型*/
|
coupon_type: '',
|
/*减免金额*/
|
reduce_price: '',
|
/*折扣率*/
|
discount: '',
|
/*最低消费金额*/
|
min_price: '',
|
/*到期类型*/
|
expire_type: '',
|
/*有效天数*/
|
expire_day: '',
|
/*有效期*/
|
active_time: '',
|
/*发放量*/
|
total_num: '',
|
/*排序*/
|
sort: 1,
|
/*优惠限制0不显示1不可与促销同时2不可与等级优惠同时3不可于促销和等级同*/
|
free_limit: 0,
|
apply_range: 10,
|
product: [],
|
/* 返还金额 */
|
back_money: '',
|
/* 兑换券价值金额 */
|
product_price: '',
|
// 兑换券可使用次数
|
total_use_num: '',
|
// 返还金额
|
back_money: '',
|
// 是否在领券中心显示
|
show_center: 0,
|
// 是否仅会员卡会员可领
|
is_card_user: 0,
|
// 兑换券内容 by lyzflash
|
coupon_project: [],
|
// 兑换券使用规则 by lyzflash
|
coupon_rule: []
|
},
|
list: {},
|
/*是否正在加载*/
|
loading: true,
|
pickerOptions0: {
|
disabledDate(time) {
|
return time.getTime() < Date.now() - 8.64e7; //如果没有后面的-8.64e7就是不可以选择今天的
|
}
|
},
|
/*商品一级分类*/
|
category: [],
|
/*已有的id*/
|
prodcutData: [],
|
isproduct: false,
|
is_category: false,
|
is_product: false,
|
exclude_ids: [],
|
product_list: [],
|
category_list: {
|
second: [],
|
first: []
|
},
|
category_ids: []
|
};
|
},
|
created() {
|
let coupon_id = this.$route.query.coupon_id;
|
this.getData(coupon_id);
|
},
|
|
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);
|
},
|
getData(coupon_id) {
|
let self = this;
|
CouponApi.couponDetail({
|
coupon_id: coupon_id
|
},
|
true
|
)
|
.then(res => {
|
let obj = {};
|
obj = res.data.detail;
|
//选中
|
obj.color = res.data.detail.color.value;
|
obj.coupon_type = res.data.detail.coupon_type.value;
|
self.form = formatModel(self.form, obj);
|
console.log(self.form)
|
if (self.form.apply_range == 20) {
|
self.exclude_ids = res.data.detail.product_ids;
|
for (let i = 0; i < self.exclude_ids.length; i++) {
|
self.exclude_ids[i] = parseInt(self.exclude_ids[i]);
|
}
|
self.product_list = res.data.detail.product_list;
|
console.log(self.product_list)
|
}
|
if (self.form.apply_range == 30) {
|
self.category_list = res.data.detail.category_list;
|
}
|
if (self.form.coupon_project == '') {
|
self.form.coupon_project = [];
|
}
|
if (self.form.coupon_rule == '') {
|
self.form.coupon_rule = [];
|
}
|
self.loading = false;
|
})
|
.catch(error => {
|
self.loading = false;
|
});
|
},
|
|
/*修改*/
|
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.editCoupon(form, true)
|
.then(data => {
|
self.loading = false;
|
self.$message({
|
message: '恭喜你，修改成功',
|
type: 'success'
|
});
|
self.$router.push('/coupon/coupon/index');
|
})
|
.catch(error => {
|
self.loading = false;
|
});
|
} else {
|
self.loading = false;
|
}
|
});
|
},
|
hasImages(e) {
|
if (e) {
|
return e;
|
} else {
|
return '';
|
}
|
},
|
/*取消*/
|
cancelFunc() {
|
this.$router.push({
|
path: '/coupon/coupon/index',
|
});
|
},
|
|
closeCategoryFunc(e) {
|
let self = this;
|
self.is_category = false;
|
if (e) {
|
self.category_list = 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);
|
},
|
}
|
};
|
</script>
|
|
<style lang="scss" scoped>
|
.product-add {
|
padding-bottom: 50px;
|
}
|
|
.tips {
|
color: #ccc;
|
}
|
.mb8{
|
margin-bottom: 8px;
|
}
|
.p6{
|
padding: 6px;
|
}
|
</style>
|
