Browse Source

创建优惠券

chenrui 4 years ago
parent
commit
4b39ab961b

+ 21 - 0
src/config/router.config.js

@@ -62,6 +62,27 @@ export const asyncRouterMap = [
         }
       }]
     },
+    // 优惠券中心
+    {
+      path: '/CouponCenter',
+      redirect: '/CouponCenter/CreateCoupons',
+      component: PageView,
+      meta: {
+        title: '优惠券中心',
+        icon: 'setting'
+        // permission: 'M_setting_0'
+      },
+      children: [{
+        path: '/CouponCenter/CreateCoupons',
+        name: 'CouponCenter',
+        component: () => import('@/views/CouponCenter/CreateCoupons.vue'),
+        meta: {
+          title: '创建优惠券',
+          icon: 'database'
+          // permission: 'M_sys_dataDictionary'
+        }
+      }]
+    },
     {
       path: '/Order',
       redirect: '/Order/OrderCenter',

+ 321 - 0
src/views/CouponCenter/AddCouponModal.vue

@@ -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>

+ 131 - 0
src/views/CouponCenter/CreateCoupons.vue

@@ -0,0 +1,131 @@
+<template>
+  <a-card class="CreateCoupons" :bordered="false">
+    <!-- 搜索条件 -->
+    <div class="table-page-search-wrapper">
+      <a-form layout="inline">
+        <a-row :gutter="48">
+          <a-col :span="6">
+            <a-form-item class="search-item" label="优惠券名称">
+              <a-input v-model.trim="queryParam.name" placeholder="请输入优惠券名称" allowClear/>
+            </a-form-item>
+          </a-col>
+          <a-col :span="6">
+            <a-form-item class="search-item" label="优惠券类型">
+              <v-select ref="yyzt" allowClear placeholder="请选择优惠券类型" v-model="queryParam.type" code="CHECK_ENABLE_STATE"></v-select>
+            </a-form-item>
+          </a-col>
+          <a-col :span="6">
+            <a-button type="primary" class="search-btn" @click="$refs.table.refresh(true)">查询</a-button>
+            <a-button type="" @click="reset">重置</a-button>
+          </a-col>
+        </a-row>
+      </a-form>
+    </div>
+    <!-- 新建 -->
+    <div class="table-operator">
+      <a-button type="primary" icon="plus" @click="modalHandle('add')">新建</a-button>
+    </div>
+    <!-- 表格列表 -->
+    <s-table ref="table" size="default" rowKey="id" :columns="columns" :data="loadData" bordered >
+      <!-- 操作 -->
+      <template slot="action" slot-scope="text, record">
+        <a-icon type="edit" title="编辑" :style="{ fontSize: '20px', color: '#1890FF', padding: '0 10px' }" />
+        <a-icon type="eye" title="查看详情" @click="openDetailsModal=true" :style="{ fontSize: '20px', color: '#e29e14', padding: '0 10px' }" />
+        <a-icon type="delete" title="删除" @click="del(record)" :style="{ fontSize: '20px', color: 'red', padding: '0 10px' }" />
+      </template>
+    </s-table>
+    
+    <!-- 新增/编辑 优惠券 -->
+    <add-coupon-modal
+      :openModal="openModal"
+      :mtitle="mtitle"
+      @close="openModal=false"
+    />
+    
+  </a-card>
+</template>
+
+<script>
+  import { STable, VSelect } from '@/components'
+  import AddCouponModal from './AddCouponModal.vue'
+  export default{
+    name: 'CreateCoupons',
+    components: { STable, VSelect, AddCouponModal },
+    data(){
+      return{
+        queryParam: {
+          name: '',  //  优惠券名称
+          type: '',  //  优惠券类型
+        },
+        columns: [
+          { title: '序号', dataIndex: 'index', width: '100', align: 'center' },
+          { title: '创建时间', dataIndex: 'createDate', width: '100', align: 'center' },
+          { title: '优惠券名称', dataIndex: 'name', width: '100', align: 'center' },
+          { title: '到期时间', dataIndex: 'endDate', width: '100', align: 'center' },
+          { title: '类型', dataIndex: 'couponType', width: '100', align: 'center' },
+          { title: '状态', dataIndex: 'status', width: '100', align: 'center' },
+          { title: '操作', scopedSlots: {customRender: 'action'}, width: '200', align: 'center' }
+        ],
+        // 加载数据方法 必须为 Promise 对象
+        loadData: parameter => {
+          // return activeList(Object.assign(parameter, this.queryParam)).then(res => {
+          //   const no = (res.data.pageNo - 1) * res.data.pageSize
+          //   for (let i = 0; i < res.data.list.length; i++) {
+          //     const _item = res.data.list[i]
+          //     _item.no = no + i + 1
+          //     _item.releaseStatus = _item.releaseStatus + '' === 'FB'
+          //   }
+          //   return res.data
+          // })
+          // let data = [
+          //   { createDate: '2020-07-31 15:09', equipment: 'ID585787887', name: '网点A', addrProvince: '陕西省', addrCity: '西安市', addrDetail: '华帝金座', businessHours: '8:30 - 22:00', equipmentStatus: '在线', businessStatus: '正常营业', wechatCode: '' },
+          //   { createDate: '2020-07-31 15:09', equipment: 'ID585787887', name: '网点A', addrProvince: '陕西省', addrCity: '西安市', addrDetail: '华帝金座', businessHours: '8:30 - 22:00', equipmentStatus: '在线', businessStatus: '正常营业', wechatCode: '' },
+          //   { createDate: '2020-07-31 15:09', equipment: 'ID585787887', name: '网点A', addrProvince: '陕西省', addrCity: '西安市', addrDetail: '华帝金座', businessHours: '8:30 - 22:00', equipmentStatus: '在线', businessStatus: '正常营业', wechatCode: '' },
+          // ]
+          // return new Promise((resolve, reject) => {
+          //   resolve(data)
+          // }).catch(() => console.log('Oops errors!'))
+        },
+        openModal: false,  //  新增/编辑 优惠券  弹框展示状态
+        mtitle: '',  //  新增/编辑 优惠券  弹框标题
+        openDetailsModal: false,  //  查看详情 优惠券  弹框展示状态
+      }
+    },
+    methods: {
+      //  新建
+      modalHandle(type){
+        this.mtitle = type == 'add' ? '新增' : '编辑'
+        this.openModal = true
+      },
+      // 删除
+      del(item){
+        console.log(item)
+        this.$confirm({
+          title: '提示',
+          content: '确定要删除吗?',
+          onOk () {
+            
+          }
+        })
+      },
+      //  重置
+      reset(){
+        this.queryParam = {
+          name: '',  //  优惠券名称
+          type: '',  //  优惠券类型
+        }
+        this.$refs.table.refresh()
+      }
+    }
+  }
+</script>
+
+<style lang="less">
+  .CreateCoupons{
+    .table-page-search-wrapper{
+      .search-btn{
+        margin-right: 10px;
+      }
+    }
+  }
+</style>