Merge pull request #69 from John-Hong/John/release-2.8.0/KIP-9732

John/release 2.8.0/kip 9732

src/api/mockData/checkout.qh7.response.json

@@ -0,0 +1,174 @@
+{
+  "parkingRecord": {
+    "vehicleNo": "粤Q55568",
+    "enterTime": "2023-04-17 18:13:33",
+    "serviceMin": 5685,
+    "totalFee": 8000,
+    "actualPayFee": 60,
+    "thirdPartyId": "87ff75ca00e1480f82143bebd15c9c20",
+    "thirdParkOrderNo": "CZHc3X9nxMHqMdFBBE1wXQ",
+    "createdByQrCode": false,
+    "totalFeeInYuan": 80
+  },
+  "discountInfo": {
+    "usingTotalDiscount": 20,
+    "memberLevelDiscount": false,
+    "points": [
+      {
+        "available": 95330,
+        "maxDiscountFee": 20,
+        "pointsPerUnit": 50,
+        "unitAmount": 5,
+        "newMember": false,
+        "label": "已选择兑换20元",
+        "discountFee": 20
+      }
+    ],
+    "coupons": [
+      {
+        "code": "w2gcs5kll15_t",
+        "name": "停车电子券(可叠加2)",
+        "expirationDate": "2023-04-30 23:59:59",
+        "discountFee": 5,
+        "defaultSelected": true,
+        "superposition": "2",
+        "limitCountPerOrder": 2
+      },
+      {
+        "code": "l03mko16krp_t",
+        "name": "周末一小时券",
+        "expirationDate": "2023-05-31 23:59:59",
+        "discountFee": 5,
+        "defaultSelected": true,
+        "superposition": "2",
+        "limitCountPerOrder": 0
+      },
+      {
+        "code": "l03mko16krp_t",
+        "name": "周末一小时券",
+        "expirationDate": "2023-05-31 23:59:59",
+        "discountFee": 5,
+        "defaultSelected": true,
+        "superposition": "2",
+        "limitCountPerOrder": 0
+      },
+      {
+        "code": "l03mko16krp_t",
+        "name": "周末一小时券",
+        "expirationDate": "2023-05-31 23:59:59",
+        "discountFee": 5,
+        "defaultSelected": true,
+        "superposition": "2",
+        "limitCountPerOrder": 0
+      },
+      {
+        "code": "l03mko16krp_t",
+        "name": "周末一小时券",
+        "expirationDate": "2023-05-31 23:59:59",
+        "discountFee": 5,
+        "defaultSelected": true,
+        "superposition": "2",
+        "limitCountPerOrder": 0
+      },
+      {
+        "code": "l03mko16krp_t",
+        "name": "周末一小时券",
+        "expirationDate": "2023-05-31 23:59:59",
+        "discountFee": 5,
+        "defaultSelected": true,
+        "superposition": "2",
+        "limitCountPerOrder": 0
+      },
+      {
+        "code": "l03mko16krp_t",
+        "name": "周末一小时券",
+        "expirationDate": "2023-05-31 23:59:59",
+        "discountFee": 5,
+        "defaultSelected": true,
+        "superposition": "2",
+        "limitCountPerOrder": 0
+      },
+      {
+        "code": "l03mko16krp_t",
+        "name": "周末一小时券",
+        "expirationDate": "2023-05-31 23:59:59",
+        "discountFee": 5,
+        "defaultSelected": true,
+        "superposition": "2",
+        "limitCountPerOrder": 0
+      },
+      {
+        "code": "l03mko16krp_t",
+        "name": "周末一小时券",
+        "expirationDate": "2023-05-31 23:59:59",
+        "discountFee": 5,
+        "defaultSelected": true,
+        "superposition": "2",
+        "limitCountPerOrder": 0
+      },
+      {
+        "code": "l03mko16krp_t",
+        "name": "周末一小时券",
+        "expirationDate": "2023-05-31 23:59:59",
+        "discountFee": 5,
+        "defaultSelected": true,
+        "superposition": "2",
+        "limitCountPerOrder": 0
+      },
+      {
+        "code": "l03mko16krp_t",
+        "name": "周末一小时券",
+        "expirationDate": "2023-05-31 23:59:59",
+        "discountFee": 5,
+        "defaultSelected": true,
+        "superposition": "2",
+        "limitCountPerOrder": 0
+      },
+      {
+        "code": "l03mko16krp_t",
+        "name": "周末一小时券",
+        "expirationDate": "2023-05-31 23:59:59",
+        "discountFee": 5,
+        "defaultSelected": true,
+        "superposition": "2",
+        "limitCountPerOrder": 0
+      },
+      {
+        "code": "l03mko16krp_t",
+        "name": "周末一小时券",
+        "expirationDate": "2023-05-31 23:59:59",
+        "discountFee": 5,
+        "defaultSelected": true,
+        "superposition": "2",
+        "limitCountPerOrder": 0
+      },
+      {
+        "code": "l03mko16krp_t2",
+        "name": "周末一小时券",
+        "expirationDate": "2023-05-31 23:59:59",
+        "discountFee": 5,
+        "defaultSelected": false,
+        "superposition": "1",
+        "limitCountPerOrder": 0
+      }
+    ]
+  },
+  "parkingRule": {
+    "maxOneDayDiscountFee": 60,
+    "enableNewMemberPoints": false,
+    "enablePoints": true,
+    "enableCoupon": true,
+    "enablePaperCoupons": false,
+    "maxPointsTime": 1922,
+    "enableConsume": false,
+    "enableConsumeSplit": false,
+    "availableDiscountFee": 60,
+    "hourPrice": 5
+  },
+  "parkInfo": {
+    "parkName": "深圳前海湾停车场",
+    "description": "计费基础规则：\n15分钟内免费，首小时15元，其后每小时5元，全天封顶60元。\n嘉湾汇会员停车礼遇：\n银卡：每月可免费领取2张首2小时停车券\n金卡：每月可免费领取5张首2小时停车券\n铂金卡：每月可免费领取10张首2小时停车券\n*数量有限，领完即止\n仅限开具一个月内的停车费电子发票 ",
+    "parkMallCode": 5,
+    "buildingId": "QHKC-P1"
+  }
+}

src/api/request.js

