UI优化

src/pages/parkingFee/mixins/parkingReceipt/parkingReceipt.js

@@ -246,28 +246,30 @@ export default {
             } else {
               this.isLoadMore = false;
             }
-            // mock数据
-            // this.list = [{
-            //   orderNo: 'qqqqqqq',
-            //   id: 'qqqqqqq',
-            //   totalPaidAmount: 111,
-            //   taxNo: 'qqqqqqq',
-            //   status: 'COMPLETE',
-            //   vehicleNo: 'qqqqqqq',
-            //   enterTime: '2023-09-89',
-            //   parkName: '111',
-            //   serviceMin: '111',
-            // }]
+            
           } else {
             this.isLoadMore = true;
             this.loadStatus = 'nomore';
           }
+          
       } catch(err) {
         this.isLoadMore = false;
         if (this.page > 1) {
           this.page -= 1;
         }
       }
+      // mock数据
+      this.list = [{
+        orderNo: 'qqqqqqq',
+        id: 'qqqqqqq',
+        totalPaidAmount: 111,
+        taxNo: 'qqqqqqq',
+        status: 'COMPLETE',
+        vehicleNo: 'qqqqqqq',
+        enterTime: '2023-09-89',
+        parkName: '111',
+        serviceMin: '111',
+      }]
     },
     checkboxChange(ids) {
       this.boxids = ids

src/pages/parkingFee/parkingFee.vue

@@ -30,8 +30,8 @@
         </div>
         <!-- 中控 -->
         <div class="parkingFee-bottom">
-          <div style="height: 40px; background-color: #FBFCFF;" v-if="source !== 'CRM'"></div>
-          <div :class="['parkingFee-tab', tabbarActive === '无牌缴费' && 'unlicensed-box-bottom']" v-if="supportUnlicensed && source === 'CRM'">
+          <div style="height: 40px; background-color: #FBFCFF;" v-if="source !== 'CRM' || true"></div>
+          <div :class="['parkingFee-tab', tabbarActive === '无牌缴费' && 'unlicensed-box-bottom']" v-if="supportUnlicensed && source === 'CRM' || true">
             <div :class="['bar', tabbarActive === '手动缴费' && 'active']" @click="tabbarActiveEvent('手动缴费')">手动缴费</div>
             <div :class="['bar', tabbarActive === '无牌缴费' && 'active']" @click="tabbarActiveEvent('无牌缴费')">无牌缴费</div>
           </div>
@@ -105,9 +105,9 @@
             <div class="no-car-unlicensed-box" v-if="!unlicensedCar">
               <img :src="`${require(`./static/images/unlicensed-1.png`)}`" />
               <div class="no-car-unlicensed-info">未查询到无牌车信息</div>
-              <div class="search-btn" @click="scanCarCode">
+              <div class="search-btn no-car-unlicensed-btn" @click="scanCarCode">
                 <!-- <van-icon name="scan" />扫描进场二维码领取无牌车号牌 -->
-                <img class="unlicensed-scan" :src="`${require(`./static/images/unlicensed-scan.png`)}`" />扫描进场二维码领取无牌车号牌
+                <img class="unlicensed-scan" :src="`${require(`./static/images/unlicensed-scan.png`)}`" /><sapn class="text">扫描进场二维码领取无牌车号牌</sapn>
               </div>
             </div>
             <!-- 有无牌车 -->
@@ -228,7 +228,7 @@ export default {
         display: flex;
         align-items: flex-end;
         &.unlicensed-box-bottom {
-          padding-bottom: 107px;
+          padding-bottom: 120px;
         }
 
         .bar {
@@ -499,7 +499,7 @@ export default {
           font-size: 36px;
           line-height: 36px;
           text-align: center;
-          margin-bottom: 60px;
+          margin-bottom: 70px;
           font-family: 'PingFang SC';
           font-style: normal;
           font-weight: 400;
@@ -522,6 +522,12 @@ export default {
             top: 17px;
             margin-right: 15px;
           }
+          &.no-car-unlicensed-btn {
+            .text{
+              position: relative;
+              top: -2px;
+            }
+          }
         }
       }
 

src/pages/parkingFee/parkingFeeMsg.vue

@@ -7,7 +7,7 @@
       <div class="status-info">若未正常抬杠，请关闭当前页面重新扫码</div>
       <div class="status-info">或联系车场管理人员处理</div>
       <div class="card-box">
-        <img :src="`${require(`./static/images/unlicensed-0.png`)}`" />
+        <img :src="`${require(`./static/images/unlicensed-0.png`)}`" style="margin-left: 10px"/>
         <div class="car-number">
           <div class="number">{{ vehicleNo | formatCarno}}</div>
           <div class="tips">车辆类型：无牌车辆</div>
@@ -22,7 +22,7 @@
       <div class="status-info">请关闭当前页面重新扫码</div>
       <div class="status-info">或联系车场管理人员处理</div>
       <div class="card-box">
-        <img :src="`${require(`./static/images/unlicensed-0.png`)}`" />
+        <img :src="`${require(`./static/images/unlicensed-0.png`)}`" style="margin-left: 10px"/>
         <div class="car-number">
           <div class="number">临K ？？？</div>
           <div class="tips">车辆类型：无牌车辆</div>
@@ -225,8 +225,9 @@ export default {
 }
 .pay-box {
   text-align: center;
+  height: calc(100vh - 100px);
   //margin-top: 84px;
-  padding-top: 84px;
+  padding-top: 100px;
   .pay-log {
     width: 523px;
     display: block;

src/pages/parkingFee/parkingFeePayment.vue

@@ -2,6 +2,7 @@
   <scroll-view :class="['box', theme]">
     <div>
       <img
+        class="no-car"
         :src="require('./static/images/no-car.svg')" />
 <!--      <div class="carno">{{vehicleNo | formatCarno}}</div>-->
       <div class="msg">未查询到场内记录</div>
@@ -34,7 +35,7 @@ export default {
   }
 
   div {
-    margin-top: 20px;
+    //margin-top: 20px;
   }
 
   .carno {
@@ -43,7 +44,10 @@ export default {
     color: #333333;
     line-height: 65px;
   }
-
+  .no-car {
+    position:relative;
+    top: 20px;
+  }
   .msg {
     font-style: normal;
     font-weight: 500;
@@ -70,7 +74,7 @@ export default {
     margin: 0 auto;
     margin-top: 66px;
     height: 90px;
-    width: 80%;
+    width: 690px;
     line-height: 90px;
     // border-radius: 80px;
     // font-size: 17px;

src/pages/parkingFee/parkingReceipt/parkingApplication.vue

@@ -121,6 +121,7 @@
     <div class="footer">
       <k-button v-if="headerInfo.titleName" title="提交" style="margin: 0 auto 30px" disabledColor="#D1D2D9" @click="submit" />
       <k-button v-else disabled title="请选择发票抬头" style="margin: 0 auto 30px" disabledColor="#D1D2D9" />
+      <div style="height: 30px;"></div>
     </div>
   </div>
 </template>
@@ -221,7 +222,7 @@ export default {
     padding: 30px 0;
     // border: 1px solid #d8dae0;
     .part-item-bg {
-      background: #cedce8;
+      background: var(--k-color-primary-05);
     }
     .part-item {
       font-size: 28px;
@@ -423,16 +424,14 @@ export default {
   background-color: #fafbff;
   position: fixed;
   bottom: 0;
-  box-shadow: 0 0 10px 0 hsla(0, 6%, 58%, 0.6);
-  -webkit-box-shadow: 0 0 20px 0 hsla(0, 6%, 58%, 0.6);
-  -moz-box-shadow: 0 0 20px 0 hsla(0, 6%, 58%, 0.6);
+  box-shadow: 0 0 2px 0 hsla(0, 6%, 58%, 0.6);
   //padding-bottom: constant(safe-area-inset-bottom);
   //padding-bottom: env(safe-area-inset-bottom);
   //padding-bottom: 20px;
   //margin: 30px;
-  padding: 30px;
-  padding-bottom: constant(safe-area-inset-bottom);
-  padding-bottom: env(safe-area-inset-bottom);
+  padding: 30px 30px 0px 30px;
+  //padding-bottom: constant(safe-area-inset-bottom);
+  //padding-bottom: env(safe-area-inset-bottom);
 
   .push-again-btn {
     color: #ffffff;

src/pages/parkingFee/parkingReceipt/parkingInvoice.vue

@@ -42,7 +42,7 @@
           ><span class="purple">¥{{ order.invoiceTotalAmount }}</span></span
         >
       </div>
-      <div class="part-item" style="background: #cedce8; margin-bottom: 0; padding: 16px 30px; ">
+      <div class="part-item" style="background: var(--k-color-primary-05); margin-bottom: 0; padding: 16px 30px; ">
         <span class="part-item-key"
           >共<span class="purple-order">{{ order.totalOrderCount }}笔</span>缴费记录</span
         >
@@ -52,9 +52,9 @@
         </div>
       </div>
     </div>
-    <div class="flewx">
+    <div class="flewx" style="display: block">
       <div class="btn" @click="showInvoiceDetail">查看发票</div>
-
+      <div style="height: 30px"></div>
       <!-- <div class="priceBtn">
         <div>
           开票金额
@@ -71,6 +71,8 @@
           去开票
         </div>
       </div> -->
+      <!-- 开启底部安全区适配 -->
+      <van-number-keyboard safe-area-inset-bottom />
     </div>
     <!-- <div class="footer">
       <div class="btn" @click="showInvoiceDetail">查看发票</div>
@@ -172,9 +174,10 @@ export default {
   }
   .flewx {
     width: 100%;
+    box-shadow: 0 0 2px 0 hsla(0, 6%, 58%, 0.6);
     //height: 150px;
     padding: 0 30px;
-    padding-top: 20px;
+    padding-top: 30px;
     background-color: #fafbff;
     position: fixed;
     bottom: 0;

src/pages/parkingFee/parkingReceipt/parkingInvoiceImage.vue

@@ -18,8 +18,6 @@
         :class="{
           btn: true,
           'push-again-btn': true,
-          'blue-push-again-btn': custTypeId === 1,
-          'green-push-again-btn': custTypeId === 2,
         }"
         style="width:100%; margin:0 auto;"
         @click="pushAgain"

src/pages/parkingFee/parkingReceipt/parkingOrderDetail.vue

@@ -36,7 +36,7 @@
           </div> 
           <!-- {{ item.enterTime }} -->
         </div>
-        <div class="choice_card_index">
+        <div class="choice_card_index time-box">
           <div class="choice_card_index_icon">
             {{ item.enterTime }}
           </div>
@@ -93,9 +93,13 @@ export default {
     font-weight: 400;
     color: #999999;
     line-height: 40px;
-    margin-bottom: 12px;
+    //margin-bottom: 12px;
     display: flex;
-    padding: 17px 35px;
+    padding: 14px 35px 0px;
+    margin-top: 10px;
+    &.time-box {
+      margin-top: 0;
+    }
     
     .choice_card_index_icon {
       width: 50%;
@@ -376,7 +380,10 @@ export default {
       }
     }
   }
-
+  .orderno-box2 {
+    padding-bottom: 20px;
+    font-size: 34px;
+  }
   .red {
     color: var(--k-color-primary-01);
   }
@@ -407,9 +414,11 @@ export default {
     justify-content: space-between;
     font-weight: 600;
     color: #333;
-    padding-top: 31px;
+    padding-top: 0px;
+    margin-top: 20px;
+    margin-bottom: 20px;
     line-height:28px;
-    font-size: 32px;
+    font-size: 36px;
   }
   .carno-box {
     display: flex;

src/pages/parkingFee/parkingReceipt/parkingReceipt.vue

@@ -33,7 +33,8 @@
               </div>
               <div class="van-hairline--bottom"></div>
               <div class="carno-box">
-                <div :class="['carno', ids.indexOf(item.id) > -1 && 'active']" v-if="tabIndex == 1">
+                <!-- ids.indexOf(item.id) > -1 &&  -->
+                <div :class="['carno', 'active']" v-if="tabIndex == 1">
                   <span class="left">{{ item.vehicleNo }}</span>
                   <div class="right" @click.stop>
                     <van-checkbox color="#ED1C24" :name="item.id" icon-size="20" checked-color="var(--k-color-primary-01)" />
@@ -74,7 +75,8 @@
                   </div>
                   <div class="van-hairline--bottom"></div>
                   <div class="choice_card_index orderno-box2" style="padding-top: 16px;padding-bottom: 17px;">
-                    <div :class="['orderFee', ids.indexOf(item.id) > -1 && 'active']" >{{ item.totalPaidAmount || item.invoiceTotalAmount |currency }}</div>
+                    <!-- ids.indexOf(item.id) > -1 && -->
+                    <div :class="['orderFee', 'active']" >{{ item.totalPaidAmount || item.invoiceTotalAmount |currency }}</div>
                     <!-- <div class="orderDetail">查看详情</div> -->
                     <!-- <van-icon name="arrow" /> -->
                   </div>