xwl2023/Yi.Framework
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 添加注册功能

Browse Source
This commit is contained in:
橙子
2023-03-28 22:23:00 +08:00
parent 2ff8aef1bf
commit 5458819ef5
20 changed files with 299 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
Yi.BBS.Vue3/src/views/Login.vue
View File

@@ -3,24 +3,27 @@
<h1>{{configStore.name}}-登录</h1>
<div class="login-form">
<div class="username form-item">
<span>使用邮箱或者手机号</span>
<span>使用账号或者手机号</span>
<input type="text" class="input-item" v-model="loginForm.userName">
</div>
<div class="password form-item">
<span>密码</span>
<input type="password" class="input-item" v-model="loginForm.password">
</div>
<RouterLink to="/register" > 没有账号？前往注册</RouterLink>
<button class="login-btn" @click="login">登 录</button>
<button class="login-btn" @click="guestlogin">游客临时登录</button>
</div>
<RouterLink to="/register"> 没有账号？前往注册</RouterLink>
<div class="divider">
<span class="line"></span>
<span class="divider-text">其他方式登录</span>
<span class="line"></span>
</div>
<div class="other-login-wrapper">
<div class="other-login-item">
<img src="@/assets/login_images/QQ.png" alt="">

36
Yi.BBS.Vue3/src/views/Register.vue
View File

@@ -4,17 +4,21 @@
<div class="login-form">
<div class="username form-item">
<span>登录账号</span>
<input type="text" class="input-item" v-model="loginForm.userName">
<input type="text" class="input-item" v-model="registerForm.userName">
</div>
<div class="username form-item">
<span>手机号</span>
<input type="text" class="input-item" v-model="loginForm.userName">
<input style="width: 70%;" type="text" class="input-item" v-model="registerForm.phone">
<button v-if="!isSendCaptcha" style="width: 30%;background-color: #C14949;" class="login-btn" @click="captcha" >验证码</button>
<button v-else style="width: 30%;background-color:#F0F2F5;" class="login-btn" >已发送</button>
</div>
<div class="password form-item">
<span>密码</span>
<input type="password" class="input-item" v-model="loginForm.password">
<input type="password" class="input-item" v-model="registerForm.password">
</div>
<button class="login-btn" @click="login">注册</button>
<RouterLink to="/login" > 已有账号，前往登录</RouterLink>
<button class="login-btn" @click="register">注册</button>
</div>
<div class="divider">
<span class="line"></span>
@@ -32,7 +36,7 @@
</div>
</template>
<script setup>
import { reactive } from 'vue';
import { reactive ,ref} from 'vue';
import { useRouter, useRoute } from 'vue-router';
import useUserStore from '@/stores/user.js'
import useConfigStore from "@/stores/config";
@@ -40,24 +44,34 @@ const configStore= useConfigStore();
const userStore = useUserStore();
const router = useRouter();
const route = useRoute();
const loginForm = reactive({
const registerForm = reactive({
userName: "",
password: "",
uuid: "",
code: ""
})
const login = async () => {
const response = await userStore.login(loginForm).catch((e) => {
loginForm.password = "";
const isSendCaptcha=ref(false)
//验证码
const captcha=async()=>{
isSendCaptcha.value=true;
}
const register = async () => {
const response = await userStore.register(registerForm).catch((e) => {
registerForm.userName = "";
registerForm.password = "";
});
//成功
if (response!=undefined) {
ElMessage({
message: `您好${loginForm.userName}，登录成功！`,
message: `恭喜！${registerForm.userName}，注册成功！请登录！`,
type: 'success',
})
const redirect = route.query?.redirect ?? '/index'
const redirect = route.query?.redirect ?? '/login'
router.push(redirect)
}