Merge branch 'release-2.8.0' into John/release-2.8.0/KIP-9697

src/main.js

@@ -28,8 +28,10 @@ import {
   Switch,
   Skeleton,
   Dialog,
-  NumberKeyboard
+  NumberKeyboard,
+  Divider
 } from 'vant';
+
 import router from './routes/index.js'; // 注册页面路由
 import wx from '@/utils/js_sdk/weixin'; // 接入微信JSDK
 import '@/utils/filters'; // 注册 vue 过滤器
@@ -64,7 +66,7 @@ Vue.use(Icon)
   .use(Switch)
   .use(Dialog)
   .use(NumberKeyboard)
-
+  .use(Divider);
   
 
 Vue.config.ignoredElements = ['wx-open-launch-weapp'];

src/pages/parkingFee/components/purple/parkingFeeHint2/parkingFeeHint.vue

@@ -0,0 +1,68 @@
+<template>
+  <div class="box">
+    <img
+      :src="
+        custTypeId === 0
+          ? require('../../../static/images/rent.png')
+          : `${picUrl}parkingFee/rent-${colorAry[custTypeId - 1]}.png`
+      "
+      v-if="custTypeId >= 0"
+    />
+    <div>[月租车,可直接离场]</div>
+    <div
+      :class="{
+        searchPrice: true,
+        blueSearchPrice: custTypeId === 1,
+        greenSearchPrice: custTypeId === 2,
+      }"
+      @click="search"
+    >
+      重新查询
+    </div>
+  </div>
+</template>
+
+<script>
+import parkingFeeHintJs from '../../../mixins/parkingFeeHint/parkingFeeHint'
+export default {
+  mixins:[parkingFeeHintJs]
+}
+</script>
+
+<style lang="less" scoped>
+//@import '../../../styles/common.less';
+.box {
+  text-align: center;
+  img {
+    width: 200px;
+    height: 200px;
+    margin-top: 200px;
+  }
+  div {
+    margin-top: 20px;
+    font-weight: bold;
+  }
+  .searchPrice {
+    color: #fff !important;
+    margin: 0 auto;
+    margin-top: 40px;
+    height: 90px;
+    width: 80%;
+    line-height: 90px;
+    border-radius: 80px;
+    font-size: 17px;
+    background-image: linear-gradient(to right, #7e4fa1, #433c7f);
+  }
+  .blueSearchPrice {
+    .colorSearchPrice('blue');
+  }
+  .greenSearchPrice {
+    .colorSearchPrice('green');
+  }
+  .colorSearchPrice(@value) {
+    @color: 'color-@{value}';
+    background-image: none;
+    background-color: @@color;
+  }
+}
+</style>

src/pages/parkingFee/components/purple/parkingReceipt/parkingHeaderDetail.vue

@@ -1,17 +1,17 @@
 <template>
   <scroll-view class="scroll-Y" scroll-y>
-    <div class="part" v-if="header.invoiceTitleType === 0">
+    <div class="part" v-if="header.invoiceTitleType === 'COMPANY'">
       <div class="part-item">
         <span class="part-item-key">抬头类型</span>
         <div class="part-item-value">单位</div>
       </div>
       <div class="part-item">
         <span class="part-item-key">抬头名称</span>
-        <span class="part-item-value">{{ header.invoiceTitleName }}</span>
+        <span class="part-item-value">{{ header.titleName }}</span>
       </div>
       <div class="part-item">
         <span class="part-item-key">公司税号</span>
-        <span class="part-item-value">{{ header.corporationTax }}</span>
+        <span class="part-item-value">{{ header.taxNo }}</span>
       </div>
       <div class="part-item">
         <span class="part-item-key">公司地址</span>
@@ -27,7 +27,7 @@
       </div>
       <div class="part-item">
         <span class="part-item-key">开户账户</span>
-        <span class="part-item-value">{{ header.accountNumber }}</span>
+        <span class="part-item-value">{{ header.depositAccount }}</span>
       </div>
     </div>
     <div class="part" v-else>
@@ -37,7 +37,7 @@
       </div>
       <div class="part-item">
         <span class="part-item-key">抬头名称</span>
-        <span class="part-item-value">{{ header.invoiceTitleName }}</span>
+        <span class="part-item-value">{{ header.titleName }}</span>
       </div>
     </div>
   </scroll-view>

src/pages/parkingFee/components/purple/parkingReceipt/parkingInvoice.vue

@@ -1,10 +1,10 @@
 <template>
-  <scroll-view :class="['scroll-Y', theme]" scroll-y>
+  <scroll-view class="scroll-Y" scroll-y>
     <div class="part top">
       <div class="part-item lines header">
         <span class="part-item-key">抬头</span>
         <div class="part-item-value invoiceTitleName" @click="showHeader">
-          {{ order.invoiceTitleName || 'order' }}
+          {{ order.invoiceTitle.titleName  }}
           <van-icon name="arrow" size="10" color="#D8DAE0" />
         </div>
       </div>
@@ -152,7 +152,7 @@ export default {
       line-height: 42px;
     }
     .purple-order {
-      color: var(--k-color-primary-01);
+      color: #064c8a;
     }
   }
 
@@ -164,7 +164,7 @@ export default {
       // padding: 20px 0;
       height: 90px;
       line-height: 90px;
-      background:  var(--k-color-primary-01);
+      background: #064c8a;
       border-radius: 45px;
       font-size: 34px;
       font-weight: 400;

src/pages/parkingFee/components/purple/parkingReceipt/parkingInvoiceImage.vue

@@ -3,7 +3,7 @@
     <div class="part">
       <div class="part-item lines">
         <span class="part-item-key">电子邮箱</span>
-        <span class="part-item-value">{{ order.email }}</span>
+        <span class="part-item-value">{{ res.email }}</span>
       </div>
       <div class="invoice-img" v-if="order.invoiceUrl">
       </div>
@@ -16,7 +16,7 @@
           'blue-push-again-btn': custTypeId === 1,
           'green-push-again-btn': custTypeId === 2,
         }"
-        @click="pushAgain(order.invoiceUrl)"
+        @click="pushAgain"
       >
         再次推送
       </div>

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

@@ -129,7 +129,7 @@
       <div class="priceBtn">
         <div>
           开票金额
-          <span class="price">{{ totalNum.toFixed(2) }} 元</span>
+          <span class="price">{{ totalNum }} 元</span>
         </div>
         <div
           :class="{
@@ -182,7 +182,7 @@ export default {
     }
 
     .actived {
-      color: var(--k-color-primary-01);
+      color: #064c8a;
     }
   }
 
@@ -198,7 +198,7 @@ export default {
       width: 64px;
       height: 4px;
       border-radius: 2px;
-      background-color: var(--k-color-primary-01);
+      background-color: #064c8a;
     }
 
     .choice_select_ews {
@@ -299,7 +299,7 @@ export default {
           flex: 0 0 150px;
           font-size: 30px;
           font-weight: 400;
-          color:var(--k-color-primary-01);
+          color: #064c8a;
           line-height: 42px;
           text-align: right;
         }
@@ -412,7 +412,7 @@ export default {
       font-size: 28px;
       line-height: 70px;
       color: #fff;
-      background:var(--k-color-primary-01);
+      background: #064c8a;
       border-radius: 45px;
       font-size: 34px;
       font-weight: 400;

src/pages/parkingFee/components/purple/parkingReceipt2/parkingApplication.vue

@@ -0,0 +1,426 @@
+<template>
+  <div>
+    <div class="scroll-Y">
+      <div class="push-box">
+        <div class="choose-invoice-header lines" @click="changeHeader">
+          <div class="invoice-header-info" v-if="headerInfo.titleName">
+            <div class="invoice-header-name" :class="headerInfo.invoiceTitleType == 'COMPANY' ? 'header-name' : ''">
+              <div>
+                {{ headerInfo.titleName }}
+                <span class="isDefault" v-if="headerInfo.defaultOrNot">默认</span>
+              </div>
+              <img class="invoice-header-arrow" :src="arrowIcon" mode="widthFix" />
+            </div>
+            <div v-if="headerInfo.invoiceTitleType == 'COMPANY'" class="duty-paragraph">税号：{{ headerInfo.taxNo }}</div>
+          </div>
+          <div class="invoice-header-info" v-else>
+            <div class="invoice-header-name">
+              <div>请选择发票抬头</div>
+              <img class="invoice-header-arrow" :src="arrowIcon" mode="widthFix" />
+            </div>
+            <div class="duty-paragraph">未选择发票抬头</div>
+          </div>
+        </div>
+        <div class="tab-header" v-if="headerInfo.titleName">发票详情</div>
+        <div class="part" v-if="headerInfo.titleName">
+          <div class="invoice-header">
+            <div class="part-item">
+              <span class="part-item-key">发票类型</span>
+              <span class="part-item-value">增值税普通发票</span>
+            </div>
+            <div class="part-item">
+              <span class="part-item-key">抬头类型</span>
+              <span class="part-item-value">{{ headerInfo.invoiceTitleType === 'COMPANY' ? '单位' : '个人/非企业单位' }}</span>
+            </div>
+            <div class="part-item" :class="headerInfo.invoiceTitleType == 'COMPANY' ? 'header-name' : ''">
+              <span class="part-item-key">抬头名称</span>
+              <span class="part-item-value">{{ headerInfo.titleName }}</span>
+            </div>
+            <div class="part-item lines" v-if="headerInfo.invoiceTitleType === 'COMPANY'">
+              <span class="part-item-key">公司税号</span>
+              <span class="part-item-value">{{ headerInfo.taxNo }}</span>
+            </div>
+          </div>
+          <div class="invoice-more" v-if="headerInfo.invoiceTitleType === 'COMPANY'">
+            <div class="tab-title show-more" @click="changeShowMore">
+              <span class="c">更多信息</span>
+              <!--  :class="!isShowMore ? 'toBottom' : 'toRight'" -->
+              <div class="arrow-box">
+                <img :src="arrowIcon" mode="widthFix" />
+              </div>
+            </div>
+            <div class="is-show-more" v-if="isShow">
+              <div class="part-item">
+                <span class="part-item-key">公司地址</span>
+                <span class="part-item-value">{{ headerInfo.companyAddress }}</span>
+              </div>
+              <div class="part-item">
+                <span class="part-item-key">公司电话</span>
+                <span class="part-item-value">{{ headerInfo.companyTel }}</span>
+              </div>
+              <div class="part-item">
+                <span class="part-item-key">开户银行</span>
+                <span class="part-item-value">{{ headerInfo.depositBank }}</span>
+              </div>
+              <div class="part-item top">
+                <span class="part-item-key">开户账户</span>
+                <span class="part-item-value">{{ headerInfo.depositAccount }}</span>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="part middle">
+          <div class="part-item lines">
+            <span class="part-item-key">总金额</span>
+            <span class="part-item-value"
+              ><span class="purple">{{ invoiceAmount }} 元</span></span
+            >
+          </div>
+          <div class="part-item top" v-if="type == ''">
+            <span class="part-item-key"
+              >共<span class="purple">{{ orderQuantity }}笔</span>缴费记录</span
+            >
+            <div class="part-item-value" @click="gotoDetail">
+              <span>查看详情</span>
+              <img class="invoice-header-arrow" :src="arrowIcon" mode="widthFix" />
+            </div>
+          </div>
+        </div>
+        <div class="tab-header">接收方式</div>
+        <div class="part">
+          <div class="part-item lines">
+            <span class="part-item-key" style="min-width: 120px; white-space: nowrap">电子邮箱</span>
+            <div class="part-item-value">
+              <input class="van-field__control" style="white-space: nowrap" type="text" @blur="mailboxChange" placeholder="请输入电子邮箱" v-model="condition.email" />
+            </div>
+          </div>
+          <div class="part-item default-email" @click="changeDefaultEMail">
+            <van-checkbox v-model="condition.emailAsDefault" @change="emailAsDefaultChange" icon-size="30PX"><span class="text">保存电子邮箱为默认邮箱</span></van-checkbox>
+          </div>
+        </div>
+        <div class="tab-header">备注</div>
+        <div class="textarea-remark">
+          <textarea rows="3" placeholder-style="color:#999999" placeholder="选填" @blur="storeRemarkChange" v-model="condition.remark"></textarea>
+        </div>
+        <!-- 占位 -->
+        <div style="height: 75px; background-color: transparent; color: transparent; position: relative">占位</div>
+      </div>
+    </div>
+    <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>
+  </div>
+</template>
+
+<script>
+import parkingApplicationJs from '../../../mixins/parkingReceipt/parkingApplication';
+export default {
+  mixins: [parkingApplicationJs],
+};
+</script>
+
+<style lang="less" scoped>
+//@import '../../../styles/common.less';
+
+.scroll-Y {
+  width: 100%;
+  display: flex;
+  height: 100vh;
+  overflow-y: scroll;
+  flex-direction: column;
+  // height: 88vh;
+  background-color: #f4f7ff;
+  // padding: 30px 20px;
+  box-sizing: border-box;
+
+  .push-box {
+    padding: 30px 20px;
+    width: 750px;
+    box-sizing: border-box;
+    margin-bottom: 180px;
+  }
+
+  .choose-invoice-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    // padding: 20px 30px;
+    padding: 32px;
+    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;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        padding-bottom: 32px;
+        border-bottom: 1px solid #d8dae0;
+
+        .isDefault {
+          color: #8cc63f;
+          border: 1px solid #8cc63f;
+          margin-left: 30px;
+          border-radius: 20px;
+          display: inline-block;
+          padding: 0 21px;
+        }
+      }
+
+      .duty-paragraph {
+        color: #999;
+        margin-top: 32px;
+      }
+    }
+  }
+
+  .tab-header {
+    color: #808080;
+    padding: 10px 20px 20px;
+  }
+
+  .part {
+    // background-color: #ffffff;
+
+    background: #fafbff;
+    // padding-left: 30px;
+    margin-bottom: 20px;
+    border-radius: 4px;
+    padding: 30px;
+    border: 1px solid #d8dae0;
+
+    .part-item {
+      font-size: 28px;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      padding-bottom: 20px;
+
+      .part-item-key {
+        color: #333333;
+        min-width: 146px;
+      }
+
+      .part-item-value {
+        flex: 1;
+        color: #999;
+        text-align: right;
+        display: flex;
+        align-items: center;
+        .van-field__control {
+          text-align: right;
+        }
+      }
+    }
+
+    .is-show-more {
+      .part-item {
+        padding-top: 32px;
+      }
+    }
+
+    .tab-title {
+      color: #676767;
+      padding-top: 30px;
+    }
+
+    .show-more {
+      display: flex;
+      justify-content: space-between;
+      align-content: center;
+      // padding-right: 30px;
+
+      .arrow-box {
+        // transform: rotate(90deg);
+        // transition-duration:0.1s;
+        > img {
+          width: 30px;
+        }
+      }
+    }
+
+    .default-email {
+      justify-content: flex-start;
+      color: #999999;
+      margin-top: 20px;
+      // font-size: 28PX;
+      font-family: PingFangSC-Regular, PingFang SC;
+      font-weight: 400;
+      color: #999999;
+      padding-bottom: 0;
+      .text {
+        font-size: 28px;
+        font-weight: 400;
+        color: #999999;
+        line-height: 40px;
+      }
+      // line-height: 80PX;
+      // /deep/ .van-checkbox__icon {
+      //   font-size: 25PX;
+      // }
+      // /deep/ .van-checkbox__label {
+      //   line-height: 80PX;
+      // }
+    }
+  }
+
+  .top {
+    padding-top: 20px;
+    padding-bottom: 0 !important;
+  }
+
+  .middle {
+    // padding: 20px 0;
+
+    > .part-item {
+      // background-color: #ffffff;
+      // padding-left: 30px;
+    }
+
+    .purple {
+      color: #064c8a;
+    }
+  }
+
+  .footer {
+    // padding-top: 20px;
+    border-radius: 4px;
+  }
+
+  .textarea-remark {
+    margin-bottom: 20px;
+
+    > textarea {
+      background-color: #fafbff;
+      width: 100%;
+      padding: 32px;
+      // padding: 10px 20px;
+      border-radius: 4px;
+      box-sizing: border-box;
+
+      border-color: #d8dae0;
+    }
+  }
+
+  .invoice-header-arrow {
+    width: 30px;
+  }
+
+  .lines {
+    border-bottom: 1px solid #d8dae0;
+  }
+
+  .toBottom {
+    transform: rotate(90deg);
+    transition-duration: 0.1s;
+  }
+
+  .toRight {
+    transform: rotate(-90deg);
+    transition-duration: 0.1s;
+  }
+
+  .header-name {
+    padding: 0 !important;
+    border: unset !important;
+  }
+}
+.push-btn {
+  width: 100%;
+  height: 170px;
+  background-color: #fff;
+  // padding: 0 41px;
+  position: fixed;
+  bottom: 0;
+  z-index: 999;
+  box-sizing: border-box;
+  padding-bottom: constant(safe-area-inset-bottom);
+  padding-bottom: env(safe-area-inset-bottom);
+  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);
+  // width: 100%;
+  // padding: 20px 0;
+  // position: fixed;
+  // bottom: 0px;
+  // height: 110px;
+  // padding-bottom: constant(safe-area-inset-bottom);
+  // padding-bottom: env(safe-area-inset-bottom);
+  // 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);
+
+  .btn {
+    // margin: 20px 60px;
+    color: #ffffff;
+    border-radius: 50px;
+    text-align: center;
+    // padding: 20px 0;
+    height: 80px;
+    line-height: 80px;
+    width: 90%;
+    margin: 0 auto;
+    margin-top: 25px;
+    border-radius: 45px;
+  }
+
+  .push-again-btn {
+    // background-image: linear-gradient(to right, #7d4ea1, #40397c);
+    background: #064c8a;
+  }
+
+  .blue-push-again-btn {
+    .color-background-color('blue');
+  }
+
+  .green-push-again-btn {
+    .color-background-color('green');
+  }
+
+  .disable-btn {
+    background-color: #bdbdbd;
+  }
+}
+
+.footer {
+  width: 100%;
+  //background-color: #ffffff;
+  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);
+  //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);
+
+  .push-again-btn {
+    color: #ffffff;
+    // background-image: linear-gradient(to right, #7d4ea1, #40397c);
+    background-color: #064c8a;
+    border-radius: 50px;
+    text-align: center;
+    //padding: 20px 0;
+  }
+
+  .blue-push-again-btn {
+    .color-background-color('blue');
+  }
+
+  .green-push-again-btn {
+    .color-background-color('green');
+  }
+}
+</style>

src/pages/parkingFee/components/purple/parkingReceipt2/parkingChangeHeader.vue

@@ -0,0 +1,265 @@
+<template>
+  <div>
+    <scroll-view class="scroll-Y" scroll-y>
+      <div class="part top">
+        <div class="invoice-header">
+          <div class="part-item header-type lines">
+            <span class="part-item-key">抬头类型</span>
+            <van-radio-group
+              v-model="condition.invoiceTitleType"
+              direction="horizontal"
+              class="part-item-value"
+              @change="radioChange"
+            >
+              <van-radio
+                v-for="item in items"
+                :key="item.name + item.value"
+                checked-color="#064C8A"
+                :name="item.value"
+              >
+                {{ item.name }}
+              </van-radio>
+            </van-radio-group>
+          </div>
+          <div class="part-item lines">
+            <span class="part-item-key">抬头名称</span>
+            <div class="part-item-value">
+              <!-- <input
+              type="text"
+              placeholder="请输入抬头名称"
+              v-model="condition.invoiceTitleName"
+            /> -->
+              <van-field
+                v-model="condition.titleName"
+                right-icon="arrow"
+                input-align="right"
+                placeholder="请输入抬头名称"
+              />
+            </div>
+          </div>
+          <div class="part-item lines" v-if="isCompany">
+            <span class="part-item-key">公司税号</span>
+            <div class="part-item-value">
+              <!-- <input
+              type="text"
+              placeholder="请输入公司税号"
+              v-model="condition.corporationTax"
+            /> -->
+              <van-field
+                v-model="condition.taxNo"
+                right-icon="arrow"
+                input-align="right"
+                placeholder="请输入公司税号"
+              />
+            </div>
+          </div>
+          <div class="part-item lines">
+            <span class="part-item-key">设为默认</span>
+            <div class="part-item-value">
+              <van-switch
+                active-color="#064C8A"
+                v-model="condition.defaultOrNot"
+                @change="switch1Change"
+              />
+            </div>
+          </div>
+        </div>
+        <div class="invoice-more" v-if="isCompany">
+          <div class="tab-title">更多信息(以下为选填内容)</div>
+          <div class="company-box">
+            <div class="part-item lines">
+              <span class="part-item-key">公司地址</span>
+              <div class="part-item-value">
+                <van-field
+                  v-model="condition.companyAddress"
+                  right-icon="arrow"
+                  input-align="right"
+                  placeholder="请输入公司地址"
+                />
+              </div>
+            </div>
+            <div class="part-item lines">
+              <span class="part-item-key">公司电话</span>
+              <div class="part-item-value">
+                <van-field
+                  v-model="condition.companyTel"
+                  right-icon="arrow"
+                  input-align="right"
+                  placeholder="请输入公司电话"
+                />
+              </div>
+            </div>
+            <div class="part-item lines">
+              <span class="part-item-key">开户银行</span>
+              <div class="part-item-value">
+                <van-field
+                  v-model="condition.depositBank"
+                  right-icon="arrow"
+                  input-align="right"
+                  placeholder="请输入开户银行"
+                />
+              </div>
+            </div>
+            <div class="part-item lines" style="border: none">
+              <span class="part-item-key">开户账户</span>
+              <div class="part-item-value">
+                <van-field
+                  v-model="condition.depositAccount"
+                  right-icon="arrow"
+                  input-align="right"
+                  placeholder="请输入开户账户"
+                />
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </scroll-view>
+    <div class="part footer">
+        <k-button title="保存" style="margin: 0 auto 30px" @click="submit" />
+    </div>
+  </div>
+</template>
+
+<script>
+import parkingChangeHeaderJs from '../../../mixins/parkingReceipt/parkingChangeHeader'
+export default {
+  mixins:[parkingChangeHeaderJs]
+}
+</script>
+
+<style lang="less" scoped>
+// @import '../../../styles/mixins.less';
+.scroll-Y {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  height: 100vh;
+  // background: #f2f2f2;
+  background: #f4f7ff;
+  //padding: 30px 30px 30px 30px;
+
+  .part {
+    // background-color: #FAFBFF;
+    width: calc(100% - 60px);
+
+    .part-item {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      // padding: 32px 0;
+      font-size: 28px;
+      width: 91.4%;
+      height: 87px;
+      margin: 0 auto;
+
+      .part-item-key {
+        color: #999;
+      }
+
+      .part-item-value {
+        color: #999;
+        text-align: right;
+
+        > label {
+          margin-left: 20px;
+        }
+
+        .van-cell {
+          background-color: transparent;
+          font-size: 30px;
+          padding-right: 0;
+        }
+      }
+    }
+
+    .tab-title {
+      color: #676767;
+      padding-top: 36px;
+      padding-bottom: 20px;
+      // padding: 30px 35px;
+      // background-color: #f1f1f1;
+      font-size: 30px;
+      font-weight: 400;
+      color: #333333;
+      line-height: 42px;
+    }
+
+    .company-box {
+      background: #fafbff;
+      border-radius: 4px;
+      border: 1px solid #d8dae0;
+    }
+
+    .lines {
+      border-bottom: 2px solid #ececec;
+    }
+
+    .invoice-more {
+      padding-bottom: 8px;
+    }
+
+    .invoice-header {
+      background: #fafbff;
+      border-radius: 4px;
+      border: 1px solid #d8dae0;
+    }
+  }
+
+  .top {
+    margin-top: 30px;
+    margin-left: 30px;
+  }
+
+  .middle {
+    margin: 20px 0;
+
+    .purple {
+      color: #a668b1;
+    }
+  }
+
+
+}
+.footer {
+  width: 100%;
+  //height: 150px;
+  position: fixed;
+  bottom: 0px;
+  background-color: #FAFBFF;
+  padding: 30px;
+  padding-bottom: constant(safe-area-inset-bottom);
+  padding-bottom: env(safe-area-inset-bottom);
+  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);
+  padding: 30px;
+  padding-bottom: constant(safe-area-inset-bottom);
+  padding-bottom: env(safe-area-inset-bottom);
+  
+  .invoive-img {
+    text-align: center;
+
+    > img {
+      width: 100%;
+    }
+
+    .download {
+      margin-top: 20px;
+      margin-bottom: 20px;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+
+      > img {
+        width: 32px;
+      }
+
+      > span {
+        margin-left: 10px;
+        color: #808080;
+      }
+    }
+  }
+}
+</style>

