zhangdan 4 年之前
父节点
当前提交
9fd24164b3
共有 2 个文件被更改,包括 227 次插入155 次删除
  1. 63 45
      src/views/CouponStatistics/CouponDetailModal.vue
  2. 164 110
      src/views/CouponStatistics/CouponStatisticsList.vue

+ 63 - 45
src/views/CouponStatistics/CouponDetailModal.vue

@@ -1,13 +1,12 @@
 <template>
   <a-modal
-    :title="查看详情"
+    :title="modalTit"
+    width="70%"
     :footer="null"
     :destroyOnClose="true"
-    @cancel="isShow = false"
+    @cancel="close"
     v-model="isShow">
     <!-- 搜索条件 -->
-    <!-- <h3 class="coupon-detail-title" v-model="title">{{ title }},领取详情</h3> -->
-    <a-divider />
     <div class="CouponStatisticsDetail-searchForm">
       <a-form ref="searchForm" labelAlign="left">
         <a-row :gutter="48">
@@ -18,12 +17,12 @@
           </a-col>
           <a-col :span="6">
             <a-form-item label="手机号码" :label-col="{ span:6 }" :wrapper-col="{ span:12}">
-              <a-input v-model.trim="searchForm.name" placeholder="请输入" allowClear/>
+              <a-input v-model.trim="searchForm.ownerPhone" placeholder="请输入" allowClear :maxLength="11" />
             </a-form-item>
           </a-col>
           <a-col :span="6">
             <a-form-item label="用券网点" :label-col="{ span:6 }" :wrapper-col="{ span:12}">
-              <a-input v-model.trim="searchForm.name" placeholder="请输入" allowClear/>
+              <a-input v-model.trim="searchForm.store.name" placeholder="请输入" allowClear/>
             </a-form-item>
           </a-col>
           <a-col :span="6">
@@ -35,15 +34,14 @@
         <a-row :gutter="48">
           <a-col :span="6">
             <a-form-item label="用券时间" :label-col="{ span:6 }" :wrapper-col="{ span:14 }">
-              <a-range-picker v-model="usedTime" :format="dateFormat" :placeholder="['开始时间','结束时间']" @change="onChange" />
+              <a-range-picker v-model="usedTime" :format="dateFormat" :placeholder="['开始时间','结束时间']" @change="onChangeUsedTime" />
             </a-form-item>
           </a-col>
           <a-col :span="6">
             <a-form-item label="使用状态" :label-col="{ span:6 }" :wrapper-col="{ span:12}">
-              <v-select v-model="searchForm.status" placeholder="请选择" allowClear></v-select>
+              <v-select v-model="searchForm.status" placeholder="请选择" allowClear code="COUPON_VALID_STATUS"></v-select>
             </a-form-item>
           </a-col>
-
         </a-row>
       </a-form>
     </div>
@@ -62,12 +60,13 @@
         <template v-if="record.status == -1">{{ '已过期' }}</template>
       </span>
       <!-- 用券时间 -->
-      <span slot="usedTime" slot-scope="text, record">
-        <template>{{ record.usedTime || '--' }}</template>
-      </span>
+      <span slot="usedTime" slot-scope="text, record">{{ record.usedTime || '-' }}</span>
       <!-- 关联消费金额 -->
-      <span slot="consumAmount" slot-scope="text, record">
-        <template>{{ record.consumAmount || '--' }}</template>
+      <span slot="consumAmount" slot-scope="text, record">{{ record.consumAmount || '-' }}</span>
+      <!-- 用券网点 -->
+      <span slot="store.name" slot-scope="text">
+        <template>{{ text }}</template>
+        <template v-if="!text">{{ '-' }}</template>
       </span>
     </s-table>
   </a-modal>
@@ -89,15 +88,23 @@ export default {
       type: Boolean,
       default: false
     },
+    // 父页面传过来的当前查询优惠券的id
     nowCouponId: {
-      type: String,
-      default: ''
+      type: Number,
+      default: null
     },
+    // 父页面传过来的当前查询发券网点的id
     nowStoreId: {
+      type: Number,
+      default: null
+    },
+    // 父页面传过来的当前查询优惠券的title
+    nowCouponTitle: {
       type: String,
       default: ''
     },
