mirror of
https://github.com/yangjian102621/geekai.git
synced 2025-12-26 18:15:57 +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>
|
||||
|
||||
@@ -1,452 +1,330 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="bg"></div>
|
||||
<div class="register-page">
|
||||
<div class="page-inner">
|
||||
<div class="contain" v-if="enableRegister">
|
||||
<div class="logo">
|
||||
<el-image :src="logo" fit="cover" @click="router.push('/')"/>
|
||||
</div>
|
||||
|
||||
<div class="header">{{ title }}</div>
|
||||
<div class="content">
|
||||
<el-form :model="data" class="form" v-if="enableRegister">
|
||||
<el-tabs v-model="activeName" class="demo-tabs">
|
||||
<div class="flex-center loginPage">
|
||||
<div class="left" v-if="enableRegister">
|
||||
<div class="login-box">
|
||||
<AccountTop title="注册" />
|
||||
<div class="input-form">
|
||||
<el-form :model="data" class="form">
|
||||
<el-tabs v-model="activeName">
|
||||
<el-tab-pane label="手机注册" name="mobile" v-if="enableMobile">
|
||||
<div class="block">
|
||||
<el-input placeholder="手机号码"
|
||||
size="large"
|
||||
v-model="data.mobile"
|
||||
maxlength="11"
|
||||
autocomplete="off">
|
||||
<template #prefix>
|
||||
<el-icon>
|
||||
<Iphone/>
|
||||
</el-icon>
|
||||
</template>
|
||||
<el-form-item>
|
||||
<div class="form-title">手机号码</div>
|
||||
<el-input
|
||||
placeholder="请输入手机号码"
|
||||
size="large"
|
||||
v-model="data.mobile"
|
||||
maxlength="11"
|
||||
autocomplete="off"
|
||||
>
|
||||
</el-input>
|
||||
</div>
|
||||
<div class="block">
|
||||
<el-row :gutter="10">
|
||||
<el-col :span="12">
|
||||
<el-input placeholder="验证码"
|
||||
size="large" maxlength="30"
|
||||
v-model="data.code"
|
||||
autocomplete="off">
|
||||
<template #prefix>
|
||||
<el-icon>
|
||||
<Checked/>
|
||||
</el-icon>
|
||||
</template>
|
||||
</el-input>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<send-msg size="large" :receiver="data.mobile" type="mobile"/>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<div class="form-title">验证码</div>
|
||||
<div class="flex w100">
|
||||
<el-input
|
||||
placeholder="请输入验证码"
|
||||
size="large"
|
||||
maxlength="30"
|
||||
class="code-input"
|
||||
v-model="data.code"
|
||||
autocomplete="off"
|
||||
>
|
||||
</el-input>
|
||||
|
||||
<send-msg
|
||||
size="large"
|
||||
:receiver="data.mobile"
|
||||
type="mobile"
|
||||
/>
|
||||
</div>
|
||||
</el-form-item>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="邮箱注册" name="email" v-if="enableEmail">
|
||||
<div class="block">
|
||||
<el-input placeholder="邮箱地址"
|
||||
size="large"
|
||||
v-model="data.email"
|
||||
autocomplete="off">
|
||||
<template #prefix>
|
||||
<el-icon>
|
||||
<Message/>
|
||||
</el-icon>
|
||||
</template>
|
||||
<el-form-item class="block">
|
||||
<div class="form-title">邮箱</div>
|
||||
<el-input
|
||||
placeholder="请输入邮箱地址"
|
||||
size="large"
|
||||
v-model="data.email"
|
||||
autocomplete="off"
|
||||
>
|
||||
</el-input>
|
||||
</div>
|
||||
<div class="block">
|
||||
<el-row :gutter="10">
|
||||
<el-col :span="12">
|
||||
<el-input placeholder="验证码"
|
||||
size="large" maxlength="30"
|
||||
v-model="data.code"
|
||||
autocomplete="off">
|
||||
<template #prefix>
|
||||
<el-icon>
|
||||
<Checked/>
|
||||
</el-icon>
|
||||
</template>
|
||||
</el-input>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<send-msg size="large" :receiver="data.email" type="email"/>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</el-form-item>
|
||||
<el-form-item class="block">
|
||||
<div class="form-title">验证码</div>
|
||||
<div class="flex w100">
|
||||
<el-input
|
||||
placeholder="请输入验证码"
|
||||
size="large"
|
||||
maxlength="30"
|
||||
class="code-input"
|
||||
v-model="data.code"
|
||||
autocomplete="off"
|
||||
>
|
||||
</el-input>
|
||||
|
||||
<send-msg
|
||||
size="large"
|
||||
:receiver="data.email"
|
||||
type="email"
|
||||
/>
|
||||
</div>
|
||||
</el-form-item>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="用户名注册" name="username" v-if="enableUser">
|
||||
<div class="block">
|
||||
<el-input placeholder="用户名"
|
||||
size="large"
|
||||
v-model="data.username"
|
||||
autocomplete="off">
|
||||
<template #prefix>
|
||||
<el-icon>
|
||||
<Iphone/>
|
||||
</el-icon>
|
||||
</template>
|
||||
<el-tab-pane
|
||||
label="用户名注册"
|
||||
name="username"
|
||||
v-if="enableUser"
|
||||
>
|
||||
<el-form-item class="block">
|
||||
<div class="form-title">用户名</div>
|
||||
|
||||
<el-input
|
||||
placeholder="请输入用户名"
|
||||
size="large"
|
||||
v-model="data.username"
|
||||
autocomplete="off"
|
||||
>
|
||||
</el-input>
|
||||
</div>
|
||||
</el-form-item>
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
|
||||
<div class="block">
|
||||
<el-input placeholder="请输入密码(8-16位)"
|
||||
maxlength="16" size="large"
|
||||
v-model="data.password" show-password
|
||||
autocomplete="off">
|
||||
<template #prefix>
|
||||
<el-icon>
|
||||
<Lock/>
|
||||
</el-icon>
|
||||
</template>
|
||||
</el-input>
|
||||
</div>
|
||||
<el-form-item class="block">
|
||||
<div class="form-title">密码</div>
|
||||
|
||||
<div class="block">
|
||||
<el-input placeholder="重复密码(8-16位)"
|
||||
size="large" maxlength="16" v-model="data.repass" show-password
|
||||
autocomplete="off">
|
||||
<template #prefix>
|
||||
<el-icon>
|
||||
<Lock/>
|
||||
</el-icon>
|
||||
</template>
|
||||
<el-input
|
||||
placeholder="请输入密码(8-16位)"
|
||||
maxlength="16"
|
||||
size="large"
|
||||
v-model="data.password"
|
||||
show-password
|
||||
autocomplete="off"
|
||||
>
|
||||
</el-input>
|
||||
</div>
|
||||
</el-form-item>
|
||||
|
||||
<div class="block">
|
||||
<el-input placeholder="邀请码(可选)"
|
||||
size="large"
|
||||
v-model="data.invite_code"
|
||||
autocomplete="off">
|
||||
<template #prefix>
|
||||
<el-icon>
|
||||
<Message/>
|
||||
</el-icon>
|
||||
</template>
|
||||
<el-form-item class="block">
|
||||
<div class="form-title">重复密码</div>
|
||||
|
||||
<el-input
|
||||
placeholder="请再次输入密码(8-16位)"
|
||||
size="large"
|
||||
maxlength="16"
|
||||
v-model="data.repass"
|
||||
show-password
|
||||
autocomplete="off"
|
||||
>
|
||||
</el-input>
|
||||
</div>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item class="block">
|
||||
<div class="form-title">邀请码</div>
|
||||
|
||||
<el-input
|
||||
placeholder="请输入邀请码(可选)"
|
||||
size="large"
|
||||
v-model="data.invite_code"
|
||||
autocomplete="off"
|
||||
>
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
|
||||
<el-row class="btn-row" :gutter="20">
|
||||
<el-col :span="24">
|
||||
<el-button class="login-btn" type="primary" size="large" @click="submitRegister" >注册</el-button>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<el-row class="text-line" :gutter="24">
|
||||
<el-col :span="12">
|
||||
<el-link type="primary" class="text-link" @click="router.push('/login')">登录</el-link>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-link type="primary" class="text-link" @click="router.push('/')">首页</el-link>
|
||||
<el-button
|
||||
class="login-btn"
|
||||
type="primary"
|
||||
size="large"
|
||||
@click="submitRegister"
|
||||
>注册</el-button
|
||||
>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="tip-result" v-else>
|
||||
<el-result icon="error" title="注册功能已关闭">
|
||||
<template #sub-title>
|
||||
<p>抱歉，系统已关闭注册功能，请联系管理员添加账号！</p>
|
||||
<div class="wechat-card">
|
||||
<el-image :src="wxImg"/>
|
||||
</div>
|
||||
</template>
|
||||
</el-result>
|
||||
</div>
|
||||
|
||||
<captcha v-if="enableVerify" @success="doSubmitRegister" ref="captchaRef"/>
|
||||
|
||||
<footer class="footer" v-if="!licenseConfig.de_copy">
|
||||
<footer-bar/>
|
||||
</footer>
|
||||
</div>
|
||||
<div class="tip-result left" v-else>
|
||||
<el-result icon="error" title="注册功能已关闭">
|
||||
<template #sub-title>
|
||||
<p>抱歉，系统已关闭注册功能，请联系管理员添加账号！</p>
|
||||
<div class="wechat-card">
|
||||
<el-image :src="wxImg" />
|
||||
</div>
|
||||
</template>
|
||||
</el-result>
|
||||
</div>
|
||||
<captcha
|
||||
v-if="enableVerify"
|
||||
@success="doSubmitRegister"
|
||||
ref="captchaRef"
|
||||
/>
|
||||
<account-bg />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from "vue";
|
||||
import AccountTop from "@/components/AccountTop.vue";
|
||||
import AccountBg from "@/components/AccountBg.vue";
|
||||
|
||||
import { httpGet, httpPost } from "@/utils/http";
|
||||
import { ElMessage } from "element-plus";
|
||||
import { useRouter } from "vue-router";
|
||||
|
||||
import {ref} from "vue";
|
||||
import {Checked, Iphone, Lock, Message} from "@element-plus/icons-vue";
|
||||
import {httpGet, httpPost} from "@/utils/http";
|
||||
import {ElMessage} from "element-plus";
|
||||
import {useRouter} from "vue-router";
|
||||
import FooterBar from "@/components/FooterBar.vue";
|
||||
import SendMsg from "@/components/SendMsg.vue";
|
||||
import {arrayContains, isMobile} from "@/utils/libs";
|
||||
import {setUserToken} from "@/store/session";
|
||||
import {validateEmail, validateMobile} from "@/utils/validate";
|
||||
import {showMessageError, showMessageOK} from "@/utils/dialog";
|
||||
import {getLicenseInfo, getSystemInfo} from "@/store/cache";
|
||||
import { arrayContains, isMobile } from "@/utils/libs";
|
||||
import { setUserToken } from "@/store/session";
|
||||
import { validateEmail, validateMobile } from "@/utils/validate";
|
||||
import { showMessageError, showMessageOK } from "@/utils/dialog";
|
||||
import { getLicenseInfo, getSystemInfo } from "@/store/cache";
|
||||
import Captcha from "@/components/Captcha.vue";
|
||||
|
||||
const router = useRouter();
|
||||
const title = ref('');
|
||||
const logo = ref("")
|
||||
const title = ref("");
|
||||
const logo = ref("");
|
||||
const data = ref({
|
||||
username: '',
|
||||
mobile: '',
|
||||
email: '',
|
||||
password: '',
|
||||
code: '',
|
||||
repass: '',
|
||||
invite_code: router.currentRoute.value.query['invite_code'],
|
||||
})
|
||||
username: "",
|
||||
mobile: "",
|
||||
email: "",
|
||||
password: "",
|
||||
code: "",
|
||||
repass: "",
|
||||
invite_code: router.currentRoute.value.query["invite_code"]
|
||||
});
|
||||
|
||||
const enableMobile = ref(false)
|
||||
const enableEmail = ref(false)
|
||||
const enableUser = ref(false)
|
||||
const enableRegister = ref(true)
|
||||
const activeName = ref("mobile")
|
||||
const wxImg = ref("/images/wx.png")
|
||||
const licenseConfig = ref({})
|
||||
const enableVerify = ref(false)
|
||||
const captchaRef = ref(null)
|
||||
const enableMobile = ref(false);
|
||||
const enableEmail = ref(false);
|
||||
const enableUser = ref(false);
|
||||
const enableRegister = ref(true);
|
||||
const activeName = ref("mobile");
|
||||
const wxImg = ref("/images/wx.png");
|
||||
const licenseConfig = ref({});
|
||||
const enableVerify = ref(false);
|
||||
const captchaRef = ref(null);
|
||||
|
||||
// 记录邀请码点击次数
|
||||
if (data.value.invite_code) {
|
||||
httpGet("/api/invite/hits",{code: data.value.invite_code})
|
||||
httpGet("/api/invite/hits", { code: data.value.invite_code });
|
||||
}
|
||||
|
||||
getSystemInfo().then(res => {
|
||||
if (res.data) {
|
||||
title.value = res.data.title
|
||||
logo.value = res.data.logo
|
||||
const registerWays = res.data['register_ways']
|
||||
getSystemInfo()
|
||||
.then((res) => {
|
||||
if (res.data) {
|
||||
title.value = res.data.title;
|
||||
logo.value = res.data.logo;
|
||||
const registerWays = res.data["register_ways"];
|
||||
|
||||
if (arrayContains(registerWays, "username")) {
|
||||
enableUser.value = true
|
||||
activeName.value = 'username'
|
||||
if (arrayContains(registerWays, "username")) {
|
||||
enableUser.value = true;
|
||||
activeName.value = "username";
|
||||
}
|
||||
if (arrayContains(registerWays, "email")) {
|
||||
enableEmail.value = true;
|
||||
activeName.value = "email";
|
||||
}
|
||||
if (arrayContains(registerWays, "mobile")) {
|
||||
enableMobile.value = true;
|
||||
activeName.value = "mobile";
|
||||
}
|
||||
// 是否启用注册
|
||||
enableRegister.value = res.data["enabled_register"];
|
||||
// 使用后台上传的客服微信二维码
|
||||
if (res.data["wechat_card_url"] !== "") {
|
||||
wxImg.value = res.data["wechat_card_url"];
|
||||
}
|
||||
enableVerify.value = res.data["enabled_verify"];
|
||||
}
|
||||
if (arrayContains(registerWays, "email")) {
|
||||
enableEmail.value = true
|
||||
activeName.value = 'email'
|
||||
}
|
||||
if (arrayContains(registerWays, "mobile")) {
|
||||
enableMobile.value = true
|
||||
activeName.value = 'mobile'
|
||||
}
|
||||
// 是否启用注册
|
||||
enableRegister.value = res.data['enabled_register']
|
||||
// 使用后台上传的客服微信二维码
|
||||
if (res.data['wechat_card_url'] !== '') {
|
||||
wxImg.value = res.data['wechat_card_url']
|
||||
}
|
||||
enableVerify.value = res.data['enabled_verify']
|
||||
}
|
||||
}).catch(e => {
|
||||
ElMessage.error("获取系统配置失败：" + e.message)
|
||||
})
|
||||
})
|
||||
.catch((e) => {
|
||||
ElMessage.error("获取系统配置失败：" + 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);
|
||||
});
|
||||
|
||||
// 注册操作
|
||||
const submitRegister = () => {
|
||||
if (activeName.value === 'username' && data.value.username === '') {
|
||||
return showMessageError('请输入用户名');
|
||||
if (activeName.value === "username" && data.value.username === "") {
|
||||
return showMessageError("请输入用户名");
|
||||
}
|
||||
|
||||
if (activeName.value === 'mobile' && !validateMobile(data.value.mobile)) {
|
||||
return showMessageError('请输入合法的手机号');
|
||||
if (activeName.value === "mobile" && !validateMobile(data.value.mobile)) {
|
||||
return showMessageError("请输入合法的手机号");
|
||||
}
|
||||
|
||||
if (activeName.value === 'email' && !validateEmail(data.value.email)) {
|
||||
return showMessageError('请输入合法的邮箱地址');
|
||||
if (activeName.value === "email" && !validateEmail(data.value.email)) {
|
||||
return showMessageError("请输入合法的邮箱地址");
|
||||
}
|
||||
|
||||
if (data.value.password.length < 8) {
|
||||
return showMessageError('密码的长度为8-16个字符');
|
||||
return showMessageError("密码的长度为8-16个字符");
|
||||
}
|
||||
if (data.value.repass !== data.value.password) {
|
||||
return showMessageError('两次输入密码不一致');
|
||||
return showMessageError("两次输入密码不一致");
|
||||
}
|
||||
|
||||
if ((activeName.value === 'mobile' || activeName.value === 'email') && data.value.code === '') {
|
||||
return showMessageError('请输入验证码');
|
||||
if (
|
||||
(activeName.value === "mobile" || activeName.value === "email") &&
|
||||
data.value.code === ""
|
||||
) {
|
||||
return showMessageError("请输入验证码");
|
||||
}
|
||||
|
||||
// 如果是用户名和密码登录，那么需要加载验证码
|
||||
if (enableVerify.value && activeName.value === 'username') {
|
||||
captchaRef.value.loadCaptcha()
|
||||
if (enableVerify.value && activeName.value === "username") {
|
||||
captchaRef.value.loadCaptcha();
|
||||
} else {
|
||||
doSubmitRegister({})
|
||||
doSubmitRegister({});
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const doSubmitRegister = (verifyData) => {
|
||||
data.value.key = verifyData.key
|
||||
data.value.dots = verifyData.dots
|
||||
data.value.x = verifyData.x
|
||||
data.value.reg_way = activeName.value
|
||||
httpPost('/api/user/register', data.value).then((res) => {
|
||||
setUserToken(res.data.token)
|
||||
showMessageOK("注册成功，即将跳转到对话主界面...")
|
||||
if (isMobile()) {
|
||||
router.push('/mobile/index')
|
||||
} else {
|
||||
router.push('/chat')
|
||||
}
|
||||
}).catch((e) => {
|
||||
showMessageError('注册失败，' + e.message)
|
||||
})
|
||||
}
|
||||
|
||||
data.value.key = verifyData.key;
|
||||
data.value.dots = verifyData.dots;
|
||||
data.value.x = verifyData.x;
|
||||
data.value.reg_way = activeName.value;
|
||||
httpPost("/api/user/register", data.value)
|
||||
.then((res) => {
|
||||
setUserToken(res.data.token);
|
||||
showMessageOK("注册成功，即将跳转到对话主界面...");
|
||||
if (isMobile()) {
|
||||
router.push("/mobile/index");
|
||||
} else {
|
||||
router.push("/chat");
|
||||
}
|
||||
})
|
||||
.catch((e) => {
|
||||
showMessageError("注册失败，" + e.message);
|
||||
});
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="stylus" scoped>
|
||||
.bg {
|
||||
position fixed
|
||||
left 0
|
||||
right 0
|
||||
top 0
|
||||
bottom 0
|
||||
background-color #091519
|
||||
background-image url("~@/assets/img/reg_bg.png")
|
||||
background-size cover
|
||||
background-position center
|
||||
background-repeat no-repeat
|
||||
filter: blur(10px); /* 调整模糊程度，可以根据需要修改值 */
|
||||
}
|
||||
|
||||
.register-page {
|
||||
display flex
|
||||
justify-content center
|
||||
|
||||
.page-inner {
|
||||
max-width 450px
|
||||
width 100%
|
||||
height 100vh
|
||||
display flex
|
||||
justify-content center
|
||||
align-items center
|
||||
|
||||
.contain {
|
||||
padding 20px 40px 20px 40px;
|
||||
width 100%
|
||||
color #ffffff
|
||||
border-radius 10px;
|
||||
z-index 10
|
||||
background-color rgba(255, 255, 255, 0.2)
|
||||
|
||||
.logo {
|
||||
text-align center
|
||||
|
||||
.el-image {
|
||||
width 120px;
|
||||
cursor pointer
|
||||
border-radius 50%
|
||||
}
|
||||
}
|
||||
|
||||
.header {
|
||||
width 100%
|
||||
margin-bottom 24px
|
||||
font-size 24px
|
||||
color $white_v1
|
||||
letter-space 2px
|
||||
text-align center
|
||||
padding-top 10px
|
||||
}
|
||||
|
||||
.content {
|
||||
width 100%
|
||||
height: auto
|
||||
border-radius 3px
|
||||
|
||||
.block {
|
||||
margin-bottom 16px
|
||||
|
||||
.el-input__inner {
|
||||
border 1px solid $gray-v6 !important
|
||||
|
||||
.el-icon-user, .el-icon-lock {
|
||||
font-size 20px
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.btn-row {
|
||||
padding-top 10px;
|
||||
|
||||
.login-btn {
|
||||
width 100%
|
||||
font-size 16px
|
||||
letter-spacing 2px
|
||||
}
|
||||
}
|
||||
|
||||
.text-link {
|
||||
color #ffffff
|
||||
}
|
||||
|
||||
.text-line {
|
||||
justify-content center
|
||||
padding-top 10px;
|
||||
font-size 14px;
|
||||
|
||||
.el-col {
|
||||
text-align center
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.tip-result {
|
||||
z-index 10
|
||||
|
||||
.wechat-card {
|
||||
padding 20px
|
||||
}
|
||||
}
|
||||
|
||||
.footer {
|
||||
color #ffffff;
|
||||
|
||||
.container {
|
||||
padding 20px;
|
||||
}
|
||||
}
|
||||
|
||||
@import "@/assets/css/login.styl"
|
||||
::v-deep(.back){
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
}
|
||||
::v-deep(.orline){
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.wechat-card {
|
||||
margin-top: 20px
|
||||
|
||||
}
|
||||
::v-deep(.el-tabs__item.is-active, .el-tabs__item:hover){
|
||||
color: var(--common-text-color) !important;
|
||||
}
|
||||
.el-tabs__item{
|
||||
color:var( --text-theme-color)
|
||||
}
|
||||
</style>
|
||||
|
||||
<style lang="stylus">
|
||||
.register-page {
|
||||
.el-result {
|
||||
|
||||
border-radius 10px;
|
||||
background-color rgba(14, 25, 30, 0.6)
|
||||
border 1px solid #666
|
||||
|
||||
.el-result__title p {
|
||||
color #ffffff
|
||||
}
|
||||
|
||||
.el-result__subtitle p {
|
||||
color #c1c1c1
|
||||
}
|
||||
}
|
||||
|
||||
.el-tabs__item {
|
||||
color #ffffff
|
||||
}
|
||||
}
|
||||
</style>
|
||||
162
web/src/views/Resetpassword.vue
Normal file
162
web/src/views/Resetpassword.vue
Normal file
@@ -0,0 +1,162 @@
|
||||
<template>
|
||||
<div class="reset-pass"></div>
|
||||
<div class="flex-center loginPage">
|
||||
<div class="left">
|
||||
<div class="login-box">
|
||||
<AccountTop title="重置密码" />
|
||||
<div class="input-form">
|
||||
<el-form :model="form">
|
||||
<el-tabs v-model="form.type">
|
||||
<el-tab-pane label="手机号验证" name="mobile">
|
||||
<el-form-item>
|
||||
<div class="form-title">手机号码</div>
|
||||
<el-input
|
||||
v-model="form.mobile"
|
||||
size="large"
|
||||
placeholder="请输入手机号"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<div class="form-title">验证码</div>
|
||||
<div class="flex w100">
|
||||
<el-input
|
||||
v-model="form.code"
|
||||
maxlength="6"
|
||||
size="large"
|
||||
class="code-input"
|
||||
/>
|
||||
<send-msg
|
||||
size="large"
|
||||
:receiver="form.mobile"
|
||||
type="mobile"
|
||||
/>
|
||||
</div>
|
||||
</el-form-item>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="邮箱验证" name="email">
|
||||
<el-form-item>
|
||||
<div class="form-title">邮箱</div>
|
||||
|
||||
<el-input
|
||||
v-model="form.email"
|
||||
placeholder="请输入邮箱"
|
||||
size="large"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<div class="form-title">验证码</div>
|
||||
<div class="flex w100">
|
||||
<el-input v-model="form.code" maxlength="6" />
|
||||
<send-msg size="" :receiver="form.email" type="email" />
|
||||
</div>
|
||||
</el-form-item>
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
|
||||
<el-form-item>
|
||||
<div class="form-title">新密码</div>
|
||||
|
||||
<el-input
|
||||
v-model="form.password"
|
||||
type="password"
|
||||
placeholder="请输入新密码(8-16位)"
|
||||
size="large"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<div class="form-title">重复密码</div>
|
||||
|
||||
<el-input
|
||||
v-model="form.repass"
|
||||
type="password"
|
||||
placeholder="请再次输入密码(8-16位)"
|
||||
size="large"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button
|
||||
class="login-btn"
|
||||
size="large"
|
||||
type="primary"
|
||||
@click="save"
|
||||
>
|
||||
重置密码
|
||||
</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<account-bg />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from "vue";
|
||||
import SendMsg from "@/components/SendMsg.vue";
|
||||
import AccountTop from "@/components/AccountTop.vue";
|
||||
|
||||
import { ElMessage } from "element-plus";
|
||||
import { httpPost } from "@/utils/http";
|
||||
import AccountBg from "@/components/AccountBg.vue";
|
||||
import { validateEmail, validateMobile } from "@/utils/validate";
|
||||
|
||||
const form = ref({
|
||||
mobile: "",
|
||||
email: "",
|
||||
type: "mobile",
|
||||
code: "",
|
||||
password: "",
|
||||
repass: ""
|
||||
});
|
||||
|
||||
const save = () => {
|
||||
if (form.value.code === "") {
|
||||
return ElMessage.error("请输入验证码");
|
||||
}
|
||||
if (form.value.password.length < 8) {
|
||||
return ElMessage.error("密码长度必须大于8位");
|
||||
}
|
||||
if (form.value.repass !== form.value.password) {
|
||||
return ElMessage.error("两次输入密码不一致");
|
||||
}
|
||||
|
||||
httpPost("/api/user/resetPass", form.value)
|
||||
.then(() => {
|
||||
ElMessage.success({
|
||||
message: "重置密码成功",
|
||||
duration: 1000
|
||||
});
|
||||
})
|
||||
.catch((e) => {
|
||||
ElMessage.error("重置密码失败：" + e.message);
|
||||
});
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="stylus">
|
||||
@import "@/assets/css/login.styl"
|
||||
|
||||
.reset-pass {
|
||||
.form {
|
||||
padding 0 20px
|
||||
}
|
||||
|
||||
.code-row {
|
||||
width 100%
|
||||
.send-button {
|
||||
padding-left 10px
|
||||
}
|
||||
}
|
||||
|
||||
.reset-pass-dialog {
|
||||
.el-dialog__footer {
|
||||
text-align center
|
||||
padding-top 0
|
||||
}
|
||||
.el-dialog__body {
|
||||
padding 0
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user