<template>
<div class="add-edit-coupon">
<el-dialog title="商品优惠券" top="10vh" :visible.sync="dialogVisible" width="660px" :before-close="handleClose">
<div class="add-edit-coupon-cont">
<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
<el-form-item label="优惠券类型" prop="couponType">
<div class="add-edit-coupon-item-cont">商品优惠券</div>
</el-form-item>
<el-form-item label="优惠券名称" prop="couponName">
<el-input v-model="ruleForm.couponName" maxlength="14" placeholder="请输入优惠券名称" show-word-limit></el-input>
</el-form-item>
<el-form-item label="优惠券简介" prop="briefIntroduction">
<el-input type="textarea" maxlength="40" placeholder="请输入优惠券简介" v-model="ruleForm.briefIntroduction" show-word-limit></el-input>
</el-form-item>
<el-form-item label="优惠方式" prop="couponType">
<el-radio-group v-model="ruleForm.couponType">
<el-radio :label="1">折扣券</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="折扣力度" prop="deductionPrice">
<el-input type="number" v-model="ruleForm.deductionPrice">
<template slot="append">折</template>
</el-input>
</el-form-item>
<el-form-item label="使用范围" prop="toolApplicationIdList">
<el-checkbox-group v-model="ruleForm.toolApplicationIdList">
<el-checkbox label="5" name="toolApplicationIdList">现场投票</el-checkbox>
<el-checkbox label="2" name="toolApplicationIdList">H5聚合页</el-checkbox>
<el-checkbox label="4" name="toolApplicationIdList">投票评选</el-checkbox>
<el-checkbox label="1" name="toolApplicationIdList">大屏抽奖</el-checkbox>
</el-checkbox-group>
</el-form-item>
<el-form-item label="领取方式" prop="payment">
<el-radio-group v-model="ruleForm.payment">
<el-radio :label="1">自动发放</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="可用日期" prop="availabilityDate">
<el-input type="number" v-model="ruleForm.availabilityDate">
<template slot="prepend">领劵后</template>
<template slot="append">天</template>
</el-input>
</el-form-item>
<el-form-item label="发放条件" prop="distributionConditions">
<el-select v-model="ruleForm.distributionConditions" placeholder="完成首单后发放">
<el-option label="完成首单后发放" value="1"></el-option>
</el-select>
</el-form-item>
<el-form-item label="是否上线" prop="status">
<el-radio-group v-model="ruleForm.status">
<el-radio :label="1">是</el-radio>
<el-radio :label="0">否</el-radio>
</el-radio-group>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer flex-center">
<el-button @click="dialogVisible = false">取 消</el-button>
<!-- 编辑改保存 -->
<el-button type="primary" @click="submitForm('ruleForm')">{{ isAdd ? '创 建' : '保 存' }}</el-button>
</div>
</div>
</el-dialog>
</div>
</template>
<script>
export default {
components: {},
props: {
value: {
type: Boolean,
},
isAdd: {
type: Number,
default: 0,
},
productCouponItem: {
type: Object,
default: () => {},
},
},
watch: {
productCouponItem: {
handler(value, oldValue) {
if (value) {
this.ruleForm = value
if (value.distributionConditions == 1) {
this.ruleForm.distributionConditions = '完成首单后发放'
}
}
},
},
isAdd: {
handler(value, oldValue) {
if (value == 1) {
// 1为新增，新增时重置表单数据，ruleForm为form的ref的名称
// 1为新增，新增时重置表单数据，ruleForm为form的ref的名称
this.ruleForm = {
toolCouponId: '',
couponName: '', //优惠券名称
briefIntroduction: '', //优惠券简介
couponType: 1, //优惠方式：1 折扣券
deductionPrice: '', //折扣力度
payment: 1, //领取方式:1 自动发放
toolApplicationIdList: [], //使用范围
availabilityDate: '', //可用日期
distributionConditions: '', //发放条件
status: '', //优惠码状态： 1上线 0下架
}
if (typeof this.$refs.ruleForm !== 'undefined') {
this.$refs['ruleForm'].resetFields()
}
}
},
},
'ruleForm.deductionPrice': {
handler(value, oldValue) {
if (value) {
this.ruleForm.deductionPrice = value.toString().replace(/^\D*(\d*(?:\.\d{0,1})?).*$/g, '$1') //保留一位小数
}
},
},
'ruleForm.availabilityDate': {
handler(value, oldValue) {
if (value) {
this.ruleForm.deductionPrice = value.toString().replace(/^\D*(\d*(?:\.\d{0,1})?).*$/g, '$1') //保留一位小数
}
},
},
},
data() {
return {
ruleForm: {
toolCouponId: '',
couponName: '', //优惠券名称
briefIntroduction: '', //优惠券简介
couponType: 1, //优惠方式：1 折扣券
deductionPrice: '', //折扣力度
payment: 1, //领取方式:1 自动发放
toolApplicationIdList: [], //使用范围
availabilityDate: '', //可用日期
distributionConditions: '', //发放条件
status: '', //优惠码状态： 1上线 0下架
},
rules: {
couponName: [
{ required: true, message: '请输入优惠券名称', trigger: 'blur' },
{ min: 1, max: 14, message: '长度在 1 到 14个字符', trigger: 'blur' },
],
briefIntroduction: [
{ required: true, message: '请输入优惠券名称', trigger: 'blur' },
{ min: 1, max: 40, message: '长度在 1 到 40个字符', trigger: 'blur' },
],
couponType: [{ required: true, message: '请选择优惠方式', trigger: 'change' }],
deductionPrice: [{ required: true, message: '请输入折扣力度', trigger: 'blur' }],
toolApplicationIdList: [{ type: 'array', required: true, message: '请至少选择一个工具', trigger: 'change' }],
payment: [{ required: true, message: '请选择领取方式', trigger: 'change' }],
availabilityDate: [{ required: true, message: '请填写可用日期', trigger: 'blur' }],
distributionConditions: [{ required: true, message: '请选择发放条件', trigger: 'change' }],
status: [{ required: true, message: '请选择是否上线', trigger: 'change' }],
},
}
},
computed: {
dialogVisible: {
get() {
return this.value
},
set(val) {
this.$emit('input', val)
},
},
},
methods: {
submitForm(formName) {
this.$refs[formName].validate((valid) => {
if (valid) {
this.$emit('submitCoupon', this.ruleForm)
} else {
console.log('error submit!!')
return false
}
})
},
handleClose() {
this.dialogVisible = false
this.$refs['ruleForm'].resetFields()
},
},
created() {
console.log(Object.keys(this.productCouponItem).length != 0, 'productCouponItem')
},
mounted() {},
beforeCreate() {},
beforeMount() {},
beforeUpdate() {},
updated() {},
beforeDestroy() {},
destroyed() {},
activated() {},
}
</script>
<style lang='scss' scoped>
.add-edit-coupon {
.add-edit-coupon-item {
margin-bottom: 16px;
}
}
</style>