ChargEco/WebApp-Lite/pages/receipt/index.vue

<template>
  <x-skeleton
    class="container"
    :loading="loading"
    type="list"
    :configs="loadingConfig">
    <view class="init-view" v-if="isPending">
      <view class="flexlc padding16">
        <text class="text-title">We're still processing your receipt</text>
        <text class="text-message">We apologize for the inconvenience caused as we are still processing your settlement and unable to generate it as of yet.</text>
        <text class="text-message">Please refresh this page after a few minutes to view your receipt.</text>
        <text class="text-message">Thank you!</text>
      </view>
    </view>
    <view class="receipt-view" :class="{show: showReceipt}" v-else>
      <view class="card-view" v-if="receiptInfo.location">
        <view class="receipt-site-name" v-if="receiptInfo.location.locationName">
          <text>{{receiptInfo.location.locationName}}</text>
        </view>
        <view class="receipt-site-address" v-if="receiptInfo.location.locationAddress">
          <text>{{receiptInfo.location.locationAddress}}</text>
        </view>
        <view class="receipt-connector-view">
          <view class="site-icon">
            <svg width="100%" height="100%" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
              <ellipse cx="10.0631" cy="10" rx="10.0631" ry="10" fill="#0D1D18"/>
              <g clip-path="url(#clip0_1099_2273)">
                <path d="M15.207 5.90632L13.9941 4.70921C13.8883 4.60706 13.7463 4.55039 13.5988 4.55144C13.4513 4.55249 13.3101 4.61119 13.2058 4.71484C13.1015 4.8185 13.0424 4.95878 13.0413 5.10536C13.0403 5.25194 13.0973 5.39305 13.2001 5.49818L13.9865 6.28169L13.4062 6.88366C13.315 6.97715 13.264 7.10223 13.264 7.23242C13.264 7.36261 13.315 7.48769 13.4062 7.58117C13.4501 7.62823 13.5035 7.66561 13.5629 7.69089C13.6223 7.71616 13.6863 7.72877 13.7509 7.72791L14.4075 7.72655V12.8405C14.4075 12.931 14.3713 13.0178 14.3069 13.0818C14.2425 13.1458 14.1552 13.1818 14.0641 13.1818C13.973 13.1818 13.8857 13.1458 13.8213 13.0818C13.7569 13.0178 13.7207 12.931 13.7207 12.8405V9.65871C13.7207 9.26713 13.5642 8.8916 13.2856 8.61465C13.007 8.3377 12.6292 8.182 12.2352 8.18177H11.8917V5.4545C11.8918 5.33511 11.8682 5.21687 11.8222 5.10655C11.7762 4.99624 11.7089 4.896 11.6239 4.81158C11.5389 4.72715 11.4381 4.66019 11.3271 4.61452C11.2161 4.56885 11.0971 4.54537 10.9769 4.54541H6.17545C6.05531 4.54537 5.93632 4.56885 5.82531 4.61452C5.7143 4.66019 5.61343 4.72715 5.52847 4.81158C5.44352 4.896 5.37613 4.99624 5.33017 5.10655C5.28422 5.21687 5.26058 5.33511 5.26063 5.4545V14.3188H5.14662C4.99507 14.3188 4.84972 14.3786 4.74256 14.4851C4.6354 14.5916 4.5752 14.7361 4.5752 14.8867C4.5752 15.0373 4.6354 15.1817 4.74256 15.2882C4.84972 15.3947 4.99507 15.4545 5.14662 15.4545H12.0078C12.1594 15.4545 12.3047 15.3947 12.4119 15.2882C12.519 15.1817 12.5792 15.0373 12.5792 14.8867C12.5792 14.7361 12.519 14.5916 12.4119 14.4851C12.3047 14.3786 12.1594 14.3188 12.0078 14.3188H11.8917V9.3195H12.2352C12.3262 9.3195 12.4136 9.35546 12.478 9.41945C12.5424 9.48345 12.5786 9.57025 12.5786 9.66075V12.8412C12.5785 13.0352 12.617 13.2272 12.6917 13.4064C12.7663 13.5856 12.8758 13.7485 13.0138 13.8856C13.1518 14.0228 13.3157 14.1316 13.496 14.2058C13.6763 14.2801 13.8696 14.3183 14.0648 14.3183C14.26 14.3183 14.4533 14.2801 14.6336 14.2058C14.8139 14.1316 14.9778 14.0228 15.1158 13.8856C15.2538 13.7485 15.3633 13.5856 15.438 13.4064C15.5126 13.2272 15.5511 13.0352 15.5511 12.8412V6.72259C15.5512 6.57063 15.5208 6.42018 15.4617 6.28002C15.4026 6.13987 15.316 6.01282 15.207 5.90632ZM9.94156 11.7376L8.23278 14.1434C8.22475 14.1518 8.21507 14.1585 8.20436 14.163C8.19364 14.1676 8.18211 14.1699 8.17046 14.1699C8.16565 14.1702 8.16082 14.1696 8.15625 14.1681C8.15169 14.1666 8.14747 14.1641 8.14384 14.161C8.10229 14.149 8.08752 14.1257 8.09937 14.0904L8.3753 12.4713H7.17339C7.16061 12.4723 7.14784 12.4694 7.13672 12.4631C7.12561 12.4567 7.11667 12.4472 7.11106 12.4358C7.09343 12.4125 7.09641 12.386 7.11999 12.3563L8.9711 9.95047C8.99497 9.91516 9.02158 9.90935 9.05129 9.93341C9.08099 9.93938 9.09576 9.9631 9.09576 10.0042L8.81983 11.6228H9.87889C9.89164 11.6218 9.90439 11.6246 9.9155 11.6309C9.92661 11.6372 9.93556 11.6467 9.94122 11.6581C9.94736 11.6842 9.94748 11.7114 9.94156 11.7376ZM10.7486 8.59196C10.7488 8.65762 10.7359 8.72268 10.7107 8.78338C10.6855 8.84409 10.6485 8.89924 10.6018 8.94567C10.555 8.9921 10.4995 9.0289 10.4384 9.05393C10.3774 9.07897 10.3119 9.09175 10.2458 9.09155H6.90622C6.84008 9.09175 6.77456 9.07894 6.71343 9.05387C6.65229 9.02879 6.59676 8.99194 6.55003 8.94543C6.50329 8.89893 6.46628 8.84369 6.44113 8.78291C6.41598 8.72213 6.40318 8.657 6.40347 8.59127V6.18205C6.40327 6.11638 6.41614 6.05133 6.44133 5.99062C6.46652 5.92992 6.50355 5.87476 6.55027 5.82833C6.59699 5.7819 6.6525 5.74511 6.71358 5.72007C6.77467 5.69504 6.84014 5.68225 6.90622 5.68246H10.2455C10.3115 5.68225 10.377 5.69504 10.4381 5.72007C10.4992 5.74511 10.5547 5.7819 10.6014 5.82833C10.6481 5.87476 10.6852 5.92992 10.7104 5.99062C10.7356 6.05133 10.7484 6.11638 10.7482 6.18205L10.7486 8.59196Z" fill="#38D29A"/>
              </g>
            </svg>
          </view>
          <view class="flex3 flexcc" style="overflow: hidden;">
            <view class="info-header-text">{{receiptInfo.location.chargerName || "-"}}</view>
          </view>
          <view class="info-header-divide"></view>
          <view class="flex2 flexcc">
            <image
              v-if="receiptInfo.location.chargerType == 'AC'"
              class="rate-icon"
              src="@/static/icons/ic-type-ac.png"/>
            <image
              v-else
              class="rate-icon"
              src="@/static/icons/ic-type-dc.png"/>
            <view class="info-header-text">{{receiptInfo.location.chargerType + " " + receiptInfo.location.chargerWattage}}</view>
          </view>
        </view>
      </view>
      <view class="card-view" v-if="receiptInfo.subtotal">
        <view class="final-receipt-row" v-if="receiptInfo.subtotal.finalPayment">
          <view class="receipt-final-label">Final Payment:</view>
          <view class="receipt-final-value">{{receiptInfo.subtotal.finalPayment}}</view>
        </view>
        <view class="receipt-row" v-if="receiptInfo.subtotal.transId">
          <text class="receipt-label">Transaction ID:</text>
          <text class="receipt-value">{{receiptInfo.subtotal.transId}}</text>
        </view>
        <view class="receipt-row" v-if="receiptInfo.subtotal.refId">
          <text class="receipt-label">Reference ID:</text>
          <text class="receipt-value">{{receiptInfo.subtotal.refId}}</text>
        </view>
        <view class="receipt-row" v-if="receiptInfo.subtotal.transStartTime">
          <text class="receipt-label">Date Time:</text>
          <text class="receipt-value" style="zoom: 0.9;">{{receiptInfo.subtotal.transStartTime}}</text>
        </view>
        <view class="receipt-row" v-if="receiptInfo.subtotal.paymentMethod">
          <text class="receipt-label">Payment Method:</text>
          <text class="receipt-value">{{receiptInfo.subtotal.paymentMethod}}</text>
        </view>
        <view class="receipt-row" v-if="receiptInfo.subtotal.exchangeRate">
          <text class="receipt-label">Exchange Rate:</text>
          <text class="receipt-value">{{receiptInfo.subtotal.exchangeRate}}</text>
        </view>
        <view class="receipt-row" v-if="receiptInfo.subtotal.balance">
          <text class="receipt-label">Resulting Balance:</text>
          <text class="receipt-value">{{receiptInfo.subtotal.balance}}</text>
        </view>
        <view class="receipt-row" v-if="receiptInfo.subtotal.points">
          <text class="receipt-label">Points Earned:</text>
          <text class="receipt-value">{{receiptInfo.subtotal.points}}</text>
        </view>
      </view>
      <!--Breakdown-->
      <view class="card-view">
        <view class="card-title">Breakdown</view>
        <uni-collapse>
          <uni-collapse-item
            class="collapse-view"
            title-border="none"
            :border="false"
            v-if="receiptInfo.chargingFee">
            <template v-slot:title>
              <view class="receipt-collapse-row">
                <view class="receipt-label">Charging Fees<text v-if="receiptInfo.chargingFee.taxRate"> ({{receiptInfo.chargingFee.taxRate}})</text>:
                </view>
                <text class="receipt-value">{{receiptInfo.chargingFee.sumFee}}</text>
              </view>
            </template>
            <view class="receipt-period-view" v-for="(item,index) in receiptInfo.chargingFee.items" :key="index">
              <view class="receipt-period-title">
                <text class="receipt-value">Period {{index+1}}:</text>
                <text class="receipt-value">{{item.itemFee}}</text>
              </view>
              <view class="receipt-period-content">
                <view>{{item.itemTimePeriods}}, {{item.itemDuration}}</view>
                <view>{{item.itemRate}}</view>
                <view>{{item.itemDelivered}}</view>
              </view>
            </view>
            <divide :size="16"/>
          </uni-collapse-item>
          <uni-collapse-item
            class="collapse-view"
            title-border="none"
            :border="false"
            v-if="receiptInfo.idleFee && receiptInfo.idleFee.items.length > 0">
            <template v-slot:title>
              <view class="receipt-collapse-row">
                <view class="receipt-label">Idle Fees:</view>
                <text class="receipt-value">{{receiptInfo.idleFee.sumFee}}</text>
              </view>
            </template>
            <view class="receipt-period-view" v-for="(item,index) in receiptInfo.idleFee.items" :key="index">
              <view class="receipt-period-title">
                <text class="receipt-value">Period {{index+1}}:</text>
                <text class="receipt-value">{{item.itemFee}}</text>
              </view>
              <view class="receipt-period-content">
                <view>{{item.itemTimePeriods}}, {{item.itemDuration}}</view>
                <view>{{item.itemRule}}</view>
                <view>{{item.itemRate}}</view>
              </view>
            </view>
            <divide :size="16"/>
          </uni-collapse-item>
          <uni-collapse-item
            class="collapse-view"
            title-border="none"
            :border="false"
            v-if="receiptInfo.reservationFee && receiptInfo.reservationFee.itemFee">
            <template v-slot:title>
              <view class="receipt-collapse-row">
                <view class="receipt-label">Reservation Fees:</view>
                <text class="receipt-value">{{receiptInfo.reservationFee.itemFee}}</text>
              </view>
            </template>
            <view class="receipt-period-view">
              <view class="receipt-period-title">
                <text class="receipt-value">Fee:</text>
                <text class="receipt-value">{{receiptInfo.reservationFee.itemFee}}</text>
              </view>
              <view class="receipt-period-content">
                <view>{{receiptInfo.reservationFee.itemTimePeriods}}</view>
                <view>{{receiptInfo.reservationFee.itemRule}}</view>
              </view>
            </view>
            <divide :size="16"/>
          </uni-collapse-item>
          <uni-collapse-item
            class="collapse-view"
            title-border="none"
            :border="false"
            v-if="receiptInfo.voucher && receiptInfo.voucher.items.length > 0">
            <template v-slot:title>
              <view class="receipt-collapse-row">
                <view class="receipt-label">Vouchers:</view>
                <text class="receipt-value">{{receiptInfo.voucher.sumFee}}</text>
              </view>
            </template>
            <view class="receipt-period-view" v-for="(item,index) in receiptInfo.voucher.items" :key="index">
              <view class="receipt-period-title">
                <text class="receipt-value">{{item.voucherName}}:</text>
                <text class="receipt-value">{{item.itemFee}}</text>
              </view>
              <view class="receipt-period-content">
                <view>{{item.voucherId}}</view>
              </view>
            </view>
            <divide :size="16"/>
          </uni-collapse-item>
        </uni-collapse>
      </view>
      <view class="card-view">
        <uni-collapse>
          <uni-collapse-item
            class="collapse-view"
            title-border="none"
            :border="false"
            v-if="receiptInfo.operator && receiptInfo.operator.operatorName">
            <template v-slot:title>
              <view class="receipt-collapse-row">
                <image
                  class="receipt-logo"
                  mode="aspectFit"
                  v-if="receiptInfo.operator.operatorLogo"
                  :src="receiptInfo.operator.operatorLogo"/>
                <view class="flex1">
                  <view class="receipt-section-title">Operator</view>
                  <text class="receipt-section-desc">{{receiptInfo.operator.operatorName}}</text>
                </view>
              </view>
            </template>
            <view class="receipt-section-row" v-if="receiptInfo.operator.operatorUen">
              <text class="receipt-label2">Co./GST Reg. No.:</text>
              <text class="receipt-value2">{{receiptInfo.operator.operatorUen}}</text>
            </view>
            <view class="receipt-section-row" v-if="receiptInfo.operator.operatorAddress">
              <text class="receipt-label2">Address:</text>
              <text class="receipt-value2">{{receiptInfo.operator.operatorAddress}}</text>
            </view>
            <view class="receipt-section-row" v-if="receiptInfo.operator.operatorWebsite">
              <text class="receipt-label2">Website:</text>
              <text class="receipt-value2">{{receiptInfo.operator.operatorWebsite}}</text>
            </view>
            <view class="receipt-section-row" v-if="receiptInfo.operator.operatorEmail">
              <text class="receipt-label2">Email:</text>
              <text class="receipt-value2">{{receiptInfo.operator.operatorEmail}}</text>
            </view>
          </uni-collapse-item>
        </uni-collapse>
      </view>
      <view class="card-view flexc" v-if="false">
        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M13 19C13 15.69 15.69 13 19 13C20.1 13 21.12 13.3 22 13.81V6C22 4.89 21.1 4 20 4H4C2.89 4 2 4.89 2 6V18C2 19.11 2.9 20 4 20H13.09C13.04 19.67 13 19.34 13 19ZM4 8V6L12 11L20 6V8L12 13L4 8ZM17.75 22.16L15 19.16L16.16 18L17.75 19.59L21.34 16L22.5 17.41L17.75 22.16Z" fill="#009E81"/>
        </svg>
        <view class="text-email">Send receipt to my email</view>
      </view>
      <view class="card-view flexc" @click="downloadReceipt">
        <i-icon
          name="file-download-fill"
          color="#009E81"
          size="46rpx"/>
        <view class="text-email">Download receipt</view>
      </view>
      <button class="ui-button button-anim" type="primary" @click="toHome">DONE</button>
    </view>
  </x-skeleton>
