|
@@ -0,0 +1,321 @@
|
|
|
|
+<template>
|
|
|
|
+ <a-modal class="CouponModal" :title="mtitle" :width="1020" :footer="null" :destroyOnClose="true" @cancel="isShow=false" v-model="isShow">
|
|
|
|
+ <!-- 表单 -->
|
|
|
|
+ <a-form-model ref="ruleForm" :model="form" :rules="rules" :label-col="{ span: 8 }" :wrapper-col="{ span: 16 }">
|
|
|
|
+ <a-row>
|
|
|
|
+ <a-col :span="24">
|
|
|
|
+ <div class="c-title">
|
|
|
|
+ 基本信息
|
|
|
|
+ <a-divider type="vertical" class="bold-divider" />
|
|
|
|
+ </div>
|
|
|
|
+ </a-col>
|
|
|
|
+ <a-col :span="12">
|
|
|
|
+ <a-form-model-item label="优惠券名称" prop="name">
|
|
|
|
+ <a-input v-model="form.name" :maxLength="20" placeholder="请输入优惠券名称,20个字以内" />
|
|
|
|
+ </a-form-model-item>
|
|
|
|
+ </a-col>
|
|
|
|
+ <a-col :span="12">
|
|
|
|
+ <a-form-model-item label="发放总量" prop="name">
|
|
|
|
+ <a-row :gutter="20">
|
|
|
|
+ <a-col :span="7">
|
|
|
|
+ <a-select v-model="form.isQuota" placeholder="请选择">
|
|
|
|
+ <a-select-option :value="item.code" v-for="(item, index) in isFlagList" :key="index">{{item.code == '0' ? '不限' : '限制'}}</a-select-option>
|
|
|
|
+ </a-select>
|
|
|
|
+ </a-col>
|
|
|
|
+ <a-col :span="17" v-show="form.isQuota == '1'">
|
|
|
|
+ <a-input-number v-model="form.quota" :min="0" :max="999999" placeholder="请输入限制发放份数, 0-999999" class="input-number-s" />
|
|
|
|
+ <span class="unit">份</span>
|
|
|
|
+ </a-col>
|
|
|
|
+ </a-row>
|
|
|
|
+ </a-form-model-item>
|
|
|
|
+ </a-col>
|
|
|
|
+ <a-col :span="12">
|
|
|
|
+ <a-form-model-item label="优惠券类型" prop="couponType">
|
|
|
|
+ <!-- <v-select ref="couponType" v-model="form.couponType" showArrow placeholder="请选择优惠券类型" code="CHECK_ENABLE_STATE"></v-select> -->
|
|
|
|
+ <a-select v-model="form.couponType" placeholder="请选择">
|
|
|
|
+ <a-select-option :value="item.code" v-for="(item, index) in couponTypeList" :key="index">{{item.dispName}}</a-select-option>
|
|
|
|
+ </a-select>
|
|
|
|
+ </a-form-model-item>
|
|
|
|
+ </a-col>
|
|
|
|
+ <a-col :span="12">
|
|
|
|
+ <a-form-model-item label="优惠券面额" prop="name">
|
|
|
|
+ <a-input-number v-model="form.quota" :min="0" :max="999999" placeholder="请输入优惠券面额, 0-999999" class="input-number-s" />
|
|
|
|
+ <span class="unit">元</span>
|
|
|
|
+ </a-form-model-item>
|
|
|
|
+ </a-col>
|
|
|
|
+ <a-col :span="12">
|
|
|
|
+ <a-form-model-item label="是否限额使用" prop="name">
|
|
|
|
+ <a-select v-model="form.isQuota" placeholder="请选择">
|
|
|
|
+ <a-select-option :value="item.code" v-for="(item, index) in isFlagList" :key="index">{{item.dispName}}</a-select-option>
|
|
|
|
+ </a-select>
|
|
|
|
+ </a-form-model-item>
|
|
|
|
+ </a-col>
|
|
|
|
+ <a-col :span="24">
|
|
|
|
+ <a-form-model-item label="优惠券说明" prop="name" :label-col="{ span: 4 }" :wrapper-col="{ span: 20 }">
|
|
|
|
+ <a-textarea v-model="form.name" :maxLength="256" :auto-size="{ minRows: 3, maxRows: 5 }" placeholder="请输入优惠券说明,256个字以内" />
|
|
|
|
+ </a-form-model-item>
|
|
|
|
+ </a-col>
|
|
|
|
+ <a-col :span="24">
|
|
|
|
+ <div class="c-title">
|
|
|
|
+ 领用规则
|
|
|
|
+ <a-divider type="vertical" class="bold-divider" />
|
|
|
|
+ </div>
|
|
|
|
+ </a-col>
|
|
|
|
+ <a-col :span="24">
|
|
|
|
+ <a-form-model-item label="持卡会员" prop="name" :label-col="{ span: 4 }" :wrapper-col="{ span: 20 }">
|
|
|
|
+ <a-row :gutter="20">
|
|
|
|
+ <a-col :span="6">
|
|
|
|
+ <a-select v-model="form.isQuota" placeholder="请选择">
|
|
|
|
+ <a-select-option :value="item.code" v-for="(item, index) in isFlagList" :key="index">{{item.code == '0' ? '不限领' : '限领'}}</a-select-option>
|
|
|
|
+ </a-select>
|
|
|
|
+ </a-col>
|
|
|
|
+ <a-col :span="16">
|
|
|
|
+ <a-row>
|
|
|
|
+ <a-col :span="10">
|
|
|
|
+ <a-input-number v-model="form.quota" :min="0" :max="999999" placeholder="请输入限领份数, 0-999999" class="input-number-s" />
|
|
|
|
+ </a-col>
|
|
|
|
+ <a-col :span="3">
|
|
|
|
+ 份/每
|
|
|
|
+ </a-col>
|
|
|
|
+ <a-col :span="6">
|
|
|
|
+ <a-select v-model="form.restrictedUnit" placeholder="请选择">
|
|
|
|
+ <a-select-option :value="item.code" v-for="(item, index) in isUnitList" :key="index">{{item.dispName}}</a-select-option>
|
|
|
|
+ </a-select>
|
|
|
|
+ </a-col>
|
|
|
|
+ </a-row>
|
|
|
|
+ </a-col>
|
|
|
|
+ </a-row>
|
|
|
|
+ </a-form-model-item>
|
|
|
|
+ </a-col>
|
|
|
|
+ <a-col :span="24">
|
|
|
|
+ <a-form-model-item label="未持卡会员" prop="name" :label-col="{ span: 4 }" :wrapper-col="{ span: 20 }">
|
|
|
|
+ <a-row :gutter="20">
|
|
|
|
+ <a-col :span="6">
|
|
|
|
+ <a-select v-model="form.isQuota" placeholder="请选择">
|
|
|
|
+ <a-select-option :value="item.code" v-for="(item, index) in isFlagList" :key="index">{{item.code == '0' ? '不限领' : '限领'}}</a-select-option>
|
|
|
|
+ </a-select>
|
|
|
|
+ </a-col>
|
|
|
|
+ <a-col :span="16">
|
|
|
|
+ <a-row>
|
|
|
|
+ <a-col :span="10">
|
|
|
|
+ <a-input-number v-model="form.quota" :min="0" :max="999999" placeholder="请输入限领份数, 0-999999" class="input-number-s" />
|
|
|
|
+ </a-col>
|
|
|
|
+ <a-col :span="3">
|
|
|
|
+ 份/每
|
|
|
|
+ </a-col>
|
|
|
|
+ <a-col :span="6">
|
|
|
|
+ <a-select v-model="form.restrictedUnit" placeholder="请选择">
|
|
|
|
+ <a-select-option :value="item.code" v-for="(item, index) in isUnitList" :key="index">{{item.dispName}}</a-select-option>
|
|
|
|
+ </a-select>
|
|
|
|
+ </a-col>
|
|
|
|
+ </a-row>
|
|
|
|
+ </a-col>
|
|
|
|
+ </a-row>
|
|
|
|
+ </a-form-model-item>
|
|
|
|
+ </a-col>
|
|
|
|
+ <a-col :span="12">
|
|
|
|
+ <a-form-model-item label="有效期" prop="name">
|
|
|
|
+ <a-row :gutter="20">
|
|
|
|
+ <a-col :span="9">
|
|
|
|
+ <a-select v-model="form.validType" placeholder="请选择">
|
|
|
|
+ <a-select-option :value="item.code" v-for="(item, index) in couponValidityList" :key="index">{{item.dispName}}</a-select-option>
|
|
|
|
+ </a-select>
|
|
|
|
+ </a-col>
|
|
|
|
+ <a-col :span="15" v-show="form.validType == 'ABSOLUTE'">
|
|
|
|
+ <a-range-picker @change="validDateChange" :disabled-date="disabledDate" format="YYYY-MM-DD" />
|
|
|
|
+ </a-col>
|
|
|
|
+ <a-col :span="15" v-show="form.validType == 'RELATIVE'">
|
|
|
|
+ <a-row>
|
|
|
|
+ <a-col :span="16">
|
|
|
|
+ <a-input-number v-model="form.quota" :min="0" :max="999999" placeholder="请输入" class="input-number-s" />
|
|
|
|
+ </a-col>
|
|
|
|
+ <a-col :span="8">天内有效</a-col>
|
|
|
|
+ </a-row>
|
|
|
|
+ </a-col>
|
|
|
|
+ </a-row>
|
|
|
|
+ </a-form-model-item>
|
|
|
|
+ </a-col>
|
|
|
|
+ <a-col :span="12">
|
|
|
|
+ <a-form-model-item label="是否允许优惠叠加" prop="name">
|
|
|
|
+ <a-select v-model="form.isQuota" placeholder="请选择">
|
|
|
|
+ <a-select-option :value="item.code" v-for="(item, index) in isFlagList" :key="index">{{item.dispName}}</a-select-option>
|
|
|
|
+ </a-select>
|
|
|
|
+ </a-form-model-item>
|
|
|
|
+ </a-col>
|
|
|
|
+ <a-col :span="12">
|
|
|
|
+ <a-form-model-item label="适用洗车类型" prop="name">
|
|
|
|
+ <v-select ref="serviceType" v-model="form.isQuota" showArrow mode="multiple" placeholder="请选择适用洗车类型" code="CHECK_ENABLE_STATE"></v-select>
|
|
|
|
+ </a-form-model-item>
|
|
|
|
+ </a-col>
|
|
|
|
+ <a-col :span="12">
|
|
|
|
+ <a-form-model-item label="适用洗车网点" prop="isOutletsLimit">
|
|
|
|
+ <a-row :gutter="20">
|
|
|
|
+ <a-col :span="12">
|
|
|
|
+ <a-select v-model="form.isOutletsLimit" placeholder="请选择">
|
|
|
|
+ <a-select-option :value="item.code" v-for="(item, index) in isAllList" :key="index">{{item.dispName}}</a-select-option>
|
|
|
|
+ </a-select>
|
|
|
|
+ </a-col>
|
|
|
|
+ <a-col :span="12" v-show="form.isOutletsLimit == 1">
|
|
|
|
+ <a-row :gutter="20">
|
|
|
|
+ <a-col :span="12">
|
|
|
|
+ 已选 <strong>4</strong> 个
|
|
|
|
+ </a-col>
|
|
|
|
+ <a-col :span="12">
|
|
|
|
+ <a-button type="primary" size="small" class="small-btn">选择</a-button>
|
|
|
|
+ </a-col>
|
|
|
|
+ </a-row>
|
|
|
|
+ </a-col>
|
|
|
|
+ </a-row>
|
|
|
|
+ </a-form-model-item>
|
|
|
|
+ </a-col>
|
|
|
|
+ <a-col :span="24">
|
|
|
|
+ <a-form-model-item :label-col="{ span: 4 }" :wrapper-col="{ span: 20 }" class="btn-cont">
|
|
|
|
+ <a-button type="primary" @click="onSubmit('ruleForm')">保存</a-button>
|
|
|
|
+ <a-button class="resetForm" @click="resetForm">取消</a-button>
|
|
|
|
+ </a-form-model-item>
|
|
|
|
+ </a-col>
|
|
|
|
+
|
|
|
|
+
|
|
|
|
+ </a-row>
|
|
|
|
+ </a-form-model>
|
|
|
|
+ </a-modal>
|
|
|
|
+</template>
|
|
|
|
+
|
|
|
|
+<script>
|
|
|
|
+ import { VSelect } from '@/components'
|
|
|
|
+ import moment from 'moment'
|
|
|
|
+ export default{
|
|
|
|
+ name: 'AddCouponModal',
|
|
|
|
+ components: { VSelect },
|
|
|
|
+ props: {
|
|
|
|
+ openModal: { // 弹框是否展示
|
|
|
|
+ type: Boolean,
|
|
|
|
+ default: false
|
|
|
|
+ },
|
|
|
|
+ mtitle: { // 弹框标题
|
|
|
|
+ type: String,
|
|
|
|
+ default: ''
|
|
|
|
+ }
|
|
|
|
+ },
|
|
|
|
+ data(){
|
|
|
|
+ return{
|
|
|
|
+ isShow: this.openModal, // 弹框是否展示
|
|
|
|
+ form: {
|
|
|
|
+ name: '', // 优惠券名称
|
|
|
|
+ isQuota: '0', // 发放总量 不限,限制
|
|
|
|
+ quota: '', // 发放总量 份数
|
|
|
|
+ couponType: 'VOUCHER', // 优惠券类型
|
|
|
|
+ restrictedUnit: '0', // 限领单位 自然月
|
|
|
|
+ validType: 'NONE', // 有效期类型:ABSOLUTE绝对时效(时间区间)/RELATIVE相对时效(领取后多少天内有效)/NONE不限制
|
|
|
|
+ startTime: '', // 有效期 开始
|
|
|
|
+ endTime: '', // 有效期 结束
|
|
|
|
+ validDate: '', // 有效期有效时长 (领取后多少天内有效)
|
|
|
|
+ isOutletsLimit: '0', // 适用洗车网点限制 0全部(不限) 1部分(限制)
|
|
|
|
+ },
|
|
|
|
+ rules: {
|
|
|
|
+ name: [
|
|
|
|
+ { required: true, message: '请输入优惠券名称', trigger: 'blur' }
|
|
|
|
+ ]
|
|
|
|
+ },
|
|
|
|
+ isFlagList: [ // 是否 下拉数据列表
|
|
|
|
+ {dispName: '是', code: '1'},
|
|
|
|
+ {dispName: '否', code: '0'}
|
|
|
|
+ ],
|
|
|
|
+ couponTypeList: [ // 优惠券类型数据列表
|
|
|
|
+ {dispName: '满减券', code: 'FULLSUB'},
|
|
|
|
+ {dispName: '代金券', code: 'VOUCHER'}
|
|
|
|
+ ],
|
|
|
|
+ isUnitList: [ // 限领份数单位 下拉数据列表
|
|
|
|
+ {dispName: '自然月', code: '0'},
|
|
|
|
+ ],
|
|
|
|
+ couponValidityList: [ // 有效期 下拉数据列表
|
|
|
|
+ {dispName: '不限', code: 'NONE'},
|
|
|
|
+ {dispName: '固定日期', code: 'ABSOLUTE'},
|
|
|
|
+ {dispName: '领取后', code: 'RELATIVE'}
|
|
|
|
+ ],
|
|
|
|
+ isAllList: [ // 适用洗车网点 全部 部分 下拉数据列表
|
|
|
|
+ {dispName: '全部', code: '0'},
|
|
|
|
+ {dispName: '部分', code: '1'}
|
|
|
|
+ ],
|
|
|
|
+ }
|
|
|
|
+ },
|
|
|
|
+ methods: {
|
|
|
|
+ moment,
|
|
|
|
+ range(start, end) {
|
|
|
|
+ const result = []
|
|
|
|
+ for (let i = start; i < end; i++) {
|
|
|
|
+ result.push(i)
|
|
|
|
+ }
|
|
|
|
+ return result
|
|
|
|
+ },
|
|
|
|
+ // 有效期 固定日期 禁用范围
|
|
|
|
+ disabledDate(current) {
|
|
|
|
+ // 不能选择今天之前的日期
|
|
|
|
+ return current && current < moment().subtract(1, 'days')
|
|
|
|
+ },
|
|
|
|
+ // 有效期 固定日期 change
|
|
|
|
+ validDateChange(date, dateString){
|
|
|
|
+ console.log(date, dateString)
|
|
|
|
+ },
|
|
|
|
+ // 保存
|
|
|
|
+ onSubmit(formName){
|
|
|
|
+ console.log(this.form, '表单数据')
|
|
|
|
+ this.$refs[formName].validate(valid => {
|
|
|
|
+ if (valid) {
|
|
|
|
+ let formData = JSON.parse(JSON.stringify(this.form))
|
|
|
|
+
|
|
|
|
+ // 提交前时间格式还需转换
|
|
|
|
+ console.log(formData,'-----提交的表单数据')
|
|
|
|
+ } else {
|
|
|
|
+ return false
|
|
|
|
+ }
|
|
|
|
+ })
|
|
|
|
+ },
|
|
|
|
+ // 取消
|
|
|
|
+ resetForm(){
|
|
|
|
+ this.$refs.ruleForm.resetFields()
|
|
|
|
+ this.isShow = false
|
|
|
|
+ },
|
|
|
|
+ },
|
|
|
|
+ watch: {
|
|
|
|
+ // 父页面传过来的弹框状态
|
|
|
|
+ openModal (newValue, oldValue) {
|
|
|
|
+ this.isShow = newValue
|
|
|
|
+ },
|
|
|
|
+ // 重定义的弹框状态
|
|
|
|
+ isShow (val){
|
|
|
|
+ if (!val){
|
|
|
|
+ this.$emit('close')
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+</script>
|
|
|
|
+
|
|
|
|
+<style lang="less">
|
|
|
|
+ .CouponModal{
|
|
|
|
+ .c-title{
|
|
|
|
+ padding: 0 0 10px;
|
|
|
|
+ margin-bottom: 20px;
|
|
|
|
+ border-bottom: 1px solid #e8e8e8;
|
|
|
|
+ .bold-divider{
|
|
|
|
+ width: 3px;
|
|
|
|
+ background-color: #1890ff;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ .input-number-s{
|
|
|
|
+ width: 90%;
|
|
|
|
+ }
|
|
|
|
+ .unit{
|
|
|
|
+ display: inline-block;
|
|
|
|
+ width: 10%;
|
|
|
|
+ text-align: right;
|
|
|
|
+ }
|
|
|
|
+ .btn-cont{
|
|
|
|
+ text-align: center;
|
|
|
|
+ .resetForm{
|
|
|
|
+ margin-left: 10px;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+</style>
|