<template> <div class="app-container"> <el-dialog :title="title" :visible.sync="dialogVisible" width="60%" :before-close="handleCancle" > <el-form :model="form" :rules="rules" ref="form" label-width="100px" class="demo-form" > <el-form-item label="券类型" prop="couponType"> <el-select v-model="form.couponType" placeholder="请选择"> <el-option v-for="item in activeAreaList" :key="item.value" :label="item.label" :value="item.value" > </el-option> </el-select> </el-form-item> <el-form-item label="优惠内容" prop="fullSubtraction"> <div class="d-flex a-center custom-input"> <div class="margin-right">减免</div> <el-input type="number" class="delInput flex-1" min="1" placeholder="减免金额>0且<99999" v-model="form.fullSubtraction" > </el-input> <div class="margin-left">元</div> </div> </el-form-item> <el-form-item label="优惠门槛" prop="minUsed"> <div class="d-flex a-center custom-input"> <div class="margin-right">最低消费,满</div> <el-input type="number" class="delInput flex-1" min="0" v-model="form.minUsed" /> <div class="margin-left">元,可用</div> </div> </el-form-item> <el-form-item label="生效时间" prop="effectiveTime"> <el-date-picker v-model="form.effectiveTime" type="date" placeholder="选择日期" value-format="yyyy-MM-dd" > </el-date-picker> </el-form-item> <el-form-item label="失效时间" prop="failureTime"> <el-date-picker v-model="form.failureTime" type="date" placeholder="选择日期" value-format="yyyy-MM-dd" > </el-date-picker> </el-form-item> </el-form> <el-button @click="handleCancle">取消</el-button> <el-button v-if="isEdit" type="primary" @click="onSubmit">{{ form.id ? "保存修改" : "保存添加" }}</el-button> </el-dialog> </div> </template> <script> import { coupontsGET} from '@/api/orderform/index' export default { props: { dialogVisible: { type: Boolean, }, title: { type: String, }, isEdit:Boolean }, data() { return { width: "30%", value1: "", form: { couponType: "", // 卷类型 fullSubtraction: "", // 减免 minUsed: "", // 最低消费 effectiveTime: '', // 生效时间 failureTime:'', // 失效时间 }, rules: { fullSubtraction: [ { required: true, message: "请输入优惠内容", trigger: "blur" }, ], couponType: [ { required: true, message: "请选择劵类型", trigger: "change" }, ], minUsed: [ { required: true, message: "请选择优惠门槛", trigger: "change" }, ], effectiveTime: [ { type: 'string', required: true, message: '请选择日期', trigger: 'change' } ], failureTime: [ { type: 'string', required: true, message: '请选择日期', trigger: 'change' } ], }, activeAreaList: [ { value: "1", label: "新用户券", }, { value: "0", label: "满减券", }, ], }; }, created() {}, methods: { handleCancle() { this.$emit("cancle"); }, couponts(val){ coupontsGET(val).then((res)=>{ if(res.code == 200){ this.form = res.data } }) }, onSubmit() { let that = this; that.$refs.form.validate((valid) => { console.log(valid); if (valid) { that.$emit("onSubmit", that.form); } else { return false; } }); }, }, }; </script> <style lang="scss" scoped> ::v-deep .delInput input::-webkit-outer-spin-button, ::v-deep .delInput input::-webkit-inner-spin-button { -webkit-appearance: none !important; } ::v-deep .delInput input[type="number"] { -moz-appearance: textfield; } .description { font-size: 25px; margin-top: 10px; } .d-flex { display: flex; } .a-center { align-items: center; } .flex-1 { flex: 1; } .margin-left { margin-left: 10px; } .margin-right { margin-right: 10px; } .custom-input { width: 250px !important; } .customer { display: flex; flex-wrap: wrap; margin-top: 20px; &-lab { width: 33%; &-icke { width: 100%; } } } </style>