src/pages/parkingFee/components/purple/parkingReceipt2/parkingChooseHeader.vue

@@ -0,0 +1,207 @@
+<template>
+  <div>
+    <div class="scroll-Y" scroll-y>
+      <div>
+        <div class="choose-invoice-header" v-if="list.length">
+          <van-radio-group class="radios">
+            <label
+              class="uni-list-cell uni-list-cell-pd radio-label lines"
+              v-for="(item, index) in list"
+              :key="index"
+              :index="item.id"
+              @click="chooseHeader(item, index)"
+            >
+              <div class="invoice-header-info">
+                <div class="invoice-header-text">
+                  <div class="invoice-header-name">
+                    <div class="invoice-header-name-text">
+                      {{ item.titleName
+                      }}<span class="isDefault" v-if="item.defaultOrNot"
+                        >默认</span
+                      >
+                    </div>
+                    <div class="invoice-header-name-icon">
+                      <div
+                        class="edit-header"
+                        @click.stop="changeHeader('edit', item.id, item)"
+                      >
+                        <img
+                          class="invoice-header-arrow"
+                          :src="editwIcon"
+                          mode="widthFix"
+                        />
+                      </div>
+                      <div class="edit-header" @click.stop="delHeader(item.id)">
+                        <img
+                          class="invoice-header-arrow"
+                          :src="delwIcon"
+                          mode="widthFix"
+                        />
+                      </div>
+                    </div>
+                  </div>
+                  <div class="duty-paragraph" v-if="item.invoiceTitleType === 'COMPANY'">
+                    税号 {{ item.taxNo }}
+                  </div>
+                </div>
+              </div>
+            </label>
+          </van-radio-group>
+        </div>
+        <div class="choose-invoice-header noData" v-else>
+          <img class="noDataImg" :src="noDataIcon" mode="widthFix" />
+          <div class="">您还没添加发票抬头</div>
+        </div>
+      </div>
+    </div>
+    <div class="footer">
+      <k-button title="添加抬头" style="margin: 0 auto 30px" disabledColor="#D1D2D9" @click="changeHeader('add')" />
+    </div>
+  </div>
+</template>
+
+<script>
+import parkingChooseHeaderJs from '../../../mixins/parkingReceipt/parkingChooseHeader';
+
+export default {
+  mixins: [parkingChooseHeaderJs],
+};
+</script>
+
+<style lang="less" scoped>
+//@import '../../../styles/common.less';
+
+.scroll-Y {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  height: 100vh;
+  background: #f4f7ff;
+
+  .choose-invoice-header {
+    padding: 20px 30px;
+
+    .radios {
+      width: 100%;
+
+      .radio-label {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        border-radius: 10px;
+        background-color: #ffffff;
+        margin-bottom: 20px;
+
+        .invoice-header-info {
+          flex: 1;
+          display: flex;
+          justify-content: flex-start;
+          align-items: center;
+
+          .invoice-header-text {
+            width: 100%;
+            padding: 0 20px;
+
+            .invoice-header-name {
+              color: #333333;
+              padding: 20px 0;
+              border-bottom: 2px solid #f8f8f8;
+              display: flex;
+              justify-content: space-between;
+              align-items: center;
+
+              .isDefault {
+                color: #8cc63f;
+                border: 2px solid #8cc63f;
+                margin-left: 16px;
+                border-radius: 20px;
+                padding: 0 10px;
+              }
+
+              .invoice-header-name-icon {
+                width: 100px;
+                display: flex;
+                align-items: center;
+                justify-content: space-around;
+
+                .invoice-header-arrow {
+                  width: 30px;
+                }
+              }
+            }
+          }
+
+          .duty-paragraph {
+            color: #6f6f70;
+            padding: 20px 0;
+          }
+        }
+
+        .invoice-header-icon {
+          width: 100px;
+          display: flex;
+          align-items: center;
+          justify-content: space-around;
+
+          .invoice-header-arrow {
+            width: 30px;
+          }
+        }
+      }
+    }
+  }
+
+  .noData {
+    position: relative;
+    top: 20%;
+    // transform: translateY(-50%);
+    color: #cccccc;
+    text-align: center;
+
+    .noDataImg {
+      width: 200px;
+      margin-bottom: 20px;
+    }
+  }
+}
+
+.lines {
+  border-bottom: 2px solid #ececec;
+}
+
+.footer {
+  width: 100%;
+  //background-color: #ffffff;
+  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);
+   //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);
+  
+  .push-again-btn {
+    
+    color: #ffffff;
+    // background-image: linear-gradient(to right, #7d4ea1, #40397c);
+    background-color: #064c8a;
+    border-radius: 50px;
+    text-align: center;
+    //padding: 20px 0;
+  }
+
+  .blue-push-again-btn {
+    .color-background-color('blue');
+  }
+
+  .green-push-again-btn {
+    .color-background-color('green');
+  }
+}
+</style>

src/pages/parkingFee/components/purple/parkingReceipt2/parkingHeaderDetail.vue

@@ -0,0 +1,102 @@
+<template>
+  <scroll-view class="scroll-Y" scroll-y>
+    <div class="part" v-if="header.invoiceTitleType === 0">
+      <div class="part-item">
+        <span class="part-item-key">抬头类型</span>
+        <div class="part-item-value">单位</div>
+      </div>
+      <div class="part-item">
+        <span class="part-item-key">抬头名称</span>
+        <span class="part-item-value">{{ header.invoiceTitleName }}</span>
+      </div>
+      <div class="part-item">
+        <span class="part-item-key">公司税号</span>
+        <span class="part-item-value">{{ header.corporationTax }}</span>
+      </div>
+      <div class="part-item">
+        <span class="part-item-key">公司地址</span>
+        <span class="part-item-value">{{ header.companyAddress }}</span>
+      </div>
+      <div class="part-item">
+        <span class="part-item-key">公司电话</span>
+        <span class="part-item-value">{{ header.companyTel }}</span>
+      </div>
+      <div class="part-item">
+        <span class="part-item-key">开户银行</span>
+        <span class="part-item-value">{{ header.depositBank }}</span>
+      </div>
+      <div class="part-item">
+        <span class="part-item-key">开户账户</span>
+        <span class="part-item-value">{{ header.accountNumber }}</span>
+      </div>
+    </div>
+    <div class="part" v-else>
+      <div class="part-item">
+        <span class="part-item-key">抬头类型</span>
+        <div class="part-item-value">个人/非企业单位</div>
+      </div>
+      <div class="part-item">
+        <span class="part-item-key">抬头名称</span>
+        <span class="part-item-value">{{ header.invoiceTitleName }}</span>
+      </div>
+    </div>
+  </scroll-view>
+</template>
+
+<script>
+import parkingHeaderDetailJs from '../../../mixins/parkingReceipt/parkingHeaderDetail';
+
+export default {
+  mixins: [parkingHeaderDetailJs],
+};
+</script>
+
+<style lang="less" scoped>
+.scroll-Y {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  height: 100vh;
+  background: #f4f7ff;
+  padding: 20px;
+  box-sizing: border-box;
+
+  .part {
+    padding: 0 30px;
+    background: #fafbff;
+    border-radius: 4px;
+    border: 1px solid #d8dae0;
+    padding-top: 30px;
+
+    .part-item {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      padding-bottom: 30px;
+      box-sizing: border-box;
+
+      .part-item-key {
+        font-size: 30px;
+        font-weight: 400;
+        color: #999999;
+        line-height: 42px;
+      }
+
+      .part-item-value {
+        color: #6f6f70;
+        text-align: right;
+        display: flex;
+        align-items: center;
+        font-size: 30px;
+        font-weight: 400;
+        color: #333333;
+        line-height: 42px;
+
+        > img {
+          width: 30px;
+        }
+      }
+    }
+  }
+}
+</style>

src/pages/parkingFee/components/purple/parkingReceipt2/parkingInvoice.vue

@@ -0,0 +1,175 @@
+<template>
+  <scroll-view :class="['scroll-Y', theme]" scroll-y>
+    <div class="part top">
+      <div class="part-item lines header">
+        <span class="part-item-key">抬头</span>
+        <div class="part-item-value invoiceTitleName" @click="showHeader">
+          {{ order.invoiceTitleName || 'order' }}
+          <van-icon name="arrow" size="10" color="#D8DAE0" />
+        </div>
+      </div>
+      <div class="part-item">
+        <span class="part-item-key">开票订单号</span>
+        <span class="part-item-value">{{ order.invoiceOrderNo }}</span>
+      </div>
+      <div class="part-item">
+        <span class="part-item-key">发票类型</span>
+        <span class="part-item-value">增值税普通发票</span>
+      </div>
+      <div class="part-item">
+        <span class="part-item-key">开票日期</span>
+        <span class="part-item-value">{{
+          order.invoiceDate ? order.invoiceDate : '-'
+        }}</span>
+      </div>
+      <div class="part-item">
+        <span class="part-item-key">发票号码</span>
+        <span class="part-item-value">{{
+          order.invoiceNumber ? order.invoiceNumber : '-'
+        }}</span>
+      </div>
+      <div class="part-item">
+        <span class="part-item-key">发票代码</span>
+        <span class="part-item-value">{{
+          order.invoiceCode ? order.invoiceCode : '-'
+        }}</span>
+      </div>
+      <div class="part-item">
+        <span class="part-item-key">备注</span>
+        <span class="part-item-value">{{ order.remark }}</span>
+      </div>
+    </div>
+    <div class="part middle">
+      <div class="part-item">
+        <span class="part-item-key">总金额</span>
+        <span class="part-item-value"
+          ><span class="purple">¥{{ order.invoiceTotalAmount }}</span></span
+        >
+      </div>
+      <div class="part-item">
+        <span class="part-item-key"
+          >共<span class="purple-order">{{ order.totalOrderCount }}笔</span
+          >缴费记录</span
+        >
+        <div class="part-item-value" @click="gotoRecordDetail">
+          <span>查看详情</span>
+          <img class="invoice-header-arrow" :src="arrowIcon" mode="widthFix" />
+        </div>
+      </div>
+    </div>
+    <div class="footer">
+      <div class="btn" @click="showInvoiceDetail">查看发票</div>
+    </div>
+  </scroll-view>
+</template>
+
+<script>
+import parkingInvoiceJs from '../../../mixins/parkingReceipt/parkingInvoice';
+
+export default {
+  mixins: [parkingInvoiceJs],
+};
+</script>
+
+<style lang="less" scoped>
+
+.scroll-Y {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  height: 100vh;
+  background: #f4f7ff;
+  padding: 20px;
+  box-sizing: border-box;
+
+  .part {
+    padding: 0 30px;
+    border-radius: 20px;
+    background: #fafbff;
+    border-radius: 4px;
+    border: 1px solid #d8dae0;
+
+    .part-item {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      padding: 20px 0;
+      box-sizing: border-box;
+
+      .part-item-key {
+        font-size: 30px;
+        font-weight: 400;
+        color: #999999;
+        line-height: 42px;
+      }
+
+      .part-item-value {
+        color: #6f6f70;
+        text-align: right;
+        display: flex;
+        align-items: center;
+        &.invoiceTitleName {
+          font-size: 30px;
+          font-weight: 400;
+          color: #333333;
+          line-height: 42px;
+        }
+        > img {
+          width: 30px;
+        }
+      }
+    }
+
+    .tab-title {
+      color: #676767;
+      padding: 30px 0px;
+    }
+
+    .lines {
+      border-bottom: 2px solid #ececec;
+    }
+
+    .invoice-more {
+      padding-bottom: 8px;
+    }
+  }
+
+  .top {
+    padding-top: 20px;
+  }
+
+  .middle {
+    margin: 20px 0;
+
+    > .part-item {
+      // background-color: #ffffff;
+    }
+
+    .purple {
+      font-size: 30px;
+      font-weight: 600;
+      color: #333333;
+      line-height: 42px;
+    }
+    .purple-order {
+      color: var(--k-color-primary-01);
+    }
+  }
+
+  .footer {
+    padding-top: 20px;
+    .btn {
+      // margin: 20px 60px;
+      text-align: center;
+      // padding: 20px 0;
+      height: 90px;
+      line-height: 90px;
+      background:  var(--k-color-primary-01);
+      border-radius: 45px;
+      font-size: 34px;
+      font-weight: 400;
+      color: #ffffff;
+    }
+  }
+}
+</style>

src/pages/parkingFee/components/purple/parkingReceipt2/parkingInvoiceImage.vue

@@ -0,0 +1,167 @@
+<template>
+  <scroll-view class="scroll-Y" scroll-y>
+    <div class="part">
+      <div class="part-item lines">
+        <span class="part-item-key">电子邮箱</span>
+        <span class="part-item-value">{{ order.email }}</span>
+      </div>
+      <div class="invoice-img" v-if="order.invoiceUrl">
+      </div>
+    </div>
+    <div class="footer">
+      <div
+        :class="{
+          btn: true,
+          'push-again-btn': true,
+          'blue-push-again-btn': custTypeId === 1,
+          'green-push-again-btn': custTypeId === 2,
+        }"
+        @click="pushAgain(order.invoiceUrl)"
+      >
+        再次推送
+      </div>
+    </div>
+  </scroll-view>
+</template>
+
+<script>
+import parkingInvoiceImageJs from '../../../mixins/parkingReceipt/parkingInvoiceImage';
+
+export default {
+  mixins: [parkingInvoiceImageJs],
+};
+</script>
+
+<style lang="less" scoped>
+// @import '../../../styles/mixins.less';
+.scroll-Y {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  height: 100vh;
+  background: #f4f7ff;
+  padding: 20px;
+  box-sizing: border-box;
+
+  .part {
+    background-color: #ffffff;
+    padding: 0 30px;
+    border-radius: 20px;
+
+    background: #fafbff;
+    border-radius: 4px;
+    border: 1px solid #d8dae0;
+
+    .part-item {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      padding: 20px 0;
+      box-sizing: border-box;
+
+      .part-item-key {
+        color: #4c4c4d;
+      }
+
+      .part-item-value {
+        color: #6f6f70;
+        text-align: right;
+        display: flex;
+        align-items: center;
+
+        > img {
+          width: 30px;
+        }
+      }
+    }
+
+    .invoice-img {
+      width: 100%;
+      padding: 30px 0;
+
+      .img {
+        width: 100%;
+      }
+
+      .img-index {
+        width: 100px;
+        height: 60px;
+        line-height: 60px;
+        text-align: center;
+        color: #ffffff;
+        background-color: #b3b3b3;
+        border-radius: 50px;
+        margin: 20px auto;
+      }
+
+      .download {
+        margin-top: 20px;
+        margin-bottom: 20px;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        border: 1px solid #662d91;
+        width: 300px;
+        height: 70px;
+        border-radius: 50px;
+        margin: 0 auto;
+
+        > img {
+          width: 32px;
+        }
+
+        > span {
+          margin-left: 10px;
+          color: #662d91;
+        }
+      }
+
+      .blue-download {
+        .color-download('blue');
+      }
+
+      .green-download {
+        .color-download('green');
+      }
+
+      .color-download(@value) {
+        @color: 'color-@{value}';
+        border-color: @@color;
+        > span {
+          color: @@color;
+        }
+      }
+    }
+  }
+
+  .footer {
+    padding-top: 20px;
+
+    .btn {
+      margin: 20px 60px;
+      color: #ffffff;
+      border-radius: 50px;
+      text-align: center;
+      padding: 20px 0;
+    }
+
+    .push-again-btn {
+      background: #064c8a;
+      border-radius: 45px;
+      // background-image: linear-gradient(to right, #7d4ea1, #40397c);
+    }
+
+    .blue-push-again-btn {
+      .color-background-color('blue');
+    }
+
+    .green-push-again-btn {
+      .color-background-color('green');
+    }
+  }
+}
+
+.lines {
+  border-bottom: 2px solid #ececec;
+}
+</style>

src/pages/parkingFee/components/purple/parkingReceipt2/parkingOrderDetail.vue

@@ -0,0 +1,159 @@
+<template>
+  <div class="scroll-Y">
+    <div>
+      <div class="order-price">
+        <div class="text">开票金额</div>
+        <div class="price">￥{{ parFee }}元</div>
+      </div>
+      <div class="tab-header">缴费订单总数 <span class="red">{{ orderList.length }}单</span></div>
+      <div class="order-list">
+        <div class="order-item" v-for="(item, index) in orderList" :key="index" @click="gotoDetail(item)">
+          <!-- 0：停车缴费  1:活动报名 2:积分兑换 v-if="item.invoiceCategory === 0"-->
+          <template>
+            <div class="item-header">
+              <div class="carNo">{{ item.vehicleNo }}</div>
+              <div class="price">￥{{item.totalPaidAmount }}</div>
+              <!-- getOrderItemPrice(item) -->
+            </div>
+            <div class="item-bottom">
+              <div>{{ item.parkName }}</div>
+              <div>订单号: {{ item.orderNo }}</div>
+              <div>入场时间: {{ item.enterTime }}</div>
+              <div>停车时长: {{ item.serviceMin | parkingTime }}分钟</div>
+            </div>
+          </template>
+<!--          <template v-else-if="item.invoiceCategory === 1"></template>-->
+<!--          <template v-else-if="item.invoiceCategory === 2"></template>-->
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import parkingOrderDetailJs from '../../../mixins/parkingReceipt/parkingOrderDetail'
+export default {
+  mixins:[parkingOrderDetailJs]
+}
+</script>
+
+<style lang="less" scoped>
+.scroll-Y {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  height: 100vh;
+  background: #F4F7FF;
+  padding: 20px;
+  box-sizing: border-box;
+
+  .order-price {
+    // border-radius: 10px;
+    text-align: center;
+    // background-color: #ffffff;
+    padding: 30px;
+    margin-bottom: 36px;
+    // width: 690px;
+    // height: 189px;
+
+    background: #FAFBFF;
+    border-radius: 4px;
+    border: 1px solid #D8DAE0;
+
+    .text {
+      font-size: 30px;
+      font-weight: 400;
+      color: #333333;
+      line-height: 42px;
+      margin-bottom: 20px;
+    }
+
+    .price {
+      // width: 158px;
+      // height: 67px;
+      font-size: 48px;
+      // font-family: PingFangSC-Semibold, PingFang SC;
+      font-weight: 600;
+      color: #333333;
+      line-height: 67px;
+    }
+  }
+
+  .tab-header {
+    color: #808080;
+    padding: 10px 20px 20px;
+    // width: 690px;
+    // height: 189px;
+
+    // background: #FAFBFF;
+    // border-radius: 4px;
+    // border: 1px solid #D8DAE0;
+
+  }
+
+  .order-list {
+    .order-item {
+      // border-radius: 20px;
+      // background-color: #ffffff;
+      padding: 30px;
+      // margin-bottom: 20px;
+
+      // width: 690px;
+      // height: 345px;
+      background: #FAFBFF;
+      border-radius: 4px;
+      border: 1px solid #D8DAE0;
+
+      .item-header {
+        padding-top: 6px;
+        padding-bottom: 6px;
+        font-size: 30px;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        border: 400;
+        border-bottom: 1px solid #D8DAE0;
+        padding-bottom: 20px;
+        padding-left: 10px;
+
+        .carNo {
+          font-size: 36px;
+          font-weight: 600;
+          color: #333333;
+          line-height: 50px;
+        }
+
+        .price {
+          font-size: 30px;
+          font-weight: 600;
+          color: #333333;
+          line-height: 42px;
+        }
+      }
+
+      .item-bottom {
+        // color: #808080;
+        // padding-top: 20px;
+        // padding-left: 10px;
+
+        font-size: 28px;
+        font-weight: 400;
+        color: #999999;
+        line-height: 40px;
+        padding-top: 8px;
+
+        > div {
+          padding-top: 12px;
+        }
+      }
+    }
+  }
+
+  .red {
+    color: #064C8A;
+  }
+}
+</style>
+
+
+

src/pages/parkingFee/components/purple/parkingReceipt2/parkingReceipt.vue

