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 v-if="item.couponType === 'DISCOUNT'" class="fontsize_12 global_color"><span class="price">{{item.couponDiscount}}</span>折</span>
-                <span class="describe">满{{item.consumeThreshold}}元可用</span>
+                <span
+                  v-if="item.couponType === 'PRICE'"
+                  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>有效期：{{item.endTime}}</p>
+              <p>使用范围：{{ useScope(item.scopeType, item.storeName) }}</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,135 +66,136 @@
   </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: { // 请求参数
-        getType: 'FREE',
+      params: {
+        // 请求参数
+        getType: "FREE",
         pageNumber: 1,
-        pageSize: 20
-      }
-    }
+        pageSize: 20,
+      },
+    };
   },
   methods: {
     // 搜索优惠券
-    search (item) {
-      this.params.couponName = item
-      this.params.pageNumber = 1
-      this.getList()
+    search(item) {
+      this.params.couponName = item;
+      this.params.pageNumber = 1;
+      this.getList();
     },
     // 获取优惠券列表
-    getList () {
-      this.$Spin.show()
-      couponList(this.params).then(res => {
-        this.$Spin.hide()
-        this.loading = false
-        if (res.success) {
-          this.list = res.result.records
-          this.total = res.result.total
-        }
-      }).catch(() => { this.$Spin.hide() })
+    getList() {
+      this.$Spin.show();
+      couponList(this.params)
+        .then((res) => {
+          this.$Spin.hide();
+          this.loading = false;
+          if (res.success) {
+            this.list = res.result.records;
+            this.total = res.result.total;
+          }
+        })
+        .catch(() => {
+          this.$Spin.hide();
+        });
     },
     // 分页 改变页码
-    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();
     },
     // 领取优惠券
-    receive (item) {
-      receiveCoupon(item.id).then(res => {
+    receive(item) {
+      receiveCoupon(item.id).then((res) => {
         if (res.success) {
+          console.log(item);
           this.$Modal.confirm({
-            title: '领取优惠券',
-            content: '<p>优惠券领取成功，可到我的优惠券页面查看</p>',
-            okText: '我的优惠券',
-            cancelText: '立即使用',
+            title: "领取优惠券",
+            content: "<p>优惠券领取成功，可到我的优惠券页面查看</p>",
+            okText: "我的优惠券",
+            cancelText: "立即使用",
             closable: true,
             onOk: () => {
-              this.$router.push('/home/Coupons')
+              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'})
-                }
-              }
-            }
+              this.$router.push({
+                path: "/goodsList",
+                query: { promotionsId: item.id, promotionType: "COUPON" },
+              });
+            },
           });
         }
-      })
+      });
     },
     // 优惠券可用范围
-    useScope (type, storeName) {
-      let shop = '平台';
-      let goods = '全部商品'
-      if (storeName !== 'platform') shop = storeName
+    useScope(type, storeName) {
+      let shop = "平台";
+      let goods = "全部商品";
+      if (storeName !== "platform") shop = storeName;
       switch (type) {
-        case 'ALL':
-          goods = '全部商品'
+        case "ALL":
+          goods = "全部商品";
           break;
-        case 'PORTION_GOODS':
-          goods = '部分商品'
+        case "PORTION_GOODS":
+          goods = "部分商品";
           break;
-        case 'PORTION_GOODS_CATEGORY':
-          goods = '部分分类商品'
+        case "PORTION_GOODS_CATEGORY":
+          goods = "部分分类商品";
           break;
       }
-      return `${shop}${goods}可用`
-    }
+      return `${shop}${goods}可用`;
+    },
   },
-  mounted () {
-    this.getList()
-  }
-}
+  mounted() {
+    this.getList();
+  },
+};
 </script>
 <style lang="scss" scoped>