@@ -102,7 +102,14 @@ function XUser(config) {
   if (/orders-and-prepay|calculate-discount|unlicensed-car-check-in|unlicensed-car-checkout/g.test(config.url)) {
     params.buildingId = window.localStorage.getItem('buildingId');
   }
-  return JSON.stringify(params);
+  const newParams = {}
+  Object.keys(params).forEach(key => {
+    const value = params[key]
+    if ( value ) {
+      newParams[key] = value
+    }
+  })
+  return JSON.stringify(newParams);
 }
 function getSign(config) {
   let params = {}

src/kui/components/k-tab/k-tab.vue

@@ -165,8 +165,8 @@ export default {
   &:before{
     position: absolute;
     content: "";
-    left: 0;
-    right: 0;
+    left: 1px;
+    right: 1px;
     bottom: 0;
     top: 0;
     -webkit-box-shadow:0px 0px 0px 0.75px var(--k-color-primary-01, #064c8a);

src/pages/parkingFee/components/officeBlue/parkingFeeCoupon.vue

@@ -1,6 +1,6 @@
 <template>
   <div scroll-y="true" :class="['scroll-Y' , theme]">
-    <div >
+    <div>
       <div class="parkingFeeCoupon">
         <van-checkbox-group :value="checkedCouponList">
           <div class="card-list" v-if="couponList.length">
@@ -24,13 +24,13 @@
                   <span class="span">有效期至 {{ item.expirationDate }}</span>
                 </div>
                 <div class="erwm_box">
-                  <van-checkbox color="#fff" @click="checkboxItemChange(`coupon${index}`, index)" checked-color="var(--k-color-primary)" :disabled="item.disabled" :name="`coupon${index}`" />
+                  <van-checkbox color="#fff" @click="checkboxItemChange(`coupon${index}`, index)" checked-color="var(--k-color-primary)" :disabled="item.disabled" :name="`coupon${index}`"/>
                 </div>
               </div>
             </div>
           </div>
           <div class="no-coupon" v-else>
-            <img :src="require('../../static/images/no-card.png')" />
+            <img :src="require('../../static/images/no-card.png')"/>
             <span class="message">您还没有卡券</span>
           </div>
         </van-checkbox-group>
@@ -48,7 +48,7 @@
           <div class="guide-desc">
             停车优惠券可直接使用，若您还没有兑换或继续兑换，可前往
             <span class="guide-mini">嘉里中心小程序>积分商城</span>
-            <wx-open-launch-weapp username="gh_0bd6a97b6d38" id="launch-btn" :path="`pages/pointsMall/pointsMall.html${launchPath}`" class="wx-open-launch-weapp" :env-version="envVersion" @launch="launchFn" @error="launchErrorFn">
+            <wx-open-launch-weapp username="gh_0bd6a97b6d38" id="launch-btn" :path="`pages/pointsMall/pointsMall.html${launchPath}`" class="wx-open-launch-weapp" :env-version="envVersion" :extra-data="{...extraData, navigate_time:new Date().getTime()}" @launch="launchFn" @error="launchErrorFn">
               <script type="text/wxtag-template">
                 <span style="white-space: nowrap;display: inline-block;color: transparent;text-decoration: underline;margin: 0 5px;font-size: 14PX;"></span>
               </script>

src/pages/parkingFee/components/officeBlue/parkingFeeList.vue

@@ -21,7 +21,7 @@
       >
         <div class="carno-box">
           <div class="carno">{{ item.vehicleNo }}</div>
-          <div class="servicefee">{{ (item.actualPayFee / 100) | currency }}</div>
+          <div class="servicefee">{{ item.actualPayFee | currency }}</div>
         </div>
         <div class="choice_card_index">{{ item.parkName }} </div>
         <div class="choice_card_index orderno-box">

src/pages/parkingFee/components/purple/parkingFeeDetail.vue

@@ -1,183 +1,112 @@
 <template>
   <div v-if="orderDetail && orderDetail.parkingRecord && orderDetail.parkingRecord.vehicleNo">
     <div class="scroll-Y">
-      <div >
-        <!-- <div @click="scan">扫一扫</div> -->
-        <div class="warp">
-          <div
-            :class="{
-              warp_index: true,
-              warp_index1: true,
-            }"
-          >
-            {{ orderDetail.parkingRecord.vehicleNo | formatCarno }}
-            <!-- {{ $route.query.carno | formatCarno }} -->
-          </div>
-          <div class="warp_index">
-            <div>停车场</div>
-            <div class="warp_index_color">{{ orderDetail.parkInfo.parkName }}</div>
-          </div>
-          <div class="warp_index">
-            <div>入场时间</div>
-            <div class="warp_index_color">{{ orderDetail.parkingRecord.enterTime }}</div>
-          </div>
-          <div class="warp_index">
-            <div>已停车时长</div>
-            <div class="warp_index_color">{{ orderDetail.parkingRecord.serviceMin }}</div>
-          </div>
-          <div class="warp_index">
-            <div>应缴</div>
-            <div class="warp_index_color">
-              {{ (orderDetail.parkingRecord.totalFeeInYuan) | currency }}
-            </div>
-          </div>
+      <div
+        class="vehicleNo"
+      >
+        {{ orderDetail.parkingRecord.vehicleNo | formatCarno }}
+        <!-- {{ $route.query.carno | formatCarno }} -->
+      </div>
+      <div class="info-box mb--20">
+        <div class="info-item-box">
+          <div class="label">停车场</div>
+          <div class="value">{{ orderDetail.parkInfo.parkName }}</div>
         </div>
-        <div class="warp">
-          <div
-            class="warp_index warp_index_da"
-            v-if="enableConsume"
-          >
-            <div>停车优惠</div>
-            <div class="warp_index_color" @click="discounts">
-              <div
-                style="margin-right: 10px"
-                :class="discountDesc === '暂无可用优惠' ?  '' : 'text-red'"
-              >
-                {{ discountDesc }}
-              </div>
-              <van-icon name="arrow" />
-              <!-- <img style="width: 26px; height: 26px" src="static/images/arrows.png" /> -->
-            </div>
-          </div>
-          <div
-            class="warp_index warp_index_da"
-            v-if="orderDetail && orderDetail.discountInfo"
-          >
-            <div>积分减免</div>
-            <div class="warp_index_color" @click="showPointsMathPopup('bottom')">
-              <div
-                style="margin-right: 10px"
-                :class="
-                  integralDesc === '今日已达上限' ? 'text-disable' : 'text-red'
-                "
-              >
-                {{ integralDesc }}
-              </div>
-              <van-icon name="arrow" />
-              <!-- <img style="width: 26px; height: 26px" src="static/images/arrows.png" /> -->
-            </div>
-          </div>
-          <div
-            class="warp_index warp_index_da"
-            v-if="orderDetail && orderDetail.discountInfo"
-          >
-            <div>优惠劵</div>
-            <div class="warp_index_color" @click="coupon">
-              <div
-                style="margin-right: 10px"
-                :class="coupons.length > 0 ? 'text-red' : 'text-disable'"
-              >
-                {{ couponDesc }}
-              </div>
-              <van-icon name="arrow" />
-              <!-- <img style="width: 26px; height: 26px" src="static/images/arrows.png" /> -->
-            </div>
+        <div class="info-item-box">
+          <div class="label">入场时间</div>
+          <div class="value">{{ orderDetail.parkingRecord.enterTime }}</div>
+        </div>
+        <div class="info-item-box">
+          <div class="label">已停车时长</div>
+          <div class="value">{{ orderDetail.parkingRecord.serviceMin }}</div>
+        </div>
+        <div class="van-hairline--bottom hr"></div>
+        <div class="info-item-box">
+          <div class="label pb--27">应缴</div>
+          <div class="value bold-fz">
+            {{ ( orderDetail.parkingRecord.totalFeeInYuan ) | currency }}
           </div>
-          <!-- 纸质券 -->
-          <div
-            class="warp_index warp_index_da"
-            v-if="enablePaperCoupons"
-          >
-            <div>纸质优惠劵</div>
-            <div class="warp_index_color" @click="paperCoupon">
-              <div style="margin-right: 10px" class="text-red">
-                扫描纸质优惠劵二维码
-              </div>
-              <!-- <img style="width: 26px; height: 26px" src="static/images/arrows.png" /> -->
-            </div>
+        </div>
+      </div>
+      <div class="info-box mb--30">
+        <div class="info-item-box" v-if="enableConsume">
+          <div class="label">停车优惠</div>
+          <div @click="discounts" :class="['value',discountDesc === '暂无可用优惠' ?  '' : 'text-red']">{{ discountDesc }}
+            <van-icon name="arrow"/>
           </div>
-          <div
-            :class="{
-              warp_index: true,
-              color_warp_index: custTypeId !== 0,
-              warp_index_da: true,
-            }"
-          >
-            <div>优惠金额:</div>
-            <div class="warp_index_color" style="color: #333">
-              -{{ usingTotalDiscount | currency }}
-            </div>
+        </div>
+        <div class="info-item-box" v-if="orderDetail && orderDetail.discountInfo">
+          <div class="label">积分减免</div>
+          <div :class="['value', integralDesc === '今日已达上限' ? 'text-disable' : 'text-red']" @click="showPointsMathPopup('bottom')">{{ integralDesc }}
+            <van-icon name="arrow"/>
           </div>
-          <div
-            :class="{ warp_index: true, color_warp_index: custTypeId !== 0 }"
-          >
-            <div>应付金额:</div>
-            <div class="warp_index_color" style="color: #333">
-              {{ actualPayFee | currency }}
-            </div>
+        </div>
+        <div class="info-item-box" v-if="orderDetail && orderDetail.discountInfo">
+          <div class="label">优惠劵</div>
+          <div :class="['value', coupons.length > 0 ? 'text-red' : 'text-disable']" @click="coupon">{{ couponDesc }}
+            <van-icon name="arrow"/>
           </div>
         </div>
-        <div
-          class="top_content"
-          v-if="orderDetail.parkInfo && orderDetail.parkInfo.description"
-        >
-          <div class="title_box">
-            <span class="title">缴费说明</span>
+        <div class="info-item-box" v-if="enablePaperCoupons">
+          <div class="label">纸质优惠劵</div>
+          <div :class="['value', 'text-red']">扫描纸质优惠劵二维码
+            <van-icon name="arrow"/>
           </div>
-          <div class="info" :class="!isShowDescription ? 'info_show' : ''">
-<!--            <span>{{ orderDetail.parkInfo.description }}</span>-->
-            <div v-html="setDescription()"></div>
+        </div>
+        <div class="info-item-box">
+          <div class="label">优惠金额:</div>
+          <div :class="['value']">-{{ usingTotalDiscount | currency }}</div>
+        </div>
+        <div class="van-hairline--bottom hr"></div>
+        <div class="info-item-box">
+          <div class="label pb--27">应付金额</div>
+          <div class="value bold-fz">
+            {{ actualPayFee | currency }}
           </div>
+        </div>
+      </div>
 
-          <div
-            class="top_down"
-            @click="togglePayinstruction"
-            v-if="!isShowDescription && orderDetail.parkInfo.description.length > 60"
-          >
-            <van-icon name="arrow-down" />
-          </div>
-          <div
-            class="top_down"
-            @click="togglePayinstruction"
-            v-if="isShowDescription && orderDetail.parkInfo.description.length > 60"
-          >
-            <van-icon name="arrow-up" />
-          </div>
+      <div class="description-box">
+        <div class="title_box">
+          <span class="title">缴费说明</span>
         </div>
+        <div class="info" v-html="setDescription()"></div>
       </div>
     </div>
     <div class="flewx">
-      <div class="flewx-content">
-        合计<span style="color: #333; font-size: 36px; padding-left: 20px">{{
-          actualPayFee | currency
-        }}</span>
-        元
-        <span style="color: #dc5948; padding-left: 30px; font-size: 28px"
-        >已优惠{{ usingTotalDiscount | currency }}元</span
-        >
-        <!-- <van-count-down :time="3 * 60 * 1000" /> -->
-        <div class="count-down-box">
-          <van-count-down
-            v-if="orderDetail.parkingRecord.vehicleNo"
-            format="mm:ss"
-            :time="refreshTime * 1000"
-            @finish="resetCountDown()"
-          >
-            <!--  -->
-          </van-count-down>
-          <span class="desc">后同步最新费用</span>
+      <div class="control-box">
+        <div class="flewx-content">
+          <div class="fee-box">
+            <div>合计：</div>
+            <div class="actualPayFee">{{
+                actualPayFee | currency
+              }}
+            </div>
+            <div :class="['van-hairline--surround','usingTotalDiscount', usingTotalDiscount > 0 && 'usingTotalDiscount-red']"
+            >已优惠{{ usingTotalDiscount | currency }}元
+            </div
+            >
+            <!-- <van-count-down :time="3 * 60 * 1000" /> -->
+          </div>
+          <div class="count-down-box">
+            <van-count-down
+              v-if="orderDetail.parkingRecord.vehicleNo"
+              format="mm:ss"
+              :time="refreshTime * 1000"
+              @finish="resetCountDown()"
+            >
+              <!--  -->
+            </van-count-down>
+            <span class="desc">后同步最新费用</span>
+          </div>
         </div>
+        <div class="btn-box">
+          <k-button style="width: 240px;" borderColor="var(--k-color-primary-01, #064c8a)" title="支付" disabledColor="#D1D2D9" @click="toPay"/>  
+        </div>
+          
       </div>
-      <div
-        :class="[
-          'flewx_index3',
-          payBtnDisabled && 'btn-disabled',
-          btnLoading && 'btn-disabled',
-        ]"
-        @click="toPay"
-      >
-        支付
-      </div>
+      <!-- 开启底部安全区适配 -->
+      <van-number-keyboard safe-area-inset-bottom />
     </div>
     <van-popup
       v-model="popup"
@@ -199,7 +128,7 @@
         <div class="popue_box_index">
           <div>抵扣{{ orderDetail.parkInfo.parkMallCode === 5 ? '金额' : '时长' }}</div>
           <div class="popue_box_index" style="width: 325px">
-            <div class="popue_box_index4_xs">
+            <div class="popue_box_index4_xs van-hairline--surround">
               <div class="popue_box_index4_xs_index1" @click="$store.dispatch('order/pointsMath',{type: 'minus', callback: pointsMathCallback})">
                 -
               </div>
@@ -231,6 +160,7 @@
             确定
           </div>
         </div>
+        <van-number-keyboard safe-area-inset-bottom/>
       </div>
     </van-popup>
   </div>
@@ -238,20 +168,354 @@
 
 <script>
 import parkingFeeDetailJs from '../../mixins/parkingFeeDetail'
+
 export default {
-  mixins:[parkingFeeDetailJs]
+  mixins: [parkingFeeDetailJs]
 }
 </script>
 
 <style lang="less" scoped>
 .scroll-Y {
   width: 100%;
-  display: flex;
-  flex-direction: column;
+  //display: flex;
+  //flex-direction: column;
   height: 100vh;
-  background: #f4f7ff;
+  overflow-y: scroll;
+  background: #F5F7FE;
   padding-bottom: 300px;
   //padding-bottom: 20px;
+  padding-top: 24px;
+}
+
+/*车牌号*/
+.vehicleNo {
+  width: 666px;
+  height: 109.5px;
+  line-height: 109.5px;
+  margin-left: 24px;
+
+  background-color: #FAFBFF;
+  border-radius: 4px;
+  margin-bottom: 20px;
+
+  font-style: normal;
+  font-weight: 600;
+  font-size: 36px;
+  padding-left: 36px;
+  color: #333333;
+}
+
+.pb--27 {
+  padding-bottom: 27px;
+}
+
+.mb--20 {
+  margin-bottom: 20px;
+}
+
+.mb--30 {
+  margin-bottom: 30px;
+}
+
+.info-box {
+  background: #FAFBFF;
+  padding-top: 48.5px;
+
+  width: 702px;
+  margin-left: 24px;
+
+  .info-item-box {
+    display: flex;
+    justify-content: space-between;
+
+    .label {
+      padding-left: 36px;
+      padding-bottom: 39px;
+      text-align: left;
+
+      font-family: 'PingFang SC';
+      font-style: normal;
+      font-weight: 400;
+      font-size: 30px;
+      color: #999999;
+
+    }
+
+    .value {
+      text-align: right;
+      padding-right: 36px;
+      font-family: 'PingFang SC';
+      font-style: normal;
+      font-weight: 400;
+      font-size: 30px;
+      color: #333333;
+
+      &.bold-fz {
+        font-family: 'PingFang SC';
+        font-style: normal;
+        font-weight: 500;
+        font-size: 34px;
+        color: #333333;
+      }
+    }
+  }
+
+  .hr {
+    margin-bottom: 23px;
+  }
+
+}
+
+.description-box {
+  padding-left: 30px;
+
+  .title_box {
+    .title {
+      font-family: 'PingFang SC';
+      font-style: normal;
+      font-weight: 500;
+      font-size: 30px;
+      color: #333333;
+    }
+  }
+
+  .info {
+    font-family: 'PingFang SC';
+    font-style: normal;
+    font-weight: 400;
+    font-size: 26px;
+    line-height: 40px;
+    /* or 154% */
+    color: #999999;
+  }
+}
+
+/*积分*/
+.popue_box {
+  height: 695px;
+  background-color: #fff;
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  right: 0;
+
+  .popue_box_index {
+    width: 92%;
+    margin-left: 4%;
+    height: 117px;
+    border-bottom: 1px solid #f5f5f5;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    font-family: 'PingFang SC';
+    font-style: normal;
+    font-weight: 400;
+    font-size: 34px;
+    text-align: right;
+    color: #333333;
+  }
+
+  .popue_box_index1 {
+    width: 92%;
+    font-size: 34px;
+    margin-left: 4%;
+    font-weight: 700;
+    height: 117px;
+    line-height: 117px;
+    border-bottom: 1px solid #f5f5f5;
+    text-align: center;
+  }
+
+  .popue_box_index4_xs {
+    width: 260px;
+    height: 72px;
+    border: 2px solid #D8DAE0;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    border-radius: 10px;
+
+    .popue_box_index4_xs_index1 {
+      width: 72px;
+      height: 72px;
+      background-color: #FAFBFF;
+      text-align: center;
+      line-height: 72px;
+      border-right: 1px solid #e5e6ec;
+    }
+
+    .popue_box_index4_xs_index2 {
+      width: 116px;
+      height: 72px;
+      line-height: 72px;
+      text-align: center;
+      background-color: #FFFFFF;
+    }
+
+    .popue_box_index4_xs_index3 {
+      width: 72px;
+      height: 72px;
+      background-color: #f5f8fb;
+      text-align: center;
+      line-height: 72px;
+      border-left: 1px solid #e5e6ec;
+    }
+  }
+
+  .popue_box_index5 {
+    font-size: 30px;
+    width: 92%;
+    margin-left: 4%;
+    font-weight: 700;
+    height: 214px;
+    line-height: 90px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+  }
+
+  .popue_box_index4_by {
+    width: 320px;
+    height: 90px;
+    line-height: 90px;
+    color: #fff;
+    border-radius: 60px;
+    text-align: center;
+    color: #064c8a;
+    font-weight: 700;
+    border: 1px solid #064c8a;
+  }
+
+  .blue_popue_box_index4_by {
+    .color_popue_box_index4_by('blue');
+  }
+
+  .green_popue_box_index4_by {
+    .color_popue_box_index4_by('green');
+  }
+
+  .color_popue_box_index4_by(@value) {
+    @color: 'color-@{value}';
+    color: @@color;
+    border: 1px solid @@color;
+  }
+
+  .popue_box_index4_by1 {
+    width: 320px;
+    height: 90px;
+    line-height: 90px;
+    color: #fff;
+    border-radius: 60px;
+    text-align: center;
+    // background-image: linear-gradient(to right, #7e4fa1, #433c7f);
+    background-color: #064c8a;
+    border: 1px solid #064c8a;
+  }
+}
+
+/*页面底部操作区*/
+.flewx {
+  position: fixed;
+  bottom: 0;
+  right: 0;
+  left: 0;
+  background-color: #fff;
+  .control-box {
+    width: 100%;
+    box-sizing: border-box;
+    
+    display: flex;
+    align-content: flex-start;
+    align-items: center;
+    //padding-bottom: constant(safe-area-inset-bottom);
+    //padding-bottom: env(safe-area-inset-bottom);
+    padding: 30px 24px 30px 30px;
+    justify-content: space-between;
+    .flewx-content {
+      font-size: 28px;
+      .fee-box {
+        display: flex;
+        align-items: center;
+        justify-content: flex-start;
+      }
+
+      .actualPayFee {
+        color: #333;
+        font-size: 40px;
+      }
+
+      .usingTotalDiscount {
+        font-family: 'PingFang SC';
+        font-style: normal;
+        font-weight: 400;
+        font-size: 22px;
+        //height: 22px;
+        //line-height: 22px;
+        margin-left: 7px;
+        //border: 1px solid var(--k-color-red-01);
+        background-color: #F4F7FF;
+        border-radius: 2px;
+        &::after {
+          border-color: #999999;
+        }
+        
+        color: #999999;
+        padding: 1px 3px;
+
+        &.usingTotalDiscount-red {
+          color: var(--k-color-red-01);
+          background-color: var(--k-color-red-06);
+          &::after {
+            border-color: var(--k-color-red-01);
+          }
+        }
+      }
+
+      .count-down-box {
+        display: flex;
+        font-weight: 400;
+        align-items: center;
+        color: var(--k-color-red-01);
+        font-family: 'PingFang SC';
+        font-style: normal;
+        font-weight: 400;
+        font-size: 26px;
+        margin-top: 5px;
+        .van-count-down {
+          font-size: 30px;
+          color: var(--k-color-red-01);
+        }
+
+        .desc {
+          font-size: 30px;
+
+        }
+      }
+    }
+    .btn-box {
+      display: flex;
+      justify-content: flex-end;
+      margin-left: 35px;
+    }
+  }
+
+  
+
+  .flewx_index3 {
+    width: 150px;
+    height: 70px;
+    border-radius: 45px;
+    text-align: center;
+    font-size: 34px;
+    line-height: 70px;
+    color: #fff;
+    // background-image: linear-gradient(to right, #7e4fa1, #433c7f);
+    background: #064c8a;
+    box-shadow: 2px 3px 5px #888888;
+    //position: absolute;
+    //right: 16px;
+  }
+  
 }
 
 .wrap {
@@ -929,330 +1193,4 @@ export default {
     border-radius: 40px;
   }
 }
-
-.warp {
-  width: clac(100% - 60px);
-  margin: 30px;
-  // background-color: #fff;
-  background: #fafbff;
-  border-radius: 4px;
-  padding-bottom: 10px;
-  border: 1px solid #d8dae0;
-
-  .warp_index {
-    // width: 650px;
-    width: calc(100% - 60px);
-    margin-left: 27.5px;
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    // padding: 30px;
-    padding-bottom: 20px;
-    font-size: 30px;
-    color: #999999;
-    font-weight: 400;
-  }
-
-  .warp_index1 {
-    justify-content: center;
-    font-size: 40px;
-    padding: 40px 0 60px;
-
-    font-size: 38px;
-    font-weight: 500;
-    color: #0c0c0c;
-    line-height: 53px;
-    // border-bottom: 1px solid #f2f2f2;
-  }
-
-  .color_warp_index {
-    color: #000000;
-  }
-
-  .bgc-blue {
-    .bgc-color('blue');
-  }
-
-  .bgc-green {
-    .bgc-color('green');
-  }
-
-  .bgc-color(@value) {
-    @color: 'color-@{value}';
-    color: #fff;
-    background-color: @@color;
-    margin: 0;
-    width: 100%;
-    border-radius: 10px 10px 0 0;
-  }
-
-  .warp_index_da {
-    padding: 30px 0;
-    // border-bottom: 1px solid #f2f2f2;
-  }
-
-  .warp_index_color {
-    color: #333;
-    display: flex;
-    align-items: center;
-  }
-}
-
-.flewx {
-  width: 100%;
-  height: 130px;
-  background-color: #fff;
-  position: fixed;
-  bottom: 0;
-  display: flex;
-  align-items: center;
-  justify-content: space-around;
-  padding-bottom: constant(safe-area-inset-bottom);
-  padding-bottom: env(safe-area-inset-bottom);
-  padding-bottom: 20px;
-
-  .flewx-content {
-    position: absolute;
-    left: 16px;
-
-    .count-down-box {
-      display: flex;
-      font-weight: 400;
-      align-items: center;
-      font-size: 30px;
-
-      .van-count-down {
-        font-size: 30px;
-      }
-
-      .desc {
-        font-size: 30px;
-      }
-    }
-  }
-
-  .flewx_index3 {
-    width: 150px;
-    height: 70px;
-    border-radius: 45px;
-    text-align: center;
-    font-size: 34px;
-    line-height: 70px;
-    color: #fff;
-    // background-image: linear-gradient(to right, #7e4fa1, #433c7f);
-    background: #064c8a;
-    box-shadow: 2px 3px 5px #888888;
-    position: absolute;
-    right: 16px;
-  }
-
-  .blue_flewx_index3 {
-    .color_flewx_index3('blue');
-  }
-
-  .green_flewx_index3 {
-    .color_flewx_index3('green');
-  }
-
-  .color_flewx_index3(@value) {
-    @color: 'color-@{value}';
-    background-image: none;
-    background-color: @@color;
-  }
-
-  .btn-disabled {
-    color: hsla(0, 0%, 100%, 0.6);
-    cursor: not-allowed;
-    background-color: rgb(128, 128, 128);
-    background-image: none;
-  }
-}
-
-.popue_box {
-  height: 530px;
-  background-color: #fff;
-  position: fixed;
-  bottom: 0;
-  left: 0;
-  right: 0;
-
-  .popue_box_index {
-    width: 92%;
-    margin-left: 4%;
-    font-size: 30px;
-    height: 90px;
-    border-bottom: 1px solid #f5f5f5;
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-  }
-
-  .popue_box_index1 {
-    font-size: 32px;
-    width: 92%;
-    margin-left: 4%;
-    font-weight: 700;
-    height: 90px;
-    line-height: 90px;
-    border-bottom: 1px solid #f5f5f5;
-    text-align: center;
-  }
-
-  .popue_box_index4_xs {
-    width: 250px;
-    height: 55px;
-    border: 2px solid #e5e6ec;
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    border-radius: 10px;
-
-    .popue_box_index4_xs_index1 {
-      width: 54px;
-      height: 54px;
-      background-color: #f5f8fb;
-      text-align: center;
-      line-height: 54px;
-      border-right: 1px solid #e5e6ec;
-    }
-
-    .popue_box_index4_xs_index3 {
-      width: 54px;
-      height: 54px;
-      background-color: #f5f8fb;
-      text-align: center;
-      line-height: 54px;
-      border-left: 1px solid #e5e6ec;
-    }
-  }
-
-  .popue_box_index5 {
-    font-size: 30px;
-    width: 92%;
-    margin-left: 4%;
-    font-weight: 700;
-    height: 140px;
-    line-height: 90px;
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-  }
-
-  .popue_box_index4_by {
-    width: 320px;
-    height: 90px;
-    line-height: 90px;
-    color: #fff;
-    border-radius: 60px;
-    text-align: center;
-    color: #064c8a;
-    font-weight: 700;
-    border: 1px solid #064c8a;
-  }
-
-  .blue_popue_box_index4_by {
-    .color_popue_box_index4_by('blue');
-  }
-
-  .green_popue_box_index4_by {
-    .color_popue_box_index4_by('green');
-  }
-
-  .color_popue_box_index4_by(@value) {
-    @color: 'color-@{value}';
-    color: @@color;
-    border: 1px solid @@color;
-  }
-
-  .popue_box_index4_by1 {
-    width: 320px;
-    height: 90px;
-    line-height: 90px;
-    color: #fff;
-    border-radius: 60px;
-    text-align: center;
-    // background-image: linear-gradient(to right, #7e4fa1, #433c7f);
-    background-color: #064c8a;
-    border: 1px solid #064c8a;
-  }
-
-}
-
-.text-purple {
-  color: #703a98;
-}
-
-.text-red {
-  color: #333;
-}
-
-.text-disable {
-  color: #999;
-}
-
-.top_content {
-  width: calc(100% - 60px);
-  padding: 30px 30px;
-  margin-left: 30px;
-  margin-bottom: constant(safe-area-inset-bottom); // 兼容 IOS<11.2
-  margin-bottom: env(safe-area-inset-bottom); // 兼容 IOS>=11.2
-  box-sizing: border-box;
-  display: flex;
-  flex-direction: column;
-
-  //width: 750px;
-  //height: 280px;
-  background: #fafbff;
-  border: 1px solid #d8dae0;
-
-  span {
-    font-size: 24px;
-    color: #898989;
-    text-align: left;
-  }
-
-  .title_box {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-
-    // margin-bottom: 20px;
-    .title {
-      // padding: 0px 14px;
-      box-sizing: border-box;
-      border-radius: 20px;
-      font-size: 36px;
-      color: #000;
-      font-weight: 500;
-      text-align: left;
-      line-height: 50px;
-    }
-  }
-
-  .info {
-    // padding-left: 18px;
-    font-size: 30px;
-    width: 100%;
-    color: #999999;
-    line-height: 45px;
-  }
-
-  .info_show {
-    word-break: break-all;
-    text-overflow: ellipsis;
-    overflow: hidden;
-    display: -webkit-box;
-    -webkit-line-clamp: 2;
-    -webkit-box-orient: vertical;
-  }
-
-  .top_down {
-    margin-top: 20px;
-    width: 100%;
-    // font-size: 20PX;
-    line-height: 20px;
-    text-align: center;
-    color: #999999;
-  }
-}
 </style>

src/pages/parkingFee/mixins/parkingFeeCoupon.js

@@ -18,14 +18,9 @@ export default {
       platform: getPlatform(),
       maxCouponFee: 0, // 计算优惠券已选的总金额
       remainPrice: 0, // 剩余可用优惠额度
+      extraData: {}
     };
   },
