Ver código fonte

Merge branch 'deploy' of http://git.chelingzhu.com/chelingzhu-web/qhsxKx-cardCenter-admin-html into deploy

zhangdan 4 anos atrás
pai
commit
dff62b54f3

+ 6 - 9
src/views/CouponCenter/AddCouponModal.vue

@@ -118,6 +118,7 @@
                     ref="limitFlag"
                     v-model="form.quotaLimit"
                     :disabled="takeCount > 0"
+                    @change="selectChange('quotaLimit')"
                     showArrow
                     placeholder="请选择"
                     code="LIMIT_FLAG"></v-select>
@@ -303,7 +304,7 @@
     </a-form-model>
 
     <!-- 选择网点 -->
-    <choose-outlets :openOutletsModal="openOutletsModal" :storeList="form.couponStoreList" @choose="outletsChange" @close="closeChooseOutlets" />
+    <choose-outlets :openOutletsModal="openOutletsModal" :storeList="form.couponStoreList" @close="closeChooseOutlets" />
   </a-modal>
 </template>
 
@@ -416,13 +417,11 @@ export default {
     },
     //  有效期  固定日期  change
     validDateChange (date, dateString) {
-      console.log(date, dateString, this.form.timeRange)
       this.form.startTime = dateString[0]
       this.form.endTime = dateString[1]
     },
     //  保存
     onSubmit () {
-      console.log(this.form, '表单数据')
       this.$refs.ruleForms.validate(valid => {
         if (valid) {
           const formData = JSON.parse(JSON.stringify(this.form))
@@ -498,7 +497,7 @@ export default {
         this.form.subAmount = data.subAmount
       } else if (data.couponType === 'VOUCHER') { //  代金券
         this.form.subAmount = data.subAmount
-        this.isLimit = data.isLimit
+        this.isLimit = Number(data.limitAmount) > 0 ? '1' : '0'
         this.form.limitAmount = data.limitAmount
       }
       // 持卡与非持卡会员
@@ -513,11 +512,6 @@ export default {
       }
       this.form.couponScopeList = data.scopeValueList //  适用洗车类型
       this.form.couponStoreList = data.couponStoreList //  适用洗车网点
-      console.log('------赋值后的表单', this.form)
-    },
-    // 选择网点  change
-    outletsChange (val) {
-      console.log(val)
     },
     // 获取适用洗车类型列表
     getItemQuery () {
@@ -540,6 +534,8 @@ export default {
         this.isLimit = '0' //  代金券  是否限额使用(0否,1是)
       } else if (type === 'isLimitE') { //  是否限额使用
         this.form.limitAmount = ''
+      } else if (type === 'quotaLimit') { //  发放总量
+        this.form.quota = ''
       } else if (type === 'isLimitC') { //  持卡会员  是否限领
         this.form.cardholderCouponLimit.limitCount = ''
       } else if (type === 'isLimitN') { //  非持卡会员  是否限领
@@ -567,6 +563,7 @@ export default {
       this.form.validType = 'NONE'
       this.form.scopeType = 'ITEM'
       this.isLimit = '0'
+      this.takeCount = ''
     }
   },
   watch: {

+ 0 - 1
src/views/CouponCenter/ChooseOutlets.vue

@@ -50,7 +50,6 @@ export default {
   methods: {
     //  查询
     onSearch (value) {
-      console.log(value)
       if (value) {
         this.getStoreQuery(value)
       } else {

+ 35 - 17
src/views/CouponCenter/CreateCoupons.vue

@@ -38,23 +38,26 @@
       <!-- 操作 -->
       <template slot="action" slot-scope="text, record">
         <a-icon type="edit" v-if="record.status == 0" title="编辑" @click="modalHandle('edit', record)" :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="eye" title="查看详情" @click="modalHandle('details', record)" :style="{ fontSize: '20px', color: '#e29e14', padding: '0 10px' }" />
         <a-icon type="delete" v-if="record.status == 0" title="删除" @click="del(record)" :style="{ fontSize: '20px', color: 'red', padding: '0 10px' }" />
       </template>
     </s-table>
 
     <!-- 新增/编辑 优惠券 -->
     <add-coupon-modal :openModal="openModal" :pageType="pageType" :couponId="couponId" @close="closeModal" @success="couponSubmit" />
+    <!-- 查看详情 优惠券 -->
+    <details-coupon-modal :openModal="openDetailsModal" :couponId="couponId" @close="closeDetailsModal" />
   </a-card>
 </template>
 
 <script>
 import { STable, VSelect } from '@/components'
 import AddCouponModal from './AddCouponModal.vue'
+import DetailsCouponModal from './DetailsCouponModal.vue'
 import { couponQuery, couponEnableStatus, couponDel } from '@/api/coupons'
 export default {
   name: 'CreateCoupons',
-  components: { STable, VSelect, AddCouponModal },
+  components: { STable, VSelect, AddCouponModal, DetailsCouponModal },
   data () {
     return {
       queryParam: {
@@ -91,9 +94,19 @@ export default {
     //  新建
     modalHandle (type, row) {
       this.pageType = type
-      this.couponId = type === 'add' ? '' : type === 'edit' ? String(row.id) : ''
-      console.log(type, row, this.couponId)
-      this.openModal = true
+      if (type === 'add') {
+        this.couponId = ''
+        this.openDetailsModal = false
+        this.openModal = true
+      } else if (type === 'edit') {
+        this.couponId = String(row.id)
+        this.openDetailsModal = false
+        this.openModal = true
+      } else if (type === 'details') {
+        this.couponId = String(row.id)
+        this.openModal = false
+        this.openDetailsModal = true
+      }
     },
     // 优惠券创建
     couponSubmit () {
@@ -105,13 +118,18 @@ export default {
       this.couponId = ''
       this.openModal = false
     },
+    // 详情 弹框关闭
+    closeDetailsModal () {
+      this.couponId = ''
+      this.openDetailsModal = false
+    },
     //  删除
     del (row) {
       const _this = this
-      if (row.takeCount == 0) {
-        this.$confirm({
-          title: '数据删除后无法恢复, 确认删除吗?',
-          onOk: () => {
+      this.$confirm({
+        title: '数据删除后无法恢复, 确认删除吗?',
+        onOk: () => {
+          if (row.takeCount == 0) {
             couponDel({ 'id': row.id }).then(res => {
               if (res.status == 200) {
                 _this.$refs.table.refresh()
@@ -120,15 +138,15 @@ export default {
                 _this.$message.error(res.message)
               }
             })
-          },
-          onCancel: () => {
-            this.$message.info('取消删除')
+          } else if (row.takeCount > 0) {
+            // 废除优惠卷
+            _this.changeStatus(row, -1)
           }
-        })
-      } else if (row.takeCount > 0) {
-        // 废除优惠卷
-        this.changeStatus(row, -1)
-      }
+        },
+        onCancel: () => {
+          this.$message.info('取消删除')
+        }
+      })
     },
     // 启用停用
     changeStatus (row, flag) {

+ 234 - 0
src/views/CouponCenter/DetailsCouponModal.vue

@@ -0,0 +1,234 @@
+<template>
+  <div class="DetailsCoupon">
+    <!-- 数据字典 -->
+    <v-select v-show="false" ref="couponType" placeholder="优惠券类型" code="COUPON_TYPE"></v-select>
+    <a-modal
+      class="DetailsCouponModal"
+      title="查看详情"
+      width="60%"
+      :footer="null"
+      :destroyOnClose="true"
+      @cancel="isShow=false"
+      v-model="isShow">
+      <a-row :gutter="20" v-if="couponInfo">
+        <a-col :span="24">
+          <div class="c-title frist-t">
+            基本信息
+            <a-divider type="vertical" class="bold-divider" />
+          </div>
+        </a-col>
+        <a-col :span="12" class="item-cont">
+          <p class="item-label">优惠券名称:</p>
+          <p class="item-main">{{ couponInfo.title }}</p>
+        </a-col>
+        <!-- 优惠券类型分为:FULLSUB 满减券、DISCOUNT 折扣券、VOUCHER 代金券和 SUB 实价券 -->
+        <a-col :span="12" class="item-cont">
+          <p class="item-label">优惠券类型:</p>
+          <div class="item-main">
+            <strong>{{ couponInfo.couponTypeName }}</strong>
+            <p class="sub-con" v-if="couponInfo.couponType == 'FULLSUB'">
+              满<strong>{{ couponInfo.limitAmount }}</strong>减<strong>{{ couponInfo.subAmount }}</strong>
+            </p>
+          </div>
+        </a-col>
+        <a-col :span="12" class="item-cont" v-if="couponInfo.couponType == 'VOUCHER'">
+          <p class="item-label">优惠券面额:</p>
+          <p class="item-main"><strong>{{ couponInfo.subAmount }}</strong>元</p>
+        </a-col>
+        <a-col :span="12" class="item-cont" v-if="couponInfo.couponType == 'VOUCHER'">
+          <p class="item-label">是否限额使用:</p>
+          <p class="item-main">{{ couponInfo.limitAmount > 0 ? '是' : '否' }}</p>
+          <p class="item-main" v-if="couponInfo.limitAmount > 0">满<strong>{{ couponInfo.limitAmount }}</strong>元使用</p>
+        </a-col>
+        <a-col :span="12" class="item-cont">
+          <p class="item-label">发放总量:</p>
+          <p class="item-main" v-if="couponInfo.quotaLimit == '0'">不限</p>
+          <p class="item-main" v-if="couponInfo.quotaLimit == '1'"><strong>{{ couponInfo.quota }}</strong>份</p>
+        </a-col>
+        <a-col :span="12" class="item-cont">
+          <p class="item-label">优惠券说明:</p>
+          <div class="item-main">{{ couponInfo.ruleDesc }}</div>
+        </a-col>
+        <a-col :span="24">
+          <div class="c-title">
+            领用规则
+            <a-divider type="vertical" class="bold-divider" />
+          </div>
+        </a-col>
+        <a-col :span="12" class="item-cont">
+          <p class="item-label">持卡会员:</p>
+          <p class="item-main" v-if="couponInfo.cardholderCouponLimit.isLimit == '0'">不限</p>
+          <p class="item-main" v-if="couponInfo.cardholderCouponLimit.isLimit == '1'">
+            每<strong>{{ couponInfo.cardholderCouponLimit.limitCondition == 'monthly' ? '自然月' : '' }}</strong>限制领取
+            <strong>{{ couponInfo.cardholderCouponLimit.limitCount }}</strong>份
+          </p>
+        </a-col>
+        <a-col :span="12" class="item-cont">
+          <p class="item-label">未持卡会员:</p>
+          <p class="item-main" v-if="couponInfo.normalCouponLimit.isLimit == '0'">不限</p>
+          <p class="item-main" v-if="couponInfo.normalCouponLimit.isLimit == '1'">
+            每<strong>{{ couponInfo.normalCouponLimit.limitCondition == 'monthly' ? '自然月' : '' }}</strong>限制领取
+            <strong>{{ couponInfo.normalCouponLimit.limitCount }}</strong>份
+          </p>
+        </a-col>
+        <a-col :span="12" class="item-cont">
+          <p class="item-label">有效期:</p>
+          <!-- 有效期类型:ABSOLUTE绝对时效(时间区间)/RELATIVE相对时效(领取后多少天内有效)/NONE不限制 -->
+          <p class="item-main" v-if="couponInfo.validType == 'NONE'">不限</p>
+          <p class="item-main" v-if="couponInfo.validType == 'ABSOLUTE'">
+            <strong>{{ couponInfo.startTimeGmt8Ymd }}</strong> ~
+            <strong>{{ couponInfo.endTimeGmt8Ymd }}</strong>
+          </p>
+          <p class="item-main" v-if="couponInfo.validType == 'RELATIVE'">{{ couponInfo.validDateStr }}</p>
+        </a-col>
+        <a-col :span="12" class="item-cont">
+          <p class="item-label">适用洗车类型:</p>
+          <p class="item-main">
+            <a-tag color="blue" v-for="(item, index) in couponInfo.couponScopeList" :key="index">{{ item.scopeName }}</a-tag>
+          </p>
+        </a-col>
+        <a-col :span="12" class="item-cont">
+          <div class="item-label">
+            <a-tooltip
+              placement="right"
+              arrow-point-at-center
+              title="已设置的适用洗车网点再次修改(尤其是减少使用网点)后,在【优惠券统计】中会保留原适用洗车网点的统计数据。"
+            >
+              <span style="display: inline-block;">适用洗车网点</span>
+              <a-icon :style="{ fontSize: '17px', color: '#1890ff', verticalAlign: 'sub', display: 'inlineBlock', margin: '0 3px' }" type="question-circle" />
+              <span style="display: inline-block;">:</span>
+            </a-tooltip>
+          </div>
+          <div class="item-main flex-sp">
+            <strong>{{ couponInfo.isStoreLimit == '1' ? '部分' : '全部' }}</strong>
+            <p v-if="couponInfo.isStoreLimit == '1'">
+              已选<strong>{{ couponInfo.couponStoreList.length }}</strong>个
+            </p>
+            <a-button type="primary" size="small" @click="openDetailsDraw = true" v-if="couponInfo.isStoreLimit == '1'">查看</a-button>
+          </div>
+        </a-col>
+        <a-col :span="24" class="btn-cont">
+          <a-button @click="isShow=false">返回列表</a-button>
+        </a-col>
+      </a-row>
+    </a-modal>
+
+    <!-- 查看详细 -->
+    <view-detailed
+      ref="viewDetailed"
+      :checkedList="couponInfo ? couponInfo.couponStoreList : []"
+      :openDetailsDraw="openDetailsDraw"
+      @close="openDetailsDraw = false">
+    </view-detailed>
+  </div>
+</template>
+
+<script>
+import { VSelect } from '@/components'
+import { couponFind } from '@/api/coupons'
+import ViewDetailed from './ViewDetailed.vue'
+export default {
+  name: 'DetailsCouponModal',
+  components: { VSelect, ViewDetailed },
+  props: {
+    openModal: { //  弹框是否展示
+      type: Boolean,
+      default: false
+    },
+    couponId: { //  优惠券id
+      type: String,
+      default: ''
+    }
+  },
+  data () {
+    return {
+      isShow: this.openModal, //  弹框是否展示
+      labelList: [], //  网点标签
+      couponInfo: null, //  优惠券信息
+      serviceType: [], //  服务类型
+      storeItemPriceDTOList: [], //  时段价格
+      itemQueryList: [], //  服务类型  列表数据
+      openDetailsDraw: false //  查看  适用网店详情
+    }
+  },
+  methods: {
+    // 优惠券详情
+    getCouponInfo (id) {
+      couponFind({ id: id }).then(res => {
+        if (res.status == 200) {
+          this.couponInfo = res.data
+          this.couponInfo.couponTypeName = this.$refs.couponType.getNameByCode(res.data.couponType)
+        }
+      })
+    }
+  },
+  watch: {
+    //  父页面传过来的弹框状态
+    openModal (newValue, oldValue) {
+      this.isShow = newValue
+    },
+    //  重定义的弹框状态
+    isShow (val) {
+      if (!val) {
+        this.$emit('close')
+      }
+    },
+    couponId (newValue, oldValue) {
+      if (newValue && this.isShow) {
+        this.getCouponInfo(newValue)
+      }
+    }
+  }
+}
+</script>
+
+<style lang="less">
+  .DetailsCouponModal{
+    p{
+      margin: 0;
+    }
+    .c-title {
+      padding: 0 0 10px;
+      margin-top: 40px;
+      margin-bottom: 20px;
+      border-bottom: 1px solid #e8e8e8;
+      .bold-divider {
+        width: 3px;
+        background-color: #1890ff;
+      }
+    }
+    .frist-t{
+      margin-top: 20px;
+    }
+    .item-cont{
+      margin-bottom: 24px;
+      display: flex;
+      align-items: center;
+      .item-label{
+        width: 121px;
+        font-size: 14px;
+        color: rgba(0, 0, 0, 0.85);
+        flex-shrink: 0;
+      }
+      .item-main{
+        flex-grow: 1;
+        .sub-con{
+          display: inline-block;
+          margin-left: 40px;
+        }
+        strong{
+          margin: 0 4px;
+        }
+      }
+      .flex-sp{
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+      }
+    }
+    .btn-cont{
+      text-align: center;
+      margin: 30px 0 25px;
+    }
+  }
+</style>

+ 112 - 0
src/views/CouponCenter/ViewDetailed.vue

@@ -0,0 +1,112 @@
+<template>
+  <a-modal
+    class="view-detailed-warp"
+    width="40%"
+    :footer="null"
+    :destroyOnClose="true"
+    @cancel="isShow=false"
+    v-model="isShow">
+    <template slot="title">
+      <div class="drawer-heder">适用洗车网点: 已选 <strong>{{ checkedList.length }}</strong> 个</div>
+    </template>
+    <div class="drawer-content">
+      <a-table
+        size="middle"
+        :columns="columns"
+        bordered
+        :scroll="{ y: 360 }"
+        rowKey="storeId"
+        :data-source="listData"
+        :pagination="false"
+        class="table-con">
+        <!-- 名称 -->
+        <template slot="storeName" slot-scope="text, record">
+          {{ record.storeName }}
+        </template>
+      </a-table>
+    </div>
+  </a-modal>
+</template>
+
+<script>
+export default {
+  name: 'ViewDetailed',
+  props: {
+    checkedList: { // 已选择的项
+      type: Array,
+      default: function () {
+        return []
+      }
+    },
+    openDetailsDraw: { //  是否展示弹框
+      type: Boolean,
+      default: false
+    }
+  },
+  data () {
+    return {
+      isShow: this.openDetailsDraw, //  弹框是否打开
+      listData: this.checkedList, //  表格数据
+      columns: [ //  表格表头
+        { title: '序号', dataIndex: 'no', width: '100', align: 'center' },
+        { title: '网点名称', scopedSlots: { customRender: 'storeName' }, align: 'center' }
+      ]
+    }
+  },
+  methods: {
+    // 关闭抽屉时触发
+    closeDraw () {
+      this.$emit('close')
+    }
+  },
+  watch: {
+    //  弹框展示隐藏
+    openDetailsDraw (newValue, oldValue) {
+      this.isShow = newValue
+    },
+    //  组件内 弹框展示隐藏控制变量
+    isShow (val) {
+      if (!val) {
+        this.$emit('close')
+      }
+    },
+    //  已选项数据列表
+    checkedList: {
+      handler (newValue, oldValue) {
+        // 加序号
+        newValue.map((item, index) => {
+          item.no = index + 1
+        })
+        this.listData = newValue
+      },
+      deep: true
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+.view-detailed-warp {
+	.ivu-modal-body {
+		height: 500px;
+		padding: 0;
+	}
+	.ivu-modal-footer {
+		padding: 0;
+		display: none;
+	}
+	.ivu-drawer-header,
+	.ivu-modal-header {
+		padding: 10px 16px;
+	}
+	.drawer-heder {
+		font-size: 14px;
+		font-weight: bold;
+	}
+	.drawer-content {
+		width: 90%;
+		padding: 20px 0 30px;
+		margin: 0 auto;
+	}
+}
+</style>