H5-优惠券选择

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

@@ -44,22 +44,41 @@
       <p class="price">￥2700</p>
       <van-button class="btn" type="warning">去结算</van-button>
     </div>
+    <!--选择优惠券-->
+    <van-popup v-model="couponPopup"
+               position="bottom"
+               style="border-radius: 16px 16px 0 0;">
+      <div class="af-popup-main">
+        <div class="coupon">
+          <div class="money">
+            <p>50</p>
+            <p>元</p>
+          </div>
+          <div class="des">
+            <p class="name">50元点单代金券</p>
+            <p class="expire">有效期：2021-04-27至2021-05-26</p>
+          </div>
+        </div>
+      </div>
+    </van-popup>
   </div>
 </template>
 
 <script>
 import payment from '../../common/payment'
-import { Button } from 'vant'
+import { Button, Popup } from 'vant'
 
 export default {
   name: 'index',
   components: {
     payment,
-    'van-button': Button
+    'van-button': Button,
+    'van-popup': Popup
   },
   data () {
     return {
-      order_pay_type: 2
+      order_pay_type: 2,
+      couponPopup: true // 优惠券选择弹窗
     }
   },
   methods: {
@@ -234,4 +253,47 @@ export default {
     line-height: 40px;
   }
 }
+
+.af-popup-main {
+  .coupon {
+    width: 365px;
+    height: 90px;
+    background: url("./image/bg_coupon@2x.png") center center/100% 100% no-repeat;
+  }
+
+  .money {
+    p {
+      &:nth-of-type(1) {
+        font-size: 36px;
+        font-family: PingFangSC-Medium, PingFang SC;
+        font-weight: 500;
+        color: #1F1E1E;
+        line-height: 50px;
+      }
+
+      &:nth-of-type(2) {
+        font-size: 10px;
+        color: #736F6F;
+        line-height: 14px;
+      }
+    }
+  }
+
+  .des {
+    .name {
+      font-size: 16px;
+      font-family: PingFangSC-Medium, PingFang SC;
+      font-weight: 500;
+      color: #1F1E1E;
+      line-height: 22px;
+      letter-spacing: 1px;
+    }
+
+    .expire {
+      font-size: 10px;
+      color: #736F6F;
+      line-height: 14px;
+    }
+  }
+}
 </style>