H5-点单：预付款、优惠券接口对接

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

@@ -35,13 +35,19 @@
       </li>
     </ul>
     <ul class="amount-detail">
-      <li>
+      <li @click="showAdvancePopup">
         <p class="label">订座预约款</p>
-        <p class="value">-¥200</p>
+        <!--1、接口未获取成功，2、获取成功：有、没有-->
+        <p class="value">
+          {{
+            fetchAdvanceListStatus ? !advanceList.length && '暂无可用预约款' : '-¥' + (curAdvance.order_price | fen2Yuan)
+          }}</p>
       </li>
-      <li>
+      <li @click="showCouponPopup">
         <p class="label">优惠券</p>
-        <p class="value">-¥500</p>
+        <p class="value">{{
+            fetchCouponListStatus ? !couponList.length && '暂无可用优惠券' : '-¥' + (curCoupon.coupon_price | fen2Yuan)
+          }}</p>
       </li>
       <li>
         <p class="label">小计</p>
@@ -62,36 +68,42 @@
       style="border-radius: 16px 16px 0 0;">
       <h1 class="title">选择优惠券</h1>
       <div class="af-popup-main">
-        <div v-for="i in 1" :key="i" class="coupon">
+        <div
+          v-for="(item, index) in couponList"
+          :key="index"
+          class="coupon">
           <div class="money">
-            <p>50</p>
+            <p>{{ item.coupon_price | fen2Yuam }}</p>
             <p>元</p>
           </div>
           <div class="des">
-            <p class="name">50元点单代金券</p>
-            <p class="expire">有效期：2021-04-27至2021-05-26</p>
+            <p class="name">{{ item.coupon_name }}</p>
+            <p class="expire">有效期：{{ item.coupon_start_time }}至{{ item.coupon_end_time }}</p>
           </div>
         </div>
       </div>
     </van-popup>
     <!--选择预约款-->
     <van-popup
-      v-model="downPaymentPopup"
+      v-model="advancePopup"
       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
+          v-for="(item, index) in advanceList"
+          :key="index"
+          class="down-payment">
           <div class="money">
             <p>预约款</p>
-            <p>￥1000</p>
-            <p>订单满1000可使用</p>
+            <p>￥{{ item.order_price | fen2Yuan }}</p>
+            <p>订单满{{ item.place_min_price | fen2Yuan }}可使用</p>
           </div>
           <div class="des">
-            <p>星桥店</p>
-            <p>12人卡座 (舞台中间)</p>
-            <p>04月27日 今日</p>
+            <p>{{ item.bar_name }}</p>
+            <p>{{ item.place_name }}</p>
+            <p>{{ item.order_pre_time }}</p>
           </div>
         </div>
       </div>
@@ -101,7 +113,9 @@
 
 <script>
 import payment from '../../common/payment'
-import { Button, Popup } from 'vant'
+import { Button, Popup, Toast } from 'vant'
+import { mapGetters } from 'vuex'
+import { apiAdvanceList, apiCouponList } from './api'
 
 export default {
   name: 'index',
@@ -113,11 +127,20 @@ export default {
   data () {
     return {
       order_pay_type: 2,
+      advancePopup: false, // 选择预约款弹窗
+      advanceList: [], // 预付款列表
+      curAdvance: {}, // 当前选择的预付款
+      fetchAdvanceListStatus: false, // 获取预付款列表状态
       couponPopup: false, // 优惠券选择弹窗
-      downPaymentPopup: false // 选择预约款弹窗
+      couponList: [], // 优惠券列表
+      curCoupon: {},
+      fetchCouponListStatus: false // 获取优惠券列表状态
     }
   },
   computed: {
+    ...mapGetters({
+      objCurrentBarInfo: 'common/objCurrentBarInfo'
+    }),
     selectFoods () {
       return this.$store.getters['shopcart/selectFoods']
     },
@@ -132,9 +155,64 @@ export default {
       return total
     }
   },
+  watch: {
+    'objCurrentBarInfo.id': {
+      immediate: true,
+      handler: function (newVal) {
+        if (newVal) {
+          this.fetchAdvanceList()
+          this.fetchCouponList()
+        }
+      }
+    }
+  },
   methods: {
     handlePayment (val) {
       this.order_pay_type = val
+    },
+    showAdvancePopup () {
+      if (!this.advanceList.length) {
+        return
+      }
+      this.advancePopup = true
+    },
+    showCouponPopup () {
+      if (!this.couponList.length) {
+        return
+      }
+      this.couponPopup = true
+    },
+    // 获取预付款
+    async fetchAdvanceList () {
+      const { id } = this.objCurrentBarInfo
+      if (!id) {
+        return
+      }
+      try {
+        const { data, status, msg } = await apiAdvanceList(id)
+        if (status) {
+          this.advanceList = data
+        } else {
+          Toast(msg)
+        }
+        this.fetchAdvanceListStatus = true
+      } catch (err) {}
+    },
+    // 获取优惠券
+    async fetchCouponList () {
+      const { id } = this.objCurrentBarInfo
+      if (!id) {
+        return
+      }
+      try {
+        const { data, status, msg } = await apiCouponList(id)
+        if (status) {
+          this.couponList = data
+        } else {
+          Toast(msg)
+        }
+        this.fetchCouponListStatus = true
+      } catch (err) {}
     }
   }
 }