@@ -0,0 +1,471 @@
+<template>
+  <div
+    :class="['scroll-Y',theme]"
+    @scrolltolower="scrollLower"
+  >
+    <!-- <authorize ref="authorize"></authorize> -->
+    <div class="choice">
+      <!-- <LoginDom></LoginDom> -->
+      <div
+        v-for="(item, index) in invoiceList"
+        :key="index"
+        :class="index + 1 === tabIndex ? 'actived' : ''"
+        @click="invoice(index + 1)"
+      >
+        {{ item }}
+      </div>
+    </div>
+    <div class="choice_select">
+      <div :class="tabIndex == 1 ? 'choice_select_ews' : 'choice_select_ew'" />
+    </div>
+    <!-- 开票列表 -->
+    <div class="choice_card" :style="{ height: height }">
+      <div class="suggestion-list">
+        <van-checkbox-group v-model="ids" @change="checkboxChange">
+          <label
+            class="uni-list-cell uni-list-cell-pd"
+            @click.stop="goToDeatil(item)"
+            v-for="(item, index) in list"
+            :key="index"
+            :index="item.id"
+            :activity="total - 1"
+          >
+            <div class="choice_card_item">
+              <div class="carno-box">
+                <div
+                  :class="['carno', ids.indexOf(item.id) > -1 && 'active']"
+                  v-if="tabIndex == 1"
+                >
+                  <span>{{ item.vehicleNo }}</span>
+                </div>
+                <div class="invoiceTitleName" v-else>
+                  {{ item.invoiceHeader }}&nbsp;<van-icon
+                  name="arrow"
+                  color="#D8DAE0"
+                />
+                </div>
+                <div
+                  :class="[
+                    'payfee',
+                    (ids.indexOf(item.id) > -1 || tabIndex == 2) && 'active',
+                  ]"
+                >
+                  ￥{{
+
+                    item.totalPaidAmount || item.invoiceTotalAmount
+                  }}
+                </div>
+              </div>
+              <div class="line"></div>
+              <!-- 未开票 -->
+              <div class="my-not-invoiced-list" v-if="tabIndex == 1">
+                <div class="left">
+                  <div class="choice_card_index">{{ item.parkName }}</div>
+                  <div class="choice_card_index">
+                    订单号: {{ item.orderNo }}
+                  </div>
+                  <div class="choice_card_index">
+                    入场时间: {{ item.enterTime }}
+                  </div>
+                  <div class="choice_card_index mb0">
+                    停车时长: {{ item.serviceMin | parkingTime  }}
+                  </div>
+                </div>
+                <div class="right" @click.stop>
+                  <van-checkbox
+                    color="#ED1C24"
+                    :name="item.id"
+                    icon-size="20"
+                    checked-color="#064C8A"
+                  />
+                </div>
+              </div>
+              <!-- 已开票 -->
+              <div
+                class="my-not-invoiced-list my-invoiced-list"
+                v-if="tabIndex == 2"
+              >
+                <div class="left">
+                  <div class="choice_card_index">
+                    税号: {{ item.taxNo }}
+                  </div>
+                  <div class="choice_card_index">
+                    开票时间:
+                    {{ item.createTime ? item.createTime : '-' }}
+                  </div>
+                  <!-- <div class="choice_card_index mb0">
+                    停车时长: <span>{{ item.serviceMin | parkingTime }}</span>  _{{
+                      item.serviceMin
+                    }}
+                  </div> -->
+                </div>
+                <div class="right">
+                  <!-- 0：已提交申请(待开票) 1:开票中  2：开票完成 3：开票失败 -->
+                  <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>
+              </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>
+        <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">没有更多了</div>
+        </div>
+      </div>
+    </div>
+    <div class="flewx" v-if="tabIndex == 1">
+      <div class="priceBtn">
+        <div>
+          开票金额
+          <span class="price">{{ totalNum.toFixed(2) }} 元</span>
+        </div>
+        <div
+          :class="{
+            flewx_index3: true,
+            blue_flewx_index3: custTypeId === 1,
+            green_flewx_index3: custTypeId === 2,
+          }"
+          @click="goToInvoicing"
+        >
+          去开票
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import parkingReceiptCouponJs from '../../../mixins/parkingReceipt/parkingReceipt'
+export default {
+  mixins:[parkingReceiptCouponJs]
+}
+</script>
+
+<style lang="less" scoped>
+.scroll-Y {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  height: 100vh;
+  // padding-bottom: 100px;
+  background: #f4f7ff;
+
+  .choice {
+    width: 750px;
+    background-color: #fafbff;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 30px;
+    height: 88px;
+    position: fixed;
+    top: 0;
+    left: 0;
+
+    div {
+      width: 30%;
+      text-align: center;
+      height: 78px;
+      line-height: 78px;
+    }
+
+    .actived {
+      color: var(--k-color-primary-01);
+    }
+  }
+
+  .choice_select {
+    width: 750px;
+    height: 10px;
+    background-color: #fafbff;
+    position: fixed;
+    top: 74px;
+    left: 0;
+
+    div {
+      width: 64px;
+      height: 4px;
+      border-radius: 2px;
+      background-color: var(--k-color-primary-01);
+    }
+
+    .choice_select_ews {
+      transform: translateX(230px);
+      transition-duration: 0.1s;
+    }
+
+    .choice_select_ew {
+      transform: translateX(455px);
+      transition-duration: 0.1s;
+    }
+  }
+
+  .shanghaiClassify {
+    position: fixed;
+    width: 750px;
+    z-index: 2;
+  }
+
+  .blueClassify {
+    .colorClassify('blue');
+  }
+
+  .greenClassify {
+    .colorClassify('green');
+  }
+
+  .choice_card {
+    margin: 112px 20px 0px;
+    width: 710px;
+
+    // background-color: #fff;
+    .choice_card_item {
+      // border: 2px solid #ddd;
+      background: #fafbff;
+      border-radius: 4px;
+      border: 1px solid #d8dae0;
+      padding: 36px 30px 30px 30px;
+      // margin: 20px 0;
+      margin-bottom: 30px;
+      // border-radius: 20px;
+      // background-color: #fff;
+
+      .carno-box {
+        display: flex;
+        justify-content: space-between;
+        margin-bottom: 18px;
+
+        .carno {
+          font-size: 36px;
+          font-weight: 600;
+          color: #999999;
+          line-height: 50px;
+        }
+
+        .payfee {
+          font-size: 30px;
+          font-weight: 600;
+          color: #999999;
+          line-height: 42px;
+        }
+        .active {
+          color: #333333;
+        }
+      }
+
+      .line {
+        width: 100%;
+        border-bottom: 1px solid #d8dae0;
+        margin-bottom: 20px;
+      }
+
+      .my-not-invoiced-list {
+        display: flex;
+        justify-content: space-between;
+        .left {
+          flex: 1;
+        }
+        .right {
+          flex: 0 0 40px;
+          font-size: 40px;
+          display: flex;
+          justify-content: right;
+          flex-wrap: nowrap;
+          white-space: nowrap;
+        }
+      }
+      .failureReason {
+        margin-top: 10px;
+        text-align: right;
+        font-weight: normal;
+        font-size: 25px;
+        color: #bbb;
+      }
+      .my-invoiced-list {
+        align-items: flex-end;
+        .right {
+          flex: 0 0 150px;
+          font-size: 30px;
+          font-weight: 400;
+          color:var(--k-color-primary-01);
+          line-height: 42px;
+          text-align: right;
+        }
+      }
+
+      .choice_card_index {
+        font-size: 28px;
+        font-weight: 400;
+        color: #999999;
+        line-height: 40px;
+        margin-bottom: 12px;
+        &.mb0 {
+          margin-bottom: 0;
+        }
+      }
+      .choice_card_status {
+        display: flex;
+        white-space: nowrap;
+        align-items: center;
+        //padding-top: 10px;
+      }
+      .try-again {
+        margin-left: 10px;
+        color: #e89e42;
+        border: 1px solid #e89e42;
+        border-radius: 10px;
+        padding: 10px;
+      }
+      .choice_card_index1 {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        //border: 400;
+        border-bottom: 1px solid #f8f8f8;
+        padding: 10px 0;
+        font-size: 28px;
+        margin-bottom: 10px;
+      }
+
+      .choice_card_index2 {
+        // padding-top: 20px;
+        color: #bbbbbb;
+      }
+
+      .choice_card_index3 {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        color: #bbbbbb;
+      }
+
+      .choice_card_index4 {
+        color: #bbbbbb;
+        // padding-bottom: 20px;
+      }
+    }
+  }
+}
+
+.suggestion-list {
+  display: flex;
+  flex-direction: column;
+  // background: #fff;
+  border-radius: 15px;
+}
+
+.flewx {
+  width: 100%;
+  //height: 150px;
+  padding-top: 20px;
+  background-color: #fafbff;
+  position: fixed;
+  bottom: 0;
+  display: flex;
+  align-items: center;
+  // justify-content: space-between;
+  padding-bottom: 25px;
+  //padding-bottom: constant(safe-area-inset-bottom);
+  //padding-bottom: env(safe-area-inset-bottom);
+
+  // .checkAll {
+  // 	.checkboxItem {
+  // 		position: relative;
+  // 		top: -2px;
+  // 	}
+  // }
+  .priceBtn {
+    width: 100%;
+    padding: 0 30px 20px;
+    display: flex;
+    align-items: center;
+    margin-right: 20px;
+    justify-content: space-between;
+    font-size: 28px;
+    font-weight: 400;
+    color: #333333;
+
+    .price {
+      font-size: 36px;
+      font-weight: 600;
+      color: #333333;
+      line-height: 50px;
+    }
+
+    .flewx_index3 {
+      width: 150px;
+      height: 70px;
+      border-radius: 40px;
+      text-align: center;
+      font-size: 28px;
+      line-height: 70px;
+      color: #fff;
+      background:var(--k-color-primary-01);
+      border-radius: 45px;
+      font-size: 34px;
+      font-weight: 400;
+      color: #ffffff;
+    }
+
+    .blue_flewx_index3 {
+      .color-background-color('blue');
+    }
+
+    .green_flewx_index3 {
+      .color-background-color('green');
+    }
+  }
+}
+
+.uni-input_type {
+  width: 42px;
+  height: 42px;
+  margin-right: 10px;
+  border: 1px solid #f2f2f2;
+  border-radius: 50%;
+
+  img {
+    width: 40px;
+    height: 40px;
+  }
+}
+
+.noData {
+  width: 100%;
+  padding-top: 15%;
+  text-align: center;
+  // background: #f2f2f2;
+  margin: 0 auto;
+
+  img {
+    width: 200px;
+    margin-bottom: 2%;
+  }
+
+  span {
+    color: #999;
+    display: block;
+  }
+}
+
+.no-more-data {
+  margin-top: 40px;
+  text-align: center;
+  font-size: 29px;
+  font-weight: 400;
+  color: #999999;
+  line-height: 41px;
+}
+</style>

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

@@ -0,0 +1,470 @@
+<template>
+  <div>
+    <scroll-view scroll-y="true" class="scroll-Y">
+      <!-- 登录校验 -->
+      <!-- <authorize ref="authorize"></authorize> -->
+      <!-- <LoginDom></LoginDom> -->
+      <div class="wrap">
+        <div class="wrap_plate">我的车牌</div>
+<!--        <div v-else class="wrap_plate">车牌号绑定</div>-->
+        <div
+          class="plate_plate"
+          :class=" 'linear-gradient-' + item.licensePlateType "
+          v-for="item in licensePlateList"
+          :key="item.id"
+        >
+          <div class="plate_border">
+            <div
+              class="plate_tag"
+              :class="'bgc-' + item.licensePlateType"
+            ></div>
+            <div
+              class="plate_plate_index plate_plate_index1"
+              :style="{
+                padding: '0 0 0 14px',
+              }"
+            >
+              我的车牌
+            </div>
+            <div class="plate_plate_index plate_plate_index2">
+              {{ item.vehicleNo | formatCarno }}
+            </div>
+            <div class="plate_plate_index plate_plate_index3 bb">
+              <img
+                class="car-icon"
+                :src="require(`../../static/images/icon-carType.png`)"
+              />
+              <div>车牌类型</div>
+              <div class="licensePlateTypeDesc">
+                {{ item.licensePlateTypeDesc }}
+              </div>
+            </div>
+            <!-- <div class="plate_tag-icon" :class="
+            item.licensePlateType === 'NEW_ENERGY_CAR_NO'
+              ? 'plate_tag_icon_green'
+              : item.licensePlateType === 'ORDINARY_CAR_NO'
+              ? 'plate_tag_icon_blue'
+              : ''
+          " v-if="custTypeId > 0"></div> -->
+            <div class="plate_plate_index plate_plate_index4">
+              <div class="item" @click.stop="toPay(item.vehicleNo)">
+                <img :src="require(`../../static/images/icon-edit.png`)" alt="" /><span>查询</span>
+              </div>
+              <div class="item" @click="toEdit(item)">
+                <img :src="require(`../../static/images/icon-find.png`)" alt="" /><span
+                  >编辑</span
+                >
+              </div>
+              <div class="item" @click="toDelete(item)">
+                <img :src="require(`../../static/images/icon-del-white.png`)" alt="" /><span
+                  >删除</span
+                >
+              </div>
+              <!-- <div class="plate_plate_index4_index2">
+              <img src="static/images/money.png" @click="toPay(item.vehicleNo)" />
+              <img src="static/images/update.png" class="mrg-left-20" @click="toEdit(item)" />
+              <img src="static/images/delete.png" class="mrg-left-20" @click="toDelete(item)" />
+            </div> -->
+            </div>
+          </div>
+        </div>
+        <div
+          class="add_plate_no_data"
+          v-if="!licensePlateList.length"
+          @click="toAdd"
+        >
+          添加车牌+
+        </div>
+        <div class="wrap_plate mt36">
+          <div class="title">温馨提示:</div>
+          <div class="desc">·用户可以添加多个"燃油车牌号"或"新能源车牌号"</div>
+          <div class="desc">·用户可以更改或删除已经绑定车牌</div>
+        </div>
+      </div>
+    </scroll-view>
+    <van-popup v-model="deleteDialogSwitch" position="center">
+      <div class="popup-dialog">
+        <div class="dialog-title">
+          <span class="dialog-title-text">删除已绑定车牌</span>
+        </div>
+        <div class="dialog-content border-top">
+          <span class="dialog-content-text">是否确认删除已经绑定车牌</span>
+          <span class="dialog-content-carno">{{ activeCarno }}</span>
+        </div>
+        <div class="dialog-button-group">
+          <div class="dialog-button" @click="cancelDelete">
+            <span class="dialog-button-text">取消</span>
+          </div>
+          <div class="dialog-button border-left" @click="doDelete">
+            <span class="dialog-button-text">确定</span>
+          </div>
+        </div>
+      </div>
+    </van-popup>
+    <van-popup v-model="deleteSuccessDialogSwitch" position="center">
+      <div class="popup-dialog">
+        <div class="dialog-content">
+          <uni-icons
+            type="checkbox-filled"
+            size="60"
+            color="#7DB124"
+          ></uni-icons>
+          <span class="dialog-content-text">删除成功</span>
+        </div>
+        <div class="dialog-button-group">
+          <div class="dialog-button" @click="confirmDialog">
+            <span class="dialog-button-text">确定</span>
+          </div>
+        </div>
+      </div>
+    </van-popup>
+    <div
+      class="add_plate_box"
+      v-if="licensePlateList.length && licensePlateList.length < 3"
+      @click="toAdd"
+    >
+      <div class="add_plate_btn">+添加车牌号</div>
+      <div class="btnpb"></div>
+    </div>
+  </div>
+</template>
+
+<script>
+import vehicleManagementJs from '../../mixins/vehicleManagement'
+export default {
+  mixins:[vehicleManagementJs]
+}
+</script>
+
+<style lang="less" scoped>
+.scroll-Y {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  height: 100vh;
+  background: #f4f7ff;
+}
+
+.wrap {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+
+  .wrap_plate {
+    margin-top: 24px;
+    margin-left: 40px;
+    font-size: 30px;
+
+    &.mt36 {
+      margin-top: 36px;
+    }
+
+    .title {
+      // width: 180px;
+      // height: 50px;
+      font-size: 36px;
+      // font-family: PingFangHK-Semibold, PingFangHK;
+      font-weight: 600;
+      color: #333333;
+      line-height: 50px;
+      margin-bottom: 20px;
+    }
+
+    .desc {
+      font-size: 30px;
+      font-weight: 400;
+      color: #999999;
+      line-height: 45px;
+    }
+  }
+
+  .border-change {
+    border: 4px solid #707070;
+  }
+
+  .plate_tag-icon {
+    position: absolute;
+    left: 0;
+    top: 40px;
+    width: 20px;
+    height: 13px;
+    opacity: 1;
+    border-radius: 0px 12px 1px 0px;
+  }
+
+  .plate_tag_icon_green {
+    background: #39b54a;
+  }
+
+  .plate_tag_icon_blue {
+    background: #29abe2;
+  }
+
+  .plate_plate {
+    width: 670px;
+    margin-left: 40px;
+    margin-top: 20px;
+    padding: 4px;
+    border-radius: 20px 128px 20px 20px;
+
+    .plate_border {
+      // border-radius: 17px 125px 17px 17px;
+      background-color: #064c8a;
+      border-radius: 4px;
+      padding: 30px;
+      color: #ffffff;
+
+      .plate_tag {
+        display: inline-block;
+        width: 23px;
+        height: 14px;
+        border-top-right-radius: 18px;
+      }
+
+      .bgc-0 {
+        background-color: #29abe2;
+      }
+
+      .bgc-1 {
+        background-color: #39b54a;
+      }
+
+      .bgc-2 {
+        background-color: #bc9f6d;
+      }
+    }
+
+    .plate_plate_index {
+      padding-left: 37px;
+      padding-top: 10px;
+      font-size: 26px;
+    }
+
+    .plate_plate_index1,
+    .plate_plate_index3 {
+      font-size: 28px;
+      font-weight: 400;
+      color: #ffffff;
+      line-height: 40px;
+      display: flex;
+      align-items: center;
+
+      .car-icon {
+        width: 40px;
+        height: 40px;
+        margin-right: 10px;
+      }
+
+      .licensePlateTypeDesc {
+        margin-left: 5px;
+        font-size: 28px;
+        font-weight: 500;
+        color: #ffffff;
+        line-height: 40px;
+        margin-left: 20px;
+      }
+
+      &.bb {
+        padding-bottom: 23px;
+        margin-bottom: 23px;
+        border-bottom: 1px solid #ffffff;
+      }
+    }
+
+    .plate_plate_index1 {
+      display: inline-block;
+      padding-left: 14px;
+    }
+
+    .plate_plate_index2 {
+      font-weight: 500;
+      font-size: 38px;
+      font-weight: 600;
+      color: #ffffff;
+      line-height: 53px;
+    }
+
+    .plate_plate_index4 {
+      display: flex;
+      justify-content: space-around;
+
+      .plate_plate_index4_index2 {
+        width: 164px;
+      }
+
+      .item {
+        width: 33.33%;
+        font-size: 28px;
+        font-weight: 400;
+        color: #ffffff;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        position: relative;
+
+        &::after {
+          content: '';
+          width: 1px;
+          height: 30px;
+          position: absolute;
+          right: 8%;
+          background-color: rgba(255, 255, 255, 0.3);
+        }
+
+        &:last-child {
+          &::after {
+            width: 0px;
+          }
+        }
+
+        img {
+          width: 45px;
+          height: 45px;
+          // margin-right: 10px;
+        }
+
+        span {
+          flex: 0 0 50%;
+          text-align: left;
+        }
+      }
+    }
+  }
+
+  .linear-gradient-ORDINARY_CAR_NO {
+    // background-image: linear-gradient(#29abe2, #2e3393);
+  }
+
+  .linear-gradient-NEW_ENERGY_CAR_NO {
+    // background-image: linear-gradient(#8bc63f, #026937);
+  }
+
+  .linear-gradient-SPECIAL_CAR_NO {
+    // background-image: linear-gradient(#caa86e, #666666);
+  }
+
+  .mrg-left-20 {
+    margin-left: 20px;
+  }
+}
+
+.popup-dialog {
+  // width: 300px;
+  border-radius: 10px;
+  background-color: #fff;
+}
+
+.dialog-title {
+  flex-direction: row;
+  justify-content: center;
+  padding-top: 10px;
+  padding-bottom: 10px;
+}
+
+.dialog-title-text {
+  font-size: 16px;
+  font-weight: 500;
+}
+
+.dialog-content {
+  /* #ifndef APP-NVUE */
+  display: flex;
+  /* #endif */
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  padding: 15px;
+}
+
+.border-top {
+  border-top-color: #f5f5f5;
+  border-top-style: solid;
+  border-top-width: 1px;
+}
+
+.dialog-content-text {
+  font-size: 14px;
+}
+
+.dialog-content-carno {
+  font-weight: 500;
+  font-size: 16px;
+  margin-top: 8px;
+}
+
+.dialog-button-group {
+  /* #ifndef APP-NVUE */
+  display: flex;
+  /* #endif */
+  flex-direction: row;
+  border-top-color: #f5f5f5;
+  border-top-style: solid;
+  border-top-width: 1px;
+}
+
+.dialog-button {
+  /* #ifndef APP-NVUE */
+  display: flex;
+  /* #endif */
+
+  flex: 1;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+  height: 45px;
+}
+
+.border-left {
+  border-left-color: #f0f0f0;
+  border-left-style: solid;
+  border-left-width: 1px;
+}
+
+.dialog-button-text {
+  font-size: 14px;
+  color: #6e6e6e;
+}
+
+.add_plate_no_data {
+  width: 90%;
+  height: 200px;
+  text-align: center;
+  line-height: 200px;
+  // border: 1px dashed #eaeaea;
+  border: 1px solid #d8dae0;
+  margin-left: 40px;
+  margin-top: 20px;
+  color: #999999;
+  background-color: #fafbff;
+}
+.add_plate_box {
+  text-align: center;
+  // border: 1px dashed #eaeaea;
+  background-color: #fafbff;
+  position: fixed;
+  bottom: 0;
+  right: 0;
+  left: 0;
+  z-index: 999;
+  padding: 30px 30px 0 30px;
+  box-shadow: 0px 13px 33px 0px rgba(190, 187, 187, 0.2);
+  .btnpb {
+    width: 100%;
+    padding-bottom: 30px;
+    margin-bottom: 30px;
+    padding-bottom: constant(safe-area-inset-bottom);
+    padding-bottom: env(safe-area-inset-bottom);
+  }
+  .add_plate_btn {
+    width: 100%;
+    // margin-left: 30px;
+    height: 90px;
+    line-height: 90px;
+    background: #064c8a;
+    border-radius: 45px;
+    font-size: 34px;
+    font-weight: 400;
+    color: #ffffff;
+  }
+}
+</style>

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

