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

<template>
	<view class="container fixed flexlcc">
    <view class="logo">
      <image
        class="logo"
        mode="aspectFit"
        src="/static/logo.png"/>
    </view>
    <view class="form-view">
      <view class="label-view">Station ID</view>
      <view class="input-view">
        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
          <circle cx="12" cy="12" r="12" fill="#C5C6CC"/>
          <g clip-path="url(#clip0_1502_8838)">
            <path d="M18.1332 7.08768L16.6869 5.65115C16.5607 5.52857 16.3914 5.46056 16.2155 5.46183C16.0396 5.46309 15.8712 5.53353 15.7468 5.65791C15.6225 5.78229 15.552 5.95063 15.5508 6.12653C15.5495 6.30243 15.6175 6.47176 15.7401 6.59792L16.6778 7.53813L15.9858 8.26049C15.8771 8.37267 15.8163 8.52277 15.8163 8.679C15.8163 8.83522 15.8771 8.98532 15.9858 9.09751C16.0382 9.15398 16.1019 9.19883 16.1727 9.22916C16.2435 9.25949 16.3199 9.27463 16.3969 9.27359L17.1799 9.27195V15.4087C17.1799 15.5173 17.1367 15.6215 17.06 15.6983C16.9832 15.7751 16.879 15.8182 16.7704 15.8182C16.6618 15.8182 16.5576 15.7751 16.4808 15.6983C16.404 15.6215 16.3609 15.5173 16.3609 15.4087V11.5905C16.3608 11.1207 16.1742 10.67 15.842 10.3377C15.5098 10.0053 15.0593 9.8185 14.5894 9.81823H14.1799V6.5455C14.1799 6.40222 14.1518 6.26034 14.097 6.12796C14.0422 5.99558 13.9618 5.8753 13.8605 5.77399C13.7592 5.67268 13.6389 5.59233 13.5065 5.53752C13.3741 5.48272 13.2323 5.45454 13.089 5.45459H7.36335C7.22007 5.45454 7.07819 5.48272 6.94581 5.53752C6.81343 5.59233 6.69315 5.67268 6.59184 5.77399C6.49053 5.8753 6.41018 5.99558 6.35537 6.12796C6.30057 6.26034 6.27239 6.40222 6.27244 6.5455V17.1827H6.13649C5.95577 17.1827 5.78245 17.2545 5.65466 17.3823C5.52687 17.51 5.45508 17.6834 5.45508 17.8641C5.45508 18.0448 5.52687 18.2181 5.65466 18.3459C5.78245 18.4737 5.95577 18.5455 6.13649 18.5455H14.3183C14.499 18.5455 14.6723 18.4737 14.8001 18.3459C14.9279 18.2181 14.9997 18.0448 14.9997 17.8641C14.9997 17.6834 14.9279 17.51 14.8001 17.3823C14.6723 17.2545 14.499 17.1827 14.3183 17.1827H14.1799V11.1835H14.5894C14.698 11.1835 14.8022 11.2266 14.879 11.3034C14.9557 11.3802 14.9989 11.4844 14.9989 11.593V15.4095C14.9989 15.6423 15.0447 15.8728 15.1338 16.0878C15.2228 16.3029 15.3534 16.4983 15.5179 16.6629C15.6825 16.8274 15.8779 16.958 16.0929 17.0471C16.308 17.1362 16.5385 17.182 16.7712 17.182C17.004 17.182 17.2344 17.1362 17.4495 17.0471C17.6645 16.958 17.8599 16.8274 18.0245 16.6629C18.1891 16.4983 18.3196 16.3029 18.4087 16.0878C18.4977 15.8728 18.5435 15.6423 18.5435 15.4095V8.0672C18.5437 7.88486 18.5075 7.70431 18.437 7.53612C18.3665 7.36794 18.2633 7.21548 18.1332 7.08768ZM11.8543 14.0852L9.81667 16.9722C9.80708 16.9823 9.79555 16.9903 9.78277 16.9957C9.76999 17.0012 9.75624 17.004 9.74234 17.0039C9.73661 17.0043 9.73085 17.0036 9.72541 17.0018C9.71996 17 9.71493 16.9971 9.71061 16.9933C9.66106 16.979 9.64345 16.9509 9.65758 16.9085L9.98661 14.9656H8.55336C8.53813 14.9668 8.5229 14.9634 8.50964 14.9558C8.49639 14.9482 8.48572 14.9368 8.47903 14.9231C8.45801 14.8951 8.46156 14.8633 8.48968 14.8276L10.6971 11.9407C10.7256 11.8983 10.7573 11.8913 10.7927 11.9202C10.8281 11.9274 10.8457 11.9558 10.8457 12.0052L10.5167 13.9474H11.7796C11.7948 13.9463 11.81 13.9497 11.8233 13.9572C11.8365 13.9648 11.8472 13.9761 11.8539 13.9898C11.8613 14.0212 11.8614 14.0538 11.8543 14.0852ZM12.8167 10.3104C12.8169 10.3892 12.8016 10.4673 12.7715 10.5402C12.7415 10.613 12.6973 10.6792 12.6416 10.7349C12.5859 10.7906 12.5197 10.8348 12.4469 10.8648C12.374 10.8949 12.296 10.9102 12.2172 10.91H8.23477C8.1559 10.9102 8.07777 10.8948 8.00487 10.8647C7.93197 10.8346 7.86574 10.7904 7.81002 10.7346C7.75429 10.6788 7.71015 10.6125 7.68016 10.5396C7.65017 10.4666 7.63491 10.3885 7.63526 10.3096V7.41855C7.63501 7.33976 7.65036 7.26169 7.6804 7.18884C7.71044 7.116 7.75459 7.04981 7.81031 6.99409C7.86603 6.93838 7.93221 6.89423 8.00506 6.86418C8.0779 6.83414 8.15597 6.8188 8.23477 6.81905H12.2167C12.2955 6.8188 12.3736 6.83414 12.4465 6.86418C12.5193 6.89423 12.5855 6.93838 12.6412 6.99409C12.6969 7.04981 12.7411 7.116 12.7711 7.18884C12.8012 7.26169 12.8165 7.33976 12.8163 7.41855L12.8167 10.3104Z" fill="white"/>
          </g>
          <defs>
            <clipPath id="clip0_1502_8838">
              <rect width="13.0909" height="13.0909" fill="white" transform="translate(5.4541 5.45459)"/>
            </clipPath>
          </defs>
        </svg>
        <input
          class="input-text"
          v-model="stationId"
          maxlength="25"
          placeholder-class="input-place"
          placeholder="e.g: SG-STATIONID-1"/>
      </view>
      <button
        class="button-next button-anim"
        type="accent"
        :loading="loading"
        :disabled="stationId.length==0"
        @click="toVerify">NEXT</button>
    </view>
    <PasswordView
      verify
      :visible="showPin"
      @change="changePassword"/>
	</view>
