接入数据

src/components/coupon/coupon-select-list.vue

 <template>
-  <van-popup
-    v-model="isShow"
-    @click-overlay="cancle"
-    position="bottom"
-    class="coupon-select"
-  >
+  <van-popup v-model="isShowCoupon" @click-overlay="cancle" position="bottom" class="coupon-select">
     <section class="coupon-select-wrapper">
       <article class="title">
         <span>优惠券</span>
         <img @click="cancle" src="../../images/cme/close.png" />
       </article>
       <article v-if="true" class="list-wrapper">
-        <p>已选择1张优惠券，共抵扣<span class="sc thin"> ¥{{couponPrice}}</span></p>
-        <div class="item" :class="{'disabled': disabled}" v-for="(item, index) in dataList" :key="index">
+        <p>
+          已选择1张优惠券，共抵扣
+          <span class="sc thin">¥{{couponPrice}}</span>
+        </p>
+        <div
+          class="item"
+          @click="toggleChecked(item)"
+          :class="{'disabled': disabled}"
+          v-for="(item, index) in dataList"
+          :key="index"
+        >
           <div class="left opacity">
-            <p class="price"><span class="symbol sc">¥</span><span class="num sc">100</span></p>
-            <p class="desc">满100元可用</p>
+            <p class="price">
+              <span class="symbol sc">¥</span>
+              <span class="num sc">{{item.discountAmount}}</span>
+            </p>
+            <p class="desc">满{{item.requiredTotalFee}}元可用</p>
           </div>
           <div class="center">
-            <p class="name status">商品名不超过二十字，字数不超过两行</p>
+            <p class="name status">{{item.couponName}}</p>
             <div>
-              <p v-if="true" class="date">距离到期仅剩<span class="sc"> 8 </span>天</p>
-              <p v-else class="date status">2020-10-15 至 2020-12-01</p>
+              <p v-if="item.validTimeType == 2" class="date">
+                距离到期仅剩
+                <span class="sc"> {{item.validLeftDays}} </span>天
+              </p>
+              <p v-else class="date status">{{item.startTime}} 至 {{item.expireTime}}</p>
               <p v-if="disabled" class="tips">
                 <img @click="cancle" src="../../images/coupon/tips.png" />
                 <span>当前商品不可用</span>
               </p>
             </div>
           </div>
-          <div class="right" @click="toggleChecked(item)">
+          <div class="right">
             <img v-show="item.isChecked" src="../../images/coupon/radio-checked.png" />
             <img v-show="!item.isChecked" src="../../images/coupon/radio-no.png" />
           </div>
@@ -49,7 +59,7 @@ export default {
     NoCoupon
   },
   props: {
-    isShow: {
+    isShowCoupon: {
       type: Boolean,
       default: true
     },
@@ -63,8 +73,8 @@ export default {
         return {
           price: 0,
           goodsType: 0,
-          cardType: 0,
-        }
+          cardType: 0
+        };
       }
     }
   },
@@ -74,18 +84,16 @@ export default {
       couponPrice: 100,
       disabled: false,
       isChecked: true,
-      currentCoupon: {couponId: '', canUseNum: 0, couponPrice: 0}
+      currentCoupon: { couponId: "", canUseNum: 0, couponPrice: 0 }
     };
   },
 
   //
   watch: {
-    isShow: {
-      // 处理是否可用
-      handler(newVal) {
-
-      }
-    }
+    // isShowCoupon: {
+    //   // 处理是否可用
+    //   handler(newVal) {}
+    // }
   },
 
   mounted() {
@@ -104,10 +112,10 @@ export default {
 
     // 切换当前选中优惠券
     toggleChecked(item) {
-      if(!item.isChecked) {
-        this.dataList.forEach( (cItem, index) => {
+      if (!item.isChecked) {
+        this.dataList.forEach((cItem, index) => {
           cItem.isChecked = false;
-        })
+        });
         item.isChecked = true;
       } else {
         item.isChecked = false;
@@ -129,7 +137,7 @@ export default {
   // padding: 10px 15px;
   display: flex;
   flex-direction: column;
-  background: #F8F9FA;
+  background: #f8f9fa;
   // padding: 0 0 80px;
   // box-shadow: 0px -2px 10px 0px rgba(0, 0, 0, 0.1);
   .title {
@@ -142,7 +150,7 @@ export default {
     justify-content: center;
     width: 100%;
     padding: 20px 0 10px;
-    background: #F8F9FA;
+    background: #f8f9fa;
     img {
       position: relative;
       top: 0;
@@ -155,7 +163,7 @@ export default {
     font-size: 13px;
     padding: 60px 15px 80px;
     color: #979899;
-    background: #F8F9FA;
+    background: #f8f9fa;
     .item {
       display: flex;
       flex-direction: row;
@@ -235,12 +243,12 @@ export default {
     width: 100%;
     display: flex;
     padding: 10px 15px;
-    background: #FFFFFF;
-    box-shadow: 0px -1px 0px 0px #F0F0F0;
+    background: #ffffff;
+    box-shadow: 0px -1px 0px 0px #f0f0f0;
   }
   .sc {
     font-weight: 700;
-    color: #FB5B52;
+    color: #fb5b52;
   }
   .thin {
     font-weight: 400;

src/views/goods-detail.vue

@@ -82,7 +82,7 @@
     <CouponSelectList
       :dataList="couponDataList"
       :goodsInfo="goodsInfo4Conpon"
-      :isShow="isShowCoupon"
+      :isShowCoupon="isShowCoupon"
       @cancle="closeCouponPopup"
       @confirm="showCouponPopup">
     </CouponSelectList>