Merge pull request #78 from John-Hong/release-2.8.0

Release 2.8.0

src/pages/parkingFee/components/base/parkingReceipt/parkingChooseHeader.vue

@@ -43,7 +43,7 @@
                     </div>
                   </div>
                 </div>
-                <div class="duty-paragraph">
+                <div class="duty-paragraph" v-if="item.invoiceTitleType === 'COMPANY'">
                   税号 {{ item.taxNo }}
                 </div>
               </div>

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

@@ -2,44 +2,44 @@
   <scroll-view class="scroll-Y" scroll-y >
     <!-- <wx-points-commit ref='wxPointsCommit'></wx-points-commit> -->
     <div>
-      <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 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">{{ header.invoiceTitle.invoiceTitleType === 'COMPANY' ? '单位' : '个人/非企业单位'}}</div>
+          <div class="part-item-value">{{ header.invoiceTitleType === 'COMPANY' ? '单位' : '个人/非企业单位'}}</div>
         </div>
         <div class="part-item">
           <span class="part-item-key">抬头名称</span>
-          <span class="part-item-value">{{ header.invoiceTitle.titleName }}</span>
+          <span class="part-item-value">{{ header.titleName }}</span>
         </div>
       </div>
     </div>

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

@@ -6,7 +6,7 @@
         <div class="part-item lines header">
           <span class="part-item-key">抬头</span>
           <div class="part-item-value" @click="showHeader">
-            {{ order.invoiceTitle.titleName }}
+            {{ order.invoiceTitle.titleName || 'order' }}
             <img class="invoice-header-arrow" :src="arrowIcon" mode="widthFix" />
           </div>
         </div>

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

@@ -943,7 +943,7 @@ export default {
     padding-bottom: 20px;
     font-size: 30px;
     color: #999999;
-    font-weight: 400;
+    // font-weight: 400;
   }
 
   .warp_index1 {

src/pages/parkingFee/components/officeBlue/parkingReceipt/parkingChooseHeader.vue

@@ -40,7 +40,7 @@
                       </div>
                     </div>
                   </div>
-                  <div class="duty-paragraph">
+                  <div class="duty-paragraph" v-if="item.invoiceTitleType === 'COMPANY'">
                     税号 {{ item.taxNo }}
                   </div>
                 </div>

src/pages/parkingFee/components/officeBlue/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/officeBlue/parkingReceipt/parkingInvoice.vue

@@ -4,7 +4,7 @@
       <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 || 'order' }}
           <van-icon name="arrow" size="10" color="#D8DAE0" />
         </div>
       </div>

src/pages/parkingFee/components/officeBlue/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.mailbox }}</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/officeBlue/parkingReceipt/parkingReceipt.vue

@@ -39,7 +39,7 @@
                   <span>{{ item.vehicleNo }}</span>
                 </div>
                 <div class="invoiceTitleName" v-else>
-                  {{ item.titleName }}的停车发票&nbsp;<van-icon
+                  {{ item.invoiceHeader }}&nbsp;<van-icon
                   name="arrow"
                   color="#D8DAE0"
                 />
@@ -129,7 +129,7 @@
       <div class="priceBtn">
         <div>
           开票金额
-          <span class="price">{{ (totalNum / 100).toFixed(2) }} 元</span>
+          <span class="price">{{ totalNum }} 元</span>
         </div>
         <div
           :class="{

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

@@ -0,0 +1,197 @@
+<template>
+  <div
+    scroll-y="true"
+    class="scroll-Y"
+    style="background-color: #f4f7ff"
+  >
+    <div class="detail-box">
+      <div class="parking-info mgb-40">
+        <div class="parking-price">
+          <div class="price">{{ detail.actualPayFee | currency }}</div>
+          <div class="price-text">
+<!--            {{ ['支付成功', '支付失败', '已退款'][detail.payStatus] }}-->
+            {{ detail.refundStatus !== 'NO_REFUND' ? '已退款' : {'PAID': '支付成功', 'FAILED': '支付失败'}[detail.payStatus || 'FAIED'] }}
+          </div>
+        </div>
+        <div class="parking-part">
+          <div class="parking-info-item">
+            <span class="info-key">支付方式</span>
+            <span class="info-value">{{ detail.paymentMethod || '' }}</span>
+          </div>
+          <div class="parking-info-item">
+            <span class="info-key">支付时间</span>
+            <span class="info-value">{{ detail.paymentTime }}</span>
+          </div>
+          <div class="parking-info-item">
+            <span class="info-key">车牌号</span>
+            <span class="info-value">{{ detail.vehicleNo | formatCarno }}</span>
+          </div>
+          <div class="parking-info-item">
+            <span class="info-key">停车场</span>
+            <span class="info-value">{{ detail.parkName }}</span>
+          </div>
+          <div class="parking-info-item">
+            <span class="info-key">订单号</span>
+            <span class="info-value">{{ detail.orderNo }}</span>
+          </div>
+          <div class="parking-info-item">
+            <span class="info-key">入场时间</span>
+            <span class="info-value">{{ detail.enterTime }}</span>
+          </div>
+          <!-- <uni-view class="parking-info-item">
+            <span class="info-key">离场时间</span>
+            <span class="info-value">{{ detail.outtime || "" }}</span>
+          </uni-view> -->
+          <div class="parking-info-item">
+            <span class="info-key">停车时长</span>
+            <span class="info-value">{{ detail.serviceMin | parkingTime }}</span>
+          </div>
+          <div class="parking-info-item pb0">
+            <span class="info-key">开票状态</span>
+            <span class="info-value">{{ detail.invoiceStatusText }}</span>
+          </div>
+        </div>
+      </div>
+      <div class="parking-info mb-save" v-if="detail.discountInfo">
+        <div class="parking-part">
+          <div class="parking-info-item" v-if="false">
+            <!--todo: 杭州首停不显示暂时根据groupId写死-->
+            <span class="info-key">首停优惠</span>
+            <span class="info-value fw">{{
+              (detail.firstParkFee / 100) | currency
+            }}</span>
+          </div>
+          <div class="parking-info-item">
+            <span class="info-key">会员等级减免</span>
+            <span class="info-value fw">{{ detail.discountInfo && detail.discountInfo.memberLevelDiscount | currency }}</span>
+          </div>
+          <div class="parking-info-item">
+            <span class="info-key">消费减免</span>
+            <span class="info-value fw">{{ detail.discountInfo.consumeDiscount | currency }}</span>
+          </div>
+
+          <div class="parking-info-item">
+            <span class="info-key">积分减免</span>
+            <span class="info-value fw">{{ detail.discountInfo.pointsDiscount | currency }}</span>
+          </div>
+          <div class="parking-info-item">
+            <span class="info-key">会员卡券</span>
+            <span class="info-value fw">{{ detail.discountInfo.couponDiscount | currency }}</span>
+          </div>
+          <div class="parking-info-item" v-if="detail.paperCouponCode">
+            <span class="info-key">纸质优惠券</span>
+            <span class="info-value fw">{{ detail.discountInfo.paperCouponDiscount | currency }}</span>
+          </div>
+          <div class="parking-info-item pb0">
+            <span class="info-key">使用优惠总计</span>
+            <span class="info-value fw">{{ (detail.discountInfo.usingTotalDiscount || 0) | currency }}</span>
+          </div>
+          <div
+            class="parking-info-item"
+            v-if="detail.discountInfo.usingTotalDiscount > detail.discountInfo.actualUsedDiscount"
+          >
+            <span class="info-key">实际优惠总计</span>
+            <span class="info-value fw">{{ detail.discountInfo.actualUsedDiscount | currency }}</span>
+          </div>
+        </div>
+        <div class="parking-detail"></div>
+        <div class="parking-part">
+          <div class="parking-info-item">
+            <span class="info-key">应缴</span>
+            <span class="info-value fw">{{
+              detail.totalFee | currency
+            }}</span>
+          </div>
+          <div class="parking-info-item">
+            <span class="info-key">实缴</span>
+            <span class="info-value fw">{{
+              detail.actualPayFee | currency
+            }}</span>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import parkingFeeDetailSuccessJs from '../../mixins/parkingFeeDetailSuccess'
+export default {
+  mixins:[parkingFeeDetailSuccessJs]
+}
+</script>
+
+<style lang="less" scoped>
+.scroll-Y {
+  height: 100vh;
+  overflow-y: scroll;
+  .detail-box {
+    padding: 30px;
+    .parking-info {
+      background: #fafbff;
+      border-radius: 4px;
+      border: 1px solid #d8dae0;
+      .parking-price {
+        text-align: center;
+        padding: 30px 0px 50px;
+        .price {
+          font-size: 60px;
+          font-weight: 600;
+          color: #333333;
+          line-height: 84px;
+        }
+        .price-text {
+          font-weight: 300;
+          font-size: 30px;
+        }
+      }
+      .parking-detail {
+        border-top: 2px solid #f5f5f5;
+        width: calc(100% - 60px);
+        margin-left: 30px;
+      }
+      .parking-part {
+        padding: 30px;
+        .parking-info-item {
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
+          font-size: 32px;
+          padding-bottom: 30px;
+          &.pb0 {
+            padding-bottom: 0;
+          }
+          .info-key {
+            text-align: left;
+            color: #242424;
+            font-size: 30px;
+            font-weight: 400;
+            color: #999999;
+            line-height: 42px;
+          }
+          .info-value {
+            text-align: right;
+            font-size: 30px;
+            font-weight: 400;
+            color: #333333;
+            line-height: 42px;
+            &.fw {
+              font-weight: 600;
+            }
+          }
+          .red {
+            color: #333333;
+          }
+        }
+      }
+    }
+    .mgb-40 {
+      margin-bottom: 24px;
+    }
+    .mb-save {
+      padding-bottom: constant(safe-area-inset-bottom);
+      padding-bottom: env(safe-area-inset-bottom);
+    }
+  }
+}
+</style>

src/pages/parkingFee/components/purple/parkingFeeHint/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/parkingFeeList.vue

@@ -0,0 +1,190 @@
+<template>
+  <scroll-view
+    style="background-color: #f4f7ff"
+    class="scroll-Y"
+    id="slideview"
+    scroll-y
+    lower-threshold="50"
+    scroll-top="0"
+    scroll-left="0"
+    scroll-with-animation="false"
+    enable-back-to-top="false"
+    @scrolltolower="bindscrolltolower"
+  >
+    <div>
+      <!-- <LoginDom></LoginDom> -->
+      <div
+        :class="['choice_card', index === 0 && 'mt30']"
+        v-for="(item, index) in list"
+        :key="index"
+        @click="toDetail(item.id)"
+      >
+        <div class="carno-box">
+          <div class="carno">{{ item.vehicleNo }}</div>
+          <div class="servicefee">{{ item.actualPayFee | currency }}</div>
+        </div>
+        <div class="choice_card_index">{{ item.parkName }} </div>
+        <div class="choice_card_index orderno-box">
+          <div class="orderno">订单号 : {{ item.orderNo }}</div>
+          <van-icon name="arrow" />
+        </div>
+        <div class="choice_card_index">
+          <div>入场时间 : {{ item.enterTime }}</div>
+        </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>
+        </div>
+      </div>
+      <div class="notice-info">
+        <!-- 为确保用户可以执行下滑动作，设置单次响应的数据量为4 -->
+        <div
+          >{{ numberOfElements? '查看更多' : '没有更多数据了' }}
+        </div>
+      </div>
+      <div style="height: 10vh;"></div>
+    </div>
+  </scroll-view>
+</template>
+
+<script>
+import parkingFeeListJs from '../../mixins/parkingFeeList'
+export default {
+  mixins:[parkingFeeListJs]
+}
+</script>
+
+<style lang="less" scoped>
+.scroll-Y {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  height: 100vh;
+  background: #f2f2f2;
+}
+
+.wrap {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+}
+
+.parkingFeeList-item {
+  background: #fff;
+  display: flex;
+  flex-direction: column;
+  margin-top: 8px;
+
+  .item {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 30px 36px;
+    box-sizing: border-box;
+
+    span {
+      font-size: 16px;
+    }
+  }
+
+  .item-bottom {
+    border-top: 1px solid #f2f2f2;
+    display: flex;
+    flex-direction: column;
+    padding: 0px 36px;
+    box-sizing: border-box;
+    padding-top: 8px;
+
+    div {
+      display: flex;
+      flex-direction: column;
+    }
+
+    span {
+      color: #999;
+      font-size: 14px;
+      margin-bottom: 10px;
+    }
+  }
+}
+
+.choice_card {
+  width: calc(100% - 120px);
+  margin-left: 30px;
+  // margin-top: 30px;
+  margin-bottom: 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;
+    margin-bottom: 20px;
+    .carno {
+      font-size: 36px;
+      color: #333333;
+      font-weight: 600;
+      line-height: 50px;
+    }
+    .servicefee {
+      font-size: 30px;
+      font-weight: 600;
+      color: #333333;
+      line-height: 42px;
+    }
+  }
+
+  .choice_card_index {
+    font-size: 28px;
+    font-weight: 400;
+    color: #999999;
+    line-height: 40px;
+    margin-bottom: 12px;
+    display: flex;
+    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;
+  }
+}
+
+.notice-info {
+  text-align: center;
+  color: #b5b3b3;
+  padding-bottom: 30px;
+
+  div {
+    margin-bottom: -7px;
+  }
+}
+</style>

src/pages/parkingFee/components/purple/parkingReceipt/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/parkingReceipt/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/parkingReceipt/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/parkingReceipt/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/parkingReceipt/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/parkingReceipt/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/parkingReceipt/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/parkingReceipt/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/mixins/base.js

