|
|
|
@ -6,11 +6,11 @@ |
|
|
|
<div class="drawer-header"> |
|
|
|
<div style="margin-right: 16px">优惠券配置</div> |
|
|
|
</div> |
|
|
|
<Form ref="form" :model="form" :rules="formValidate" label-position="top"> |
|
|
|
<Form ref="form" :model="form" :rules="currentFormValidate" label-position="top"> |
|
|
|
<Row :gutter="32"> |
|
|
|
<Col span="24"> |
|
|
|
<FormItem label="优惠券名称" prop="name"> |
|
|
|
<Input v-model="form.name" /> |
|
|
|
<Input v-model="form.name" :maxlength="10" /> |
|
|
|
</FormItem> |
|
|
|
</Col> |
|
|
|
</Row> |
|
|
|
@ -21,10 +21,10 @@ |
|
|
|
</FormItem> |
|
|
|
</Col> |
|
|
|
</Row> |
|
|
|
<Row :gutter="32"> |
|
|
|
<Row v-if="!isEdit" :gutter="32"> |
|
|
|
<Col span="24"> |
|
|
|
<FormItem label="适用范围" prop="applyScene"> |
|
|
|
<RadioGroup v-model="form.applyScene"> |
|
|
|
<RadioGroup v-model="form.applyScene" :disabled="isEdit"> |
|
|
|
<Radio label="0">全部</Radio> |
|
|
|
<Radio label="1">外卖/买饭</Radio> |
|
|
|
<Radio label="2">快递/跑腿</Radio> |
|
|
|
@ -33,48 +33,48 @@ |
|
|
|
</FormItem> |
|
|
|
</Col> |
|
|
|
</Row> |
|
|
|
<Row :gutter="32"> |
|
|
|
<Row v-if="!isEdit" :gutter="32"> |
|
|
|
<Col span="24"> |
|
|
|
<FormItem label="使用门槛"> |
|
|
|
<RadioGroup v-model="form.type"> |
|
|
|
<FormItem label="使用门槛" prop="type"> |
|
|
|
<RadioGroup v-model="form.type" :disabled="isEdit"> |
|
|
|
<Radio label="2">无门槛</Radio> |
|
|
|
<Radio label="1">满<Input v-model='form.minAmount' style="width: 50px;"></Input >元可使用</Radio> |
|
|
|
<Radio label="1">满<Input v-model='form.minAmount' style="width: 70px;" :disabled="isEdit"></Input >元可使用</Radio> |
|
|
|
</RadioGroup> |
|
|
|
</FormItem> |
|
|
|
</Col> |
|
|
|
</Row> |
|
|
|
<Row :gutter="32"> |
|
|
|
<Row v-if="!isEdit" :gutter="32"> |
|
|
|
<Col span="24"> |
|
|
|
<FormItem label="规则类型"> |
|
|
|
<RadioGroup v-model="form.ruleType"> |
|
|
|
<RadioGroup v-model="form.ruleType" :disabled="isEdit"> |
|
|
|
<Radio label="1">其他</Radio> |
|
|
|
<Radio label="0">邀新奖励</Radio> |
|
|
|
</RadioGroup> |
|
|
|
</FormItem> |
|
|
|
</Col> |
|
|
|
</Row> |
|
|
|
<Row :gutter="32"> |
|
|
|
<Row v-if="!isEdit" :gutter="32"> |
|
|
|
<Col span="24"> |
|
|
|
<FormItem label="优惠金额"> |
|
|
|
<Input v-model='form.discountAmount'></Input> |
|
|
|
<FormItem label="优惠金额" prop="discountAmount"> |
|
|
|
<Input v-model='form.discountAmount' :disabled="isEdit"></Input> |
|
|
|
</FormItem> |
|
|
|
</Col> |
|
|
|
</Row> |
|
|
|
<Row :gutter="32"> |
|
|
|
<Row v-if="!isEdit" :gutter="32"> |
|
|
|
<Col span="24"> |
|
|
|
<FormItem label="每人限领数量"> |
|
|
|
<Input v-model='form.limitPerUser'></Input> |
|
|
|
<FormItem label="每人限领数量" prop="limitPerUser"> |
|
|
|
<Input v-model='form.limitPerUser' :disabled="isEdit"></Input> |
|
|
|
</FormItem> |
|
|
|
</Col> |
|
|
|
</Row> |
|
|
|
|
|
|
|
<Row :gutter="32"> |
|
|
|
<Row v-if="!isEdit" :gutter="32"> |
|
|
|
<Col span="24"> |
|
|
|
<FormItem label="有效期"> |
|
|
|
<RadioGroup v-model="form.validType" vertical> |
|
|
|
<FormItem label="有效期" prop="validType"> |
|
|
|
<RadioGroup v-model="form.validType" vertical :disabled="isEdit"> |
|
|
|
<Radio label="1">固定日期</Radio> |
|
|
|
<DatePicker @on-change="changeDate" v-if="form.validType == '1'" type="daterange" split-panels placeholder="选择起始时间" style="width: 200px"></DatePicker> |
|
|
|
<Radio label="2">领券后<Input v-model='form.validDays' style="width: 50px;"></Input >天有效</Radio> |
|
|
|
<DatePicker @on-change="changeDate" v-if="form.validType == '1'" type="datetimerange" format="yyyy-MM-dd HH:mm:ss" split-panels placeholder="选择起止时间" style="width: 320px" :options="datePickerOptions" :disabled="isEdit"></DatePicker> |
|
|
|
<Radio label="2">领券后<Input v-model='form.validDays' style="width: 70px;" :disabled="isEdit"></Input >天有效</Radio> |
|
|
|
</RadioGroup> |
|
|
|
|
|
|
|
</FormItem> |
|
|
|
@ -119,6 +119,70 @@ |
|
|
|
}, |
|
|
|
}, |
|
|
|
data() { |
|
|
|
const validateIntegerRange = (value, min, max, message, callback) => { |
|
|
|
const val = String(value === undefined || value === null ? "" : value).trim(); |
|
|
|
if (!/^\d+$/.test(val)) { |
|
|
|
callback(new Error(message)); |
|
|
|
return false; |
|
|
|
} |
|
|
|
const num = Number(val); |
|
|
|
if (num < min || num > max) { |
|
|
|
callback(new Error(message)); |
|
|
|
return false; |
|
|
|
} |
|
|
|
return true; |
|
|
|
}; |
|
|
|
const validateMinAmount = (rule, value, callback) => { |
|
|
|
if (this.form.type !== "1") { |
|
|
|
callback(); |
|
|
|
return; |
|
|
|
} |
|
|
|
if (validateIntegerRange(this.form.minAmount, 1, 200, "满多少可用金额必须是1-200的整数", callback)) { |
|
|
|
callback(); |
|
|
|
} |
|
|
|
}; |
|
|
|
const validateDiscountAmount = (rule, value, callback) => { |
|
|
|
const val = String(value === undefined || value === null ? "" : value).trim(); |
|
|
|
if (!/^\d+(\.\d{1,2})?$/.test(val)) { |
|
|
|
callback(new Error("优惠金额最多2位小数，范围0.1-200")); |
|
|
|
return; |
|
|
|
} |
|
|
|
const num = Number(val); |
|
|
|
if (num < 0.1 || num > 200) { |
|
|
|
callback(new Error("优惠金额最多2位小数，范围0.1-200")); |
|
|
|
return; |
|
|
|
} |
|
|
|
callback(); |
|
|
|
}; |
|
|
|
const validateLimitPerUser = (rule, value, callback) => { |
|
|
|
if (validateIntegerRange(value, 1, 99, "每人限领数量必须是1-99的整数", callback)) { |
|
|
|
callback(); |
|
|
|
} |
|
|
|
}; |
|
|
|
const validateValidType = (rule, value, callback) => { |
|
|
|
if (this.form.validType === "1") { |
|
|
|
if (!this.form.validStartTime || !this.form.validEndTime) { |
|
|
|
callback(new Error("请选择固定日期有效期")); |
|
|
|
return; |
|
|
|
} |
|
|
|
const startTime = this.parseDateTime(this.form.validStartTime).getTime(); |
|
|
|
const endTime = this.parseDateTime(this.form.validEndTime).getTime(); |
|
|
|
const now = Date.now(); |
|
|
|
if (!startTime || !endTime || startTime <= now || endTime <= now || endTime <= startTime) { |
|
|
|
callback(new Error("固定日期必须设置为当前时间之后，且结束时间晚于开始时间")); |
|
|
|
return; |
|
|
|
} |
|
|
|
callback(); |
|
|
|
return; |
|
|
|
} |
|
|
|
if (this.form.validType === "2") { |
|
|
|
if (validateIntegerRange(this.form.validDays, 1, 200, "领券后有效天数必须是1-200的整数", callback)) { |
|
|
|
callback(); |
|
|
|
} |
|
|
|
return; |
|
|
|
} |
|
|
|
callback(new Error("请选择有效期")); |
|
|
|
}; |
|
|
|
return { |
|
|
|
menkan:'', |
|
|
|
xianzhi:'', |
|
|
|
@ -131,59 +195,170 @@ |
|
|
|
passColor: "", |
|
|
|
submitLoading: false, |
|
|
|
maxHeight: 510, |
|
|
|
form: { |
|
|
|
name: '', //优惠券名称 |
|
|
|
applyScene:'', //适用场景：0-通用，1-外卖/买饭，2-快递/跑腿，3-二手物品交易、4团购 |
|
|
|
type:'', //优惠券类型：1-满减券，2-无门槛直减券 |
|
|
|
minAmount:'', //使用门槛金额 |
|
|
|
discountAmount:'', //抵扣面额 |
|
|
|
totalCount:'', //发行总数 |
|
|
|
limitPerUser:1, //每人最多限领张数 |
|
|
|
validType:'', //有效期类型：1-绝对时间段有效，2-领取后相对天数有效 |
|
|
|
validStartTime:'', //有效期开始时间 |
|
|
|
validEndTime:'', //有效期结束时间 |
|
|
|
validDays:'', //自领取之日起有效天数 |
|
|
|
ruleType:1, |
|
|
|
issuerType:1, //发放方：1-平台，2-商家 |
|
|
|
issuerId:0, //发放方ID 0-平台 |
|
|
|
status:1, //状态：0-已下架/停发，1-发放中 |
|
|
|
regionId:JSON.parse(this.getStore("user")).departmentId, //学校id |
|
|
|
datePickerOptions: { |
|
|
|
disabledDate(date) { |
|
|
|
const today = new Date(); |
|
|
|
today.setHours(0, 0, 0, 0); |
|
|
|
return date && date.valueOf() < today.valueOf(); |
|
|
|
} |
|
|
|
}, |
|
|
|
form: this.getDefaultForm(), |
|
|
|
formValidate: { |
|
|
|
// 表单验证规则 |
|
|
|
name: [{ |
|
|
|
required: true, |
|
|
|
message: "请输入优惠券名称", |
|
|
|
trigger: "change" |
|
|
|
}, { |
|
|
|
max: 10, |
|
|
|
message: "优惠券名称不能超过10个字", |
|
|
|
trigger: "change" |
|
|
|
}, ], |
|
|
|
totalCount: [{ |
|
|
|
required: true, |
|
|
|
message: "请输入发券总数量", |
|
|
|
trigger: "change" |
|
|
|
}, ], |
|
|
|
applyScene: [{ |
|
|
|
required: true, |
|
|
|
message: "请选择适用范围", |
|
|
|
trigger: "change" |
|
|
|
}, ], |
|
|
|
type: [{ |
|
|
|
required: true, |
|
|
|
message: "请选择使用门槛", |
|
|
|
trigger: "change" |
|
|
|
}, { |
|
|
|
validator: validateMinAmount, |
|
|
|
trigger: "change" |
|
|
|
}, ], |
|
|
|
contacts: [{ |
|
|
|
discountAmount: [{ |
|
|
|
required: true, |
|
|
|
message: "请输入联系人", |
|
|
|
message: "请输入优惠金额", |
|
|
|
trigger: "change" |
|
|
|
}, { |
|
|
|
validator: validateDiscountAmount, |
|
|
|
trigger: "change" |
|
|
|
}, ], |
|
|
|
mobile: [{ |
|
|
|
limitPerUser: [{ |
|
|
|
required: true, |
|
|
|
message: "请输入手机号", |
|
|
|
message: "请输入每人限领数量", |
|
|
|
trigger: "change" |
|
|
|
}, { |
|
|
|
validator: validateLimitPerUser, |
|
|
|
trigger: "change" |
|
|
|
}, ], |
|
|
|
validType: [{ |
|
|
|
validator: validateValidType, |
|
|
|
trigger: "change" |
|
|
|
}, ], |
|
|
|
}, |
|
|
|
}; |
|
|
|
}, |
|
|
|
computed: { |
|
|
|
isEdit() { |
|
|
|
return this.type == "1"; |
|
|
|
}, |
|
|
|
currentFormValidate() { |
|
|
|
if (this.isEdit) { |
|
|
|
return { |
|
|
|
name: this.formValidate.name, |
|
|
|
totalCount: this.formValidate.totalCount, |
|
|
|
}; |
|
|
|
} |
|
|
|
return this.formValidate; |
|
|
|
}, |
|
|
|
}, |
|
|
|
methods: { |
|
|
|
getDefaultForm() { |
|
|
|
return { |
|
|
|
name: '', //优惠券名称 |
|
|
|
applyScene:'', //适用场景：0-通用，1-外卖/买饭，2-快递/跑腿，3-二手物品交易、4团购 |
|
|
|
type:'', //优惠券类型：1-满减券，2-无门槛直减券 |
|
|
|
minAmount:'', //使用门槛金额 |
|
|
|
discountAmount:'', //抵扣面额 |
|
|
|
totalCount:'', //发行总数 |
|
|
|
limitPerUser:1, //每人最多限领张数 |
|
|
|
validType:'', //有效期类型：1-绝对时间段有效，2-领取后相对天数有效 |
|
|
|
validStartTime:'', //有效期开始时间 |
|
|
|
validEndTime:'', //有效期结束时间 |
|
|
|
validDays:'', //自领取之日起有效天数 |
|
|
|
ruleType:"1", |
|
|
|
issuerType:1, //发放方：1-平台，2-商家 |
|
|
|
issuerId:0, //发放方ID 0-平台 |
|
|
|
status:1, //状态：0-已下架/停发，1-发放中 |
|
|
|
regionId:JSON.parse(this.getStore("user")).departmentId, //学校id |
|
|
|
}; |
|
|
|
}, |
|
|
|
init() { |
|
|
|
|
|
|
|
}, |
|
|
|
changeDate(v){ |
|
|
|
this.form.validStartTime = v[0] |
|
|
|
this.form.validEndTime = v[1] |
|
|
|
this.$refs.form.validateField("validType"); |
|
|
|
}, |
|
|
|
parseDateTime(value) { |
|
|
|
if (!value) { |
|
|
|
return null; |
|
|
|
} |
|
|
|
if (value instanceof Date) { |
|
|
|
return isNaN(value.getTime()) ? null : value; |
|
|
|
} |
|
|
|
const match = String(value).match(/^(\d{4})-(\d{2})-(\d{2})[ T](\d{2}):(\d{2}):(\d{2})$/); |
|
|
|
if (match) { |
|
|
|
const parts = match.map(Number); |
|
|
|
const date = new Date(parts[1], parts[2] - 1, parts[3], parts[4], parts[5], parts[6]); |
|
|
|
return isNaN(date.getTime()) ? null : date; |
|
|
|
} |
|
|
|
const date = new Date(value); |
|
|
|
return isNaN(date.getTime()) ? null : date; |
|
|
|
}, |
|
|
|
formatDateTimeForSubmit(value) { |
|
|
|
const date = this.parseDateTime(value); |
|
|
|
if (!date) { |
|
|
|
return value; |
|
|
|
} |
|
|
|
const pad = (num, size = 2) => String(num).padStart(size, "0"); |
|
|
|
const offset = -date.getTimezoneOffset(); |
|
|
|
const sign = offset >= 0 ? "+" : "-"; |
|
|
|
const offsetHour = pad(Math.floor(Math.abs(offset) / 60)); |
|
|
|
const offsetMinute = pad(Math.abs(offset) % 60); |
|
|
|
return `${date.getFullYear()}-${pad(date.getMonth() + 1)}-${pad(date.getDate())}T${pad(date.getHours())}:${pad(date.getMinutes())}:${pad(date.getSeconds())}.${pad(date.getMilliseconds(), 3)}${sign}${offsetHour}:${offsetMinute}`; |
|
|
|
}, |
|
|
|
getSubmitForm() { |
|
|
|
const form = Object.assign({}, this.form); |
|
|
|
if (this.type == "1") { |
|
|
|
return { |
|
|
|
id: form.id, |
|
|
|
name: form.name, |
|
|
|
totalCount: form.totalCount, |
|
|
|
}; |
|
|
|
} |
|
|
|
if (this.type != "1") { |
|
|
|
delete form.id; |
|
|
|
} |
|
|
|
if (form.type !== "1") { |
|
|
|
form.minAmount = ""; |
|
|
|
} |
|
|
|
if (form.validType === "1") { |
|
|
|
form.validStartTime = this.formatDateTimeForSubmit(form.validStartTime); |
|
|
|
form.validEndTime = this.formatDateTimeForSubmit(form.validEndTime); |
|
|
|
form.validDays = ""; |
|
|
|
} else if (form.validType === "2") { |
|
|
|
form.validStartTime = ""; |
|
|
|
form.validEndTime = ""; |
|
|
|
} |
|
|
|
return form; |
|
|
|
}, |
|
|
|
submit() { |
|
|
|
this.$refs.form.validate((valid) => { |
|
|
|
if (valid) { |
|
|
|
const submitForm = this.getSubmitForm(); |
|
|
|
if (this.type == "1") { |
|
|
|
// 编辑 |
|
|
|
this.submitLoading = true; |
|
|
|
editCoupon(this.form).then((res) => { |
|
|
|
editCoupon(submitForm).then((res) => { |
|
|
|
this.submitLoading = false; |
|
|
|
if (res.success) { |
|
|
|
this.$Message.success("操作成功"); |
|
|
|
@ -194,7 +369,7 @@ |
|
|
|
} else { |
|
|
|
// 添加1 |
|
|
|
this.submitLoading = true; |
|
|
|
addCoupon(this.form).then((res) => { |
|
|
|
addCoupon(submitForm).then((res) => { |
|
|
|
this.submitLoading = false; |
|
|
|
if (res.success) { |
|
|
|
this.$Message.success("操作成功"); |
|
|
|
@ -223,15 +398,19 @@ |
|
|
|
this.maxHeight = "100%"; |
|
|
|
} |
|
|
|
// 清空数据 |
|
|
|
this.$refs.form.resetFields(); |
|
|
|
if (this.$refs.form) { |
|
|
|
this.$refs.form.resetFields(); |
|
|
|
} |
|
|
|
this.form = this.getDefaultForm(); |
|
|
|
if (this.type == "0" || this.type == "1") { |
|
|
|
// 回显数据 |
|
|
|
let data = this.data; |
|
|
|
// 回显 |
|
|
|
this.form = data; |
|
|
|
this.form = Object.assign(this.getDefaultForm(), data); |
|
|
|
this.form.applyScene = JSON.stringify(this.form.applyScene) |
|
|
|
this.form.type = JSON.stringify(this.form.type) |
|
|
|
this.form.validType = JSON.stringify(this.form.validType) |
|
|
|
this.form.ruleType = JSON.stringify(this.form.ruleType) |
|
|
|
|
|
|
|
} |
|
|
|
this.visible = value; |
|
|
|
|
wangfukang
2 weeks ago