mirror of
https://github.com/yangjian102621/geekai.git
synced 2026-04-30 23:14:28 +08:00
feat:about account
This commit is contained in:
lqins
@@ -1,176 +1,189 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="bg"></div>
|
||||
<div class="main">
|
||||
<div class="contain">
|
||||
<div class="logo">
|
||||
<el-image :src="logo" fit="cover" @click="router.push('/')"/>
|
||||
</div>
|
||||
<div class="header">{{ title }}</div>
|
||||
<div class="content">
|
||||
<div class="block">
|
||||
<el-input placeholder="账号" size="large" v-model="username" autocomplete="off" autofocus
|
||||
@keyup="handleKeyup">
|
||||
<template #prefix>
|
||||
<el-icon>
|
||||
<UserFilled/>
|
||||
</el-icon>
|
||||
</template>
|
||||
</el-input>
|
||||
</div>
|
||||
|
||||
<div class="block">
|
||||
<el-input placeholder="密码" size="large" v-model="password" show-password autocomplete="off"
|
||||
@keyup="handleKeyup">
|
||||
<template #prefix>
|
||||
<el-icon>
|
||||
<Lock/>
|
||||
</el-icon>
|
||||
</template>
|
||||
</el-input>
|
||||
</div>
|
||||
|
||||
<el-row class="btn-row">
|
||||
<el-button class="login-btn" size="large" type="primary" @click="login">登录</el-button>
|
||||
</el-row>
|
||||
|
||||
<el-row class="opt" :gutter="24">
|
||||
<el-col :span="8"><el-link type="primary" @click="router.push('/register')">注册</el-link></el-col>
|
||||
<el-col :span="8">
|
||||
<el-link type="info" @click="showResetPass = true">重置密码</el-link>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<el-link type="info" @click="router.push('/')">首页</el-link>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<div v-if="wechatLoginURL !== ''">
|
||||
<el-divider class="divider">其他登录方式</el-divider>
|
||||
|
||||
<div class="clogin">
|
||||
<a :href="wechatLoginURL" @click="setRoute(router.currentRoute.value.path)"><i class="iconfont icon-wechat"></i></a>
|
||||
<div class="flex-center loginPage">
|
||||
<div class="left">
|
||||
<div class="login-box">
|
||||
<AccountTop>
|
||||
<template #default>
|
||||
<div class="wechatLog flex-center" v-if="wechatLoginURL !== ''">
|
||||
<a
|
||||
:href="wechatLoginURL"
|
||||
@click="setRoute(router.currentRoute.value.path)"
|
||||
>
|
||||
<i class="iconfont icon-wechat"></i>使用微信登录
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</AccountTop>
|
||||
|
||||
<div class="input-form">
|
||||
<el-form ref="ruleFormRef" :model="ruleForm" :rules="rules">
|
||||
<el-form-item label="" prop="username">
|
||||
<div class="form-title">账号</div>
|
||||
<el-input
|
||||
v-model="ruleForm.username"
|
||||
size="large"
|
||||
clearable
|
||||
placeholder="请输入账号"
|
||||
@keyup="handleKeyup"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="" prop="password">
|
||||
<div class="flex-between w100">
|
||||
<div class="form-title">密码</div>
|
||||
<div
|
||||
class="form-forget text-color-primary"
|
||||
@click="router.push('/resetpassword')"
|
||||
>
|
||||
忘记密码？
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<el-input
|
||||
clearable
|
||||
size="large"
|
||||
v-model="ruleForm.password"
|
||||
placeholder="请输入密码"
|
||||
show-password
|
||||
autocomplete="off"
|
||||
@keyup="handleKeyup"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button
|
||||
class="login-btn"
|
||||
size="large"
|
||||
type="primary"
|
||||
@click="login"
|
||||
>登录</el-button
|
||||
>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<reset-pass @hide="showResetPass = false" :show="showResetPass"/>
|
||||
|
||||
<captcha v-if="enableVerify" @success="doLogin" ref="captchaRef"/>
|
||||
|
||||
<footer-bar/>
|
||||
</div>
|
||||
<account-bg />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { onMounted, ref, reactive } from "vue";
|
||||
import { httpGet, httpPost } from "@/utils/http";
|
||||
import { useRouter } from "vue-router";
|
||||
import AccountBg from "@/components/AccountBg.vue";
|
||||
import { isMobile } from "@/utils/libs";
|
||||
import { checkSession, getLicenseInfo, getSystemInfo } from "@/store/cache";
|
||||
import { setUserToken } from "@/store/session";
|
||||
import { showMessageError } from "@/utils/dialog";
|
||||
import { setRoute } from "@/store/system";
|
||||
import { useSharedStore } from "@/store/sharedata";
|
||||
|
||||
import {onMounted, ref} from "vue";
|
||||
import {Lock, UserFilled} from "@element-plus/icons-vue";
|
||||
import {httpGet, httpPost} from "@/utils/http";
|
||||
import {useRouter} from "vue-router";
|
||||
import FooterBar from "@/components/FooterBar.vue";
|
||||
import {isMobile} from "@/utils/libs";
|
||||
import {checkSession, getLicenseInfo, getSystemInfo} from "@/store/cache";
|
||||
import {setUserToken} from "@/store/session";
|
||||
import ResetPass from "@/components/ResetPass.vue";
|
||||
import {showMessageError} from "@/utils/dialog";
|
||||
import Captcha from "@/components/Captcha.vue";
|
||||
import {setRoute} from "@/store/system";
|
||||
import {useSharedStore} from "@/store/sharedata";
|
||||
import AccountTop from "@/components/AccountTop.vue";
|
||||
|
||||
const router = useRouter();
|
||||
const title = ref('Geek-AI');
|
||||
const title = ref("Geek-AI");
|
||||
const username = ref(process.env.VUE_APP_USER);
|
||||
const password = ref(process.env.VUE_APP_PASS);
|
||||
const showResetPass = ref(false)
|
||||
const logo = ref("")
|
||||
const licenseConfig = ref({})
|
||||
const wechatLoginURL = ref('')
|
||||
const enableVerify = ref(false)
|
||||
const captchaRef = ref(null)
|
||||
// 是否需要验证码，输入一次密码错之后就要验证码
|
||||
const needVerify = ref(false)
|
||||
|
||||
const logo = ref("");
|
||||
const licenseConfig = ref({});
|
||||
const wechatLoginURL = ref("");
|
||||
const enableVerify = ref(false);
|
||||
const captchaRef = ref(null);
|
||||
// 是否需要验证码，输入一次密码错之后就要验证码
|
||||
const needVerify = ref(false);
|
||||
const ruleFormRef = ref(null);
|
||||
const ruleForm = reactive({
|
||||
username: process.env.VUE_APP_USER,
|
||||
password: process.env.VUE_APP_PASS
|
||||
});
|
||||
const rules = {
|
||||
username: [{ required: true, trigger: "blur", message: "请输入账号" }],
|
||||
password: [{ required: true, trigger: "blur", message: "请输入密码" }]
|
||||
};
|
||||
onMounted(() => {
|
||||
// 获取系统配置
|
||||
getSystemInfo().then(res => {
|
||||
logo.value = res.data.logo
|
||||
title.value = res.data.title
|
||||
enableVerify.value = res.data['enabled_verify']
|
||||
}).catch(e => {
|
||||
showMessageError("获取系统配置失败：" + e.message)
|
||||
})
|
||||
getSystemInfo()
|
||||
.then((res) => {
|
||||
logo.value = res.data.logo;
|
||||
title.value = res.data.title;
|
||||
enableVerify.value = res.data["enabled_verify"];
|
||||
})
|
||||
.catch((e) => {
|
||||
showMessageError("获取系统配置失败：" + e.message);
|
||||
});
|
||||
|
||||
getLicenseInfo().then(res => {
|
||||
licenseConfig.value = res.data
|
||||
}).catch(e => {
|
||||
showMessageError("获取 License 配置：" + e.message)
|
||||
})
|
||||
getLicenseInfo()
|
||||
.then((res) => {
|
||||
licenseConfig.value = res.data;
|
||||
})
|
||||
.catch((e) => {
|
||||
showMessageError("获取 License 配置：" + e.message);
|
||||
});
|
||||
|
||||
checkSession().then(() => {
|
||||
if (isMobile()) {
|
||||
router.push('/mobile')
|
||||
} else {
|
||||
router.push('/chat')
|
||||
}
|
||||
}).catch(() => {
|
||||
})
|
||||
checkSession()
|
||||
.then(() => {
|
||||
if (isMobile()) {
|
||||
router.push("/mobile");
|
||||
} else {
|
||||
router.push("/chat");
|
||||
}
|
||||
})
|
||||
.catch(() => {});
|
||||
|
||||
const returnURL = `${location.protocol}//${location.host}/login/callback?action=login`
|
||||
httpGet("/api/user/clogin?return_url="+returnURL).then(res => {
|
||||
wechatLoginURL.value = res.data.url
|
||||
}).catch(e => {
|
||||
console.error(e)
|
||||
})
|
||||
})
|
||||
const returnURL = `${location.protocol}//${location.host}/login/callback?action=login`;
|
||||
httpGet("/api/user/clogin?return_url=" + returnURL)
|
||||
.then((res) => {
|
||||
wechatLoginURL.value = res.data.url;
|
||||
})
|
||||
.catch((e) => {
|
||||
console.error(e);
|
||||
});
|
||||
});
|
||||
|
||||
const handleKeyup = (e) => {
|
||||
if (e.key === 'Enter') {
|
||||
if (e.key === "Enter") {
|
||||
login();
|
||||
}
|
||||
};
|
||||
|
||||
const login = function () {
|
||||
if (username.value.trim() === '') {
|
||||
return showMessageError("请输入用户民")
|
||||
}
|
||||
if (password.value.trim() === '') {
|
||||
return showMessageError('请输入密码');
|
||||
}
|
||||
const login = async function () {
|
||||
await ruleFormRef.value.validate(async (valid) => {
|
||||
if (valid) {
|
||||
if (enableVerify.value && needVerify.value) {
|
||||
captchaRef.value.loadCaptcha();
|
||||
} else {
|
||||
doLogin({});
|
||||
}
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
if (enableVerify.value && needVerify.value) {
|
||||
captchaRef.value.loadCaptcha()
|
||||
} else {
|
||||
doLogin({})
|
||||
}
|
||||
}
|
||||
|
||||
const store = useSharedStore()
|
||||
const store = useSharedStore();
|
||||
const doLogin = (verifyData) => {
|
||||
httpPost('/api/user/login', {
|
||||
httpPost("/api/user/login", {
|
||||
username: username.value.trim(),
|
||||
password: password.value.trim(),
|
||||
key: verifyData.key,
|
||||
dots: verifyData.dots,
|
||||
x: verifyData.x
|
||||
}).then((res) => {
|
||||
setUserToken(res.data.token)
|
||||
store.setIsLogin(true)
|
||||
needVerify.value = false
|
||||
if (isMobile()) {
|
||||
router.push('/mobile')
|
||||
} else {
|
||||
router.push('/chat')
|
||||
}
|
||||
|
||||
}).catch((e) => {
|
||||
showMessageError('登录失败，' + e.message)
|
||||
needVerify.value = true
|
||||
})
|
||||
}
|
||||
.then((res) => {
|
||||
setUserToken(res.data.token);
|
||||
store.setIsLogin(true);
|
||||
needVerify.value = false;
|
||||
if (isMobile()) {
|
||||
router.push("/mobile");
|
||||
} else {
|
||||
router.push("/chat");
|
||||
}
|
||||
})
|
||||
.catch((e) => {
|
||||
showMessageError("登录失败，" + e.message);
|
||||
needVerify.value = true;
|
||||
});
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="stylus" scoped>
|
||||
@import "@/assets/css/login.styl"
|
||||
</style>
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user