@@ -25,5 +25,8 @@ export default {
     if ( this.source === 'KIP' ) {
       this.theme = 'theme-office'
     }
+    // TODO: 根据lbsId动态切换
+    this.theme = 'theme-pudong'
+    // this.theme = 'theme-jingan'
   },
 }

src/pages/parkingFee/mixins/parkingFee.js

@@ -19,12 +19,6 @@ import uni from '@/utils/uniHooks';
 import { parkingLots, qrCodes, unlicensedCarCheckIn } from '@/api/parking';
 
 export default {
-  props:{
-    theme:{
-      type: String,
-      default: ''
-    }
-  },
   components: {
     plateNumber,
     LoginDom,

src/pages/parkingFee/mixins/parkingFeeSuccess.js

@@ -4,12 +4,6 @@ import { mapState } from 'vuex';
 import uni from '@/utils/uniHooks';
 
 export default {
-  props:{
-    theme:{
-      type: String,
-      default: ''
-    }
-  },
   onLoad(params) {
     const parkInfo = JSON.parse(uni.getStorageSync('parkinfo'));
     this.carno = params.carno;

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

@@ -78,7 +78,7 @@ export default {
         title: '发票抬头',
       });
     }, 300);
-    
+    console.log(this.isCompany)
   },
   methods: {
     radioChange: function (value) {
@@ -152,7 +152,7 @@ export default {
         title: '请填写抬头名称',
         icon: 'none',
       });
-      if (!this.condition.taxNo) return uni.showToast({
+      if (!this.condition.taxNo && this.condition.invoiceTitleType === 'COMPANY') return uni.showToast({
           title: '请填写公司税号',
           icon: 'none',
         });

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

@@ -4,11 +4,13 @@ export default {
   data() {
     return {
       header: {},
+      header2: {},
     };
   },
   created() {
     // this.header = JSON.parse(options.header);
-    this.header = JSON.parse(this.$route.query.header);
+    this.header2 = JSON.parse(this.$route.query.header);
+    this.header = this.header2.invoiceTitle
     console.log('获取的发票信息', this.header);
   },
   mounted() {

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

@@ -6,6 +6,12 @@ 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/parkingInvoiceImage.js

@@ -20,9 +20,6 @@ export default {
   },
   created() {
     this.order = JSON.parse(this.$route.query.order);
-    // this.order = {
-    //   mailbox: '1212'
-    // }
     this.getEmail()
   },
   mounted() {
@@ -55,77 +52,21 @@ export default {
         });
       }
     },
-    pushAgain: async function (id) {
-      const self = this;
-      // if (self.setTime >= 0 && self.timer) {
-      //   uni.showToast({
-      //     title: '邮件已发送，请于1分钟后再试',
-      //     icon: 'none',
-      //   });
-      //   return false;
-      // }
-      // if (self.timer && self.setTime < 0) {
-      //   clearTimeout(self.timer);
-      //   self.timer = null;
-      // }
-      // self.timer = setTimeout(() => {
-      //   self.setTime--;
-      // }, 1000);
-      // const data = {
-      //   attachments: [
-      //     {
-      //       name: '嘉里停车发票.pdf',
-      //       invoiceId: self.order.id,
-      //       url: url,
-      //     },
-      //   ],
-      //   html: true,
-      //   sendTo: 'string',
-      //   sendTos: [self.order.mailbox],
-      //   subject: self.order.invoiceTitleName + '的电子发票',
-      //   text: '停车发票',
-      // };
-      // self.$md(data);
+    pushAgain: async function () {
+      const id = this.order.id
       try {
-        const res = await invoicesAgainSandEmail(id)
-          uni.showToast({
-            title: '邮件已发送邮箱，请注意查收',
-            icon: 'none',
-            duration: 2000
-          });
+        await invoicesAgainSandEmail(id)
+        uni.showToast({
+          title: '邮件已发送邮箱，请注意查收',
+          icon: 'none',
+          duration: 2000
+        });
       } catch {
         uni.showToast({
           title: '服务器开小差了呢，请您稍后再试',
           icon: 'none',
         });
       }
-      // 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) {
-      //       uni.showToast({
-      //         title: '邮件已发送邮箱，请注意查收',
-      //         icon: 'none',
-      //       });
-      //     } else {
-      //       uni.showToast({
-      //         title: res.data.msg,
-      //         duration: 2000,
-      //         icon: 'none',
-      //       });
-      //     }
-      //   },
-      //   fail: () => {
-      //     uni.showToast({
-      //       title: '服务器开小差了呢，请您稍后再试',
-      //       icon: 'none',
-      //     });
-      //   },
-      // });
     },
   },
 };

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

@@ -94,11 +94,11 @@ export default {
     },
     getOrderItemPrice(item) {
       if (this.useParkingOrderCache) {
-        const payFee = item.serviceFee;
-        return (payFee / 100).toFixed(2);
+        const payFee = item.totalPaidAmount;
+        return payFee;
       } else {
-        const payFee = item.invoiceAmount;
-        return (payFee / 100).toFixed(2);
+        const payFee = item.totalPaidAmount;
+        return payFee;
       }
     },
   },

src/pages/parkingFee/mixins/vehicleAddOrEdit.js

@@ -17,12 +17,6 @@ export default {
     uniPop,
     plateNumber,
   },
-  props:{
-    theme:{
-      type: String,
-      default: ''
-    }
-  },
   data() {
     return {
       carInfo: {},

src/pages/parkingFee/parkingFee.vue

@@ -1,21 +1,982 @@
 <template>
-  <component :is="componentName" :theme="theme"></component>
+  <scroll-view :class="['scroll-Y' ,'color-scroll-Y', theme]">
+    <div class="wrap">
+      <div class="parkingFee">
+        <!-- 菜单 -->
+        <div
+          :class="{
+            top_menu: true,
+            blue_top_menu: custTypeId === 1,
+            green_top_menu: custTypeId === 2,
+          }"
+          v-if="custTypeId >= 0"
+        >
+          <div class="menu_item" @click="doRouter">
+            <img :src="`${require(`./static/images/icon-order.png`)}`" />
+            <span>缴费记录</span>
+          </div>
+          <div class="menu_item" @click="doRouter3" v-if="source === 'CRM'">
+            <img :src="`${require(`./static/images/icon-coupon.png`)}`" />
+            <span>停车劵兑换</span>
+          </div>
+          <div class="menu_item" @click="doRouter1">
+            <img :src="`${require(`./static/images/icon-ticket.png`)}`" />
+            <span>停车开票</span>
+          </div>
+          <div class="menu_item" @click="doRouter2">
+            <img :src="`${require(`./static/images/icon-car.png`)}`" />
+            <span>车辆管理</span>
+          </div>
+        </div>
+        <!-- 中控 -->
+        <div class="parkingFee-bottom">
+          <div style="height: 40px; background-color: #FBFCFF;" v-if="source !== 'CRM'"></div>
+          <div class="parkingFee-tab" v-if="supportUnlicensed && source === 'CRM'">
+            <div :class="['bar', tabbarActive === '手动缴费' && 'active']" @click="tabbarActiveEvent('手动缴费')">手动缴费</div>
+            <div :class="['bar', tabbarActive === '无牌缴费' && 'active']" @click="tabbarActiveEvent('无牌缴费')">无牌缴费</div>
+          </div>
+
+          <!-- 手动缴费 -->
+          <div class="manual-box" v-if="tabbarActive === '手动缴费'">
+            <div class="parkingFee-search">
+              <div class="search_tip_1" :style="{paddingTop: supportUnlicensed? '0': '32px'}">
+                <div class="title">车辆类型</div>
+                <k-tab type="fill" @change="toggleType" :tabs="['普通车牌', '新能源', '特殊车牌']" />
+              </div>
+              <!-- <div class="search_tip">
+                <div class="title">车辆类型</div>
+                <div class="search_tip_pt">
+                  <div :class="carType == 0 ? 'search_tip_pt_index' : ''" @click="toggleType(0)">普通车牌</div>
+                  <div :class="carType == 1 ? 'search_tip_pt_index' : ''" @click="toggleType(1)">新能源</div>
+                  <div :class="carType == 2 ? 'search_tip_pt_index' : ''" @click="toggleType(2)">特殊车牌</div>
+                </div>
+              </div> -->
+              <div class="input-box">
+                <!-- <div v-for="i in carType === 1 ? 8 : 7" class="li" :key="`numArr${i}`" @click="clickShowKeyboard(i)" :class="[active === i ? 'active' : '']">
+                  {{ numArr[i] }}
+                </div> -->
+                <div class="li" @click="clickShowKeyboard(0)" :class="[active === 0 ? 'active' : '']">
+                  {{ numArr[0] }}
+                </div>
+                <div class="li" @click="clickShowKeyboard(1)" :class="[active === 1 ? 'active' : '']">
+                  {{ numArr[1] }}
+                </div>
+                <div class="input_box_dian">·</div>
+                <div class="li" @click="clickShowKeyboard(2)" :class="[active === 2 ? 'active' : '']">
+                  {{ numArr[2] }}
+                </div>
+                <div class="li" @click="clickShowKeyboard(3)" :class="[active === 3 ? 'active' : '']">
+                  {{ numArr[3] }}
+                </div>
+                <div class="li" @click="clickShowKeyboard(4)" :class="[active === 4 ? 'active' : '']">
+                  {{ numArr[4] }}
+                </div>
+                <div class="li" @click="clickShowKeyboard(5)" :class="[active === 5 ? 'active' : '']">
+                  {{ numArr[5] }}
+                </div>
+                <div :class="['li', active === 6 ? 'active' : '']" @click="clickShowKeyboard(6)">
+                  {{ numArr[6] }}
+                </div>
+                <div class="li dashed green-active" @click="clickShowKeyboard(7)" :class="[active === 7 ? 'active' : '']" >
+                  <span v-if="numArr[7] && carType === 1">{{ numArr[7] }}</span>
+                  <img v-else :src="require('./static/images/unlicensed/leaf.svg')">
+                </div>
+              </div>
+              <k-button title="查询缴费" style="margin-top: 46px;margin-bottom: 43px;" :disabled="disabledBtn" disabledColor="#D1D2D9" @click="preHandleSearch" />
+              <!-- <div type="primary" class="search-btn" :class="disabledBtn ? 'disabled-btn' : ''" :disabled="disabledBtn" @click="preHandleSearch">查询缴费</div> -->
+            </div>
+            <div class="vehicleMgt-list">
+              <div class="vehicleMgt-title">
+                <div>历史查询车辆</div>
+                <!-- <image src="./static/images/icon5.png" class="vehicleMgt-title-img"/> -->
+              </div>
+              <div class="vehicleMgt-content" v-if="carList.length">
+                <div class="item" v-for="(item, index) in carList" :key="index" @click="toHandleSearch(item, 1)" :class="vehicleNumber == item ? 'vehicleMgt-content_cls' : ''">
+                  {{ item | formatCarno }}
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <!-- 无牌缴费 -->
+          <div class="unlicensed-box" v-else>
+            <!-- 无牌车 -->
+            <!-- <k-illustration name="no-parking-fee" description="未查询到无牌车信息" /> -->
+            <div class="no-car-unlicensed-box" v-if="!unlicensedCar">
+              <img :src="`${require(`./static/images/unlicensed-1.png`)}`" />
+              <div class="no-car-unlicensed-info">未查询到无牌车信息</div>
+              <div class="search-btn" @click="scanCarCode">
+                <!-- <van-icon name="scan" />扫描进场二维码领取无牌车号牌 -->
+                <img class="unlicensed-scan" :src="`${require(`./static/images/unlicensed-scan.png`)}`" />扫描进场二维码领取无牌车号牌
+              </div>
+            </div>
+            <!-- 有无牌车 -->
+            <div class="in-car" v-else>
+              <div class="car-number-box">
+                <img :src="`${require(`./static/images/unlicensed-0.png`)}`" />
+                <div class="car-number">
+                  <div class="number">{{ unlicensedCar }}</div>
+                  <div class="tips">车辆类型：无牌车辆</div>
+                </div>
+              </div>
+              <div class="search-btn" @click="unlicensedToPay">去支付</div>
+            </div>
+          </div>
+        </div>
+        <div class="parkingFee-top">
+          <div class="top_content">
+            <div class="title_box">
+              <span class="btn">缴费说明</span>
+            </div>
+            <div class="info" :class="!init_ch ? 'info_show' : ''">
+              <!-- <p></p> -->
+              <!-- <p>{{ description }}</p> -->
+              <div v-html="description"></div>
+            </div>
+          </div>
+          <div class="top_down" @click="top_display" v-if="!init_ch && description && description.length > 60"><van-icon name="arrow-down" /></div>
+          <div class="top_down" @click="top_display" v-else><van-icon name="arrow-up" /></div>
+        </div>
+      </div>
+      <plate-number ref="plateKeyboard" :noDisBtn="[36, 37]" :carType="carType" :active="active" :ind="ind" :numArr="numArr" @carnoArr="updateCarno"></plate-number>
+    </div>
+  </scroll-view>
 </template>
 
 <script>
-import officeBlueCom from './components/officeBlue/parkingFee.vue';
-import baseParkingFeeCom from './components/base/parkingFee.vue';
-import purpleCom from './components/purple/parkingFee.vue';
+import parkingFeeJs from './mixins/parkingFee';
 import baseMixins from './mixins/base'
 export default {
-  mixins:[baseMixins],
-  components: {
-    officeBlueCom,
-    baseParkingFeeCom,
-    purpleCom,
-  },
-  mounted() {
-    this.componentName = 'purpleCom';
-  }
+  mixins: [baseMixins, parkingFeeJs],
+  name: 'parkingFeeCom',
 };
 </script>
+
+<style lang="less" scoped>
+.scroll-Y {
+  width: 100%;
+  height: 100vh;
+}
+
+.color-scroll-Y {
+  background: #f4f7ff;
+  // background: red;
+}
+
+.wrap {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+
+  .parkingFee {
+    display: flex;
+    flex-direction: column;
+
+    .top_menu {
+      background: #FBFCFF;
+      box-sizing: border-box;
+      display: flex;
+      justify-content: space-between;
+      padding-top: 34px;
+      margin-bottom: 20px;
+      padding-bottom: 30px;
+
+      .menu_item {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        width: 33.3%;
+
+        img {
+          width: 100px;
+          height: 100px;
+          margin-bottom: 3px;
+        }
+
+        span {
+          // font-size: 30px;
+          margin-top: 10px;
+          // color: #333333;
+          // font-size: 28px;
+
+
+          font-family: 'Inter';
+          font-style: normal;
+          font-weight: 400;
+          font-size: 28px;
+          line-height: 34px;
+          color: #333333;
+        }
+      }
+    }
+
+    .parkingFee-bottom {
+      width: 100%;
+      display: flex;
+      flex-direction: column;
+      box-sizing: border-box;
+      // tabber 切换
+      .parkingFee-tab {
+        padding-top: 46px;
+        padding-left: 27px;
+        padding-bottom: 50px;
+        background-color: #FBFCFF;
+        display: flex;
+        align-items: flex-end;
+
+        .bar {
+          color: #666666;
+          // font-size: 32px;
+          // font-weight: 500;
+
+
+          font-family: 'PingFang SC';
+          font-style: normal;
+          font-weight: 500;
+          font-size: 32px;
+          line-height: 30px;
+          /* identical to box height, or 94% */
+
+
+          color: #666666;
+
+
+          &:nth-child(1) {
+            margin-right: 24px;
+          }
+
+          &.active {
+            font-size: 38px;
+            color: #333333;
+
+            font-family: 'PingFang SC';
+            font-style: normal;
+            font-weight: 500;
+            font-size: 38px;
+            line-height: 38px;
+            color: #333333;
+          }
+        }
+      }
+
+      // 车牌号查询
+      .parkingFee-search {
+        width: 100%;
+        display: flex;
+        flex-direction: column;
+        background: #FBFCFF;
+        box-sizing: border-box;
+
+        .search_tip {
+          width: 100%;
+          margin-left: -1px;
+          display: flex;
+          justify-content: flex-start;
+          align-items: center;
+          padding-right: 30px;
+          margin-bottom: 40px;
+
+          .title {
+            font-size: 30px;
+            color: #333333;
+            padding-left: 27px;
+            margin-right: 33px;
+          }
+
+          .search_tip_pt {
+            font-size: 28px;
+            margin-right: 30px;
+            flex: 1;
+            display: flex;
+            justify-content: space-around;
+            align-items: center;
+            border: 1px solid #999999;
+            height: 60px;
+            color: #999999;
+            overflow: hidden;
+            border-radius: 90px;
+
+            div {
+              height: 100%;
+              width: 100%;
+              border-radius: 90px;
+              line-height: 62px;
+              text-align: center;
+            }
+
+            .search_tip_pt_index {
+              color: #fff;
+              //background-image: linear-gradient(to right, #7e4fa1, #433c7f);
+              background-color: #644a79;
+            }
+          }
+        }
+        .search_tip_1 {
+          padding: 0 27px 40px;
+          display: flex;
+          align-items: center;
+          .title {
+            // font-size: 30px;
+            margin-right: 33px;
+            font-family: 'PingFang SC';
+            font-style: normal;
+            font-weight: 500;
+            font-size: 30px;
+            line-height: 36px;
+            color: #333333;
+          }
+          .k-tab-group-fill {
+            flex: 1;
+          }
+        }
+        // 车牌号 & 虚拟键盘
+        .input-box {
+          width: 100%;
+          flex: 1;
+          display: flex;
+          padding-bottom: 46px;
+          padding: 0 17px;
+          justify-content: center;
+          box-sizing: border-box;
+
+          .li {
+            width: 100%;
+            border: 1px solid #d9dbe0;
+            box-sizing: border-box;
+            height: 90px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            color: #333333;
+            background-color: #f4f7ff;
+            border-radius: 4px;
+            font-size: 40px;
+            margin: 0 3px;
+            &.dashed {
+              background-color: #fafbff;
+              border-style: dashed;
+            }
+            &.active {
+              border-color: var(--k-color-primary-01, #064c8a);
+            }
+            &.green-active {
+              background: #F8FFED;
+              border-color: #7DB124;
+              color: #7DB124;
+              img{
+
+                width: 41px;
+                height: 39px;
+              }
+            }
+          }
+
+          .input_box_dian {
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            font-size: 120px;
+            height: 70px;
+            color: var(--k-color-primary);
+          }
+        }
+
+        .search-btn {
+          color: #fff;
+          margin: 0 auto;
+          height: 90px;
+          width: calc(100% - 60px);
+          line-height: 90px;
+          border-radius: 80px;
+          font-size: 36px;
+          text-align: center;
+          //background-image: linear-gradient(to right, #7e4fa1, #433c7f);
+          // background-color: #644a79;
+          background-color: var(--k-color-primary);
+
+          margin-bottom: 43px;
+        }
+
+        .disabled-btn {
+          background-color: #c1c1c1 !important;
+          //background-image: none !important;
+        }
+      }
+
+      /* 历史车牌 */
+      .vehicleMgt-list {
+        // margin-top: 43px;
+        // padding-top: 43px;
+        display: flex;
+        flex-direction: column;
+        // margin-bottom: 34px;
+        padding-bottom: 34px;
+        //margin-top: 20px;
+        //padding-top: 20px;
+        background-color: #FBFCFF;
+
+        .vehicleMgt-title {
+          //width: 91%;
+          padding-left: 27px;
+          display: flex;
+          text-align: left;
+          font-weight: 500;
+          justify-content: space-between;
+          //margin-left: 4%;
+          // padding-left: 30px;
+          //padding-top: 30px;
+          height: 40px;
+          line-height: 40px;
+          box-sizing: border-box;
+          margin-bottom: 24px;
+          // border-top: 1px solid #f2f2f2;
+          font-size: 30px;
+
+          .vehicleMgt-title-img {
+            width: 30px;
+            height: 30px;
+          }
+        }
+
+        .vehicleMgt-content {
+          width: 94%;
+          margin-left: 29px;
+          display: flex;
+          flex-wrap: wrap;
+          // justify-content: space-around;
+          border-radius: 15px;
+
+          .item {
+            width: 30%;
+            height: 60px;
+            // margin-top: 30px;
+            // margin-left: 16px;
+            margin-right: 15px;
+            margin-bottom: 16px;
+            text-align: center;
+            box-sizing: border-box;
+            border: 1px solid #d9dbe0;
+            background-color: #f4f7ff;
+            line-height: 60px;
+            font-size: 26px;
+            border-radius: 30px;
+            color: #666666;
+          }
+
+          .vehicleMgt-content_cls {
+            color: var(--k-color-primary-active);
+            border: 2px solid var(--k-color-primary-active);
+          }
+        }
+      }
+    }
+    /* 无牌车UI */
+    .unlicensed-box {
+      background-color: #FBFCFF;
+
+      .no-car-unlicensed-box {
+        box-sizing: border-box;
+        img {
+          width: 391px;
+          display: block;
+          margin: 0 auto;
+        }
+        .no-car-unlicensed-info {
+          color: #919baa;
+          font-size: 36px;
+          line-height: 36px;
+          text-align: center;
+          margin-bottom: 60px;
+        }
+        .search-btn {
+          font-size: 34px;
+          height: 90px;
+          color: #ffffff;
+          line-height: 90px;
+          background: var(--k-color-primary);
+          text-align: center;
+          margin: 0 30px;
+          border-radius: 45px;
+          margin-bottom: 58px;
+          .unlicensed-scan {
+            display: inline-block;
+            width: 60px;
+            height: 60px;
+            position: relative;
+            top: 17px;
+            margin-right: 15px;
+          }
+        }
+      }
+
+      .in-car {
+        box-sizing: border-box;
+        .car-number-box {
+          height: 230px;
+          //padding-top: 53px;
+          padding-left: 18px;
+          //padding-bottom: 34px;
+          background: #fbfcff;
+          border: 1px solid #d9dbe0;
+          border-radius: 4px;
+          margin: 0 24px;
+          display: flex;
+          margin-bottom: 40px;
+          display: flex;
+          align-items: center;
+
+          img {
+            width: 288px;
+            height: 142px;
+          }
+          .car-number {
+            .number {
+              font-size: 50px;
+              line-height: 56px;
+              font-weight: 600;
+              color: #333333;
+              margin-bottom: 23px;
+            }
+            .tips {
+              color: #999999;
+            }
+          }
+        }
+        .search-btn {
+          background: var(--k-color-primary);
+          border-radius: 45px;
+          color: #ffffff;
+          line-height: 90px;
+          height: 90px;
+          font-size: 36px;
+          text-align: center;
+          margin: 0 30px 40px;
+        }
+      }
+    }
+
+    /* 缴费说明 */
+    .parkingFee-top {
+      display: flex;
+      flex-direction: column;
+      background-size: 100% 30%;
+      padding-left: 27px;
+      padding-right: 27px;
+      background-color: #FBFCFF;
+
+      .top_content {
+        box-sizing: border-box;
+
+        span {
+          font-size: 24px;
+          color: #898989;
+          text-align: left;
+        }
+
+        .title_box {
+          display: flex;
+          align-items: center;
+          justify-content: space-between;
+          margin-bottom: 20px;
+
+          .btn {
+            box-sizing: border-box;
+            border-radius: 20px;
+            font-size: 30px;
+            font-weight: 500;
+            color: #333;
+            text-align: left;
+          }
+        }
+
+        .info {
+          padding-left: 2px;
+          font-size: 27px;
+          width: 95%;
+          color: #666;
+          line-height: 45px;
+          p {
+            margin: 0;
+          }
+        }
+
+        .info_show {
+          word-break: break-all;
+          text-overflow: ellipsis;
+          overflow: hidden;
+          display: -webkit-box;
+          -webkit-line-clamp: 2;
+          -webkit-box-orient: vertical;
+        }
+      }
+
+      .top_down {
+        width: 100%;
+        text-align: center;
+        color: #999999;
+        margin-top: 30px;
+        margin-bottom: 32px;
+      }
+    }
+  }
+}
+
+// 缴费说明
+.payInstruct_wrap {
+  width: 300px;
+  margin: 0 auto;
+  display: flex;
+  flex-direction: column;
+  background: #fff;
+  border-radius: 20px;
+
+  .scroll {
+    height: 600px;
+    display: flex;
+    flex-direction: column;
+    padding: 20px;
+    box-sizing: border-box;
+
+    .payInstruct_title {
+      font-size: 30px;
+      text-align: center;
+      padding: 20px 0;
+      box-sizing: border-box;
+      border-bottom: 1px solid #f2f2f2;
+    }
+
+    .payInstruct_con {
+      display: flex;
+      width: 100%;
+      padding: 20px 10px;
+      box-sizing: border-box;
+
+      span {
+        font-size: 28px;
+        color: #999;
+      }
+    }
+  }
+}
+
+.class-plate-box {
+  width: 100%;
+  padding: 24px 0;
+  box-sizing: border-box;
+  position: relative;
+}
+
+.delBtn {
+  color: #fff;
+  height: 38px;
+  line-height: 38px;
+  font-size: 20px;
+  width: 124px;
+  border-radius: 7px;
+  text-align: center;
+  padding: 4px;
+  background-color: #c69c6d;
+}
+
+.payThe {
+  background-color: #fff;
+  width: 100%;
+
+  .pay_index {
+    text-align: center;
+    width: 200px;
+    padding-top: 10px;
+    margin: 0px auto;
+  }
+
+  .pay_title {
+    width: 500px;
+    display: flex;
+    align-items: center;
+    margin-top: 30px;
+  }
+
+  .pay_title1 {
+    width: 100%;
+    margin-top: 20px;
+    display: flex;
+    align-items: center;
+  }
+
+  .pay_title_yhj {
+    margin-left: 60px;
+    font-size: 20px;
+  }
+
+  .pay_title_yhj1 {
+    margin-left: 35px;
+    font-size: 20px;
+  }
+
+  .payjf {
+    font-size: 20px;
+    margin-left: 30px;
+  }
+
+  .paySelect {
+    color: rgba(16, 16, 16, 100);
+    font-size: 20px;
+    font-family: Arial;
+    border: 1px solid rgba(187, 187, 187, 100);
+    border-radius: 10px;
+    margin-left: 80px;
+    width: 260px;
+    height: 80px;
+  }
+
+  .paySelect1 {
+    color: rgba(16, 16, 16, 100);
+    font-size: 20px;
+    font-family: Arial;
+    border: 1px solid rgba(187, 187, 187, 100);
+    border-radius: 10px;
+    margin-left: 80px;
+    width: 260px;
+    height: 80px;
+    display: flex;
+    align-items: center;
+  }
+
+  .pay-se {
+    width: 120px;
+    height: 100%;
+    background-color: #d8dce6;
+
+    .pay-se-l {
+      height: 48%;
+      text-align: center;
+      font-size: 50px;
+      line-height: 68px;
+    }
+
+    .pay-se-l1 {
+      border-left: 1px solid rgba(187, 187, 187, 100);
+      border-bottom: 1px solid rgba(187, 187, 187, 100);
+    }
+
+    .pay-se-l2 {
+      border-left: 1px solid rgba(187, 187, 187, 100);
+    }
+  }
+
+  .payjfzk {
+    font-size: 20px;
+    color: #8b8c8b;
+    margin-top: 10px;
+    margin-left: 210px;
+  }
+
+  .pay_time {
+    font-size: 28px;
+    margin-left: 180px;
+    padding-bottom: 40px;
+  }
+
+  .pay_time1 {
+    margin-top: 26px;
+  }
+}
+
+.pay_jiaof {
+  width: 97%;
+  height: 60px;
+  line-height: 60px;
+  margin-left: 10px;
+  background-color: #c69c6d;
+  text-align: center;
+  color: rgba(255, 255, 255, 100);
+  font-size: 28px;
+  font-family: Microsoft Yahei;
+  border-radius: 10px;
+  margin-top: 20px;
+}
+
+.sq_content {
+  width: 700px;
+  background-color: #fff;
+  position: fixed;
+  bottom: 25px;
+  left: 25px;
+  height: 50px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  border-radius: 15px;
+  font-size: 16px;
+  color: #c69c6d;
+  padding: 0px 30px;
+  box-sizing: border-box;
+}
+
+.sq_content .btn {
+  width: 180px;
+  height: 30px;
+  line-height: 30px;
+  text-align: center;
+  color: #fff;
+  background-color: #c69c6d;
+  margin-top: -3px;
+  border-radius: 25px;
+}
+
+// 停车券弹窗
+.ticketPopup {
+  display: flex;
+  flex-direction: column;
+  background: #fff;
+  border-radius: 20px 20px 0 0;
+  z-index: 999;
+
+  .popup-title {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    padding: 30px 42px;
+    box-sizing: border-box;
+    border-bottom: 1px solid #f2f2f2;
+    position: relative;
+
+    span {
+      color: #999;
+      font-size: 28px;
+    }
+
+    .useRule-text {
+      position: absolute;
+      right: 42px;
+      color: rgb(58, 130, 248);
+    }
+  }
+
+  .popup_scroll {
+    height: 70vh;
+    background: #f2f2f2;
+  }
+
+  .popup_content {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    padding: 10px 20px;
+    box-sizing: border-box;
+
+    .item {
+      display: flex;
+      background: #fff;
+      margin-bottom: 20px;
+      border-radius: 10px;
+
+      .item-left {
+        flex: 1;
+        display: flex;
+        align-items: center;
+        padding: 20px 0;
+        box-sizing: border-box;
+        position: relative;
+
+        .item-type {
+          position: absolute;
+          top: 0;
+          left: 0;
+          background: #fff5f1;
+          border-radius: 10px 0 10px 0;
+          width: 205px;
+          display: flex;
+          justify-content: center;
+
+          span {
+            color: #999;
+            font-size: 20px;
+            text-align: center;
+            line-height: 28px;
+          }
+        }
+
+        .item-value {
+          color: #c69c6d;
+          font-size: 40px;
+          padding: 10px 30px;
+          box-sizing: border-box;
+          width: 205px;
+          display: flex;
+          justify-content: center;
+
+          .b {
+            color: #c69c6d;
+            font-weight: 600;
+            font-size: 60px;
+          }
+        }
+
+        .color_disabled {
+          color: #999 !important;
+        }
+      }
+
+      .item-right {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        border-radius: 0 8px 8px 0;
+        position: relative;
+
+        span {
+          color: #c69c6d;
+          font-size: 24px;
+          padding: 0 20px;
+          box-sizing: border-box;
+        }
+
+        .color_disabled {
+          color: #999;
+        }
+
+        // 对勾
+        .dot {
+          position: absolute;
+          top: 0;
+          right: 0;
+          width: 2.25rem;
+          height: 2.375rem;
+        }
+      }
+    }
+  }
+}
+
+// 弹窗按钮
+.popup_button {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 10px 20px;
+  box-sizing: border-box;
+
+  span {
+    height: 110px;
+    line-height: 110px;
+    text-align: center;
+  }
+
+  .cancel_btn {
+    background: #fff;
+    color: #ed1c24 !important;
+  }
+
+  .ok_btn {
+    background: #c69c6d;
+    color: #fff !important;
+    width: 120px;
+    height: 40px;
+    line-height: 40px;
+    border-radius: 40px;
+  }
+}
+</style>

src/pages/parkingFee/parkingFeeDetailSuccess.vue

@@ -1,16 +1,198 @@
 <template>
-  <component :is="componentName"></component>
+  <div
+    scroll-y="true"
+    style="background-color: #f4f7ff"
+    :class="['scroll-Y' , theme]"
+  >
+    <div class="detail-box">
+      <div class="parking-info mgb-40">
+        <div class="parking-price">
+          <div class="price">{{ detail.actualPayFee | currency }}</div>
+          <div class="price-text">
+<!--            {{ ['支付成功', '支付失败', '已退款'][detail.payStatus] }}-->
+            {{ detail.refundStatus !== 'NO_REFUND' ? '已退款' : {'PAID': '支付成功', 'FAILED': '支付失败'}[detail.payStatus || 'FAIED'] }}
+          </div>
+        </div>
+        <div class="parking-part">
+          <div class="parking-info-item">
+            <span class="info-key">支付方式</span>
+            <span class="info-value">{{ detail.paymentMethod || '' }}</span>
+          </div>
+          <div class="parking-info-item">
+            <span class="info-key">支付时间</span>
+            <span class="info-value">{{ detail.paymentTime }}</span>
+          </div>
+          <div class="parking-info-item">
+            <span class="info-key">车牌号</span>
+            <span class="info-value">{{ detail.vehicleNo | formatCarno }}</span>
+          </div>
+          <div class="parking-info-item">
+            <span class="info-key">停车场</span>
+            <span class="info-value">{{ detail.parkName }}</span>
+          </div>
+          <div class="parking-info-item">
+            <span class="info-key">订单号</span>
+            <span class="info-value">{{ detail.orderNo }}</span>
+          </div>
+          <div class="parking-info-item">
+            <span class="info-key">入场时间</span>
+            <span class="info-value">{{ detail.enterTime }}</span>
+          </div>
+          <!-- <uni-view class="parking-info-item">
+            <span class="info-key">离场时间</span>
+            <span class="info-value">{{ detail.outtime || "" }}</span>
+          </uni-view> -->
+          <div class="parking-info-item">
+            <span class="info-key">停车时长</span>
+            <span class="info-value">{{ detail.serviceMin | parkingTime }}</span>
+          </div>
+          <div class="parking-info-item pb0">
+            <span class="info-key">开票状态</span>
+            <span class="info-value">{{ detail.invoiceStatusText }}</span>
+          </div>
+        </div>
+      </div>
+      <div class="parking-info mb-save" v-if="detail.discountInfo">
+        <div class="parking-part">
+          <div class="parking-info-item" v-if="false">
+            <!--todo: 杭州首停不显示暂时根据groupId写死-->
+            <span class="info-key">首停优惠</span>
+            <span class="info-value fw">{{
+              (detail.firstParkFee / 100) | currency
+            }}</span>
+          </div>
+          <div class="parking-info-item">
+            <span class="info-key">会员等级减免</span>
+            <span class="info-value fw">{{ detail.discountInfo && detail.discountInfo.memberLevelDiscount | currency }}</span>
+          </div>
+          <div class="parking-info-item">
+            <span class="info-key">消费减免</span>
+            <span class="info-value fw">{{ detail.discountInfo.consumeDiscount | currency }}</span>
+          </div>
+
+          <div class="parking-info-item">
+            <span class="info-key">积分减免</span>
+            <span class="info-value fw">{{ detail.discountInfo.pointsDiscount | currency }}</span>
+          </div>
+          <div class="parking-info-item">
+            <span class="info-key">会员卡券</span>
+            <span class="info-value fw">{{ detail.discountInfo.couponDiscount | currency }}</span>
+          </div>
+          <div class="parking-info-item" v-if="detail.paperCouponCode">
+            <span class="info-key">纸质优惠券</span>
+            <span class="info-value fw">{{ detail.discountInfo.paperCouponDiscount | currency }}</span>
+          </div>
+          <div class="parking-info-item pb0">
+            <span class="info-key">使用优惠总计</span>
+            <span class="info-value fw">{{ (detail.discountInfo.usingTotalDiscount || 0) | currency }}</span>
+          </div>
+          <div
+            class="parking-info-item"
+            v-if="detail.discountInfo.usingTotalDiscount > detail.discountInfo.actualUsedDiscount"
+          >
+            <span class="info-key">实际优惠总计</span>
+            <span class="info-value fw">{{ detail.discountInfo.actualUsedDiscount | currency }}</span>
+          </div>
+        </div>
+        <div class="parking-detail"></div>
+        <div class="parking-part">
+          <div class="parking-info-item">
+            <span class="info-key">应缴</span>
+            <span class="info-value fw">{{
+              detail.totalFee | currency
+            }}</span>
+          </div>
+          <div class="parking-info-item">
+            <span class="info-key">实缴</span>
+            <span class="info-value fw">{{
+              detail.actualPayFee | currency
+            }}</span>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
 </template>
 
 <script>
-import officeBlueCom from './components/officeBlue/parkingFeeDetailSuccess.vue';
-import baseParkingFeeCom from './components/base/parkingFeeDetailSuccess.vue';
+import parkingFeeDetailSuccessJs from './mixins/parkingFeeDetailSuccess'
 import baseMixins from './mixins/base'
 export default {
-  mixins:[baseMixins],
-  components: {
-    officeBlueCom,
-    baseParkingFeeCom,
-  },
-};
+  mixins:[baseMixins, parkingFeeDetailSuccessJs]
+}
 </script>
+
+<style lang="less" scoped>
+.scroll-Y {
+  height: 100vh;
+  overflow-y: scroll;
+  .detail-box {
+    padding: 30px;
+    .parking-info {
+      background: #fafbff;
+      border-radius: 4px;
+      border: 1px solid #d8dae0;
+      .parking-price {
+        text-align: center;
+        padding: 30px 0px 50px;
+        .price {
+          font-size: 60px;
+          font-weight: 600;
+          color: #333333;
+          line-height: 84px;
+        }
+        .price-text {
+          font-weight: 300;
+          font-size: 30px;
+        }
+      }
+      .parking-detail {
+        border-top: 2px solid #f5f5f5;
+        width: calc(100% - 60px);
+        margin-left: 30px;
+      }
+      .parking-part {
+        padding: 30px;
+        .parking-info-item {
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
+          font-size: 32px;
+          padding-bottom: 30px;
+          &.pb0 {
+            padding-bottom: 0;
+          }
+          .info-key {
+            text-align: left;
+            color: #242424;
+            font-size: 30px;
+            font-weight: 400;
+            color: #999999;
+            line-height: 42px;
+          }
+          .info-value {
+            text-align: right;
+            font-size: 30px;
+            font-weight: 400;
+            color: #333333;
+            line-height: 42px;
+            &.fw {
+              font-weight: 600;
+            }
+          }
+          .red {
+            color: #333333;
+          }
+        }
+      }
+    }
+    .mgb-40 {
+      margin-bottom: 24px;
+    }
+    .mb-save {
+      padding-bottom: constant(safe-area-inset-bottom);
+      padding-bottom: env(safe-area-inset-bottom);
+    }
+  }
+}
+</style>

src/pages/parkingFee/parkingFeeDiscounts.vue

@@ -1,16 +1,165 @@
 <template>
-  <component :is="componentName"></component>
+  <div>
+    <div scroll-y="true" :class="['scroll-Y', theme]">
+      <van-checkbox-group v-model="checkedList" @change="checkboxChange" checked-color="#064C8A">
+        <div class="container" v-if="memberLevelDiscount">
+          <div class="item">
+            <div class="title">会员等级减免</div>
+            <div class="content">{{ memberGrade.memberGradeText || '' }}减免{{ memberGrade.discountTime || 0 }}小时。可优惠{{ memberGrade.discountFee || 0 }}元</div>
+          </div>
+          <van-checkbox color="#fff" name="member" :disabled="isCheck('member')" />
+          <!-- :checked="isCheck('member')" -->
+          <div class="member-discount-info" v-if="isMemberDiscountDisabled">当日已使用</div>
+        </div>
+        <div class="container" v-if="enableConsume">
+          <div class="item">
+            <div class="title">消费减免</div>
+            <!-- <uni-view class="content" v-if="parkInfoEntity.parkMallCode === 1 && parkInfoEntity.expirationDate">{{reduceDiscountMessage}}</uni-view> -->
+            <div class="content" v-if="orderDetail.parkInfo.parkMallCode !== 1">
+              {{ todayReduceDiscountMessage }}
+            </div>
+            <uni-number-box
+              v-if="parkInfoEntity.isSplit === 0 && maxReduceDiscount > 0"
+              :min="1"
+              :max="maxReduceDiscount"
+              v-model="reduceHours"
+              @input="reducesChange"
+            ></uni-number-box>
+          </div>
+          <van-checkbox name="reduces" color="#fff" :disabled="isCheck('reduces')" />
+          <!-- :checked="isCheck('reduces')" -->
+        </div>
+      </van-checkbox-group>
+    </div>
+    <div class="flewx">
+      <div class="flewx-content">
+        合计<span style="color: #333; font-weight: 600; font-size: 36px; padding-left: 0px">{{ actualPayFee | currency }}</span>
+        元
+        <span style="color: #999; padding-left: 0px; font-size: 28px">已优惠{{ usingTotalDiscount | currency }}元</span>
+      </div>
+      <div class="flewx_index3" @click="confirm">确定</div>
+    </div>
+  </div>
 </template>
 
 <script>
-import officeBlueCom from './components/officeBlue/parkingFeeDiscounts.vue';
-import baseParkingFeeCom from './components/base/parkingFeeDiscounts.vue';
+import parkingFeeDiscountsJs from './mixins/parkingFeeDiscounts';
 import baseMixins from './mixins/base'
 export default {
-  mixins:[baseMixins],
-  components: {
-    officeBlueCom,
-    baseParkingFeeCom,
-  },
+  mixins: [baseMixins, parkingFeeDiscountsJs],
 };
 </script>
+
+<style lang="less" scoped>
+
+.scroll-Y {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  height: 100vh;
+  background: #f4f7ff;
+}
+
+.container {
+  background-color: #fafbff;
+  width: calc(100% - 100px);
+  margin: 30px;
+  padding-left: 40px;
+  border-radius: 4px;
+  display: flex;
+  align-items: center;
+  line-height: 70px;
+  position: relative;
+  height: inherit;
+  border: 1px solid #d8dae0;
+
+  .item {
+    width: 570px;
+    padding: 20px 0;
+
+    .title {
+      font-size: 34px;
+    }
+
+    .content {
+      font-size: 28px;
+      color: #989898;
+    }
+  }
+
+  .member-discount-info {
+    font-size: 20px;
+    position: absolute;
+    right: 12px;
+    bottom: 0;
+    color: #989898;
+  }
+
+  .page_img {
+    width: 49px;
+    height: 49px;
+    border: 1px solid #e6e6e6;
+    border-radius: 50%;
+    overflow: hidden;
+
+    img {
+      width: 50px;
+      height: 50px;
+      margin-left: -1px;
+    }
+  }
+}
+
+.flewx {
+  width: 100%;
+  height: 130px;
+  background-color: #fff;
+  position: fixed;
+  bottom: 0;
+  font-size: 30px;
+  display: flex;
+  align-items: center;
+  justify-content: space-around;
+  // padding-bottom: constant(safe-area-inset-bottom);
+  // padding-bottom: env(safe-area-inset-bottom);
+  padding-bottom: 20px;
+
+  .flewx-content {
+    position: absolute;
+    left: 16px;
+  }
+
+  .flewx_index3 {
+    width: 150px;
+    height: 70px;
+    border-radius: 45px;
+    text-align: center;
+    font-size: 30px;
+    line-height: 70px;
+    color: #fff;
+    // background-image: linear-gradient(to right, #7e4fa1, #433c7f);
+    background: #064c8a;
+    box-shadow: 2px 3px 5px #888888;
+    position: absolute;
+    right: 16px;
+  }
+
+  .blue_flewx_index3 {
+    .color-background-color('blue');
+  }
+
+  .green_flewx_index3 {
+    .color-background-color('green');
+  }
+}
+
+/deep/ checkbox .wx-checkbox-input.wx-checkbox-input-checked {
+  background-color: red !important;
+  border-radius: 50% !important;
+  border: 1px solid red;
+}
+
+/deep/ checkbox .wx-checkbox-input {
+  border-radius: 50% !important;
+}
+</style>

src/pages/parkingFee/parkingFeeForm.vue

@@ -1,932 +0,0 @@
-<template>
-  <scroll-view scroll-y="true" class="scroll-Y">
-    <div class="wrap">
-      <div class="form">
-        <div class="form-item">
-          <span class="label">车牌</span>
-          <span>{{ parkOrderEntity.carno }}</span>
-        </div>
-        <div class="form-item">
-          <span class="label">入场时间</span>
-          <span>{{ parkOrderEntity.entertime }}</span>
-        </div>
-        <div class="form-item">
-          <span class="label">停车时长</span>
-          <span>{{ parkOrderEntity.servicehour }}小时</span>
-        </div>
-        <div class="form-item">
-          <span class="label"></span>
-          <span>订单金额：¥{{ parkOrderEntity.servicefee }}</span>
-        </div>
-      </div>
-      <div class="form">
-        <div
-          class="form-item"
-          @click="openPark"
-          v-if="parkInfoEntity.isuseticket == 1"
-        >
-          <span class="label">停车券</span>
-          <div>
-            <span>{{ parkingCouponName }}</span>
-            <uni-icons
-              type="arrowright"
-              size="20"
-              class="arrowright"
-            ></uni-icons>
-          </div>
-        </div>
-        <div class="form-item" v-if="couponfee">
-          <span class="label">停车券抵扣</span>
-          <span style="color: #ed1c24">¥{{ couponfee }}元</span>
-        </div>
-        <div
-          class="form-item"
-          @click="openIntegral"
-          v-if="parkInfoEntity.isuseintegral == 1"
-        >
-          <span class="label">积分抵扣</span>
-          <div>
-            <span>{{ integralName }}</span>
-            <uni-icons
-              type="arrowright"
-              size="20"
-              class="arrowright"
-            ></uni-icons>
-          </div>
-        </div>
-        <div class="form-item" v-if="bonusfee">
-          <span class="label">积分抵扣</span>
-          <span style="color: #ed1c24">¥{{ bonusfee }}元</span>
-        </div>
-      </div>
-      <!-- 福州 -->
-      <div class="tip" v-if="mallid === '000586'">
-        注：每次支付最多抵扣{{ parkInfoEntity.maxonetimediscount
-        }}<span>元</span>
-      </div>
-      <!-- 天津 -->
-      <div class="tip" v-if="mallid === '000719'">
-        注：每次支付最多抵扣{{ parkInfoEntity.maxonetimediscount
-        }}<span>元</span>
-      </div>
-      <!-- 慈溪 -->
-      <div class="tip" v-if="mallid === '00000914'">
-        注：周一每次支付最多抵扣50元，周二至周日每次支付最多抵扣6<span>元</span>
-      </div>
-      <div
-        class="tip"
-        v-if="
-          mallid !== '000586' && mallid !== '000719' && mallid !== '00000914'
-        "
-      >
-        注：卡券和积分每天累计最多抵扣<span
-          >{{ parkInfoEntity.maxonedaydiscount }}元</span
-        >,<span
-          >每次支付最多抵扣{{
-            parkInfoEntity.maxonetimediscount
-          }}元，今日已抵扣{{ todayDiscountMoney }}元</span
-        >
-      </div>
-    </div>
-    <!-- 底部导航 -->
-    <div class="submit_bar">
-      <div class="submit_text">
-        <div class="text_top">
-          <span>实付款：</span>
-          <span class="price">¥ {{ total }}</span>
-        </div>
-        <div
-          class="text_bottom"
-          v-if="parkingCouponName !== '' || integralName !== ''"
-        >
-          <span v-if="parkingCouponName && !integralName"
-            >已选择：{{ parkingCouponName }}</span
-          >
-          <span v-if="integralName && !parkingCouponName"
-            >已选择：{{ integralName }}</span
-          >
-          <span v-if="parkingCouponName && integralName"
-            >已选择：{{ parkingCouponName + '/' + integralName }}</span
-          >
-        </div>
-      </div>
-      <button class="mini-btn" type="warn" size="mini" @click="onSubmit">
-        立即支付
-      </button>
-    </div>
-    <!-- 停车券弹窗 -->
-    <div class="parking_pop popup">
-      <uni-popup
-        ref="parkingCoupon_popup"
-        type="bottom"
-        class="uni-popup"
-        style="z-index: 1000"
-      >
-        <div class="popup_wrap parkingCoupon_wrap">
-          <div class="popup_title">
-            <span>选择停车券</span>
-            <uni-icons
-              type="clear"
-              size="30"
-              color="#d4d4d4"
-              class="clear"
-              @click="closePark"
-            ></uni-icons>
-          </div>
-          <div class="popup_content">
-            <scroll-view scroll-y="true" style="height: 500px" class="scroll">
-              <div class="radio-group">
-                <div
-                  class="uni-list-cell uni-list-cell-pd"
-                  @click="parkChange(index, item)"
-                  v-for="(item, index) in memberTicketList"
-                  :key="index"
-                >
-                  <div style="color: #999; font-size: 28px">
-                    {{ item.ticketName }}
-                  </div>
-                  <img
-                    v-if="item.checked"
-                    :src="localimgPic + 'car-checked.png'"
-                    mode="widthFix"
-                  />
-                  <img
-                    v-else
-                    :src="localimgPic + 'pay-unchecked.png'"
-                    mode="widthFix"
-                  />
-                </div>
-              </div>
-            </scroll-view>
-            <div class="popup_button">
-              <span class="cancel_btn" @click="closePark">取消</span>
-              <span class="ok_btn" @click="doParkOK">确定</span>
-            </div>
-          </div>
-          <!-- <uni-view v-html="formText">{{formText}}</uni-view> -->
-        </div>
-      </uni-popup>
-    </div>
-    <!-- 积分抵扣弹窗 -->
-    <div class="integral_pop popup">
-      <uni-popup
-        ref="integral_popup"
-        type="bottom"
-        class="uni-popup"
-        style="z-index: 1000"
-      >
-        <div class="popup_wrap integral_wrap">
-          <div class="popup_title">
-            <div
-              style="
-                display: flex;
-                align-items: center;
-                justify-content: space-between;
-                flex: 1;
-              "
-            >
-              <span>选择积分抵扣</span>
-              <span style="color: #ed1c24"
-                >我的积分：{{ exintegral || 0 }}</span
-              >
-            </div>
-            <uni-icons
-              type="clear"
-              size="30"
-              color="#d4d4d4"
-              class="clear"
-              @click="closeIntegral"
-            >
-            </uni-icons>
-          </div>
-          <div class="popup_content">
-            <scroll-view scroll-y="true" style="height: 500px" class="scroll">
-              <radio-group class="radio-group" @change="integralChange">
-                <label
-                  class="uni-list-cell uni-list-cell-pd"
-                  v-for="(item, index) in parkIntegraltomoneyList"
-                  :key="index"
-                >
-                  <div style="color: #999; font-size: 28px">
-                    {{ item.name }}
-                  </div>
-                  <div>
-                    <radio :value="item.value" color="#ed1c24" />
-                  </div>
-                </label>
-              </radio-group>
-            </scroll-view>
-            <div class="popup_button">
-              <span class="cancel_btn" @click="closeIntegral">取消</span>
-              <span class="ok_btn" @click="doIntegralOK">确定</span>
-            </div>
-          </div>
-        </div>
-      </uni-popup>
-    </div>
-  </scroll-view>
-</template>
-
-<script>
-import uniPop from '@/components/uni-popup/uni-popup.vue'
-// const app = getApp()
-const app = {}
-export default {
-	components: {
-		uniPop
-	},
-	data() {
-		return {
-			parkOrderEntity: {}, // 停车信息
-			parkInfoEntity: {},
-			price: 0,
-			parkingCouponVal: '',
-			parkingCouponName: '',
-			integralVal: '',
-			integralName: '',
-			carno: '', // 车牌号
-			todayDiscountMoney: 0, // 今日抵扣金额
-			memberTicketList: [{
-				ticketValue: 0,
-				ticketName: '不使用'
-			}], //会员停车券
-			parkIntegraltomoneyList: [{
-				integral: 0,
-				name: '不使用',
-				value: 0
-			}], //积分抵现
-			bonus: '', // 积分
-			bonusfee: 0, // 积分抵钱
-			couponcode: '', // 停车券
-			couponfee: 0, // 停车抵钱
-			payfee: '', // 微信钱
-			ind: '', // 停车券索引
-			total: 0, // 实付款
-			localimgPic: '',
-			formText: '',
-       mallid: '',
-       exintegral: '' // 我的积分
-		}
-	},
-	// 分享好友
-	onShareAppMessage: function(res) {
-		return {
-			title: '停车缴费', // 分享标题
-			// desc: this.params.shareDescribe, // 分享描述
-			imageUrl: '', // 分享图标
-			path: `/pages/parkingFee/parkingFeeForm?carno=${this.carno}&mallid=${app.globalData.mallid}`
-		}
-	},
-	// 分享朋友圈
-	onShareTimeline: function(res) {
-		return {
-			title: '停车缴费', // 分享标题
-			// desc: this.params.shareDescribe, // 分享描述
-			imageUrl: '', // 分享图标
-			path: `/pages/parkingFee/parkingFeeForm?carno=${this.carno}&mallid=${app.globalData.mallid}`
-		}
-	},
-	onLoad(option) {
-		this.localimgPic = this.$staticPicUrl + '/wxminilocalimg/parkingFee/'
-		this.carno = option.carno
-     this.mallid = app.globalData.mallid
-		// #ifdef H5
-		app.globalData.member = JSON.parse(uni.getStorageSync('member'))
-		app.globalData.userInfo = JSON.parse(uni.getStorageSync('userinfo'))
-		app.globalData.openId = app.globalData.userInfo.openid
-     this.getTicket()
-		// #endif
-		// 场景二维码记录(是否扫码进入)
-		app.globalData.paramsScene = {}
-		this.$saveSceneQrcodeDetail('page', 'parkingFeeForm', '停车缴费', '', '', '', '')
-		this.createParkOrder()
-     this.getVoterBonus()
-	},
-	methods: {
-		// h5获取配置---公众号支付
-		getTicket: function() {
-			let self = this
-			var datas = {
-				groupId: app.globalData.groupId,
-				mallid: app.globalData.mallid,
-				url: window.location.href.split("#")[0]
-			}
-			self.$md(datas)
-			uni.request({
-				url: self.$baseURL + "api/1.0/login/getTicket",
-				method: 'POST',
-				data: datas,
-				header: JSON.parse(uni.getStorageSync('handleUser')),
-				success: (res) => {
-					if (res.data.code == 0) {
-						self.$wx.config({
-							debug: false, // 开启调试模式
-							appId: res.data.data.appId, // 必填，公众号的唯一标识
-							timestamp: res.data.data.timestamp, // 必填，生成签名的时间戳
-							nonceStr: res.data.data.nonceStr, // 必填，生成签名的随机串
-							signature: res.data.data.signature, // 必填，签名
-							jsApiList: ['chooseWXPay','scanQRCode','checkJsApi'] // 必填，需要使用的JS接口列表
-						});
-						self.$wx.ready(function() {
-							self.$wx.checkJsApi({
-								jsApiList: ['chooseWXPay'],
-								success: res => {
-									console.log('checked api:', res)
-								},
-								fail: err => {
-									console.log('check api fail:', err)
-								}
-							})
-						});
-						self.$wx.error(function(res) {
-							console.log('err', res)
-						});
-					} else {
-						uni.showToast({
-							title: res.data.msg,
-							duration: 2000,
-							icon: 'none'
-						})
-					}
-				}
-			});
-		},
-		// 获取积分
-		getVoterBonus: function() {
-			var params = {
-				groupId: app.globalData.groupId,
-				mallid: app.globalData.mallid,
-				mobile: app.globalData.member.mobile
-			}
-			this.$md(params)
-			this.$request({
-				method: "POST",
-				url: this.$baseURL + "api/1.0/member/getMemberInfo",
-				header: JSON.parse(uni.getStorageSync('handleUser')),
-				data: params,
-				}).then((r) => {
-					if (r.data.code == 0) {
-						var result = r.data.data;
-						this.exintegral = result.currnentintegral + '';
-					} else {
-						uni.showToast({
-							title: r.data.msg,
-							duration: 2000,
-							icon: 'none'
-						})
-					}
-				}).catch(err => {
-					console.log(err)
-			});
-		},
-     // 创建订单
-		createParkOrder: function() {
-       this.parkIntegraltomoneyList = []
-       this.memberTicketList = []
-			uni.showLoading({
-				title: '加载中'
-			});
-			let params = {
-				mallid: app.globalData.mallid,
-				vipcode: app.globalData.member.vipcode,
-				groupId: app.globalData.groupId,
-				carno: this.carno,
-				openId: app.globalData.openId
-			}
-			this.$md(params)
-			this.$request({
-				url: this.$baseURL + 'api/1.0/park/createParkOrder',
-				data: params,
-				method: 'POST',
-				header: JSON.parse(uni.getStorageSync('handleUser')),
-				}).then((res) => {
-					uni.hideLoading();
-					if (res.data.code === 0) {
-						const data = res.data.data
-						this.parkOrderEntity = data.parkOrderEntity
-						this.parkInfoEntity = data.parkInfoEntity
-             if (data.parkIntegraltomoneyList) {
-               this.parkIntegraltomoneyList.push(...data.parkIntegraltomoneyList)
-             }
-             console.log('积分', this.parkIntegraltomoneyList)
-             if (data.memberTicketList) {
-               this.memberTicketList.push(...data.memberTicketList)
-               this.memberTicketList.map(t => {
-               	t.checked = false
-               })
-             }
-						this.parkOrderEntity.servicefee = this.parkOrderEntity.servicefee / 100
-						this.total = this.parkOrderEntity.servicefee
-             this.bonus = 0
-             this.payfee = 0
-             this.couponfee = 0
-             this.bonusfee = 0
-             this.ind = 0
-						setTimeout(() => {
-							this.createParkOrder()
-						}, 180000)
-					} else {
-						uni.showToast({
-							title: res.data.msg,
-							duration: 2000,
-							icon: 'none'
-						})
-					}
-				}).catch(err => {
-					console.log(err)
-			});
-		},
-		// 打开停车券
-		openPark: function() {
-			this.$refs['parkingCoupon_popup'].open()
-		},
-		// 关闭停车券
-		closePark: function() {
-			this.$refs['parkingCoupon_popup'].close()
-		},
-		// 停车券选择
-		parkChange: function(index, item) {
-			item.checked = !item.checked
-			if (index === 0 && item.checked) {
-				this.memberTicketList.map(t => {
-					t.checked = false
-				})
-				this.memberTicketList[index].checked = true
-			} else {
-				this.memberTicketList[0].checked = false
-			}
-			this.ind = index
-			this.$forceUpdate()
-		},
-		// 确定停车券
-		doParkOK: function() {
-			const filter_data = this.memberTicketList.filter(t => t.checked == true && t.ticketValue !== 0)
-			if (this.todayDiscountMoney == this.parkInfoEntity.maxonedaydiscount) {
-				uni.showToast({
-					title: '今日抵扣金额上限',
-					icon: 'none'
-				})
-			} else {
-				let couponcode = ''
-				let couponfee = 0
-				if (filter_data.length === 0) { //不使用
-					this.couponfee = 0
-					this.couponcode = ''
-					let price = Math.round(this.bonusfee * 100 + this.couponfee * 100) / 100
-					this.total = Math.round((this.parkOrderEntity.servicefee - price) * 100) / 100
-					// console.log('停车券积分', this.couponcode)
-					// console.log('不使用停车券抵扣', this.couponfee)
-					// console.log('不使用停车券-价钱', this.total)
-					this.closePark()
-				} else { // 使用
-					filter_data.map(t => {
-						couponcode += t.couponCode + '#'
-						couponfee += t.ticketValue
-					})
-					this.couponfee = couponfee
-					this.couponcode = couponcode
-					let price = this.bonusfee + this.couponfee
-					if (price > this.parkInfoEntity.maxonetimediscount) {
-						uni.showToast({
-							title: '每次最多抵扣'+this.parkInfoEntity.maxonetimediscount+'元',
-							icon: 'none'
-						})
-						// 对选中不满足条件的进行删除
-						this.memberTicketList[this.ind].checked = false
-						this.couponfee = Math.round(this.couponfee - this.memberTicketList[this.ind].ticketValue)
-						let couponcodeSplit = this.couponcode.split('#')
-						couponcodeSplit.map((t, i) => {
-							if (t.couponcode === this.memberTicketList[this.ind].couponcode) {
-								couponcodeSplit.splice(i, 1)
-							}
-						})
-						this.couponcode = couponcodeSplit.join("#")
-						// console.log(this.couponcode)
-						// console.log(this.couponfee)
-					} else {
-						this.price = price
-						// 抵扣金额超出订单金额,实付款为0
-						if (this.price > this.parkOrderEntity.servicefee) {
-							this.total = 0
-						} else {
-							this.total = Math.round((this.parkOrderEntity.servicefee - price) * 100) / 100
-						}
-						// console.log('停车券积分', this.couponcode)
-						// console.log('停车券抵扣', this.couponfee)
-						// console.log('价钱', this.total)
-						this.closePark()
-					}
-				}
-			}
-		},
-		// 打开抵扣积分
-		openIntegral: function() {
-			this.$refs['integral_popup'].open()
-		},
-		// 关闭抵扣积分
-		closeIntegral: function() {
-			this.$refs['integral_popup'].close()
-		},
-		// 抵扣积分选择
-		integralChange: function(e) {
-			let val = e.detail.value
-			this.bonusfee = Number(val)
-			this.parkIntegraltomoneyList.map(t => {
-				if (t.value == val) {
-					this.bonus = t.integral
-				}
-			})
-		},
-		// 确定抵扣积分
-		doIntegralOK: function() {
-			let price = Math.round(this.bonusfee * 100 + this.couponfee * 100) / 100
-			if (this.todayDiscountMoney == this.parkInfoEntity.maxonedaydiscount) {
-				uni.showToast({
-					title: '今日抵扣金额上限',
-					icon: 'none'
-				})
-			} else {
-				if (price > this.parkInfoEntity.maxonetimediscount) {
-					uni.showToast({
-						title: '每次最多抵扣'+this.parkInfoEntity.maxonetimediscount+'元',
-						icon: 'none'
-					})
-				} else {
-					this.price = price
-					// 抵扣金额超出订单金额,实付款为0
-					if (this.price > this.parkOrderEntity.servicefee) {
-						this.total = 0
-					} else {
-						this.total = Math.round(this.parkOrderEntity.servicefee * 100 - price * 100) / 100
-					}
-					console.log('积分抵扣', this.bonusfee)
-					console.log('价钱', this.total)
-					this.closeIntegral()
-				}
-			}
-		},
-		// 支付
-		onSubmit: function() {
-			uni.showLoading({
-				title: '加载中'
-			});
-			let params = {
-				mallid: app.globalData.mallid,
-				groupId: app.globalData.groupId,
-				orderno: this.parkOrderEntity.orderno,
-				// #ifdef MP-WEIXIN
-				createuser: 'sys_miniprogram'
-				// #endif
-				// #ifdef H5
-				createuser: 'sys_gzh'
-				// #endif
-			}
-			let url = ''
-			// 是否微信支付
-			if (this.total !== 0) {
-				params.payfee = this.total * 100
-				url = 'api/1.0/park/weixinPay'
-				// 广福路
-				if (app.globalData.groupId === '1329609284362932225' && app.globalData.mallid === '000002') {
-					url = 'interfaceController/park/icbcPay'
-				}
-			} else {
-				url = 'api/1.0/park/notWeixinPay'
-			}
-			// 是否积分抵扣
-			if (this.bonus) {
-				params.bonus = this.bonus
-				params.bonusfee = this.bonusfee * 100
-			}
-			// 是否停车券抵扣
-			if (this.couponcode) {
-				params.couponcode = this.couponcode
-				params.couponfee = this.couponfee * 100
-			}
-			// 积分+卡券+微信
-			if (this.bonus && this.couponcode && this.total !== 0) {
-				params.paytype = 7
-			}
-			// 卡券+微信
-			if (!this.bonus && this.couponcode && this.total !== 0) {
-				params.paytype = 6
-			}
-			// 积分+微信
-			if (this.bonus && !this.couponcode && this.total !== 0) {
-				params.paytype = 5
-			}
-			// 积分+卡券
-			if (this.bonus && this.couponcode && this.total == 0) {
-				params.paytype = 4
-			}
-			// 微信
-			if (!this.bonus && !this.couponcode && this.total !== 0) {
-				params.paytype = 3
-			}
-			// 卡券
-			if (!this.bonus && this.couponcode && this.total == 0) {
-				params.paytype = 2
-			}
-			// 积分
-			if (this.bonus && !this.couponcode && this.total == 0) {
-				params.paytype = 1
-			}
-			console.log('支付', params)
-			this.$md(params)
-			const that = this
-			this.$request({
-				url: that.$baseURL + url,
-				data: params,
-				method: 'POST',
-				header: JSON.parse(uni.getStorageSync('handleUser')),
-				}).then((res) => {
-					uni.hideLoading();
-					if (res.data.code === 0) {
-						// 需要微信支付传参
-						if (that.total !== 0) {
-							// #ifdef MP-WEIXIN
-							var prepayJson = JSON.parse(res.data.data);
-							uni.requestPayment({
-								provider: 'wxpay',
-								timeStamp: prepayJson.timeStamp,
-								nonceStr: prepayJson.nonceStr,
-								package: prepayJson.package1,
-								signType: prepayJson.signType,
-								paySign: prepayJson.paySign,
-								success: function(res) {
-									console.log(that.parkOrderEntity.orderno)
-									this.$router.push({
-										path: './parkingFeeDetail?orderno=' + that
-											.parkOrderEntity.orderno
-									})
-								},
-								fail: function(err) {
-									uni.showToast({
-										title: '支付已取消！',
-										icon: 'none',
-										duration: 2000
-									})
-								}
-							});
-							// #endif
-							// #ifdef H5
-							if (app.globalData.groupId === '1329609284362932225' && app.globalData
-								.mallid === '000002') {
-								that.formText = res.data.data
-								that.$nextTick(() => {
-									document.querySelector('body').innerHTML = that.formText;
-									document.forms[0].submit()
-									// document.forms['alipaysubmit'].submit()
-									// console.log('idauto_submit_form', document.forms['alipaysubmit'])
-									// document.getElementByName('idauto_submit_form').submit()
-								})
-							} else {
-								var prepayJson = JSON.parse(res.data.data);
-								that.$wx.chooseWXPay({
-									timestamp: result.prepayId.timeStamp, // 支付签名时间戳
-									nonceStr: result.prepayId.nonceStr, // 支付签名随机串，不长于 32 位
-									package: result.prepayId
-									.package1, // 统一支付接口返回的prepay_id参数值，提交格式如：prepay_id=***）
-									signType: 'MD5', // 签名方式，默认为'SHA1'，使用新版支付需传入'MD5'
-									paySign: result.prepayId.paySign, // 支付签名
-									success(res) {
-										// 支付成功后的回调函数
-										console.log(that.parkOrderEntity.orderno)
-										this.$router.push({
-											path: './parkingFeeDetail?orderno=' + that
-												.parkOrderEntity.orderno
-										})
-										// cb(res);
-									},
-									fail(err) {
-										uni.showToast({
-											title: '支付已取消！',
-											icon: 'none',
-											duration: 2000
-										})
-									}
-								});
-							}
-							// #endif
-						} else {
-							this.$router.push({
-								path: './parkingFeeDetail?orderno=' + that.parkOrderEntity
-									.orderno
-							})
-						}
-					} else {
-						uni.showToast({
-							title: res.data.msg,
-							duration: 2000,
-							icon: 'none'
-						})
-					}
-				}).catch(err => {
-					console.log(err)
-			});
-		}
-	}
-}
-</script>
-
-<style lang="less" scoped>
-.scroll-Y {
-  width: 100%;
-  display: flex;
-  flex-direction: column;
-  height: 100vh;
-  background: #f2f2f2;
-}
-
-.wrap {
-  display: flex;
-  flex-direction: column;
-  width: 100%;
-
-  .form {
-    margin-top: 10px;
-    display: flex;
-    flex-direction: column;
-    background: #fff;
-
-    .form-item {
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
-      padding: 25px 35px;
-      box-sizing: border-box;
-      border-bottom: 1px solid #f2f2f2;
-
-      span {
-        font-size: 28px;
-        color: #999;
-      }
-
-      .label {
-        color: #000;
-      }
-
-      div {
-        display: flex;
-        align-items: center;
-      }
-    }
-  }
-
-  .tip {
-    padding: 17px 38px;
-    color: #999;
-    font-size: 28px;
-
-    span {
-      color: #999;
-      font-size: 28px;
-    }
-  }
-}
-
-// 底部导航
-.submit_bar {
-  position: fixed;
-  bottom: 0;
-  left: 0;
-  z-index: 99;
-  width: 100%;
-  padding-bottom: env(safe-area-inset-bottom);
-  background-color: #fff;
-  user-select: none;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-
-  .submit_text {
-    padding: 0 40px;
-    box-sizing: border-box;
-    display: flex;
-    flex-direction: column;
-    flex: 1;
-
-    span {
-      font-size: 28px;
-      color: #999;
-    }
-
-    .text_top {
-      display: flex;
-      align-items: center;
-
-      span {
-        color: #000;
-      }
-
-      .price {
-        color: #ed1c24;
-        font-size: 30px;
-      }
-    }
-
-    .text_bottom {
-    }
-  }
-
-  button {
-    margin: 0;
-    padding: 0;
-    height: 100px;
-    background: linear-gradient(to right, #ff6034, #ee0a24);
-    width: 220px;
-    font-weight: 500;
-    border: none;
-    border-radius: 0;
-    line-height: 100px;
-    text-align: center;
-    transition: opacity 0.2s;
-  }
-}
-
-// 弹窗
-.popup {
-  .popup_wrap {
-    width: 100%;
-    display: flex;
-    flex-direction: column;
-    background: #fff;
-    border-radius: 20px 20px 0 0;
-
-    span {
-      color: #999;
-      font-size: 28px;
-    }
-  }
-
-  .popup_title {
-    width: 100%;
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    padding: 30px 42px;
-    box-sizing: border-box;
-    border-bottom: 1px solid #f2f2f2;
-  }
-
-  .popup_content {
-    width: 100%;
-    display: flex;
-    flex-direction: column;
-    flex: 1;
-
-    .radio-group {
-      display: flex;
-      flex-direction: column;
-      width: 100%;
-      padding: 0 42px;
-      box-sizing: border-box;
-
-      img {
-        width: 48px;
-        height: 48px;
-      }
-
-      .uni-list-cell-pd {
-        display: flex;
-        justify-content: space-between;
-        padding: 42px 0;
-        box-sizing: border-box;
-        align-items: center;
-        border-bottom: 1px solid #f2f2f2;
-        margin: 0;
-
-        .radio {
-          display: flex;
-          justify-content: space-between;
-          align-items: center;
-          width: 100%;
-        }
-      }
-    }
-  }
-
-  .popup_button {
-    width: 100%;
-    display: flex;
-    align-items: center;
-
-    span {
-      width: 50%;
-      height: 110px;
-      line-height: 110px;
-      text-align: center;
-    }
-
-    .cancel_btn {
-      background: #fff;
-      color: #ed1c24;
-    }
-
-    .ok_btn {
-      background: #ed1c24;
-      color: #fff;
-    }
-  }
-}
-</style>

src/pages/parkingFee/parkingFeeList.vue

@@ -1,16 +1,191 @@
 <template>
-  <component :is="componentName"></component>
+  <scroll-view
+    style="background-color: #f4f7ff"
+    :class="['scroll-Y', theme]"
+    id="slideview"
+    scroll-y
+    lower-threshold="50"
+    scroll-top="0"
+    scroll-left="0"
+    scroll-with-animation="false"
+    enable-back-to-top="false"
+    @scrolltolower="bindscrolltolower"
+  >
+    <div>
+      <!-- <LoginDom></LoginDom> -->
+      <div
+        :class="['choice_card', index === 0 && 'mt30']"
+        v-for="(item, index) in list"
+        :key="index"
+        @click="toDetail(item.id)"
+      >
+        <div class="carno-box">
+          <div class="carno">{{ item.vehicleNo }}</div>
+          <div class="servicefee">{{ item.actualPayFee | currency }}</div>
+        </div>
+        <div class="choice_card_index">{{ item.parkName }} </div>
+        <div class="choice_card_index orderno-box">
+          <div class="orderno">订单号 : {{ item.orderNo }}</div>
+          <van-icon name="arrow" />
+        </div>
+        <div class="choice_card_index">
+          <div>入场时间 : {{ item.enterTime }}</div>
+        </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>
+        </div>
+      </div>
+      <div class="notice-info">
+        <!-- 为确保用户可以执行下滑动作，设置单次响应的数据量为4 -->
+        <div
+        >{{ numberOfElements? '查看更多' : '没有更多数据了' }}
+        </div>
+      </div>
+      <div style="height: 10vh;"></div>
+    </div>
+  </scroll-view>
 </template>
 
 <script>
-import officeBlueCom from './components/officeBlue/parkingFeeList.vue';
-import baseParkingFeeCom from './components/base/parkingFeeList.vue';
+import parkingFeeListJs from './mixins/parkingFeeList'
 import baseMixins from './mixins/base'
 export default {
-  mixins:[baseMixins],
-  components: {
-    officeBlueCom,
-    baseParkingFeeCom,
-  },
-};
+  mixins:[baseMixins, parkingFeeListJs]
+}
 </script>
+
+<style lang="less" scoped>
+.scroll-Y {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  height: 100vh;
+  background: #f2f2f2;
+}
+
+.wrap {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+}
+
+.parkingFeeList-item {
+  background: #fff;
+  display: flex;
+  flex-direction: column;
+  margin-top: 8px;
+
+  .item {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 30px 36px;
+    box-sizing: border-box;
+
+    span {
+      font-size: 16px;
+    }
+  }
+
+  .item-bottom {
+    border-top: 1px solid #f2f2f2;
+    display: flex;
+    flex-direction: column;
+    padding: 0px 36px;
+    box-sizing: border-box;
+    padding-top: 8px;
+
+    div {
+      display: flex;
+      flex-direction: column;
+    }
+
+    span {
+      color: #999;
+      font-size: 14px;
+      margin-bottom: 10px;
+    }
+  }
+}
+
+.choice_card {
+  width: calc(100% - 120px);
+  margin-left: 30px;
+  // margin-top: 30px;
+  margin-bottom: 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;
+    margin-bottom: 20px;
+    .carno {
+      font-size: 36px;
+      color: #333333;
+      font-weight: 600;
+      line-height: 50px;
+    }
+    .servicefee {
+      font-size: 30px;
+      font-weight: 600;
+      color: #333333;
+      line-height: 42px;
+    }
+  }
+
+  .choice_card_index {
+    font-size: 28px;
+    font-weight: 400;
+    color: #999999;
+    line-height: 40px;
+    margin-bottom: 12px;
+    display: flex;
+    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;
+  }
+}
+
+.notice-info {
+  text-align: center;
+  color: #b5b3b3;
+  padding-bottom: 30px;
+
+  div {
+    margin-bottom: -7px;
+  }
+}
+</style>

src/pages/parkingFee/parkingFeePaperCoupon.vue

@@ -1,16 +1,203 @@
 <template>
-  <component :is="componentName"></component>
+  <div :class="['scroll-Y', theme]">
+    <div class="worp">
+      <div class="title">纸质优惠劵减免说明</div>
+      <div style="font-size: 28px; color: #808080; padding-top: 12px">
+        {{ parkPaperCouponRemark }}
+      </div>
+    </div>
+    <template v-if="paperCouponList.length">
+      <div
+        class="worp_index1"
+        v-for="(item, index) in paperCouponList"
+        :key="item.discountCode"
+      >
+        <div class="worp_index1_index">
+          <div class="content">劵码 {{ item.discountCode }}</div>
+          <div @click="deleteCoupon(index)"><van-icon name="delete-o" /></div>
+        </div>
+        <div
+          style="
+            padding-bottom: 25px;
+            margin-left: 20px;
+            margin-top: 20px;
+            font-size: 28px;
+          "
+        >
+          优惠劵金额 :<span style="color: #064c8a">{{
+            item.discountValueMoney | currency
+          }}</span>
+        </div>
+      </div>
+    </template>
+    <div
+      :class="{
+        worp_button: true,
+        blue_flewx_index3: custTypeId === 1,
+        green_flewx_index3: custTypeId === 2,
+      }"
+      @click="scanCode"
+    >
+      <img
+        :src="require('./static/images/sweep.png')"
+        style="width: 35px; height: 35px; margin-right: 20px"
+      />
+      <div>扫码用劵</div>
+    </div>
+    <div class="flewx">
+      <!-- <div class="flewx-content">应付<span style="color: red;font-size: 32px;padding-left: 20px;">{{actualFee |
+      currency}}</span> 元 <span style="color: #8d8d8d;padding-left: 30px;font-size: 28px;">已优惠{{discountFee |
+          currency}}元</span>
+      </div> -->
+      <div class="flewx-content">
+        已选<span class="num">{{ paperCouponList.length }}张</span>
+        <span class="discountFee"
+        >优惠券可优惠{{ discountFee | currency }}</span
+        >
+      </div>
+      <div
+        :class="{
+          flewx_index3: true,
+          blue_flewx_index3: custTypeId === 1,
+          green_flewx_index3: custTypeId === 2,
+          'btn-disabled': !parkInfo.servicefee,
+        }"
+        @click="confirm"
+      >
+        确定
+      </div>
+    </div>
+    <!-- 新的toast -->
+    <fui-toast ref="toast"></fui-toast>
+  </div>
 </template>
 
 <script>
