ChargEco/WebApp-Lite/pages/charge/views/HeaderView.vue

<template>
  <view class="header-view">
    <view class="header-image">
      <image
        class="header-image"
        src="/static/charge/image-header.png"/>
      <view class="status-tips">{{statusTip}}</view>
      <view class="status-view" v-if="status">
        <view class="status-icon icon-loading" v-if="isLoading">
          <svg width="100%" height="100%" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
            <g clip-path="url(#clip0_482_8207)">
              <circle cx="12" cy="12" r="11" fill="#FFA028" stroke="white" stroke-width="2"/>
              <path d="M6 12C6 15.3133 8.68667 18 12 18C13.5933 18 15.12 17.3733 16.2667 16.2667L15.2667 15.2667C14.42 16.1667 13.24 16.6667 12 16.6667C7.84 16.6667 5.76 11.64 8.7 8.7C11.64 5.76 16.6667 7.84667 16.6667 12H14.6667L17.3333 14.6667H17.4L20 12H18C18 8.68667 15.3133 6 12 6C8.68667 6 6 8.68667 6 12Z" fill="white" stroke="white" stroke-width="0.3"/>
            </g>
          </svg>
        </view>
        <template v-else>
          <view class="status-icon" v-if="status=='Available' || status=='Preparing' || status == 'Finishing'">
            <svg width="100%" height="100%" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path opacity="0.04" d="M11.9322 0C18.5322 0 23.8644 5.3322 23.8644 11.9322C23.8644 18.5322 18.5322 23.8644 11.9322 23.8644C5.3322 23.8644 0 18.5322 0 11.9322C0 5.3322 5.36949 0 11.9322 0Z" fill="#0CC170"/>
              <path d="M11.9322 0.372881C18.3085 0.372881 23.4915 5.55593 23.4915 11.9322C23.4915 18.3085 18.3085 23.4915 11.9322 23.4915C5.55593 23.4915 0.372881 18.3085 0.372881 11.9322C0.372881 5.55593 5.55593 0.372881 11.9322 0.372881ZM11.9322 0C5.3322 0 0 5.3322 0 11.9322C0 18.5322 5.3322 23.8644 11.9322 23.8644C18.5322 23.8644 23.8644 18.5322 23.8644 11.9322C23.8644 5.3322 18.5322 0 11.9322 0Z" fill="#0CC170"/>
              <path d="M11.9319 3.72852C7.38275 3.72852 3.72852 7.38275 3.72852 11.9319C3.72852 16.4811 7.38275 20.1353 11.9319 20.1353C16.4811 20.1353 20.1353 16.4811 20.1353 11.9319C20.1353 7.38275 16.4811 3.72852 11.9319 3.72852ZM16.0336 9.80648C16.0336 9.80648 12.4912 13.7963 11.6709 14.7285C10.8878 15.6607 10.2539 14.7285 10.2539 14.7285L7.94207 12.3048C7.94207 12.3048 7.56919 11.7455 8.24038 11.1861C8.87428 10.6641 9.35902 11.1861 9.35902 11.1861L10.9997 12.9014L15.0641 9.06072C15.0641 9.06072 15.437 8.7997 15.8472 9.13529C16.1455 9.47089 16.0336 9.80648 16.0336 9.80648Z" fill="#0CC170"/>
            </svg>
          </view>
          <view class="status-icon" v-if="status == 'Unavailable'">
            <i-icon
              name="error-warning-fill"
              size="48rpx"
              color="#888"/>
          </view>
          <view class="status-icon icon-charging" v-if="status == 'Charging'">
            <svg width="100%" height="100%" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
              <g clip-path="url(#clip0_1099_2285)">
                <path d="M11.5 20L16.36 10.27H13V4L8 13.73H11.5V20ZM12 2C14.75 2 17.1 3 19.05 4.95C21 6.9 22 9.25 22 12C22 14.75 21 17.1 19.05 19.05C17.1 21 14.75 22 12 22C9.25 22 6.9 21 4.95 19.05C3 17.1 2 14.75 2 12C2 9.25 3 6.9 4.95 4.95C6.9 3 9.25 2 12 2Z" fill="#009E81"/>
              </g>
            </svg>
          </view>
        </template>
        <template v-if="status == 'Preparing'">
          <text class="status-loading" v-if="isLoading">Authenticating...</text>
          <text v-else>Authenticated</text>
        </template>
        <template v-else-if="status == 'Available'">
          <text v-if="isLoading">Authenticating...</text>
          <text v-else>Available</text>
        </template>
        <text class="status-Charging" v-else-if="status == 'Finishing'">Completed</text>
        <text v-else :class="'status-' + status">{{status}}</text>
      </view>
    </view>
    <view class="idle-fee-view" @click="showIdleFee" v-if="info.idleFee && info.idleFee.idleFee">
      <svg width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
        <path d="M5.84994 5.47044C7.30544 4.29908 9.11864 3.66232 10.9869 3.66644H11.0007C12.9484 3.66644 14.7379 4.34087 16.1501 5.47044L16.8338 4.78672C17.1916 4.42886 17.7719 4.42885 18.1297 4.78672C18.4876 5.14458 18.4876 5.72479 18.1297 6.08266L17.446 6.76637C18.6174 8.22636 19.254 10.0432 19.25 11.9151C19.25 16.4711 15.5561 20.1651 11 20.1651C6.44394 20.1651 2.75 16.4711 2.75 11.9151C2.75 9.95981 3.42994 8.16406 4.56638 6.74987L4.554 6.76569L3.87053 6.08257C3.51256 5.72478 3.51248 5.14452 3.87037 4.78663C4.22818 4.42882 4.80832 4.42882 5.16614 4.78663L5.84994 5.47044ZM11 18.3336C12.7017 18.3336 14.3338 17.6575 15.5371 16.4542C16.7404 15.2509 17.4164 13.6189 17.4164 11.9171C17.4164 10.2154 16.7404 8.58333 15.5371 7.38002C14.3338 6.1767 12.7017 5.50069 11 5.50069C9.29825 5.50069 7.66621 6.1767 6.46289 7.38002C5.25958 8.58333 4.58356 10.2154 4.58356 11.9171C4.58356 13.6189 5.25958 15.2509 6.46289 16.4542C7.66621 17.6575 9.29825 18.3336 11 18.3336ZM7.33356 1.83322C7.33356 1.32689 7.74402 0.916437 8.25034 0.916437H13.7503C14.2567 0.916437 14.6671 1.32689 14.6671 1.83322C14.6671 2.33954 14.2567 2.75 13.7503 2.75H8.25034C7.74402 2.75 7.33356 2.33954 7.33356 1.83322Z" fill="#333333"/>
        <path d="M11.9163 10.4999C11.9163 10.7761 12.1402 10.9999 12.4163 10.9999H13.6509C14.0657 10.9999 14.3001 11.476 14.0472 11.8048L10.9791 15.7933C10.688 16.1717 10.0828 15.9659 10.0828 15.4885V13.3335C10.0828 13.0574 9.85891 12.8335 9.58276 12.8335H8.34777C7.93301 12.8335 7.69859 12.3576 7.95136 12.0288L11.0199 8.03695C11.3109 7.65837 11.9163 7.86417 11.9163 8.34167V10.4999Z" fill="#009E81"/>
      </svg>
      <text class="idle-fee-lebel">This site has idle fees enabled.</text>
      <i-icon
        name="arrow-right-s-line"
        size="48rpx"
        color="#333"/>
    </view>
  </view>