@@ -6,12 +6,6 @@ import { mapState } from 'vuex';
 import uni from '@/utils/uniHooks';
 import { invoicesDeatil, invoicesOrders } from '@/api/parking';
 export default {
-  props:{
-    theme:{
-      type: String,
-      default: ''
-    }
-  },
   data() {
     return {
       picUrl: this.$picUrl,

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

@@ -15,12 +15,6 @@ import CacheTool from '@/utils/cache-tool'
 import { invoicesCompleted, invoicesNotapplied } from '@/api/parking';
 import { Dialog } from 'vant';
 export default {
-  props:{
-    theme:{
-      type: String,
-      default: ''
-    }
-  },
   data() {
     return {
       globalData: app.globalData,

src/pages/parkingFee/parkingFeeDetailSuccess.vue

@@ -52,6 +52,7 @@
           </div>
         </div>
       </div>
+      <div class="van-hairline--bottom"></div>
       <div class="parking-info mb-save" v-if="detail.discountInfo">
         <div class="parking-part">
           <div class="parking-info-item" v-if="false">
@@ -95,6 +96,7 @@
           </div>
         </div>
         <div class="parking-detail"></div>
+        <div class="van-hairline--bottom"></div>
         <div class="parking-part">
           <div class="parking-info-item">
             <span class="info-key">应缴</span>
@@ -131,7 +133,7 @@ export default {
     .parking-info {
       background: #fafbff;
       border-radius: 4px;
-      border: 1px solid #d8dae0;
+      // border: 1px solid #d8dae0;
       .parking-price {
         text-align: center;
         padding: 30px 0px 50px;
@@ -147,7 +149,7 @@ export default {
         }
       }
       .parking-detail {
-        border-top: 2px solid #f5f5f5;
+        // border-top: 2px solid #f5f5f5;
         width: calc(100% - 60px);
         margin-left: 30px;
       }
@@ -186,9 +188,6 @@ export default {
         }
       }
     }
-    .mgb-40 {
-      margin-bottom: 24px;
-    }
     .mb-save {
       padding-bottom: constant(safe-area-inset-bottom);
       padding-bottom: env(safe-area-inset-bottom);

src/pages/parkingFee/parkingFeeHint/parkingFeeHint.vue

@@ -1,16 +1,69 @@
 <template>
-  <component :is="componentName"></component>
+  <div :class="['box', theme]">
+    <img
+      :src="
+        custTypeId === 0
+          ? require('../static/images/rent.png')
+          : `${picUrl}parkingFee/rent-${colorAry[custTypeId - 1]}.png`
+      "
+      v-if="custTypeId >= 0"
+    />
+    <div>[月租车,可直接离场]</div>
+    <div
+      :class="{
+        searchPrice: true,
+        blueSearchPrice: custTypeId === 1,
+        greenSearchPrice: custTypeId === 2,
+      }"
+      @click="search"
+    >
+      重新查询
+    </div>
+  </div>
 </template>
 
 <script>
-import officeBlueCom from '../components/officeBlue/parkingFeeHint/parkingFeeHint.vue';
-import baseParkingFeeCom from '../components/base/parkingFeeHint/parkingFeeHint.vue';
+import parkingFeeHintJs from '../mixins/parkingFeeHint/parkingFeeHint'
 import baseMixins from '../mixins/base'
 export default {
-  mixins:[baseMixins],
-  components: {
-    officeBlueCom,
-    baseParkingFeeCom,
-  },
-};
+  mixins:[baseMixins, parkingFeeHintJs]
+}
 </script>
+
+<style lang="less" scoped>
+//@import '../../../styles/common.less';
+.box {
+  text-align: center;
+  img {
+    width: 200px;
+    height: 200px;
+    margin-top: 200px;
+  }
+  div {
+    margin-top: 20px;
+    font-weight: bold;
+  }
+  .searchPrice {
+    color: #fff !important;
+    margin: 0 auto;
+    margin-top: 40px;
+    height: 90px;
+    width: 80%;
+    line-height: 90px;
+    border-radius: 80px;
+    font-size: 17px;
+    background-image: linear-gradient(to right, #7e4fa1, #433c7f);
+  }
+  .blueSearchPrice {
+    .colorSearchPrice('blue');
+  }
+  .greenSearchPrice {
+    .colorSearchPrice('green');
+  }
+  .colorSearchPrice(@value) {
+    @color: 'color-@{value}';
+    background-image: none;
+    background-color: @@color;
+  }
+}
+</style>

src/pages/parkingFee/parkingFeeList.vue

@@ -20,23 +20,59 @@
         @click="toDetail(item.id)"
       >
         <div class="carno-box">
-          <div class="carno">{{ item.vehicleNo }}</div>
-          <div class="servicefee">{{ item.actualPayFee | currency }}</div>
+          <div class="carno">{{ item.orderNo  }}</div>
+          <div :class="['status-box', item.paymentStatus !== 'PAID' ? 'other' : '']">
+            <!-- {{ ['支付成功', '支付失败', '已退款'][item.refundStatus] }} -->
+            {{ item.refundStatus !== 'NO_REFUND' ? '已退款' : {'PAID': '支付成功', 'FAILED': '支付失败'}[item.paymentStatus || 'FAIED'] }}
+          </div>
+          <!-- <div class="servicefee">{{ item.actualPayFee | currency }}</div> -->
         </div>
-        <div class="choice_card_index">{{ item.parkName }} </div>
+        <div class="van-hairline--bottom"></div>
         <div class="choice_card_index orderno-box">
-          <div class="orderno">订单号 : {{ item.orderNo }}</div>
-          <van-icon name="arrow" />
+          <div class="orderno">{{ item.vehicleNo }}</div>
+          <!-- <van-icon name="arrow" /> -->
         </div>
         <div class="choice_card_index">
-          <div>入场时间 : {{ item.enterTime }}</div>
+          <div class="choice_card_index_icon">
+            <img
+                class="car-icon"
+                :src="require(`./static/images/vector.png`)"
+              />
+          <div class="choice_card_index_text">入场时间</div>
+          </div>
+          <div class="choice_card_index_icon">
+            <img
+                class="car-icon"
+                :src="require(`./static/images/car_time.png`)"
+              />
+          <div class="choice_card_index_text">停车时长</div>
+          </div> 
+          <!-- {{ item.enterTime }} -->
         </div>
-        <div class="choice_card_index mb0 pb0">
-          <div>停车时长 : {{ item.serviceMin | parkingTime }}</div>
-          <div :class="['status-box', item.payStatus !== 1 && 'other']">
-            <!-- {{ ['支付成功', '支付失败', '已退款'][item.refundStatus] }} -->
-            {{ item.refundStatus !== 'NO_REFUND' ? '已退款' : {'PAID': '支付成功', 'FAILED': '支付失败'}[item.paymentStatus || 'FAIED'] }}
+        <div class="choice_card_index">
+          <div class="choice_card_index_icon">
+            {{ item.enterTime }}
+          </div>
+          <div class="choice_card_index_icon">
+            {{ item.serviceMin | parkingTime }}
+          </div> 
+          <!-- {{ item.enterTime }} -->
+        </div>
+        <div class="choice_card_index"  style="padding-bottom:40px;" >
+          <div class="choice_card_index_icon bg_parkingRoom">
+            <img
+                class="car-icon"
+                :src="require(`./static/images/parking_room.png`)"
+              />
+          <div class="choice_card_index_text2">{{item.parkName}}</div>
           </div>
+          <!-- {{ item.enterTime }} -->
+        </div>
+        <div class="van-hairline--bottom"></div>
+        <div class="choice_card_index orderno-box2">
+          <div class="orderFee">¥{{ item.actualPayFee }}</div>
+          <div class="orderDetail">查看详情</div>
+          <!-- <van-icon name="arrow" /> -->
         </div>
       </div>
       <div class="notice-info">
@@ -72,7 +108,11 @@ export default {
   flex-direction: column;
   width: 100%;
 }
-
+.car-icon {
+        width: 40px;
+        height: 40px;
+        margin-right: 10px;
+      }
 .parkingFeeList-item {
   background: #fff;
   display: flex;
@@ -113,30 +153,31 @@ export default {
 }
 
 .choice_card {
-  width: calc(100% - 120px);
-  margin-left: 30px;
+  width: calc(100% - 48px);
+  margin:43px 24px;
   // margin-top: 30px;
-  margin-bottom: 30px;
-  padding: 30px;
+  // padding: 30px;
   // border-radius: 20px;
   position: relative;
   background-color: #fafbff;
   border-radius: 4px;
-  border: 1px solid #d8dae0;
+  // border: 1px solid #d8dae0;
   &.mt30 {
     margin-top: 30px;
   }
   .carno-box {
     display: flex;
     padding-bottom: 18px;
-    border-bottom: 1px solid #d8dae0;
+    // border-bottom: 1px solid #d8dae0;`
     justify-content: space-between;
-    margin-bottom: 20px;
+    padding: 20px 35px;
     .carno {
-      font-size: 36px;
-      color: #333333;
-      font-weight: 600;
-      line-height: 50px;
+      font-family: 'PingFang SC';
+      font-style: normal;
+      font-weight: 400;
+      font-size: 28px;
+      line-height: 5.6vw;
+      color: #999999;
     }
     .servicefee {
       font-size: 30px;
@@ -144,16 +185,63 @@ export default {
       color: #333333;
       line-height: 42px;
     }
+    .status-box {
+      font-family: 'PingFang SC';
+      font-style: normal;
+      font-weight: 400;
+      font-size: 30px;
+      color: var(--k-color-primary-01);
+      line-height: 42px;
+      &.other {
+        color: #B15124;
+      }
+    }
   }
-
+  
   .choice_card_index {
+    // width: calc(100% - 48px);
     font-size: 28px;
     font-weight: 400;
     color: #999999;
     line-height: 40px;
     margin-bottom: 12px;
     display: flex;
-    justify-content: space-between;
+    padding: 11px 35px;
+    
+    .choice_card_index_icon {
+      width: 50%;
+      height:40px;
+      line-height: 40px;
+      display: flex;
+      color:#333;
+    }
+    .bg_parkingRoom {
+      background-color: #F4F7FF;
+      width: 100%;
+      padding: 15px 0;
+
+    }
+    .choice_card_index_text {
+      display: inline-block;
+      line-height: 40px;
+      font-family: 'PingFang SC';
+      font-style: normal;
+      font-weight: 400;
+      font-size: 28px;
+      color:#666;
+
+    }
+    .choice_card_index_text2 {
+      display: inline-block;
+      line-height: 40px;
+      font-family: 'PingFang SC';
+      font-style: normal;
+      font-weight: 400;
+      font-size: 28px;
+      color:#333;
+
+    }
+    // justify-content: space-between;
     &.mt0 {
       margin-top: 0;
     }
@@ -176,6 +264,37 @@ export default {
   .orderno-box {
     display: flex;
     justify-content: space-between;
+    font-weight: 600;
+    color: #333;
+    padding-top: 31px;
+    line-height:28px;
+  }
+  .orderno-box2 {
+    display: flex;
+    justify-content: space-between;
+    font-weight: 600;
+    color: #333;
+  }
+  .orderFee {
+    font-family: 'PingFang SC';
+    font-style: normal;
+    font-weight: 500;
+    font-size: 34px;
+    line-height:40px;
+    // vertical-align: middle;
+    align-self: center;
+    // margin-top:5px;
+    // padding: 10px 0;
+  }
+  .orderDetail {
+    border: 1px solid #333333;
+    border-radius: 32.5px;
+    padding: 5px 33px;
+    font-family: 'PingFang SC';
+    font-style: normal;
+    font-weight: 400;
+    font-size: 28px;
+  
   }
 }
 

src/pages/parkingFee/parkingFeePayment.vue

@@ -60,7 +60,7 @@ export default {
     // font-size: 17px;
     // background-image: linear-gradient(to right, #7e4fa1, #433c7f);
 
-    background-color: #064C8A;
+    background-color: var(--k-color-primary-01);
     border-radius: 45px;
     font-size: 34px;
     font-weight: 400;

src/pages/parkingFee/parkingReceipt/parkingApplication.vue

@@ -1,21 +1,427 @@
 <template>
-  <component :is="componentName"></component>
+  <div>
+    <div :class="['scroll-Y', theme]">
+      <div class="push-box">
+        <div class="choose-invoice-header lines" @click="changeHeader">
+          <div class="invoice-header-info" v-if="headerInfo.titleName">
+            <div class="invoice-header-name" :class="headerInfo.invoiceTitleType == 'COMPANY' ? 'header-name' : ''">
+              <div>
+                {{ headerInfo.titleName }}
+                <span class="isDefault" v-if="headerInfo.defaultOrNot">默认</span>
+              </div>
+              <img class="invoice-header-arrow" :src="arrowIcon" mode="widthFix" />
+            </div>
+            <div v-if="headerInfo.invoiceTitleType == 'COMPANY'" class="duty-paragraph">税号：{{ headerInfo.taxNo }}</div>
+          </div>
+          <div class="invoice-header-info" v-else>
+            <div class="invoice-header-name">
+              <div>请选择发票抬头</div>
+              <img class="invoice-header-arrow" :src="arrowIcon" mode="widthFix" />
+            </div>
+            <div class="duty-paragraph">未选择发票抬头</div>
+          </div>
+        </div>
+        <div class="tab-header" v-if="headerInfo.titleName">发票详情</div>
+        <div class="part" v-if="headerInfo.titleName">
+          <div class="invoice-header">
+            <div class="part-item">
+              <span class="part-item-key">发票类型</span>
+              <span class="part-item-value">增值税普通发票</span>
+            </div>
+            <div class="part-item">
+              <span class="part-item-key">抬头类型</span>
+              <span class="part-item-value">{{ headerInfo.invoiceTitleType === 'COMPANY' ? '单位' : '个人/非企业单位' }}</span>
+            </div>
+            <div class="part-item" :class="headerInfo.invoiceTitleType == 'COMPANY' ? 'header-name' : ''">
+              <span class="part-item-key">抬头名称</span>
+              <span class="part-item-value">{{ headerInfo.titleName }}</span>
+            </div>
+            <div class="part-item lines" v-if="headerInfo.invoiceTitleType === 'COMPANY'">
+              <span class="part-item-key">公司税号</span>
+              <span class="part-item-value">{{ headerInfo.taxNo }}</span>
+            </div>
+          </div>
+          <div class="invoice-more" v-if="headerInfo.invoiceTitleType === 'COMPANY'">
+            <div class="tab-title show-more" @click="changeShowMore">
+              <span class="c">更多信息</span>
+              <!--  :class="!isShowMore ? 'toBottom' : 'toRight'" -->
+              <div class="arrow-box">
+                <img :src="arrowIcon" mode="widthFix" />
+              </div>
+            </div>
+            <div class="is-show-more" v-if="isShow">
+              <div class="part-item">
+                <span class="part-item-key">公司地址</span>
+                <span class="part-item-value">{{ headerInfo.companyAddress }}</span>
+              </div>
+              <div class="part-item">
+                <span class="part-item-key">公司电话</span>
+                <span class="part-item-value">{{ headerInfo.companyTel }}</span>
+              </div>
+              <div class="part-item">
+                <span class="part-item-key">开户银行</span>
+                <span class="part-item-value">{{ headerInfo.depositBank }}</span>
+              </div>
+              <div class="part-item top">
+                <span class="part-item-key">开户账户</span>
+                <span class="part-item-value">{{ headerInfo.depositAccount }}</span>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="part middle">
+          <div class="part-item lines">
+            <span class="part-item-key">总金额</span>
+            <span class="part-item-value"
+              ><span class="purple">{{ invoiceAmount }} 元</span></span
+            >
+          </div>
+          <div class="part-item top" v-if="type == ''">
+            <span class="part-item-key"
+              >共<span class="purple">{{ orderQuantity }}笔</span>缴费记录</span
+            >
+            <div class="part-item-value" @click="gotoDetail">
+              <span>查看详情</span>
+              <img class="invoice-header-arrow" :src="arrowIcon" mode="widthFix" />
+            </div>
+          </div>
+        </div>
+        <div class="tab-header">接收方式</div>
+        <div class="part">
+          <div class="part-item lines">
+            <span class="part-item-key" style="min-width: 120px; white-space: nowrap">电子邮箱</span>
+            <div class="part-item-value">
+              <input class="van-field__control" style="white-space: nowrap" type="text" @blur="mailboxChange" placeholder="请输入电子邮箱" v-model="condition.email" />
+            </div>
+          </div>
+          <div class="part-item default-email" @click="changeDefaultEMail">
+            <van-checkbox v-model="condition.emailAsDefault" @change="emailAsDefaultChange" icon-size="30PX"><span class="text">保存电子邮箱为默认邮箱</span></van-checkbox>
+          </div>
+        </div>
+        <div class="tab-header">备注</div>
+        <div class="textarea-remark">
+          <textarea rows="3" placeholder-style="color:#999999" placeholder="选填" @blur="storeRemarkChange" v-model="condition.remark"></textarea>
+        </div>
+        <!-- 占位 -->
+        <div style="height: 75px; background-color: transparent; color: transparent; position: relative">占位</div>
+      </div>
+    </div>
+    <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>
+  </div>
 </template>
 
 <script>
-import officeBlueCom from '../components/officeBlue/parkingReceipt/parkingApplication.vue';
-import baseParkingFeeCom from '../components/base/parkingReceipt/parkingApplication.vue';
-// import parkingApplication from '../components/purple/parkingReceipt/parkingApplication.vue';
+import parkingApplicationJs from '../mixins/parkingReceipt/parkingApplication';
 import baseMixins from '../mixins/base'
 export default {
-  mixins:[baseMixins],
-  components: {
-    officeBlueCom,
-    baseParkingFeeCom,
-    // purpleCom: parkingApplication
-  },
-    mounted() {
-    // this.componentName = 'purpleCom';
-  }
+  mixins: [baseMixins, parkingApplicationJs],
 };
 </script>
+
+<style lang="less" scoped>
+//@import '../../../styles/common.less';
+
+.scroll-Y {
+  width: 100%;
+  display: flex;
+  height: 100vh;
+  overflow-y: scroll;
+  flex-direction: column;
+  // height: 88vh;
+  background-color: #f4f7ff;
+  // padding: 30px 20px;
+  box-sizing: border-box;
+
+  .push-box {
+    padding: 30px 20px;
+    width: 750px;
+    box-sizing: border-box;
+    margin-bottom: 180px;
+  }
+
+  .choose-invoice-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    // padding: 20px 30px;
+    padding: 32px;
+    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;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        padding-bottom: 32px;
+        border-bottom: 1px solid #d8dae0;
+
+        .isDefault {
+          color: #8cc63f;
+          border: 1px solid #8cc63f;
+          margin-left: 30px;
+          border-radius: 20px;
+          display: inline-block;
+          padding: 0 21px;
+        }
+      }
+
+      .duty-paragraph {
+        color: #999;
+        margin-top: 32px;
+      }
+    }
+  }
+
+  .tab-header {
+    color: #808080;
+    padding: 10px 20px 20px;
+  }
+
+  .part {
+    // background-color: #ffffff;
+
+    background: #fafbff;
+    // padding-left: 30px;
+    margin-bottom: 20px;
+    border-radius: 4px;
+    padding: 30px;
+    border: 1px solid #d8dae0;
+
+    .part-item {
+      font-size: 28px;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      padding-bottom: 20px;
+
+      .part-item-key {
+        color: #333333;
+        min-width: 146px;
+      }
+
+      .part-item-value {
+        flex: 1;
+        color: #999;
+        text-align: right;
+        display: flex;
+        align-items: center;
+        .van-field__control {
+          text-align: right;
+        }
+      }
+    }
+
+    .is-show-more {
+      .part-item {
+        padding-top: 32px;
+      }
+    }
+
+    .tab-title {
+      color: #676767;
+      padding-top: 30px;
+    }
+
+    .show-more {
+      display: flex;
+      justify-content: space-between;
+      align-content: center;
+      // padding-right: 30px;
+
+      .arrow-box {
+        // transform: rotate(90deg);
+        // transition-duration:0.1s;
+        > img {
+          width: 30px;
+        }
+      }
+    }
+
+    .default-email {
+      justify-content: flex-start;
+      color: #999999;
+      margin-top: 20px;
+      // font-size: 28PX;
+      font-family: PingFangSC-Regular, PingFang SC;
+      font-weight: 400;
+      color: #999999;
+      padding-bottom: 0;
+      .text {
+        font-size: 28px;
+        font-weight: 400;
+        color: #999999;
+        line-height: 40px;
+      }
+      // line-height: 80PX;
+      // /deep/ .van-checkbox__icon {
+      //   font-size: 25PX;
+      // }
+      // /deep/ .van-checkbox__label {
+      //   line-height: 80PX;
+      // }
+    }
+  }
+
+  .top {
+    padding-top: 20px;
+    padding-bottom: 0 !important;
+  }
+
+  .middle {
+    // padding: 20px 0;
+
+    > .part-item {
+      // background-color: #ffffff;
+      // padding-left: 30px;
+    }
+
+    .purple {
+      color: #064c8a;
+    }
+  }
+
+  .footer {
+    // padding-top: 20px;
+    border-radius: 4px;
+  }
+
+  .textarea-remark {
+    margin-bottom: 20px;
+
+    > textarea {
+      background-color: #fafbff;
+      width: 100%;
+      padding: 32px;
+      // padding: 10px 20px;
+      border-radius: 4px;
+      box-sizing: border-box;
+
+      border-color: #d8dae0;
+    }
+  }
+
+  .invoice-header-arrow {
+    width: 30px;
+  }
+
+  .lines {
+    border-bottom: 1px solid #d8dae0;
+  }
+
+  .toBottom {
+    transform: rotate(90deg);
+    transition-duration: 0.1s;
+  }
+
+  .toRight {
+    transform: rotate(-90deg);
+    transition-duration: 0.1s;
+  }
+
+  .header-name {
+    padding: 0 !important;
+    border: unset !important;
+  }
+}
+.push-btn {
+  width: 100%;
+  height: 170px;
+  background-color: #fff;
+  // padding: 0 41px;
+  position: fixed;
+  bottom: 0;
+  z-index: 999;
+  box-sizing: border-box;
+  padding-bottom: constant(safe-area-inset-bottom);
+  padding-bottom: env(safe-area-inset-bottom);
+  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);
+  // width: 100%;
+  // padding: 20px 0;
+  // position: fixed;
+  // bottom: 0px;
+  // height: 110px;
+  // padding-bottom: constant(safe-area-inset-bottom);
+  // padding-bottom: env(safe-area-inset-bottom);
+  // 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);
+
+  .btn {
+    // margin: 20px 60px;
+    color: #ffffff;
+    border-radius: 50px;
+    text-align: center;
+    // padding: 20px 0;
+    height: 80px;
+    line-height: 80px;
+    width: 90%;
+    margin: 0 auto;
+    margin-top: 25px;
+    border-radius: 45px;
+  }
+
+  .push-again-btn {
+    // background-image: linear-gradient(to right, #7d4ea1, #40397c);
+    background: #064c8a;
+  }
+
+  .blue-push-again-btn {
+    .color-background-color('blue');
+  }
+
+  .green-push-again-btn {
+    .color-background-color('green');
+  }
+
+  .disable-btn {
+    background-color: #bdbdbd;
+  }
+}
+
+.footer {
+  width: 100%;
+  //background-color: #ffffff;
+  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);
+  //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);
+
+  .push-again-btn {
+    color: #ffffff;
+    // background-image: linear-gradient(to right, #7d4ea1, #40397c);
+    background-color: #064c8a;
+    border-radius: 50px;
+    text-align: center;
+    //padding: 20px 0;
+  }
+
+  .blue-push-again-btn {
+    .color-background-color('blue');
+  }
+
+  .green-push-again-btn {
+    .color-background-color('green');
+  }
+}
+</style>

src/pages/parkingFee/parkingReceipt/parkingChangeHeader.vue

@@ -1,21 +1,266 @@
 <template>
-  <component :is="componentName"></component>
+  <div :class="theme">
+    <scroll-view  :class="['scroll-Y']" scroll-y>
+      <div class="part top">
+        <div class="invoice-header">
+          <div class="part-item header-type lines">
+            <span class="part-item-key">抬头类型</span>
+            <van-radio-group
+              v-model="condition.invoiceTitleType"
+              direction="horizontal"
+              class="part-item-value"
+              @change="radioChange"
+            >
+              <van-radio
+                v-for="item in items"
+                :key="item.name + item.value"
+                checked-color="#064C8A"
+                :name="item.value"
+              >
+                {{ item.name }}
+              </van-radio>
+            </van-radio-group>
+          </div>
+          <div class="part-item lines">
+            <span class="part-item-key">抬头名称</span>
+            <div class="part-item-value">
+              <!-- <input
+              type="text"
+              placeholder="请输入抬头名称"
+              v-model="condition.invoiceTitleName"
+            /> -->
+              <van-field
+                v-model="condition.titleName"
+                right-icon="arrow"
+                input-align="right"
+                placeholder="请输入抬头名称"
+              />
+            </div>
+          </div>
+          <div class="part-item lines" v-if="isCompany">
+            <span class="part-item-key">公司税号</span>
+            <div class="part-item-value">
+              <!-- <input
+              type="text"
+              placeholder="请输入公司税号"
+              v-model="condition.corporationTax"
+            /> -->
+              <van-field
+                v-model="condition.taxNo"
+                right-icon="arrow"
+                input-align="right"
+                placeholder="请输入公司税号"
+              />
+            </div>
+          </div>
+          <div class="part-item lines">
+            <span class="part-item-key">设为默认</span>
+            <div class="part-item-value">
+              <van-switch
+                active-color="#064C8A"
+                v-model="condition.defaultOrNot"
+                @change="switch1Change"
+              />
+            </div>
+          </div>
+        </div>
+        <div class="invoice-more" v-if="isCompany">
+          <div class="tab-title">更多信息(以下为选填内容)</div>
+          <div class="company-box">
+            <div class="part-item lines">
+              <span class="part-item-key">公司地址</span>
+              <div class="part-item-value">
+                <van-field
+                  v-model="condition.companyAddress"
+                  right-icon="arrow"
+                  input-align="right"
+                  placeholder="请输入公司地址"
+                />
+              </div>
+            </div>
+            <div class="part-item lines">
+              <span class="part-item-key">公司电话</span>
+              <div class="part-item-value">
+                <van-field
+                  v-model="condition.companyTel"
+                  right-icon="arrow"
+                  input-align="right"
+                  placeholder="请输入公司电话"
+                />
+              </div>
+            </div>
+            <div class="part-item lines">
+              <span class="part-item-key">开户银行</span>
+              <div class="part-item-value">
+                <van-field
+                  v-model="condition.depositBank"
+                  right-icon="arrow"
+                  input-align="right"
+                  placeholder="请输入开户银行"
+                />
+              </div>
+            </div>
+            <div class="part-item lines" style="border: none">
+              <span class="part-item-key">开户账户</span>
+              <div class="part-item-value">
+                <van-field
+                  v-model="condition.depositAccount"
+                  right-icon="arrow"
+                  input-align="right"
+                  placeholder="请输入开户账户"
+                />
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </scroll-view>
+    <div class="part footer">
+        <k-button title="保存" style="margin: 0 auto 30px" @click="submit" />
+    </div>
+  </div>
 </template>
 
 <script>
-import officeBlueCom from '../components/officeBlue/parkingReceipt/parkingChangeHeader.vue';
-import baseParkingFeeCom from '../components/base/parkingReceipt/parkingChangeHeader.vue';
+import parkingChangeHeaderJs from '../mixins/parkingReceipt/parkingChangeHeader'
 import baseMixins from '../mixins/base'
-// import parkingChangeHeader from '../components/purple/parkingReceipt/parkingChangeHeader.vue';
 export default {
-  mixins:[baseMixins],
-  components: {
-    officeBlueCom,
-    baseParkingFeeCom,
-    // purpleCom: parkingChangeHeader
-  },
-  mounted() {
-    // this.componentName = 'purpleCom';
-  }
-};
+  mixins:[baseMixins, parkingChangeHeaderJs]
+}
 </script>
+
+<style lang="less" scoped>
+// @import '../../../styles/mixins.less';
+.scroll-Y {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  height: 100vh;
+  // background: #f2f2f2;
+  background: #f4f7ff;
+  //padding: 30px 30px 30px 30px;
+
+  .part {
+    // background-color: #FAFBFF;
+    width: calc(100% - 60px);
+
+    .part-item {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      // padding: 32px 0;
+      font-size: 28px;
+      width: 91.4%;
+      height: 87px;
+      margin: 0 auto;
+
+      .part-item-key {
+        color: #999;
+      }
+
+      .part-item-value {
+        color: #999;
+        text-align: right;
+
+        > label {
+          margin-left: 20px;
+        }
+
+        .van-cell {
+          background-color: transparent;
+          font-size: 30px;
+          padding-right: 0;
+        }
+      }
+    }
+
+    .tab-title {
+      color: #676767;
+      padding-top: 36px;
+      padding-bottom: 20px;
+      // padding: 30px 35px;
+      // background-color: #f1f1f1;
+      font-size: 30px;
+      font-weight: 400;
+      color: #333333;
+      line-height: 42px;
+    }
+
+    .company-box {
+      background: #fafbff;
+      border-radius: 4px;
+      border: 1px solid #d8dae0;
+    }
+
+    .lines {
+      border-bottom: 2px solid #ececec;
+    }
+
+    .invoice-more {
+      padding-bottom: 8px;
+    }
+
+    .invoice-header {
+      background: #fafbff;
+      border-radius: 4px;
+      border: 1px solid #d8dae0;
+    }
+  }
+
+  .top {
+    margin-top: 30px;
+    margin-left: 30px;
+  }
+
+  .middle {
+    margin: 20px 0;
+
+    .purple {
+      color: #a668b1;
+    }
+  }
+
+
+}
+.footer {
+  width: 100%;
+  //height: 150px;
+  position: fixed;
+  bottom: 0px;
+  background-color: #FAFBFF;
+  padding: 30px;
+  padding-bottom: constant(safe-area-inset-bottom);
+  padding-bottom: env(safe-area-inset-bottom);
+  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);
+  padding: 30px;
+  padding-bottom: constant(safe-area-inset-bottom);
+  padding-bottom: env(safe-area-inset-bottom);
+  
+  .invoive-img {
+    text-align: center;
+
+    > img {
+      width: 100%;
+    }
+
+    .download {
+      margin-top: 20px;
+      margin-bottom: 20px;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+
+      > img {
+        width: 32px;
+      }
+
+      > span {
+        margin-left: 10px;
+        color: #808080;
+      }
+    }
+  }
+}
+</style>

src/pages/parkingFee/parkingReceipt/parkingChooseHeader.vue

@@ -1,21 +1,207 @@
 <template>
-  <component :is="componentName"></component>
+  <div>
+    <div  :class="['scroll-Y', theme]" scroll-y>
+      <div>
+        <div class="choose-invoice-header" v-if="list.length">
+          <van-radio-group class="radios">
+            <label
+              class="uni-list-cell uni-list-cell-pd radio-label lines"
+              v-for="(item, index) in list"
+              :key="index"
+              :index="item.id"
+              @click="chooseHeader(item, index)"
+            >
+              <div class="invoice-header-info">
+                <div class="invoice-header-text">
+                  <div class="invoice-header-name">
+                    <div class="invoice-header-name-text">
+                      {{ item.titleName
+                      }}<span class="isDefault" v-if="item.defaultOrNot"
+                        >默认</span
+                      >
+                    </div>
+                    <div class="invoice-header-name-icon">
+                      <div
+                        class="edit-header"
+                        @click.stop="changeHeader('edit', item.id, item)"
+                      >
+                        <img
+                          class="invoice-header-arrow"
+                          :src="editwIcon"
+                          mode="widthFix"
+                        />
+                      </div>
+                      <div class="edit-header" @click.stop="delHeader(item.id)">
+                        <img
+                          class="invoice-header-arrow"
+                          :src="delwIcon"
+                          mode="widthFix"
+                        />
+                      </div>
+                    </div>
+                  </div>
+                  <div class="duty-paragraph" v-if="item.invoiceTitleType === 'COMPANY'">
+                    税号 {{ item.taxNo }}
+                  </div>
+                </div>
+              </div>
+            </label>
+          </van-radio-group>
+        </div>
+        <div class="choose-invoice-header noData" v-else>
+          <img class="noDataImg" :src="noDataIcon" mode="widthFix" />
+          <div class="">您还没添加发票抬头</div>
+        </div>
+      </div>
+    </div>
+    <div class="footer">
+      <k-button title="添加抬头" style="margin: 0 auto 30px" disabledColor="#D1D2D9" @click="changeHeader('add')" />
+    </div>
+  </div>
 </template>
 
 <script>
-import officeBlueCom from '../components/officeBlue/parkingReceipt/parkingChooseHeader.vue';
-import baseParkingFeeCom from '../components/base/parkingReceipt/parkingChooseHeader.vue';
+import parkingChooseHeaderJs from '../mixins/parkingReceipt/parkingChooseHeader';
 import baseMixins from '../mixins/base'
-// import parkingChooseHeader from '../components/purple/parkingReceipt/parkingChooseHeader.vue';
 export default {
-  mixins:[baseMixins],
-  components: {
-    officeBlueCom,
-    baseParkingFeeCom,
-    // purpleCom: parkingChooseHeader
-  },
-  mounted() {
-    // this.componentName = 'purpleCom';
-  }
+  mixins: [baseMixins, parkingChooseHeaderJs],
 };
 </script>
+
+<style lang="less" scoped>
+//@import '../../../styles/common.less';
+
+.scroll-Y {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  height: 100vh;
+  background: #f4f7ff;
+
+  .choose-invoice-header {
+    padding: 20px 30px;
+
+    .radios {
+      width: 100%;
+
+      .radio-label {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        border-radius: 10px;
+        background-color: #ffffff;
+        margin-bottom: 20px;
+
+        .invoice-header-info {
+          flex: 1;
+          display: flex;
+          justify-content: flex-start;
+          align-items: center;
+
+          .invoice-header-text {
+            width: 100%;
+            padding: 0 20px;
+
+            .invoice-header-name {
+              color: #333333;
+              padding: 20px 0;
+              border-bottom: 2px solid #f8f8f8;
+              display: flex;
+              justify-content: space-between;
+              align-items: center;
+
+              .isDefault {
+                color: #8cc63f;
+                border: 2px solid #8cc63f;
+                margin-left: 16px;
+                border-radius: 20px;
+                padding: 0 10px;
+              }
+
+              .invoice-header-name-icon {
+                width: 100px;
+                display: flex;
+                align-items: center;
+                justify-content: space-around;
+
+                .invoice-header-arrow {
+                  width: 30px;
+                }
+              }
+            }
+          }
+
+          .duty-paragraph {
+            color: #6f6f70;
+            padding: 20px 0;
+          }
+        }
+
+        .invoice-header-icon {
+          width: 100px;
+          display: flex;
+          align-items: center;
+          justify-content: space-around;
+
+          .invoice-header-arrow {
+            width: 30px;
+          }
+        }
+      }
+    }
+  }
+
+  .noData {
+    position: relative;
+    top: 20%;
+    // transform: translateY(-50%);
+    color: #cccccc;
+    text-align: center;
+
+    .noDataImg {
+      width: 200px;
+      margin-bottom: 20px;
+    }
+  }
+}
+
+.lines {
+  border-bottom: 2px solid #ececec;
+}
+
+.footer {
+  width: 100%;
+  //background-color: #ffffff;
+  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);
+   //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);
+  
+  .push-again-btn {
+    
+    color: #ffffff;
+    // background-image: linear-gradient(to right, #7d4ea1, #40397c);
+    background-color: var(--k-color-primary-01);
+    border-radius: 50px;
+    text-align: center;
+    //padding: 20px 0;
+  }
+
+  .blue-push-again-btn {
+    .color-background-color('blue');
+  }
+
+  .green-push-again-btn {
+    .color-background-color('green');
+  }
+}
+</style>

src/pages/parkingFee/parkingReceipt/parkingHeaderDetail.vue

@@ -1,21 +1,102 @@
 <template>
-  <component :is="componentName"></component>
+  <scroll-view  :class="['scroll-Y', theme]" scroll-y>
+    <div class="part" v-if="header.invoiceTitleType === 'COMPANY'">
+      <div class="part-item">
+        <span class="part-item-key">抬头类型</span>
+        <div class="part-item-value">单位</div>
+      </div>
+      <div class="part-item">
+        <span class="part-item-key">抬头名称</span>
+        <span class="part-item-value">{{ header.titleName }}</span>
+      </div>
+      <div class="part-item">
+        <span class="part-item-key">公司税号</span>
+        <span class="part-item-value">{{ header.taxNo }}</span>
+      </div>
+      <div class="part-item">
+        <span class="part-item-key">公司地址</span>
+        <span class="part-item-value">{{ header.companyAddress }}</span>
+      </div>
+      <div class="part-item">
+        <span class="part-item-key">公司电话</span>
+        <span class="part-item-value">{{ header.companyTel }}</span>
+      </div>
+      <div class="part-item">
+        <span class="part-item-key">开户银行</span>
+        <span class="part-item-value">{{ header.depositBank }}</span>
+      </div>
+      <div class="part-item">
+        <span class="part-item-key">开户账户</span>
+        <span class="part-item-value">{{ header.depositAccount }}</span>
+      </div>
+    </div>
+    <div class="part" v-else>
+      <div class="part-item">
+        <span class="part-item-key">抬头类型</span>
+        <div class="part-item-value">个人/非企业单位</div>
+      </div>
+      <div class="part-item">
+        <span class="part-item-key">抬头名称</span>
+        <span class="part-item-value">{{ header.titleName }}</span>
+      </div>
+    </div>
+  </scroll-view>
 </template>
 
 <script>
-import officeBlueCom from '../components/officeBlue/parkingReceipt/parkingHeaderDetail.vue';
-import baseParkingFeeCom from '../components/base/parkingReceipt/parkingHeaderDetail.vue';
+import parkingHeaderDetailJs from '../mixins/parkingReceipt/parkingHeaderDetail';
 import baseMixins from '../mixins/base'
-// import parkingHeaderDetail from '../components/purple/parkingReceipt/parkingHeaderDetail.vue';
 export default {
-  mixins:[baseMixins],
-  components: {
-    officeBlueCom,
-    baseParkingFeeCom,
-    // purpleCom: parkingHeaderDetail
-  },
-  mounted() {
-    // this.componentName = 'purpleCom';
-  }
+  mixins: [baseMixins, parkingHeaderDetailJs],
 };
 </script>
+
+<style lang="less" scoped>
+.scroll-Y {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  height: 100vh;
+  background: #f4f7ff;
+  padding: 20px;
+  box-sizing: border-box;
+
+  .part {
+    padding: 0 30px;
+    background: #fafbff;
+    border-radius: 4px;
+    // border: 1px solid #d8dae0;
+    padding-top: 30px;
+
+    .part-item {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      padding-bottom: 30px;
+      box-sizing: border-box;
+
+      .part-item-key {
+        font-size: 30px;
+        font-weight: 400;
+        color: #999999;
+        line-height: 42px;
+      }
+
+      .part-item-value {
+        color: #6f6f70;
+        text-align: right;
+        display: flex;
+        align-items: center;
+        font-size: 30px;
+        font-weight: 400;
+        color: #333333;
+        line-height: 42px;
+
+        > img {
+          width: 30px;
+        }
+      }
+    }
+  }
+}
+</style>

src/pages/parkingFee/parkingReceipt/parkingInvoice.vue

@@ -1,21 +1,218 @@
 <template>
-  <component :is="componentName" :theme="theme"></component>
+  <scroll-view :class="['scroll-Y', theme]" scroll-y>
+    <div class="part top">
+      <div class="part-item header">
+        <span class="part-item-key">抬头</span>
+        <div class="part-item-value invoiceTitleName" @click="showHeader">
+          {{ order.invoiceTitle.titleName || 'order' }}
+          <van-icon name="arrow" size="10" color="#D8DAE0" />
+        </div>
+      </div>
+      <div class="van-hairline--bottom" ></div>
+      <div class="part-item" style="padding-top:20px;">
+        <span class="part-item-key">开票订单号</span>
+        <span class="part-item-value">{{ order.invoiceOrderNo }}</span>
+      </div>
+      <div class="part-item">
+        <span class="part-item-key">发票类型</span>
+        <span class="part-item-value">增值税普通发票</span>
+      </div>
+      <div class="part-item">
+        <span class="part-item-key">开票日期</span>
+        <span class="part-item-value">{{ order.invoiceDate ? order.invoiceDate : '-' }}</span>
+      </div>
+      <div class="part-item">
+        <span class="part-item-key">发票号码</span>
+        <span class="part-item-value">{{ order.invoiceNumber ? order.invoiceNumber : '-' }}</span>
+      </div>
+      <div class="part-item">
+        <span class="part-item-key">发票代码</span>
+        <span class="part-item-value">{{ order.invoiceCode ? order.invoiceCode : '-' }}</span>
+      </div>
+      <div class="part-item">
+        <span class="part-item-key">备注</span>
+        <span class="part-item-value">{{ order.remark }}</span>
+      </div>
+    </div>
+    <div class="van-hairline--bottom"></div>
+    <div class="part middle">
+      <div class="part-item">
+        <span class="part-item-key">总金额</span>
+        <span class="part-item-value"
+          ><span class="purple">¥{{ order.invoiceTotalAmount }}</span></span
+        >
+      </div>
+      <div class="part-item" style="background: #cedce8; margin-bottom: 0">
+        <span class="part-item-key"
+          >共<span class="purple-order">{{ order.totalOrderCount }}笔</span>缴费记录</span
+        >
+        <div class="part-item-value" @click="gotoRecordDetail">
+          <span>查看详情</span>
+          <img class="invoice-header-arrow" :src="arrowIcon" mode="widthFix" />
+        </div>
+      </div>
+    </div>
+    <div class="flewx">
+      <div class="btn" @click="showInvoiceDetail">查看发票</div>
+
+      <!-- <div class="priceBtn">
+        <div>
+          开票金额
+          <span class="price">{{ totalNum }} 元</span>
+        </div>
+        <div
+          :class="{
+            flewx_index3: true,
+            blue_flewx_index3: custTypeId === 1,
+            green_flewx_index3: custTypeId === 2,
+          }"
+          @click="goToInvoicing"
+        >
+          去开票
+        </div>
+      </div> -->
+    </div>
+    <!-- <div class="footer">
+      <div class="btn" @click="showInvoiceDetail">查看发票</div>
+    </div> -->
+  </scroll-view>
 </template>
 
 <script>
-import officeBlueCom from '../components/officeBlue/parkingReceipt/parkingInvoice.vue';
-import baseParkingFeeCom from '../components/base/parkingReceipt/parkingInvoice.vue';
-import baseMixins from '../mixins/base'
-// import parkingInvoice from '../components/purple/parkingReceipt/parkingInvoice.vue';
+import parkingInvoiceJs from '../mixins/parkingReceipt/parkingInvoice';
+import baseMixins from '../mixins/base';
 export default {
-  mixins:[baseMixins],
-  components: {
-    officeBlueCom,
-    baseParkingFeeCom,
-    // purpleCom: parkingInvoice
-  },
-  mounted() {
-    // this.componentName = 'purpleCom';
-  }
+  mixins: [baseMixins, parkingInvoiceJs],
 };
 </script>
+
+<style lang="less" scoped>
+.scroll-Y {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  height: 100vh;
+  background: #f4f7ff;
+  padding: 20px;
+  box-sizing: border-box;
+
+  .part {
+    // padding: 0 30px;
+    border-radius: 20px;
+    background: #fafbff;
+    border-radius: 4px;
+    // border: 1px solid #d8dae0;
+
+    .part-item {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      margin: 20px 0;
+      padding: 0 30px;
+      box-sizing: border-box;
+
+      .part-item-key {
+        font-size: 30px;
+        font-weight: 400;
+        color: #666;
+        line-height: 42px;
+      }
+
+      .part-item-value {
+        color: #333;
+        text-align: right;
+        display: flex;
+        align-items: center;
+        &.invoiceTitleName {
+          font-size: 30px;
+          font-weight: 400;
+          color: #333333;
+          line-height: 42px;
+        }
+        > img {
+          width: 30px;
+        }
+      }
+    }
+
+    .tab-title {
+      color: #676767;
+      padding: 30px 0px;
+    }
+
+    .lines {
+      border-bottom: 2px solid #ececec;
+    }
+
+    .invoice-more {
+      padding-bottom: 8px;
+    }
+  }
+
+  .top {
+    padding-top: 20px;
+  }
+
+  .middle {
+    // margin: 20px 0;
+
+    > .part-item {
+      // background-color: #ffffff;
+    }
+
+    .purple {
+      font-size: 30px;
+      font-weight: 600;
+      color: #333333;
+      line-height: 42px;
+    }
+    .purple-order {
+      color: var(--k-color-primary-01);
+    }
+  }
+  .flewx {
+    width: 100%;
+    //height: 150px;
+    padding: 0 30px;
+    padding-top: 20px;
+    background-color: #fafbff;
+    position: fixed;
+    bottom: 0;
+    left: 0;
+    display: flex;
+    align-items: center;
+    // justify-content: space-between;
+    padding-bottom: 25px;
+    .btn {
+      // margin: 20px 60px;
+      width: calc(100% - 60px);
+      text-align: center;
+      // padding: 20px 0;
+      height: 90px;
+      line-height: 90px;
+      background: var(--k-color-primary-01);
+      border-radius: 45px;
+      font-size: 34px;
+      font-weight: 400;
+      color: #ffffff;
+    }
+  }
+  .footer {
+    // position:fixed;
+    // bottom:0;
+    padding-top: 20px;
+    .btn {
+      // margin: 20px 60px;
+      text-align: center;
+      // padding: 20px 0;
+      height: 90px;
+      line-height: 90px;
+      background: var(--k-color-primary-01);
+      border-radius: 45px;
+      font-size: 34px;
+      font-weight: 400;
+      color: #ffffff;
+    }
+  }
+}
+</style>

src/pages/parkingFee/parkingReceipt/parkingInvoiceApply.vue

@@ -1,179 +0,0 @@
-<template>
-  <scroll-view class="scroll-Y" scroll-y>
-    <div class="apply-success-box">
-      <div class="apply-success-img">
-        <img class="apply-image" mode="widthFix" :src="icon"/>
-      </div>
-      <div class="apply-success-text">【发票申请提交成功】</div>
-    </div>
-    <div class="footer">
-      <div :class="{'btn': true, 'push-again-btn': true, 'blue-push-again-btn': custTypeId === 1, 'green-push-again-btn': custTypeId === 2}" @click="showInvoiceDetail">查看发票</div>
-      <div class="btn back-home-btn" @click="goToHome">返回首页</div>
-    </div>
-  </scroll-view>
-</template>
-
-<script>
-// const app = getApp()
-const app = {};
-import hintIcon from '../static/images/hint.png';
-import { mapState } from 'vuex'
-
-export default {
-  data() {
-    return {
-      picUrl: this.$picUrl,
-      globalData: app.globalData,
-      hintIcon: hintIcon,
-      id: '',
-      blueIcon: 'https://cnsh-kerry-crm-le.oss-cn-shanghai.aliyuncs.com/images/icon-success-blue.png',
-      greenIcon: 'https://cnsh-kerry-crm-le.oss-cn-shanghai.aliyuncs.com/images/icon-success-green.png'
-    }
-  },
-  onLoad( options ) {
-    this.id = options.id;
-    this.getInvoicedDetail(this.id);
-  },
-  computed: {
-    ...mapState({
-      custTypeId: state => state.custTypeId
-    }),
-    icon() {
-      return this.$store.state.custTypeId === 0 ? this.hintIcon : this.$store.state.custTypeId === 1 ? this.blueIcon : this.greenIcon
-    },
-  },
-  methods: {
-    showInvoiceDetail() {
-      this.$router.replace({path: '/pages/parkingFee/parkingReceipt/parkingInvoice?id=' + this.id});
-    },
-    goToHome() {
-      this.$router.replace({path: '/pages/parkingFee/parkingReceipt/parkingReceipt'});
-    },
-    // 根据发票id获取发票详情信息(含发票抬头信息),
-    getInvoicedDetail( id ) {
-      const self = this;
-      const data = {
-        id: id
-      }
-      self.$md(data);
-      uni.request({
-        url: self.$baseURL + 'api/1.0/invoice/getInvoicedDetail?id=' + id,
-        method: 'POST',
-        data: data,
-        header: JSON.parse(uni.getStorageSync('handleUser')),
-        success: ( res ) => {
-          console.log('获取发票详情信息',res.data)
-          if ( res.data.code === 0 ) {
-            self.order = res.data.data;
-            if ( self.order.invoiceUrl ) { self.pushEmail(self.order); }
-          } else {
-            uni.showToast({
-              title: res.data.msg,
-              duration: 2000,
-              icon: 'none'
-            });
-          }
-        },
-        fail: () => {
-          uni.showToast({
-            title: '服务器开小差了呢，请您稍后再试',
-            icon: 'none'
-          });
-        },
-      });
-    },
-    // 开票成功后推送发票至邮箱
-    pushEmail( item ) {
-      const self = this;
-      const data = {
-        attachments: [
-          {
-            name: '停车发票.pdf',
-            path: item.invoiceUrl
-          }
-        ],
-        html: true,
-        sendTo: "string",
-        sendTos: [item.mailbox],
-        subject: item.invoiceTitleName + "的电子发票",
-        text: "停车发票"
-      }
-      self.$md(data);
-      uni.request({
-        url: self.$baseURL + 'sms/email',
-        method: 'POST',
-        data: data,
-        header: JSON.parse(uni.getStorageSync('handleUser')),
-        success: ( res ) => {
-          console.log('推送',res.data)
-          if ( res.data.code === 0 ) {
-          }
-        },
-        fail: () => {
-          uni.showToast({
-            title: '服务器开小差了呢，请您稍后再试',
-            icon: 'none'
-          });
-        },
-      });
-    },
-  }
-}
-</script>
-
-<style lang="less" scoped>
-@import '../../../styles/common.less';
-
-.scroll-Y {
-  width: 100%;
-  display: flex;
-  flex-direction: column;
-  height: 100vh;
-  // background: #f2f2f2;
-  .apply-success-box {
-    padding: 100px 0;
-    text-align: center;
-
-    .apply-image {
-      width: 30vw;
-    }
-
-    .apply-success-text {
-      margin-top: 50px;
-      font-weight: bold;
-    }
-  }
-
-  .footer {
-    width: 100%;
-
-    .btn {
-      margin: 20px 60px;
-      color: #ffffff;
-      border-radius: 50px;
-      text-align: center;
-      padding: 20px 0;
-    }
-
-    .push-again-btn {
-      background-image: linear-gradient(to right, #7D4EA1, #40397C);
-    }
-
-    .blue-push-again-btn {
-      .color-background-color('blue')
-    }
-
-    .green-push-again-btn {
-      .color-background-color('green')
-    }
-
-    .back-home-btn {
-      background-color: #BDBDBD;
-    }
-  }
-
-}
-</style>
-
-
-

src/pages/parkingFee/parkingReceipt/parkingInvoiceImage.vue

@@ -1,21 +1,181 @@
 <template>
-  <component :is="componentName"></component>
+  <scroll-view  :class="['scroll-Y', theme]" scroll-y>
+    <div class="part">
+      <div class="part-item">
+        <span class="part-item-key2">接收方式</span>
+        <span class="part-item-value"></span>
+      </div>
+      <van-divider dashed style="margin:0;"/>
+      <div class="part-item lines">
+        <span class="part-item-key">电子邮箱</span>
+        <span class="part-item-value">{{ res.email }}</span>
+      </div>
+      <div class="invoice-img" v-if="order.invoiceUrl">
+      </div>
+    </div>
+    <div class="footer">
+      <div
+        :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"
+      >
+        再次推送
+      </div>
+    </div>
+  </scroll-view>
 </template>
 
 <script>
-import officeBlueCom from '../components/officeBlue/parkingReceipt/parkingInvoiceImage.vue';
-import baseParkingFeeCom from '../components/base/parkingReceipt/parkingInvoiceImage.vue';
+import parkingInvoiceImageJs from '../mixins/parkingReceipt/parkingInvoiceImage';
 import baseMixins from '../mixins/base'
-// import parkingInvoiceImage from '../components/purple/parkingReceipt/parkingInvoiceImage.vue';
 export default {
-  mixins:[baseMixins],
-  components: {
-    officeBlueCom,
-    baseParkingFeeCom,
-    // purpleCom: parkingInvoiceImage
-  },
-  mounted() {
-    // this.componentName = 'purpleCom';
-  }
+  mixins: [baseMixins, parkingInvoiceImageJs],
 };
 </script>
+
+<style lang="less" scoped>
+// @import '../../../styles/mixins.less';
+.scroll-Y {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  height: 100vh;
+  background: #f4f7ff;
+  padding: 20px;
+  box-sizing: border-box;
+
+  .part {
+    background-color: #ffffff;
+    
+    border-radius: 20px;
+
+    background: #fafbff;
+    border-radius: 4px;
+    margin-bottom:60px;
+    // border: 1px solid #d8dae0;
+
+    .part-item {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      padding: 20px 30px;
+      box-sizing: border-box;
+
+      .part-item-key {
+        color: #999999;
+
+      }
+      .part-item-key2{
+        font-family: 'PingFang SC';
+        font-style: normal;
+        font-weight: 500;
+        font-size: 32px;
+        color: #333333;
+      }
+
+      .part-item-value {
+        color: #6f6f70;
+        text-align: right;
+        display: flex;
+        align-items: center;
+
+        > img {
+          width: 30px;
+        }
+      }
+    }
+
+    .invoice-img {
+      width: 100%;
+      padding: 30px 0;
+
+      .img {
+        width: 100%;
+      }
+
+      .img-index {
+        width: 100px;
+        height: 60px;
+        line-height: 60px;
+        text-align: center;
+        color: #ffffff;
+        background-color: #b3b3b3;
+        border-radius: 50px;
+        margin: 20px auto;
+      }
+
+      .download {
+        margin-top: 20px;
+        margin-bottom: 20px;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        border: 1px solid #662d91;
+        width: 300px;
+        height: 70px;
+        border-radius: 50px;
+        margin: 0 auto;
+
+        > img {
+          width: 32px;
+        }
+
+        > span {
+          margin-left: 10px;
+          color: #662d91;
+        }
+      }
+
+      .blue-download {
+        .color-download('blue');
+      }
+
+      .green-download {
+        .color-download('green');
+      }
+
+      .color-download(@value) {
+        @color: 'color-@{value}';
+        border-color: @@color;
+        > span {
+          color: @@color;
+        }
+      }
+    }
+  }
+
+  .footer {
+
+    .btn {
+      margin: 20px 60px;
+      color: #ffffff;
+      border-radius: 50px;
+      text-align: center;
+      padding: 20px 0;
+    }
+
+    .push-again-btn {
+      background: var(--k-color-primary-01);
+      border-radius: 45px;
+      // background-image: linear-gradient(to right, #7d4ea1, #40397c);
+    }
+
+    .blue-push-again-btn {
+      .color-background-color('blue');
+    }
+
+    .green-push-again-btn {
+      .color-background-color('green');
+    }
+  }
+}
+
+.lines {
+  border-bottom: 2px solid #ececec;
+}
+</style>

src/pages/parkingFee/parkingReceipt/parkingOrderDetail.vue

@@ -1,21 +1,444 @@
 <template>
-  <component :is="componentName"></component>
+  <div  :class="['scroll-Y', theme]">
+    <div>
+      <div class="order-price">
+        <div class="text">开票金额</div>
+        <div class="price">￥{{ parFee }}元</div>
+      </div>
+      <div class="tab-header">缴费订单总数 <span class="red">{{ orderList.length }}单</span></div>
+      <div class="order-list">
+        <div class="order-item" v-for="(item, index) in orderList" :key="index" @click="gotoDetail(item)">
+          <!-- 0：停车缴费  1:活动报名 2:积分兑换 v-if="item.invoiceCategory === 0"-->
+          <template>
+            <div class="carno-box">
+          <div class="carno">{{ item.orderNo  }}</div>
+          <!-- <div class="servicefee">{{ item.actualPayFee | currency }}</div> -->
+        </div>
+        <div class="van-hairline--bottom"></div>
+        <div class="choice_card_index orderno-box">
+          <div class="orderno">{{ item.vehicleNo }}</div>
+          <!-- <van-icon name="arrow" /> -->
+        </div>
+        <div class="choice_card_index">
+          <div class="choice_card_index_icon">
+            <img
+                class="car-icon"
+                :src="require(`../static/images/vector.png`)"
+              />
+          <div class="choice_card_index_text">入场时间</div>
+          </div>
+          <div class="choice_card_index_icon">
+            <img
+                class="car-icon"
+                :src="require(`../static/images/car_time.png`)"
+              />
+          <div class="choice_card_index_text">停车时长</div>
+          </div> 
+          <!-- {{ item.enterTime }} -->
+        </div>
+        <div class="choice_card_index">
+          <div class="choice_card_index_icon">
+            {{ item.enterTime }}
+          </div>
+          <div class="choice_card_index_icon">
+            {{ item.serviceMin | parkingTime }}
+          </div> 
+          <!-- {{ item.enterTime }} -->
+        </div>
+        <div class="choice_card_index"  style="padding-bottom:40px;" >
+          <div class="choice_card_index_icon bg_parkingRoom">
+            <img
+                class="car-icon"
+                :src="require(`../static/images/parking_room.png`)"
+              />
+          <div class="choice_card_index_text2">{{item.parkName}}</div>
+          </div>
+          <!-- {{ item.enterTime }} -->
+        </div>
+        <div class="van-hairline--bottom"></div>
+        <div class="choice_card_index orderno-box2">
+          <div class="orderFee">¥{{ item.totalPaidAmount }}</div>
+          <!-- <div class="orderDetail">查看详情</div> -->
+          <!-- <van-icon name="arrow" /> -->
+        </div>
+          </template>
+<!--          <template v-else-if="item.invoiceCategory === 1"></template>-->
+<!--          <template v-else-if="item.invoiceCategory === 2"></template>-->
+        </div>
+      </div>
+    </div>
+  </div>
 </template>
 
 <script>
-import officeBlueCom from '../components/officeBlue/parkingReceipt/parkingOrderDetail.vue';
-import baseParkingFeeCom from '../components/base/parkingReceipt/parkingOrderDetail.vue';
+import parkingOrderDetailJs from '../mixins/parkingReceipt/parkingOrderDetail'
 import baseMixins from '../mixins/base'
-// import parkingOrderDetail from '../components/purple/parkingReceipt/parkingOrderDetail.vue';
 export default {
-  mixins:[baseMixins],
-  components: {
-    officeBlueCom,
-    baseParkingFeeCom,
-    // purpleCom: parkingOrderDetail
-  },
-  mounted() {
-    // this.componentName = 'purpleCom';
-  }
-};
+  mixins:[baseMixins, parkingOrderDetailJs]
+}
 </script>
+
+<style lang="less" scoped>
+.scroll-Y {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  height: 100vh;
+  background: #F4F7FF;
+  padding: 20px;
+  box-sizing: border-box;
+  .choice_card_index {
+    // width: calc(100% - 48px);
+    font-size: 28px;
+    font-weight: 400;
+    color: #999999;
+    line-height: 40px;
+    margin-bottom: 12px;
+    display: flex;
+    padding: 17px 35px;
+    
+    .choice_card_index_icon {
+      width: 50%;
+      height:40px;
+      line-height: 40px;
+      display: flex;
+      color:#333;
+      .car-icon {
+        width: 40px;
+        height: 40px;
+        margin-right: 10px;
+      }
+    }
+    .bg_parkingRoom {
+      background-color: #F4F7FF;
+      width: 100%;
+      padding: 15px 0;
+
+    }
+    .choice_card_index_text {
+      display: inline-block;
+      line-height: 40px;
+      font-family: 'PingFang SC';
+      font-style: normal;
+      font-weight: 400;
+      font-size: 28px;
+      color:#666;
+
+    }
+    .choice_card_index_text2 {
+      display: inline-block;
+      line-height: 40px;
+      font-family: 'PingFang SC';
+      font-style: normal;
+      font-weight: 400;
+      font-size: 28px;
+      color:#333;
+
+    }
+    // justify-content: space-between;
+    &.mt0 {
+      margin-top: 0;
+    }
+    &.mb0 {
+      margin-bottom: 0;
+    }
+    &.pb0 {
+      padding-bottom: 0;
+    }
+    .status-box {
+      font-size: 30px;
+      font-weight: 400;
+      color: #064c8a;
+      line-height: 42px;
+      &.other {
+        color: #999999;
+      }
+    }
+  }
+  .choice_card {
+  width: calc(100% - 48px);
+  margin:43px 24px;
+  // margin-top: 30px;
+  // padding: 30px;
+  // border-radius: 20px;
+  position: relative;
+  background-color: #fafbff;
+  border-radius: 4px;
+  // border: 1px solid #d8dae0;
+  &.mt30 {
+    margin-top: 30px;
+  }
+  
+  
+  .choice_card_index {
+    // width: calc(100% - 48px);
+    font-size: 28px;
+    font-weight: 400;
+    color: #999999;
+    line-height: 40px;
+    margin-bottom: 12px;
+    display: flex;
+    padding: 11px 35px;
+    
+    .choice_card_index_icon {
+      width: 50%;
+      height:40px;
+      line-height: 40px;
+      display: flex;
+      color:#333;
+      .car-icon {
+        width: 40px;
+        height: 40px;
+        margin-right: 10px;
+      }
+    }
+    .bg_parkingRoom {
+      background-color: #F4F7FF;
+      width: 100%;
+      padding: 15px 0;
+
+    }
+    .choice_card_index_text {
+      display: inline-block;
+      line-height: 40px;
+      font-family: 'PingFang SC';
+      font-style: normal;
+      font-weight: 400;
+      font-size: 28px;
+      color:#666;
+
+    }
+    .choice_card_index_text2 {
+      display: inline-block;
+      line-height: 40px;
+      font-family: 'PingFang SC';
+      font-style: normal;
+      font-weight: 400;
+      font-size: 28px;
+      color:#333;
+
+    }
+    // justify-content: space-between;
+    &.mt0 {
+      margin-top: 0;
+    }
+    &.mb0 {
+      margin-bottom: 0;
+    }
+    &.pb0 {
+      padding-bottom: 0;
+    }
+    .status-box {
+      font-size: 30px;
+      font-weight: 400;
+      color: #064c8a;
+      line-height: 42px;
+      &.other {
+        color: #999999;
+      }
+    }
+  }
+  .orderno-box {
+    display: flex;
+    justify-content: space-between;
+    font-weight: 600;
+    color: #333;
+    padding-top: 31px;
+    line-height:28px;
+  }
+  .orderno-box2 {
+    display: flex;
+    justify-content: space-between;
+    font-weight: 600;
+    color: #333;
+  }
+  .orderFee {
+    font-family: 'PingFang SC';
+    font-style: normal;
+    font-weight: 500;
+    font-size: 34px;
+    line-height:40px;
+    // vertical-align: middle;
+    align-self: center;
+    color: #333;
+    // margin-top:5px;
+    // padding: 10px 0;
+  }
+  .orderDetail {
+    border: 1px solid #333333;
+    border-radius: 32.5px;
+    padding: 5px 33px;
+    font-family: 'PingFang SC';
+    font-style: normal;
+    font-weight: 400;
+    font-size: 28px;
+  
+  }
+}
+  .order-price {
+    // border-radius: 10px;
+    text-align: center;
+    // background-color: #ffffff;
+    padding: 30px;
+    margin-bottom: 36px;
+    // width: 690px;
+    // height: 189px;
+
+    background: #FAFBFF;
+    border-radius: 4px;
+    // border: 1px solid #D8DAE0;
+
+    .text {
+      font-size: 30px;
+      font-weight: 400;
+      color: #333333;
+      line-height: 42px;
+      margin-bottom: 20px;
+    }
+
+    .price {
+      // width: 158px;
+      // height: 67px;
+      font-size: 48px;
+      // font-family: PingFangSC-Semibold, PingFang SC;
+      font-weight: 600;
+      color: #333333;
+      line-height: 67px;
+    }
+  }
+
+  .tab-header {
+    color: #808080;
+    padding: 10px 20px 20px;
+    // width: 690px;
+    // height: 189px;
+
+    // background: #FAFBFF;
+    // border-radius: 4px;
+    // border: 1px solid #D8DAE0;
+
+  }
+
+  .order-list {
+    .order-item {
+      // border-radius: 20px;
+      // background-color: #ffffff;
+      // padding:0  30px;
+      // margin-bottom: 20px;
+
+      // width: 690px;
+      // height: 345px;
+      background: #FAFBFF;
+      border-radius: 4px;
+      // border: 1px solid #D8DAE0;
+
+      .item-header {
+        padding-top: 6px;
+        padding-bottom: 6px;
+        font-size: 30px;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        border: 400;
+        // border-bottom: 1px solid #D8DAE0;
+        padding-bottom: 20px;
+        padding-left: 10px;
+
+        .carNo {
+          font-size: 36px;
+          font-weight: 600;
+          color: #333333;
+          line-height: 50px;
+        }
+
+        .price {
+          font-size: 30px;
+          font-weight: 600;
+          color: #333333;
+          line-height: 42px;
+        }
+      }
+
+      .item-bottom {
+        // color: #808080;
+        // padding-top: 20px;
+        // padding-left: 10px;
+
+        font-size: 28px;
+        font-weight: 400;
+        color: #999999;
+        line-height: 40px;
+        padding-top: 8px;
+
+        > div {
+          padding-top: 12px;
+        }
+      }
+    }
+  }
+
+  .red {
+    color: var(--k-color-primary-01);
+  }
+  .orderFee {
+    font-family: 'PingFang SC';
+    font-style: normal;
+    font-weight: 500;
+    font-size: 34px;
+    line-height:40px;
+    // vertical-align: middle;
+    align-self: center;
+    color:#333;
+    // margin-top:5px;
+    // padding: 10px 0;
+  }
+  .orderDetail {
+    border: 1px solid #333333;
+    border-radius: 32.5px;
+    padding: 5px 33px;
+    font-family: 'PingFang SC';
+    font-style: normal;
+    font-weight: 400;
+    font-size: 28px;
+  
+  }
+  .orderno-box {
+    display: flex;
+    justify-content: space-between;
+    font-weight: 600;
+    color: #333;
+    padding-top: 31px;
+    line-height:28px;
+    font-size: 32px;
+  }
+  .carno-box {
+    display: flex;
+    padding-bottom: 18px;
+    // border-bottom: 1px solid #d8dae0;`
+    justify-content: space-between;
+    padding: 20px 35px;
+    color:#999;
+    
+    .servicefee {
+      font-size: 30px;
+      font-weight: 600;
+      color: #333333;
+      line-height: 42px;
+    }
+    .status-box {
+      font-family: 'PingFang SC';
+      font-style: normal;
+      font-weight: 400;
+      font-size: 30px;
+      color: var(--k-color-primary-01);
+      line-height: 42px;
+      &.other {
+        color: #B15124;
+      }
+    }
+  }
+}
+</style>
+
+
+

src/pages/parkingFee/parkingReceipt/parkingReceipt.vue

@@ -1,24 +1,708 @@
 <template>
-  <component :is="componentName" :theme="theme"></component>
+  <div :class="['scroll-Y', theme]" @scrolltolower="scrollLower">
+    <!-- <authorize ref="authorize"></authorize> -->
+    <div class="choice">
+      <!-- <LoginDom></LoginDom> -->
+      <div v-for="(item, index) in invoiceList" :key="index" :class="index + 1 === tabIndex ? 'actived' : ''" @click="invoice(index + 1)">
+        {{ item }}
+      </div>
+    </div>
+    <div class="choice_select">
+      <div :class="tabIndex == 1 ? 'choice_select_ews' : 'choice_select_ew'" />
+    </div>
+    <!-- 开票列表   <div class="choice_card" :style="{ height: height }">-->
+    <div class="choice_card">
+      <div class="suggestion-list">
+        <van-checkbox-group v-model="ids" @change="checkboxChange">
+          <label class="uni-list-cell uni-list-cell-pd" @click.stop="goToDeatil(item)" v-for="(item, index) in list" :key="index" :index="item.id" :activity="total - 1">
+            <div class="choice_card_item">
+              <div class="orderNum"  v-if="tabIndex == 1">{{ item.orderNo }}</div>
+              <div class="orderNum"  v-else>
+                <span>税号: {{ item.taxNo }}</span> 
+                <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>
+              </div>
+              <div class="van-hairline--bottom"></div>
+              <div class="carno-box">
+                <div :class="['carno', ids.indexOf(item.id) > -1 && '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)" />
+                  </div>
+                </div>
+                
+                <div :class="['payfee', (ids.indexOf(item.id) > -1 || tabIndex == 2) && 'active']"></div>
+              </div>
+              <!-- 未开票 -->
+              <div class="my-not-invoiced-list" v-if="tabIndex == 1">
+                <div class="left">
+                  <div class="choice_card_index">
+                    <div class="choice_card_index_icon">
+                      <img class="car-icon" :src="require(`../static/images/vector.png`)" />
+                      <div class="choice_card_index_text">入场时间</div>
+                    </div>
+                    <div class="choice_card_index_icon">
+                      <img class="car-icon" :src="require(`../static/images/car_time.png`)" />
+                      <div class="choice_card_index_text">停车时长</div>
+                    </div>
+                    <!-- {{ item.enterTime }} -->
+                  </div>
+                  <div class="choice_card_index">
+                    <div class="choice_card_index_icon">
+                      {{ item.enterTime }}
+                    </div>
+                    <div class="choice_card_index_icon">
+                      {{ item.serviceMin | parkingTime }}
+                    </div>
+                    <!-- {{ item.enterTime }} -->
+                  </div>
+                  <div class="choice_card_index" style="padding-bottom: 40px">
+                    <div class="choice_card_index_icon bg_parkingRoom">
+                      <img class="car-icon" :src="require(`../static/images/parking_room.png`)" />
+                      <div class="choice_card_index_text2">{{ item.parkName }}</div>
+                    </div>
+                    <!-- {{ item.enterTime }} -->
+                  </div>
+                  <div class="van-hairline--bottom"></div>
+                  <div class="choice_card_index orderno-box2">
+                    <div :class="['orderFee', ids.indexOf(item.id) > -1 && 'active']" >¥{{ item.totalPaidAmount || item.invoiceTotalAmount }}</div>
+                    <!-- <div class="orderDetail">查看详情</div> -->
+                    <!-- <van-icon name="arrow" /> -->
+                  </div>
+                </div>
+                <!-- <div class="right" @click.stop>
+                  <van-checkbox color="#ED1C24" :name="item.id" icon-size="20" checked-color="var(--k-color-primary-01)" />
+                </div> -->
+              </div>
+              <!-- 已开票 -->
+              <div class="my-not-invoiced-list my-invoiced-list" v-if="tabIndex == 2">
+                <div class="left">
+                  
+                  <div class="invoiceHeader">{{ item.invoiceHeader }}</div>
+                  <div class="choice_card_index">
+                    <div class="choice_card_index_icon">
+                      <img class="car-icon" :src="require(`../static/images/vector.png`)" />
+                      <div class="choice_card_index_text">开票时间</div>
+                    </div>
+                    <!-- {{ item.enterTime }} -->
+                  </div>
+                  <div class="choice_card_index">
+                    <div class="choice_card_index_icon3">
+                      {{ item.createTime ? item.createTime : '-' }}
+                    </div>
+                    <!-- {{ item.enterTime }} -->
+                  </div>
+                  <div class="van-hairline--bottom"></div>
+                  <div class="choice_card_index orderno-box2">
+                    <div :class="orderFee2" >¥{{ item.totalPaidAmount || item.invoiceTotalAmount }}</div>
+                    <div class="orderDetail">查看详情</div>
+                    <!-- <van-icon name="arrow" /> -->
+                  </div>
+                  <!-- <div class="choice_card_index mb0">
+                    停车时长: <span>{{ item.serviceMin | parkingTime }}</span>  _{{
+                      item.serviceMin
+                    }}
+                  </div> -->
+                </div>
+                <!-- 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>
+        
+      </div>
+    </div>
+    <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>
+    </div>
+    <div class="flewx" v-if="tabIndex == 1">
+      <div class="priceBtn">
+        <div>
+          开票金额
+          <span class="price">{{ totalNum }} 元</span>
+        </div>
+        <div
+          :class="{
+            flewx_index3: true,
+            blue_flewx_index3: custTypeId === 1,
+            green_flewx_index3: custTypeId === 2,
+          }"
+          @click="goToInvoicing"
+        >
+          去开票
+        </div>
+      </div>
+    </div>
+  </div>
 </template>
 
 <script>
-import officeBlueCom from '../components/officeBlue/parkingReceipt/parkingReceipt.vue';
-import baseParkingFeeCom from '../components/base/parkingReceipt/parkingReceipt.vue';
-import baseMixins from '../mixins/base'
-// import parkingReceipt from '../components/purple/parkingReceipt/parkingReceipt.vue';
+import parkingReceiptCouponJs from '../mixins/parkingReceipt/parkingReceipt';
+import baseMixins from '../mixins/base';
 export default {
-  mixins:[baseMixins],
-  components: {
-    officeBlueCom,
-    baseParkingFeeCom,
-    // purpleCom: parkingReceipt
-  },
-  mounted() {
-    // this.componentName = 'purpleCom';
-  }
-  // mounted() {
-  //   // this.componentName = 'baseParkingFeeCom';
-  // }
+  mixins: [baseMixins, parkingReceiptCouponJs],
 };
 </script>
+
+<style lang="less" scoped>
+.scroll-Y {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  height: 100vh;
+  // padding-bottom: 100px;
+  background: #F4F7FF;
+
+  .choice {
+    width: 750px;
+    background-color: #fafbff;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 30px;
+    height: 88px;
+    position: fixed;
+    top: 0;
+    left: 0;
+
+    div {
+      width: 30%;
+      text-align: center;
+      height: 78px;
+      line-height: 78px;
+    }
+
+    .actived {
+      color: var(--k-color-primary-01);
+    }
+  }
+
+  .choice_select {
+    width: 750px;
+    height: 10px;
+    background-color: #fafbff;
+    position: fixed;
+    top: 74px;
+    left: 0;
+
+    div {
+      width: 64px;
+      height: 4px;
+      border-radius: 2px;
+      background-color: var(--k-color-primary-01);
+    }
+
+    .choice_select_ews {
+      transform: translateX(230px);
+      transition-duration: 0.1s;
+    }
+
+    .choice_select_ew {
+      transform: translateX(455px);
+      transition-duration: 0.1s;
+    }
+  }
+
+  .shanghaiClassify {
+    position: fixed;
+    width: 750px;
+    z-index: 2;
+  }
+
+  .blueClassify {
+    .colorClassify('blue');
+  }
+
+  .greenClassify {
+    .colorClassify('green');
+  }
+
+  .choice_card {
+    margin: 112px 20px 0px;
+    width: 710px;
+
+    // background-color: #fff;
+    .choice_card_item {
+      // border: 2px solid #ddd;
+      background: #FBFCFF;
+      border-radius: 8px;
+      // margin: 20px 0;
+      // border-radius: 20px;
+      // background-color: #fff;
+      .orderNum {
+        font-family: 'PingFang SC';
+        font-style: normal;
+        font-weight: 400;
+        font-size: 28px;
+        padding: 20px 35px;
+        color: #999999;
+        display: flex;
+        justify-content: space-between;
+        .right {
+          font-size: 30px;
+          font-weight: 400;
+          color: var(--k-color-primary-01);
+          line-height: 42px;
+          text-align: right;
+        }
+      }
+      .carno-box {
+        display: flex;
+        justify-content: space-between;
+        .invoiceTitleName {
+          font-family: 'PingFang SC';
+          font-style: normal;
+          font-weight: 400;
+          font-size: 28px;
+          padding: 20px 35px;
+          color: #999999;
+        }
+        .carno {
+          font-size: 36px;
+          font-weight: 600;
+          color: #999999;
+          line-height: 50px;
+          display: flex;
+          justify-content: space-between;
+          width: 100%;
+          .left {
+            flex: 1;
+          }
+          .right {
+            flex: 0 0 40px;
+            font-size: 40px;
+            display: flex;
+            justify-content: right;
+            flex-wrap: nowrap;
+            white-space: nowrap;
+          }
+        }
+
+        .payfee {
+          font-size: 30px;
+          font-weight: 600;
+          color: #999999;
+          line-height: 42px;
+        }
+        .active {
+          color: #333333;
+        }
+      }
+
+      .line {
+        width: 100%;
+        border-bottom: 1px solid #d8dae0;
+        margin-bottom: 20px;
+      }
+
+      .my-not-invoiced-list {
+        display: flex;
+        justify-content: space-between;
+        .left {
+          flex: 1;
+        }
+        .invoiceHeader {
+          font-family: 'PingFang SC';
+          font-style: normal;
+          font-weight: 600;
+          font-size: 32px;
+          padding: 11px 35px;
+          
+        }
+        .right {
+          flex: 0 0 40px;
+          font-size: 40px;
+          display: flex;
+          justify-content: right;
+          flex-wrap: nowrap;
+          white-space: nowrap;
+        }
+      }
+      .failureReason {
+        margin-top: 10px;
+        text-align: right;
+        font-weight: normal;
+        font-size: 25px;
+        color: #bbb;
+      }
+      .my-invoiced-list {
+        align-items: flex-end;
+        .right {
+          flex: 0 0 150px;
+          font-size: 30px;
+          font-weight: 400;
+          color: var(--k-color-primary-01);
+          line-height: 42px;
+          text-align: right;
+        }
+      }
+
+      .choice_card_index {
+        font-size: 28px;
+        font-weight: 400;
+        color: #999999;
+        line-height: 40px;
+        margin-bottom: 12px;
+        &.mb0 {
+          margin-bottom: 0;
+        }
+      }
+      .choice_card_status {
+        display: flex;
+        white-space: nowrap;
+        align-items: center;
+        //padding-top: 10px;
+      }
+      .try-again {
+        margin-left: 10px;
+        color: #e89e42;
+        border: 1px solid #e89e42;
+        border-radius: 10px;
+        padding: 10px;
+      }
+      .choice_card_index1 {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        //border: 400;
+        border-bottom: 1px solid #f8f8f8;
+        padding: 10px 0;
+        font-size: 28px;
+        margin-bottom: 10px;
+      }
+
+      .choice_card_index2 {
+        // padding-top: 20px;
+        color: #bbbbbb;
+      }
+
+      .choice_card_index3 {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        color: #bbbbbb;
+      }
+
+      .choice_card_index4 {
+        color: #bbbbbb;
+        // padding-bottom: 20px;
+      }
+      .choice_card_index {
+        // width: calc(100% - 48px);
+        font-size: 28px;
+        font-weight: 400;
+        color: #999999;
+        line-height: 40px;
+        margin-bottom: 12px;
+        display: flex;
+        padding: 11px 35px;
+
+        .choice_card_index_icon {
+          width: 50%;
+          height: 40px;
+          line-height: 40px;
+          display: flex;
+          color: #333;
+          .car-icon {
+            margin-right: 12px;
+          }
+        }
+        .choice_card_index_icon3 {
+          // width: 50%;
+          height: 40px;
+          line-height: 40px;
+          display: flex;
+          color: #333;
+          .car-icon {
+            margin-right: 12px;
+          }
+        }
+        .bg_parkingRoom {
+          background-color: #f4f7ff;
+          width: 100%;
+          padding: 15px 0;
+        }
+        .choice_card_index_text {
+          display: inline-block;
+          line-height: 40px;
+          font-family: 'PingFang SC';
+          font-style: normal;
+          font-weight: 400;
+          font-size: 28px;
+          color: #666;
+        }
+        .choice_card_index_text2 {
+          display: inline-block;
+          line-height: 40px;
+          font-family: 'PingFang SC';
+          font-style: normal;
+          font-weight: 400;
+          font-size: 28px;
+          color: #333;
+        }
+        // justify-content: space-between;
+        &.mt0 {
+          margin-top: 0;
+        }
+        &.mb0 {
+          margin-bottom: 0;
+        }
+        &.pb0 {
+          padding-bottom: 0;
+        }
+        .status-box {
+          font-size: 30px;
+          font-weight: 400;
+          color: #064c8a;
+          line-height: 42px;
+          &.other {
+            color: #999999;
+          }
+        }
+      }
+      .orderno-box {
+        display: flex;
+        justify-content: space-between;
+        font-weight: 600;
+        color: #333;
+        padding-top: 31px;
+        line-height: 28px;
+      }
+      .orderno-box2 {
+        display: flex;
+        justify-content: space-between;
+        font-weight: 600;
+        color: #333;
+      }
+      .orderFee {
+        font-family: 'PingFang SC';
+        font-style: normal;
+        font-weight: 500;
+        font-size: 34px;
+        line-height: 40px;
+        color:#999;
+        // vertical-align: middle;
+        align-self: center;
+        // margin-top:5px;
+        // padding: 10px 0;
+      }
+      .orderFee2 {
+        font-family: 'PingFang SC';
+        font-style: normal;
+        font-weight: 500;
+        font-size: 34px;
+        line-height: 40px;
+        color:#333;
+        // vertical-align: middle;
+        align-self: center;
+        // margin-top:5px;
+        // padding: 10px 0;
+      }
+      .active {
+          color: #333333;
+        }
+      .orderDetail {
+        border: 1px solid #333333;
+        border-radius: 32.5px;
+        padding: 5px 33px;
+        font-family: 'PingFang SC';
+        font-style: normal;
+        font-weight: 400;
+        font-size: 28px;
+      }
+    }
+  }
+}
+
+.suggestion-list {
+  display: flex;
+  flex-direction: column;
+  // background: #fff;
+  border-radius: 15px;
+}
+
+.flewx {
+  width: 100%;
+  //height: 150px;
+  padding-top: 20px;
+  background-color: #fafbff;
+  position: fixed;
+  bottom: 0;
+  display: flex;
+  align-items: center;
+  // justify-content: space-between;
+  padding-bottom: 25px;
+  //padding-bottom: constant(safe-area-inset-bottom);
+  //padding-bottom: env(safe-area-inset-bottom);
+
+  // .checkAll {
+  // 	.checkboxItem {
+  // 		position: relative;
+  // 		top: -2px;
+  // 	}
+  // }
+  .priceBtn {
+    width: 100%;
+    padding: 0 30px 20px;
+    display: flex;
+    align-items: center;
+    margin-right: 20px;
+    justify-content: space-between;
+    font-size: 28px;
+    font-weight: 400;
+    color: #333333;
+
+    .price {
+      font-size: 36px;
+      font-weight: 600;
+      color: #333333;
+      line-height: 50px;
+    }
+
+    .flewx_index3 {
+      width: 150px;
+      height: 70px;
+      border-radius: 40px;
+      text-align: center;
+      font-size: 28px;
+      line-height: 70px;
+      color: #fff;
+      background: var(--k-color-primary-01);
+      border-radius: 45px;
+      font-size: 34px;
+      font-weight: 400;
+      color: #ffffff;
+    }
+
+    .blue_flewx_index3 {
+      .color-background-color('blue');
+    }
+
+    .green_flewx_index3 {
+      .color-background-color('green');
+    }
+  }
+}
+
+.uni-input_type {
+  width: 42px;
+  height: 42px;
+  margin-right: 10px;
+  border: 1px solid #f2f2f2;
+  border-radius: 50%;
+
+  img {
+    width: 40px;
+    height: 40px;
+  }
+}
+
+.noData {
+  width: 100%;
+  padding-top: 15%;
+  text-align: center;
+  background: none;
+  margin: 0 auto;
+
+  img {
+    width: 200px;
+    margin-bottom: 2%;
+  }
+
+  span {
+    color: #999;
+    display: block;
+  }
+}
+.page-no-more {
+  width: 100%;
+  position: relative;
+  text-align: center;
+  box-sizing: border-box;
+  margin-top: 40px;
+  font-size: 22px;
+  font-weight: 400;
+  color: #999999;
+  line-height: 41px;
+  background:rgba(255,255,255,0);
+  padding:0 24px;
+  &::before {
+    content: '';
+    display: block;
+    width: calc(40% - 49px);
+    position: absolute;
+    left: 49px;
+    top: 16px;
+    border-top: 1px dashed #cfcfcf;
+  }
+  &::after {
+    content: '';
+    display: block;
+    width: calc(40% - 49px);
+    position: absolute;
+    right: 49px;
+    top: 16px;
+    border-top: 1px dashed #cfcfcf;
+  }
+}
+.choice_card {
+  width: calc(100% - 48px);
+  margin: 43px 24px;
+  // margin-top: 30px;
+  // padding: 30px;
+  // border-radius: 20px;
+  position: relative;
+  background-color: #fafbff;
+  border-radius: 4px;
+  // border: 1px solid #d8dae0;
+  &.mt30 {
+    margin-top: 30px;
+  }
+  .carno-box {
+    display: flex;
+    padding-bottom: 18px;
+    // border-bottom: 1px solid #d8dae0;`
+    justify-content: space-between;
+    .carno {
+      font-family: 'PingFang SC';
+      font-style: normal;
+      font-weight: 400;
+      font-size: 28px;
+      line-height: 5.6vw;
+      color: #999999;
+      padding: 20px 35px;
+    }
+    .servicefee {
+      font-size: 30px;
+      font-weight: 600;
+      color: #333333;
+      line-height: 42px;
+    }
+    .status-box {
+      font-family: 'PingFang SC';
+      font-style: normal;
+      font-weight: 400;
+      font-size: 30px;
+      color: var(--k-color-primary-01);
+      line-height: 42px;
+      &.other {
+        color: #b15124;
+      }
+    }
+  }
+}
+
+</style>

src/pages/parkingFee/vehicleAddOrEdit.vue

@@ -1,21 +1,477 @@
 <template>
-  <component :is="componentName" :theme="theme"></component>
+  <div :class="theme" style="background-color: #f4f7ff">
+    <scroll-view class="wrap">
+      <div class="car-number-box">
+        <div :style="{ border: custTypeId === 0 ? '' : '1px solid #C69C6D' }">
+          <div class="switch-container" v-if="custTypeId === 0">
+            <div class="car-type">车牌类型</div>
+            <div class="switch">
+              <div
+                v-for="(item, index) in licensePlateTypeArr"
+                :key="index"
+                :class="index == carType ? 'switch-active' : ''"
+                @click="toggleType(index)"
+              >
+                {{ item.label }}
+              </div>
+            </div>
+          </div>
+          <!--  -->
+          <div class="switch-container-else" v-else>
+            <div
+              v-for="(item, index) in licensePlateTypeArr"
+              :key="index"
+              class="switch-item"
+              :class="index == carType ? 'switch-selected' : 'switch-else'"
+              @click="toggleType(index)"
+            >
+              <div
+                :class="
+                  index == carType ? 'switch-blue-color' : 'switch-blue-bg'
+                "
+                v-if="custTypeId === 1"
+              >
+                {{ item.label }}
+              </div>
+              <div
+                :class="
+                  index == carType ? 'switch-green-color' : 'switch-green-bg'
+                "
+                v-if="custTypeId === 2"
+              >
+                {{ item.label }}
+              </div>
+              <div class="switch-line" v-if="index == carType"></div>
+            </div>
+          </div>
+          <div
+            class="input-box"
+            :style="{ margin: custTypeId === 0 ? '' : '0 44px 0 35px' }"
+          >
+            <div
+              class="li"
+              @click="clickShowKeyboard(0)"
+              :style="{
+                color:
+                  custTypeId === 0
+                    ? '#333'
+                    : custTypeId === 1
+                    ? '#333 '
+                    : '#333',
+              }"
+              :class="[active === 0 ? 'active' : '']"
+            >
+              {{ numArr[0] }}
+            </div>
+            <div
+              class="li"
+              @click="clickShowKeyboard(1)"
+              :style="{
+                color:
+                  custTypeId === 0
+                    ? '#333'
+                    : custTypeId === 1
+                    ? '#333 '
+                    : '#333',
+              }"
+              :class="[active === 1 ? 'active' : '']"
+            >
+              {{ numArr[1] }}
+            </div>
+            <div
+              class="dot"
+              :style="{
+                color:
+                  custTypeId === 0
+                    ? '#333'
+                    : custTypeId === 1
+                    ? '#333 '
+                    : '#333',
+              }"
+            >
+              ·
+            </div>
+            <div
+              class="li"
+              @click="clickShowKeyboard(2)"
+              :style="{
+                color:
+                  custTypeId === 0
+                    ? '#333'
+                    : custTypeId === 1
+                    ? '#333 '
+                    : '#333',
+              }"
+              :class="[active === 2 ? 'active' : '']"
+            >
+              {{ numArr[2] }}
+            </div>
+            <div
+              class="li"
+              @click="clickShowKeyboard(3)"
+              :style="{
+                color:
+                  custTypeId === 0
+                    ? '#333'
+                    : custTypeId === 1
+                    ? '#333 '
+                    : '#333',
+              }"
+              :class="[active === 3 ? 'active' : '']"
+            >
+              {{ numArr[3] }}
+            </div>
+            <div
+              class="li"
+              @click="clickShowKeyboard(4)"
+              :style="{
+                color:
+                  custTypeId === 0
+                    ? '#333'
+                    : custTypeId === 1
+                    ? '#333 '
+                    : '#333',
+              }"
+              :class="[active === 4 ? 'active' : '']"
+            >
+              {{ numArr[4] }}
+            </div>
+            <div
+              class="li"
+              @click="clickShowKeyboard(5)"
+              :style="{
+                color:
+                  custTypeId === 0
+                    ? '#333'
+                    : custTypeId === 1
+                    ? '#333 '
+                    : '#333',
+              }"
+              :class="[active === 5 ? 'active' : '']"
+            >
+              {{ numArr[5] }}
+            </div>
+            <div
+              class="li"
+              @click="clickShowKeyboard(6)"
+              :style="{
+                color:
+                  custTypeId === 0
+                    ? '#333'
+                    : custTypeId === 1
+                    ? '#333 '
+                    : '#333',
+              }"
+              :class="[active === 6 ? 'active' : '']"
+            >
+              {{ numArr[6] }}
+            </div>
+            <div
+              v-if="carType == 1"
+              class="li"
+              @click="clickShowKeyboard(7)"
+              :style="{
+                color:
+                  custTypeId === 0
+                    ? '#333'
+                    : custTypeId === 1
+                    ? '#333 '
+                    : '#333',
+              }"
+              :class="[active === 7 ? 'active' : '']"
+            >
+              <span v-if="numArr[7]">{{ numArr[7] }}</span>
+            </div>
+          </div>
+        </div>
+
+        <div class="reminder">
+          <div class="reminder-title">温馨提示:</div>
+          <div class="reminder-content">
+            ·用户可以添加多个"燃油车牌号"或"新能源车牌号"
+          </div>
+          <div class="reminder-content">·用户可以更改或删除已经绑定车牌</div>
+        </div>
+      </div>
+    </scroll-view>
+    <div class="btn-box">
+      <div class="btnpb"></div>
+      <div
+        class="confirm-btn"
+        :class="disabledBtn ? 'disabled-btn' : ''"
+        :disabled="disabledBtn"
+        @click="handleAddLicensePlateByKipMember"
+      >
+        确认{{ carInfo.id ? '修改' : '添加' }}
+      </div>
+    </div>
+    <plate-number
+      ref="plateKeyboard"
+      :carType="carType"
+      :active="active"
+      :ind="ind"
+      :numArr="numArr"
+      @carnoArr="updateCarno"
+      :disBtn="[38]"
+    ></plate-number>
+  </div>
 </template>
 
 <script>