-import officeBlueCom from './components/officeBlue/parkingFeePaperCoupon.vue';
-import baseParkingFeeCom from './components/base/parkingFeePaperCoupon.vue';
+import parkingFeePaperCouponJs from './mixins/parkingFeePaperCoupon'
 import baseMixins from './mixins/base'
 export default {
-  mixins:[baseMixins],
-  components: {
-    officeBlueCom,
-    baseParkingFeeCom,
-  },
-};
+  mixins:[baseMixins, parkingFeePaperCouponJs]
+}
 </script>
+
+<style lang="less" scoped>
+.scroll-Y {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  height: 100vh;
+  background: #f4f7ff;
+}
+
+.worp {
+  padding-left: 30px;
+  margin-top: 30px;
+  overflow: hidden;
+
+  .title {
+    font-size: 30px;
+    font-weight: 600;
+    color: #333333;
+    line-height: 42px;
+  }
+}
+
+.worp_index1 {
+  width: 92%;
+  margin-top: 30px;
+  margin-left: 4%;
+  font-size: 30px;
+  background: #fafbff;
+  border-radius: 4px;
+  border: 1px solid #d8dae0;
+}
+
+.worp_index1_index {
+  width: 650px;
+  height: 60px;
+  margin-left: 20px;
+  border-bottom: 1px solid #f2f2f2;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding-top: 10px;
+
+  .content {
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    overflow: hidden;
+  }
+}
+
+.worp_button {
+  width: 690px;
+  height: 80px;
+  border-radius: 50px;
+  text-align: center;
+  font-size: 30px;
+  line-height: 80px;
+  color: #fff;
+  margin-top: 45px;
+  // background-image: linear-gradient(to right, #7e4fa1, #433c7f);
+  background: #064c8a;
+  margin-left: 30px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.flewx {
+  width: 100%;
+  height: 100px;
+  background-color: #fff;
+  position: fixed;
+  bottom: 0;
+  display: flex;
+  align-items: center;
+  // padding-bottom: constant(safe-area-inset-bottom);
+  // padding-bottom: env(safe-area-inset-bottom);
+  padding-bottom: 20px;
+
+  .flewx-content {
+    font-weight: 400;
+    position: absolute;
+    left: 16px;
+    font-size: 28px;
+    .num {
+      color: #064c8a;
+    }
+    .discountFee {
+      color: #ee4d3f;
+    }
+  }
+
+  .flewx_index3 {
+    width: 150px;
+    height: 70px;
+    border-radius: 45px;
+    text-align: center;
+    font-size: 28px;
+    line-height: 70px;
+    color: #fff;
+    // background-image: linear-gradient(to right, #7e4fa1, #433c7f);
+    background: #064c8a;
+    box-shadow: 2px 3px 5px #888888;
+    position: absolute;
+    right: 16px;
+  }
+}
+
+.blue_flewx_index3 {
+  .color_flewx_index3('blue');
+}
+
+.green_flewx_index3 {
+  .color_flewx_index3('green');
+}
+
+.color_flewx_index3(@value) {
+  @color: 'color-@{value}';
+  background-image: none !important;
+  background-color: @@color !important;
+}
+</style>

src/pages/parkingFee/parkingFeePayment.vue

@@ -1,16 +1,86 @@
 <template>
-  <component :is="componentName"></component>
+  <scroll-view :class="['box', theme]">
+    <div>
+      <img
+        :src="require('./static/images/no-car.png')" />
+      <div class="carno">{{carno | formatCarno}}</div>
+      <div class="msg">{{msg}}</div>
+      <div class="searchPrice" @click="search">重新查询</div>
+    </div>
+  </scroll-view>
 </template>
 
 <script>
-import officeBlueCom from './components/officeBlue/parkingFeePayment.vue';
-import baseParkingFeeCom from './components/base/parkingFeePayment.vue';
+import parkingFeePaymentJs from './mixins/parkingFeePayment'
 import baseMixins from './mixins/base'
 export default {
-  mixins:[baseMixins],
-  components: {
-    officeBlueCom,
-    baseParkingFeeCom,
-  },
-};
+  mixins:[baseMixins, parkingFeePaymentJs]
+}
 </script>
