新改动，UI调整等

src/components/coupon/component-list.vue

@@ -11,8 +11,8 @@
             </p>
             <p v-else class="time-end" :class="{'status': !item.disabled}">{{parseTime(item.startTime)}} 至 {{parseTime(item.expireTime)}}</p>
             <p v-show="!item.isAll" class="rules">
-              <span :class="{'status': !item.disabled}" @click="toggleRules(item)">使用规则</span>
-              <img v-if="item.showRules" src="../../images/coupon/arrow-down.png" alt="">
+              <span :class="{'status': !item.disabled}" @click.prevent.stop="toggleRules(item)">使用规则</span>
+              <img v-if="!item.showRules" src="../../images/coupon/arrow-down.png" alt="">
               <img v-else src="../../images/coupon/arrow-up.png" alt="">
             </p>
             <article v-show="!item.disabled" class="status-wrapper">
@@ -29,12 +29,12 @@
             </article>            
           </div>
         </div>
-        <div class="right" :class="{'around': !item.disabled}">
+        <div class="right" :class="{'around': !item.disabled}" @click="revieveOrUse(item)">
           <div class="top">
             <p class="coupon-pc"><span class="symbol">¥</span><span class="price" :class="{'opacity': !item.disabled}">{{yuan(item.discountAmount)}}</span></p>
             <p class="desc" :class="{'opacity': !item.disabled}">满{{yuan(item.requiredTotalFee)}}元可用</p>
           </div>
-          <span v-show="item.disabled && item.couponStatus != 4" class="btn coupon-pc" @click="revieveOrUse(item)">{{getBtnText(item)}}</span>
+          <span v-show="item.disabled && item.couponStatus != 4" class="btn coupon-pc">{{getBtnText(item)}}</span>
           <span v-show="item.disabled && item.couponStatus == 4" class="btn-no">未开始</span>
         </div>
       </section>
