|
|
|
|
<template>
|
|
|
|
|
<el-card class="form-container" shadow="never">
|
|
|
|
|
<el-form :model="coupon"
|
|
|
|
|
:rules="rules"
|
|
|
|
|
ref="couponFrom"
|
|
|
|
|
label-width="150px"
|
|
|
|
|
size="small">
|
|
|
|
|
<el-form-item label="优惠券类型：">
|
|
|
|
|
<el-select v-model="coupon.type">
|
|
|
|
|
<el-option v-for='type in typeOptions' :key='type.value' :label='type.label' :value='type.value'></el-option>
|
|
|
|
|
</el-select>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
<el-form-item label="优惠券名称：" prop="name">
|
|
|
|
|
<el-input v-model="coupon.name" class="input-width"></el-input>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
<el-form-item label="适用平台：">
|
|
|
|
|
<el-select v-model="coupon.platform">
|
|
|
|
|
<el-option
|
|
|
|
|
v-for="item in platformOptions"
|
|
|
|
|
:key="item.value"
|
|
|
|
|
:label="item.label"
|
|
|
|
|
:value="item.value">
|
|
|
|
|
</el-option>
|
|
|
|
|
</el-select>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
<el-form-item label="总发行量：" prop="publishCount">
|
|
|
|
|
<el-input v-model.number="coupon.publishCount" placeholder="只能输入正整数" class="input-width"></el-input>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
<el-form-item label="面额：" prop="amount">
|
|
|
|
|
<el-input v-model="coupon.amount" @keyup.native="coupon.amount = UpNumber(coupon.amount,2)" placeholder="面值只能是数值，限2位小数" class="input-width">
|
|
|
|
|
<template slot="append">元</template>
|
|
|
|
|
</el-input>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
<el-form-item label="每人限领：">
|
|
|
|
|
<el-input v-model="coupon.perLimit" placeholder="只能输入正整数" class="input-width">
|
|
|
|
|
<template slot="append">张</template>
|
|
|
|
|
</el-input>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
<el-form-item label="使用门槛：" prop="minPoint">
|
|
|
|
|
<el-input v-model.number="coupon.minPoint" placeholder="只能输入正整数" class="input-width">
|
|
|
|
|
<template slot="prepend">满</template>
|
|
|
|
|
<template slot="append">元可用</template>
|
|
|
|
|
</el-input>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
<el-form-item label="有效期：">
|
|
|
|
|
<el-date-picker type="date" placeholder="选择日期" v-model="coupon.startTime" style="width: 150px"></el-date-picker>
|
|
|
|
|
<span style="margin-left: 20px;margin-right: 20px">至</span>
|
|
|
|
|
<el-date-picker type="date" placeholder="选择日期" v-model="coupon.endTime" style="width: 150px"></el-date-picker>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
<el-form-item label="可使用商品：">
|
|
|
|
|
<el-radio-group v-model="coupon.useType">
|
|
|
|
|
<el-radio-button :label="0">全场通用</el-radio-button>
|
|
|
|
|
<el-radio-button :label="1">指定分类</el-radio-button>
|
|
|
|
|
<el-radio-button :label="2">指定商品</el-radio-button>
|
|
|
|
|
</el-radio-group>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
<el-form-item v-show="coupon.useType===1">
|
|
|
|
|
<el-cascader
|
|
|
|
|
clearable
|
|
|
|
|
placeholder="请选择分类名称"
|
|
|
|
|
v-model="selectProductCate"
|
|
|
|
|
:options="productCateOptions">
|
|
|
|
|
</el-cascader>
|
|
|
|
|
<el-button @click="handleAddProductCategoryRelation()">添加</el-button>
|
|
|
|
|
<el-table ref="productCateRelationTable"
|
|
|
|
|
:data="coupon.productCategoryRelationList"
|
|
|
|
|
style="width: 100%;margin-top: 20px"
|
|
|
|
|
border>
|
|
|
|
|
<el-table-column label="分类名称" align="center">
|
|
|
|
|
<template slot-scope="scope">{{scope.row.parentCategoryName}}>{{scope.row.productCategoryName}}</template>
|
|
|
|
|
</el-table-column>
|
|
|
|
|
<el-table-column label="操作" align="center" width="100">
|
|
|
|
|
<template slot-scope="scope">
|
|
|
|
|
<el-button size="mini"
|
|
|
|
|
type="text"
|
|
|
|
|
@click="handleDeleteProductCateRelation(scope.$index, scope.row)">删除
|
|
|
|
|
</el-button>
|
|
|
|
|
</template>
|
|
|
|
|
</el-table-column>
|
|
|
|
|
</el-table>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
<el-form-item v-show="coupon.useType===2">
|
|
|
|
|
<el-select
|
|
|
|
|
v-model="selectProduct"
|
|
|
|
|
filterable
|
|
|
|
|
remote
|
|
|
|
|
reserve-keyword
|
|
|
|
|
placeholder="商品名称/商品货号"
|
|
|
|
|
:remote-method="searchProductMethod"
|
|
|
|
|
:loading="selectProductLoading">
|
|
|
|
|
<el-option
|
|
|
|
|
v-for="item in selectProductOptions"
|
|
|
|
|
:key="item.productId"
|
|
|
|
|
:label="item.productName"
|
|
|
|
|
:value="item.productId">
|
|
|
|
|
<span style="float: left">{{ item.productName }}</span>
|
|
|
|
|
<span style="float: right; color: #8492a6; font-size: 13px">NO.{{ item.productSn }}</span>
|
|
|
|
|
</el-option>
|
|
|
|
|
</el-select>
|
|
|
|
|
<el-button @click="handleAddProductRelation()">添加</el-button>
|
|
|
|
|
<el-table ref="productRelationTable"
|
|
|
|
|
:data="coupon.productRelationList"
|
|
|
|
|
style="width: 100%;margin-top: 20px"
|
|
|
|
|
border>
|
|
|
|
|
<el-table-column label="商品名称" align="center">
|
|
|
|
|
<template slot-scope="scope">{{scope.row.productName}}</template>
|
|
|
|
|
</el-table-column>
|
|
|
|
|
<el-table-column label="货号" align="center" width="120" >
|
|
|
|
|
<template slot-scope="scope">NO.{{scope.row.productSn}}</template>
|
|
|
|
|
</el-table-column>
|
|
|
|
|
<el-table-column label="操作" align="center" width="100">
|
|
|
|
|
<template slot-scope="scope">
|
|
|
|
|
<el-button size="mini"
|
|
|
|
|
type="text"
|
|
|
|
|
@click="handleDeleteProductRelation(scope.$index, scope.row)">删除
|
|
|
|
|
</el-button>
|
|
|
|
|
</template>
|
|
|
|
|
</el-table-column>
|
|
|
|
|
</el-table>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
<el-form-item label="备注：">
|
|
|
|
|
<el-input
|
|
|
|
|
class="input-width"
|
|
|
|
|
type="textarea"
|
|
|
|
|
:rows="5"
|
|
|
|
|
placeholder="请输入内容"
|
|
|
|
|
v-model="coupon.note">
|
|
|
|
|
</el-input>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
<el-form-item>
|
|
|
|
|
<el-button type="primary" @click="onSubmit('couponFrom')">提交</el-button>
|
|
|
|
|
<el-button v-if="!isEdit" @click="resetForm('couponFrom')">重置</el-button>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
</el-form>
|
|
|
|
|
</el-card>
|
|
|
|
|
</template>
|
|
|
|
|
<script>
|
|
|
|
|
import {createCoupon,getCoupon,updateCoupon} from '@/api/coupon';
|
|
|
|
|
import {fetchSimpleList as fetchProductList} from '@/api/product';
|
|
|
|
|
import {fetchListWithChildren} from '@/api/productCate'
|
|
|
|
|
const defaultCoupon = {
|
|
|
|
|
type: 0,
|
|
|
|
|
name: null,
|
|
|
|
|
platform: 0,
|
|
|
|
|
amount: null,
|
|
|
|
|
perLimit: 1,
|
|
|
|
|
minPoint: null,
|
|
|
|
|
startTime: null,
|
|
|
|
|
endTime: null,
|
|
|
|
|
useType: 0,
|
|
|
|
|
note: null,
|
|
|
|
|
publishCount: null,
|
|
|
|
|
productRelationList: [],
|
|
|
|
|
productCategoryRelationList: []
|
|
|
|
|
};
|
|
|
|
|
const defaultTypeOptions = [
|
|
|
|
|
{
|
|
|
|
|
label: '全场赠券',
|
|
|
|
|
value: 0
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
label: '会员赠券',
|
|
|
|
|
value: 1
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
label: '购物赠券',
|
|
|
|
|
value: 2
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
label: '注册赠券',
|
|
|
|
|
value: 3
|
|
|
|
|
}
|
|
|
|
|
];
|
|
|
|
|
const defaultPlatformOptions = [
|
|
|
|
|
{
|
|
|
|
|
label: '全平台',
|
|
|
|
|
value: 0
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
label: '移动平台',
|
|
|
|
|
value: 1
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
label: 'PC平台',
|
|
|
|
|
value: 2
|
|
|
|
|
}
|
|
|
|
|
];
|
|
|
|
|
var validatePrice = (rule, value, callback) => {
|
|
|
|
|
if (!value) {
|
|
|
|
|
callback(new Error("面额不能为空"));
|
|
|
|
|
} else if (value.split(".").length > 2) {
|
|
|
|
|
callback(new Error("请输入正确格式的金额")); //防止输入多个小数点
|
|
|
|
|
}
|
|
|
|
|
// else if (value > add_Com.Retail_Price) {
|
|
|
|
|
// callback(new Error("金额不能大于零售价"));
|
|
|
|
|
// }
|
|
|
|
|
else {
|
|
|
|
|
value = Math.round(value * Math.pow(10, 2)) / Math.pow(10, 2); //四舍五入
|
|
|
|
|
value = Number(value).toFixed(2); //不足补位
|
|
|
|
|
this.add_Com.Cost_Price = value;
|
|
|
|
|
callback();
|
|
|
|
|
}
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
export default {
|
|
|
|
|
name: 'CouponDetail',
|
|
|
|
|
props: {
|
|
|
|
|
isEdit: {
|
|
|
|
|
type: Boolean,
|
|
|
|
|
default: false
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
data() {
|
|
|
|
|
return {
|
|
|
|
|
coupon: Object.assign({}, defaultCoupon),
|
|
|
|
|
typeOptions: Object.assign({}, defaultTypeOptions),
|
|
|
|
|
platformOptions: Object.assign({}, defaultPlatformOptions),
|
|
|
|
|
rules: {
|
|
|
|
|
name: [
|
|
|
|
|
{required: true, message: '请输入优惠券名称', trigger: 'blur'},
|
|
|
|
|
{min: 2, max: 140, message: '长度在 2 到 140 个字符', trigger: 'blur'}
|
|
|
|
|
],
|
|
|
|
|
publishCount: [
|
|
|
|
|
{type: 'number',required: true, message: '只能输入正整数', trigger: 'blur'}
|
|
|
|
|
],
|
|
|
|
|
// amount: [
|
|
|
|
|
// // {type: 'number',required: true,message: '面值只能是数值，0.01-10000，限2位小数',trigger: 'blur'}
|
|
|
|
|
// // { required: true, validator: validatePrice, trigger: "blur" },
|
|
|
|
|
// ],
|
|
|
|
|
minPoint: [
|
|
|
|
|
{type: 'number',required: true,message: '只能输入正整数',trigger: 'blur'}
|
|
|
|
|
]
|
|
|
|
|
},
|
|
|
|
|
selectProduct:null,
|
|
|
|
|
selectProductLoading: false,
|
|
|
|
|
selectProductOptions:[],
|
|
|
|
|
selectProductCate: null,
|
|
|
|
|
productCateOptions: []
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
created(){
|
|
|
|
|
if(this.isEdit){
|
|
|
|
|
getCoupon(this.$route.query.id).then(response=>{
|
|
|
|
|
this.coupon=response.data;
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
this.getProductCateList();
|
|
|
|
|
},
|
|
|
|
|
methods:{
|
|
|
|
|
UpNumber(val, limit = 2) {
|
|
|
|
|
val = val.replace(/[^\d.]/g, '') // 保留数字
|
|
|
|
|
val = val.replace(/^00/, '0.') // 开头不能有两个0
|
|
|
|
|
val = val.replace(/^\./g, '0.') // 开头为小数点转换为0.
|
|
|
|
|
val = val.replace(/\.{2,}/g, '.') // 两个以上的小数点转换成一个
|
|
|
|
|
val = val.replace('.', '$#$').replace(/\./g, '').replace('$#$', '.'); // 只保留一个小数点
|
|
|
|
|
/^0\d+/.test(val) ? val = val.slice(1) : '' // 两位以上数字开头不能为0
|
|
|
|
|
const str = '^(\\d+)\\.(\\d{' + limit + '}).*$'
|
|
|
|
|
const reg = new RegExp(str)
|
|
|
|
|
if (limit === 0) {
|
|
|
|
|
// 不需要小数点
|
|
|
|
|
val = val.replace(reg, '$1')
|
|
|
|
|
} else {
|
|
|
|
|
// 通过正则保留小数点后指定的位数
|
|
|
|
|
val = val.replace(reg, '$1.$2')
|
|
|
|
|
}
|
|
|
|
|
return val
|
|
|
|
|
},
|
|
|
|
|
onSubmit(formName) {
|
|
|
|
|
this.$refs[formName].validate((valid) => {
|
|
|
|
|
if (valid) {
|
|
|
|
|
this.$confirm('是否提交数据', '提示', {
|
|
|
|
|
confirmButtonText: '确定',
|
|
|
|
|
cancelButtonText: '取消',
|
|
|
|
|
type: 'warning'
|
|
|
|
|
}).then(() => {
|
|
|
|
|
if(this.isEdit){
|
|
|
|
|
updateCoupon(this.$route.query.id,this.coupon).then(response=>{
|
|
|
|
|
this.$refs[formName].resetFields();
|
|
|
|
|
this.$message({
|
|
|
|
|
message: '修改成功',
|
|
|
|
|
type: 'success',
|
|
|
|
|
duration:1000
|
|
|
|
|
});
|
|
|
|
|
this.$router.back();
|
|
|
|
|
});
|
|
|
|
|
}else{
|
|
|
|
|
createCoupon(this.coupon).then(response=>{
|
|
|
|
|
this.$refs[formName].resetFields();
|
|
|
|
|
this.$message({
|
|
|
|
|
message: '提交成功',
|
|
|
|
|
type: 'success',
|
|
|
|
|
duration:1000
|
|
|
|
|
});
|
|
|
|
|
this.$router.back();
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
} else {
|
|
|
|
|
this.$message({
|
|
|
|
|
message: '验证失败',
|
|
|
|
|
type: 'error',
|
|
|
|
|
duration:1000
|
|
|
|
|
});
|
|
|
|
|
return false;
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
},
|
|
|
|
|
resetForm(formName) {
|
|
|
|
|
this.$refs[formName].resetFields();
|
|
|
|
|
this.coupon = Object.assign({},defaultCoupon);
|
|
|
|
|
},
|
|
|
|
|
searchProductMethod(query){
|
|
|
|
|
if (query !== '') {
|
|
|
|
|
this.loading = true;
|
|
|
|
|
fetchProductList({keyword:query}).then(response=>{
|
|
|
|
|
this.loading=false;
|
|
|
|
|
let productList = response.data;
|
|
|
|
|
this.selectProductOptions = [];
|
|
|
|
|
for(let i=0;i<productList.length;i++){
|
|
|
|
|
let item = productList[i];
|
|
|
|
|
this.selectProductOptions.push({productId:item.id,productName:item.name,productSn:item.productSn});
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
} else {
|
|
|
|
|
this.selectProductOptions = [];
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
handleAddProductRelation(){
|
|
|
|
|
if(this.selectProduct===null){
|
|
|
|
|
this.$message({
|
|
|
|
|
message: '请先选择商品',
|
|
|
|
|
type: 'warning'
|
|
|
|
|
});
|
|
|
|
|
return
|
|
|
|
|
}
|
|
|
|
|
this.coupon.productRelationList.push(this.getProductById(this.selectProduct));
|
|
|
|
|
this.selectProduct=null;
|
|
|
|
|
},
|
|
|
|
|
handleDeleteProductRelation(index,row){
|
|
|
|
|
this.coupon.productRelationList.splice(index,1);
|
|
|
|
|
},
|
|
|
|
|
handleAddProductCategoryRelation(){
|
|
|
|
|
if(this.selectProductCate===null||this.selectProductCate.length===0){
|
|
|
|
|
this.$message({
|
|
|
|
|
message: '请先选择商品分类',
|
|
|
|
|
type: 'warning'
|
|
|
|
|
});
|
|
|
|
|
return
|
|
|
|
|
}
|
|
|
|
|
this.coupon.productCategoryRelationList.push(this.getProductCateByIds(this.selectProductCate));
|
|
|
|
|
this.selectProductCate=[];
|
|
|
|
|
},
|
|
|
|
|
handleDeleteProductCateRelation(index,row){
|
|
|
|
|
this.coupon.productCategoryRelationList.splice(index,1);
|
|
|
|
|
},
|
|
|
|
|
getProductById(id){
|
|
|
|
|
for(let i=0;i<this.selectProductOptions.length;i++){
|
|
|
|
|
if(id===this.selectProductOptions[i].productId){
|
|
|
|
|
return this.selectProductOptions[i];
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
return null;
|
|
|
|
|
},
|
|
|
|
|
getProductCateList() {
|
|
|
|
|
fetchListWithChildren().then(response => {
|
|
|
|
|
let list = response.data;
|
|
|
|
|
this.productCateOptions = [];
|
|
|
|
|
for (let i = 0; i < list.length; i++) {
|
|
|
|
|
let children = [];
|
|
|
|
|
if (list[i].children != null && list[i].children.length > 0) {
|
|
|
|
|
for (let j = 0; j < list[i].children.length; j++) {
|
|
|
|
|
children.push({label: list[i].children[j].name, value: list[i].children[j].id});
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
this.productCateOptions.push({label: list[i].name, value: list[i].id, children: children});
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
},
|
|
|
|
|
getProductCateByIds(ids){
|
|
|
|
|
let name;
|
|
|
|
|
let parentName;
|
|
|
|
|
for (let i = 0; i < this.productCateOptions.length; i++) {
|
|
|
|
|
if (this.productCateOptions[i].value === ids[0]) {
|
|
|
|
|
parentName = this.productCateOptions[i].label;
|
|
|
|
|
for (let j = 0; j < this.productCateOptions[i].children.length; j++) {
|
|
|
|
|
if (this.productCateOptions[i].children[j].value === ids[1]) {
|
|
|
|
|
name = this.productCateOptions[i].children[j].label;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
return {productCategoryId: ids[1], productCategoryName: name, parentCategoryName: parentName};
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
</script>
|
|
|
|
|
<style scoped>
|
|
|
|
|
.input-width {
|
|
|
|
|
width: 60%;
|
|
|
|
|
}
|
|
|
|
|
</style>
|
|
|
|
|
|
|
|
|
|
|