+
+<style lang="less" scoped>
+
+.box {
+  text-align: center;
+  background-color: #F4F7FF;
+  opacity: 1;
+
+  img {
+    width: 80%;
+    // height: 200px;
+    margin-top: 200px;
+  }
+
+  div {
+    margin-top: 20px;
+  }
+
+  .carno {
+    font-size: 46px;
+    font-weight: 500;
+    color: #333333;
+    line-height: 65px;
+  }
+
+  .msg {
+    font-size: 36px;
+    font-weight: 400;
+    color: #919BAA;
+    line-height: 36px;
+  }
+
+  .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);
+
+    background-color: #064C8A;
+    border-radius: 45px;
+    font-size: 34px;
+    font-weight: 400;
+  }
+
+  // .blueSearchPrice {
+  // 	.colorSearchPrice('blue');
+  // }
+
+  // .greenSearchPrice {
+  // 	.colorSearchPrice('green');
+  // }
+
+  // .colorSearchPrice(@value) {
+  // 	@color: 'color-@{value}';
+  // 	background-image: none;
+  // 	background-color: @@color;
+  // }
+}
+</style>
+
+
+

src/pages/parkingFee/parkingFeeSuccess.vue

@@ -1,23 +1,126 @@
 <template>
-  <div>
-    <component :is="componentName" :theme="theme"></component>
+  <div :class="['scroll-Y', theme]">
+    <!--    <wx-points-commit ref='wxPointsCommit'></wx-points-commit>-->
+
+    <img :src="icon" />
+    <div class="pay-success-title">[支付成功]</div>
+    <div class="pay-success-info" >{{vehicleNo | formatCarno}}停车费支付成功</div>
+    <div class="pay-success-info" style="margin-bottom: 40px">请在<span style="color: var(--k-color-primary);">{{outParkCharging}}分钟</span>内离场</div>
+    <div>
+      <k-button title="查看缴费记录" style="margin-bottom: 24px;" @click="page_button" />
+      <k-button type="outline" title="返回首页" @click="page_button1" />
+    </div>
+
+    <!--    <div :class="{'page_button': true, 'blue_page_button': custTypeId === 1, 'green_page_button': custTypeId === 2}" @click="page_button">查看缴费记录</div>-->
+    <!--    <div :class="{'page_button1': true, 'blue_page_button1': custTypeId === 1, 'green_page_button1': custTypeId === 2}" @click="page_button1">返回首页</div>-->
   </div>
 </template>
 
 <script>