-    nowCouponTitle: {
+    // 父页面传过来的当前查询发券网点的name
+    nowStoreName: {
       type: String,
       default: ''
     }
@@ -105,6 +112,7 @@ export default {
   data () {
     return {
       isShow: this.openModal,
+      modalTit: '', // 弹窗标题
       searchForm: {
         store: {
           name: ''
@@ -114,14 +122,16 @@ export default {
         useCouponBeginTime: null, // 用券的开始时间
         useCouponEndTime: null, // 用券的结束时间
         couponId: '', // 当前优惠券id----查看详情
-        storeNo: '' // 当前发券网点id----查看详情
+        sourceNo: '', // 当前发券网点id----查看详情
+        ownerPhone: '', // 手机号码
+        status: '' // 使用状态
       },
-      title: '3元代金券',
-      dateFormat: 'YYYY-MM-DD',
+      dateFormat: 'YYYY-MM-DD', // 日期格式
       time: [
         moment(getDate.getToday().starttime, this.dateFormat),
         moment(getDate.getToday().endtime, this.dateFormat)
       ],
+      usedTime: null,
       columns: [
         {
           title: '序号',
@@ -154,7 +164,10 @@ export default {
           title: '用券网点',
           dataIndex: 'store.name',
           minWidth: '40',
-          align: 'center'
+          align: 'center',
+          scopedSlots: {
+            customRender: 'store.name'
+          }
         },
         {
           title: '用券时间',
@@ -179,6 +192,9 @@ export default {
       loadData: parameter => {
         this.searchForm.beginDate == null ? this.searchForm.beginDate = getDate.getToday().starttime : null
         this.searchForm.endDate == null ? this.searchForm.endDate = getDate.getToday().endtime : null
+        this.searchForm.couponId = this.nowCouponId
+        this.searchForm.sourceNo = this.nowStoreId
+        console.log(this.searchForm.couponId)
         return couponReceiveDetail(Object.assign(parameter, this.searchForm)).then(res => {
           console.log(res, '----------------')
           if (res.status == 200) {
@@ -186,7 +202,6 @@ export default {
             for (let i = 0; i < res.data.list.length; i++) {
               const _item = res.data.list[i]
               _item.no = no + i + 1
-              // _item.status = _item.status + '' === '1'
             }
             return res.data
           }
@@ -201,7 +216,20 @@ export default {
         this.searchForm.beginDate = dateStrings[0]
         this.searchForm.endDate = dateStrings[1]
       }
-      console.log(this.searchForm.beginDate, this.searchForm.endDate)
+      // console.log(this.searchForm.beginDate, this.searchForm.endDate)
+    },
+    // 用券时间change
+    onChangeUsedTime (dates, dateStrings) {
+      if ((dates, dateStrings)) {
+        this.searchForm.useCouponBeginTime = dateStrings[0]
+        this.searchForm.useCouponEndTime = dateStrings[1]
+      }
+      // console.log(this.searchForm.useCouponBeginTime, this.searchForm.useCouponEndTime)
+    },
+    // 关闭弹窗事件
+    close () {
+      this.isShow = false
+      this.resetForm()
     },
     // 重置
     resetForm () {
@@ -214,44 +242,34 @@ export default {
         useCouponBeginTime: null, // 用券的开始时间
         useCouponEndTime: null, // 用券的结束时间
         couponId: '', // 当前优惠券id----查看详情
-        storeNo: '' // 当前发券网点id----查看详情
+        sourceNo: '', // 当前发券网点id----查看详情
+        ownerPhone: '', // 手机号码
+        status: '' // 使用状态
       }
+      this.time = [
+        moment(getDate.getToday().starttime, this.dateFormat),
+        moment(getDate.getToday().endtime, this.dateFormat)
+      ]
+      this.usedTime = null
       // this.$refs.searchForm.resetFields()
       this.$refs.table.refresh(true)
     }
   },
   watch: {
-    //  父页面传过来的弹框状态以及当前行id
+    //  父页面传过来的弹框状态
     openModal (newValue, oldValue) {
       this.isShow = newValue
     },
-    nowCouponId (newValue, oldValue) {
-      console.log(newValue)
-    },
-    nowStoreId (newValue, oldValue) {
-      console.log(newValue)
-    },
-    nowCouponTitle (newValue, oldValue) {
-      console.log(newValue)
-    },
     //  重定义的弹框状态
     isShow (val) {
       if (!val) {
         this.$emit('close')
+      } else {
+        this.modalTit = this.nowStoreName + '【' + this.nowCouponTitle + '】领取详情'
       }
     }
   }
-  // beforeRouteEnter (to, form, next) {
-  //   next(vm => {
-  //     vm.resetForm()
-  //     console.log(vm.$route, '----详情')
-  //     vm.title = vm.$route.params.title
-  //     vm.searchForm.couponId = vm.$route.params.id
-  //     vm.searchForm.storeNo = vm.$route.params.storeNo
-  //     console.log(vm.title, vm.searchForm)
-  //     // vm.$refs.table.refresh(true)
-  //   })
-  // }
+
 }
 </script>
 

+ 164 - 110
src/views/CouponStatistics/CouponStatisticsList.vue

@@ -6,152 +6,206 @@
         <a-row :gutter="48">
           <a-col :span="6">
             <a-form-item label="发券网点" :label-col="{ span:6 }" :wrapper-col="{ span:12}">
-              <a-input v-model.trim="searchForm.area" placeholder="请输入" allowClear/>
+              <a-input v-model.trim="searchForm.store.name" placeholder="请输入" allowClear />
             </a-form-item>
           </a-col>
           <a-col :span="6">
             <a-form-item label="优惠券名称" :label-col="{ span:6 }" :wrapper-col="{ span:12}">
-              <a-input v-model.trim="searchForm.name" placeholder="请输入" allowClear/>
-
+              <a-input v-model.trim="searchForm.couponTitle" placeholder="请输入" allowClear />
             </a-form-item>
           </a-col>
           <a-col :span="6">
             <a-form-item label="优惠券类型" :label-col="{ span:6 }" :wrapper-col="{ span:12}">
-              <v-select v-model="searchForm.couponType" placeholder="请选择" allowClear></v-select>
+              <v-select ref="couponType" v-model="searchForm.couponType" placeholder="请选择" code="COUPON_TYPE" allowClear></v-select>
             </a-form-item>
           </a-col>
           <a-col :span="6">
             <a-button style="margin-right: 10px;" type="primary" @click="$refs.table.refresh(true)">查询</a-button>
-            <a-button type="" @click="resetForm">重置</a-button>
+            <a-button @click="resetForm">重置</a-button>
           </a-col>
         </a-row>
       </a-form>
     </div>
     <!-- 列表 -->
-    <s-table ref="table" size="default" :rowKey="(record) => record.id" :columns="columns" :data="loadData" bordered>
-      <!-- 状态 -->
-      <span slot="status" slot-scope="text, record">
-        <template></template>
+    <s-table
+      ref="table"
+      size="default"
+      :rowKey="(record) => record.id"
+      :columns="columns"
+      :data="loadData"
+      bordered>
+      <!-- 转化率 -->
+      <span slot="conversionRate" slot-scope="text,record">
+        <template v-if="record.conversionRate > 0">{{ ((record.conversionRate)*100).toFixed(2) }}%</template>
+        <template v-if="record.conversionRate == 0">{{ record.conversionRate }}</template>
+        <template v-else-if="!record.conversionRate">{{ '-' }}</template>
       </span>
+      <!-- 优惠券类型 -->
+      <span slot="couponType" slot-scope="text">{{ $refs.couponType.getNameByCode(text) }}</span>
+      <span slot="takeCount" slot-scope="text,record">{{ record.takeCount || '-' }}</span>
+      <span slot="totalUsedCount" slot-scope="text,record">{{ record.totalUsedCount || '-' }}</span>
+      <span slot="consumAmount" slot-scope="text,record">{{ record.consumAmount || '-' }}</span>
       <!-- 操作 -->
       <span slot="action" slot-scope="text, record">
-        <template>
-          <a-icon type="eye" :style="{ fontSize: '20px', color: '#e29e14', padding: '0 10px' }" @click="handleEdit(record)" />
-        </template>
+        <a-icon type="eye" :style="{ fontSize: '20px', color: '#e29e14', padding: '0 10px' }" @click="handleEdit(record)" />
       </span>
     </s-table>
+    <!-- 查看详情弹窗 -->
+    <coupon-detail-modal
+      :openModal="openDetailModal"
+      :nowCouponId="couponId"
+      :nowStoreId="sourceNo"
+      :nowCouponTitle="title"
+      :nowStoreName="storeName"
+      @close="openDetailModal=false" />
   </a-card>
 </template>
 
 <script>
-  import {
+import {
+  STable,
+  VSelect
+} from '@/components'
+import { couponStatisticsList } from '../../api/couponStatistics.js'
+import CouponDetailModal from './CouponDetailModal.vue'
+export default {
+  name: 'CouponStatisticsList',
+  components: {
     STable,
-    VSelect
-  } from '@/components'
-  export default {
-    components: {
-      STable,
-      VSelect
-    },
-    data() {
-      return {
-        searchForm: {
-          name: '',      // 优惠券名称
-          area: '',      // 网点名称
-          couponType:''  // 优惠券类型
+    VSelect,
+    CouponDetailModal
+  },
+  data () {
+    return {
+      searchForm: {
+        couponTitle: '', // 优惠券名称
+        store: {
+          name: ''
+        }, // 网点名称
+        couponType: '' // 优惠券类型
+      },
+      openDetailModal: false, // 查看详情弹窗 默认关闭
+      couponId: null, // 查看详情--当前优惠券id
+      sourceNo: null, // 查看详情--当前发券网点id
+      title: '', // 查看详情--当前优惠券title
+      storeName: '', // 查看详情--当前发券网点name
+      columns: [
+        {
+          title: '序号',
+          dataIndex: 'no',
+          minWidth: '40',
+          align: 'center'
+        },
+        {
+          title: '发券网点',
+          dataIndex: 'store.name',
+          minWidth: '100',
+          align: 'center'
         },
-        columns: [{
-            title: '序号',
-            dataIndex: 'no',
-            minWidth: '40',
-            align: 'center'
-          },
+        {
+          title: '优惠券名称',
+          dataIndex: 'couponTitle',
+          minWidth: '100',
+          align: 'center'
 
-          {
-            title: '发券网点',
-            dataIndex: 'no',
-            minWidth: '40',
-            align: 'center'
-          },
-          {
-            title: '优惠券名称',
-            dataIndex: 'no',
-            minWidth: '40',
-            align: 'center'
-          },
-          {
-            title: '优惠券类型',
-            dataIndex: 'no',
-            minWidth: '40',
-            align: 'center'
-          },
-          {
-            title: '已发数量',
-            dataIndex: 'no',
-            minWidth: '40',
-            align: 'center'
-          },
-          {
-            title: '使用数量',
-            dataIndex: 'no',
-            minWidth: '40',
-            align: 'center'
-          },
-          {
-            title: '关联消费金额',
-            dataIndex: 'no',
-            minWidth: '40',
-            align: 'center'
-          },
-          {
-            title: '转化率',
-            dataIndex: 'no',
-            minWidth: '40',
-            align: 'center'
-          },
-          {
-            title: '状态',
-            dataIndex: 'status',
-            minWidth: '40',
-            align: 'center',
-            scopedSlots: {
-              customRender: 'status'
-            }
-          },
-          {
-            title: '操作',
-            dataIndex: 'action',
-            minWidth: '40',
-            align: 'center',
-            scopedSlots: {
-              customRender: 'action'
-            }
+        },
+        {
+          title: '优惠券类型',
+          dataIndex: 'couponType',
+          minWidth: '100',
+          align: 'center',
+          scopedSlots: {
+            customRender: 'couponType'
+          }
+        },
+        {
+          title: '已发数量',
+          dataIndex: 'takeCount',
+          minWidth: '100',
+          align: 'center',
+          scopedSlots: {
+            customRender: 'takeCount'
+          }
+        },
+        {
+          title: '使用数量',
+          dataIndex: 'totalUsedCount',
+          minWidth: '100',
+          align: 'center',
+          scopedSlots: {
+            customRender: 'totalUsedCount'
+          }
+        },
+        {
+          title: '关联消费金额',
+          dataIndex: 'consumAmount',
+          minWidth: '100',
+          align: 'center',
+          scopedSlots: {
+            customRender: 'consumAmount'
+          }
+        },
+        {
+          title: '转化率',
+          dataIndex: 'conversionRate',
+          minWidth: '100',
+          align: 'center',
+          scopedSlots: {
+            customRender: 'conversionRate'
+          }
+        },
+        {
+          title: '操作',
+          dataIndex: 'action',
+          minWidth: '100',
+          align: 'center',
+          scopedSlots: {
+            customRender: 'action'
           }
-        ],
-        // 加载数据方法 必须为 Promise 对象
-        loadData: parameter => {
-          // return getTenantsList(Object.assign(parameter, this.searchForm)).then(res => {
-          //   if (res.status == 200) {
-          //     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.status = _item.status + '' === '1'
-          //     }
-          //     return res.data
-          //   }
-          // })
         }
+      ],
+      // 加载数据方法 必须为 Promise 对象
+      loadData: parameter => {
+        return couponStatisticsList(Object.assign(parameter, this.searchForm)).then(res => {
+          console.log(res, '-------')
+          if (res.status == 200) {
+            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.status = _item.status + '' === '1'
+            }
+            return res.data
+          }
+        })
       }
+    }
+  },
+  methods: {
+    // 点击查看详情
+    handleEdit (record) {
+      console.log(record)
+      this.couponId = record.couponId
+      this.sourceNo = record.storeId
+      this.title = record.couponTitle
+      this.storeName = record.store.name
+      this.openDetailModal = true
+      console.log(this.title)
     },
-    methods: {
-      // 重置
-      resetForm() {
-        this.$refs.searchForm.resetFields()
-        this.$refs.table.refresh(true)
+    // 重置
+    resetForm () {
+      this.searchForm = {
+        couponTitle: '', // 优惠券名称
+        store: {
+          name: ''
+        }, // 网点名称
+        couponType: '' // 优惠券类型
       }
+      // this.$refs.searchForm.resetFields()
+      this.$refs.table.refresh(true)
     }
   }
+}
 </script>
 
 <style>