</template>

<script>
import auth from '../../utils/auth'
import apiCharge from '../../api/apiCharge';
import settings from '../../settings';
import PasswordView from '@/components/PasswordView.vue';
export default {
  data() {
    return {
      loading: false,
      showPin: false,
      stationId: "",
      chargeInfo: {},
      password: "",
    }
  },
  components: {PasswordView},
  onLoad(options) {
    
  },
  methods: {
    toVerify() {
      if (this.stationId.indexOf('-') > 0) {
        const arr = this.stationId.split('-');
        if (arr.length >= 2) {
          let bid = '', cid = '';
          for (let i = 0; i < arr.length; i++) {
            let sb = arr[i]?.trim();
            if (i == (arr.length-1)) {
              cid = sb;
            } else {
              if (i > 0) {
                bid += '-';
              }
              bid += sb;
            }
          }
          const data = {
            chargeBoxId: bid.toUpperCase(),
            connectorId: cid.toUpperCase()
          }
          this.chargeInfo = data;
          this.getChargerInfo()
        }
      } else {
        uni.showToast({
          title: "Please input a valid Station ID",
          icon: "none",
          duration: 2000
        })
      }
    },
    getChargerInfo() {
      this.loading = true;
      apiCharge.getChargerDetails(this.chargeInfo).then(res => {
        if (res.data) {
          if (res.data.status) {
            if (res.data.status == "Charging") {
              this.showPin = true;
            } else {
              this.toCharging();
            }
          }
        }
      }).catch(err => {
        uni.showModal({
          title: "Error",
          content: err,
          showCancel: false
        })
        /*uni.showToast({
          title: err,
          icon: "none",
          duration: 2000
        })*/
      }).finally(() => {
        this.loading = false;
      });
    },
    checkCharging() {
      this.loading = true;
      apiCharge.checkChargingDetails({
        ...this.chargeInfo,
        pin: this.password
      }).then(res => {
        if (res.data) {
          if (res.data.creditHistoryPk) {
            uni.navigateTo({
              url: "/pages/charge/index?pk=" + res.data.creditHistoryPk + "&info=" + encodeURIComponent(JSON.stringify(this.chargeInfo))
            });
          }
        }
      }).catch(err => {
        uni.showModal({
          title: "Error",
          content: err,
          confirmText: "OK",
          showCancel: false,
          success: res => {
            
          }
        })
      }).finally(() => {
        this.loading = false;
      });
    },
    changePassword(psd) {
      this.password = psd;
      this.showPin = false;
      this.checkCharging();
    },
    toCharging() {
      uni.navigateTo({
        url: "/pages/charge/index?info=" + encodeURIComponent(JSON.stringify(this.chargeInfo))
      });
    }
  }
}
</script>

<style scoped>
.logo {
  width: 200rpx;
  height: 200rpx;
}
.form-view {
  width: calc(100% - 64rpx);
  padding: 160rpx 32rpx 32rpx;
}
.label-view {
  color: #666666;
  font-size: 28rpx;
  padding-bottom: 16rpx;
}
.input-view {
  display: flex;
  padding: 24rpx;
  align-items: center;
  border-radius: 24rpx;
  border: 1px solid #EDEDED;
  background-color: white;
}
.input-text {
  flex: 1;
  padding: 0 24rpx;
  text-transform: uppercase;
}
.input-place {
  color: #C5C6CC;
  text-transform: initial;
}
.button-next {
  margin: 126rpx 0;
}
</style>