feat: 增加优惠券领取详情和优化pc端跳转使用优惠券页面

buyer/src/pages/CouponCenter.vue

@@ -5,25 +5,44 @@
       <div>
         <div class="coupon-title">
           <router-link to="/">
-            <img src="../assets/images/logo.png" width="120" alt="">
+            <img src="../assets/images/logo.png" width="120" alt="" />
           </router-link>
           <p>领券中心</p>
-          <Input search style="width:400px" @on-search='search' enter-button="搜索" placeholder="搜索优惠券" />
+          <Input
+            search
+            style="width: 400px"
+            @on-search="search"
+            enter-button="搜索"
+            placeholder="搜索优惠券"
+          />
         </div>
 
         <div class="fontsize_18 recommend">推荐好券</div>
 
-        <empty v-if="list.length===0" />
+        <empty v-if="list.length === 0" />
         <ul class="coupon-list" v-else>
           <li v-for="(item, index) in list" class="coupon-item" :key="index">
             <div class="c-left">
               <div>
-                <span v-if="item.couponType === 'PRICE'" class="fontsize_12 global_color">￥<span class="price">{{item.price | unitPrice}}</span></span>
+                <span
-                <span v-if="item.couponType === 'DISCOUNT'" class="fontsize_12 global_color"><span class="price">{{item.couponDiscount}}</span>折</span>
+                  v-if="item.couponType === 'PRICE'"
-                <span class="describe">满{{item.consumeThreshold}}元可用</span>
+                  class="fontsize_12 global_color"
+                  >￥<span class="price">{{
+                    item.price | unitPrice
+                  }}</span></span
+                >
+                <span
+                  v-if="item.couponType === 'DISCOUNT'"
+                  class="fontsize_12 global_color"
+                  ><span class="price">{{ item.couponDiscount }}</span
+                  >折</span
+                >
+                <span class="describe"
+                  >满{{ item.consumeThreshold }}元可用</span
+                >
               </div>
-              <p>使用范围：{{useScope(item.scopeType, item.storeName)}}</p>
+              <p>使用范围：{{ useScope(item.scopeType, item.storeName) }}</p>
-              <p>有效期：{{item.endTime}}</p>
+              <p>有效期：{{ item.endTime }}</p>
             </div>
             <b></b>
             <a class="c-right" @click="receive(item)">立即领取</a>
@@ -31,12 +50,15 @@
             <i class="circle-bottom"></i>
           </li>
         </ul>
-        <Page :total="total" @on-change="changePageNum"
+        <Page
+          :total="total"
+          @on-change="changePageNum"
           class="pageration"
           @on-page-size-change="changePageSize"
           :page-size="params.pageSize"
           show-total
-          show-sizer>
+          show-sizer
+        >
         </Page>
       </div>
     </div>
@@ -44,104 +66,105 @@
   </div>
 </template>
 <script>