-import officeBlueCom from './components/officeBlue/parkingFeeSuccess.vue';
-import baseParkingFeeCom from './components/base/parkingFeeSuccess.vue';
-import purpleCom from './components/purple/parkingFeeSuccess.vue';
+import parkingFeeSuccessJs from './mixins/parkingFeeSuccess'
 import baseMixins from './mixins/base'
 export default {
-  mixins:[baseMixins],
-  components: {
-    officeBlueCom,
-    baseParkingFeeCom,
-    purpleCom
-  },
-  mounted() {
-    this.componentName = 'purpleCom';
-  }
-};
+  mixins:[baseMixins, parkingFeeSuccessJs]
+}
 </script>
+
+<style lang="less" scoped>
+.scroll-Y {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  height: 100vh;
+  background: #fff;
+  text-align: center;
+  img {
+    width: 110px;
+    height: 110px;
+    //margin-top: 250px;
+    margin: 126px auto 52px;
+  }
+  .pay-success-title {
+    height: 48px;
+    font-family: 'PingFang SC';
+    font-style: normal;
+    font-weight: 400;
+    font-size: 34px;
+    line-height: 48px;
+    margin-bottom: 40px;
+    color: #333333;
+  }
+  .pay-success-info {
+    /* 辽A 11111停车费支付成功 */
+    font-family: 'PingFang SC';
+    font-style: normal;
+    font-weight: 400;
+    font-size: 34px;
+    line-height: 48px;
+    /* identical to box height */
+    text-align: center;
+    color: #999999;
+    margin-bottom: 10px;
+  }
+  .pay-success-dec {
+    /* 请在20分钟内离场 */
+
+
+    position: absolute;
+    width: 279px;
+    height: 48px;
+    left: 236px;
+    top: 594px;
+
+    font-family: 'PingFang SC';
+    font-style: normal;
+    font-weight: 400;
+    font-size: 34px;
+    line-height: 48px;
+    /* identical to box height */
+
+    text-align: center;
+
+    color: #999999;
+
+  }
+}
+.page_button {
+  width: 86%;
+  height: 80px;
+  line-height: 80px;
+  border-radius: 40px;
+  margin-top: 40px;
+  margin-left: 7%;
+  font-size: 30px;
+  color: #fff;
+  background-image: linear-gradient(to right, #7e4fa1 , #433c7f);
+}
+.blue_page_button {
+  .color-background-color('blue')
+}
+.green_page_button {
+  .color-background-color('green')
+}
+.page_button1 {
+  width: 86%;
+  height: 80px;
+  line-height: 80px;
+  border-radius: 40px;
+  margin-top: 40px;
+  margin-left: 7%;
+  font-size: 30px;
+  color: #7e4fa1;
+  border:1px solid  #7e4fa1;
+}
+.style-color(@value) {
+  @color: 'color-@{value}';
+  color: @@color;
+  border-color: @@color;
+}
+.blue_page_button1 {
+  .style-color('blue')
+}
+.green_page_button1 {
+  .style-color('green')
+}
+</style>
+

src/pages/parkingFee/parkingReceipt/parkingApplication.vue

@@ -5,12 +5,17 @@
 <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 baseMixins from '../mixins/base'
 export default {
   mixins:[baseMixins],
   components: {
     officeBlueCom,
     baseParkingFeeCom,
+    // purpleCom: parkingApplication
   },
+    mounted() {
+    // this.componentName = 'purpleCom';
+  }
 };
 </script>

src/pages/parkingFee/parkingReceipt/parkingChangeHeader.vue

@@ -6,11 +6,16 @@
 import officeBlueCom from '../components/officeBlue/parkingReceipt/parkingChangeHeader.vue';
 import baseParkingFeeCom from '../components/base/parkingReceipt/parkingChangeHeader.vue';
 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';
+  }
 };
 </script>

