feat(register): temp save

src/view/login.vue

@@ -1,8 +1,5 @@
 <template>
-  <div
-    class="system-layer"
-    :style="{ backgroundImage: `url('/image/Frame 208@2x.png')` }"
-  >
+  <div class="system-layer" :style="{ backgroundImage: `url('/image/Frame 208@2x.png')` }">
     <div class="l-content">
       <div class="login-layer">
         <div class="content">
@@ -30,72 +27,61 @@
               <img class="code" src="/image/pic_camera@2x.png" />
             </div>
           </div>
-          <el-form class="panel login" :model="form" @submit.stop>
-            <h2>欢迎登录</h2>
-            <el-form-item class="panel-form-item">
-              <p class="err-info">{{ verification.phone }}</p>
-              <el-input
-                :maxlength="11"
-                v-model.trim="form.phone"
-                placeholder="手机号"
-                @keydown.enter="submitClick"
-              ></el-input>
-            </el-form-item>
-            <el-form-item class="panel-form-item">
-              <p class="err-info">{{ verification.psw }}</p>
-              <el-input
-                v-model="form.psw"
-                :maxlength="16"
-                placeholder="密码"
-                :type="flag ? 'text' : 'password'"
-                @keydown.enter="submitClick"
-              >
-                <template v-slot:suffix>
-                  <el-icon :size="20" @click="flag = !flag" class="icon-style">
-                    <View v-if="flag" />
-                    <Hide v-else />
-                  </el-icon>
-                </template>
-              </el-input>
-            </el-form-item>
-
-            <el-form-item class="panel-form-item" style="user-select: none">
-              <DragVerify
-                ref="verify"
-                :class="{ passing: isPassing2 }"
-                :isPassing="isPassing2"
-                @passcallback="isPassing2 = true"
-                handlerIcon="el-icon-d-arrow-right"
-                background="#D9D9D9"
-                textColor="#333333"
-                successIcon="el-icon-circle-check"
-                :text="isPassing2 ? '已通过验证' : '登录需要拖拽验证'"
-                successText="验证通过"
-                :width="400"
-              >
-                <template v-slot:handlerIcon>
-                  <el-icon
-                    :size="20"
-                    style="
+          <!-- login right panel -->
+          <template v-if="!isShowRegister">
+            <el-form class="panel login" :model="form" @submit.stop>
+              <h2>欢迎登录</h2>
+              <el-form-item class="panel-form-item">
+                <p class="err-info">{{ verification.phone }}</p>
+                <el-input :maxlength="11" v-model.trim="form.phone" placeholder="手机号"
+                  @keydown.enter="submitClick"></el-input>
+              </el-form-item>
+              <el-form-item class="panel-form-item">
+                <p class="err-info">{{ verification.psw }}</p>
+                <el-input v-model="form.psw" :maxlength="16" placeholder="密码" :type="flag ? 'text' : 'password'"
+                  @keydown.enter="submitClick">
+                  <template v-slot:suffix>
+                    <el-icon :size="20" @click="flag = !flag" class="icon-style">
+                      <View v-if="flag" />
+                      <Hide v-else />
+                    </el-icon>
+                  </template>
+                </el-input>
+              </el-form-item>
+
+              <el-form-item class="panel-form-item" style="user-select: none">
+                <DragVerify ref="verify" :class="{ passing: isPassing2 }" :isPassing="isPassing2"
+                  @passcallback="isPassing2 = true" handlerIcon="el-icon-d-arrow-right" background="#D9D9D9"
+                  textColor="#333333" successIcon="el-icon-circle-check" :text="isPassing2 ? '已通过验证' : '登录需要拖拽验证'"
+                  successText="验证通过" :width="400">
+                  <template v-slot:handlerIcon>
+                    <el-icon :size="20" style="
                       width: 20px;
                       display: inline-block;
                       line-height: 20px;
                       margin-top: 8px;
-                    "
-                  >
-                    <DArrowRight v-if="!isPassing2" />
-                    <SuccessFilled v-else />
-                  </el-icon>
-                </template>
-              </DragVerify>
-            </el-form-item>
-
-            <el-form-item class="panel-form-item">
-              <el-button type="primary" class="fill submit" @click="submitClick"
-                >登录</el-button
-              >
-            </el-form-item>
-          </el-form>
+                    ">
+                      <DArrowRight v-if="!isPassing2" />
+                      <SuccessFilled v-else />
+                    </el-icon>
+                  </template>
+                </DragVerify>
+              </el-form-item>
+
+              <el-form-item class="panel-form-item">
+                <el-button type="primary" class="fill submit" @click="submitClick">登录</el-button>
+              </el-form-item>
+
+              <div class="register">
+                <span @click="handleForgetPassword"> 忘记密码</span> |
+                <span @click="handleRegister"> 单位注册</span>
+              </div>
+            </el-form>
+          </template>
+          <template v-else>
+            <register></register>
+          </template>
+
         </div>
       </div>
     </div>
@@ -110,6 +96,7 @@ import { ElMessage } from "element-plus";
 import { router } from "@/router";
 import qrCode from "qrcode";
 import DragVerify from "@/components/drag-verify.vue";