</template>

<script>
export default {
  name: "StatusView",
  props: {
    info: {
      type: Object,
      default: () => ({})
    },
    status: {
      type: String,
      default: ""
    },
    isLoading: {
      type: Boolean,
      default: false
    },
    isAuthentic: {
      type: Boolean,
      default: false
    },
    isInitial: {
      type: Boolean,
      default: false
    },
    isCharging: {
      type: Boolean,
      default: false
    },
    isStop: {
      type: Boolean,
      default: false
    },
    password: {
      type: String,
      default: ""
    },
    isFailed: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      
    };
  },
  computed: {
    statusTip() {
      switch (this.status) {
        case "Available":
          return "Please Plug In Charging Cable";
        case "Preparing":
          if (!this.password) {
            return "Please set 4 Digit PIN";
          }
          return this.isLoading ? "Please wait" : "Please Make Payment To Proceed";
        case "Initiating":
          return "Please wait";
        case "Charging":
          return "Please Input PIN to Stop Charging";
        case "Unavailable":
          return "Unavailable";
        case "Finishing":
          return "Charging Completed";
        default:
          return "Loading...";
      }
    }
  },
  mounted() {
    
  },
  methods: {
    showIdleFee() {
      const idle = this.info.idleFee;
      let days = "", times = "";
      if (idle.repeatDay) {
        days = idle.repeatDay.join(", ")
      }
      if (idle.allDay) {
        times = "All day"
      } else {
        times = idle.startTime + " - " + idle.endTime;
      }
      const message = `Effective Days: ${days}\nEffective Time: ${times}\nGrace Period: ${idle.idleGracePeriod} min\nCharging Rate: ${idle.idleFee}/${idle.idleInterval} min\nIdle Fee Cap: ${idle.idleFeeCap}`
      uni.showModal({
        title: "Idle Fees",
        content: message,
        showCancel: false,
        confirmText: "CLOSE"
      })
    }
  }
}
</script>