-  @import '../assets/styles/coupon.scss';
-  .content{
-    width: 100%;
-    background-color: #fff;
+@import "../assets/styles/coupon.scss";
+.content {
+  width: 100%;
+  background-color: #fff;
 
-    > div {
-      margin: 10px auto;
-      width: 1200px;
-    }
+  > div {
+    margin: 10px auto;
+    width: 1200px;
   }
-  .coupon-title {
-    display: flex;
-    align-items: center;
+}
+.coupon-title {
+  display: flex;
+  align-items: center;
 
-    p{
-      font-size: 18px;
-      margin-right: 500px;
-    }
-    border-bottom: 2px solid $theme_color;
+  p {
+    font-size: 18px;
+    margin-right: 500px;
   }
-  .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;
-    }
-  }
-  .pageration {
-    text-align: right;
-    padding-bottom: 10px;
+  border-bottom: 2px solid $theme_color;
+}
+.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;
   }
+}
+.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"
-                  v-else-if="
-                    item.content.goodsType == 'PHYSICAL_GOODS'
-                  "
+                  class="goods-show-tag"
+                  color="blue"
+                  v-else-if="item.content.goodsType == 'PHYSICAL_GOODS'"
                 >
                   实物
                 </Tag>
@@ -155,13 +159,21 @@ export default {
   watch: {
     $route() {
       const keyword = this.$route.query.keyword;
-      this.handleSearch(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 v-if="item.couponType === 'DISCOUNT'" class="fontsize_12 global_color"><span class="price">{{item.discount}}</span>折</span>
-            <span class="describe">满{{item.consumeThreshold}}元可用</span>
+            <span
+              v-if="item.couponType === 'PRICE'"
+              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>有效期：{{item.endTime}}</p>
+          <p>使用范围：{{ useScope(item.scopeType, item.storeName) }}</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',
-  data () {
+  name: "Coupons",
+  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 () { // 获取优惠券列表
-      this.loading = true
-      memberCouponList(this.params).then(res => {
-        this.loading = false
+    getList() {
+      // 获取优惠券列表
+      this.loading = true;
+      memberCouponList(this.params).then((res) => {
+        this.loading = false;
         if (res.success) {
-          this.list = res.result.records
-          this.total = res.result.total
+          this.list = res.result.records;
+          this.total = res.result.total;
         }
-      })
+      });
     },
     // 切换优惠券状态
-    change (index) {
-      this.params.memberCouponStatus = this.statusList[index]
+    change(index) {
+      this.params.memberCouponStatus = this.statusList[index];
       this.params.pageNumber = 1;
-      this.getList()
+      this.getList();
     },
-    go (item) { // 根据使用条件跳转商品列表页面
-      if (this.params.memberCouponStatus !== 'NEW') return;
+    go(item) {
+      // 根据使用条件跳转商品列表页面
+      if (this.params.memberCouponStatus !== "NEW") return;
 
-      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'})
-        }
-      }
+      this.$router.push({
+        path: "/goodsList",
+        query: { promotionsId: item.couponId, promotionType: "COUPON" },
+      });
     },
 
-    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) { // 根据字段返回 优惠券适用范围
-      let shop = '平台';
-      let goods = '全部商品'
-      if (storeName !== 'platform') shop = storeName
+    useScope(type, storeName) {
+      // 根据字段返回 优惠券适用范围
+      let shop = "平台";
+      let goods = "全部商品";
+      if (storeName !== "platform") shop = storeName;
       switch (type) {
-        case 'ALL':
-          goods = '全部商品'
+        case "ALL":
+          goods = "全部商品";
           break;
-        case 'PORTION_GOODS':
-          goods = '部分商品'
+        case "PORTION_GOODS":
+          goods = "部分商品";
           break;
-        case 'PORTION_GOODS_CATEGORY':
-          goods = '部分分类商品'
+        case "PORTION_GOODS_CATEGORY":
+          goods = "部分分类商品";
           break;
       }
-      return `${shop}${goods}可用`
-    }
+      return `${shop}${goods}可用`;
+    },
   },
-  mounted () {
-    this.getList()
-  }
-}
+  mounted() {
+    this.getList();
+  },
+};
 </script>
 
 <style scoped lang="scss">
-@import '../../../assets/styles/coupon.scss';
-.coupon-item{
+@import "../../../assets/styles/coupon.scss";
+.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;
   }