+import register from '@/view/register/register.vue'
 
 const PHONE = {
   REG: /^1(3|4|5|6|7|8|9)\d{9}$/,
@@ -120,6 +107,7 @@ const PHONE = {
 const flag = ref(false);
 const verify = ref<any>();
 const isPassing2 = ref(false);
+const isShowRegister = ref(false);
 // 表单
 const form = reactive({
   phone: import.meta.env.DEV ? "13800000001" : "",
@@ -187,6 +175,17 @@ const submitClick = async () => {
   verify.value.reset();
   isPassing2.value = false;
 };
+
+// 忘记密码
+const handleForgetPassword = () => {
+
+}
+// 注册
+const handleRegister = () => {
+  isShowRegister.value = true
+}
+
+
 </script>
 
 <style lang="scss" scoped>
@@ -194,6 +193,7 @@ const submitClick = async () => {
   width: 100%;
   height: 100%;
 }
+
 .content {
   display: flex;
   justify-content: center;
@@ -204,6 +204,7 @@ const submitClick = async () => {
   height: 100vh;
   padding: 0 50px 0 50px;
 }
+
 .info {
   color: #000;
   flex: none;
@@ -218,10 +219,12 @@ const submitClick = async () => {
 
   .top {
     margin-top: 50px;
+
     img {
       width: 142px;
     }
   }
+
   .bottom {
     height: 470px;
     display: flex;
@@ -257,13 +260,16 @@ const submitClick = async () => {
           background-size: 100% 100%;
         }
       }
+
       .e-code {
         width: 128px;
         margin-top: 13px;
         position: relative;
-        > img {
+
+        >img {
           width: 100%;
         }
+
         .e-logo {
           position: absolute;
           top: 50%;
@@ -274,6 +280,7 @@ const submitClick = async () => {
           padding: 7px;
           border-radius: 4px;
           text-align: center;
+
           img {
             height: 100%;
             width: 100%;
@@ -281,6 +288,7 @@ const submitClick = async () => {
           }
         }
       }
+
       p:last-child {
         font-weight: 400;
         font-size: 14px;
@@ -291,15 +299,18 @@ const submitClick = async () => {
 
   .center {
     text-align: center;
+
     h1 {
       color: #781c0b;
       font-size: 48px;
       line-height: 3.7rem;
       margin-bottom: 0.7rem;
     }
+
     p {
       width: 100%;
       margin-top: 40px;
+
       img {
         width: 320px;
       }
@@ -312,14 +323,17 @@ const submitClick = async () => {
   pointer-events: none;
   height: 153px;
   min-width: 1200px;
+
   img {
     position: absolute;
     right: 0;
   }
 }
+
 .fill {
   width: 100%;
 }
+
 .login {
   width: 400px;
   // padding: 40px 40px 30px;
@@ -344,6 +358,7 @@ const submitClick = async () => {
   .panel-form-item {
     padding-left: 0;
     padding-right: 0;
+
     .icon-style {
       margin-right: 14px;
       font-size: 20px;
@@ -379,6 +394,7 @@ const submitClick = async () => {
   background: no-repeat left bottom;
   background-size: auto 100%;
 }
+
 .l-content {
   display: flex;
   width: 100%;
@@ -386,6 +402,17 @@ const submitClick = async () => {
   justify-content: center;
   align-items: flex-start;
 }
+
+.register {
+  display: flex;
+  flex-direction: row;
+  flex: 1;
+  justify-content: center;
+
+  span {
+    padding: 0 10px;
+  }
+}
 </style>
 
 <style>
@@ -406,10 +433,12 @@ const submitClick = async () => {
 .login .code-form-item .el-input__inner {
   flex: 1;
 }
+
 .login .code-form-item .el-input-group__append,
 .login .code-form-item .el-input__inner {
   border-radius: 4px;
 }
+
 input[type="password"]::-ms-reveal {
   display: none;
 }
@@ -488,6 +517,7 @@ input[type="password"]::-ms-reveal {
 .panel-form-item .el-form-item__label {
   line-height: 50px;
 }
+
 .e-code img {
   width: 100%;
 }

src/view/organization-add.vue

@@ -22,7 +22,7 @@
       <el-input v-model="data.contact" style="width: 300px" :maxlength="500" placeholder="请输入" />
     </el-form-item>
     <el-form-item label="账号" prop="userName" required>
-      <el-input v-model="data.userName" style="width: 300px" :maxlength="500"  placeholder="请输入手机号" />
+      <el-input v-model="data.userName" style="width: 300px" :maxlength="11"  placeholder="请输入手机号" />
     </el-form-item>
     <el-form-item label="密码" prop="password" required>
       <el-input autocomplete="off" readonly onfocus="this.removeAttribute('readonly');" v-model="data.password"

src/view/register/register.vue

@@ -0,0 +1,37 @@
+<template>
+    <div>
+        <el-form class="panel login" :model="form" @submit.stop>
+            <h2>单位注册</h2>
+            <el-form-item class="panel-form-item">
+                <!-- <p class="err-info">xxx</p> -->
+                <el-input :maxlength="11" v-model.trim="form.phone" placeholder="手机号"
+                    @keydown.enter="submitClick"></el-input>
+            </el-form-item>
+
+
+            <el-form-item class="panel-form-item">
+                <el-button type="primary" class="fill submit" @click="submitClick">注册</el-button>
+            </el-form-item>
+
+
+        </el-form>
+    </div>
+</template>
+<script lang="ts" setup>
+import { reactive } from 'vue'
+
+const form = reactive({
+    phone: import.meta.env.DEV ? "13800000001" : "",
+    psw: import.meta.env.DEV ? "88888888Sw" : "",
+});
+
+const submitClick = () => {
+
+}
+</script>
+
+<style lang="scss" sc>
+.login .panel-form-item{
+    
+}
+</style>