feat（SCRM-9696、SCRM-SCRM-9695、SCRM-9693、SCRM-9691）:bug修复

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/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 / 100) | 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/parkingReceipt/parkingChangeHeader.js

@@ -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/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/parkingFeeDetail.vue

@@ -16,5 +16,8 @@ export default {
     baseParkingFeeCom,
     purpleCom: parkingFeeDetail
   },
+    mounted() {
+    this.componentName = 'purpleCom';
+  }
 };
 </script>

src/pages/parkingFee/parkingFeeDetailSuccess.vue

@@ -5,12 +5,17 @@
 <script>
 import officeBlueCom from './components/officeBlue/parkingFeeDetailSuccess.vue';
 import baseParkingFeeCom from './components/base/parkingFeeDetailSuccess.vue';
+import parkingFeeDetailSuccess from './components/purple/parkingFeeDetailSuccess.vue';
 import baseMixins from './mixins/base'
 export default {
   mixins:[baseMixins],
   components: {
     officeBlueCom,
     baseParkingFeeCom,
+    purpleCom: parkingFeeDetailSuccess
   },
+    mounted() {
+    this.componentName = 'purpleCom';
+  }
 };
 </script>

src/pages/parkingFee/parkingFeeList.vue

@@ -1,16 +1,21 @@
 <template>
-  <component :is="componentName"></component>
+  <component :is="componentName" :theme="theme"></component>
 </template>
 
 <script>
 import officeBlueCom from './components/officeBlue/parkingFeeList.vue';
 import baseParkingFeeCom from './components/base/parkingFeeList.vue';
+import parkingFeeList from './components/purple/parkingFeeList.vue';
 import baseMixins from './mixins/base'
 export default {
   mixins:[baseMixins],
   components: {
     officeBlueCom,
     baseParkingFeeCom,
+    purpleCom: parkingFeeList
   },
+  mounted() {
+    this.componentName = 'purpleCom';
+  }
 };
 </script>

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>