style(KIP-7551): 缴费详情页面

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

@@ -0,0 +1,208 @@
+<template>
+  <scroll-view scroll-y="true" class="scroll-Y">
+<div>
+  <!--    <wx-points-commit ref="wxPointsCommit"></wx-points-commit>-->
+
+  <div class="parking-info">
+    <div class="parking-price">
+      <div class="price">{{ (detail.payfee / 100) | currency }}</div>
+      <div class="price-text">{{
+          detail.refundStatus === 1
+            ? '已退款'
+            : detail.payStatus === 1
+              ? '支付成功'
+              : '支付失败'
+        }}</div>
+    </div>
+    <div class="parking-part parking-detail">
+      <div class="parking-info-item">
+        <span class="info-key">支付方式</span>
+        <span class="info-value">{{ detail.paykind || '' }}</span>
+      </div>
+
+      <div class="parking-info-item">
+        <span class="info-key">支付时间</span>
+        <span class="info-value">{{ detail.createDate || '' }}</span>
+      </div>
+      <div class="parking-info-item">
+        <span class="info-key">车牌号</span>
+        <span class="info-value">{{ detail.carno | formatCarno }}</span>
+      </div>
+      <div class="parking-info-item">
+        <span class="info-key">停车场</span>
+        <span class="info-value">{{ detail.parkname }}</span>
+      </div>
+    </div>
+    <div class="parking-part parking-detail">
+      <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>
+      <!-- <div class="parking-info-item">
+        <span class="info-key">离场时间</span>
+        <span class="info-value">{{ detail.outtime || "" }}</span>
+      </div> -->
+      <div class="parking-info-item">
+        <span class="info-key">停车时长</span>
+        <span class="info-value">{{ parkingTime }}</span>
+      </div>
+      <div class="parking-info-item">
+        <span class="info-key">开票状态</span>
+        <span class="info-value">{{ isInvoiceName }}</span>
+      </div>
+    </div>
+  </div>
+  <div class="parking-info mgb-40 mb-save">
+    <div class="parking-part">
+      <div class="parking-info-item" v-if="false"
+      ><!--todo: 杭州首停不显示暂时根据groupId写死-->
+        <span class="info-key">首停优惠</span>
+        <span class="info-value">{{
+            (detail.firstParkFee / 100) | currency
+          }}</span>
+      </div>
+      <div class="parking-info-item">
+        <span class="info-key">会员等级减免</span>
+        <span class="info-value">{{
+            (detail.memberGradeFee / 100) | currency
+          }}</span>
+      </div>
+      <div class="parking-info-item">
+        <span class="info-key">消费减免</span>
+        <span class="info-value">{{
+            (detail.consumeFee / 100) | currency
+          }}</span>
+      </div>
+      <div class="parking-info-item">
+        <span class="info-key">新会员积分减免</span>
+        <span class="info-value">{{
+            (detail.newMemeberBonusFee / 100) | currency
+          }}</span>
+      </div>
+      <div class="parking-info-item">
+        <span class="info-key">积分减免</span>
+        <span class="info-value">{{
+            (detail.bonusfee / 100) | currency
+          }}</span>
+      </div>
+      <div class="parking-info-item">
+        <span class="info-key">会员卡券</span>
+        <span class="info-value">{{
+            (detail.couponfee / 100) | currency
+          }}</span>
+      </div>
+      <div class="parking-info-item" v-if="detail.paperCouponCode">
+        <span class="info-key">纸质优惠券</span>
+        <span class="info-value">{{
+            (detail.paperCouponFee / 100) | currency
+          }}</span>
+      </div>
+      <div class="parking-info-item">
+        <span class="info-key">使用优惠总计</span>
+        <span class="info-value">{{
+            ((detail.usetotalfee || 0) / 100) | currency
+          }}</span>
+      </div>
+      <div
+        class="parking-info-item"
+        v-if="detail.usetotalfee > detail.totalfee"
+      >
+        <span class="info-key">实际优惠总计</span>
+        <span class="info-value">{{
+            (detail.totalfee / 100) | currency
+          }}</span>
+      </div>
+    </div>
+    <div class="parking-part parking-detail">
+      <div class="parking-info-item">
+        <span class="info-key">应缴</span>
+        <span class="info-value">{{
+            (detail.servicefee / 100) | currency
+          }}</span>
+      </div>
+      <div class="parking-info-item">
+        <span class="info-key">实缴</span>
+        <span class="info-value red">{{
+            (detail.payfee / 100) | currency
+          }}</span>
+      </div>
+    </div>
+  </div>
+</div>
+  </scroll-view>
+</template>
+
+<script>
+import parkingFeeDetailSuccessJs from '../../mixins/parkingFeeDetailSuccess'
+export default {
+  mixins:[parkingFeeDetailSuccessJs]
+}
+</script>
+
+<style lang="less" scoped>
+.scroll-Y {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  height: 100vh;
+  background: #f2f2f2;
+  padding-bottom: 20px;
+  .parking-info {
+    margin: 20px;
+    padding: 20px;
+    border-radius: 30px;
+    background-color: #ffffff;
+    .parking-price {
+      text-align: center;
+      padding: 20px 0px 40px;
+      .price {
+        color: rgb(255, 0, 0);
+        font-weight: 600;
+        font-size: 52px;
+      }
+      .price-text {
+        font-weight: 300;
+        font-size: 30px;
+      }
+    }
+    .parking-detail {
+      border-top: 2px solid #f5f5f5;
+    }
+    .parking-part {
+      padding: 20px;
+      .parking-info-item {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        padding: 20px 0px;
+        font-size: 32px;
+        .info-key {
+          text-align: left;
+          color: #242424;
+        }
+        .info-value {
+          text-align: right;
+          color: #999999;
+        }
+        .red {
+          color: #ee2c34;
+        }
+      }
+    }
+  }
+  .mgb-40 {
+    margin-bottom: 20px;
+  }
+  //.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/officeBlue/parkingFeeDetailSuccess.vue

@@ -0,0 +1,224 @@
+<template>
+  <scroll-view
+    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.payfee / 100) | currency }}</div>
+          <div class="price-text">
+            {{
+              detail.refundStatus === 1
+                ? '已退款'
+                : detail.payStatus === 1
+                ? '支付成功'
+                : '支付失败'
+            }}
+          </div>
+        </div>
+        <div class="parking-part">
+          <div class="parking-info-item">
+            <span class="info-key">支付方式</span>
+            <span class="info-value">{{ detail.paykind || '' }}</span>
+          </div>
+          <div class="parking-info-item">
+            <span class="info-key">支付时间</span>
+            <span class="info-value">{{ detail.createDate || '' }}</span>
+          </div>
+          <div class="parking-info-item">
+            <span class="info-key">车牌号</span>
+            <span class="info-value">{{ detail.carno | 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">{{ parkingTime }}</span>
+          </div>
+          <div class="parking-info-item pb0">
+            <span class="info-key">开票状态</span>
+            <span class="info-value">{{ isInvoiceName }}</span>
+          </div>
+        </div>
+      </div>
+      <div class="parking-info mb-save">
+        <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.memberGradeFee / 100) | currency
+            }}</span>
+          </div>
+          <div class="parking-info-item">
+            <span class="info-key">消费减免</span>
+            <span class="info-value fw">{{
+              (detail.consumeFee / 100) | currency
+            }}</span>
+          </div>
+
+          <div class="parking-info-item">
+            <span class="info-key">积分减免</span>
+            <span class="info-value fw">{{
+              (detail.bonusfee / 100) | currency
+            }}</span>
+          </div>
+          <div class="parking-info-item">
+            <span class="info-key">会员卡券</span>
+            <span class="info-value fw">{{
+              (detail.couponfee / 100) | currency
+            }}</span>
+          </div>
+          <div class="parking-info-item" v-if="detail.paperCouponCode">
+            <span class="info-key">纸质优惠券</span>
+            <span class="info-value fw">{{
+              (detail.paperCouponFee / 100) | currency
+            }}</span>
+          </div>
+          <div class="parking-info-item pb0">
+            <span class="info-key">使用优惠总计</span>
+            <span class="info-value fw">{{
+              ((detail.usetotalfee || 0) / 100) | currency
+            }}</span>
+          </div>
+          <div
+            class="parking-info-item"
+            v-if="detail.usetotalfee > detail.totalfee"
+          >
+            <span class="info-key">实际优惠总计</span>
+            <span class="info-value fw">{{
+              (detail.totalfee / 100) | 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.servicefee / 100) | currency
+            }}</span>
+          </div>
+          <div class="parking-info-item">
+            <span class="info-key">实缴</span>
+            <span class="info-value fw">{{
+              (detail.payfee / 100) | currency
+            }}</span>
+          </div>
+        </div>
+      </div>
+    </div>
+  </scroll-view>
+</template>
+
+<script>
+import parkingFeeDetailSuccessJs from '../../mixins/parkingFeeDetailSuccess'
+export default {
+  mixins:[parkingFeeDetailSuccessJs]
+}
+</script>
+
+<style lang="less" scoped>
+.scroll-Y {
+  // width: 100%;
+  // display: flex;
+  // flex-direction: column;
+  // height: 100vh;
+  // background: #f2f2f2;
+  // padding-bottom: 20px;
+  .detail-box {
+    padding: 30px;
+    .parking-info {
+      // margin: 20px;
+      // border-radius: 30px;
+      // background-color: #ffffff;
+      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/mixins/parkingFeeDetailSuccess.js

@@ -0,0 +1,97 @@
+import { mapState } from 'vuex';
+import uni from '@/utils/uniHooks';
+
+export default {
+  data() {
+    return {
+      orderNo: '',
+      isInvoiceName: '',
+      detail: {},
+    };
+  },
+
+  mounted() {
+    setTimeout(() => {
+      uni.setNavigationBarTitle({
+        title: '缴费详情',
+      });
+    }, 300);
+    this.orderNo = this.$route.query.orderNo;
+    this.getData();
+  },
+  computed: {
+    parkingTime() {
+      const time = this.detail.serviceMin;
+      const days = parseInt(time / 60 / 24);
+      const hours = parseInt((time / 60) % 24);
+      const minutes = parseInt(time % 60);
+      if (days > 0) {
+        return `${days}天 ${hours}小时 ${minutes}分钟`;
+      }
+      if (hours > 0) {
+        return `${hours}小时 ${minutes}分钟`;
+      }
+      return `${minutes}分钟`;
+    },
+    ...mapState({
+      // custTypeId: (state) => state.custTypeId,
+      // paramsScene: (state) => state.paramsScene,
+      // mallid: (state) => state.mallId,
+      // openId: (state) => state.openid,
+      // member: (state) => state.member,
+      groupId: (state) => state.groupId,
+      // mobile: (state) => state.mobile,
+      // projectId: (state) => state.projectId,
+    }),
+  },
+  methods: {
+    getData() {
+      const params = {
+        orderno: this.orderNo,
+      };
+      uni.showLoading({
+        title: '加载中',
+      });
+      this.$md(params);
+      uni.request({
+        url: this.$baseURL + 'api/1.0/park/parkOrderDetail',
+        data: params,
+        method: 'POST',
+        header: JSON.parse(uni.getStorageSync('handleUser')),
+        success: (res) => {
+          uni.hideLoading();
+          if (res.data.code == 0) {
+            this.detail = res.data.data;
+            // this.detail = mockDetailSuccess.data;
+            const isInvoice = this.detail.isInvoice;
+            if (isInvoice == 0) {
+              this.isInvoiceName = '未开票';
+            } else if (isInvoice == 1) {
+              this.isInvoiceName = '已申请开票';
+            } else if (isInvoice == 2) {
+              this.isInvoiceName = '开票中';
+            } else if (isInvoice == 3) {
+              this.isInvoiceName = '开票完成';
+            } else if (isInvoice == 4) {
+              this.isInvoiceName = '开票失败';
+            }
+          } else {
+            uni.showToast({
+              title: res.data.msg,
+              duration: 2000,
+              icon: 'none',
+            });
+          }
+        },
+        fail: (err) => {
+          uni.hideLoading();
+          uni.showToast({
+            title: res.data.msg,
+            duration: 2000,
+            icon: 'none',
+          });
+        },
+      });
+    },
+  },
+};

src/pages/parkingFee/parkingFeeDetailSuccess.vue

@@ -1,321 +1,18 @@
-<template>
-  <scroll-view
-    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.payfee / 100) | currency }}</div>
-          <div class="price-text">
-            {{
-              detail.refundStatus === 1
-                ? '已退款'
-                : detail.payStatus === 1
-                ? '支付成功'
-                : '支付失败'
-            }}
-          </div>
-        </div>
-        <div class="parking-part">
-          <div class="parking-info-item">
-            <span class="info-key">支付方式</span>
-            <span class="info-value">{{ detail.paykind || '' }}</span>
-          </div>
-          <div class="parking-info-item">
-            <span class="info-key">支付时间</span>
-            <span class="info-value">{{ detail.createDate || '' }}</span>
-          </div>
-          <div class="parking-info-item">
-            <span class="info-key">车牌号</span>
-            <span class="info-value">{{ detail.carno | 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">{{ parkingTime }}</span>
-          </div>
-          <div class="parking-info-item pb0">
-            <span class="info-key">开票状态</span>
-            <span class="info-value">{{ isInvoiceName }}</span>
-          </div>
-        </div>
-      </div>
-      <div class="parking-info mb-save">
-        <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.memberGradeFee / 100) | currency
-            }}</span>
-          </div>
-          <div class="parking-info-item">
-            <span class="info-key">消费减免</span>
-            <span class="info-value fw">{{
-              (detail.consumeFee / 100) | currency
-            }}</span>
-          </div>
-
-          <div class="parking-info-item">
-            <span class="info-key">积分减免</span>
-            <span class="info-value fw">{{
-              (detail.bonusfee / 100) | currency
-            }}</span>
-          </div>
-          <div class="parking-info-item">
-            <span class="info-key">会员卡券</span>
-            <span class="info-value fw">{{
-              (detail.couponfee / 100) | currency
-            }}</span>
-          </div>
-          <div class="parking-info-item" v-if="detail.paperCouponCode">
-            <span class="info-key">纸质优惠券</span>
-            <span class="info-value fw">{{
-              (detail.paperCouponFee / 100) | currency
-            }}</span>
-          </div>
-          <div class="parking-info-item pb0">
-            <span class="info-key">使用优惠总计</span>
-            <span class="info-value fw">{{
-              ((detail.usetotalfee || 0) / 100) | currency
-            }}</span>
-          </div>
-          <div
-            class="parking-info-item"
-            v-if="detail.usetotalfee > detail.totalfee"
-          >
-            <span class="info-key">实际优惠总计</span>
-            <span class="info-value fw">{{
-              (detail.totalfee / 100) | 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.servicefee / 100) | currency
-            }}</span>
-          </div>
-          <div class="parking-info-item">
-            <span class="info-key">实缴</span>
-            <span class="info-value fw">{{
-              (detail.payfee / 100) | currency
-            }}</span>
-          </div>
-        </div>
-      </div>
-    </div>
-  </scroll-view>
-</template>
-
-<script>
-// const app = getApp()
-// const app = {};
-// import moment from 'moment';
-// import {detail as mockDetail, detailError as mockDetailSuccess} from './list'
-import { mapState } from 'vuex';
-import uni from '@/utils/uniHooks';
-export default {
-  data() {
-    return {
-      orderNo: '',
-      isInvoiceName: '',
-      detail: {},
-      // groupId: app.globalData.groupId
-    };
-  },
-
-  mounted() {
-    setTimeout(() => {
-      uni.setNavigationBarTitle({
-        title: '缴费详情',
-      });
-    }, 300);
-    this.orderNo = this.$route.query.orderNo;
-    this.getData();
-  },
-  computed: {
-    parkingTime() {
-      const time = this.detail.serviceMin;
-      const days = parseInt(time / 60 / 24);
-      const hours = parseInt((time / 60) % 24);
-      const minutes = parseInt(time % 60);
-      if (days > 0) {
-        return `${days}天 ${hours}小时 ${minutes}分钟`;
-      }
-      if (hours > 0) {
-        return `${hours}小时 ${minutes}分钟`;
-      }
-      return `${minutes}分钟`;
-    },
-    ...mapState({
-      // custTypeId: (state) => state.custTypeId,
-      // paramsScene: (state) => state.paramsScene,
-      // mallid: (state) => state.mallId,
-      // openId: (state) => state.openid,
-      // member: (state) => state.member,
-      groupId: (state) => state.groupId,
-      // mobile: (state) => state.mobile,
-      // projectId: (state) => state.projectId,
-    }),
-  },
-  methods: {
-    getData() {
-      const params = {
-        orderno: this.orderNo,
-      };
-      uni.showLoading({
-        title: '加载中',
-      });
-      this.$md(params);
-      uni.request({
-        url: this.$baseURL + 'api/1.0/park/parkOrderDetail',
-        data: params,
-        method: 'POST',
-        header: JSON.parse(uni.getStorageSync('handleUser')),
-        success: (res) => {
-          uni.hideLoading();
-          if (res.data.code == 0) {
-            this.detail = res.data.data;
-            // this.detail = mockDetailSuccess.data;
-            const isInvoice = this.detail.isInvoice;
-            if (isInvoice == 0) {
-              this.isInvoiceName = '未开票';
-            } else if (isInvoice == 1) {
-              this.isInvoiceName = '已申请开票';
-            } else if (isInvoice == 2) {
-              this.isInvoiceName = '开票中';
-            } else if (isInvoice == 3) {
-              this.isInvoiceName = '开票完成';
-            } else if (isInvoice == 4) {
-              this.isInvoiceName = '开票失败';
-            }
-          } else {
-            uni.showToast({
-              title: res.data.msg,
-              duration: 2000,
-              icon: 'none',
-            });
-          }
-        },
-        fail: (err) => {
-          uni.hideLoading();
-          uni.showToast({
-            title: res.data.msg,
-            duration: 2000,
-            icon: 'none',
-          });
-        },
-      });
-    },
-  },
-};
-</script>
-
-<style lang="less" scoped>
-.scroll-Y {
-  // width: 100%;
-  // display: flex;
-  // flex-direction: column;
-  // height: 100vh;
-  // background: #f2f2f2;
-  // padding-bottom: 20px;
-  .detail-box {
-    padding: 30px;
-    .parking-info {
-      // margin: 20px;
-      // border-radius: 30px;
-      // background-color: #ffffff;
-      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>
+<template>
+  <div>
+    <component :is="componentName"></component>
+  </div>
+</template>
+
+<script>
+import officeBlueCom from './components/officeBlue/parkingFeeDetailSuccess.vue';
+import baseParkingFeeCom from './components/base/parkingFeeDetailSuccess.vue';
+import baseMixins from './mixins/base'
+export default {
+  mixins:[baseMixins],
+  components: {
+    officeBlueCom,
+    baseParkingFeeCom,
+  },
+};
+</script>