add PasswordView.vue

WebApp-Lite/components/PasswordView.vue

@@ -0,0 +1,171 @@
+<template>
+  <view class="password-view" :class="{show: visible}">
+    <view class="password-title">
+      <text v-if="verify">Verify your PIN</text>
+      <text v-else>Set 4 Digit Pin</text>
+    </view>
+    <view class="password-desc" v-if="verify">For security purposes, please verify your PIN.</view>
+    <view class="password-desc" v-else>For security purposes, please set your PIN.</view>
+    <view class="password-box-row">
+      <view
+        class="password-box-item flexcc"
+        v-for="(item, index) in passLength"
+        :key="item">
+        <text>{{getPassword(index)}}</text>
+      </view>
+      <input
+        v-model="password"
+        type="number"
+        class="pin-hide-input"
+        :maxlength="passLength"
+        @input="changePin"/>
+    </view>
+    <view class="padding16">
+      <button
+        class="button-next button-anim"
+        type="accent"
+        :disabled="password.length!=passLength"
+        @click="toConfirm">CONFIRM</button>
+    </view>
+    <view class="view-desc">
+      <view class="password-desc-title">Description:</view>
+      <view class="password-desc-content">The 4-digit PIN adds an extra layer of security to your session. It verifies your identity and prevents unauthorized access to your charging session, ensuring your experience remains safe and secure.</view>
+      <template v-if="verify">
+        <view class="password-desc-title">Verify your PIN:</view>
+        <view class="password-desc-content">The 4-digit PIN verifies that you are the authorized user of the charging session. It is required to stop the charging, ensuring that only you can end the session and preventing unauthorized interruptions.</view>
+      </template>
+      <template v-else>
+        <view class="password-desc-title">Set 4 Digit PIN:</view>
+        <view class="password-desc-content">Before starting your charging session, you must set a 4-digit PIN to verify your identity and ensure security. For added protection, avoid using sequential numbers (e.g., 1234) or repeating digits (e.g., 1111).</view>
+      </template>
+    </view>
+  </view>
+</template>
+
+<script>
+export default {
+  name:"password-view",
+  props: {
+    visible: {
+      type: Boolean,
+      default: false
+    },
+    verify: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data() {
+    return {
+      passLength: 4,
+      password: ""
+    };
+  },
+  watch: {
+    visible: {
+      immediate: true,
+      handler(value) {
+        this.$nextTick(() => {
+          this.password = "";
+        })
+      }
+    }
+  },
+  methods: {
+    getPassword(index) {
+      if ((this.password.length - 1) >= index) {
+        //return this.password.substring(index, index + 1);
+        return "●";
+      } else {
+        return "";
+      }
+    },
+    changePin() {
+      //console.log("修改前" + this.password);
+      const exp = /[^0-9]/ig;
+      const pin = this.password.replace(exp, "");
+      //console.log("修改后" + pin);
+      this.$nextTick(() => {
+        this.password = "" + pin;
+      });
+    },
+    toConfirm() {
+      this.$emit("change", this.password)
+    }
+  }
+}
+</script>
+
+<style scoped>
+.password-view {
+  top: 100vh;
+  left: 0;
+  right: 0;
+  height: 100vh;
+  z-index: 5;
+  position: fixed;
+  text-align: center;
+  transition: all .4s;
+  background-color: white;
+}
+.password-view.show {
+  top: 0;
+}
+.password-title {
+  color: #000;
+  font-size: 40rpx;
+  font-weight: bold;
+  margin-top: 15vh;
+}
+.password-desc {
+  color: #666;
+  font-size: 28rpx;
+  padding-top: 24rpx;
+  padding-bottom: 32rpx;
+}
+.password-box-row {
+  display: flex;
+  margin: 60rpx 52rpx;
+  align-items: center;
+  position: relative;
+  justify-content: space-around;
+}
+.password-box-item {
+  width: 110rpx;
+  height: 110rpx;
+  font-size: 42rpx;
+  font-weight: bold;
+  border-radius: 24rpx;
+  border: 1px solid #ededed;
+  background-color: white;
+}
+.pin-hide-input {
+  top: 0;
+  left: -60px;
+  right: 0;
+  bottom: 0;
+  height: 100%;
+  opacity: 0;
+  text-align: left;
+  color: transparent;
+  user-select: none;
+  position: absolute;
+}
+.button-next {
+  margin-bottom: 50rpx;
+}
+.view-desc {
+  padding: 32rpx;
+  text-align: left;
+}
+.password-desc-title {
+  color: #333;
+  font-size: 28rpx;
+  padding-top: 36rpx;
+  padding-bottom: 12rpx;
+}
+.password-desc-content {
+  color: #666;
+  font-size: 28rpx;
+}
+</style>