<template>
|
<GlobalWindow
|
:title="title"
|
:visible.sync="visible"
|
width="500px"
|
@confirm="handleConfirm"
|
>
|
<el-form ref="form" :model="form" :rules="rules">
|
<el-form-item label="优惠券名称" prop="name">
|
<el-input v-model="form.name" placeholder="请输入优惠券名称" maxlength="20" show-word-limit></el-input>
|
</el-form-item>
|
<el-form-item label="类型" prop="type">
|
<el-select v-model="form.type" placeholder="请选择类型">
|
<el-option label="平台满减券" :value="0"></el-option>
|
</el-select>
|
</el-form-item>
|
<el-form-item label="优惠规则" prop="limitPrice">
|
<div class="rule-row">
|
<span>订单实付满</span>
|
<el-input v-model="form.limitPrice" placeholder="请输入金额" style="width: 100px; margin: 0 5px;"></el-input>
|
<span>元，减</span>
|
<el-input v-model="form.price" placeholder="请输入金额" style="width: 100px; margin: 0 5px;"></el-input>
|
<span>元</span>
|
</div>
|
</el-form-item>
|
<el-form-item label="使用说明" prop="info">
|
<el-input type="textarea" v-model="form.info" placeholder="请输入使用说明" :rows="3"></el-input>
|
</el-form-item>
|
<el-form-item label="限领规则" prop="pushDays">
|
<div class="rule-row">
|
<span>平台推送后限</span>
|
<el-input v-model.number="form.pushDays" placeholder="请输入天数" style="width: 100px; margin: 0 5px;"></el-input>
|
<span>天领取，否则视为失效</span>
|
</div>
|
</el-form-item>
|
<el-form-item label="限用规则" prop="validDays">
|
<div class="rule-row">
|
<span>领取后限</span>
|
<el-input v-model.number="form.validDays" placeholder="请输入天数" style="width: 100px; margin: 0 5px;"></el-input>
|
<span>天使用，否则视为失效</span>
|
</div>
|
</el-form-item>
|
<el-form-item label="状态" prop="status">
|
<el-switch v-model="form.status" active-color="#67c23a" inactive-color="#909399" :active-value="0" :inactive-value="1"></el-switch>
|
</el-form-item>
|
</el-form>
|
</GlobalWindow>
|
</template>
|
|
<script>
|
import GlobalWindow from '@/components/common/GlobalWindow'
|
import { save, update, getById } from '@/api/business/coupon'
|
|
export default {
|
name: 'OperaCouponEdit',
|
components: { GlobalWindow },
|
data () {
|
return {
|
title: '',
|
visible: false,
|
form: {
|
id: '',
|
name: '',
|
type: 0,
|
limitPrice: '',
|
price: '',
|
info: '',
|
pushDays: '',
|
validDays: '',
|
status: 0
|
},
|
rules: {
|
name: [{ required: true, message: '请输入优惠券名称', trigger: 'blur' }, { max: 20, message: '优惠券名称不能超过20个字符', trigger: 'blur' }],
|
type: [{ required: true, message: '请选择类型', trigger: 'change' }],
|
limitPrice: [{ required: true, message: '请输入满减金额', trigger: 'blur' }, { validator: this.validatePositiveDecimal, trigger: 'blur' }, { validator: this.validateAmountDifference, trigger: 'blur' }],
|
price: [{ required: true, message: '请输入优惠金额', trigger: 'blur' }, { validator: this.validatePositiveDecimal, trigger: 'blur' }],
|
pushDays: [{ required: true, message: '请输入限领天数', trigger: 'blur' }, { validator: this.validatePositiveInteger, trigger: 'blur' }],
|
validDays: [{ required: true, message: '请输入限用天数', trigger: 'blur' }, { validator: this.validatePositiveInteger, trigger: 'blur' }]
|
}
|
}
|
},
|
methods: {
|
open (title, row) {
|
this.title = title
|
this.form = {
|
id: '',
|
name: '',
|
type: 0,
|
limitPrice: '',
|
price: '',
|
info: '',
|
pushDays: '',
|
validDays: '',
|
status: 0
|
}
|
if (row) {
|
this.form = {
|
...row,
|
limitPrice: row.limitPrice ? row.limitPrice / 100 : '',
|
price: row.price ? row.price / 100 : '',
|
info: row.info || '',
|
pushDays: row.pushDays || '',
|
validDays: row.validDays || '',
|
status: row.status !== undefined ? row.status : 0
|
}
|
}
|
this.visible = true
|
},
|
handleConfirm () {
|
this.$refs.form.validate(valid => {
|
if (!valid) return
|
// 元转分
|
const submitForm = {
|
...this.form,
|
limitPrice: this.form.limitPrice ? this.form.limitPrice * 100 : '',
|
price: this.form.price ? this.form.price * 100 : ''
|
}
|
const promise = this.form.id ? update(submitForm) : save(submitForm)
|
promise.then(res => {
|
this.$tip.apiSuccess('操作成功')
|
this.$emit('success')
|
this.visible = false
|
}).catch(e => {
|
this.$tip.apiFailed(e)
|
})
|
})
|
},
|
validatePositiveDecimal (rule, value, callback) {
|
if (value !== null && value !== '' && value !== undefined) {
|
const num = Number(value)
|
if (isNaN(num) || num <= 0) {
|
callback(new Error('必须大于0'))
|
} else {
|
const str = String(num)
|
if (str.includes('.')) {
|
const decimal = str.split('.')[1]
|
if (decimal.length > 2) {
|
callback(new Error('最多支持两位小数'))
|
} else {
|
callback()
|
}
|
} else {
|
callback()
|
}
|
}
|
} else {
|
callback()
|
}
|
},
|
validateAmountDifference (rule, value, callback) {
|
if (this.form.price && value) {
|
const difference = value - this.form.price
|
if (difference <= 10) {
|
callback(new Error('金额差必须大于10元'))
|
} else {
|
callback()
|
}
|
} else {
|
callback()
|
}
|
},
|
validatePositiveInteger (rule, value, callback) {
|
if (value) {
|
const num = parseInt(value)
|
if (isNaN(num) || num <= 0 || !Number.isInteger(num)) {
|
callback(new Error('必须为正整数'))
|
} else {
|
callback()
|
}
|
} else {
|
callback()
|
}
|
}
|
}
|
}
|
</script>
|
|
<style scoped>
|
.rule-row {
|
display: flex;
|
align-items: center;
|
gap: 5px;
|
}
|
</style>
|