<style scoped>
.header-view {
  display: flex;
  padding: 32rpx;
  align-items: center;
  flex-direction: column;
}
.header-image {
  width: 100%;
  height: auto;
  aspect-ratio: 1.916;
  position: relative;
}
.status-tips {
  left: 0;
  right: 0;
  color: white;
  bottom: -32rpx;
  font-size: 28rpx;
  font-weight: bold;
  text-align: center;
  position: absolute;
  padding: 24rpx 32rpx;
  border-radius: 24rpx;
  background-color: #0D1D18;
}
.status-view {
  top: 55%;
  color: #333;
  right: 40rpx;
  height: 60rpx;
  display: flex;
  font-size: 28rpx;
  font-weight: 500;
  transition: all .3s;
  position: absolute;
  padding-left: 8rpx;
  padding-right: 24rpx;
  align-items: center;
  border-radius: 60rpx;
  background-color: white;
}
.status-icon {
  width: 48rpx;
  height: 48rpx;
  margin-right: 12rpx;
}
.status-Unavailable {
  color: #888;
}
.status-Charging {
  color: #009E81;
}
.status-loading {
  color: #FFA028;
}
.icon-loading {
  animation-name: loading;
  animation-duration: 2s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}
.icon-charging {
  animation-name: loading;
  animation-duration: 10s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}
.auth-status {
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  position: absolute;
  border-radius: 280rpx;
  border: 12rpx solid #00FF19;
}
.failed-status {
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  position: absolute;
  border-radius: 280rpx;
  border: 12rpx solid #ED3F3F;
}
.stop-status {
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  position: absolute;
  align-items: center;
  justify-content: center;
}
.text-title {
  color: var(--accent-color);
  font-size: 48rpx;
  font-weight: bold;
  padding-top: 16rpx;
}
.authed {
  color: #1ABD00;
}
.text-title.error {
  color: #ED3F3F;
}
.text-message {
  color: #333;
  font-size: 28rpx;
  text-align: center;
  padding-top: 12rpx;
}
.view-soc {
  top: 12%;
  left: 26%;
  width: 70rpx;
  height: 70rpx;
  display: flex;
  position: absolute;
  align-items: center;
  border-radius: 100rpx;
  justify-content: center;
  background-color: white;
  border: 6rpx solid var(--primary-color);
}
.text-soc {
  color: #333;
  font-size: 22rpx;
  font-weight: bold;
}
.idle-fee-view {
  width: calc(100vw - 112rpx);
  display: flex;
  padding: 10rpx 24rpx;
  margin-top: 64rpx;
  margin-bottom: -32rpx;
  border-radius: 30px;
  align-items: center;
  background-color: #e6f1ef;
}
.idle-fee-lebel {
  flex: 1;
  color: #333;
  padding-left: 16rpx;
  font-size: 28rpx;
  font-weight: bold;
}
@keyframes loading {
  0% {
    transform: rotate(0deg);
  }
  50% {
    transform: rotate(180deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
</style>