temporary-parking-frontend/src/pages/parkingFee/components/base/parkingFeeDetailSuccess.vue

<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.actualPayFee | currency }}</div>
          <div class="price-text">
            <!-- {{ ['支付成功', '支付失败', '已退款'][detail.payStatus] }} -->

<!--            {{ detail.refundStatus === '1' ? '已退款' : {'PAID': '已支付','PAY_FAIED': '支付失败'}[detail.paymentStatus] }}-->
            {{ detail.refundStatus !== 'NO_REFUND' ? '已退款' : {'PAID': '支付成功','UN_PAID': '支付失败'}[detail.payStatus || 'UN_PAID'] }}
          </div>
        </div>
        <div class="parking-part parking-detail">
          <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.createTime | momentFormat }}</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>
        <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 | momentFormat }}</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">{{ detail.serviceMin | parkingTime }}</span>
          </div>
          <div class="parking-info-item">
            <span class="info-key">开票状态</span>
            <span class="info-value">{{ detail.invoiceStatusText }}</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>
            <!-- // (detail.discountInfo.memberLevelDiscount / 100) | currency -->
            <span class="info-value">{{ detail.discountInfo && detail.discountInfo.memberLevelDiscount | currency }}</span>
          </div>
          <div class="parking-info-item">
            <span class="info-key">消费减免</span>
            <span class="info-value">{{ detail.discountInfo.consumeDiscount | currency }}</span>
          </div>
          <div class="parking-info-item">
            <span class="info-key">新会员积分减免</span>
            <span class="info-value">{{ detail.discountInfo.newMemberPointsDiscount | currency }}</span>
          </div>
          <div class="parking-info-item">
            <span class="info-key">积分减免</span>
            <span class="info-value">{{ detail.discountInfo.pointsDiscount | currency }}</span>
          </div>
          <div class="parking-info-item">
            <span class="info-key">会员卡券</span>
            <span class="info-value">{{ detail.discountInfo.couponDiscount | currency }}</span>
          </div>
          <div class="parking-info-item" v-if="detail.paperCouponCode">
            <span class="info-key">纸质优惠券</span>
            <span class="info-value">{{ detail.discountInfo.paperCouponDiscount | currency }}</span>
          </div>
          <div class="parking-info-item">
            <span class="info-key">使用优惠总计</span>
            <span class="info-value">{{ (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">{{ detail.discountInfo.actualUsedDiscount | 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.totalFee / 100) | currency }}</span>
          </div>
          <div class="parking-info-item">
            <span class="info-key">实缴</span>
            <span class="info-value red">{{ detail.actualPayFee | currency }}</span>
          </div>
        </div>
      </div>
      <div style="height: 30px"></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>