src/pages/parkingFee/parkingReceipt/parkingChooseHeader.vue

@@ -6,11 +6,16 @@
 import officeBlueCom from '../components/officeBlue/parkingReceipt/parkingChooseHeader.vue';
 import baseParkingFeeCom from '../components/base/parkingReceipt/parkingChooseHeader.vue';
 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';
+  }
 };
 </script>

src/pages/parkingFee/parkingReceipt/parkingHeaderDetail.vue

@@ -6,11 +6,16 @@
 import officeBlueCom from '../components/officeBlue/parkingReceipt/parkingHeaderDetail.vue';
 import baseParkingFeeCom from '../components/base/parkingReceipt/parkingHeaderDetail.vue';
 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';
+  }
 };
 </script>

src/pages/parkingFee/parkingReceipt/parkingInvoice.vue

@@ -1,16 +1,21 @@
 <template>
-  <component :is="componentName"></component>
+  <component :is="componentName" :theme="theme"></component>
 </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';
 export default {
   mixins:[baseMixins],
   components: {
     officeBlueCom,
     baseParkingFeeCom,
+    // purpleCom: parkingInvoice
   },
+  mounted() {
+    // this.componentName = 'purpleCom';
+  }
 };
 </script>

src/pages/parkingFee/parkingReceipt/parkingInvoiceImage.vue

