src/components/account/sign-in.vue

@@ -1,94 +1,9 @@
 <script setup lang="ts">
 import "@/components/account/sign-in.css"
-import {reactive, ref} from 'vue'
-
-const emit = defineEmits(['option'])
-const handleBack = () => {
-  emit('option')
-}
-
-import type {FormInstance, FormRules} from 'element-plus'
-import {Back} from "@element-plus/icons-vue";
-
-const ruleFormRef = ref<FormInstance>()
-const validateEmail = (rule: any, value: string, callback: any) => {
-  if (!value) {
-    callback(new Error('请输入邮箱地址'))
-  } else if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value)) {
-    callback(new Error('请输入有效的邮箱地址'))
-  } else {
-    callback()
-  }
-}
-
-const validatePass = (rule: any, value: any, callback: any) => {
-  if (value === '') {
-    callback(new Error('请输入密码'))
-  } else {
-    if (ruleForm.checkPass !== '') {
-      if (!ruleFormRef.value) return
-      ruleFormRef.value.validateField('checkPass')
-    }
-    callback()
-  }
-}
-
-const ruleForm = reactive({
-  email: '',
-  pass: '',
-})
-
-const rules = reactive<FormRules<typeof ruleForm>>({
-  email: [{validator:validateEmail,trigger:'blur'}],
-  pass: [{validator: validatePass, trigger: 'blur'}],
-})
-
-const submitForm = (formEl: FormInstance | undefined) => {
-  if (!formEl) return
-  formEl.validate((valid) => {
-    if (valid) {
-      console.log('submit!')
-    } else {
-      console.log('error submit!')
-    }
-  })
-}
 </script>
 
 <template>
-  <el-form
+  in
-      ref="ruleFormRef"
-      style="max-width: 600px"
-      :model="ruleForm"
-      status-icon
-      :rules="rules"
-      label-width="auto"
-      class="demo-ruleForm"
-  >
-    <el-form-item style="width:100%;">
-      <!--      返回-->
-      <el-button :shouldAddSpace="true" class="ButtonState-left ButtonState" round @click="handleBack">
-        <el-icon>
-          <Back/>
-        </el-icon>
-        返回
-      </el-button>
-      <el-text>登录</el-text>
-    </el-form-item>
-    <el-form-item label="电子邮箱（Email）" prop="email">
-      <el-input v-model="ruleForm.email" type="email" autocomplete="off"/>
-    </el-form-item>
-    <el-form-item label="密码（Password）" prop="pass">
-      <el-input v-model="ruleForm.pass" type="password" autocomplete="off"/>
-    </el-form-item>
-    <el-form-item style="width:100%;">
-      <!--      忘记密码-->
-      <el-button key="ResetPassword" type="info" text style="height: 20px; margin: 0;padding: 0;">忘记密码？</el-button>
-    </el-form-item>
-    <el-form-item>
-      <el-button type="primary" @click="submitForm(ruleFormRef)" style="height: 70px;">提交</el-button>
-    </el-form-item>
-  </el-form>
 </template>
 
 <style scoped>

src/components/account/sign-up.vue

@@ -85,7 +85,7 @@ const submitForm = (formEl: FormInstance | undefined) => {
         </el-icon>
         返回
       </el-button>
-      <el-text>注册</el-text>
+      <el-text>登录</el-text>
     </el-form-item>
     <el-form-item label="用户名（UserID）" prop="userid">
       <el-input v-model="ruleForm.text" type="text" autocomplete="off"/>
@@ -99,6 +99,10 @@ const submitForm = (formEl: FormInstance | undefined) => {
     <el-form-item label="二次确认密码（CheckPass）" prop="checkPass">
       <el-input v-model="ruleForm.checkPass" type="password" autocomplete="off"/>
     </el-form-item>
+    <el-form-item style="width:100%;">
+      <!--      忘记密码-->
+      <el-button key="ResetPassword" type="info" text style="height: 20px; margin: 0;padding: 0;">忘记密码？</el-button>
+    </el-form-item>
     <el-form-item>
       <el-button type="primary" @click="submitForm(ruleFormRef)" style="height: 70px;">提交</el-button>
     </el-form-item>