|
|
|
@ -1,14 +1,412 @@ |
|
|
|
<template> |
|
|
|
<coupon-detail :isEdit="true"></coupon-detail> |
|
|
|
<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="优惠券类型："> |
|
|
|
<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="适用平台："> |
|
|
|
|
|
|
|
<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"> |
|
|
|
<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="datetime" placeholder="选择日期" v-model="coupon.startTime" default-time="00:00:00" |
|
|
|
style="width:200px"> |
|
|
|
</el-date-picker> |
|
|
|
<span style="margin-left:5px;margin-right: 5px">至</span> |
|
|
|
<el-date-picker type="datetime" placeholder="选择日期" v-model="coupon.endTime" default-time="23:59:59" |
|
|
|
style="width: 200px"> |
|
|
|
</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 type="info" size="small" @click="handleReturn()">关闭</el-button> |
|
|
|
</el-form-item> |
|
|
|
</el-form> |
|
|
|
</el-card> |
|
|
|
</template> |
|
|
|
<script> |
|
|
|
import CouponDetail from './components/CouponDetail' |
|
|
|
export default { |
|
|
|
name: 'updateCoupon', |
|
|
|
components: { CouponDetail } |
|
|
|
import { |
|
|
|
createCoupon, |
|
|
|
getCoupon, |
|
|
|
updateCoupon |
|
|
|
} from '@/api/coupon/coupon'; |
|
|
|
import { |
|
|
|
fetchSimpleList as fetchProductList, |
|
|
|
simpleProductList as simpleProductList |
|
|
|
} 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', |
|
|
|
|
|
|
|
data() { |
|
|
|
return { |
|
|
|
id:'', |
|
|
|
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: [{ |
|
|
|
|
|
|
|
required: true, |
|
|
|
message: '面值只能是数值，0.01-10000，限2位小数', |
|
|
|
trigger: 'blur' |
|
|
|
}], |
|
|
|
minPoint: [{ |
|
|
|
type: 'number', |
|
|
|
required: true, |
|
|
|
message: '只能输入正整数', |
|
|
|
trigger: 'blur' |
|
|
|
}] |
|
|
|
}, |
|
|
|
selectProduct: null, |
|
|
|
selectProductLoading: false, |
|
|
|
selectProductOptions: [], |
|
|
|
selectProductCate: null, |
|
|
|
productCateOptions: [] |
|
|
|
} |
|
|
|
}, |
|
|
|
created() { |
|
|
|
this.getProductCateList(); |
|
|
|
}, |
|
|
|
methods: { |
|
|
|
showUpdate(id){ |
|
|
|
this.id=id; |
|
|
|
getCoupon(id).then(response => { |
|
|
|
this.coupon = response.data; |
|
|
|
}); |
|
|
|
}, |
|
|
|
handleReturn() { |
|
|
|
this.$emit('doback') |
|
|
|
}, |
|
|
|
dateChange(val) { |
|
|
|
console.log("val", val) |
|
|
|
}, |
|
|
|
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) { |
|
|
|
if(parseFloat(this.coupon.amount)>=parseFloat(this.coupon.minPoint)){ |
|
|
|
this.$message({ |
|
|
|
message: '优惠券面值金额须小于使用门槛金额', |
|
|
|
type: 'error', |
|
|
|
duration: 1000 |
|
|
|
}); |
|
|
|
return false; |
|
|
|
} |
|
|
|
|
|
|
|
this.$confirm('是否提交数据', '提示', { |
|
|
|
confirmButtonText: '确定', |
|
|
|
cancelButtonText: '取消', |
|
|
|
type: 'warning' |
|
|
|
}).then(() => { |
|
|
|
updateCoupon(this.id, 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; |
|
|
|
simpleProductList({ |
|
|
|
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> |
|
|
|
|
|
|
|
|
|
|
|
|
djz236@163.com
1 year ago