@@ -6,11 +6,16 @@
 import officeBlueCom from '../components/officeBlue/parkingReceipt/parkingInvoiceImage.vue';
 import baseParkingFeeCom from '../components/base/parkingReceipt/parkingInvoiceImage.vue';
 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';
+  }
 };
 </script>

src/pages/parkingFee/parkingReceipt/parkingOrderDetail.vue

@@ -6,11 +6,16 @@
 import officeBlueCom from '../components/officeBlue/parkingReceipt/parkingOrderDetail.vue';
 import baseParkingFeeCom from '../components/base/parkingReceipt/parkingOrderDetail.vue';
 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';
+  }
 };
 </script>

src/pages/parkingFee/parkingReceipt/parkingReceipt.vue

@@ -6,14 +6,19 @@
 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';
 export default {
   mixins:[baseMixins],
   components: {
     officeBlueCom,
     baseParkingFeeCom,
+    // purpleCom: parkingReceipt
   },
   mounted() {
-    // this.componentName = 'baseParkingFeeCom';
+    // this.componentName = 'purpleCom';
   }
+  // mounted() {
+  //   // this.componentName = 'baseParkingFeeCom';
+  // }
 };
 </script>

src/styles/common.less

@@ -9,64 +9,94 @@
 /* 公用方法 */
 // 背景颜色
 .color-background-color(@value) {
-    @color: 'color-@{value}';
-    background-image: none;
-    background-color: @@color;
+  @color: 'color-@{value}';
+  background-image: none;
+  background-color: @@color;
 }
