添加优惠券历史页

src/router/index.js

@@ -221,6 +221,13 @@ export const constantRouterMap = [
         meta: {title: '修改优惠券'},
         hidden:true
       },
+      {
+        path: 'couponHistory',
+        name: 'couponHistory',
+        component: () => import('@/views/sms/coupon/history'),
+        meta: {title: '优惠券领取历史'},
+        hidden:true
+      },
       {
         path: 'brand',
         name: 'homeBrand',

src/views/sms/coupon/components/CouponDetail.vue

@@ -305,6 +305,9 @@
         this.coupon.productRelationList.push(this.getProductById(this.selectProduct));
         this.selectProduct=null;
       },
+      handleDeleteProductRelation(index,row){
+        this.coupon.productRelationList.splice(index,1);
+      },
       handleAddProductCategoryRelation(){
         if(this.selectProductCate===null||this.selectProductCate.length===0){
           this.$message({
@@ -316,9 +319,6 @@
         this.coupon.productCategoryRelationList.push(this.getProductCateByIds(this.selectProductCate));
         this.selectProductCate=[];
       },
-      handleDeleteProductRelation(index,row){
-        this.coupon.productRelationList.splice(index,1);
-      },
       handleDeleteProductCateRelation(index,row){
         this.coupon.productCategoryRelationList.splice(index,1);
       },

src/views/sms/coupon/history.vue

@@ -0,0 +1,219 @@
+<template> 
+  <div class="app-container">
+    <div class="table-layout">
+      <el-row>
+        <el-col :span="4" class="table-cell-title">名称</el-col>
+        <el-col :span="4" class="table-cell-title">优惠券类型</el-col>
+        <el-col :span="4" class="table-cell-title">可使用商品</el-col>
+        <el-col :span="4" class="table-cell-title">使用门槛</el-col>
+        <el-col :span="4" class="table-cell-title">面值</el-col>
+        <el-col :span="4" class="table-cell-title">状态</el-col>
+      </el-row>
+      <el-row>
+        <el-col :span="4" class="table-cell">{{coupon.name}}</el-col>
+        <el-col :span="4" class="table-cell">{{coupon.type | formatType}}</el-col>
+        <el-col :span="4" class="table-cell">{{coupon.useType | formatUseType}}</el-col>
+        <el-col :span="4" class="table-cell">满{{coupon.minPoint}}元可用</el-col>
+        <el-col :span="4" class="table-cell">{{coupon.amount}}元</el-col>
+        <el-col :span="4" class="table-cell">{{coupon.endTime | formatStatus}}</el-col>
+      </el-row>
+      <el-row>
+        <el-col :span="4" class="table-cell-title">有效期</el-col>
+        <el-col :span="4" class="table-cell-title">总发行量</el-col>
+        <el-col :span="4" class="table-cell-title">已领取</el-col>
+        <el-col :span="4" class="table-cell-title">待领取</el-col>
+        <el-col :span="4" class="table-cell-title">已使用</el-col>
+        <el-col :span="4" class="table-cell-title">未使用</el-col>
+      </el-row>
+      <el-row>
+        <el-col :span="4" class="table-cell" style="font-size: 13px">
+          {{coupon.startTime|formatDate}}至{{coupon.endTime|formatDate}}
+        </el-col>
+        <el-col :span="4" class="table-cell">{{coupon.publishCount}}</el-col>
+        <el-col :span="4" class="table-cell">{{coupon.receiveCount}}</el-col>
+        <el-col :span="4" class="table-cell">{{coupon.publishCount-coupon.receiveCount}}</el-col>
+        <el-col :span="4" class="table-cell">{{coupon.useCount}}</el-col>
+        <el-col :span="4" class="table-cell">{{coupon.publishCount-coupon.useCount}}</el-col>
+      </el-row>
+    </div>
+    <el-card class="filter-container" shadow="never">
+      <div>
+        <i class="el-icon-search"></i>
+        <span>筛选搜索</span>
+        <el-button
+          style="float:right"
+          type="primary"
+          @click="handleSearchList()"
+          size="small">
+          查询搜索
+        </el-button>
+        <el-button
+          style="float:right;margin-right: 15px"
+          @click="handleResetSearch()"
+          size="small">
+          重置
+        </el-button>
+      </div>
+      <div style="margin-top: 15px">
+        <el-form :inline="true" :model="listQuery" size="small" label-width="140px">
+          <el-form-item label="使用状态：">
+            <el-select v-model="listQuery.useStatus" placeholder="全部" clearable class="input-width">
+              <el-option v-for="item in useTypeOptions"
+                         :key="item.value"
+                         :label="item.label"
+                         :value="item.value">
+              </el-option>
+            </el-select>
+          </el-form-item>
+          <el-form-item label="订单编号：">
+            <el-input v-model="listQuery.orderSn" class="input-width" placeholder="订单编号"></el-input>
+          </el-form-item>
+        </el-form>
+      </div>
+    </el-card>
+  </div>
+</template>
+<script>
+  import {formatDate} from '@/utils/date';
+  import {getCoupon} from '@/api/coupon';
+
+  const defaultTypeOptions = [
+    {
+      label: '全场赠券',
+      value: 0
+    },
+    {
+      label: '会员赠券',
+      value: 1
+    },
+    {
+      label: '购物赠券',
+      value: 2
+    },
+    {
+      label: '注册赠券',
+      value: 3
+    }
+  ];
+  const defaultListQuery = {
+    pageNum: 1,
+    pageSize: 10,
+    useStatus: null,
+    orderSn: null,
+    couponId: null
+  };
+  const defaultUseTypeOptions= [
+    {
+      label: "未使用",
+      value: 0
+    },
+    {
+      label: "已使用",
+      value: 1
+    },
+    {
+      label: "已过期",
+      value: 2
+    }
+  ];
+  export default {
+    name: 'couponHistoryList',
+    data() {
+      return {
+        coupon: {},
+        listQuery: Object.assign({}, defaultListQuery),
+        useTypeOptions:Object.assign({},defaultUseTypeOptions)
+      }
+    },
+    created() {
+      getCoupon(this.$route.query.id).then(response => {
+        this.coupon = response.data;
+      });
+      this.listQuery.couponId=this.$route.query.id;
+    },
+    filters: {
+      formatType(type) {
+        for (let i = 0; i < defaultTypeOptions.length; i++) {
+          if (type === defaultTypeOptions[i].value) {
+            return defaultTypeOptions[i].label;
+          }
+        }
+        return '';
+      },
+      formatUseType(useType) {
+        if (useType === 0) {
+          return '全场通用';
+        } else if (useType === 1) {
+          return '指定分类';
+        } else {
+          return '指定商品';
+        }
+      },
+      formatPlatform(platform) {
+        if (platform === 1) {
+          return '移动平台';
+        } else if (platform === 2) {
+          return 'PC平台';
+        } else {
+          return '全平台';
+        }
+      },
+      formatDate(time) {
+        if (time == null || time === '') {
+          return 'N/A';
+        }
+        let date = new Date(time);
+        return formatDate(date, 'yyyy-MM-dd')
+      },
+      formatStatus(endTime) {
+        let now = new Date().getTime();
+        if (endTime > now) {
+          return '未过期'
+        } else {
+          return '已过期';
+        }
+      }
+    },
+    methods: {}
+  }
+</script>
+<style scoped>
+  .app-container {
+    width: 80%;
+    margin: 20px auto;
+  }
+
+  .filter-container {
+    margin-top: 20px;
+  }
+
+  .table-layout {
+    margin-top: 20px;
+    border-left: 1px solid #DCDFE6;
+    border-top: 1px solid #DCDFE6;
+  }
+
+  .table-cell {
+    height: 60px;
+    line-height: 40px;
+    border-right: 1px solid #DCDFE6;
+    border-bottom: 1px solid #DCDFE6;
+    padding: 10px;
+    font-size: 14px;
+    color: #606266;
+    text-align: center;
+    overflow: hidden;
+  }
+
+  .table-cell-title {
+    border-right: 1px solid #DCDFE6;
+    border-bottom: 1px solid #DCDFE6;
+    padding: 10px;
+    background: #F2F6FC;
+    text-align: center;
+    font-size: 14px;
+    color: #303133;
+  }
+</style>
+
+

src/views/sms/coupon/index.vue

@@ -76,7 +76,9 @@
         </el-table-column>
         <el-table-column label="操作" width="180" align="center">
           <template slot-scope="scope">
-            <el-button size="mini" type="text">查看</el-button>
+            <el-button size="mini"
+                       type="text"
+                       @click="handleView(scope.$index, scope.row)">查看</el-button>
             <el-button size="mini"
                        type="text"
                        @click="handleUpdate(scope.$index, scope.row)">
@@ -210,6 +212,9 @@
       handleAdd(){
         this.$router.push({path: '/sms/addCoupon'})
       },
+      handleView(index, row) {
+        this.$router.push({path: '/sms/couponHistory', query: {id: row.id}})
+      },
       handleUpdate(index, row) {
         this.$router.push({path: '/sms/updateCoupon', query: {id: row.id}})
       },