template-parking-h5/src/pages/parkingFee/components/purple/parkingFeeDetailSuccess.vue

<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>