+
 // tab导航栏
 .colorClassify(@value) {
-    @color: 'color-@{value}';
-    display: flex;
-    background-color: @@color;
-    font-size: 30px;
-    height: 82px;
-    line-height: 82px;
-    border-top: 2px solid @color-gold;
-    .classifyItem {
-        flex: 1;
-        color: @color-white;
-        text-align: center;
-        position: relative;
-        &::after {
-            content: '';
-            display: none;
-            width: 100px;
-            height: 2px;
-            background-color: @color-gold;
-            position: absolute;
-            bottom: 0;
-            left: 50%;
-            transform: translateX(-50%);
-        }
+  @color: 'color-@{value}';
+  display: flex;
+  background-color: @@color;
+  font-size: 30px;
+  height: 82px;
+  line-height: 82px;
+  border-top: 2px solid @color-gold;
+  .classifyItem {
+    flex: 1;
+    color: @color-white;
+    text-align: center;
+    position: relative;
+
+    &::after {
+      content: '';
+      display: none;
+      width: 100px;
+      height: 2px;
+      background-color: @color-gold;
+      position: absolute;
+      bottom: 0;
+      left: 50%;
+      transform: translateX(-50%);
     }
-    .isChecked {
-        color: @@color;
-        background-color: @color-white;
-        &::after {
-            display: block;
-        }
+  }
+  .isChecked {
+    color: @@color;
+    background-color: @color-white;
+
+    &::after {
+      display: block;
     }
+  }
 }
 
-button{
+button {
   //消除button的默认样式
   margin: 0;
   padding: 0;
-  border: 1px solid transparent;  //自定义边框
-  outline: none;    //消除默认点击蓝色边框效果
+  border: 1px solid transparent; //自定义边框
+  outline: none; //消除默认点击蓝色边框效果
 }
 
 .dialog-content-text {
-    font-size: 30px;
+  font-size: 30px;
 }
 
 
 /*颜色列表：红色*/
-:root{
+:root {
   --k-color-red-01: #F24439; /* 对应色值表第一行 */
   --k-color-red-02: #F56961; /* 对应色值表第二行 */
   --k-color-red-03: #F78F88; /* 对应色值表第三行 */
   --k-color-red-04: #FAB4B0; /* 对应色值表第四行 */
   --k-color-red-05: #FCDAD7; /* 对应色值表第五行 */
-  --k-color-red-06: #FEECEB; /* 对应色值表第六行 */  
+  --k-color-red-06: #FEECEB; /* 对应色值表第六行 */
+}
+
+/*颜色列表：浦东*/
+.theme-pudong {
+  --k-color-primary-01: #2E663F; /* 对应色值表第一行 */
+  --k-color-primary-02: #588565; /* 对应色值表第二行 */
+  --k-color-primary-03: #82A38C; /* 对应色值表第三行 */
+  --k-color-primary-04: #ABC2B2; /* 对应色值表第四行 */
+  --k-color-primary-05: #D5E0D9; /* 对应色值表第五行 */
+  --k-color-primary-06: #EAF0EC; /* 对应色值表第六行 */
+  --k-color-primary: var(--k-color-primary-01); /* 对应色值表第一行 */
+  --k-color-primary-active: var(--k-color-primary-03); /* 对应色值表第三行 */
+  --k-color-primary-disabled: var(--k-color-primary-05); /* 对应色值表第五行 */
 }
+
+/*颜色列表：红色*/
+.theme-jingan {
+  --k-color-primary-01: #143793; /* 对应色值表第一行 */
+  --k-color-primary-02: #435FA9; /* 对应色值表第二行 */
+  --k-color-primary-03: #7287BE; /* 对应色值表第三行 */
+  --k-color-primary-04: #A1AFD4; /* 对应色值表第四行 */
+  --k-color-primary-05: #D0D7E9; /* 对应色值表第五行 */
+  --k-color-primary-06: #E7EBF4; /* 对应色值表第六行 */
+  --k-color-primary: var(--k-color-primary-01); /* 对应色值表第一行 */
+  --k-color-primary-active: var(--k-color-primary-03); /* 对应色值表第三行 */
+  --k-color-primary-disabled: var(--k-color-primary-05); /* 对应色值表第五行 */
+}
+