添加优惠券历史页

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}})
  },