-  props:{
-    theme:{
-      type: String,
-      default: ''
-    }
-  },
   computed: {
     ...mapState({
       custTypeId: (state) => state.custTypeId,
@@ -35,6 +30,8 @@ export default {
       maxOneDayDiscountFee: (state) => state.order.maxOneDayDiscountFee, // 深圳单日单次使用上限
       usingTotalDiscount: (state) => state.order.usingTotalDiscount, // 当前已使用优惠
       availableDiscountFee: (state) => state.order.availableDiscountFee, // 当前已使用优惠
+      lbsId: (state) => state.lbsId, // 楼栋ID
+      groupId: (state) => state.groupId, // 楼盘ID
     }),
   },
 
@@ -46,7 +43,7 @@ export default {
       });
       if (isInWeixinH5()) {
         initWxJsSdkConfig(['checkJsApi', 'chooseImage'], ['wx-open-launch-weapp']);
-        // this.launchPathInit();
+        this.launchPathInit();
       }
     }, 300);
     this.pageInit();
@@ -367,20 +364,26 @@ export default {
         type: 'all',
       });
       this.launchPath = `?trackSourceType=运营位&trackSourceName=功能球&projectId=${projectId}&groupId=${groupId}&mallId=${mallId}&source=tparkingH5`;
+
+      let isLogin = false
+      const member = uni.getStorageSync('member');
+      if (member && JSON.stringify(this.member) !== '{}') {
+        isLogin = true
+      }
+      this.extraData = {
+        brandId: this.groupId,
+        lbsId: this.lbsId,
+        isLogin: isLogin,
+        navigate_time:new Date().getTime()
+      }
     },
     // 跳转小程序
     navigateToMiniProgram() {
       if (this.platform === 'miniprogram') {
-        // const { projectId } = getAppIdByGroupIdAndMallId({
-        //   groupId: this.$route.params.groupId,
-        //   mallId: this.$route.params.mallId,
-        //   type: 'all',
-        // });
-        // this.launchPathInit();
         window.toWXSendMsg({
           type: 'navigateToMiniProgram',
           options: {
-            launchPath: this.launchPath,
+            retailLbsId: this.lbsId,
           },
         });
         // 订阅微信小程序端的回调

src/pages/parkingFee/mixins/parkingFeeDetail.js

@@ -23,12 +23,6 @@ export default {
       msData: {},
     };
   },
-  props:{
-    theme:{
-      type: String,
-      default: ''
-    }
-  },
   beforeRouteLeave(to, from, next) {
     // 设置下一个路由的 meta
     if (/index|home/.test(to.name)) {
@@ -72,6 +66,7 @@ export default {
       unlicensedInfo: state => state.unlicensedInfo,
       endlessLoop: (state) => state.endlessLoop,
       appId: state => state.appId,
+      source: state => state.source,
     }),
     // 支付按钮状态
     payBtnDisabled() {
@@ -429,10 +424,10 @@ export default {
     },
     coupon() {
       // 如果没有电子券的话，提示用户
-      if (this.coupons.length === 0) {
-      uni.showToast({
-        title: '暂无可使用的优惠券，请前往积分商城兑换优惠券'
-      })
+      if (this.coupons.length === 0 && this.source !== 'KIP') {
+        uni.showToast({
+          title: '暂无可使用的优惠券，请前往积分商城兑换优惠券'
+        })
         return
       }
       this.$router.push({

src/pages/parkingFee/parkingFeeCoupon.vue

@@ -1,16 +1,362 @@
 <template>
-  <component :is="componentName"></component>
+  <div scroll-y="true" :class="['scroll-Y' , theme]">
+    <div>
+      <div class="parkingFeeCoupon">
+        <van-checkbox-group :value="checkedCouponList">
+          <div class="card-list" v-if="couponList.length">
+            <div class="item" v-for="(item, index) in couponList" :key="index">
+              <div class="item-image">
+                <div class="discountFee-box">
+                  <span>￥</span>
+                  <span class="itemValue">{{ item.discountFee }}</span>
+                </div>
+                <span style=" font-size: 30px">停车劵</span>
+              </div>
+              <div class="item-content">
+                <div class="content">
+                  <span class="h3">{{ item.name }}</span>
+                  <span class="span">有效期至 {{ item.expirationDate }}</span>
+                </div>
+                <div class="erwm_box">
+                  <van-checkbox color="#fff" @click="checkboxItemChange(`coupon${index}`, index)" checked-color="var(--k-color-primary)" :disabled="item.disabled" :name="`coupon${index}`"/>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div class="no-coupon" v-else>
+            <img :src="require('./static/images/no-card.png')"/>
+            <span class="message">您还没有卡券</span>
+          </div>
+        </van-checkbox-group>
+        <!-- 为避免冲突，小程序 和 H5 跳转 CRM小程序：积分商城 的逻辑分开处理 -->
+        <div :class="['guide-box', 'mgb-110', !couponList.length && 'flex-bottom']" v-if="platform === 'miniprogram'">
+          <div class="guide-title">优惠券兑换指导</div>
+          <div class="guide-desc" @click="navigateToMiniProgram">
+            停车优惠券可直接使用，若您还没有兑换或继续兑换，可前往
+            <span class="guide-mini">嘉里中心小程序>积分商城</span>
+            进行兑换
+          </div>
+        </div>
+        <div :class="['guide-box', 'mgb-110', !couponList.length && 'flex-bottom']" v-if="platform === 'micromessenger'">
+          <div class="guide-title">优惠券兑换指导</div>
+          <div class="guide-desc">
+            停车优惠券可直接使用，若您还没有兑换或继续兑换，可前往
+            <span class="guide-mini">嘉里中心小程序>积分商城</span>
+            <wx-open-launch-weapp username="gh_0bd6a97b6d38" id="launch-btn" :path="`pages/pointsMall/pointsMall.html${launchPath}`" class="wx-open-launch-weapp" :env-version="envVersion" :extra-data="{...extraData, navigate_time:new Date().getTime()}" @launch="launchFn" @error="launchErrorFn">
+              <script type="text/wxtag-template">
+                <span style="white-space: nowrap;display: inline-block;color: transparent;text-decoration: underline;margin: 0 5px;font-size: 14PX;"></span>
+              </script>
+            </wx-open-launch-weapp>
+            进行兑换
+          </div>
+        </div>
+        <div style="height: 60px;">
+
+        </div>
+      </div>
+    </div>
+    <div class="flewx">
+      <div class="control-box">
+        <div class="flewx-content">
+          <div class="fee-box">
+            <div>合计：</div>
+            <div class="actualPayFee">{{
+                actualPayFee | currency
+              }}
+            </div>
+            <!-- <van-count-down :time="3 * 60 * 1000" /> -->
+          </div>
+          <div :class="['van-hairline--surround','usingTotalDiscount', usingTotalDiscount > 0 && 'usingTotalDiscount-red']"
+          >已优惠{{ usingTotalDiscount | currency }}元
+          </div
+          >
+        </div>
+        <div class="btn-box">
+          <k-button style="width: 100%;max-width: 240px" title="确定" disabledColor="#D1D2D9" @click="confirm"/>
+        </div>
+
+      </div>
+      <!-- 开启底部安全区适配 -->
+      <van-number-keyboard safe-area-inset-bottom />
+    </div>
+  </div>
 </template>
 
 <script>
-import officeBlueCom from './components/officeBlue/parkingFeeCoupon.vue';
-import baseParkingFeeCom from './components/base/parkingFeeCoupon.vue';
 import baseMixins from './mixins/base'
+import parkingFeeCouponJs from './mixins/parkingFeeCoupon';
 export default {
-  mixins:[baseMixins],
-  components: {
-    officeBlueCom,
-    baseParkingFeeCom,
-  },
+  mixins: [baseMixins, parkingFeeCouponJs],
 };
 </script>
+
+<style lang="less" scoped>
+//@import '../../styles/common.less';
+
+.scroll-Y {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  height: 100vh;
+  background: #F4F7FF;
+
+  .parkingFeeCoupon {
+    min-height: 99.88vh;
+    background: #f4f7ff;
+  }
+}
+
+.card-list {
+  width: 100%;
+  //background: #f4f7ff;
+  display: flex;
+  flex-direction: column;
+  padding: 24px 20px;
+  box-sizing: border-box;
+  flex: 1;
+  position: relative;
+
+  .item {
+    width: 100%;
+    height: 197px;
+    display: flex;
+    margin-bottom: 16px;
+    border-radius: 4px;
+    background-image: url("./static/images/coupon-bg.png");
+    background-repeat: no-repeat;
+    background-position: 100% 100%;
+    background-size:100% 100%;
+    color: var(--k-color-primary);
+    .item-image {
+      width: 190px;
+      text-align: center;
+      font-size: 24px;
+      font-weight: 600;
+      .discountFee-box {
+        margin-top: 31px;
+        .itemValue {
+          font-size: 60px;
+        }
+      }
+    }
+
+    .item-content {
+      display: flex;
+      flex: 1;
+      padding-left: 44px;
+      padding-right: 30px;
+      align-items: center;
+      justify-content: space-between;
+
+      .content {
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        flex: 1;
+
+        .h3 {
+          font-size: 28px;
+          line-height: 48px;
+          font-weight: 500;
+        }
+
+        .span {
+          font-size: 24px;
+          color: #999999;
+          line-height: 40px;
+        }
+      }
+
+      .erwm_box {
+        display: flex;
+        align-items: center;
+        position: relative;
+
+        img {
+          width: 52px;
+          height: 52px;
+        }
+
+        .tag {
+          position: absolute;
+          bottom: 0;
+          right: 0;
+          border-radius: 16px;
+          padding: 5px 10px;
+          box-sizing: border-box;
+          background: #f7931e;
+          text-align: center;
+          color: #fff;
+          width: 122px;
+          font-size: 24px;
+        }
+      }
+    }
+  }
+}
+
+.no-coupon {
+  text-align: center;
+
+  img {
+    width: 60%;
+    display: block;
+    margin: 100px auto 20px;
+  }
+
+  .message {
+    font-size: 36px;
+    font-family: PingFangSC-Regular, PingFang SC;
+    font-weight: 400;
+    color: #919baa;
+    line-height: 50px;
+  }
+}
+
+.mgb-110 {
+  margin-bottom: 110px !important;
+}
+
+.guide-box {
+  width: calc(100% - 60px);
+  margin-left: 30px;
+
+  .guide-title {
+    font-size: 34px;
+    font-weight: 400;
+    color: #333333;
+    line-height: 48px;
+    margin-bottom: 22px;
+  }
+
+  .guide-desc {
+    font-size: 28px;
+    font-weight: 400;
+    color: #999999;
+    line-height: 42px;
+    position: relative;
+
+    .guide-mini {
+      display: inline-block;
+      color: var(--k-color-primary);
+      text-decoration: underline;
+      margin: 0 5px;
+    }
+  }
+
+  .wx-open-launch-weapp {
+    height: 42px;
+    position: absolute;
+    width: 330px;
+    white-space: nowrap;
+    left: 90px;
+    right: 50px;
+    background-color: transparent;
+    margin: 0 5px;
+  }
+
+  &.flex-bottom {
+    position: fixed;
+    left: 0;
+    right: 0;
+    bottom: 50px;
+    z-index: 20;
+  }
+}
+
+/*页面底部操作区*/
+.flewx {
+  position: fixed;
+  bottom: 0;
+  right: 0;
+  left: 0;
+  background-color: #fff;
+  .control-box {
+    width: 100%;
+    box-sizing: border-box;
+
+    display: flex;
+    align-content: flex-start;
+    align-items: center;
+    //padding-bottom: constant(safe-area-inset-bottom);
+    //padding-bottom: env(safe-area-inset-bottom);
+    padding: 30px 24px 30px 30px;
+    justify-content: space-between;
+    .flewx-content {
+      font-size: 28px;
+      .fee-box {
+        display: flex;
+        align-items: center;
+        justify-content: flex-start;
+      }
+
+      .actualPayFee {
+        color: #333;
+        font-size: 40px;
+      }
+
+      .usingTotalDiscount {
+        font-family: 'PingFang SC';
+        font-style: normal;
+        font-weight: 400;
+        font-size: 22px;
+        //height: 22px;
+        //line-height: 22px;
+        margin-left: 90px;
+        //border: 1px solid var(--k-color-red-01);
+        background-color: #F4F7FF;
+        border-radius: 2px;
+        &::after {
+          border-color: #999999;
+        }
+
+        color: #999999;
+        padding: 1px 3px;
+
+        &.usingTotalDiscount-red {
+          color: var(--k-color-red-01);
+          background-color: var(--k-color-red-06);
+          &::after {
+            border-color: var(--k-color-red-01);
+          }
+        }
+      }
+    }
+    .btn-box {
+      display: flex;
+      justify-content: flex-end;
+      margin-left: 35px;
+      flex: 1;
+      max-width: 240px;
+    }
+  }
+
+
+
+  .flewx_index3 {
+    width: 150px;
+    height: 70px;
+    border-radius: 45px;
+    text-align: center;
+    font-size: 34px;
+    line-height: 70px;
+    color: #fff;
+    // background-image: linear-gradient(to right, #7e4fa1, #433c7f);
+    background: #064c8a;
+    box-shadow: 2px 3px 5px #888888;
+    //position: absolute;
+    //right: 16px;
+  }
+
+}
+
+/deep/ checkbox .wx-checkbox-input.wx-checkbox-input-checked {
+  background-color: red !important;
+  border-radius: 50% !important;
+  border: 1px solid red;
+}
+
+/deep/ checkbox .wx-checkbox-input {
+  border-radius: 50% !important;
+}
+</style>

src/pages/parkingFee/parkingFeeDetail.vue

@@ -1,20 +1,1200 @@
 <template>
-  <component :is="componentName" :theme="theme"></component>
+  <div v-if="orderDetail && orderDetail.parkingRecord && orderDetail.parkingRecord.vehicleNo" :class="theme">
+    <div class="scroll-Y">
+      <div
+        class="vehicleNo"
+      >
+        {{ orderDetail.parkingRecord.vehicleNo | formatCarno }}
+        <!-- {{ $route.query.carno | formatCarno }} -->
+      </div>
+      <div class="info-box mb--20">
+        <div class="info-item-box">
+          <div class="label">停车场</div>
+          <div class="value">{{ orderDetail.parkInfo.parkName }}</div>
+        </div>
+        <div class="info-item-box">
+          <div class="label">入场时间</div>
+          <div class="value">{{ orderDetail.parkingRecord.enterTime }}</div>
+        </div>
+        <div class="info-item-box">
+          <div class="label">已停车时长</div>
+          <div class="value">{{ orderDetail.parkingRecord.serviceMin }}</div>
+        </div>
+        <div class="van-hairline--bottom hr"></div>
+        <div class="info-item-box">
+          <div class="label pb--27">应缴</div>
+          <div class="value bold-fz">
+            {{ ( orderDetail.parkingRecord.totalFeeInYuan ) | currency }}
+          </div>
+        </div>
+      </div>
+      <div class="info-box mb--30">
+        <div class="info-item-box" v-if="enableConsume">
+          <div class="label">停车优惠</div>
+          <div @click="discounts" :class="['value',discountDesc === '暂无可用优惠' ?  '' : 'text-red']">{{ discountDesc }}
+            <van-icon name="arrow"/>
+          </div>
+        </div>
+        <div class="info-item-box" v-if="orderDetail && orderDetail.discountInfo">
+          <div class="label">积分减免</div>
+          <div :class="['value', integralDesc === '今日已达上限' ? 'text-disable' : 'text-red']" @click="showPointsMathPopup('bottom')">{{ integralDesc }}
+            <van-icon name="arrow"/>
+          </div>
+        </div>
+        <div class="info-item-box" v-if="orderDetail && orderDetail.discountInfo">
+          <div class="label">优惠劵</div>
+          <div :class="['value', coupons.length > 0 ? 'text-red' : 'text-disable']" @click="coupon">{{ couponDesc }}
+            <van-icon name="arrow"/>
+          </div>
+        </div>
+        <div class="info-item-box" v-if="enablePaperCoupons">
+          <div class="label">纸质优惠劵</div>
+          <div :class="['value', 'text-red']">扫描纸质优惠劵二维码
+            <van-icon name="arrow"/>
+          </div>
+        </div>
+        <div class="info-item-box">
+          <div class="label">优惠金额:</div>
+          <div :class="['value']">-{{ usingTotalDiscount | currency }}</div>
+        </div>
+        <div class="van-hairline--bottom hr"></div>
+        <div class="info-item-box">
+          <div class="label pb--27">应付金额</div>
+          <div class="value bold-fz">
+            {{ actualPayFee | currency }}
+          </div>
+        </div>
+      </div>
+
+      <div class="description-box">
+        <div class="title_box">
+          <span class="title">缴费说明</span>
+        </div>
+        <div class="info" v-html="setDescription()"></div>
+      </div>
+<!--      <div style="height: 50px;"></div>-->
+      <!-- 开启底部安全区适配 -->
+      <van-number-keyboard safe-area-inset-bottom />
+    </div>
+    <div class="flewx">
+      <div class="control-box">
+        <div class="flewx-content">
+          <div class="fee-box">
+            <div>合计：</div>
+            <div class="actualPayFee">{{
+                actualPayFee | currency
+              }}
+            </div>
+            <div :class="['van-hairline--surround','usingTotalDiscount', usingTotalDiscount > 0 && 'usingTotalDiscount-red']"
+            >已优惠{{ usingTotalDiscount | currency }}元
+            </div
+            >
+            <!-- <van-count-down :time="3 * 60 * 1000" /> -->
+          </div>
+          <div class="count-down-box">
+            <van-count-down
+              v-if="orderDetail.parkingRecord.vehicleNo"
+              format="mm:ss"
+              :time="refreshTime * 1000"
+              @finish="resetCountDown()"
+            >
+              <!--  -->
+            </van-count-down>
+            <span class="desc">后同步最新费用</span>
+          </div>
+        </div>
+        <div class="btn-box">
+          <k-button style="width: 100%;max-width: 240px" title="支付" disabledColor="#D1D2D9" @click="toPay"/>
+        </div>
+
+      </div>
+      <!-- 开启底部安全区适配 -->
+      <van-number-keyboard safe-area-inset-bottom />
+    </div>
+    <van-popup
+      v-model="popup"
+      position="bottom"
+      :animation="false"
+      :maskClick="false"
+      :close-on-click-overlay="false"
+    >
+      <div class="popue_box" v-if="orderDetail && orderDetail.discountInfo">
+        <div class="popue_box_index1">积分减免</div>
+        <div class="popue_box_index">
+          <div>减免规则</div>
+          <div style="color: #989898">{{ pointsPerHour }}积分抵扣{{ orderDetail.parkInfo.parkMallCode === 5 ? unitAmount + '元' : '1小时' }}</div>
+        </div>
+        <div class="popue_box_index">
+          <div>可用积分</div>
+          <div style="color: #999999">{{ available }}分</div>
+        </div>
+        <div class="popue_box_index">
+          <div>抵扣{{ orderDetail.parkInfo.parkMallCode === 5 ? '金额' : '时长' }}</div>
+          <div class="popue_box_index" style="width: 325px">
+            <div class="popue_box_index4_xs van-hairline--surround">
+              <div class="popue_box_index4_xs_index1" @click="$store.dispatch('order/pointsMath',{type: 'minus', callback: pointsMathCallback})">
+                -
+              </div>
+              <div class="popue_box_index4_xs_index2">{{ pointsTime }}</div>
+              <div class="popue_box_index4_xs_index3" @click="$store.dispatch('order/pointsMath',{type: 'add', callback: pointsMathCallback})">
+                +
+              </div>
+            </div>
+            <div style="color: #808080">
+              {{ orderDetail.parkInfo.parkMallCode === 5 ? '元' : '小时' }}
+            </div>
+          </div>
+        </div>
+        <div class="popue_box_index5">
+          <div
+            :class="{
+              popue_box_index4_by: true,
+            }"
+            @click="cancelPointsMathPopup()"
+          >
+            取消
+          </div>
+          <div
+            :class="{
+              popue_box_index4_by1: true,
+            }"
+            @click="savePointsMathPopup()"
+          >
+            确定
+          </div>
+        </div>
+        <van-number-keyboard safe-area-inset-bottom/>
+      </div>
+    </van-popup>
+  </div>
 </template>
 
 <script>
-import officeBlueCom from './components/officeBlue/parkingFeeDetail.vue';
-import baseParkingFeeCom from './components/base/parkingFeeDetail.vue';
-import parkingFeeDetail from './components/purple/parkingFeeDetail.vue';
-import baseMixins from './mixins/base';
+import parkingFeeDetailJs from './mixins/parkingFeeDetail'
+import baseMixins from './mixins/base'
 
 export default {
-  name: 'parkingFeeDetail',
-  mixins: [baseMixins],
-  components: {
-    officeBlueCom,
-    baseParkingFeeCom,
-    purpleCom: parkingFeeDetail
-  },
-};
+  mixins: [baseMixins, parkingFeeDetailJs]
+}
 </script>
+
+<style lang="less" scoped>
+.scroll-Y {
+  width: 100%;
+  //display: flex;
+  //flex-direction: column;
+  background: #F5F7FE;
+  padding-bottom: 250px;
+  //padding-bottom: 20px;
+  padding-top: 24px;
+}
+
+/*车牌号*/
+.vehicleNo {
+  width: 666px;
+  height: 109.5px;
+  line-height: 109.5px;
+  margin-left: 24px;
+
+  background-color: #FAFBFF;
+  border-radius: 4px;
+  margin-bottom: 20px;
+
+  font-style: normal;
+  font-weight: 600;
+  font-size: 36px;
+  padding-left: 36px;
+  color: #333333;
+}
+
+.pb--27 {
+  padding-bottom: 27px;
+}
+
+.mb--20 {
+  margin-bottom: 20px;
+}
+
+.mb--30 {
+  margin-bottom: 30px;
+}
+
+.info-box {
+  background: #FAFBFF;
+  padding-top: 48.5px;
+
+  width: 702px;
+  margin-left: 24px;
+
+  .info-item-box {
+    display: flex;
+    justify-content: space-between;
+
+    .label {
+      padding-left: 36px;
+      padding-bottom: 39px;
+      text-align: left;
+
+      font-family: 'PingFang SC';
+      font-style: normal;
+      font-weight: 400;
+      font-size: 30px;
+      color: #999999;
+
+    }
+
+    .value {
+      text-align: right;
+      padding-right: 36px;
+      font-family: 'PingFang SC';
+      font-style: normal;
+      font-weight: 400;
+      font-size: 30px;
+      color: #333333;
+
+      &.bold-fz {
+        font-family: 'PingFang SC';
+        font-style: normal;
+        font-weight: 500;
+        font-size: 34px;
+        color: #333333;
+      }
+    }
+  }
+
+  .hr {
+    margin-bottom: 23px;
+  }
+
+}
+
+.description-box {
+  padding-left: 30px;
+
+  .title_box {
+    .title {
+      font-family: 'PingFang SC';
+      font-style: normal;
+      font-weight: 500;
+      font-size: 30px;
+      color: #333333;
+    }
+  }
+
+  .info {
+    font-family: 'PingFang SC';
+    font-style: normal;
+    font-weight: 400;
+    font-size: 26px;
+    line-height: 40px;
+    /* or 154% */
+    color: #999999;
+  }
+}
+
+/*积分*/
+.popue_box {
+  height: 695px;
+  background-color: #fff;
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  right: 0;
+
+  .popue_box_index {
+    width: 92%;
+    margin-left: 4%;
+    height: 117px;
+    border-bottom: 1px solid #f5f5f5;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    font-family: 'PingFang SC';
+    font-style: normal;
+    font-weight: 400;
+    font-size: 34px;
+    text-align: right;
+    color: #333333;
+  }
+
+  .popue_box_index1 {
+    width: 92%;
+    font-size: 34px;
+    margin-left: 4%;
+    font-weight: 700;
+    height: 117px;
+    line-height: 117px;
+    border-bottom: 1px solid #f5f5f5;
+    text-align: center;
+  }
+
+  .popue_box_index4_xs {
+    width: 260px;
+    height: 72px;
+    border: 2px solid #D8DAE0;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    border-radius: 10px;
+
+    .popue_box_index4_xs_index1 {
+      width: 72px;
+      height: 72px;
+      background-color: #FAFBFF;
+      text-align: center;
+      line-height: 72px;
+      border-right: 1px solid #e5e6ec;
+    }
+
+    .popue_box_index4_xs_index2 {
+      width: 116px;
+      height: 72px;
+      line-height: 72px;
+      text-align: center;
+      background-color: #FFFFFF;
+    }
+
+    .popue_box_index4_xs_index3 {
+      width: 72px;
+      height: 72px;
+      background-color: #f5f8fb;
+      text-align: center;
+      line-height: 72px;
+      border-left: 1px solid #e5e6ec;
+    }
+  }
+
+  .popue_box_index5 {
+    font-size: 30px;
+    width: 92%;
+    margin-left: 4%;
+    font-weight: 700;
+    height: 214px;
+    line-height: 90px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+  }
+
+  .popue_box_index4_by {
+    width: 320px;
+    height: 90px;
+    line-height: 90px;
+    color: #fff;
+    border-radius: 60px;
+    text-align: center;
+    color: #064c8a;
+    font-weight: 700;
+    border: 1px solid #064c8a;
+  }
+
+  .blue_popue_box_index4_by {
+    .color_popue_box_index4_by('blue');
+  }
+
+  .green_popue_box_index4_by {
+    .color_popue_box_index4_by('green');
+  }
+
+  .color_popue_box_index4_by(@value) {
+    @color: 'color-@{value}';
+    color: @@color;
+    border: 1px solid @@color;
+  }
+
+  .popue_box_index4_by1 {
+    width: 320px;
+    height: 90px;
+    line-height: 90px;
+    color: #fff;
+    border-radius: 60px;
+    text-align: center;
+    // background-image: linear-gradient(to right, #7e4fa1, #433c7f);
+    background-color: #064c8a;
+    border: 1px solid #064c8a;
+  }
+}
+
+/*页面底部操作区*/
+.flewx {
+  position: fixed;
+  bottom: 0;
+  right: 0;
+  left: 0;
+  background-color: #fff;
+  .control-box {
+    width: 100%;
+    box-sizing: border-box;
+
+    display: flex;
+    align-content: flex-start;
+    align-items: center;
+    //padding-bottom: constant(safe-area-inset-bottom);
+    //padding-bottom: env(safe-area-inset-bottom);
+    padding: 30px 24px 30px 30px;
+    justify-content: space-between;
+    .flewx-content {
+      font-size: 28px;
+      .fee-box {
+        display: flex;
+        align-items: center;
+        justify-content: flex-start;
+      }
+
+      .actualPayFee {
+        color: #333;
+        font-size: 40px;
+      }
+
+      .usingTotalDiscount {
+        font-family: 'PingFang SC';
+        font-style: normal;
+        font-weight: 400;
+        font-size: 22px;
+        //height: 22px;
+        //line-height: 22px;
+        margin-left: 7px;
+        //border: 1px solid var(--k-color-red-01);
+        background-color: #F4F7FF;
+        border-radius: 2px;
+        &::after {
+          border-color: #999999;
+        }
+
+        color: #999999;
+        padding: 1px 3px;
+
+        &.usingTotalDiscount-red {
+          color: var(--k-color-red-01);
+          background-color: var(--k-color-red-06);
+          &::after {
+            border-color: var(--k-color-red-01);
+          }
+        }
+      }
+
+      .count-down-box {
+        display: flex;
+        font-weight: 400;
+        align-items: center;
+        color: var(--k-color-red-01);
+        font-family: 'PingFang SC';
+        font-style: normal;
+        font-weight: 400;
+        font-size: 26px;
+        margin-top: 5px;
+        .van-count-down {
+          font-size: 30px;
+          color: var(--k-color-red-01);
+        }
+
+        .desc {
+          font-size: 30px;
+
+        }
+      }
+    }
+    .btn-box {
+      display: flex;
+      justify-content: flex-end;
+      margin-left: 35px;
+      flex: 1;
+      max-width: 240px;
+    }
+  }
+
+
+
+  .flewx_index3 {
+    width: 150px;
+    height: 70px;
+    border-radius: 45px;
+    text-align: center;
+    font-size: 34px;
+    line-height: 70px;
+    color: #fff;
+    // background-image: linear-gradient(to right, #7e4fa1, #433c7f);
+    background: #064c8a;
+    box-shadow: 2px 3px 5px #888888;
+    //position: absolute;
+    //right: 16px;
+  }
+
+}
+
+.wrap {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+
+  .parkingFee {
+    display: flex;
+    flex-direction: column;
+
+    .parkingFee-top {
+      display: flex;
+      flex-direction: column;
+      background: #c69c6d;
+
+      .top_content {
+        padding: 30px 30px;
+        margin-bottom: constant(safe-area-inset-bottom); // 兼容 IOS<11.2
+        margin-bottom: env(safe-area-inset-bottom); // 兼容 IOS>=11.2
+        box-sizing: border-box;
+        display: flex;
+        flex-direction: column;
+
+        //width: 750px;
+        //height: 280px;
+        background: #fafbff;
+        border: 1px solid #d8dae0;
+
+        span {
+          font-size: 24px;
+          color: #898989;
+          text-align: left;
+        }
+
+        .title_box {
+          display: flex;
+          align-items: center;
+          justify-content: space-between;
+
+          // margin-bottom: 20px;
+          .title {
+            // padding: 0px 14px;
+            box-sizing: border-box;
+            border-radius: 20px;
+            font-size: 36px;
+            color: #000;
+            font-weight: 500;
+            text-align: left;
+            line-height: 50px;
+          }
+        }
+
+        .info {
+          // padding-left: 18px;
+          font-size: 30px;
+          width: 100%;
+          color: #999999;
+          line-height: 45px;
+        }
+
+        .info_show {
+          word-break: break-all;
+          text-overflow: ellipsis;
+          overflow: hidden;
+          display: -webkit-box;
+          -webkit-line-clamp: 2;
+          -webkit-box-orient: vertical;
+        }
+
+        .top_down {
+          margin-top: 20px;
+          width: 100%;
+          // font-size: 20PX;
+          line-height: 20px;
+          text-align: center;
+          color: #999999;
+        }
+      }
+
+      .top_menu {
+        background: #fff;
+        padding: 30px 0;
+        box-sizing: border-box;
+        display: flex;
+        justify-content: space-between;
+        border-radius: 15px 15px 0 0;
+
+        .menu_item {
+          display: flex;
+          flex-direction: column;
+          align-items: center;
+          width: 33.3%;
+
+          img {
+            width: 102px;
+            height: 102px;
+          }
+
+          span {
+            font-size: 24px;
+            margin-top: 24px;
+          }
+        }
+      }
+    }
+
+    .parkingFee-bottom {
+      width: 100%;
+      display: flex;
+      flex-direction: column;
+      padding: 14px 25px;
+      box-sizing: border-box;
+
+      // 车牌号查询
+      .parkingFee-search {
+        width: 100%;
+        display: flex;
+        flex-direction: column;
+        background: #fff;
+        border-radius: 24px;
+        padding: 26px 25px 20px;
+        box-sizing: border-box;
+
+        .search_tip {
+          color: #999;
+          font-size: 24px;
+          text-align: center;
+        }
+
+        .searchPrice {
+          margin: 0 auto;
+          width: 40%;
+          height: 60px;
+          line-height: 60px;
+          border-radius: 20px;
+        }
+      }
+
+      .search-list {
+        display: flex;
+        flex-direction: column;
+        background: #fff;
+        padding: 0 30px;
+        box-sizing: border-box;
+        margin-top: 20px;
+        border-radius: 24px;
+        width: 100%;
+
+        .list_item {
+          padding: 38px 0;
+          box-sizing: border-box;
+          display: flex;
+          align-items: center;
+          justify-content: space-between;
+          border-bottom: 1px solid #f2f2f2;
+
+          span {
+            font-size: 28px;
+          }
+
+          button {
+            height: 60px;
+            line-height: 60px;
+            margin: 0;
+          }
+        }
+      }
+    }
+  }
+}
+
+// 缴费说明
+.payInstruct_wrap {
+  width: 300px;
+  margin: 0 auto;
+  display: flex;
+  flex-direction: column;
+  background: #fff;
+  border-radius: 20px;
+
+  .scroll {
+    height: 600px;
+    display: flex;
+    flex-direction: column;
+    padding: 20px;
+    box-sizing: border-box;
+
+    .payInstruct_title {
+      font-size: 30px;
+      text-align: center;
+      padding: 20px 0;
+      box-sizing: border-box;
+      border-bottom: 1px solid #f2f2f2;
+    }
+
+    .payInstruct_con {
+      display: flex;
+      width: 100%;
+      padding: 20px 10px;
+      box-sizing: border-box;
+
+      span {
+        font-size: 28px;
+        color: #999;
+      }
+    }
+  }
+}
+
+// 车牌号 & 虚拟键盘
+.input-box {
+  width: 100%;
+  height: 70px;
+  margin: auto;
+  background: rgba(255, 255, 255, 1);
+  box-shadow: 0px 6px 8px 0px rgba(96, 100, 112, 0.1);
+  border-radius: 0.4rem;
+  margin: 1rem auto;
+  display: flex;
+  justify-content: center;
+
+  .li {
+    flex: 1;
+    border: 1px solid rgba(206, 208, 210, 1);
+    box-sizing: border-box;
+    margin: 0 2px;
+    font-size: 30px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: #323233;
+
+    img {
+      width: 80%;
+      height: 100%;
+    }
+
+    &.active {
+      border-color: #3e67ff;
+    }
+
+    &:nth-child(2) {
+      margin-right: 26px;
+    }
+  }
+}
+
+.class-van-button-small {
+  min-width: 0;
+  border-radius: 10px;
+  margin: 10px 3px;
+  box-shadow: 10px 10px 10px #aaa;
+}
+
+.class-plate-box {
+  width: 100%;
+  padding: 24px 0;
+  box-sizing: border-box;
+  position: relative;
+}
+
+.plate_number {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+
+  .plate_number_wrap {
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    background: #eaf1f9;
+    padding: 0 0 10px;
+    box-sizing: border-box;
+
+    .close-box {
+      width: 100%;
+      font-size: 24px;
+      color: #3e67ff;
+      text-align: right;
+      margin-right: 1.25rem;
+
+      div {
+        padding: 10px;
+      }
+    }
+
+    .plate_chinese_box {
+      width: 100%;
+      display: flex;
+      flex-wrap: wrap;
+      justify-content: center;
+
+      button {
+        width: 9%;
+        height: 2.5rem;
+        line-height: 2.5rem;
+        text-align: center;
+        padding: 0;
+        font-size: 28px;
+        .class-van-button-small;
+      }
+    }
+  }
+}
+
+.allBoard {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+
+  .allBoard_wrap {
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    background: #eaf1f9;
+    padding: 0 0 10px;
+    box-sizing: border-box;
+  }
+
+  .close-box {
+    padding-top: 22px;
+    box-sizing: border-box;
+    font-size: 24px;
+    color: #3e67ff;
+    text-align: right;
+    margin-right: 1.25rem;
+  }
+
+  .plate_number_box {
+    width: 100%;
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+
+    button {
+      width: 9%;
+      height: 2.5rem;
+      line-height: 2.5rem;
+      text-align: center;
+      padding: 0;
+      font-size: 28px;
+      .class-van-button-small;
+    }
+  }
+}
+
+.vehicleMgt-list {
+  display: flex;
+  flex-direction: column;
+  margin-bottom: 35px;
+
+  .vehicleMgt-title {
+    display: flex;
+    padding: 30px;
+    box-sizing: border-box;
+    border-bottom: 1px solid #f2f2f2;
+
+    span {
+      font-size: 28px;
+    }
+  }
+
+  .vehicleMgt-content {
+    display: flex;
+    flex-direction: column;
+    background: #fff;
+
+    .item {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      padding: 15px 36px;
+      box-sizing: border-box;
+      border-bottom: 1px solid #f2f2f2;
+
+      span {
+        font-size: 28px;
+      }
+    }
+  }
+}
+
+.delBtn {
+  color: #c69c6d;
+  height: 38px;
+  line-height: 38px;
+  font-size: 20px;
+  width: 124px;
+  border: 1px solid #c69c6d;
+  border-radius: 19px;
+  text-align: center;
+}
+
+.payThe {
+  width: 100%;
+
+  .pay_index {
+    text-align: center;
+    padding: 20px 0;
+    font-size: 20px;
+    margin-bottom: 5px;
+    background-color: #fff;
+    font-weight: 600;
+  }
+
+  .pay_title {
+    display: flex;
+    justify-content: space-between;
+    background-color: #fff;
+    border-bottom: 1px solid #eee;
+    padding: 15px 30px;
+
+    .title {
+      font-size: 16px;
+    }
+
+    .dk_desc {
+      font-size: 12px;
+      color: #999;
+      margin-top: 3px;
+    }
+
+    .value {
+      font-size: 14px;
+      color: #999;
+    }
+  }
+
+  .payjf {
+    font-size: 12px;
+    color: #999;
+    margin-right: 18px;
+    margin-top: 12px;
+  }
+
+  .paySelect {
+    color: rgba(16, 16, 16, 100);
+    font-size: 20px;
+    font-family: Arial;
+    border: 1px solid rgba(187, 187, 187, 100);
+    border-radius: 10px;
+    margin-left: 80px;
+    width: 260px;
+    height: 80px;
+  }
+
+  .paySelect1 {
+    color: rgba(16, 16, 16, 100);
+    font-size: 20px;
+    font-family: Arial;
+    border: 1px solid rgba(187, 187, 187, 100);
+    width: 200px;
+    height: 50px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    background-color: #f2f2f2;
+    margin-top: 5px;
+
+    .pay-se-l {
+      height: 50px;
+      width: 50px;
+      line-height: 50px;
+      text-align: center;
+      font-size: 50px;
+      background-color: #fff;
+    }
+  }
+
+  .payjfzk {
+    font-size: 20px;
+    color: #8b8c8b;
+    margin-top: 10px;
+    margin-left: 210px;
+  }
+
+  .pay_time {
+    font-size: 28px;
+    margin-left: 180px;
+    padding-bottom: 40px;
+  }
+
+  .pay_time1 {
+    margin-top: 26px;
+  }
+}
+
+.pay_jiaof {
+  width: 80%;
+  height: 70px;
+  line-height: 70px;
+  background-color: #c69c6d;
+  text-align: center;
+  color: rgba(255, 255, 255, 100);
+  font-size: 28px;
+  font-family: Microsoft Yahei;
+  border-radius: 10px;
+  margin: 20px auto;
+}
+
+// 停车券弹窗
+.ticketPopup {
+  display: flex;
+  flex-direction: column;
+  background: #fff;
+  border-radius: 20px 20px 0 0;
+  z-index: 999;
+
+  .popup-title {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    padding: 30px 42px;
+    box-sizing: border-box;
+    border-bottom: 1px solid #f2f2f2;
+    position: relative;
+
+    span {
+      color: #999;
+      font-size: 28px;
+    }
+
+    .useRule-text {
+      position: absolute;
+      right: 42px;
+      color: rgb(58, 130, 248);
+    }
+  }
+
+  .popup_scroll {
+    height: 70vh;
+    background: #f2f2f2;
+  }
+
+  .popup_content {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    padding: 10px 20px;
+    box-sizing: border-box;
+
+    .item {
+      display: flex;
+      margin-bottom: 16px;
+
+      .item-image {
+        border: 2px solid #f2f2f2;
+        border-right: 2px dashed #f2f2f2;
+        padding: 16px;
+        border-radius: 16px 0 0 16px;
+        box-sizing: border-box;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        background: #fff;
+
+        &.cro {
+          position: relative;
+        }
+
+        .img {
+          width: 130px;
+          height: 130px;
+          border-radius: 8px;
+
+          img {
+            width: 100%;
+            height: 100%;
+          }
+        }
+      }
+
+      .item-content {
+        flex: 1;
+        border: 2px solid #f2f2f2;
+        border-radius: 0 8px 8px 0;
+        padding: 16px;
+        box-sizing: border-box;
+        background: #fff;
+        display: flex;
+        position: relative;
+
+        &.cro_ {
+          position: relative;
+        }
+
+        .content {
+          display: flex;
+          flex-direction: column;
+          justify-content: center;
+          flex: 1;
+
+          .h3 {
+            font-size: 28px;
+            line-height: 48px;
+            font-weight: 600;
+          }
+
+          .h3.color_disabled {
+            color: #838181;
+            font-weight: 400;
+          }
+
+          .span {
+            font-size: 24px;
+            color: #838181;
+            line-height: 40px;
+          }
+        }
+
+        .erwm_box {
+          display: flex;
+          flex-direction: column;
+          align-items: flex-end;
+          justify-content: space-between;
+
+          img {
+            width: 52px;
+            height: 52px;
+          }
+
+          .tag {
+            position: absolute;
+            bottom: 0;
+            right: 0;
+            border-radius: 16px;
+            padding: 5px 10px;
+            box-sizing: border-box;
+            background: #f7931e;
+            text-align: center;
+            color: #fff;
+            width: 122px;
+            font-size: 24px;
+          }
+        }
+      }
+    }
+  }
+
+  // 对勾
+  .dot {
+    position: absolute;
+    top: 0;
+    right: 0;
+    width: 2.25rem;
+    height: 2.375rem;
+  }
+}
+
+// 弹窗按钮
+.popup_button {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 10px 20px;
+  box-sizing: border-box;
+
+  .desc .num {
+    color: #c69c6d;
+    font-size: 18px;
+  }
+
+  .ok_btn {
+    height: 110px;
+    line-height: 110px;
+    text-align: center;
+    background: #c69c6d;
+    color: #fff !important;
+    width: 120px;
+    height: 40px;
+    line-height: 40px;
+    border-radius: 40px;
+  }
+}
+</style>

src/pages/parkingFee/static/images/coupon-bg.svg

@@ -0,0 +1,4 @@
+<svg width="690" height="197" viewBox="0 0 690 197" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M196 0C196 5.52285 191.523 10 186 10C180.477 10 176 5.52285 176 0H4C1.79086 0 0 1.79086 0 4V193C0 195.209 1.79085 197 3.99999 197H176C176 191.477 180.477 187 186 187C191.523 187 196 191.477 196 197H686C688.209 197 690 195.209 690 193V4C690 1.79086 688.209 0 686 0H196Z" fill="#FAFBFF"/>
+<path d="M185.5 10.5V187.5" stroke="#D8DAE0" stroke-linecap="square" stroke-dasharray="8"/>
+</svg>

src/store/index.js

@@ -218,8 +218,12 @@ const store = new Vuex.Store({
           const groupIdAndMallId = getGroupIdAndMallIdByLsbId(lbsId);
           groupId = groupIdAndMallId.groupId;
           mallId = groupIdAndMallId.mallId;
+          // console.log('lbsId', groupIdAndMallId)
+          commit('SET_LBS_ID',mallId);
+        } else {
+          commit('SET_LBS_ID',lbsId);
         }
-        commit('SET_LBS_ID',lbsId);
+        
         commit('SET_CUST_TYPE_ID',custTypeId);
         // 如果为 false，则表示当前用户是从小程序端未登录进入的
         if ( !isLogin ) {

src/store/order.js

@@ -2,7 +2,7 @@ import { checkOut, calculateDiscount, ordersAndPrepay, currentUnlicensedPlate, u
 
 // import checkOutQHResponse from '@/api/mockData/checkout.qh3.response.json'
 // import checkOutQHResponse from '@/api/mockData/checkout.hz.response.json';
-import checkOutQHResponse from '@/api/mockData/checkout.qh6.response.json'
+import checkOutQHResponse from '@/api/mockData/checkout.qh7.response.json'
 // import unlicensedCarCheckInResponse from '@/api/mockData/unlicensedCarCheckIn.qh.response.json';
 
 /* 

src/styles/common.less

@@ -59,3 +59,14 @@ button{
 .dialog-content-text {
     font-size: 30px;
 }
+
+
+/*颜色列表：红色*/
+:root{
+  --k-color-red-01: #F24439; /* 对应色值表第一行 */
+  --k-color-red-02: #F56961; /* 对应色值表第二行 */
+  --k-color-red-03: #F78F88; /* 对应色值表第三行 */
+  --k-color-red-04: #FAB4B0; /* 对应色值表第四行 */
+  --k-color-red-05: #FCDAD7; /* 对应色值表第五行 */
+  --k-color-red-06: #FEECEB; /* 对应色值表第六行 */  
+}

src/utils/index.js

@@ -170,12 +170,12 @@ export function initEnv() {
   const href = window.location.href;
   console.log('当前页面的url地址  ',href);
   if ( /dev-|8080/.test(href) ) {
-    /*window.env = 'qa';
-     window.profileApi = 'https://qa-apim.kerryplus.com/c/api';
-     window.api = 'qaApi';*/
-    window.env = 'dev';
+    window.env = 'qa';
+    window.profileApi = 'https://qa-apim.kerryplus.com/c/api';
+    window.api = 'qaApi';
+    /*window.env = 'dev';
     window.profileApi = 'https://dev-gateway-kip.kerryonvip.com/api';
-    window.api = 'devApi';
+    window.api = 'devApi';*/
     // window.env = 'prod';
     // window.profileApi = 'https://sl-apim.kerryplus.com/c/api';
     // window.api = 'api';