|
@@ -1,4 +1,4 @@
|
|
|
-<template>
|
|
|
+<template>
|
|
|
<el-card class="form-container" shadow="never">
|
|
|
<el-form :model="coupon"
|
|
|
:rules="rules"
|
|
@@ -6,125 +6,55 @@
|
|
|
label-width="150px"
|
|
|
size="small">
|
|
|
<el-form-item label="优惠券类型:">
|
|
|
- <el-select v-model="coupon.type">
|
|
|
+ <el-select v-model="coupon.type" class="input-width">
|
|
|
<el-option
|
|
|
- v-for="type in typeOptions"
|
|
|
- :key="type.value"
|
|
|
- :label="type.label"
|
|
|
- :value="type.value">
|
|
|
+ v-for="(type,key) in type"
|
|
|
+ :key="key"
|
|
|
+ :label="type"
|
|
|
+ :value="Number(key)">
|
|
|
</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-input v-model="coupon.name" class="input-width" placeholder="优惠券名称"></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-form-item label="总发行量:" prop="publishCount">
|
|
|
<el-input v-model.number="coupon.publishCount" placeholder="只能输入正整数" class="input-width"></el-input>
|
|
|
- </el-form-item>
|
|
|
+ </el-form-item> -->
|
|
|
<el-form-item label="面额:" prop="amount">
|
|
|
- <el-input v-model.number="coupon.amount" placeholder="面值只能是数值,限2位小数" class="input-width">
|
|
|
+ <el-input v-model.number="coupon.amount" placeholder="只能是数值,限2位小数" class="input-width">
|
|
|
<template slot="append">元</template>
|
|
|
</el-input>
|
|
|
</el-form-item>
|
|
|
- <el-form-item label="每人限领:">
|
|
|
+ <el-form-item label="售价:" prop="sellingPrice">
|
|
|
+ <el-input v-model.number="coupon.sellingPrice" 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">
|
|
|
+ </el-form-item> -->
|
|
|
+ <el-form-item label="使用门槛:" prop="threshold">
|
|
|
+ <el-input v-model.number="coupon.threshold" placeholder="只能输入正整数" class="input-width">
|
|
|
<template slot="prepend">满</template>
|
|
|
<template slot="append">元可用</template>
|
|
|
</el-input>
|
|
|
</el-form-item>
|
|
|
- <el-form-item label="领取日期:" prop="enableTime">
|
|
|
- <el-date-picker type="date" placeholder="选择日期" v-model="coupon.enableTime" class="input-width"></el-date-picker>
|
|
|
+ <el-form-item label="领取日期:" prop="available_time">
|
|
|
+ <el-date-picker type="date" placeholder="选择日期" v-model="coupon.availableTime" value-format="yyyy-MM-dd" class="input-width"></el-date-picker>
|
|
|
</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-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.expirationTime" value-format="yyyy-MM-dd" class="input-width"></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 label="使用范围:">
|
|
|
+ <el-checkbox-group v-model="coupon.useScopes">
|
|
|
+ <el-checkbox v-for="(useScope,key,index) in useScopes" :label="Number(key)" :key="index">{{useScope}}</el-checkbox>
|
|
|
+ </el-checkbox-group>
|
|
|
</el-form-item>
|
|
|
<el-form-item label="备注:">
|
|
|
<el-input
|
|
@@ -132,67 +62,33 @@
|
|
|
type="textarea"
|
|
|
:rows="5"
|
|
|
placeholder="请输入内容"
|
|
|
- v-model="coupon.note">
|
|
|
+ v-model="coupon.remark">
|
|
|
</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-button type="primary" @click="onSubmit('couponFrom')" :loading="loading">提交</el-button>
|
|
|
+ <el-button v-if="!isEdit" @click="resetForm('couponFrom')" :loading="loading">重置</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'
|
|
|
+ import voucherConstants from '../common/constants'
|
|
|
+ import {formatDate} from '@/utils/date';
|
|
|
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: []
|
|
|
+ type: 0,//类型
|
|
|
+ name: null,//名称
|
|
|
+ amount: null,//当为折扣券时,为折扣百分比,当为金额券时,为金额
|
|
|
+ availableTime: formatDate(new Date(),'yyyy-MM-dd'),//可领取时间
|
|
|
+ expirationTime: null,//使用期限
|
|
|
+ useScopes:[1,2,3,4],//使用范围
|
|
|
+ state:1,//状态
|
|
|
+ remark: null,//备注
|
|
|
+ threshold: 0,//使用门槛
|
|
|
+ sellingPrice: 0,//售价
|
|
|
+ getWay: 1,//获取方式
|
|
|
};
|
|
|
- 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
|
|
|
- }
|
|
|
- ];
|
|
|
+
|
|
|
export default {
|
|
|
name: 'CouponDetail',
|
|
|
props: {
|
|
@@ -204,37 +100,33 @@
|
|
|
data() {
|
|
|
return {
|
|
|
coupon: Object.assign({}, defaultCoupon),
|
|
|
- typeOptions: Object.assign({}, defaultTypeOptions),
|
|
|
- platformOptions: Object.assign({}, defaultPlatformOptions),
|
|
|
+ type:voucherConstants.type,
|
|
|
+ useScopes:voucherConstants.useScopes,
|
|
|
rules: {
|
|
|
name: [
|
|
|
{required: true, message: '请输入优惠券名称', trigger: 'blur'},
|
|
|
{min: 2, max: 140, message: '长度在 2 到 140 个字符', trigger: 'blur'}
|
|
|
],
|
|
|
- publishCount: [
|
|
|
- {type: 'number',required: true, message: '只能输入正整数', trigger: 'blur'}
|
|
|
- ],
|
|
|
+ // publishCount: [
|
|
|
+ // {type: 'number',required: true, message: '只能输入正整数', trigger: 'blur'}
|
|
|
+ // ],
|
|
|
amount: [
|
|
|
{type: 'number',required: true,message: '面值只能是数值,0.01-10000,限2位小数',trigger: 'blur'}
|
|
|
],
|
|
|
- minPoint: [
|
|
|
+ threshold: [
|
|
|
{type: 'number',required: true,message: '只能输入正整数',trigger: 'blur'}
|
|
|
]
|
|
|
},
|
|
|
- selectProduct:null,
|
|
|
- selectProductLoading: false,
|
|
|
- selectProductOptions:[],
|
|
|
- selectProductCate: null,
|
|
|
- productCateOptions: []
|
|
|
+ loading:false
|
|
|
}
|
|
|
},
|
|
|
created(){
|
|
|
if(this.isEdit){
|
|
|
- getCoupon(this.$route.query.id).then(response=>{
|
|
|
+ this.$api.queryVectorDetail({id:this.$route.query.id}).then(response=>{
|
|
|
this.coupon=response.data;
|
|
|
});
|
|
|
}
|
|
|
- this.getProductCateList();
|
|
|
+ // this.getProductCateList();
|
|
|
},
|
|
|
methods:{
|
|
|
onSubmit(formName) {
|
|
@@ -245,8 +137,10 @@
|
|
|
cancelButtonText: '取消',
|
|
|
type: 'warning'
|
|
|
}).then(() => {
|
|
|
+ this.loading = true
|
|
|
if(this.isEdit){
|
|
|
- updateCoupon(this.$route.query.id,this.coupon).then(response=>{
|
|
|
+ this.$api.editVoucher(this.coupon).then(response=>{
|
|
|
+ this.loading = false
|
|
|
this.$refs[formName].resetFields();
|
|
|
this.$message({
|
|
|
message: '修改成功',
|
|
@@ -254,9 +148,12 @@
|
|
|
duration:1000
|
|
|
});
|
|
|
this.$router.back();
|
|
|
- });
|
|
|
+ }).catch(error=>{
|
|
|
+ this.loading = false
|
|
|
+ })
|
|
|
}else{
|
|
|
- createCoupon(this.coupon).then(response=>{
|
|
|
+ this.$api.addVoucher(this.coupon).then(response=>{
|
|
|
+ this.loading = false
|
|
|
this.$refs[formName].resetFields();
|
|
|
this.$message({
|
|
|
message: '提交成功',
|
|
@@ -264,7 +161,9 @@
|
|
|
duration:1000
|
|
|
});
|
|
|
this.$router.back();
|
|
|
- });
|
|
|
+ }).catch(error=>{
|
|
|
+ this.loading = false
|
|
|
+ })
|
|
|
}
|
|
|
});
|
|
|
} else {
|
|
@@ -281,88 +180,88 @@
|
|
|
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};
|
|
|
- }
|
|
|
+ // 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>
|