perf: 同步完整版代码

src/views/login/components/phone.vue

@@ -0,0 +1,96 @@
+<script setup lang="ts">
+import { ref, reactive } from "vue";
+import Motion from "../utils/motion";
+import { phoneRules } from "../utils/rule";
+import { message } from "@pureadmin/components";
+import type { FormInstance } from "element-plus";
+import { useVerifyCode } from "../utils/verifyCode";
+import { useUserStoreHook } from "/@/store/modules/user";
+import { useRenderIcon } from "/@/components/ReIcon/src/hooks";
+
+const loading = ref(false);
+const ruleForm = reactive({
+  phone: "",
+  verifyCode: ""
+});
+const ruleFormRef = ref<FormInstance>();
+const { isDisabled, text } = useVerifyCode();
+
+const onLogin = async (formEl: FormInstance | undefined) => {
+  loading.value = true;
+  if (!formEl) return;
+  await formEl.validate((valid, fields) => {
+    if (valid) {
+      // 模拟登陆请求，需根据实际开发进行修改
+      setTimeout(() => {
+        message.success("登陆成功");
+        loading.value = false;
+      }, 2000);
+    } else {
+      loading.value = false;
+      return fields;
+    }
+  });
+};
+
+function onBack() {
+  useVerifyCode().end();
+  useUserStoreHook().SET_CURRENTPAGE(0);
+}
+</script>
+
+<template>
+  <el-form ref="ruleFormRef" :model="ruleForm" :rules="phoneRules" size="large">
+    <Motion>
+      <el-form-item prop="phone">
+        <el-input
+          clearable
+          v-model="ruleForm.phone"
+          placeholder="手机号码"
+          :prefix-icon="useRenderIcon('iphone')"
+        />
+      </el-form-item>
+    </Motion>
+
+    <Motion :delay="100">
+      <el-form-item prop="verifyCode">
+        <div class="w-full flex justify-between">
+          <el-input
+            clearable
+            v-model="ruleForm.verifyCode"
+            placeholder="短信验证码"
+          />
+          <el-button
+            :disabled="isDisabled"
+            class="ml-2"
+            @click="useVerifyCode().start(ruleFormRef, 'phone')"
+          >
+            {{ text }}
+          </el-button>
+        </div>
+      </el-form-item>
+    </Motion>
+
+    <Motion :delay="150">
+      <el-form-item>
+        <el-button
+          class="w-full"
+          size="default"
+          type="primary"
+          :loading="loading"
+          @click="onLogin(ruleFormRef)"
+        >
+          登陆
+        </el-button>
+      </el-form-item>
+    </Motion>
+
+    <Motion :delay="200">
+      <el-form-item>
+        <el-button class="w-full" size="default" @click="onBack">
+          返回
+        </el-button>
+      </el-form-item>
+    </Motion>
+  </el-form>
+</template>