H5-商品支付页

htmldev/dashboard/src/views/sell/pay/index.vue

@@ -45,11 +45,14 @@
       <van-button class="btn" type="warning">去结算</van-button>
     </div>
     <!--选择优惠券-->
-    <van-popup v-model="couponPopup"
-               position="bottom"
-               style="border-radius: 16px 16px 0 0;">
+    <van-popup
+      v-model="couponPopup"
+      class="af-van-popup"
+      position="bottom"
+      style="border-radius: 16px 16px 0 0;">
+      <h1 class="title">选择优惠券</h1>
       <div class="af-popup-main">
-        <div class="coupon">
+        <div v-for="i in 1" :key="i" class="coupon">
           <div class="money">
             <p>50</p>
             <p>元</p>
@@ -61,6 +64,28 @@
         </div>
       </div>
     </van-popup>
+    <!--选择预约款-->
+    <van-popup
+      v-model="downPaymentPopup"
+      class="af-van-popup"
+      position="bottom"
+      style="border-radius: 16px 16px 0 0;">
+      <h1 class="title">选择预约款</h1>
+      <div class="af-popup-main">
+        <div v-for="i in 3" :key="i" class="down-payment">
+          <div class="money">
+            <p>预约款</p>
+            <p>￥1000</p>
+            <p>订单满1000可使用</p>
+          </div>
+          <div class="des">
+            <p>星桥店</p>
+            <p>12人卡座 (舞台中间)</p>
+            <p>04月27日 今日</p>
+          </div>
+        </div>
+      </div>
+    </van-popup>
   </div>
 </template>
 
@@ -78,7 +103,8 @@ export default {
   data () {
     return {
       order_pay_type: 2,
-      couponPopup: true // 优惠券选择弹窗
+      couponPopup: false, // 优惠券选择弹窗
+      downPaymentPopup: false // 选择预约款弹窗
     }
   },
   methods: {
@@ -254,14 +280,39 @@ export default {
   }
 }
 
-.af-popup-main {
-  .coupon {
-    width: 365px;
-    height: 90px;
-    background: url("./image/bg_coupon@2x.png") center center/100% 100% no-repeat;
+.af-van-popup {
+  .title {
+    padding: 20px 0 12px 20px;
+    font-size: 18px;
+    font-family: PingFangSC-Medium, PingFang SC;
+    font-weight: 500;
+    color: #1F1E1E;
+    line-height: 25px;
   }
+}
+
+.af-popup-main {
+  height: 335px;
+  overflow-y: scroll;
+  -webkit-overflow-scrolling: touch;
+  padding-bottom: 20px;
+}
+
+.coupon {
+  display: flex;
+  align-items: center;
+  width: 365px;
+  height: 90px;
+  margin: 0 auto;
+  background: url("./image/bg_coupon@2x.png") center center/100% 100% no-repeat;
 
   .money {
+    display: flex;
+    justify-content: flex-end;
+    align-items: flex-end;
+    width: 32%;
+    padding-right: 10px;
+
     p {
       &:nth-of-type(1) {
         font-size: 36px;
@@ -272,6 +323,8 @@ export default {
       }
 
       &:nth-of-type(2) {
+        padding-bottom: 10px;
+        margin-left: 6px;
         font-size: 10px;
         color: #736F6F;
         line-height: 14px;
@@ -280,6 +333,8 @@ export default {
   }
 
   .des {
+    padding-left: 20px;
+
     .name {
       font-size: 16px;
       font-family: PingFangSC-Medium, PingFang SC;
@@ -290,10 +345,83 @@ export default {
     }
 
     .expire {
+      margin-top: 8px;
       font-size: 10px;
       color: #736F6F;
       line-height: 14px;
     }
   }
 }
+
+.down-payment {
+  display: flex;
+  align-items: center;
+  width: 335px;
+  height: 110px;
+  margin: 10px auto 0;
+  background: url("./image/bg_money@2x.png") center center/100% 100% no-repeat;
+
+  &:nth-of-type(1) {
+    margin: 0 auto;
+  }
+
+  .money {
+    width: 40%;
+
+    p {
+      padding-left: 16px;
+
+      &:nth-of-type(1) {
+        font-size: 12px;
+        color: #1F1E1E;
+        line-height: 17px;
+      }
+
+      &:nth-of-type(2) {
+        font-size: 24px;
+        font-family: PingFangSC-Medium, PingFang SC;
+        font-weight: 500;
+        color: #D32323;
+        line-height: 33px;
+      }
+
+      &:nth-of-type(3) {
+        font-size: 12px;
+        color: #CCC6C6;
+        line-height: 17px;
+      }
+    }
+  }
+
+  .des {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-end;
+    padding-right: 16px;
+    width: 60%;
+
+    p {
+      &:nth-of-type(1) {
+        font-size: 16px;
+        font-family: PingFangSC-Medium, PingFang SC;
+        font-weight: 500;
+        color: #1F1E1E;
+        line-height: 22px;
+      }
+
+      &:nth-of-type(2) {
+        margin: 10px 0 4px;
+        font-size: 12px;
+        color: #736F6F;
+        line-height: 17px;
+      }
+
+      &:nth-of-type(3) {
+        font-size: 12px;
+        color: #D32323;
+        line-height: 17px;
+      }
+    }
+  }
+}
 </style>