</template>

<script>
import apiCharge from '@/api/apiCharge';
  export default {
    data() {
      return {
        loading: true,
        chargingPk: "",
        receiptInfo: {
          location: {},
          chargingFee: {},
          idleFee: {},
          reservationFee: {}
        },
        isView: false,
        isPending: true,
        showReceipt: false,
        loadingConfig: {
          padding: "56rpx 32rpx",
          headShow: false,
          itemGap: '48rpx',
          gridRows: 4,
          textRows: 5,
          textRowsGap: '36rpx',
          textWidth: ['30%', '100%', '100%', '100%'],
        }
      }
    },
    onLoad(options) {
      if (options.id) {
        this.chargingPk = options.id;
        if (options.action == "view") {
          this.isView = true;
        }
        setTimeout(() => {
          this.getReceipt();
        }, this.isView ? 200 : 8000);
      }
    },
    methods: {
      toHome() {
        if (this.isView) {
          uni.navigateBack();
        } else {
          uni.navigateTo({
            url: "/pages/index/index"
          })
        }
      },
      getReceipt() {
        /*uni.showLoading({
          title: "Loading..."
        })*/
        apiCharge.getReceipt(this.chargingPk).then(res => {
          uni.hideLoading();
          if (res.data) {
            this.receiptInfo = res.data;
            if (res.data.hasSettled) {
              this.isPending = false;
              setTimeout(() => {
                this.showReceipt = true;
              }, 500)
            } else {
              this.isPending = true;
            }
          }
        }).catch(err => {
          uni.showToast({
            icon: "none",
            title: err
          });
          this.isPending = true;
        }).finally(() => {
          this.loading = false;
          uni.stopPullDownRefresh();
        })
      },
      downloadReceipt() {
        apiCharge.downloadRecript(this.chargingPk);
      }
    },
    onPullDownRefresh() {
      this.getReceipt();
    }
  }