-import officeBlueCom from './components/officeBlue/vehicleAddOrEdit.vue';
-import baseParkingFeeCom from './components/base/vehicleAddOrEdit.vue';
-import purpleCom from './components/purple/vehicleAddOrEdit.vue';
+import vehicleAddOrEditJs from './mixins/vehicleAddOrEdit'
 import baseMixins from './mixins/base'
 export default {
-  mixins:[baseMixins],
-  components: {
-    officeBlueCom,
-    baseParkingFeeCom,
-    purpleCom
-  },
-  mounted() {
-    this.componentName = 'purpleCom';
-  }
-};
+  mixins:[baseMixins, vehicleAddOrEditJs]
+}
 </script>
+
+<style lang="less" scoped>
+.wrap {
+  // padding: 30px;
+
+  .car-number-box {
+    margin-top: 24px;
+    padding: 30px;
+    background-color: #fafbff;
+    border: 1px solid #d8dae0;
+  }
+
+  .switch-container-else {
+    margin-bottom: 72px;
+    width: 100%;
+    display: flex;
+    flex-direction: row;
+    justify-content: space-around;
+    align-items: center;
+    font-size: 28px;
+
+    .switch-item:nth-of-type(1) {
+      .switch-else {
+        border-right: 1px solid #c69c6d;
+      }
+    }
+
+    .switch-item:nth-of-type(2) {
+      .switch-else {
+        border-right: 1px solid #c69c6d;
+      }
+    }
+
+    .switch-item {
+      width: 33.3%;
+      height: 78px;
+      line-height: 78px;
+      text-align: center;
+    }
+
+    .switch-green-bg {
+      background: #0d6b38;
+      color: #ffffff;
+      box-sizing: border-box;
+    }
+
+    .switch-green-color {
+      color: #0d6b38;
+    }
+
+    .switch-blue-bg {
+      background: #023694;
+      color: #ffffff;
+      box-sizing: border-box;
+    }
+
+    .switch-blue-color {
+      color: #023694;
+    }
+
+    .switch-line {
+      width: 104px;
+      height: 3px;
+      margin: 10px auto 0;
+      background: #c69c6d;
+      opacity: 1;
+    }
+  }
+
+  .switch-container {
+    margin-bottom: 10px;
+    width: 100%;
+    margin-left: -1px;
+    font-size: 24px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    font-size: 30px;
+
+    .car-type {
+      font-size: 34px;
+      font-weight: 600;
+      color: #333333;
+      line-height: 50px;
+      // width: 144px;
+      margin-right: 54px;
+    }
+
+    .switch {
+      flex: 1;
+      font-size: 28px;
+      width: 470px;
+      display: flex;
+      justify-content: space-around;
+      align-items: center;
+      border: 1px solid #999999;
+      height: 54px;
+      color: #999999;
+      overflow: hidden;
+      border-radius: 50px;
+
+      div {
+        height: 100%;
+        border-radius: 27px;
+        line-height: 54px;
+        text-align: center;
+      }
+
+      div:nth-child(1) {
+        width: 37%;
+      }
+
+      div:nth-child(2) {
+        width: 36%;
+      }
+
+      div:nth-child(3) {
+        width: 37%;
+      }
+
+      .switch-active {
+        color: #fff;
+        background-image: linear-gradient(to right, #7e4fa1, #433c7f);
+        background: var(--k-color-primary-01, #064c8a);
+      }
+    }
+  }
+
+  .input-box {
+    // width: 100%;
+    height: 100px;
+    margin: auto;
+    // background: rgba(255, 255, 255, 1);
+    border-radius: 0.4rem;
+    margin: 1rem auto;
+    display: flex;
+    justify-content: center;
+
+    .li:first-child {
+      // border-top-left-radius: 20px;
+      // border-bottom-left-radius: 20px;
+    }
+
+    .li {
+      flex: 1;
+      border: 1px solid rgba(206, 208, 210, 1);
+      box-sizing: border-box;
+      margin: 0 2px;
+      font-size: 50px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      color: #333333;
+      border-radius: 4px;
+      background-color: #f4f7ff;
+      margin-right: 26px;
+
+      img {
+        width: 80%;
+        height: 100%;
+      }
+
+      &.active {
+        border-color: #333333;
+      }
+      &:last-child {
+        margin-right: 0;
+      }
+    }
+
+    .dot {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      font-size: 120px;
+      color: #333333;
+      margin-right: 18px;
+    }
+  }
+
+  .reminder {
+    margin-top: 20px;
+
+    .reminder-title {
+      margin-bottom: 8px;
+    }
+
+    .reminder-content {
+      font-size: 26px;
+      padding-top: 3px;
+      color: #898989;
+    }
+  }
+}
+.btn-box {
+  position: fixed;
+  bottom: 0;
+  right: 0;
+  left: 0;
+  background-color: #f9f9ff;
+  padding: 30px;
+  box-shadow: 0px 13px 33px 0px rgba(190, 187, 187, 0.2);
+
+  &.btnpb {
+    width: 100%;
+    padding-bottom: constant(safe-area-inset-bottom);
+    padding-bottom: env(safe-area-inset-bottom);
+  }
+
+  .confirm-btn {
+    color: #fff;
+    margin: 0 auto;
+    height: 90px;
+    width: 98%;
+    line-height: 90px;
+    font-size: 34px;
+    text-align: center;
+    background: var(--k-color-primary-01, #064c8a);
+    border-radius: 45px;
+  }
+
+  .confirm-btn-else {
+    width: 636px;
+    height: 90px;
+    color: white;
+    line-height: 90px;
+    text-align: center;
+    font-size: 34px;
+    opacity: 1;
+    border-radius: 45px;
+    background: #d8dae0;
+    margin: 64px auto 31px;
+  }
+
+  .confirm-btn-blue {
+    background: #023694;
+  }
+
+  .confirm-btn-green {
+    background: #0d6b38;
+  }
+
+  .disabled-btn {
+    background-color: #d8dae0;
+    background-image: none;
+    font-size: 34px;
+    font-weight: 400;
+    color: #ffffff;
+  }
+}
+</style>

src/pages/parkingFee/vehicleManagement.vue

@@ -1,16 +1,471 @@
 <template>
-  <component :is="componentName"></component>
+  <div :class="theme">
+    <scroll-view scroll-y="true" :class="['scroll-Y']">
+      <!-- 登录校验 -->
+      <!-- <authorize ref="authorize"></authorize> -->
+      <!-- <LoginDom></LoginDom> -->
+      <div class="wrap">
+        <div class="wrap_plate">我的车牌</div>
+<!--        <div v-else class="wrap_plate">车牌号绑定</div>-->
+        <div
+          class="plate_plate"
+          :class=" 'linear-gradient-' + item.licensePlateType "
+          v-for="item in licensePlateList"
+          :key="item.id"
+        >
+          <div class="plate_border">
+            <div
+              class="plate_tag"
+              :class="'bgc-' + item.licensePlateType"
+            ></div>
+            <div
+              class="plate_plate_index plate_plate_index1"
+              :style="{
+                padding: '0 0 0 14px',
+              }"
+            >
+              我的车牌
+            </div>
+            <div class="plate_plate_index plate_plate_index2">
+              {{ item.vehicleNo | formatCarno }}
+            </div>
+            <div class="plate_plate_index plate_plate_index3 bb">
+              <img
+                class="car-icon"
+                :src="require(`../../static/images/icon-carType.png`)"
+              />
+              <div>车牌类型</div>
+              <div class="licensePlateTypeDesc">
+                {{ item.licensePlateTypeDesc }}
+              </div>
+            </div>
+            <!-- <div class="plate_tag-icon" :class="
+            item.licensePlateType === 'NEW_ENERGY_CAR_NO'
+              ? 'plate_tag_icon_green'
+              : item.licensePlateType === 'ORDINARY_CAR_NO'
+              ? 'plate_tag_icon_blue'
+              : ''
+          " v-if="custTypeId > 0"></div> -->
+            <div class="plate_plate_index plate_plate_index4">
+              <div class="item" @click.stop="toPay(item.vehicleNo)">
+                <img :src="require(`./static/images/icon-edit.png`)" alt="" /><span>查询</span>
+              </div>
+              <div class="item" @click="toEdit(item)">
+                <img :src="require(`./static/images/icon-find.png`)" alt="" /><span
+                  >编辑</span
+                >
+              </div>
+              <div class="item" @click="toDelete(item)">
+                <img :src="require(`./static/images/icon-del-white.png`)" alt="" /><span
+                  >删除</span
+                >
+              </div>
+              <!-- <div class="plate_plate_index4_index2">
+              <img src="static/images/money.png" @click="toPay(item.vehicleNo)" />
+              <img src="static/images/update.png" class="mrg-left-20" @click="toEdit(item)" />
+              <img src="static/images/delete.png" class="mrg-left-20" @click="toDelete(item)" />
+            </div> -->
+            </div>
+          </div>
+        </div>
+        <div
+          class="add_plate_no_data"
+          v-if="!licensePlateList.length"
+          @click="toAdd"
+        >
+          添加车牌+
+        </div>
+        <div class="wrap_plate mt36">
+          <div class="title">温馨提示:</div>
+          <div class="desc">·用户可以添加多个"燃油车牌号"或"新能源车牌号"</div>
+          <div class="desc">·用户可以更改或删除已经绑定车牌</div>
+        </div>
+      </div>
+    </scroll-view>
+    <van-popup v-model="deleteDialogSwitch" position="center">
+      <div class="popup-dialog">
+        <div class="dialog-title">
+          <span class="dialog-title-text">删除已绑定车牌</span>
+        </div>
+        <div class="dialog-content border-top">
+          <span class="dialog-content-text">是否确认删除已经绑定车牌</span>
+          <span class="dialog-content-carno">{{ activeCarno }}</span>
+        </div>
+        <div class="dialog-button-group">
+          <div class="dialog-button" @click="cancelDelete">
+            <span class="dialog-button-text">取消</span>
+          </div>
+          <div class="dialog-button border-left" @click="doDelete">
+            <span class="dialog-button-text">确定</span>
+          </div>
+        </div>
+      </div>
+    </van-popup>
+    <van-popup v-model="deleteSuccessDialogSwitch" position="center">
+      <div class="popup-dialog">
+        <div class="dialog-content">
+          <uni-icons
+            type="checkbox-filled"
+            size="60"
+            color="#7DB124"
+          ></uni-icons>
+          <span class="dialog-content-text">删除成功</span>
+        </div>
+        <div class="dialog-button-group">
+          <div class="dialog-button" @click="confirmDialog">
+            <span class="dialog-button-text">确定</span>
+          </div>
+        </div>
+      </div>
+    </van-popup>
+    <div
+      class="add_plate_box"
+      v-if="licensePlateList.length && licensePlateList.length < 3"
+      @click="toAdd"
+    >
+      <div class="add_plate_btn">+添加车牌号</div>
+      <div class="btnpb"></div>
+    </div>
+  </div>
 </template>
 
 <script>
-import officeBlueCom from './components/officeBlue/vehicleManagement.vue';
-import baseParkingFeeCom from './components/base/vehicleManagement.vue';
+import vehicleManagementJs from './mixins/vehicleManagement'
 import baseMixins from './mixins/base'
 export default {
-  mixins:[baseMixins],
-  components: {
-    officeBlueCom,
-    baseParkingFeeCom,
-  },
-};
+  mixins:[baseMixins,vehicleManagementJs]
+}
 </script>
+
+<style lang="less" scoped>
+.scroll-Y {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  height: 100vh;
+  background: #f4f7ff;
+}
+
+.wrap {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+
+  .wrap_plate {
+    margin-top: 24px;
+    margin-left: 40px;
+    font-size: 30px;
+
+    &.mt36 {
+      margin-top: 36px;
+    }
+
+    .title {
+      // width: 180px;
+      // height: 50px;
+      font-size: 36px;
+      // font-family: PingFangHK-Semibold, PingFangHK;
+      font-weight: 600;
+      color: #333333;
+      line-height: 50px;
+      margin-bottom: 20px;
+    }
+
+    .desc {
+      font-size: 30px;
+      font-weight: 400;
+      color: #999999;
+      line-height: 45px;
+    }
+  }
+
+  .border-change {
+    border: 4px solid #707070;
+  }
+
+  .plate_tag-icon {
+    position: absolute;
+    left: 0;
+    top: 40px;
+    width: 20px;
+    height: 13px;
+    opacity: 1;
+    border-radius: 0px 12px 1px 0px;
+  }
+
+  .plate_tag_icon_green {
+    background: #39b54a;
+  }
+
+  .plate_tag_icon_blue {
+    background: #29abe2;
+  }
+
+  .plate_plate {
+    width: 670px;
+    margin-left: 40px;
+    margin-top: 20px;
+    padding: 4px;
+    border-radius: 20px 128px 20px 20px;
+
+    .plate_border {
+      // border-radius: 17px 125px 17px 17px;
+      background-color: var(--k-color-primary-01, #064c8a);
+      border-radius: 4px;
+      padding: 30px;
+      color: #ffffff;
+
+      .plate_tag {
+        display: inline-block;
+        width: 23px;
+        height: 14px;
+        border-top-right-radius: 18px;
+      }
+
+      .bgc-0 {
+        background-color: #29abe2;
+      }
+
+      .bgc-1 {
+        background-color: #39b54a;
+      }
+
+      .bgc-2 {
+        background-color: #bc9f6d;
+      }
+    }
+
+    .plate_plate_index {
+      padding-left: 37px;
+      padding-top: 10px;
+      font-size: 26px;
+    }
+
+    .plate_plate_index1,
+    .plate_plate_index3 {
+      font-size: 28px;
+      font-weight: 400;
+      color: #ffffff;
+      line-height: 40px;
+      display: flex;
+      align-items: center;
+
+      .car-icon {
+        width: 40px;
+        height: 40px;
+        margin-right: 10px;
+      }
+
+      .licensePlateTypeDesc {
+        margin-left: 5px;
+        font-size: 28px;
+        font-weight: 500;
+        color: #ffffff;
+        line-height: 40px;
+        margin-left: 20px;
+      }
+
+      &.bb {
+        padding-bottom: 23px;
+        margin-bottom: 23px;
+        border-bottom: 1px solid #ffffff;
+      }
+    }
+
+    .plate_plate_index1 {
+      display: inline-block;
+      padding-left: 14px;
+    }
+
+    .plate_plate_index2 {
+      font-weight: 500;
+      font-size: 38px;
+      font-weight: 600;
+      color: #ffffff;
+      line-height: 53px;
+    }
+
+    .plate_plate_index4 {
+      display: flex;
+      justify-content: space-around;
+
+      .plate_plate_index4_index2 {
+        width: 164px;
+      }
+
+      .item {
+        width: 33.33%;
+        font-size: 28px;
+        font-weight: 400;
+        color: #ffffff;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        position: relative;
+
+        &::after {
+          content: '';
+          width: 1px;
+          height: 30px;
+          position: absolute;
+          right: 8%;
+          background-color: rgba(255, 255, 255, 0.3);
+        }
+
+        &:last-child {
+          &::after {
+            width: 0px;
+          }
+        }
+
+        img {
+          width: 45px;
+          height: 45px;
+          // margin-right: 10px;
+        }
+
+        span {
+          flex: 0 0 50%;
+          text-align: left;
+        }
+      }
+    }
+  }
+
+  .linear-gradient-ORDINARY_CAR_NO {
+    // background-image: linear-gradient(#29abe2, #2e3393);
+  }
+
+  .linear-gradient-NEW_ENERGY_CAR_NO {
+    // background-image: linear-gradient(#8bc63f, #026937);
+  }
+
+  .linear-gradient-SPECIAL_CAR_NO {
+    // background-image: linear-gradient(#caa86e, #666666);
+  }
+
+  .mrg-left-20 {
+    margin-left: 20px;
+  }
+}
+
+.popup-dialog {
+  // width: 300px;
+  border-radius: 10px;
+  background-color: #fff;
+}
+
+.dialog-title {
+  flex-direction: row;
+  justify-content: center;
+  padding-top: 10px;
+  padding-bottom: 10px;
+}
+
+.dialog-title-text {
+  font-size: 16px;
+  font-weight: 500;
+}
+
+.dialog-content {
+  /* #ifndef APP-NVUE */
+  display: flex;
+  /* #endif */
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  padding: 15px;
+}
+
+.border-top {
+  border-top-color: #f5f5f5;
+  border-top-style: solid;
+  border-top-width: 1px;
+}
+
+.dialog-content-text {
+  font-size: 14px;
+}
+
+.dialog-content-carno {
+  font-weight: 500;
+  font-size: 16px;
+  margin-top: 8px;
+}
+
+.dialog-button-group {
+  /* #ifndef APP-NVUE */
+  display: flex;
+  /* #endif */
+  flex-direction: row;
+  border-top-color: #f5f5f5;
+  border-top-style: solid;
+  border-top-width: 1px;
+}
+
+.dialog-button {
+  /* #ifndef APP-NVUE */
+  display: flex;
+  /* #endif */
+
+  flex: 1;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+  height: 45px;
+}
+
+.border-left {
+  border-left-color: #f0f0f0;
+  border-left-style: solid;
+  border-left-width: 1px;
+}
+
+.dialog-button-text {
+  font-size: 14px;
+  color: #6e6e6e;
+}
+
+.add_plate_no_data {
+  width: 90%;
+  height: 200px;
+  text-align: center;
+  line-height: 200px;
+  // border: 1px dashed #eaeaea;
+  border: 1px solid #d8dae0;
+  margin-left: 40px;
+  margin-top: 20px;
+  color: #999999;
+  background-color: #fafbff;
+}
+.add_plate_box {
+  text-align: center;
+  // border: 1px dashed #eaeaea;
+  background-color: #fafbff;
+  position: fixed;
+  bottom: 0;
+  right: 0;
+  left: 0;
+  z-index: 999;
+  padding: 30px 30px 0 30px;
+  box-shadow: 0px 13px 33px 0px rgba(190, 187, 187, 0.2);
+  .btnpb {
+    width: 100%;
+    padding-bottom: 30px;
+    margin-bottom: 30px;
+    padding-bottom: constant(safe-area-inset-bottom);
+    padding-bottom: env(safe-area-inset-bottom);
+  }
+  .add_plate_btn {
+    width: 100%;
+    // margin-left: 30px;
+    height: 90px;
+    line-height: 90px;
+    background-color: var(--k-color-primary-01);
+    border-radius: 45px;
+    font-size: 34px;
+    font-weight: 400;
+    color: #ffffff;
+  }
+}
+</style>