chore: update

src/views/login/components/LoginRegist.vue

@@ -0,0 +1,196 @@
+<script setup lang="ts">
+import { useI18n } from "vue-i18n";
+import { ref, reactive } from "vue";
+import Motion from "../utils/motion";
+import { message } from "@/utils/message";
+import { updateRules } from "../utils/rule";
+import type { FormInstance } from "element-plus";
+import { useVerifyCode } from "../utils/verifyCode";
+import { $t, transformI18n } from "@/plugins/i18n";
+import { useUserStoreHook } from "@/store/modules/user";
+import { useRenderIcon } from "@/components/ReIcon/src/hooks";
+import Lock from "@iconify-icons/ri/lock-fill";
+import Iphone from "@iconify-icons/ep/iphone";
+import User from "@iconify-icons/ri/user-3-fill";
+
+const { t } = useI18n();
+const checked = ref(false);
+const loading = ref(false);
+const ruleForm = reactive({
+  username: "",
+  phone: "",
+  verifyCode: "",
+  password: "",
+  repeatPassword: ""
+});
+const ruleFormRef = ref<FormInstance>();
+const { isDisabled, text } = useVerifyCode();
+const repeatPasswordRule = [
+  {
+    validator: (rule, value, callback) => {
+      if (value === "") {
+        callback(new Error(transformI18n($t("login.purePassWordSureReg"))));
+      } else if (ruleForm.password !== value) {
+        callback(
+          new Error(transformI18n($t("login.purePassWordDifferentReg")))
+        );
+      } else {
+        callback();
+      }
+    },
+    trigger: "blur"
+  }
+];
+
+const onUpdate = async (formEl: FormInstance | undefined) => {
+  loading.value = true;
+  if (!formEl) return;
+  await formEl.validate((valid, fields) => {
+    if (valid) {
+      if (checked.value) {
+        // 模拟请求，需根据实际开发进行修改
+        setTimeout(() => {
+          message(transformI18n($t("login.pureRegisterSuccess")), {
+            type: "success"
+          });
+          loading.value = false;
+        }, 2000);
+      } else {
+        loading.value = false;
+        message(transformI18n($t("login.pureTickPrivacy")), {
+          type: "warning"
+        });
+      }
+    } else {
+      loading.value = false;
+      return fields;
+    }
+  });
+};
+
+function onBack() {
+  useVerifyCode().end();
+  useUserStoreHook().SET_CURRENTPAGE(0);
+}
+</script>
+
+<template>
+  <el-form
+    ref="ruleFormRef"
+    :model="ruleForm"
+    :rules="updateRules"
+    size="large"
+  >
+    <Motion>
+      <el-form-item
+        :rules="[
+          {
+            required: true,
+            message: transformI18n($t('login.pureUsernameReg')),
+            trigger: 'blur'
+          }
+        ]"
+        prop="username"
+      >
+        <el-input
+          v-model="ruleForm.username"
+          clearable
+          :placeholder="t('login.pureUsername')"
+          :prefix-icon="useRenderIcon(User)"
+        />
+      </el-form-item>
+    </Motion>
+
+    <Motion :delay="100">
+      <el-form-item prop="phone">
+        <el-input
+          v-model="ruleForm.phone"
+          clearable
+          :placeholder="t('login.purePhone')"
+          :prefix-icon="useRenderIcon(Iphone)"
+        />
+      </el-form-item>
+    </Motion>
+
+    <Motion :delay="150">
+      <el-form-item prop="verifyCode">
+        <div class="w-full flex justify-between">
+          <el-input
+            v-model="ruleForm.verifyCode"
+            clearable
+            :placeholder="t('login.pureSmsVerifyCode')"
+            :prefix-icon="useRenderIcon('ri:shield-keyhole-line')"
+          />
+          <el-button
+            :disabled="isDisabled"
+            class="ml-2"
+            @click="useVerifyCode().start(ruleFormRef, 'phone')"
+          >
+            {{
+              text.length > 0
+                ? text + t("login.pureInfo")
+                : t("login.pureGetVerifyCode")
+            }}
+          </el-button>
+        </div>
+      </el-form-item>
+    </Motion>
+
+    <Motion :delay="200">
+      <el-form-item prop="password">
+        <el-input
+          v-model="ruleForm.password"
+          clearable
+          show-password
+          :placeholder="t('login.purePassword')"
+          :prefix-icon="useRenderIcon(Lock)"
+        />
+      </el-form-item>
+    </Motion>
+
+    <Motion :delay="250">
+      <el-form-item :rules="repeatPasswordRule" prop="repeatPassword">
+        <el-input
+          v-model="ruleForm.repeatPassword"
+          clearable
+          show-password
+          :placeholder="t('login.pureSure')"
+          :prefix-icon="useRenderIcon(Lock)"
+        />
+      </el-form-item>
+    </Motion>
+
+    <Motion :delay="300">
+      <el-form-item>
+        <el-checkbox v-model="checked">
+          {{ t("login.pureReadAccept") }}
+        </el-checkbox>
+        <el-button link type="primary">
+          {{ t("login.purePrivacyPolicy") }}
+        </el-button>
+      </el-form-item>
+    </Motion>
+
+    <Motion :delay="350">
+      <el-form-item>
+        <el-button
+          class="w-full"
+          size="default"
+          type="primary"
+          :loading="loading"
+          @click="onUpdate(ruleFormRef)"
+        >
+          {{ t("login.pureDefinite") }}
+        </el-button>
+      </el-form-item>
+    </Motion>
+
+    <Motion :delay="400">
+      <el-form-item>
+        <el-button class="w-full" size="default" @click="onBack">
+          {{ t("login.pureBack") }}
+        </el-button>
+      </el-form-item>
+    </Motion>
+  </el-form>
+</template>