是否显示对应的规则

src/components/coupon/component-list.vue

@@ -6,8 +6,8 @@
           <p class="name" :class="{'status': !item.showStatus}">{{item.couponName}}</p>
           <div class="other">
             <p v-if="item.validTimeType == 2" class="time-end" :class="{'status': !item.showStatus}">
-              <span v-if="item.couponStatus == 0">领取后<span class="coupon-pc"> {{item.validTimeSpan}} </span>天内有效</span>
-              <span v-else>距离到期仅剩<span class="coupon-pc"> {{item.validTimeSpan}} </span>天</span>
+              <span v-if="item.couponStatus == 1">距离到期仅剩<span class="coupon-pc"> {{item.validTimeSpan}} </span>天</span>
+              <span v-else>领取后{{item.validTimeSpan}}天内有效</span>
             </p>
             <p v-else class="time-end" :class="{'status': !item.showStatus}">{{parseTime(item.startTime)}} 至 {{parseTime(item.expireTime)}}</p>
             <p v-show="!item.isAll" class="rules">
@@ -17,10 +17,10 @@
             </p>
             <article v-show="!item.showStatus" class="status-wrapper">
               <img v-if="item.isAll && item.couponStatus == 3" src="../../images/coupon/status-lw.png" alt="">
-              <img v-if="item.isAll && item.couponStatus in [4, 5, 6]" src="../../images/coupon/status-sx.png" alt="">
+              <img v-if="item.isAll && (item.couponStatus == 4 || item.couponStatus == 5 || item.couponStatus == 6)" src="../../images/coupon/status-sx.png" alt="">
 
               <img v-if="!item.isAll && item.couponStatus == 6" src="../../images/coupon/status-sy.png" alt="">
-              <img v-if="!item.isAll && item.couponStatus in [3, 4, 5]" src="../../images/coupon/status-gq.png" alt="">
+              <img v-if="!item.isAll && (item.couponStatus == 3 || item.couponStatus == 4 || item.couponStatus == 5)" src="../../images/coupon/status-gq.png" alt="">
 
               <!-- <img v-else-if="item.couponStatus == 4" src="../../images/coupon/status-gq.png" alt="">
               <img v-else-if="item.couponStatus == 5" src="../../images/coupon/status-gq.png" alt="">
@@ -112,6 +112,9 @@ export default {
       // height: 115px;
       justify-content: space-between;
       .left {
+        position: relative;
+        top: 0;
+        left: 0;
         display: flex;
         flex-direction: column;
         justify-content: space-between;
@@ -122,9 +125,6 @@ export default {
           color: #373839;
         }
         .other {
-          position: relative;
-          top: 0;
-          left: 0;
           font-size: 12px;
           color: #676869;
           p {
@@ -141,7 +141,7 @@ export default {
           }
           .status-wrapper {
             position: absolute;
-            top: -60px;
+            top: 10px;
             left: 140px;
             img {
               width: 75px;

src/views/coupon/coupon-list.vue

@@ -119,7 +119,7 @@ export default {
           if (res.code == "000000") {
             this.provinceId = res.data.provinceId;
             this.dataList = this.handlerAllCouponList(
-              res.data.baseCouponModelList || []
+              res.data.baseCouponModelList || [], false
             );            
           }
         });
@@ -143,12 +143,12 @@ export default {
 
     // 处理(所有)列表数据
     // couponStatus 优惠券状态：0去领取 1去使用 2已领取 3无库存 4未开始 5已过期 6已使用
-    handlerAllCouponList(couponList) {
+    handlerAllCouponList(couponList, isAll) {
       if (!couponList.length) return [];
       let newList = [], obj = {};
       couponList.forEach(item => {
         // 是否是列表页面，否则是我的优惠券页面
-        item.isAll = true;
+        item.isAll = isAll;
         // 是否显示对应的规则
         item.showRules = false;
         // 是否可用
@@ -198,7 +198,7 @@ export default {
       this.POST(`trade/coupon/app/searchCoupons`, params).then(res => {
         if (res.code == "000000") {
           this.dataList = this.handlerAllCouponList(
-            res.data.baseCouponModelList || []
+            res.data.baseCouponModelList || [], true
           );
         }
       });