feat（KIP-9217）：开票UI 优化

public/index.html

@@ -33,17 +33,17 @@
   <script>
     // const debug = window.localStorage.getItem('H5_DEBUG');
     // 开发环境和qa环境 打开debug
-    // const debug = /dev-|qa-/.test(window?.injectConfig?.api) || window.location.href.indexOf(8080) > -1;
-    // if (debug) {
-    //   const script = document.createElement('script');
-    //   script.src = 'https://unpkg.com/vconsole@latest/dist/vconsole.min.js';
-    //   document.head.appendChild(script);
-    //   script.addEventListener('load', () => {
-    //     setTimeout(() => {
-    //       window.vConsole = new window.VConsole();
-    //     }, 200);
-    //   });
-    // }
+    const debug = /dev-|qa-/.test(window?.injectConfig?.api) || window.location.href.indexOf(8080) > -1;
+    if (debug) {
+      const script = document.createElement('script');
+      script.src = 'https://unpkg.com/vconsole@latest/dist/vconsole.min.js';
+      document.head.appendChild(script);
+      script.addEventListener('load', () => {
+        setTimeout(() => {
+          window.vConsole = new window.VConsole();
+        }, 200);
+      });
+    }
     if ( /(iPhone|iPad|iPod|iOS)/i.test(navigator.userAgent) ) {
       // https://developers.weixin.qq.com/community/develop/doc/000ae2cb950808f90d8bc415551800
       window.H5_LAUNCH_URL = location.href;

src/pages/parkingFee/parkingReceipt/parkingApplication.vue

@@ -11,7 +11,7 @@
               </div>
               <img class="invoice-header-arrow" :src="arrowIcon" mode="widthFix" />
             </div>
-            <div v-if="headerInfo.invoiceTitleType == 'COMPANY'" class="duty-paragraph">税号：{{ headerInfo.taxNo }}</div>
+            <div v-if="headerInfo.invoiceTitleType == 'COMPANY'" class="duty-paragraph">公司税号 <span>{{ headerInfo.taxNo }}</span></div>
           </div>
           <div class="invoice-header-info" v-else>
             <div class="invoice-header-name">
@@ -158,40 +158,45 @@ export default {
     display: flex;
     align-items: center;
     justify-content: space-between;
-    // padding: 20px 30px;
-    padding: 32px 0;
+    padding: 20px 30px;
+    padding: 10px 0;
     font-size: 28px;
     background: #fafbff;
     // border: 1px solid #d8dae0;
     margin-bottom: 24px;
     border-radius: 4px;
-
+    
     .invoice-header-info {
       flex: 1;
 
       .invoice-header-name {
         color: #333333;
+        padding: 20px 35px;
+        border-bottom: 1px dashed #E1E2E8 !important;
         display: flex;
         justify-content: space-between;
         align-items: center;
-        padding: 0 30px;
-        padding-bottom: 32px;
-        border-bottom: 1px dashed #d8dae0;
 
         .isDefault {
-          color: #8cc63f;
-          border: 1px dashed #8cc63f;
-          margin-left: 30px;
-          border-radius: 20px;
-          display: inline-block;
-          padding: 0 21px;
+          color: #fff;
+          margin-left: 16px;
+          background: var(--k-color-primary-01);;
+          border-radius: 4px;
+          padding: 4px 8px;
+          font-family: 'PingFang SC';
+          font-style: normal;
+          font-weight: 400;
+          font-size: 22px;
         }
       }
 
       .duty-paragraph {
         color: #999;
-        margin-top: 32px;
-        padding: 0 30px;
+        // margin-top: 32px;
+        padding: 20px 35px;
+        display: flex;
+        justify-content: space-between;
+   
       }
     }
   }
@@ -250,6 +255,7 @@ export default {
     .tab-title {
       color: #676767;
       padding-top: 30px;
+      padding-left: 35px;
     }
 
     .show-more {
@@ -350,7 +356,7 @@ export default {
   }
 
   .header-name {
-    padding: 0 !important;
+    // padding: 0 !important;
     border: unset !important;
   }
 }

src/pages/parkingFee/parkingReceipt/parkingChooseHeader.vue

@@ -41,8 +41,8 @@
                     </div>
                   </div>
                   <div class="duty-paragraph" >
-                    <span v-if="item.invoiceTitleType === 'COMPANY'">
-                      公司税号 {{ item.taxNo }}
+                    <span class="duty-paragraph-span"  v-if="item.invoiceTitleType === 'COMPANY'">
+                      公司税号 <span>{{ item.taxNo }}</span>
                     </span>
                     
                   </div>
@@ -143,6 +143,11 @@ export default {
             height:40px;
             color: #6f6f70;
             padding: 20px 0;
+            
+            .duty-paragraph-span {
+              display: flex;
+              justify-content: space-between;
+            }
           }
         }
 

src/pages/parkingFee/parkingReceipt/parkingReceipt.vue

@@ -19,11 +19,16 @@
               <div class="orderNum"  v-if="tabIndex == 1">{{ item.orderNo }}</div>
               <div class="orderNum"  v-else>
                 <span>税号: {{ item.taxNo }}</span> 
+                <!-- 失败重试  -->
+                <div class="failureReason" v-if="item.status === 'FAILED'">
+                  <span @click.stop="showFailureReason(item.errorMessage)"><van-icon name="info" /> 失败原因</span>
+                </div>
                 <div class="right">
                   <div class="choice_card_status">
                     {{ statusObj[item.status || 'FAILED'].name }}
                   </div>
-                  <div v-if="/FAILED|3/.test(item.status)" class="try-again" @click="tryGoToInvoicing(item)">重新开票</div>
+                  
+                  <!-- <div v-if="/FAILED|3/.test(item.status)" class="try-again" @click="tryGoToInvoicing(item)">重新开票</div> -->
                 </div>
               </div>
               <div class="van-hairline--bottom"></div>
@@ -98,8 +103,10 @@
                   </div>
                   <div class="van-hairline--bottom"></div>
                   <div class="choice_card_index orderno-box2">
-                    <div :class="orderFee2" >¥{{ item.totalPaidAmount || item.invoiceTotalAmount }}</div>
+                    <div class="orderFee2" >¥{{ item.totalPaidAmount || item.invoiceTotalAmount }}</div>
                     <div class="orderDetail">查看详情</div>
+                    <!-- v-if="/FAILED|3/.test(item.status)"  -->
+                    <div class="try-again" @click="tryGoToInvoicing(item)">重新开票</div>
                     <!-- <van-icon name="arrow" /> -->
                   </div>
                   <!-- <div class="choice_card_index mb0">
@@ -111,10 +118,7 @@
                 <!-- 0：已提交申请(待开票) 1:开票中  2：开票完成 3：开票失败 -->
                 
               </div>
-              <!-- 失败重试 -->
-              <div class="failureReason" v-if="item.status === 'FAILED'">
-                <span @click.stop="showFailureReason(item.errorMessage)"><van-icon name="info" /> 失败原因</span>
-              </div>
+              
             </div>
           </label>
         </van-checkbox-group>
@@ -124,7 +128,7 @@
     <div v-show="isLoadMore" :class="{ noData: !list.length }">
       <img :src="noData" v-if="!list.length" mode="widthFix" />
       <span v-if="!list.length">暂无数据</span>
-      <div v-else class="no-more-data page-no-more">
+      <div v-else class="no-more-data">
         没有更多啦
         </div>
     </div>
@@ -332,11 +336,13 @@ export default {
         }
       }
       .failureReason {
-        margin-top: 10px;
         text-align: right;
         font-weight: normal;
         font-size: 25px;
         color: #bbb;
+        align-self: center;
+        border: 1px solid #999999;
+        border-radius: 2px;
       }
       .my-invoiced-list {
         align-items: flex-end;
@@ -368,10 +374,11 @@ export default {
       }
       .try-again {
         margin-left: 10px;
-        color: #e89e42;
-        border: 1px solid #e89e42;
-        border-radius: 10px;
-        padding: 10px;
+        background: var(--k-color-primary-01);
+        border: 1px solid var(--k-color-primary-01);
+        border-radius: 32.5px;
+        padding: 11px 33px;
+        color:#fff;
       }
       .choice_card_index1 {
         display: flex;
@@ -466,7 +473,7 @@ export default {
         .status-box {
           font-size: 30px;
           font-weight: 400;
-          color: #064c8a;
+          color: var(--k-color-primary-01);
           line-height: 42px;
           &.other {
             color: #999999;
@@ -486,6 +493,7 @@ export default {
         justify-content: space-between;
         font-weight: 600;
         color: #333;
+        margin-bottom: 0;
       }
       .orderFee {
         font-family: 'PingFang SC';
@@ -515,13 +523,10 @@ export default {
           color: #333333;
         }
       .orderDetail {
+        margin-left: 176px;
+        border-radius: 4.333vw;
+        padding: 11px 33px;
         border: 1px solid #333333;
-        border-radius: 32.5px;
-        padding: 5px 33px;
-        font-family: 'PingFang SC';
-        font-style: normal;
-        font-weight: 400;
-        font-size: 28px;
       }
     }
   }
@@ -627,12 +632,12 @@ export default {
     display: block;
   }
 }
-.page-no-more {
+.no-more-data {
   width: 100%;
   position: relative;
   text-align: center;
   box-sizing: border-box;
-  margin-top: 40px;
+  margin-top: 70px;
   font-size: 22px;
   font-weight: 400;
   color: #999999;

src/utils/index.js

@@ -173,12 +173,12 @@ export function initEnv() {
   const href = window.location.href;
   console.log('当前页面的url地址  ',href);
   if ( /dev-|8080/.test(href) ) {
-    /*window.env = 'qa';
+    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 = 'qaApi';
+    // window.env = 'dev';
+    // window.profileApi = 'https://dev-gateway-kip.kerryonvip.com/api';
+    // window.api = 'devApi';
     // window.env = 'prod';
     // window.profileApi = 'https://sl-apim.kerryplus.com/c/api';
     // window.api = 'api';
@@ -204,7 +204,7 @@ export function initEnv() {
 export function requestInit() {
   let baseURL = window.profileApi + '/temporary-parking/v1';
   if (window.location.href.indexOf('parking.') < 0) {
-    baseURL = '/msApi';
+    // baseURL = '/msApi';
   }
   window.requestms = createAxiosByinterceptors({
     // baseURL: `https://dev-kip-service-internal.kerryonvip.com/`,