From 706df9ab789d6116061c2824e625689e8900fa1b Mon Sep 17 00:00:00 2001
From: Xwen <929716663@qq.com>
Date: Sat, 23 Dec 2023 22:23:33 +0800
Subject: [PATCH] =?UTF-8?q?feat:=E9=9A=90=E8=97=8F=E6=B3=A8=E5=86=8C?=
 =?UTF-8?q?=E5=85=A5=E5=8F=A3=E5=B9=B6=E5=BC=80=E6=94=BE=E6=96=B0=E6=B3=A8?=
 =?UTF-8?q?=E5=86=8C=E8=B7=AF=E7=94=B1?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 Yi.Bbs.Vue3/src/router/index.js       |   6 +
 Yi.Bbs.Vue3/src/views/login/index.vue |   4 +-
 Yi.Bbs.Vue3/src/views/test/index.vue  | 435 ++++++++++++++++++++++++++
 3 files changed, 443 insertions(+), 2 deletions(-)
 create mode 100644 Yi.Bbs.Vue3/src/views/test/index.vue

diff --git a/Yi.Bbs.Vue3/src/router/index.js b/Yi.Bbs.Vue3/src/router/index.js
index 1269e39c..e3ebb99e 100644
--- a/Yi.Bbs.Vue3/src/router/index.js
+++ b/Yi.Bbs.Vue3/src/router/index.js
@@ -31,6 +31,12 @@ const router = createRouter({
           path: "/register",
           component: () => import("../views/Register.vue"),
         },
+        {
+          name: "testLogin",
+          path: "/test-register",
+          // component: () => import("../views/Login.vue"),
+          component: () => import("../views/test/index.vue"),
+        },
       ],
     },
     {
diff --git a/Yi.Bbs.Vue3/src/views/login/index.vue b/Yi.Bbs.Vue3/src/views/login/index.vue
index 7d15126c..f5195ea5 100644
--- a/Yi.Bbs.Vue3/src/views/login/index.vue
+++ b/Yi.Bbs.Vue3/src/views/login/index.vue
@@ -126,9 +126,9 @@
                 />
               </el-form-item>
             </el-form>
-            <div class="link" v-if="isRegister">
+            <!-- <div class="link" v-if="isRegister">
               <div class="text" @click="handleRegister">没有账号？前往注册</div>
-            </div>
+            </div> -->
             <div
               class="login-btn"
               @click="login(loginFormRef)"
diff --git a/Yi.Bbs.Vue3/src/views/test/index.vue b/Yi.Bbs.Vue3/src/views/test/index.vue
new file mode 100644
index 00000000..7a80c1df
--- /dev/null
+++ b/Yi.Bbs.Vue3/src/views/test/index.vue
@@ -0,0 +1,435 @@
+<template>
+  <div class="login">
+    <div class="login-box">
+      <div class="left"></div>
+      <div class="right">
+        <div class="header-box">
+          <div class="text" @click="guestlogin" v-if="isRegister">返回首页</div>
+          <div class="text" @click="handleSignInNow" v-else>
+            已有账号立即登录
+          </div>
+          <el-icon size="15"><DArrowRight /></el-icon>
+        </div>
+        <div class="top">
+          <div class="title">意社区登录 | SIGN IN</div>
+        </div>
+        <div class="center">
+          <div class="login-form">
+            <el-form
+              ref="loginFormRef"
+              :model="loginForm"
+              :rules="rules"
+              v-if="isRegister"
+            >
+              <el-form-item label="账号" class="title-item"></el-form-item>
+              <el-form-item prop="userName">
+                <el-input
+                  size="large"
+                  type="text"
+                  v-model="loginForm.userName"
+                  placeholder="请输入用户名"
+                />
+              </el-form-item>
+              <el-form-item label="密码" class="title-item"></el-form-item>
+              <el-form-item prop="password">
+                <el-input
+                  size="large"
+                  type="password"
+                  v-model="loginForm.password"
+                  placeholder="请输入密码"
+                  show-password
+                />
+              </el-form-item>
+              <el-form-item label="验证码" class="title-item"></el-form-item>
+              <div class="flex-between">
+                <el-col :span="18">
+                  <el-form-item prop="phone">
+                    <el-input
+                      size="large"
+                      type="text"
+                      v-model.trim="loginForm.code"
+                      placeholder="请输入验证码"
+                    />
+                  </el-form-item>
+                </el-col>
+                <el-image
+                  @click="handleGetCodeImage"
+                  style="width: 120px; height: 40px; cursor: pointer"
+                  :src="codeImageURL"
+                  :fit="fit"
+                />
+              </div>
+            </el-form>
+            <el-form
+              class="registerForm"
+              ref="registerFormRef"
+              :model="registerForm"
+              :rules="registerRules"
+              v-else
+            >
+              <el-form-item label="账号" class="title-item"></el-form-item>
+              <el-form-item prop="userName">
+                <el-input
+                  size="large"
+                  type="text"
+                  v-model.trim="registerForm.userName"
+                  placeholder="请输入用户名"
+                />
+              </el-form-item>
+              <el-form-item label="手机号" class="title-item"></el-form-item>
+              <div class="flex-between">
+                <el-col :span="18">
+                  <el-form-item prop="phone">
+                    <el-input
+                      size="large"
+                      type="text"
+                      v-model.trim="registerForm.phone"
+                      placeholder="请输入手机号"
+                    />
+                  </el-form-item>
+                </el-col>
+                <el-button
+                  type="primary"
+                  size="large"
+                  @click="captcha"
+                  :disabled="isDisabledCode"
+                >
+                  {{ codeInfo }}
+                </el-button>
+              </div>
+              <el-form-item label="验证码" class="title-item"></el-form-item>
+              <el-form-item prop="code">
+                <el-input
+                  size="large"
+                  type="text"
+                  v-model.trim="registerForm.code"
+                  placeholder="请输入验证码"
+                />
+              </el-form-item>
+              <el-form-item label="新密码" class="title-item"></el-form-item>
+              <el-form-item prop="password">
+                <el-input
+                  size="large"
+                  type="password"
+                  v-model.trim="registerForm.password"
+                  placeholder="请输入新密码"
+                />
+              </el-form-item>
+              <el-form-item label="确认密码" class="title-item"></el-form-item>
+              <el-form-item>
+                <el-input
+                  size="large"
+                  type="password"
+                  v-model.trim="passwordConfirm"
+                  placeholder="请确认密码"
+                  show-password
+                />
+              </el-form-item>
+            </el-form>
+            <div class="link" v-if="isRegister">
+              <div class="text" @click="handleRegister">没有账号？前往注册</div>
+            </div>
+            <div
+              class="login-btn"
+              @click="login(loginFormRef)"
+              v-if="isRegister"
+            >
+              登 录
+            </div>
+            <div class="login-btn" @click="register(registerFormRef)" v-else>
+              注 册
+            </div>
+          </div>
+        </div>
+        <div class="bottom" v-if="isRegister">
+          <div class="title">
+            <div>或者</div>
+            <div>其他方式登录</div>
+          </div>
+          <div class="icon-list">
+            <div class="icon">
+              <img src="@/assets/login_images/QQ.png" alt="" />
+            </div>
+            <div class="icon">
+              <img src="@/assets/login_images/WeChat.png" alt="" />
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script setup>
+import { ref, reactive, onMounted, computed } from "vue";
+import { useRouter, useRoute } from "vue-router";
+import useAuths from "@/hooks/useAuths";
+import { getCodePhone } from "@/apis/accountApi";
+import useUserStore from "@/stores/user";
+
+const { loginFun, registerFun } = useAuths();
+const router = useRouter();
+const route = useRoute();
+const loginFormRef = ref();
+const rules = reactive({
+  userName: [{ required: true, message: "请输入用户名", trigger: "blur" }],
+  password: [{ required: true, message: "请输入密码", trigger: "blur" }],
+});
+const loginForm = reactive({
+  userName: "",
+  password: "",
+  uuid: "",
+  code: "",
+});
+const guestlogin = async () => {
+  const redirect = route.query?.redirect ?? "/index";
+  router.push(redirect);
+};
+const codeUUid = computed(() => useUserStore().codeUUid);
+const login = async (formEl) => {
+  if (!formEl) return;
+  await formEl.validate((valid) => {
+    if (valid) {
+      try {
+        loginForm.uuid = codeUUid.value;
+        loginFun(loginForm);
+      } catch (error) {
+        console.log(error.message, "error.message");
+        ElMessage({
+          message: error.message,
+          type: "error",
+          duration: 2000,
+        });
+      }
+    }
+  });
+};
+
+// 注册逻辑
+const isRegister = ref(false);
+const registerFormRef = ref();
+// 确认密码
+const passwordConfirm = ref("");
+const registerForm = reactive({
+  userName: "",
+  phone: "",
+  password: "",
+  uuid: "",
+  code: "",
+});
+const registerRules = reactive({
+  userName: [{ required: true, message: "请输入账号", trigger: "blur" }],
+  phone: [{ required: true, message: "请输入手机号", trigger: "blur" }],
+  code: [{ required: true, message: "请输入验证码", trigger: "blur" }],
+  password: [{ required: true, message: "请输入薪密码", trigger: "blur" }],
+});
+const handleRegister = () => {
+  isRegister.value = !isRegister.value;
+};
+const register = async (formEl) => {
+  if (!formEl) return;
+  await formEl.validate((valid) => {
+    if (valid) {
+      try {
+        if (registerForm.password != passwordConfirm.value) {
+          ElMessage.error("两次密码输入不一致");
+          return;
+        }
+        registerFun(registerForm);
+      } catch (error) {
+        ElMessage({
+          message: error.message,
+          type: "error",
+          duration: 2000,
+        });
+      }
+    }
+  });
+};
+
+//验证码
+const codeInfo = ref("发送验证码");
+const isDisabledCode = ref(false);
+const captcha = async () => {
+  if (registerForm.phone !== "") {
+    const { data } = await getCodePhone(registerForm.phone);
+    registerForm.uuid = data.uuid;
+    ElMessage({
+      message: `已向${registerForm.phone}发送验证码，请注意查收`,
+      type: "success",
+    });
+    isDisabledCode.value = true;
+    let time = 60; //定义剩下的秒数
+    let timer = setInterval(function () {
+      if (time == 0) {
+        //清除定时器和复原按钮
+        clearInterval(timer);
+        codeInfo.value = "发送验证码";
+        time = 60; //这个10是重新开始
+      } else {
+        codeInfo.value = "剩余" + time + "秒";
+        time--;
+      }
+    }, 1000);
+  } else {
+    ElMessage({
+      message: `清先输入手机号`,
+      type: "warning",
+    });
+  }
+};
+
+// 立即登录
+const handleSignInNow = () => {
+  isRegister.value = !isRegister.value;
+};
+// 获取图片验证码
+const codeImageURL = computed(() => useUserStore().codeImageURL);
+const handleGetCodeImage = () => {
+  useUserStore().updateCodeImage();
+};
+onMounted(async () => {
+  await useUserStore().updateCodeImage();
+});
+</script>
+<style scoped lang="scss">
+.login {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  height: 100%;
+  background: url("@/assets/login_images/login_bg.jpg") no-repeat;
+  &-box {
+    display: flex;
+    width: 70%;
+    height: 80%;
+    border-radius: 20px;
+    background-color: #fff;
+    box-shadow: 15px 15px 30px -10px rgba(0, 0, 0, 0.2),
+      inset 20px 20px 15px rgba(255, 255, 255, 0.7);
+    .left {
+      width: 55%;
+      height: 100%;
+      display: flex;
+      background: url("@/assets/login_images/welcome.jpg") no-repeat;
+      background-size: 100% auto;
+      background-position: 50%;
+      border-right: 2px solid #eeefef;
+    }
+    .right {
+      display: flex;
+      flex-direction: column;
+      width: 45%;
+      padding: 40px 30px 40px 30px;
+      border-radius: 20px;
+      // color: #06035a;
+
+      background-color: #fff;
+      .header-box {
+        cursor: pointer;
+        margin-bottom: 20px;
+        height: 10px;
+        display: flex;
+        justify-content: flex-end;
+        align-items: center;
+        color: #409eff;
+      }
+      .top {
+        height: 40px;
+        .title {
+          font-size: 25px;
+          font-weight: bold;
+        }
+        .text {
+          margin-top: 10px;
+        }
+      }
+      .center {
+        flex: 1;
+        .login-form {
+          width: 100%;
+          height: 100%;
+          padding: 10px 0;
+          display: flex;
+          flex-direction: column;
+          justify-content: space-around;
+          .input-item {
+            width: 100%;
+            height: 45px;
+            outline: none;
+            border: 2px solid #dde0df;
+            border-radius: 5px;
+            padding: 0 10px;
+            &:hover {
+              outline: none;
+            }
+          }
+          .login-btn {
+            cursor: pointer;
+            width: 100%;
+            height: 45px;
+            color: #fff;
+            text-align: center;
+            line-height: 50px;
+            border-radius: 5px;
+            background-color: #2282fe;
+          }
+          .link {
+            margin-bottom: 10px;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            .text {
+              cursor: pointer;
+            }
+          }
+          .visitor {
+            margin-top: 10px;
+          }
+          .registerForm {
+            :deep(.el-form-item) {
+              margin-bottom: 1px;
+            }
+          }
+        }
+      }
+      .bottom {
+        width: 100%;
+        height: 150px;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        .title {
+          > div {
+            text-align: center;
+            margin: 10px;
+          }
+        }
+        .icon-list {
+          margin-top: 10px;
+          width: 100%;
+          display: flex;
+          justify-content: center;
+          .icon {
+            width: 25px;
+            height: 25px;
+            margin: 0 10px;
+            img {
+              width: 100%;
+              height: 100%;
+            }
+          }
+        }
+      }
+    }
+  }
+
+  :deep(.title-item) {
+    margin-bottom: 0;
+  }
+  .flex-between {
+    display: flex;
+    justify-content: space-between;
+  }
+}
+</style>