-import {couponList, receiveCoupon} from '@/api/member.js'
+import { couponList, receiveCoupon } from "@/api/member.js";
 export default {
-  data () {
+  data() {
     return {
       list: [], // 优惠券列表
       total: 0, // 优惠券总数
-      params: { // 请求参数
+      params: {
-        getType: 'FREE',
+        // 请求参数
+        getType: "FREE",
         pageNumber: 1,
-        pageSize: 20
+        pageSize: 20,
-      }
+      },
-    }
+    };
   },
   methods: {
     // 搜索优惠券
-    search (item) {
+    search(item) {
-      this.params.couponName = item
+      this.params.couponName = item;
-      this.params.pageNumber = 1
+      this.params.pageNumber = 1;
-      this.getList()
+      this.getList();
     },
     // 获取优惠券列表
-    getList () {
+    getList() {
-      this.$Spin.show()
+      this.$Spin.show();
-      couponList(this.params).then(res => {
+      couponList(this.params)
-        this.$Spin.hide()
+        .then((res) => {
-        this.loading = false
+          this.$Spin.hide();
+          this.loading = false;
           if (res.success) {
-          this.list = res.result.records
+            this.list = res.result.records;
-          this.total = res.result.total
+            this.total = res.result.total;
-        }
-      }).catch(() => { this.$Spin.hide() })
-    },
-    // 分页 改变页码
-    changePageNum (val) {
-      this.params.pageNumber = val;
-      this.getList()
-    },
-    // 分页 改变每页数
-    changePageSize (val) {
-      this.params.pageNumber = 1;
-      this.params.pageSize = val;
-      this.getList()
-    },
-    // 领取优惠券
-    receive (item) {
-      receiveCoupon(item.id).then(res => {
-        if (res.success) {
-          this.$Modal.confirm({
-            title: '领取优惠券',
-            content: '<p>优惠券领取成功，可到我的优惠券页面查看</p>',
-            okText: '我的优惠券',
-            cancelText: '立即使用',
-            closable: true,
-            onOk: () => {
-              this.$router.push('/home/Coupons')
-            },
-            onCancel: () => {
-              if (item.storeId !== '0') {
-                this.$router.push({path: '/merchant', query: {id: item.storeId}})
-              } else {
-                if (item.scopeType === 'PORTION_GOODS_CATEGORY') {
-                  this.$router.push({path: '/goodsList', query: {categoryId: item.scopeId}})
-                } else {
-                  this.$router.push({path: '/goodsList'})
-                }
-              }
-            }
-          });
           }
         })
+        .catch(() => {
+          this.$Spin.hide();
+        });
+    },
+    // 分页 改变页码
+    changePageNum(val) {
+      this.params.pageNumber = val;
+      this.getList();
+    },
+    // 分页 改变每页数
+    changePageSize(val) {
+      this.params.pageNumber = 1;
+      this.params.pageSize = val;
+      this.getList();
+    },
+    // 领取优惠券
+    receive(item) {
+      receiveCoupon(item.id).then((res) => {
+        if (res.success) {
+          console.log(item);
+          this.$Modal.confirm({
+            title: "领取优惠券",
+            content: "<p>优惠券领取成功，可到我的优惠券页面查看</p>",
+            okText: "我的优惠券",
+            cancelText: "立即使用",
+            closable: true,
+            onOk: () => {
+              this.$router.push("/home/Coupons");
+            },
+            onCancel: () => {
+              this.$router.push({
+                path: "/goodsList",
+                query: { promotionsId: item.id, promotionType: "COUPON" },
+              });
+            },
+          });
+        }
+      });
     },
     // 优惠券可用范围
-    useScope (type, storeName) {
+    useScope(type, storeName) {
-      let shop = '平台';
+      let shop = "平台";
-      let goods = '全部商品'
+      let goods = "全部商品";
-      if (storeName !== 'platform') shop = storeName
+      if (storeName !== "platform") shop = storeName;
       switch (type) {
-        case 'ALL':
+        case "ALL":
-          goods = '全部商品'
+          goods = "全部商品";
           break;
-        case 'PORTION_GOODS':
+        case "PORTION_GOODS":
-          goods = '部分商品'
+          goods = "部分商品";
           break;
-        case 'PORTION_GOODS_CATEGORY':
+        case "PORTION_GOODS_CATEGORY":
-          goods = '部分分类商品'
+          goods = "部分分类商品";
           break;
       }
-      return `${shop}${goods}可用`
+      return `${shop}${goods}可用`;
-    }
     },
-  mounted () {
+  },
-    this.getList()
+  mounted() {
-  }
+    this.getList();
-}
+  },
+};
 </script>
 <style lang="scss" scoped>
-  @import '../assets/styles/coupon.scss';
+@import "../assets/styles/coupon.scss";
-  .content{
+.content {
   width: 100%;
   background-color: #fff;
 
@@ -149,30 +172,30 @@ export default {
     margin: 10px auto;
     width: 1200px;
   }
-  }
+}
-  .coupon-title {
+.coupon-title {
   display: flex;
   align-items: center;
 
-    p{
+  p {
     font-size: 18px;
     margin-right: 500px;
   }
   border-bottom: 2px solid $theme_color;
-  }
+}
-  .recommend {
+.recommend {
   margin: 20px auto;
   font-weight: bold;
   width: 200px;
   text-align: center;
+}
+.coupon-item {
+  b {
+    background: url("../assets/images/small-circle.png") top left repeat-y;
   }
-  .coupon-item {
+}
-    b{
+.pageration {
-      background: url('../assets/images/small-circle.png') top left repeat-y;
-    }
-  }
-  .pageration {
   text-align: right;
   padding-bottom: 10px;
-  }
+}
 </style>

buyer/src/pages/GoodsList.vue

@@ -82,20 +82,24 @@
               </div>
 
               <div class="goods-show-right">
-                <Tag class="goods-show-tag" color="red" v-if="item.content.selfOperated">
+                <Tag
+                  class="goods-show-tag"
+                  color="red"
+                  v-if="item.content.selfOperated"
+                >
                   自营
                 </Tag>
                 <Tag
-                  class="goods-show-tag" color="blue"
+                  class="goods-show-tag"
+                  color="blue"
                   v-if="item.content.goodsType == 'VIRTUAL_GOODS'"
                 >
                   虚拟
                 </Tag>
                 <Tag
-                  class="goods-show-tag" color="blue"
+                  class="goods-show-tag"
-                  v-else-if="
+                  color="blue"
-                    item.content.goodsType == 'PHYSICAL_GOODS'
+                  v-else-if="item.content.goodsType == 'PHYSICAL_GOODS'"
-                  "
                 >
                   实物
                 </Tag>
@@ -155,13 +159,21 @@ export default {
   watch: {
     $route() {
       const keyword = this.$route.query.keyword;
+      if (keyword) {
         this.handleSearch(keyword);
+      }
       if (this.$route.query.categoryId) {
         let cateId = this.$route.query.categoryId.split(",");
         Object.assign(this.params, this.$route.query);
         this.params.categoryId = cateId[cateId.length - 1];
-        this.getGoodsList();
       }
+      if (this.$route.query.promotionType) {
+        this.params.promotionType = this.$route.query.promotionType;
+      }
+      if (this.$route.query.promotionsId) {
+        this.params.promotionsId = this.$route.query.promotionsId;
+      }
+      this.getGoodsList();
     },
   },
   methods: {
@@ -301,7 +313,6 @@ export default {
   margin-top: 5px;
 }
 
-
 .goods-show-self {
   float: left;
   height: 16px;

buyer/src/pages/home/userCenter/Coupons.vue

@@ -1,136 +1,155 @@
 <template>
   <div class="wrapper">
     <card _Title="优惠券列表" :_Tabs="statusNameList" @_Change="change" />
-    <empty v-if="list.length==0" />
+    <empty v-if="list.length == 0" />
     <ul class="coupon-list" v-else>
       <li v-for="(item, index) in list" class="coupon-item" :key="index">
         <div class="c-left">
           <div>
-            <span v-if="item.couponType === 'PRICE'" class="fontsize_12 global_color">￥<span class="price">{{item.price | unitPrice}}</span></span>
+            <span
-            <span v-if="item.couponType === 'DISCOUNT'" class="fontsize_12 global_color"><span class="price">{{item.discount}}</span>折</span>
+              v-if="item.couponType === 'PRICE'"
-            <span class="describe">满{{item.consumeThreshold}}元可用</span>
+              class="fontsize_12 global_color"
+              >￥<span class="price">{{ item.price | unitPrice }}</span></span
+            >
+            <span
+              v-if="item.couponType === 'DISCOUNT'"
+              class="fontsize_12 global_color"
+              ><span class="price">{{ item.discount }}</span
+              >折</span
+            >
+            <span class="describe">满{{ item.consumeThreshold }}元可用</span>
           </div>
-          <p>使用范围：{{useScope(item.scopeType, item.storeName)}}</p>
+          <p>使用范围：{{ useScope(item.scopeType, item.storeName) }}</p>
-          <p>有效期：{{item.endTime}}</p>
+          <p>有效期：{{ item.endTime }}</p>
         </div>
         <b></b>
-        <a class="c-right" :class="{'canot-use':params.memberCouponStatus !== 'NEW'}" @click="go(item)">立即使用</a>
+        <a
+          class="c-right"
+          :class="{ 'canot-use': params.memberCouponStatus !== 'NEW' }"
+          @click="go(item)"
+          >立即使用</a
+        >
         <i class="circle-top"></i>
         <i class="circle-bottom"></i>
       </li>
     </ul>
-    <Page :total="total" @on-change="changePageNum"
+    <Page
+      :total="total"
+      @on-change="changePageNum"
       class="pageration"
       @on-page-size-change="changePageSize"
       :page-size="params.pageSize"
       show-total
-      show-sizer>
+      show-sizer
+    >
     </Page>
     <Spin v-if="loading" fix></Spin>
   </div>
 </template>
 
 <script>
-import { memberCouponList } from '@/api/member.js';
+import { memberCouponList } from "@/api/member.js";
 export default {
-  name: 'Coupons',
+  name: "Coupons",
-  data () {
+  data() {
     return {
-      statusNameList: [ // 优惠券状态
+      statusNameList: [
-        '未使用',
+        // 优惠券状态
-        '已使用',
+        "未使用",
-        '已过期'
+        "已使用",
+        "已过期",
       ],
-      statusList: ['NEW', 'USED', 'EXPIRE'], // 优惠券状态
+      statusList: ["NEW", "USED", "EXPIRE"], // 优惠券状态
       loading: false, // 列表加载状态
-      params: { // 请求参数
+      params: {
+        // 请求参数
         pageNumber: 1,
         pageSize: 10,
-        memberCouponStatus: 'NEW'
+        memberCouponStatus: "NEW",
       },
       total: 0, // 优惠券总数
-      list: [] // 优惠券列表
+      list: [], // 优惠券列表
     };
   },
   methods: {
-    getList () { // 获取优惠券列表
+    getList() {
-      this.loading = true
+      // 获取优惠券列表
-      memberCouponList(this.params).then(res => {
+      this.loading = true;
-        this.loading = false
+      memberCouponList(this.params).then((res) => {
+        this.loading = false;
         if (res.success) {
-          this.list = res.result.records
+          this.list = res.result.records;
-          this.total = res.result.total
+          this.total = res.result.total;
         }
-      })
+      });
     },
     // 切换优惠券状态
-    change (index) {
+    change(index) {
-      this.params.memberCouponStatus = this.statusList[index]
+      this.params.memberCouponStatus = this.statusList[index];
       this.params.pageNumber = 1;
-      this.getList()
+      this.getList();
     },
-    go (item) { // 根据使用条件跳转商品列表页面
+    go(item) {
-      if (this.params.memberCouponStatus !== 'NEW') return;
+      // 根据使用条件跳转商品列表页面
+      if (this.params.memberCouponStatus !== "NEW") return;
 
-      if (item.storeId !== '0') {
+      this.$router.push({
-        this.$router.push({path: '/merchant', query: {id: item.storeId}})
+        path: "/goodsList",
-      } else {
+        query: { promotionsId: item.couponId, promotionType: "COUPON" },
-        if (item.scopeType === 'PORTION_GOODS_CATEGORY') {
+      });
-          this.$router.push({path: '/goodsList', query: {categoryId: item.scopeId}})
-        } else {
-          this.$router.push({path: '/goodsList'})
-        }
-      }
     },
 
-    changePageNum (val) { // 分页改变页码
+    changePageNum(val) {
+      // 分页改变页码
       this.params.pageNumber = val;
-      this.getList()
+      this.getList();
     },
 
-    changePageSize (val) { // 分页改变页数
+    changePageSize(val) {
+      // 分页改变页数
       this.params.pageNumber = 1;
       this.params.pageSize = val;
-      this.getList()
+      this.getList();
     },
 
-    useScope (type, storeName) { // 根据字段返回 优惠券适用范围
+    useScope(type, storeName) {
-      let shop = '平台';
+      // 根据字段返回 优惠券适用范围
-      let goods = '全部商品'
+      let shop = "平台";
-      if (storeName !== 'platform') shop = storeName
+      let goods = "全部商品";
+      if (storeName !== "platform") shop = storeName;
       switch (type) {
-        case 'ALL':
+        case "ALL":
-          goods = '全部商品'
+          goods = "全部商品";
           break;
-        case 'PORTION_GOODS':
+        case "PORTION_GOODS":
-          goods = '部分商品'
+          goods = "部分商品";
           break;
-        case 'PORTION_GOODS_CATEGORY':
+        case "PORTION_GOODS_CATEGORY":
-          goods = '部分分类商品'
+          goods = "部分分类商品";
           break;
       }
-      return `${shop}${goods}可用`
+      return `${shop}${goods}可用`;
-    }
     },
-  mounted () {
+  },
-    this.getList()
+  mounted() {
-  }
+    this.getList();
-}
+  },
+};
 </script>
 
 <style scoped lang="scss">
-@import '../../../assets/styles/coupon.scss';
+@import "../../../assets/styles/coupon.scss";
-.coupon-item{
+.coupon-item {
   height: 125px;
-  .c-left{
+  .c-left {
     padding: 16px;
   }
-  .c-right{
+  .c-right {
     padding: 20px 16px;
     width: 43px;
     font-size: 14px;
   }
-  .canot-use{
+  .canot-use {
     color: #999;
     background-color: #eee;
   }

manager/src/api/promotion.js

@@ -209,28 +209,34 @@ export const auditApplySeckill = params => {
 export const getFullDiscountList = params => {
   return getRequest(`/promotion/fullDiscount`, params);
 };
+
 // 满优惠列表
 export const getFullDiscountById = id => {
   return getRequest(`/promotion/fullDiscount/${id}`);
 };
+
 // 开启、关闭满额活动
 export const updateFullDiscount = (id, promotionStatus) => {
   return putRequest(`/promotion/fullDiscount/status/${id}`)
 }
+
 // 积分商品列表
 export const getPointsGoodsList = params => {
   return getRequest(`/promotion/pointsGoods`, params);
 };
+
 // 积分商品详情
 export const getPointsGoodsById = id => {
   return getRequest(`/promotion/pointsGoods/${id}`);
 };
+
 // 添加积分商品
 export const addPointsGoods = params => {
   return postRequest(`/promotion/pointsGoods`, params, {
     "Content-type": "application/json"
   });
 };
+
 // 修改积分商品
 export const updatePointsGoods = params => {
   return putRequest(`/promotion/pointsGoods`, params, {
@@ -250,19 +256,28 @@ export const deletePointsGoodsStatus = id => {
 export const getPointsGoodsCategoryList = params => {
   return getRequest(`/promotion/pointsGoodsCategory`, params);
 };
+
 // 积分商品分类详情
 export const getPointsGoodsCategoryById = id => {
   return getRequest(`/promotion/pointsGoodsCategory/${id}`);
 };
+
 // 添加积分商品分类
 export const addPointsGoodsCategory = params => {
   return postRequest(`/promotion/pointsGoodsCategory`, params);
 };
+
 // 更新积分商品分类
 export const updatePointsGoodsCategory = params => {
   return putRequest(`/promotion/pointsGoodsCategory`, params);
 };
+
 // 删除积分商品分类
 export const deletePointsGoodsCategoryById = id => {
   return deleteRequest(`/promotion/pointsGoodsCategory/${id}`);
 };
+
+// 获取优惠券领取记录
+export const getCouponReceiveList = (params) => {
+  return getRequest("/promotion/coupon/received", params);
+};

manager/src/router/router.js

@@ -193,6 +193,12 @@ export const otherRouter = {
       name: "manager-coupon",
       component: () => import("@/views/promotions/coupon/coupon.vue")
     },
+    {
+      path: "promotions/coupon-receive",
+      title: "优惠券领取记录",
+      name: "coupon-receive",
+      component: () => import("@/views/promotions/coupon/coupon-receive.vue"),
+    },
     {
       path: "promotions/add-platform-coupon",
       title: "添加平台优惠券",

manager/src/utils/promotions.js

@@ -57,4 +57,31 @@ export function promotionsScopeTypeRender(h, params) {
   ]);
 }
 
-
+export function memberPromotionsStatusRender(h, status) {
+  let text = "未知",
+    color = "red";
+  if (status == "NEW") {
+    text = "已领取";
+    color = "geekblue";
+  } else if (status == "USED") {
+    text = "已使用";
+    color = "green";
+  } else if (status == "EXPIRE") {
+    text = "已过期";
+    color = "red";
+  } else if (status == "CLOSED") {
+    text = "已作废";
+    color = "red";
+  }
+  return h("div", [
+    h(
+      "Tag",
+      {
+        props: {
+          color: color,
+        },
+      },
+      text
+    ),
+  ]);
+}

manager/src/views/promotions/coupon/coupon-receive.vue

@@ -0,0 +1,321 @@
+<template>
+  <div class="search">
+    <Card>
+      <Button style="margin-bottom: 10px" @click="back()">返回</Button>
+      <Form
+        ref="searchForm"
+        :model="searchForm"
+        inline
+        :label-width="75"
+        class="search-form mb_10"
+      >
+        <Form-item label="优惠券名称" prop="couponName">
+          <Input
+            type="text"
+            v-model="searchForm.couponName"
+            placeholder="请输入优惠券名称"
+            clearable
+            style="width: 200px"
+          />
+        </Form-item>
+        <Form-item label="会员名称" prop="memberName">
+          <Input
+            type="text"
+            v-model="searchForm.memberName"
+            placeholder="请输入会员名称"
+            clearable
+            style="width: 200px"
+          />
+        </Form-item>
+        <Form-item label="获取方式" prop="getType">
+          <Select
+            v-model="searchForm.getType"
+            placeholder="请选择"
+            clearable
+            style="width: 200px"
+          >
+            <Option value="FREE">免费获取</Option>
+            <Option value="ACTIVITY">活动获取</Option>
+          </Select>
+        </Form-item>
+        <Form-item label="优惠券状态" prop="memberCouponStatus">
+          <Select
+            v-model="searchForm.memberCouponStatus"
+            placeholder="请选择"
+            clearable
+            style="width: 200px"
+          >
+            <Option value="NEW">已领取</Option>
+            <Option value="USED">已使用</Option>
+            <Option value="EXPIRE">已过期</Option>
+            <Option value="CLOSED">已作废</Option>
+          </Select>
+        </Form-item>
+        <Form-item label="活动时间">
+          <DatePicker
+            v-model="selectDate"
+            type="daterange"
+            clearable
+            placeholder="选择起始时间"
+            style="width: 200px"
+          ></DatePicker>
+        </Form-item>
+        <Button
+          @click="handleSearch"
+          type="primary"
+          icon="ios-search"
+          class="search-btn"
+          >搜索</Button
+        >
+      </Form>
+      <Table
+        v-if="refreshTable"
+        :loading="loading"
+        border
+        :columns="columns"
+        :data="data"
+        ref="table"
+        class="mt_10"
+        @on-selection-change="changeSelect"
+      >
+      </Table>
+      <Row type="flex" justify="end" class="mt_10">
+        <Page
+          :current="searchForm.pageNumber"
+          :total="total"
+          :page-size="searchForm.pageSize"
+          @on-change="changePage"
+          @on-page-size-change="changePageSize"
+          :page-size-opts="[10, 20, 50]"
+          size="small"
+          show-total
+          show-elevator
+          show-sizer
+        ></Page>
+      </Row>
+    </Card>
+  </div>
+</template>
+<script>
+import { getCouponReceiveList } from "@/api/promotion";
+import {
+  memberPromotionsStatusRender,
+  promotionsScopeTypeRender,
+} from "@/utils/promotions";
+
+export default {
+  name: "coupon-recevie",
+  data() {
+    return {
+      loading: true, // 表单加载状态
+      searchForm: {
+        // 搜索框初始化对象
+        pageNumber: 1, // 当前页数
+        pageSize: 10, // 页面大小
+        sort: "create_time", // 默认排序字段
+        order: "desc", // 默认排序方式
+        getType: "", // 默认排序方式
+        couponId: this.$route.query.couponId, // 优惠券id
+      },
+      selectList: [], // 多选数据
+      selectCount: 0, // 多选计数
+      columns: [
+        // 表头
+        {
+          title: "会员名称",
+          key: "memberName",
+          minWidth: 130,
+          fixed: "left",
+        },
+        {
+          title: "优惠券名称",
+          key: "couponName",
+          minWidth: 100,
+          tooltip: true,
+        },
+        {
+          title: "发布店铺",
+          key: "storeName",
+          minWidth: 100,
+          render: (h, params) => {
+            return h("div", (params.row.storeName === 'platform' && "平台") || params.row.storeName);
+          },
+        },
+        {
+          title: "面额/折扣",
+          key: "price",
+          width: 100,
+          render: (h, params) => {
+            if (params.row.price) {
+              return h(
+                "div",
+                this.$options.filters.unitPrice(params.row.price, "￥")
+              );
+            } else {
+              return h("div", params.row.discount + "折");
+            }
+          },
+        },
+
+        {
+          title: "使用门槛",
+          key: "consumeThreshold",
+          width: 130,
+        },
+        {
+          title: "获取方式",
+          width: 120,
+          key: "getType",
+          render: (h, params) => {
+            if (params.row.getType === "FREE") {
+              return h("Tag", { props: { color: "red" } }, "免费获取");
+            } else if (params.row.getType === "ACTIVITY") {
+              return h("Tag", { props: { color: "volcano" } }, "活动获取");
+            } else if (params.row.getType === "INSIDE") {
+              return h("Tag", { props: { color: "lime" } }, "内购");
+            } else {
+              return h("Tag", { props: { color: "purple" } }, "未知");
+            }
+          },
+        },
+        {
+          title: "会员优惠券状态",
+          width: 130,
+          key: "memberCouponStatus",
+          render: (h, params) => {
+            return memberPromotionsStatusRender(
+              h,
+              params.row.memberCouponStatus
+            );
+          },
+        },
+        {
+          title: "优惠券类型",
+          key: "couponType",
+          width: 120,
+          render: (h, params) => {
+            if (params.row.couponType === "DISCOUNT") {
+              return h("Tag", { props: { color: "orange" } }, "打折");
+            } else if (params.row.couponType === "PRICE") {
+              return h("Tag", { props: { color: "magenta" } }, "减免现金");
+            } else {
+              return h("Tag", { props: { color: "purple" } }, "未知");
+            }
+          },
+        },
+        {
+          title: "品类描述",
+          key: "scopeType",
+          width: 120,
+          render: (h, params) => {
+            return promotionsScopeTypeRender(h, params);
+          },
+        },
+        {
+          title: "有效时间",
+          width: 150,
+          render: (h, params) => {
+            if (
+              params?.row?.getType === "ACTIVITY" &&
+              params?.row?.rangeDayType === "DYNAMICTIME"
+            ) {
+              return h("div", "长期有效");
+            } else if (params?.row?.startTime && params?.row?.endTime) {
+              return h("div", {
+                domProps: {
+                  innerHTML:
+                    params.row.startTime + "<br/>" + params.row.endTime,
+                },
+              });
+            }
+          },
+        },
+      ],
+      data: [], // 表单数据
+      total: 0, // 表单数据总数
+      refreshTable: true, // 修改选中状态后刷新表格
+      selectDate: [], //选中的信息
+    };
+  },
+  props: {
+    promotionStatus: {
+      type: String,
+      default: "",
+    },
+  },
+  watch: {
+    $route(e) {
+      // 监听路由，参数变化调取接口
+      this.searchForm.couponId = e.query.couponId;
+      if (this.couponId) {
+        this.getDataList();
+      } else {
+        this.$refs.form.resetFields();
+      }
+    },
+  },
+  methods: {
+    back() {
+      this.$store.commit("removeTag", "coupon-receive");
+      this.$router.go(-1);
+    },
+    check() {
+      // 选中的优惠券
+      this.$emit("selected", this.selectList);
+    },
+    // 初始化数据
+    init() {
+      this.getDataList();
+    },
+    changePage(v) {
+      // 改变页码
+      this.searchForm.pageNumber = v;
+      this.getDataList();
+    },
+    changePageSize(v) {
+      // 改变页数
+      this.searchForm.pageNumber = 1;
+      this.searchForm.pageSize = v;
+      this.getDataList();
+    },
+    handleSearch() {
+      // 搜索
+      this.searchForm.pageNumber = 1;
+      this.searchForm.pageSize = 10;
+      this.getDataList();
+    },
+    /**
+     * 选择优惠券
+     */
+    changeSelect(e) {
+      this.selectList = e;
+      this.selectCount = e.length;
+      if (this.getType === "ACTIVITY") this.check();
+    },
+    getDataList() {
+      // 获取数据
+      this.loading = true;
+      if (this.selectDate && this.selectDate[0] && this.selectDate[1]) {
+        this.searchForm.startTime = this.selectDate[0].getTime();
+        this.searchForm.endTime = this.selectDate[1].getTime();
+      } else {
+        this.searchForm.startTime = null;
+        this.searchForm.endTime = null;
+      }
+      getCouponReceiveList(this.searchForm).then((res) => {
+        this.loading = false;
+        if (res.success) {
+          console.log(res);
+          this.data = res.result.records;
+          this.total = res.result.total;
+        }
+      });
+      this.total = this.data.length;
+      this.loading = false;
+    },
+  },
+  mounted() {
+    this.init();
+  },
+};
+</script>

manager/src/views/promotions/coupon/coupon.vue

@@ -17,6 +17,17 @@
             style="width: 200px"
           />
         </Form-item>
+        <Form-item label="获取方式" prop="getType">
+          <Select
+            v-model="searchForm.getType"
+            placeholder="请选择"
+            clearable
+            style="width: 200px"
+          >
+            <Option value="FREE">免费获取</Option>
+            <Option value="ACTIVITY">活动获取</Option>
+          </Select>
+        </Form-item>
         <Form-item label="活动状态" prop="promotionStatus">
           <Select
             v-model="searchForm.promotionStatus"
@@ -50,6 +61,7 @@
       <Row class="operation padding-row" v-if="getType !== 'ACTIVITY'">
         <Button @click="add" type="primary">添加优惠券</Button>
         <Button @click="delAll">批量关闭</Button>
+        <Button @click="receivePage()" type="info">优惠券领取记录</Button>
       </Row>
       <Table
         v-if="refreshTable"
@@ -97,6 +109,13 @@
             @click="remove(row)"
             >删除
           </Button>
+          <Button
+            style="margin: 5px"
+            type="info"
+            size="small"
+            @click="receivePage(row.id)"
+            >领取记录
+          </Button>
         </template>
       </Table>
       <Row type="flex" justify="end" class="mt_10">
@@ -150,12 +169,6 @@ export default {
           align: "center",
           fixed: "left",
         },
-        {
-          title: "活动名称",
-          key: "promotionName",
-          width: 180,
-          fixed: "left",
-        },
         {
           title: "优惠券名称",
           key: "couponName",
@@ -200,6 +213,24 @@ export default {
             return h("div", params.row.usedNum + "/" + params.row.receivedNum);
           },
         },
+        {
+          title: "获取方式",
+          width: 120,
+          key: "getType",
+          render: (h, params) => {
+            if (params.row.getType === "FREE") {
+              return h("Tag", { props: { color: "red" } }, "免费获取");
+            } else if (params.row.getType === "ACTIVITY") {
+              return h("Tag", { props: { color: "volcano" } }, "活动获取");
+            } else if (params.row.getType === "INSIDE") {
+              return h("Tag", { props: { color: "lime" } }, "内购");
+            } else if (params.row.getType === "IGAME") {
+              return h("Tag", { props: { color: "lime" } }, "游戏人生");
+            } else {
+              return h("Tag", { props: { color: "purple" } }, "未知");
+            }
+          },
+        },
         {
           title: "优惠券类型",
           key: "couponType",
@@ -324,6 +355,13 @@ export default {
       // 选中的优惠券
       this.$emit("selected", this.selectList);
     },
+    receivePage(id) {
+      if (id) {
+        this.$router.push({ name: "coupon-receive", query: { couponId: id } });
+      } else {
+        this.$router.push({ name: "coupon-receive" });
+      }
+    },
     // 初始化数据
     init() {
       this.getDataList();

seller/src/api/promotion.js

@@ -32,7 +32,7 @@ export const delLiveGoods = (goodsId) => {
 }
 
 // 直播间删除商品
-export const delRoomLiveGoods = (roomId,liveGoodsId) => {
+export const delRoomLiveGoods = (roomId, liveGoodsId) => {
     return deleteRequest(`/broadcast/studio/deleteInRoom/${roomId}/${liveGoodsId}`)
 }
 
@@ -44,7 +44,7 @@ export const addLiveStoreGoods = (params) => {
 // 店铺直播间添加
 export const addLiveGoods = (params) => {
 
-  return putRequest(`/broadcast/studio/push/${params.roomId}/${params.liveGoodsId}`, {goodsId: params.goodsId})
+    return putRequest(`/broadcast/studio/push/${params.roomId}/${params.liveGoodsId}`, { goodsId: params.goodsId })
 }
 
 // 获取拼团列表
@@ -53,11 +53,11 @@ export const getPintuanList = (params) => {
 }
 // 新建 拼团
 export const savePintuan = (params) => {
-    return postRequest('/promotion/pintuan', params,{'Content-type': 'application/json'})
+    return postRequest('/promotion/pintuan', params, { 'Content-type': 'application/json' })
 }
 // 编辑 拼团
 export const editPintuan = (params) => {
-    return putRequest('/promotion/pintuan', params,{'Content-type': 'application/json'})
+    return putRequest('/promotion/pintuan', params, { 'Content-type': 'application/json' })
 }
 // 手动开启拼团活动
 export const editPintuanStatus = (pintuanId, params) => {
@@ -76,17 +76,17 @@ export const getPintuanDetail = (id) => {
 
 // 获取拼团商品列表
 export const getPintuanGoodsList = (params) => {
-    return getRequest(`/promotion/pintuan/goods/${params.pintuanId}`,params)
+    return getRequest(`/promotion/pintuan/goods/${params.pintuanId}`, params)
 }
 
 // 新增优惠券
 export const saveShopCoupon = (params) => {
-    return postRequest('/promotion/coupon', params,{'Content-type': 'application/json'})
+    return postRequest('/promotion/coupon', params, { 'Content-type': 'application/json' })
 }
 
 // 修改优惠券
 export const editShopCoupon = (params) => {
-    return putRequest('/promotion/coupon', params,{'Content-type': 'application/json'})
+    return putRequest('/promotion/coupon', params, { 'Content-type': 'application/json' })
 }
 
 // 获取优惠券列表
@@ -95,7 +95,7 @@ export const getShopCouponList = (params) => {
 }
 
 //  更新优惠券状态
-export const updateCouponStatus = ( params) => {
+export const updateCouponStatus = (params) => {
     return putRequest(`/promotion/coupon/status`, params)
 }
 
@@ -123,17 +123,17 @@ export const deleteMemberReceiveCoupon = (ids, params) => {
 
 // 限时秒杀活动列表
 export const seckillList = (params) => {
-    return getRequest(`/promotion/seckill`,params)
+    return getRequest(`/promotion/seckill`, params)
 }
 
 // 限时秒杀活动商品
 export const seckillGoodsList = (params) => {
-    return getRequest(`/promotion/seckill/apply`,params)
+    return getRequest(`/promotion/seckill/apply`, params)
 }
 
 // 添加限时抢购 商品
 export const setSeckillGoods = (params) => {
-    return postRequest(`/promotion/seckill/apply/${params.seckillId}`,params.applyVos,{'Content-type': 'application/json'})
+    return postRequest(`/promotion/seckill/apply/${params.seckillId}`, params.applyVos, { 'Content-type': 'application/json' })
 }
 
 // 添加限时抢购 商品
@@ -148,20 +148,20 @@ export const seckillDetail = (seckillId) => {
 // 删除秒杀商品
 export const delSeckillGoods = params => {
     return deleteRequest(`/promotion/seckill/apply/${params.seckillId}/${params.id}`);
-  };
+};
 // 满减满赠活动列表
 export const getFullDiscountList = (params) => {
-    return getRequest(`/promotion/fullDiscount`,params)
+    return getRequest(`/promotion/fullDiscount`, params)
 }
 
 // 新增满减活动
 export const newFullDiscount = (params) => {
-    return postRequest(`/promotion/fullDiscount`,params,{'Content-type': 'application/json'})
+    return postRequest(`/promotion/fullDiscount`, params, { 'Content-type': 'application/json' })
 }
 
 // 编辑满减活动
 export const editFullDiscount = (params) => {
-    return putRequest(`/promotion/fullDiscount`,params,{'Content-type': 'application/json'})
+    return putRequest(`/promotion/fullDiscount`, params, { 'Content-type': 'application/json' })
 }
 
 // 通过id获取满减活动
@@ -177,3 +177,8 @@ export const delFullDiscount = (id) => {
 export const updateFullDiscount = (id, params) => {
     return putRequest(`/promotion/fullDiscount/status/${id}`, params)
 }
+
+// 获取优惠券领取记录
+export const getCouponReceiveList = (params) => {
+    return getRequest("/promotion/coupon/received", params);
+};

seller/src/router/router.js

@@ -158,6 +158,12 @@ export const otherRouter = {
       name: "renovation",
       component: () => import("@/views/shop/renovation.vue")
     },
+    {
+      path: "promotions/coupon-receive",
+      title: "优惠券领取记录",
+      name: "coupon-receive",
+      component: () => import("@/views/promotion/coupon/coupon-receive.vue"),
+    },
     // {
     //   path: "/*",
     //   name: "error-404",

seller/src/utils/promotions.js

@@ -57,4 +57,31 @@ export function promotionsScopeTypeRender(h, params) {
   ]);
 }
 
-
+export function memberPromotionsStatusRender(h, status) {
+  let text = "未知",
+    color = "red";
+  if (status == "NEW") {
+    text = "已领取";
+    color = "geekblue";
+  } else if (status == "USED") {
+    text = "已使用";
+    color = "green";
+  } else if (status == "EXPIRE") {
+    text = "已过期";
+    color = "red";
+  } else if (status == "CLOSED") {
+    text = "已作废";
+    color = "red";
+  }
+  return h("div", [
+    h(
+      "Tag",
+      {
+        props: {
+          color: color,
+        },
+      },
+      text
+    ),
+  ]);
+}

seller/src/views/promotion/coupon/coupon-receive.vue

@@ -0,0 +1,285 @@
+<template>
+  <div class="search">
+    <Card>
+      <Button style="margin-bottom: 10px" @click="back()">返回</Button>
+      <Form
+        ref="searchForm"
+        :model="searchForm"
+        inline
+        :label-width="75"
+        class="search-form mb_10"
+      >
+        <Form-item label="优惠券名称" prop="couponName">
+          <Input
+            type="text"
+            v-model="searchForm.couponName"
+            placeholder="请输入优惠券名称"
+            clearable
+            style="width: 200px"
+          />
+        </Form-item>
+        <Form-item label="会员名称" prop="memberName">
+          <Input
+            type="text"
+            v-model="searchForm.memberName"
+            placeholder="请输入会员名称"
+            clearable
+            style="width: 200px"
+          />
+        </Form-item>
+        <Form-item label="优惠券状态" prop="memberCouponStatus">
+          <Select
+            v-model="searchForm.memberCouponStatus"
+            placeholder="请选择"
+            clearable
+            style="width: 200px"
+          >
+            <Option value="NEW">已领取</Option>
+            <Option value="USED">已使用</Option>
+            <Option value="EXPIRE">已过期</Option>
+            <Option value="CLOSED">已作废</Option>
+          </Select>
+        </Form-item>
+        <Form-item label="活动时间">
+          <DatePicker
+            v-model="selectDate"
+            type="daterange"
+            clearable
+            placeholder="选择起始时间"
+            style="width: 200px"
+          ></DatePicker>
+        </Form-item>
+        <Button
+          @click="handleSearch"
+          type="primary"
+          icon="ios-search"
+          class="search-btn"
+          >搜索</Button
+        >
+      </Form>
+      <Table
+        v-if="refreshTable"
+        :loading="loading"
+        border
+        :columns="columns"
+        :data="data"
+        ref="table"
+        class="mt_10"
+        @on-selection-change="changeSelect"
+      >
+      </Table>
+      <Row type="flex" justify="end" class="mt_10">
+        <Page
+          :current="searchForm.pageNumber"
+          :total="total"
+          :page-size="searchForm.pageSize"
+          @on-change="changePage"
+          @on-page-size-change="changePageSize"
+          :page-size-opts="[10, 20, 50]"
+          size="small"
+          show-total
+          show-elevator
+          show-sizer
+        ></Page>
+      </Row>
+    </Card>
+  </div>
+</template>
+<script>
+import { getCouponReceiveList } from "@/api/promotion";
+import {
+  memberPromotionsStatusRender,
+  promotionsScopeTypeRender,
+} from "@/utils/promotions";
+
+export default {
+  name: "coupon-recevie",
+  data() {
+    return {
+      loading: true, // 表单加载状态
+      searchForm: {
+        // 搜索框初始化对象
+        pageNumber: 1, // 当前页数
+        pageSize: 10, // 页面大小
+        sort: "create_time", // 默认排序字段
+        order: "desc", // 默认排序方式
+        getType: "", // 默认排序方式
+        couponId: this.$route.query.couponId, // 优惠券id
+      },
+      selectList: [], // 多选数据
+      selectCount: 0, // 多选计数
+      columns: [
+        // 表头
+        {
+          title: "会员名称",
+          key: "memberName",
+          fixed: "left",
+        },
+        {
+          title: "优惠券名称",
+          key: "couponName",
+          minWidth: 100,
+          tooltip: true,
+        },
+        {
+          title: "面额/折扣",
+          key: "price",
+          width: 100,
+          render: (h, params) => {
+            if (params.row.price) {
+              return h(
+                "div",
+                this.$options.filters.unitPrice(params.row.price, "￥")
+              );
+            } else {
+              return h("div", params.row.discount + "折");
+            }
+          },
+        },
+
+        {
+          title: "使用门槛",
+          key: "consumeThreshold",
+          width: 130,
+        },
+        {
+          title: "会员优惠券状态",
+          width: 130,
+          key: "memberCouponStatus",
+          render: (h, params) => {
+            return memberPromotionsStatusRender(
+              h,
+              params.row.memberCouponStatus
+            );
+          },
+        },
+        {
+          title: "优惠券类型",
+          key: "couponType",
+          width: 120,
+          render: (h, params) => {
+            if (params.row.couponType === "DISCOUNT") {
+              return h("Tag", { props: { color: "orange" } }, "打折");
+            } else if (params.row.couponType === "PRICE") {
+              return h("Tag", { props: { color: "magenta" } }, "减免现金");
+            } else {
+              return h("Tag", { props: { color: "purple" } }, "未知");
+            }
+          },
+        },
+        {
+          title: "品类描述",
+          key: "scopeType",
+          width: 120,
+          render: (h, params) => {
+            return promotionsScopeTypeRender(h, params);
+          },
+        },
+        {
+          title: "有效时间",
+          width: 150,
+          render: (h, params) => {
+            if (
+              params?.row?.getType === "ACTIVITY" &&
+              params?.row?.rangeDayType === "DYNAMICTIME"
+            ) {
+              return h("div", "长期有效");
+            } else if (params?.row?.startTime && params?.row?.endTime) {
+              return h("div", {
+                domProps: {
+                  innerHTML:
+                    params.row.startTime + "<br/>" + params.row.endTime,
+                },
+              });
+            }
+          },
+        },
+      ],
+      data: [], // 表单数据
+      total: 0, // 表单数据总数
+      refreshTable: true, // 修改选中状态后刷新表格
+      selectDate: [], //选中的信息
+    };
+  },
+  props: {
+    promotionStatus: {
+      type: String,
+      default: "",
+    },
+  },
+  watch: {
+    $route(e) {
+      // 监听路由，参数变化调取接口
+      this.searchForm.couponId = e.query.couponId;
+      if (this.couponId) {
+        this.getDataList();
+      } else {
+        this.$refs.form.resetFields();
+      }
+    },
+  },
+  methods: {
+    back() {
+      this.$store.commit("removeTag", "coupon-receive");
+      this.$router.go(-1);
+    },
+    check() {
+      // 选中的优惠券
+      this.$emit("selected", this.selectList);
+    },
+    // 初始化数据
+    init() {
+      this.getDataList();
+    },
+    changePage(v) {
+      // 改变页码
+      this.searchForm.pageNumber = v;
+      this.getDataList();
+    },
+    changePageSize(v) {
+      // 改变页数
+      this.searchForm.pageNumber = 1;
+      this.searchForm.pageSize = v;
+      this.getDataList();
+    },
+    handleSearch() {
+      // 搜索
+      this.searchForm.pageNumber = 1;
+      this.searchForm.pageSize = 10;
+      this.getDataList();
+    },
+    /**
+     * 选择优惠券
+     */
+    changeSelect(e) {
+      this.selectList = e;
+      this.selectCount = e.length;
+      if (this.getType === "ACTIVITY") this.check();
+    },
+    getDataList() {
+      // 获取数据
+      this.loading = true;
+      if (this.selectDate && this.selectDate[0] && this.selectDate[1]) {
+        this.searchForm.startTime = this.selectDate[0].getTime();
+        this.searchForm.endTime = this.selectDate[1].getTime();
+      } else {
+        this.searchForm.startTime = null;
+        this.searchForm.endTime = null;
+      }
+      getCouponReceiveList(this.searchForm).then((res) => {
+        this.loading = false;
+        if (res.success) {
+          console.log(res);
+          this.data = res.result.records;
+          this.total = res.result.total;
+        }
+      });
+      this.total = this.data.length;
+      this.loading = false;
+    },
+  },
+  mounted() {
+    this.init();
+  },
+};
+</script>

seller/src/views/promotion/coupon/coupon.vue

@@ -53,6 +53,7 @@
       <Row class="operator padding-row">
         <Button @click="add" type="primary">添加</Button>
         <Button @click="delAll" class="ml_10">批量关闭</Button>
+        <Button @click="receivePage()" class="ml_10" type="info">优惠券领取记录</Button>
       </Row>
       <Table
         class="mt_10"
@@ -86,6 +87,13 @@
             @click="remove(row)"
             >关闭</Button
           >
+          <Button
+            style="margin: 5px"
+            type="info"
+            size="small"
+            @click="receivePage(row.id)"
+            >领取记录
+          </Button>
         </template>
       </Table>
       <Row type="flex" justify="end" class="mt_10">
@@ -136,11 +144,6 @@ export default {
           align: "center",
           fixed: "left",
         },
-        {
-          title: "活动名称",
-          key: "promotionName",
-          fixed: "left",
-        },
         {
           title: "优惠券名称",
           key: "couponName",
@@ -204,7 +207,7 @@ export default {
         },
         {
           title: "活动时间",
-
+          width: 150,
           render: (h, params) => {
             if (
               params?.row?.getType === "ACTIVITY" &&
@@ -246,6 +249,13 @@ export default {
     init() {
       this.getDataList();
     },
+    receivePage(id) {
+      if (id) {
+        this.$router.push({ name: "coupon-receive", query: { couponId: id } });
+      } else {
+        this.$router.push({ name: "coupon-receive" });
+      }
+    },
     add() {
       this.$router.push({ name: "add-coupon" });
     },