</script>

<style scoped>
.container {
  min-height: 100vh;
  background: #F8F8F8;
}
.init-view {
  padding-top: 20vh;
}
.card-view {
  padding: 32rpx;
  border-radius: 24rpx;
  margin-bottom: 32rpx;
  background: white;
  box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.02);
}
.card-title {
  color: #333;
  font-size: 26rpx;
  padding-bottom: 32rpx;
}
.icon-done {
  width: 100rpx;
  height: 100rpx;
  display: flex;
  border-radius: 120rpx;
  align-items: center;
  justify-content: center;
  background: #1ABD00;
}
.icon-logo {
  height: 100rpx;
}
.done-title {
  color: #1ABD00;
  font-size: 36rpx;
  text-align: center;
  font-weight: bold;
  padding: 24rpx 0 10rpx;
}
.done-content {
  color: #555;
  font-size: 26rpx;
  text-align: center;
  padding-bottom: 32rpx;
}
.text-title {
  color: var(--accent-color);
  padding: 16rpx;
  font-size: 48rpx;
  font-weight: bold;
  text-align: center;
}
.text-message {
  color: #333;
  font-size: 28rpx;
  text-align: center;
  padding-top: 12rpx;
  padding-bottom: 32rpx;
}
.receipt-view {
  opacity: 0;
  padding: 32rpx;
  transition: all .5s;
}
.receipt-view.show {
  opacity: 1;
}
.receipt-row {
  display: flex;
  align-items: center;
  margin-top: 16rpx;
  padding: 20rpx 12rpx;
  justify-content: space-between;
}
.final-receipt-row {
  display: flex;
  align-items: center;
  padding: 0 12rpx 20rpx;
  justify-content: space-between;
}
.receipt-row:nth-child(2n) {
  background-color: #f7f7f7;
}
.receipt-title {
  color: var(--primary-color);
  display: block;
  font-size: 28rpx;
  font-weight: bold;
  padding: 32rpx 0 16rpx;
}
.receipt-final-label {
  flex: 1;
  color: #333;
  font-size: 27rpx;
  padding-right: 32rpx;
}
.receipt-final-value {
  color: #009E81;
  text-align: right;
  font-size: 40rpx;
  font-weight: bold;
}
.receipt-label {
  flex: 1;
  color: #666;
  font-size: 27rpx;
  padding-right: 32rpx;
}
.receipt-label2 {
  flex: 1;
  color: #666;
  font-size: 24rpx;
  padding-right: 32rpx;
}
.receipt-value {
  color: #333;
  text-align: right;
  font-size: 26rpx;
  font-weight: bold;
}
.receipt-value2 {
  color: #333;
  text-align: right;
  font-size: 26rpx;
}
.receipt-logo {
  width: 60rpx;
  height: 60rpx;
  margin-right: 32rpx;
}
.receipt-section-title {
  color: #000;
  font-size: 28rpx;
  font-weight: bold;
}
.receipt-section-desc {
  color: #666;
  font-size: 24rpx;
}
.receipt-section-row {
  display: flex;
  align-items: center;
  padding: 16rpx 0rpx;
  justify-content: space-between;
}
.text-email {
  flex: 1;
  color: #222;
  font-size: 28rpx;
  padding-left: 24rpx;
}
.receipt-site-name {
  color: #000;
  font-size: 36rpx;
}
.receipt-site-address {
  color: #666;
  padding: 16rpx 0;
  font-size: 24rpx;
}
.receipt-connector-view {
  display: flex;
  padding: 12rpx 32rpx;
  padding-left: 12rpx;
  align-items: center;
  transition: all .3s;
  border-radius: 60rpx;
  background-color: #ececec;
}
.site-icon {
  width: 40rpx;
  height: 40rpx;
}
.rate-icon {
  width: 28rpx;
  height: 28rpx;
  margin-left: 24rpx;
}
.info-header-text {
  color: #333;
  font-size: 24rpx;
  padding: 0 12rpx;
  overflow: hidden;
  font-weight: bold;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.info-header-divide {
  margin: 0 32rpx;
  position: relative;
}
.info-header-divide:before {
  right: 0;
  left: 50%;
  width: 2rpx;
  height: 36rpx;
  content: " ";
  margin-top: -18rpx;
  position: absolute;
  background-color: rgba(0, 0, 0, 0.1);
}
.receipt-collapse-row {
  display: flex;
  align-items: center;
  padding: 16rpx 16rpx 16rpx 0rpx;
  justify-content: space-between;
}
.receipt-period-view {
  border-bottom: 1px solid #EFEFEF;
}
.receipt-period-title {
  display: flex;
  padding: 24rpx 0;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid #F2F2F2;
}
.receipt-period-content {
  color: #666;
  padding: 24rpx 0;
  font-size: 24rpx;
  text-align: right;
  line-height: 36rpx;
}
</style>