add HeaderView.vue

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

@@ -0,0 +1,272 @@
+<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>
+</template>
+
+<script>
+export default {
+  name: "StatusView",
+  props: {
+    title: {
+      type: String,
+      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
+    },
+    soc: {
+      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":
+          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: {
+    
+  }
+}
+</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;
+}
+@keyframes loading {
+  0% {
+    transform: rotate(0deg);
+  }
+  50% {
+    transform: rotate(180deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
+</style>