zhangdan 4 years ago
parent
commit
13ec20b7ad
2 changed files with 294 additions and 0 deletions
  1. 25 0
      src/api/couponStatistics.js
  2. 269 0
      src/views/CouponStatistics/CouponDetailModal.vue

+ 25 - 0
src/api/couponStatistics.js

@@ -0,0 +1,25 @@
+import { axios } from '@/utils/request'
+
+// 优惠券统计列表
+export const couponStatisticsList = params => {
+  const url = `storeCouponReport/findPage/${params.pageNo}/${params.pageSize}`
+  delete params.pageNo
+  delete params.pageSize
+  return axios({
+    url: url,
+    data: params,
+    method: 'post'
+  })
+}
+
+// 查看优惠券领取详情
+export const couponReceiveDetail = params => {
+  const url = `couponReceives/findPage/${params.pageNo}/${params.pageSize}`
+  delete params.pageNo
+  delete params.pageSize
+  return axios({
+    url: url,
+    data: params,
+    method: 'post'
+  })
+}

+ 269 - 0
src/views/CouponStatistics/CouponDetailModal.vue

@@ -0,0 +1,269 @@
+<template>
+  <a-modal
+    :title="查看详情"
+    :footer="null"
+    :destroyOnClose="true"
+    @cancel="isShow = false"
+    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">
+          <a-col :span="6">
+            <a-form-item label="领券时间" :label-col="{ span:6 }" :wrapper-col="{ span:14 }">
+              <a-range-picker v-model="time" :format="dateFormat" :placeholder="['开始时间','结束时间']" @change="onChange" />
+            </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-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-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-col>
+          </a-col>
+        </a-row>
+        <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-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>
+            </a-form-item>
+          </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 v-if="record.status == 0">{{ '未使用' }}</template>
+        <template v-if="record.status == 1">{{ '已使用' }}</template>
+        <template v-if="record.status == -1">{{ '已过期' }}</template>
+      </span>
+      <!-- 用券时间 -->
+      <span slot="usedTime" slot-scope="text, record">
+        <template>{{ record.usedTime || '--' }}</template>
+      </span>
+      <!-- 关联消费金额 -->
+      <span slot="consumAmount" slot-scope="text, record">
+        <template>{{ record.consumAmount || '--' }}</template>
+      </span>
+    </s-table>
+  </a-modal>
+</template>
+
+<script>
+import {
+  STable,
+  VSelect
+} from '@/components'
+import getDate from '../../libs/getDate.js'
+import moment from 'moment'
+import { couponReceiveDetail } from '../../api/couponStatistics.js'
+export default {
+  name: 'CouponDetailModal',
+  components: { STable, VSelect },
+  props: {
+    openModal: { //  弹框是否展示
+      type: Boolean,
+      default: false
+    },
+    nowCouponId: {
+      type: String,
+      default: ''
+    },
+    nowStoreId: {
+      type: String,
+      default: ''
+    },
+    nowCouponTitle: {
+      type: String,
+      default: ''
+    }
+  },
+  data () {
+    return {
+      isShow: this.openModal,
+      searchForm: {
+        store: {
+          name: ''
+        }, // 网点名称
+        beginDate: null, // 创建的开始时间
+        endDate: null, // 创建的结束时间
+        useCouponBeginTime: null, // 用券的开始时间
+        useCouponEndTime: null, // 用券的结束时间
+        couponId: '', // 当前优惠券id----查看详情
+        storeNo: '' // 当前发券网点id----查看详情
+      },
+      title: '3元代金券',
+      dateFormat: 'YYYY-MM-DD',
+      time: [
+        moment(getDate.getToday().starttime, this.dateFormat),
+        moment(getDate.getToday().endtime, this.dateFormat)
+      ],
+      columns: [
+        {
+          title: '序号',
+          dataIndex: 'no',
+          minWidth: '40',
+          align: 'center'
+        },
+        {
+          title: '领券时间',
+          dataIndex: 'receiveTime',
+          minWidth: '40',
+          align: 'center'
+        },
+        {
+          title: '领券手机号码',
+          dataIndex: 'ownerPhone',
+          minWidth: '40',
+          align: 'center'
+        },
+        {
+          title: '使用状态',
+          dataIndex: 'status',
+          minWidth: '40',
+          align: 'center',
+          scopedSlots: {
+            customRender: 'status'
+          }
+        },
+        {
+          title: '用券网点',
+          dataIndex: 'store.name',
+          minWidth: '40',
+          align: 'center'
+        },
+        {
+          title: '用券时间',
+          dataIndex: 'usedTime',
+          minWidth: '40',
+          align: 'center',
+          scopedSlots: {
+            customRender: 'usedTime'
+          }
+        },
+        {
+          title: '关联消费金额',
+          dataIndex: 'consumAmount',
+          minWidth: '40',
+          align: 'center',
+          scopedSlots: {
+            customRender: 'consumAmount'
+          }
+        }
+      ],
+      // 加载数据方法 必须为 Promise 对象
+      loadData: parameter => {
+        this.searchForm.beginDate == null ? this.searchForm.beginDate = getDate.getToday().starttime : null
+        this.searchForm.endDate == null ? this.searchForm.endDate = getDate.getToday().endtime : null
+        return couponReceiveDetail(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: {
+    // 时间change
+    onChange (dates, dateStrings) {
+      if ((dates, dateStrings)) {
+        this.searchForm.beginDate = dateStrings[0]
+        this.searchForm.endDate = dateStrings[1]
+      }
+      console.log(this.searchForm.beginDate, this.searchForm.endDate)
+    },
+    // 重置
+    resetForm () {
+      this.searchForm = {
+        store: {
+          name: ''
+        }, // 用券网点名称
+        beginDate: null, // 创建的开始时间
+        endDate: null, // 创建的结束时间
+        useCouponBeginTime: null, // 用券的开始时间
+        useCouponEndTime: null, // 用券的结束时间
+        couponId: '', // 当前优惠券id----查看详情
+        storeNo: '' // 当前发券网点id----查看详情
+      }
+      // 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')
+      }
+    }
+  }
+  // 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>
+
+<style lang="less">
+  .ant-form-item{
+    margin-bottom: 10px;
+  }
+  .ant-divider-horizonta{
+    margin: 10px 0;
+  }
+  .coupon-detail-title{
+    margin-bottom: 20px;
+    margin-left: 20px;
+  }
+</style>