You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
81 lines
2.7 KiB
81 lines
2.7 KiB
<template>
|
|
<el-row type="flex" justify="center" class="mt-1">
|
|
<el-col :span="8">
|
|
<el-tabs v-model="activeName" @tab-click="handleClick">
|
|
<el-tab-pane label="登录" name="login">
|
|
<el-input placeholder="请输入用户名" v-model="user">
|
|
<template v-slot:prepend>用户名</template>
|
|
</el-input>
|
|
<el-input placeholder="请输入密码" v-model="password" show-password>
|
|
<template v-slot:prepend>密码</template>
|
|
</el-input>
|
|
</el-tab-pane>
|
|
<el-tab-pane label="注册" name="register">
|
|
<el-input placeholder="请输入用户名" v-model="user">
|
|
<template v-slot:prepend>用户名</template>
|
|
</el-input>
|
|
<el-input placeholder="请输入密码" v-model="password" show-password>
|
|
<template v-slot:prepend>密码</template>
|
|
</el-input>
|
|
<el-input placeholder="请确认密码" v-model="confirmPwd" show-password>
|
|
<template v-slot:prepend>确认密码</template>
|
|
</el-input>
|
|
<span v-if="password!==''&&confirmPwd!==''&&password!==confirmPwd">密码不一致</span>
|
|
</el-tab-pane>
|
|
</el-tabs>
|
|
</el-col>
|
|
</el-row>
|
|
<el-row type="flex" justify="center" class="mt-1">
|
|
<el-col :span="8">
|
|
<el-button type="primary" v-if="activeName==='login'"
|
|
:disabled="user===''||password===''" @click="requestLogin">登录
|
|
</el-button>
|
|
<el-button type="success" v-else :disabled="user===''||password===''||confirmPwd===''||password!==confirmPwd">注册
|
|
</el-button>
|
|
</el-col>
|
|
</el-row>
|
|
</template>
|
|
|
|
<script lang="ts">
|
|
import {defineComponent, ref} from "vue"
|
|
import {JSONResponse, login, message} from "../request";
|
|
import {email_cookie_key, user_token_key} from "../global";
|
|
import {router, userMainPath} from "../router";
|
|
import {userLoginApi} from "../interface";
|
|
|
|
//@ts-ignore
|
|
import crumbs from 'crumbsjs';
|
|
|
|
export default defineComponent({
|
|
name: "UserLogin",
|
|
setup() {
|
|
const activeName = ref('login')
|
|
const handleClick = (tab, event) => {
|
|
user.value = ''
|
|
password.value = ''
|
|
confirmPwd.value = ''
|
|
}
|
|
const user = ref('')
|
|
const password = ref('')
|
|
const confirmPwd = ref('')
|
|
|
|
const requestLogin = () => {
|
|
login(userLoginApi, user.value, password.value).then(res => res.json())
|
|
.then((res: JSONResponse) => {
|
|
message(res)
|
|
if (res.result === 'OK') {
|
|
crumbs.set(user_token_key, res.body.token)
|
|
crumbs.set(email_cookie_key, res.body.userEmail)
|
|
router.replace(userMainPath)
|
|
}
|
|
})
|
|
}
|
|
|
|
return {activeName, handleClick, user, password, confirmPwd, requestLogin}
|
|
}
|
|
})
|
|
</script>
|
|
|
|
<style scoped>
|
|
|
|
</style> |