@@ -143,7 +143,7 @@ export default {
           .status-wrapper {
             position: absolute;
             top: 10px;
-            left: 140px;
+            left: 150px;
             img {
               width: 75px;
               height: 75px;
@@ -171,6 +171,7 @@ export default {
           .price {
             height: 30px;
             line-height: 30px;
+            font-weight: 700;
             font-size: 30px;
           }
           .desc {
@@ -180,14 +181,17 @@ export default {
         }
         .btn {
           display: flex;
-          width: 70px;
-          height: 25px;
+          width: 76px;
+          height: 28px;
+          line-height: 28px;
           justify-content: center;
           align-items: center;
-          line-height: 25px;
-          border: 1px solid #FB5B52;
+          // border: 1px solid #FB5B52;
           border-radius: 12px;
           font-size: 12px;
+          font-weight: 700;
+          color: #fff;
+          background: #FB5B52;
         }
         .btn-no {
           display: flex;

src/views/coupon/coupon-list.vue

@@ -10,7 +10,12 @@
       :isInMergeDetail="isInMergeDetail"
       borderStyle="1px solid #fff"
     ></CommonNavbar>
-    <CouponList v-if="dataList.length" :dataList="dataList" @revieveOrUse="revieveOrUse" :fromPage="fromPage"></CouponList>
+    <CouponList
+      v-if="dataList.length"
+      :dataList="dataList"
+      @revieveOrUse="revieveOrUse"
+      :fromPage="fromPage"
+    ></CouponList>
     <no-coupon v-else></no-coupon>
   </section>
 </template>
@@ -21,7 +26,7 @@ import NoCoupon from "@/components/coupon/no-coupon";
 import { getWebPageUrl, getHactiveUrl } from "@/utils";
 import { mapGetters, mapActions } from "vuex";
 import { Toast } from "vant";
-import { setCookie, getCookie, delCookie } from '@/utils/index';
+import { setCookie, getCookie, delCookie } from "@/utils/index";
 
 export default {
   components: {
@@ -41,7 +46,7 @@ export default {
       dataList: [],
       provinceId: "",
       fromPage: "",
-      isInMergeDetail: false,
+      isInMergeDetail: false
     };
   },
   computed: {
@@ -65,7 +70,7 @@ export default {
     let href = location.href;
     this.couponId = this.$route.query.couponId || "";
     this.fromPage = this.$route.query.fromPage || "";
-    this.couponToken = this.$route.query.couponToken || ""
+    this.couponToken = this.$route.query.couponToken || "";
 
     this.navTitle = this.fromPage ? "我的优惠券" : "优惠券";
     this.shareUrl = getWebPageUrl(
@@ -76,7 +81,7 @@ export default {
     }
     localStorage.setItem("returnUrl", this.shareUrl);
 
-    if(this.fromPage) {
+    if (this.fromPage) {
       this.$sendBuriedData({
         component_tag: `506#50601`
       });
@@ -98,12 +103,16 @@ export default {
     // 如果在浏览器或微信里
     if (this.isWeb) {
       const { token, info } = this.$store.state.user;
-      this.token = token || this.couponToken || localStorage.getItem("couponToken") || getCookie("couponToken");
+      this.token =
+        token ||
+        this.couponToken ||
+        localStorage.getItem("couponToken") ||
+        getCookie("couponToken");
       if (this.token && !info.id) {
-        console.log('4444 this.token', this.token);
+        console.log("4444 this.token", this.token);
         // this.$store.dispatch('setToken', this.token);
         this.commonCheckToken(() => {
-          this.$store.dispatch('setToken', this.token);
+          this.$store.dispatch("setToken", this.token);
           // this.$store.dispatch("getUserInfo");
         });
         return;
@@ -129,7 +138,8 @@ export default {
           if (res.code == "000000") {
             this.provinceId = res.data.provinceId;
             this.dataList = this.handlerAllCouponList(
-              res.data.baseCouponModelList || [], false
+              res.data.baseCouponModelList || [],
+              false
             );
           }
         });
@@ -156,14 +166,18 @@ export default {
     // couponStatus 优惠券状态：0去领取 1去使用 2已领取 3无库存 4未开始 5已过期 6已使用
     handlerAllCouponList(couponList, isAll) {
       if (!couponList.length) return [];
-      let newList = [], obj = {};
+      let newList = [],
+        obj = {};
       couponList.forEach(item => {
         // 是否是列表页面，否则是我的优惠券页面
         item.isAll = isAll;
         // 是否显示对应的规则
         item.showRules = false;
         // 是否可用
-        item.disabled = item.couponStatus == 0 || item.couponStatus == 1 || item.couponStatus == 4;
+        item.disabled =
+          item.couponStatus == 0 ||
+          item.couponStatus == 1 ||
+          item.couponStatus == 4;
         newList.push(item);
       });
       console.log(newList);
@@ -172,14 +186,16 @@ export default {
 
     // 获取所有优惠券列表
     getAllCoupons() {
-      console.log('getAllCoupons');
+      console.log("getAllCoupons");
       this.commonCheckToken(() => {
         let couponId = this.couponId;
         if (couponId) {
           this.POST(`trade/coupon/app/receive/${couponId}`, {}).then(
             ({ code, data }) => {
               if (code == "000000") {
-                data.description && Toast(data.description);
+                if (data.description) {
+                  this.$toast({ message: data.description, duration: 5000 });
+                }
               }
               this.searchCoupons();
             }
@@ -204,7 +220,7 @@ export default {
           console.log("share success...");
         }
       );
-      if(this.fromPage) {
+      if (this.fromPage) {
         this.getMyCoupons();
       } else {
         this.searchCouponsAction();
@@ -223,7 +239,8 @@ export default {
         if (res.code == "000000") {
           this.provinceId = res.data.provinceId;
           this.dataList = this.handlerAllCouponList(
-            res.data.baseCouponModelList || [], true
+            res.data.baseCouponModelList || [],
+            true
           );
         }
       });
@@ -234,7 +251,8 @@ export default {
       // 跳转到使用页面（如果只适用一个商品，则直接跳转到商品页面；否则跳转到商品列表页面）
       // 要根据用户信息，获取定位信息等，从而获取对应的商品
       // TODO
-      if(this.fromPage) {
+
+      if (this.fromPage) {
         this.$sendBuriedData({
           component_tag: `506#50602#${item.couponId}#${item.couponName}`
         });
@@ -243,14 +261,17 @@ export default {
       if (item.couponStatus == 1) {
         let pageUrl = "";
         // 如果适用的商品（卡）个数多于一个，则跳转到商品列表
-        if(item.couponMappingModelList.length > 1) {
-          pageUrl = getHactiveUrl(`/message_push/#/study-card?origin=1&couponArea=${this.provinceId}&couponToken=${this.token}`);
+        if (item.couponMappingModelList.length > 1) {
+          pageUrl = getHactiveUrl(
+            `/message_push/#/study-card?origin=1&couponArea=${this.provinceId}&couponToken=${this.token}`
+          );
           this.jumpForCoupon(pageUrl);
         } else {
-          item.couponMappingModelList.length && this.getCardInfoByProvinceId(item);
+          item.couponMappingModelList.length &&
+            this.getCardInfoByProvinceId(item);
         }
         // 立即领取
-      } else {
+      } else if (item.couponStatus == 0) {
         this.receiveCouponByid(item.couponId);
       }
     },
@@ -261,14 +282,17 @@ export default {
       let param = {
         area: this.provinceId + "",
         cardType: coupon.cardType || 3,
-        cardTypeList: [ coupon.cardType || 3],
-        goodsType: coupon.goodsType,
+        cardTypeList: [coupon.cardType || 3],
+        goodsType: coupon.goodsType
       };
       param.setEntry = true;
       this.POST("trade/goods/cardList_v2", param).then(res => {
         if (res.code == "000000") {
-          let good = (res.data && res.data[0]) || { id: '', name: "职称考精讲课程卡" };
-          if(good.id) {
+          let good = (res.data && res.data[0]) || {
+            id: "",
+            name: "职称考精讲课程卡"
+          };
+          if (good.id) {
             let pageUrl = getWebPageUrl(
               `profexam/#/goods-detail?goodsId=${good.id}`
             );
@@ -282,7 +306,7 @@ export default {
 
     // 根据环境跳转
     jumpForCoupon(pageUrl) {
-      if(this.isWeb) {
+      if (this.isWeb) {
         location.href = pageUrl;
       } else {
         let paramList = [
@@ -293,13 +317,13 @@ export default {
             seqNo: 1
           }
         ];
-        rocNative && rocNative.dispatchEventByModuleCode({
+        rocNative &&
+          rocNative.dispatchEventByModuleCode({
             modeCode: "M300",
             jsonString: paramList
           });
       }
     }
-
   }
 };
 </script>

src/views/goods-detail.vue

@@ -35,7 +35,7 @@
         <div class="bought">{{ goods.saledNum }}购买</div>
       </div>
     </div>
-    <!-- 购买数量、支付方式 -->
+    <!-- 购买数量、优惠券、支付方式 -->
     <div class="buy-box border-line">
       <div class="flex">
         <div class="name">购买数量</div>
@@ -48,7 +48,7 @@
 
       <div class="flex buy-way">
         <div class="name">优惠券</div>
-        <div @click="showCouponPopup" class="coupon-select coupon-pc">{{getCPText()}}</div>
+        <div @click="showCouponPopup" class="coupon-select coupon-pc" :class="{'no-coupon' : getCPText() == '无优惠券'}">{{getCPText()}}</div>
       </div>
 
       <div class="flex buy-way">
@@ -1123,5 +1123,8 @@ export default {
   &.no-pt {
     padding-top: 0px;
   }
+  .no-coupon {
+    color: #979899;
+  }
 }
 </style>