H5-点单：支付优惠券选择

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

@@ -38,16 +38,19 @@
       <li @click="showAdvancePopup">
         <p class="label">订座预约款</p>
         <!--1、接口未获取成功，2、获取成功：有、没有-->
-        <p class="value">
-          {{
-            fetchAdvanceListStatus ? !advanceList.length && '暂无可用预约款' : '-¥' + (curAdvance.order_price | fen2Yuan)
-          }}</p>
+        <template v-if="fetchAdvanceListStatus">
+          <p v-if="advanceList.length" class="value">
+            {{ curAdvance.order_price >= 0 ? '-¥' : '' }}{{ curAdvance.order_price | fen2Yuan }}</p>
+          <p v-else class="value">暂无可用预约款</p>
+        </template>
       </li>
       <li @click="showCouponPopup">
         <p class="label">优惠券</p>
-        <p class="value">{{
-            fetchCouponListStatus ? !couponList.length && '暂无可用优惠券' : '-¥' + (curCoupon.coupon_price | fen2Yuan)
-          }}</p>
+        <template v-if="fetchCouponListStatus">
+          <p v-if="couponList.length" class="value">
+            {{ curCoupon.coupon_price >= 0 ? '-¥' : ''}}{{ curCoupon.coupon_price | fen2Yuan }}</p>
+          <p v-else class="value">暂无可用优惠券</p>
+        </template>
       </li>
       <li>
         <p class="label">小计</p>
@@ -75,15 +78,22 @@
         <div
           v-for="(item, index) in couponList"
           :key="index"
-          class="coupon">
+          class="coupon"
+          @click="selectCoupon(item)">
           <div class="money">
-            <p>{{ item.coupon_price | fen2Yuam }}</p>
+            <p>{{ item.coupon_price | fen2Yuan }}</p>
             <p>元</p>
           </div>
           <div class="des">
             <p class="name">{{ item.coupon_name }}</p>
             <p class="expire">有效期：{{ item.coupon_start_time }}至{{ item.coupon_end_time }}</p>
           </div>
+          <!--选中图标-->
+          <img
+            v-show="curCoupon.id === item.id"
+            alt=""
+            class="icon icon-coupon"
+            src="./image/ic_select@2x.png">
         </div>
       </div>
     </van-popup>
@@ -98,7 +108,8 @@
         <div
           v-for="(item, index) in advanceList"
           :key="index"
-          class="down-payment">
+          class="down-payment"
+          @click="selectAdvance(item)">
           <div class="money">
             <p>预约款</p>
             <p>￥{{ item.order_price | fen2Yuan }}</p>
@@ -109,6 +120,12 @@
             <p>{{ item.place_name }}</p>
             <p>{{ item.order_pre_time }}</p>
           </div>
+          <!--选中图标-->
+          <img
+            v-show="curAdvance.id === item.id"
+            alt=""
+            class="icon icon-advance"
+            src="./image/ic_select@2x.png">
         </div>
       </div>
     </van-popup>
@@ -163,11 +180,19 @@ export default {
       }
     },
     totalPrice () {
+      const couponPrice = this.curCoupon.coupon_price
+      const orderPrice = this.curAdvance.order_price
       let total = 0
+      if (Object.prototype.toString.call(couponPrice) === '[object Number]') {
+        total -= couponPrice
+      }
+      if (Object.prototype.toString.call(orderPrice) === '[object Number]') {
+        total -= orderPrice
+      }
       this.selectFoods.forEach((food) => {
         total += food.product_price * food.product_num
       })
-      return total
+      return total > 0 ? total : 0
     }
   },
   watch: {
@@ -197,6 +222,14 @@ export default {
       }
       this.couponPopup = true
     },
+    selectCoupon (item) {
+      this.curCoupon = item.id === this.curCoupon.id ? {} : { ...item }
+      this.couponPopup = false
+    },
+    selectAdvance (item) {
+      this.curAdvance = item.id === this.curAdvance.id ? {} : { ...item }
+      this.advancePopup = false
+    },
     // 获取预付款
     async fetchAdvanceList () {
       const { id } = this.objCurrentBarInfo
@@ -447,10 +480,30 @@ export default {
 }
 
 .af-popup-main {
+  position: relative;
+  left: 0;
+  top: 0;
   height: 335px;
   overflow-y: scroll;
   -webkit-overflow-scrolling: touch;
   padding-bottom: 20px;
+
+  .icon {
+    position: absolute;
+    z-index: 1;
+    width: 32px;
+    height: 30px;
+
+    &.icon-coupon {
+      right: 10px;
+      top: 2px;
+    }
+
+    &.icon-advance {
+      right: 20px;
+      top: 0;
+    }
+  }
 }
 
 .coupon {