|
|
|
@ -1,33 +1,22 @@ |
|
|
|
<template> |
|
|
|
<el-card class="form-container" shadow="never"> |
|
|
|
<el-form :model="coupon" |
|
|
|
:rules="rules" |
|
|
|
ref="couponFrom" |
|
|
|
label-width="150px" |
|
|
|
size="small"> |
|
|
|
<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> |
|
|
|
<span>全场赠券</span> |
|
|
|
</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> |
|
|
|
|
|
|
|
<span>全平台</span> |
|
|
|
</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"> |
|
|
|
<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> |
|
|
|
@ -43,9 +32,11 @@ |
|
|
|
</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> |
|
|
|
<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-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"> |
|
|
|
@ -55,24 +46,18 @@ |
|
|
|
</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 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 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> |
|
|
|
<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" |
|
|
|
<el-button size="mini" type="text" |
|
|
|
@click="handleDeleteProductCateRelation(scope.$index, scope.row)">删除 |
|
|
|
</el-button> |
|
|
|
</template> |
|
|
|
@ -80,28 +65,17 @@ |
|
|
|
</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" |
|
|
|
<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 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> |
|
|
|
@ -110,8 +84,7 @@ |
|
|
|
</el-table-column> |
|
|
|
<el-table-column label="操作" align="center" width="100"> |
|
|
|
<template slot-scope="scope"> |
|
|
|
<el-button size="mini" |
|
|
|
type="text" |
|
|
|
<el-button size="mini" type="text" |
|
|
|
@click="handleDeleteProductRelation(scope.$index, scope.row)">删除 |
|
|
|
</el-button> |
|
|
|
</template> |
|
|
|
@ -119,12 +92,7 @@ |
|
|
|
</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 class="input-width" type="textarea" :rows="5" placeholder="请输入内容" v-model="coupon.note"> |
|
|
|
</el-input> |
|
|
|
</el-form-item> |
|
|
|
<el-form-item> |
|
|
|
@ -135,9 +103,17 @@ |
|
|
|
</el-card> |
|
|
|
</template> |
|
|
|
<script> |
|
|
|
import {createCoupon,getCoupon,updateCoupon} from '@/api/coupon'; |
|
|
|
import {fetchSimpleList as fetchProductList} from '@/api/product'; |
|
|
|
import {fetchListWithChildren} from '@/api/productCate' |
|
|
|
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, |
|
|
|
@ -153,8 +129,7 @@ |
|
|
|
productRelationList: [], |
|
|
|
productCategoryRelationList: [] |
|
|
|
}; |
|
|
|
const defaultTypeOptions = [ |
|
|
|
{ |
|
|
|
const defaultTypeOptions = [{ |
|
|
|
label: '全场赠券', |
|
|
|
value: 0 |
|
|
|
}, |
|
|
|
@ -171,8 +146,7 @@ |
|
|
|
value: 3 |
|
|
|
} |
|
|
|
]; |
|
|
|
const defaultPlatformOptions = [ |
|
|
|
{ |
|
|
|
const defaultPlatformOptions = [{ |
|
|
|
label: '全平台', |
|
|
|
value: 0 |
|
|
|
}, |
|
|
|
@ -216,20 +190,36 @@ |
|
|
|
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'} |
|
|
|
name: [{ |
|
|
|
required: true, |
|
|
|
message: '请输入优惠券名称', |
|
|
|
trigger: 'blur' |
|
|
|
}, |
|
|
|
{ |
|
|
|
min: 2, |
|
|
|
max: 140, |
|
|
|
message: '长度在 2 到 140 个字符', |
|
|
|
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'} |
|
|
|
] |
|
|
|
publishCount: [{ |
|
|
|
type: 'number', |
|
|
|
required: true, |
|
|
|
message: '只能输入正整数', |
|
|
|
trigger: 'blur' |
|
|
|
}], |
|
|
|
amount: [{ |
|
|
|
|
|
|
|
required: true, |
|
|
|
message: '面值只能是数值，0.01-10000，限2位小数', |
|
|
|
trigger: 'blur' |
|
|
|
}], |
|
|
|
minPoint: [{ |
|
|
|
type: 'number', |
|
|
|
required: true, |
|
|
|
message: '只能输入正整数', |
|
|
|
trigger: 'blur' |
|
|
|
}] |
|
|
|
}, |
|
|
|
selectProduct: null, |
|
|
|
selectProductLoading: false, |
|
|
|
@ -312,13 +302,19 @@ |
|
|
|
searchProductMethod(query) { |
|
|
|
if (query !== '') { |
|
|
|
this.loading = true; |
|
|
|
fetchProductList({keyword:query}).then(response=>{ |
|
|
|
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}); |
|
|
|
this.selectProductOptions.push({ |
|
|
|
productId: item.id, |
|
|
|
productName: item.name, |
|
|
|
productSn: item.productSn |
|
|
|
}); |
|
|
|
} |
|
|
|
}); |
|
|
|
} else { |
|
|
|
@ -369,10 +365,17 @@ |
|
|
|
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}); |
|
|
|
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}); |
|
|
|
this.productCateOptions.push({ |
|
|
|
label: list[i].name, |
|
|
|
value: list[i].id, |
|
|
|
children: children |
|
|
|
}); |
|
|
|
} |
|
|
|
}); |
|
|
|
}, |
|
|
|
@ -389,7 +392,11 @@ |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
return {productCategoryId: ids[1], productCategoryName: name, parentCategoryName: parentName}; |
|
|
|
return { |
|
|
|
productCategoryId: ids[1], |
|
|
|
productCategoryName: name, |
|
|
|
parentCategoryName: parentName |
|
|
|
}; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
@ -399,5 +406,3 @@ |
|
|
|
width: 60%; |
|
|
|
} |
|
|
|
</style> |
|
|
|
|
|
|
|
|
|
|
|
|
