mirror of
https://github.com/yangjian102621/geekai.git
synced 2025-09-19 17:56:39 +08:00
feat:about account
This commit is contained in:
lqins
parent
9bf886fe98
commit
d13fa1392f
2
web/package-lock.json
generated
2
web/package-lock.json
generated
@ -8,7 +8,7 @@
|
||||
"name": "geekai-web",
|
||||
"version": "0.1.0",
|
||||
"dependencies": {
|
||||
"@element-plus/icons-vue": "^2.1.0",
|
||||
"@element-plus/icons-vue": "^2.3.1",
|
||||
"@openai/realtime-api-beta": "github:openai/openai-realtime-api-beta",
|
||||
"animate.css": "^4.1.1",
|
||||
"axios": "^0.27.2",
|
||||
|
||||
@ -8,7 +8,7 @@
|
||||
"lint": "vue-cli-service lint"
|
||||
},
|
||||
"dependencies": {
|
||||
"@element-plus/icons-vue": "^2.1.0",
|
||||
"@element-plus/icons-vue": "^2.3.1",
|
||||
"@openai/realtime-api-beta": "github:openai/openai-realtime-api-beta",
|
||||
"animate.css": "^4.1.1",
|
||||
"axios": "^0.27.2",
|
||||
|
||||
@ -1,3 +1,17 @@
|
||||
:root{
|
||||
--sm-txt:rgba(163, 174, 208, 1);
|
||||
--text-secondary: #8a939d;
|
||||
--el-color-primary: rgba(67, 24, 255, 1);
|
||||
--el-component-size: 48px;
|
||||
--el-border-radius-base: 8px;
|
||||
--el-color-primary-light-5:rgb(107, 85, 255);
|
||||
--el-color-primary-light-3:rgb(78, 51, 254);
|
||||
--theme-btn-color:rgba(117, 81, 255, 1)
|
||||
--common-text-color:#6e4ef9
|
||||
|
||||
--text-fff:#fff
|
||||
}
|
||||
|
||||
.btn-go{
|
||||
background: var(--btnColor);
|
||||
color: #fff;
|
||||
@ -6,4 +20,39 @@
|
||||
&:hover{
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
.btn-normal{
|
||||
background: var(--theme-btn-color);
|
||||
color: #fff;
|
||||
border-radius: 5px;
|
||||
padding: 5px 10px;
|
||||
&:hover{
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
.flex{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.flex-center{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.flex-between{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.theme-color-primary{
|
||||
color: var(--el-color-primary);
|
||||
}
|
||||
.text-color-primary{
|
||||
color:var(--text-color-primary)
|
||||
}
|
||||
.w100{
|
||||
width: 100%;
|
||||
}
|
||||
.el-input__wrapper{
|
||||
background: var( --card-bg)
|
||||
}
|
||||
@ -1,4 +1,5 @@
|
||||
|
||||
|
||||
.index-page {
|
||||
margin: 0
|
||||
overflow hidden
|
||||
@ -6,7 +7,11 @@
|
||||
display flex
|
||||
justify-content center
|
||||
align-items baseline
|
||||
padding-top 150px
|
||||
padding-top 158px
|
||||
min-height: 75vh
|
||||
background: var(--theme-bg) !important
|
||||
|
||||
|
||||
|
||||
.color-bg {
|
||||
position absolute
|
||||
|
||||
@ -1,117 +1,56 @@
|
||||
.bg {
|
||||
position fixed
|
||||
left 0
|
||||
right 0
|
||||
top 0
|
||||
bottom 0
|
||||
background-color #313237
|
||||
background-image url("~@/assets/img/login-bg.jpg")
|
||||
background-size cover
|
||||
background-position center
|
||||
background-repeat repeat-y
|
||||
//filter: blur(10px); /* 调整模糊程度，可以根据需要修改值 */
|
||||
|
||||
.loginPage{
|
||||
background: var(--card-bg) !important
|
||||
background-color: var(---card-bg) !important
|
||||
|
||||
.form-title{
|
||||
color:var( --text-theme-color)
|
||||
}
|
||||
}
|
||||
|
||||
.main {
|
||||
.contain {
|
||||
position fixed
|
||||
left 50%
|
||||
top 40%
|
||||
width 90%
|
||||
max-width 400px;
|
||||
transform translate(-50%, -50%)
|
||||
padding 20px 10px;
|
||||
color #ffffff
|
||||
border-radius 10px;
|
||||
.left{
|
||||
width: 50%;
|
||||
|
||||
.login-box{
|
||||
width: 410px;
|
||||
margin: 0 auto;
|
||||
min-height: calc(100vh - 48px);
|
||||
|
||||
}
|
||||
|
||||
.wechatLog{
|
||||
width: 410px;
|
||||
height: 50px;
|
||||
line-height: 50px;
|
||||
text-align: center
|
||||
background: var( --sign-bg)
|
||||
a{
|
||||
color: var(--text-theme-color)
|
||||
|
||||
.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-line {
|
||||
justify-content center
|
||||
padding-top 10px;
|
||||
font-size 14px;
|
||||
}
|
||||
|
||||
.opt {
|
||||
padding 15px
|
||||
.el-col {
|
||||
text-align center
|
||||
}
|
||||
}
|
||||
|
||||
.divider {
|
||||
border-top: 2px solid #c1c1c1;
|
||||
}
|
||||
|
||||
.clogin {
|
||||
padding 15px
|
||||
display flex
|
||||
justify-content center
|
||||
|
||||
.iconfont {
|
||||
font-size 20px
|
||||
background: #E9F1F6;
|
||||
padding: 8px;
|
||||
border-radius: 50%
|
||||
cursor pointer
|
||||
}
|
||||
.iconfont.icon-wechat {
|
||||
color #0bc15f
|
||||
}
|
||||
}
|
||||
font-size: 14px;
|
||||
margin-bottom: 26px
|
||||
border-radius: 16px;
|
||||
.icon-wechat{
|
||||
color: #0bc15f
|
||||
margin-right: 9px
|
||||
font-size: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.footer {
|
||||
color #ffffff;
|
||||
|
||||
.container {
|
||||
padding 20px;
|
||||
}
|
||||
|
||||
.text-color-primary{
|
||||
cursor :pointer
|
||||
}
|
||||
|
||||
|
||||
|
||||
}
|
||||
.login-btn {
|
||||
width :100%
|
||||
height: 40px;
|
||||
border-radius: 16px;
|
||||
}
|
||||
.code-input{
|
||||
width: 306px;
|
||||
margin-right: 9px;
|
||||
}
|
||||
}
|
||||
@ -12,10 +12,19 @@
|
||||
body,
|
||||
#app,
|
||||
.wrapper {
|
||||
background-color: rgb(13, 20, 53) !important;
|
||||
background: rgb(13, 20, 53)
|
||||
background-color: rgb(13, 20, 53)
|
||||
font-family: $font-regular;
|
||||
}
|
||||
--btnColor: linear-gradient(88deg, #af61f0 1.44%, #5b62ce);
|
||||
--card-bg: rgba(17, 28, 68, 1);
|
||||
--theme-bg:rgb(13, 20, 53);
|
||||
--sign-bg: rgba(27, 37, 75, 1);
|
||||
--text-theme-color: #fff;
|
||||
--text-color-primary: #d1c7ff;
|
||||
--el-text-color-regular: rgba(163, 174, 208, 1)
|
||||
--el-border-color:rgb(79, 80, 85)
|
||||
--el-text-color-primary: #fff;
|
||||
|
||||
|
||||
}
|
||||
@ -13,13 +13,22 @@
|
||||
body,
|
||||
#app,
|
||||
.wrapper {
|
||||
background: linear-gradient(88deg, #fff3f3 1.44%, #e7e8ff);
|
||||
// background: linear-gradient(180deg, #fff, #fff4fa 40%, #fbd9fd 55%, #e2d5ff 70%);
|
||||
// background: var(--theme-bg)
|
||||
// background-color: var(--theme-bg)
|
||||
|
||||
// background: linear-gradient(88deg, #fff3f3 1.44%, #e7e8ff);
|
||||
|
||||
font-family: $font-regular;
|
||||
}
|
||||
}//#6b61f6
|
||||
|
||||
--btnColor: linear-gradient(88deg, #af61f0 1.44%, #5b62ce);
|
||||
--code-btnColor: linear-gradient(88deg, #af61f0 1.44%, #5b62ce);
|
||||
--card-bg:#fff;
|
||||
--theme-bg:linear-gradient(88deg, #fff3f3 1.44%, #e7e8ff);
|
||||
--sign-bg: rgba(244, 247, 254, 1);
|
||||
--text-theme-color: rgba(43, 54, 116, 1)
|
||||
--text-color-primary: rgba(67, 24, 255, 1);
|
||||
|
||||
|
||||
}
|
||||
|
||||
|
||||
BIN
web/src/assets/img/login-bg.png
Normal file
BIN
web/src/assets/img/login-bg.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 824 KiB |
|
Before Width: | Height: | Size: 74 KiB After Width: | Height: | Size: 74 KiB |
BIN
web/src/assets/img/logo.png
Normal file
BIN
web/src/assets/img/logo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 108 KiB |
60
web/src/components/AccountBg.vue
Normal file
60
web/src/components/AccountBg.vue
Normal file
@ -0,0 +1,60 @@
|
||||
<template>
|
||||
<div class="right flex-center">
|
||||
<div class="logo">
|
||||
<img src="@/assets/img/logo.png" alt="" />
|
||||
</div>
|
||||
<div>welcome</div>
|
||||
<footer-bar />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import FooterBar from "@/components/FooterBar.vue";
|
||||
</script>
|
||||
|
||||
<style lang="stylus" scoped>
|
||||
.right{
|
||||
font-size: 40px
|
||||
font-weight: bold
|
||||
color:#fff
|
||||
flex-direction: column
|
||||
background-image url("~@/assets/img/login-bg.png")
|
||||
background-size cover
|
||||
background-position center
|
||||
width: 50%;
|
||||
min-height: 100vh
|
||||
max-height: 100vh
|
||||
background-repeat: no-repeat;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
z-index: 1;
|
||||
::v-deep(.foot-container){
|
||||
position: absolute;
|
||||
bottom: 20px;
|
||||
width: 100%;
|
||||
background: none;
|
||||
color: var(--sm-txt);
|
||||
font-size: 12px;
|
||||
text-align: center;
|
||||
|
||||
.footer{
|
||||
a,
|
||||
span{
|
||||
color: var(--text-fff)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.logo{
|
||||
margin-bottom: 26px;
|
||||
width: 200px
|
||||
height: 200px
|
||||
background: #fff
|
||||
border-radius: 50%
|
||||
img{
|
||||
width: 100%;
|
||||
object-fit: cover;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
101
web/src/components/AccountTop.vue
Normal file
101
web/src/components/AccountTop.vue
Normal file
@ -0,0 +1,101 @@
|
||||
<template>
|
||||
<div>
|
||||
<ThemeChange />
|
||||
<div
|
||||
@click="goBack"
|
||||
class="flex back animate__animated animate__pulse animate__infinite"
|
||||
>
|
||||
<el-icon><ArrowLeftBold /></el-icon
|
||||
>{{ title === "注册" ? "首页" : "返回" }}
|
||||
</div>
|
||||
<div class="title">{{ title }}</div>
|
||||
<div class="smTitle" v-if="title !== '重置密码'">
|
||||
{{ title === "登录" ? "没有账号？" : "已有账号？"
|
||||
}}<span @click="goPageFun" class="text-color-primary sign"
|
||||
>赶紧{{ title === "登录" ? "注册" : "登录" }}</span
|
||||
>
|
||||
</div>
|
||||
<slot></slot>
|
||||
<div class="flex orline" v-if="title !== '重置密码'">
|
||||
<div class="lineor"></div>
|
||||
<span>或</span>
|
||||
<div class="lineor"></div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ArrowLeftBold } from "@element-plus/icons-vue";
|
||||
import ThemeChange from "@/components/ThemeChange.vue";
|
||||
import { defineProps } from "vue";
|
||||
import { useRouter } from "vue-router";
|
||||
|
||||
const props = defineProps({
|
||||
title: {
|
||||
type: String,
|
||||
default: "登录"
|
||||
},
|
||||
smTitle: { type: String, default: "没有账号？" },
|
||||
goPage: {
|
||||
type: String,
|
||||
default: "/register"
|
||||
}
|
||||
});
|
||||
|
||||
const router = useRouter();
|
||||
const goBack = () => {
|
||||
if (props.title === "注册") {
|
||||
router.push("/");
|
||||
} else {
|
||||
router.go(-1);
|
||||
}
|
||||
};
|
||||
const goPageFun = () => {
|
||||
if (props.title === "登录") {
|
||||
router.push("/register");
|
||||
} else {
|
||||
router.push("/login");
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="stylus" scoped>
|
||||
.back{
|
||||
color:var(--sm-txt)
|
||||
font-size: 14px;
|
||||
margin-bottom: 140px
|
||||
margin-top: 18px
|
||||
cursor: pointer
|
||||
.el-icon{
|
||||
margin-right: 6px
|
||||
}
|
||||
}
|
||||
.title{
|
||||
font-size: 36px
|
||||
margin-bottom: 16px
|
||||
color: var(--text-color)
|
||||
|
||||
}
|
||||
.smTitle{
|
||||
color: var(--text-color)
|
||||
font-size: 14px;
|
||||
margin-bottom: 36px
|
||||
}
|
||||
.sign{
|
||||
text-decoration: underline;
|
||||
cursor :pointer
|
||||
}
|
||||
.orline{
|
||||
color:var(--text-secondary)
|
||||
span{
|
||||
font-size: 14px;
|
||||
margin: 0 10px
|
||||
|
||||
}
|
||||
.lineor{
|
||||
|
||||
width: 182px; height: 1px;
|
||||
background: var(--text-secondary)
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -63,6 +63,8 @@ getLicenseInfo()
|
||||
width: 100%;
|
||||
display flex;
|
||||
justify-content center
|
||||
background: var(--theme-bg);
|
||||
margin-top -4px
|
||||
|
||||
.footer {
|
||||
max-width 400px;
|
||||
|
||||
@ -1,18 +1,18 @@
|
||||
<template>
|
||||
<el-dialog
|
||||
class="login-dialog"
|
||||
v-model="showDialog"
|
||||
:close-on-click-modal="true"
|
||||
:show-close="false"
|
||||
:before-close="close"
|
||||
class="login-dialog"
|
||||
v-model="showDialog"
|
||||
:close-on-click-modal="true"
|
||||
:show-close="false"
|
||||
:before-close="close"
|
||||
>
|
||||
<template #header="{titleId, titleClass }">
|
||||
<template #header="{ titleId, titleClass }">
|
||||
<div class="header">
|
||||
<div class="title" v-if="login">用户登录</div>
|
||||
<div class="title" v-if="login">用户登录-</div>
|
||||
<div class="title" v-else>用户注册</div>
|
||||
<div class="close-icon">
|
||||
<el-icon @click="close">
|
||||
<Close/>
|
||||
<Close />
|
||||
</el-icon>
|
||||
</div>
|
||||
</div>
|
||||
@ -21,26 +21,32 @@
|
||||
<div class="login-box" v-if="login">
|
||||
<el-form :model="data" label-width="120px" class="form">
|
||||
<div class="block">
|
||||
<el-input placeholder="账号"
|
||||
size="large"
|
||||
v-model="data.username"
|
||||
autocomplete="off">
|
||||
<el-input
|
||||
placeholder="账号"
|
||||
size="large"
|
||||
v-model="data.username"
|
||||
autocomplete="off"
|
||||
>
|
||||
<template #prefix>
|
||||
<el-icon>
|
||||
<Iphone/>
|
||||
<Iphone />
|
||||
</el-icon>
|
||||
</template>
|
||||
</el-input>
|
||||
</div>
|
||||
|
||||
<div class="block">
|
||||
<el-input placeholder="请输入密码(8-16位)"
|
||||
maxlength="16" size="large"
|
||||
v-model="data.password" show-password
|
||||
autocomplete="off">
|
||||
<el-input
|
||||
placeholder="请输入密码(8-16位)"
|
||||
maxlength="16"
|
||||
size="large"
|
||||
v-model="data.password"
|
||||
show-password
|
||||
autocomplete="off"
|
||||
>
|
||||
<template #prefix>
|
||||
<el-icon>
|
||||
<Lock/>
|
||||
<Lock />
|
||||
</el-icon>
|
||||
</template>
|
||||
</el-input>
|
||||
@ -48,7 +54,13 @@
|
||||
|
||||
<el-row class="btn-row" :gutter="20">
|
||||
<el-col :span="24">
|
||||
<el-button class="login-btn" type="primary" size="large" @click="submitLogin">登录</el-button>
|
||||
<el-button
|
||||
class="login-btn"
|
||||
type="primary"
|
||||
size="large"
|
||||
@click="submitLogin"
|
||||
>登录</el-button
|
||||
>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
@ -56,9 +68,21 @@
|
||||
<el-col :span="12">
|
||||
<div class="reg">
|
||||
还没有账号？
|
||||
<el-button type="primary" class="forget" size="small" @click="login = false">注册</el-button>
|
||||
<el-button
|
||||
type="primary"
|
||||
class="forget"
|
||||
size="small"
|
||||
@click="login = false"
|
||||
>注册</el-button
|
||||
>
|
||||
|
||||
<el-button type="info" class="forget" size="small" @click="showResetPass = true">忘记密码？</el-button>
|
||||
<el-button
|
||||
type="info"
|
||||
class="forget"
|
||||
size="small"
|
||||
@click="showResetPass = true"
|
||||
>忘记密码？</el-button
|
||||
>
|
||||
</div>
|
||||
</el-col>
|
||||
|
||||
@ -66,7 +90,12 @@
|
||||
<div class="c-login" v-if="wechatLoginURL !== ''">
|
||||
<div class="text">其他登录方式：</div>
|
||||
<div class="login-type">
|
||||
<a class="wechat-login" :href="wechatLoginURL" @click="setRoute(router.currentRoute.value.path)"><i class="iconfont icon-wechat"></i></a>
|
||||
<a
|
||||
class="wechat-login"
|
||||
:href="wechatLoginURL"
|
||||
@click="setRoute(router.currentRoute.value.path)"
|
||||
><i class="iconfont icon-wechat"></i
|
||||
></a>
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
@ -79,14 +108,16 @@
|
||||
<el-tabs v-model="activeName" class="demo-tabs">
|
||||
<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">
|
||||
<el-input
|
||||
placeholder="手机号码"
|
||||
size="large"
|
||||
v-model="data.mobile"
|
||||
maxlength="11"
|
||||
autocomplete="off"
|
||||
>
|
||||
<template #prefix>
|
||||
<el-icon>
|
||||
<Iphone/>
|
||||
<Iphone />
|
||||
</el-icon>
|
||||
</template>
|
||||
</el-input>
|
||||
@ -94,32 +125,41 @@
|
||||
<div class="block">
|
||||
<el-row :gutter="10">
|
||||
<el-col :span="12">
|
||||
<el-input placeholder="验证码"
|
||||
size="large" maxlength="30"
|
||||
v-model="data.code"
|
||||
autocomplete="off">
|
||||
<el-input
|
||||
placeholder="验证码"
|
||||
size="large"
|
||||
maxlength="30"
|
||||
v-model="data.code"
|
||||
autocomplete="off"
|
||||
>
|
||||
<template #prefix>
|
||||
<el-icon>
|
||||
<Checked/>
|
||||
<Checked />
|
||||
</el-icon>
|
||||
</template>
|
||||
</el-input>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<send-msg size="large" :receiver="data.mobile" type="mobile"/>
|
||||
<send-msg
|
||||
size="large"
|
||||
:receiver="data.mobile"
|
||||
type="mobile"
|
||||
/>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</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">
|
||||
<el-input
|
||||
placeholder="邮箱地址"
|
||||
size="large"
|
||||
v-model="data.email"
|
||||
autocomplete="off"
|
||||
>
|
||||
<template #prefix>
|
||||
<el-icon>
|
||||
<Message/>
|
||||
<Message />
|
||||
</el-icon>
|
||||
</template>
|
||||
</el-input>
|
||||
@ -127,32 +167,37 @@
|
||||
<div class="block">
|
||||
<el-row :gutter="10">
|
||||
<el-col :span="12">
|
||||
<el-input placeholder="验证码"
|
||||
size="large" maxlength="30"
|
||||
v-model="data.code"
|
||||
autocomplete="off">
|
||||
<el-input
|
||||
placeholder="验证码"
|
||||
size="large"
|
||||
maxlength="30"
|
||||
v-model="data.code"
|
||||
autocomplete="off"
|
||||
>
|
||||
<template #prefix>
|
||||
<el-icon>
|
||||
<Checked/>
|
||||
<Checked />
|
||||
</el-icon>
|
||||
</template>
|
||||
</el-input>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<send-msg size="large" :receiver="data.email" type="email"/>
|
||||
<send-msg size="large" :receiver="data.email" type="email" />
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</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">
|
||||
<el-input
|
||||
placeholder="用户名"
|
||||
size="large"
|
||||
v-model="data.username"
|
||||
autocomplete="off"
|
||||
>
|
||||
<template #prefix>
|
||||
<el-icon>
|
||||
<Iphone/>
|
||||
<Iphone />
|
||||
</el-icon>
|
||||
</template>
|
||||
</el-input>
|
||||
@ -161,38 +206,49 @@
|
||||
</el-tabs>
|
||||
|
||||
<div class="block">
|
||||
<el-input placeholder="请输入密码(8-16位)"
|
||||
maxlength="16" size="large"
|
||||
v-model="data.password" show-password
|
||||
autocomplete="off">
|
||||
<el-input
|
||||
placeholder="请输入密码(8-16位)"
|
||||
maxlength="16"
|
||||
size="large"
|
||||
v-model="data.password"
|
||||
show-password
|
||||
autocomplete="off"
|
||||
>
|
||||
<template #prefix>
|
||||
<el-icon>
|
||||
<Lock/>
|
||||
<Lock />
|
||||
</el-icon>
|
||||
</template>
|
||||
</el-input>
|
||||
</div>
|
||||
|
||||
<div class="block">
|
||||
<el-input placeholder="重复密码(8-16位)"
|
||||
size="large" maxlength="16" v-model="data.repass" show-password
|
||||
autocomplete="off">
|
||||
<el-input
|
||||
placeholder="重复密码(8-16位)"
|
||||
size="large"
|
||||
maxlength="16"
|
||||
v-model="data.repass"
|
||||
show-password
|
||||
autocomplete="off"
|
||||
>
|
||||
<template #prefix>
|
||||
<el-icon>
|
||||
<Lock/>
|
||||
<Lock />
|
||||
</el-icon>
|
||||
</template>
|
||||
</el-input>
|
||||
</div>
|
||||
|
||||
<div class="block">
|
||||
<el-input placeholder="邀请码(可选)"
|
||||
size="large"
|
||||
v-model="data.invite_code"
|
||||
autocomplete="off">
|
||||
<el-input
|
||||
placeholder="邀请码(可选)"
|
||||
size="large"
|
||||
v-model="data.invite_code"
|
||||
autocomplete="off"
|
||||
>
|
||||
<template #prefix>
|
||||
<el-icon>
|
||||
<Message/>
|
||||
<Message />
|
||||
</el-icon>
|
||||
</template>
|
||||
</el-input>
|
||||
@ -200,7 +256,13 @@
|
||||
|
||||
<el-row class="btn-row" :gutter="20">
|
||||
<el-col :span="12">
|
||||
<el-button class="login-btn" type="primary" size="large" @click="submitRegister">注册</el-button>
|
||||
<el-button
|
||||
class="login-btn"
|
||||
type="primary"
|
||||
size="large"
|
||||
@click="submitRegister"
|
||||
>注册</el-button
|
||||
>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<div class="text">
|
||||
@ -208,7 +270,6 @@
|
||||
<el-tag @click="login = true">登录</el-tag>
|
||||
</div>
|
||||
</el-col>
|
||||
|
||||
</el-row>
|
||||
</el-form>
|
||||
|
||||
@ -224,45 +285,48 @@
|
||||
|
||||
<el-col :span="12">
|
||||
<div class="wechat-card">
|
||||
<el-image :src="wxImg"/>
|
||||
<el-image :src="wxImg" />
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<captcha v-if="enableVerify" @success="submit" ref="captchaRef"/>
|
||||
<captcha v-if="enableVerify" @success="submit" ref="captchaRef" />
|
||||
|
||||
<reset-pass @hide="showResetPass = false" :show="showResetPass"/>
|
||||
<reset-pass @hide="showResetPass = false" :show="showResetPass" />
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import {onMounted, ref, watch} from "vue"
|
||||
import {httpGet, httpPost} from "@/utils/http";
|
||||
import {ElMessage} from "element-plus";
|
||||
import {setUserToken} from "@/store/session";
|
||||
import {validateEmail, validateMobile} from "@/utils/validate";
|
||||
import {Checked, Close, Iphone, Lock, Message} from "@element-plus/icons-vue";
|
||||
import { onMounted, ref, watch } from "vue";
|
||||
import { httpGet, httpPost } from "@/utils/http";
|
||||
import { ElMessage } from "element-plus";
|
||||
import { setUserToken } from "@/store/session";
|
||||
import { validateEmail, validateMobile } from "@/utils/validate";
|
||||
import { Checked, Close, Iphone, Lock, Message } from "@element-plus/icons-vue";
|
||||
import SendMsg from "@/components/SendMsg.vue";
|
||||
import {arrayContains} from "@/utils/libs";
|
||||
import {getSystemInfo} from "@/store/cache";
|
||||
import { arrayContains } from "@/utils/libs";
|
||||
import { getSystemInfo } from "@/store/cache";
|
||||
import Captcha from "@/components/Captcha.vue";
|
||||
import ResetPass from "@/components/ResetPass.vue";
|
||||
import {setRoute} from "@/store/system";
|
||||
import {useRouter} from "vue-router";
|
||||
import {useSharedStore} from "@/store/sharedata";
|
||||
import { setRoute } from "@/store/system";
|
||||
import { useRouter } from "vue-router";
|
||||
import { useSharedStore } from "@/store/sharedata";
|
||||
|
||||
// eslint-disable-next-line no-undef
|
||||
const props = defineProps({
|
||||
show: Boolean,
|
||||
show: Boolean
|
||||
});
|
||||
const showDialog = ref(false)
|
||||
watch(() => props.show, (newValue) => {
|
||||
showDialog.value = newValue
|
||||
})
|
||||
const showDialog = ref(false);
|
||||
watch(
|
||||
() => props.show,
|
||||
(newValue) => {
|
||||
showDialog.value = newValue;
|
||||
}
|
||||
);
|
||||
|
||||
const login = ref(true)
|
||||
const login = ref(true);
|
||||
const data = ref({
|
||||
username: process.env.VUE_APP_USER,
|
||||
password: process.env.VUE_APP_PASS,
|
||||
@ -271,158 +335,169 @@ const data = ref({
|
||||
repass: "",
|
||||
code: "",
|
||||
invite_code: ""
|
||||
})
|
||||
const enableMobile = ref(false)
|
||||
const enableEmail = ref(false)
|
||||
const enableUser = ref(false)
|
||||
const enableRegister = ref(true)
|
||||
const wechatLoginURL = ref('')
|
||||
const activeName = ref("")
|
||||
const wxImg = ref("/images/wx.png")
|
||||
const captchaRef = ref(null)
|
||||
});
|
||||
const enableMobile = ref(false);
|
||||
const enableEmail = ref(false);
|
||||
const enableUser = ref(false);
|
||||
const enableRegister = ref(true);
|
||||
const wechatLoginURL = ref("");
|
||||
const activeName = ref("");
|
||||
const wxImg = ref("/images/wx.png");
|
||||
const captchaRef = ref(null);
|
||||
// eslint-disable-next-line no-undef
|
||||
const emits = defineEmits(['hide', 'success']);
|
||||
const action = ref("login")
|
||||
const enableVerify = ref(false)
|
||||
const showResetPass = ref(false)
|
||||
const router = useRouter()
|
||||
const store = useSharedStore()
|
||||
const emits = defineEmits(["hide", "success"]);
|
||||
const action = ref("login");
|
||||
const enableVerify = ref(false);
|
||||
const showResetPass = ref(false);
|
||||
const router = useRouter();
|
||||
const store = useSharedStore();
|
||||
// 是否需要验证码，输入一次密码错之后就要验证码
|
||||
const needVerify = ref(false)
|
||||
const needVerify = ref(false);
|
||||
|
||||
onMounted(() => {
|
||||
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.log(e.message)
|
||||
})
|
||||
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.log(e.message);
|
||||
});
|
||||
|
||||
getSystemInfo().then(res => {
|
||||
if (res.data) {
|
||||
const registerWays = res.data['register_ways']
|
||||
if (arrayContains(registerWays, "username")) {
|
||||
enableUser.value = true
|
||||
activeName.value = 'username'
|
||||
getSystemInfo()
|
||||
.then((res) => {
|
||||
if (res.data) {
|
||||
const registerWays = res.data["register_ways"];
|
||||
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);
|
||||
});
|
||||
});
|
||||
|
||||
const submit = (verifyData) => {
|
||||
if (action.value === "login") {
|
||||
doLogin(verifyData)
|
||||
doLogin(verifyData);
|
||||
} else if (action.value === "register") {
|
||||
doRegister(verifyData)
|
||||
doRegister(verifyData);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
// 登录操作
|
||||
const submitLogin = () => {
|
||||
if (data.value.username === '') {
|
||||
return ElMessage.error('请输入用户名');
|
||||
if (data.value.username === "") {
|
||||
return ElMessage.error("请输入用户名");
|
||||
}
|
||||
if (data.value.password === '') {
|
||||
return ElMessage.error('请输入密码');
|
||||
if (data.value.password === "") {
|
||||
return ElMessage.error("请输入密码");
|
||||
}
|
||||
if (enableVerify.value && needVerify.value) {
|
||||
captchaRef.value.loadCaptcha()
|
||||
action.value = "login"
|
||||
captchaRef.value.loadCaptcha();
|
||||
action.value = "login";
|
||||
} else {
|
||||
doLogin({})
|
||||
doLogin({});
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const doLogin = (verifyData) => {
|
||||
data.value.key = verifyData.key
|
||||
data.value.dots = verifyData.dots
|
||||
data.value.x = verifyData.x
|
||||
httpPost('/api/user/login', data.value).then((res) => {
|
||||
setUserToken(res.data.token)
|
||||
store.setIsLogin(true)
|
||||
ElMessage.success("登录成功！")
|
||||
emits("hide")
|
||||
emits('success')
|
||||
needVerify.value = false
|
||||
}).catch((e) => {
|
||||
ElMessage.error('登录失败，' + e.message)
|
||||
needVerify.value = true
|
||||
})
|
||||
}
|
||||
data.value.key = verifyData.key;
|
||||
data.value.dots = verifyData.dots;
|
||||
data.value.x = verifyData.x;
|
||||
httpPost("/api/user/login", data.value)
|
||||
.then((res) => {
|
||||
setUserToken(res.data.token);
|
||||
store.setIsLogin(true);
|
||||
ElMessage.success("登录成功！");
|
||||
emits("hide");
|
||||
emits("success");
|
||||
needVerify.value = false;
|
||||
})
|
||||
.catch((e) => {
|
||||
ElMessage.error("登录失败，" + e.message);
|
||||
needVerify.value = true;
|
||||
});
|
||||
};
|
||||
|
||||
// 注册操作
|
||||
const submitRegister = () => {
|
||||
if (activeName.value === 'username' && data.value.username === '') {
|
||||
return ElMessage.error('请输入用户名');
|
||||
if (activeName.value === "username" && data.value.username === "") {
|
||||
return ElMessage.error("请输入用户名");
|
||||
}
|
||||
|
||||
if (activeName.value === 'mobile' && !validateMobile(data.value.mobile)) {
|
||||
return ElMessage.error('请输入合法的手机号');
|
||||
if (activeName.value === "mobile" && !validateMobile(data.value.mobile)) {
|
||||
return ElMessage.error("请输入合法的手机号");
|
||||
}
|
||||
|
||||
if (activeName.value === 'email' && !validateEmail(data.value.email)) {
|
||||
return ElMessage.error('请输入合法的邮箱地址');
|
||||
if (activeName.value === "email" && !validateEmail(data.value.email)) {
|
||||
return ElMessage.error("请输入合法的邮箱地址");
|
||||
}
|
||||
|
||||
if (data.value.password.length < 8) {
|
||||
return ElMessage.error('密码的长度为8-16个字符');
|
||||
return ElMessage.error("密码的长度为8-16个字符");
|
||||
}
|
||||
if (data.value.repass !== data.value.password) {
|
||||
return ElMessage.error('两次输入密码不一致');
|
||||
return ElMessage.error("两次输入密码不一致");
|
||||
}
|
||||
|
||||
if ((activeName.value === 'mobile' || activeName.value === 'email') && data.value.code === '') {
|
||||
return ElMessage.error('请输入验证码');
|
||||
if (
|
||||
(activeName.value === "mobile" || activeName.value === "email") &&
|
||||
data.value.code === ""
|
||||
) {
|
||||
return ElMessage.error("请输入验证码");
|
||||
}
|
||||
if (enableVerify.value && activeName.value === 'username') {
|
||||
captchaRef.value.loadCaptcha()
|
||||
action.value = "register"
|
||||
if (enableVerify.value && activeName.value === "username") {
|
||||
captchaRef.value.loadCaptcha();
|
||||
action.value = "register";
|
||||
} else {
|
||||
doRegister({})
|
||||
doRegister({});
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const doRegister = (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)
|
||||
ElMessage.success({
|
||||
"message": "注册成功!",
|
||||
onClose: () => {
|
||||
emits("hide")
|
||||
emits('success')
|
||||
},
|
||||
duration: 1000
|
||||
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);
|
||||
ElMessage.success({
|
||||
message: "注册成功!",
|
||||
onClose: () => {
|
||||
emits("hide");
|
||||
emits("success");
|
||||
},
|
||||
duration: 1000
|
||||
});
|
||||
})
|
||||
}).catch((e) => {
|
||||
ElMessage.error('注册失败，' + e.message)
|
||||
})
|
||||
}
|
||||
.catch((e) => {
|
||||
ElMessage.error("注册失败，" + e.message);
|
||||
});
|
||||
};
|
||||
|
||||
const close = function () {
|
||||
emits('hide', false)
|
||||
login.value = true
|
||||
}
|
||||
emits("hide", false);
|
||||
login.value = true;
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="stylus">
|
||||
@ -525,4 +600,4 @@ const close = function () {
|
||||
}
|
||||
|
||||
}
|
||||
</style>
|
||||
</style>
|
||||
|
||||
@ -1,43 +1,42 @@
|
||||
<template>
|
||||
<div class="reset-pass">
|
||||
<el-dialog
|
||||
v-model="showDialog"
|
||||
:close-on-click-modal="true"
|
||||
width="540px"
|
||||
:before-close="close"
|
||||
:title="title"
|
||||
class="reset-pass-dialog"
|
||||
v-model="showDialog"
|
||||
:close-on-click-modal="true"
|
||||
width="540px"
|
||||
:before-close="close"
|
||||
:title="title"
|
||||
class="reset-pass-dialog"
|
||||
>
|
||||
<div class="form">
|
||||
<el-form :model="form" label-width="80px" label-position="left">
|
||||
<el-tabs v-model="form.type" class="demo-tabs">
|
||||
<el-tab-pane label="手机号验证" name="mobile">
|
||||
<el-form-item label="手机号">
|
||||
<el-input v-model="form.mobile" placeholder="请输入手机号"/>
|
||||
<el-input v-model="form.mobile" placeholder="请输入手机号" />
|
||||
</el-form-item>
|
||||
<el-form-item label="验证码">
|
||||
<el-row class="code-row">
|
||||
<el-col :span="16">
|
||||
<el-input v-model="form.code" maxlength="6"/>
|
||||
<el-input v-model="form.code" maxlength="6" />
|
||||
</el-col>
|
||||
<el-col :span="8" class="send-button">
|
||||
<send-msg size="" :receiver="form.mobile" type="mobile"/>
|
||||
<send-msg size="" :receiver="form.mobile" type="mobile" />
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form-item>
|
||||
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="邮箱验证" name="email">
|
||||
<el-form-item label="邮箱地址">
|
||||
<el-input v-model="form.email" placeholder="请输入邮箱地址"/>
|
||||
<el-input v-model="form.email" placeholder="请输入邮箱地址" />
|
||||
</el-form-item>
|
||||
<el-form-item label="验证码">
|
||||
<el-row class="code-row">
|
||||
<el-col :span="16">
|
||||
<el-input v-model="form.code" maxlength="6"/>
|
||||
<el-input v-model="form.code" maxlength="6" />
|
||||
</el-col>
|
||||
<el-col :span="8" class="send-button">
|
||||
<send-msg size="" :receiver="form.email" type="email"/>
|
||||
<send-msg size="" :receiver="form.email" type="email" />
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form-item>
|
||||
@ -45,19 +44,17 @@
|
||||
</el-tabs>
|
||||
|
||||
<el-form-item label="新密码">
|
||||
<el-input v-model="form.password" type="password"/>
|
||||
<el-input v-model="form.password" type="password" />
|
||||
</el-form-item>
|
||||
<el-form-item label="重复密码">
|
||||
<el-input v-model="form.repass" type="password"/>
|
||||
<el-input v-model="form.repass" type="password" />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
|
||||
<template #footer>
|
||||
<div class="dialog-footer">
|
||||
<el-button type="primary" @click="save" round>
|
||||
重置密码
|
||||
</el-button>
|
||||
<el-button type="primary" @click="save" round> 重置密码 </el-button>
|
||||
</div>
|
||||
</template>
|
||||
</el-dialog>
|
||||
@ -65,11 +62,11 @@
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import {computed, ref} from "vue";
|
||||
import { computed, ref } from "vue";
|
||||
import SendMsg from "@/components/SendMsg.vue";
|
||||
import {ElMessage} from "element-plus";
|
||||
import {httpPost} from "@/utils/http";
|
||||
import {validateEmail, validateMobile} from "@/utils/validate";
|
||||
import { ElMessage } from "element-plus";
|
||||
import { httpPost } from "@/utils/http";
|
||||
import { validateEmail, validateMobile } from "@/utils/validate";
|
||||
|
||||
const props = defineProps({
|
||||
show: Boolean,
|
||||
@ -77,23 +74,23 @@ const props = defineProps({
|
||||
});
|
||||
|
||||
const showDialog = computed(() => {
|
||||
return props.show
|
||||
})
|
||||
return props.show;
|
||||
});
|
||||
|
||||
const title = ref('重置密码')
|
||||
const title = ref("重置密码");
|
||||
const form = ref({
|
||||
mobile: '',
|
||||
email: '',
|
||||
type: 'mobile',
|
||||
code: '',
|
||||
password: '',
|
||||
repass: ''
|
||||
})
|
||||
mobile: "",
|
||||
email: "",
|
||||
type: "mobile",
|
||||
code: "",
|
||||
password: "",
|
||||
repass: ""
|
||||
});
|
||||
|
||||
const emits = defineEmits(['hide']);
|
||||
const emits = defineEmits(["hide"]);
|
||||
|
||||
const save = () => {
|
||||
if (form.value.code === '') {
|
||||
if (form.value.code === "") {
|
||||
return ElMessage.error("请输入验证码");
|
||||
}
|
||||
if (form.value.password.length < 8) {
|
||||
@ -103,18 +100,22 @@ const save = () => {
|
||||
return ElMessage.error("两次输入密码不一致");
|
||||
}
|
||||
|
||||
httpPost('/api/user/resetPass', form.value).then(() => {
|
||||
ElMessage.success({
|
||||
message: '重置密码成功', duration: 1000, onClose: () => emits('hide', false)
|
||||
httpPost("/api/user/resetPass", form.value)
|
||||
.then(() => {
|
||||
ElMessage.success({
|
||||
message: "重置密码成功",
|
||||
duration: 1000,
|
||||
onClose: () => emits("hide", false)
|
||||
});
|
||||
})
|
||||
}).catch(e => {
|
||||
ElMessage.error("重置密码失败：" + e.message);
|
||||
})
|
||||
}
|
||||
.catch((e) => {
|
||||
ElMessage.error("重置密码失败：" + e.message);
|
||||
});
|
||||
};
|
||||
|
||||
const close = function () {
|
||||
emits('hide', false);
|
||||
}
|
||||
emits("hide", false);
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="stylus">
|
||||
@ -140,5 +141,4 @@ const close = function () {
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
</style>
|
||||
|
||||
@ -1,21 +1,28 @@
|
||||
<template>
|
||||
<el-container class="send-verify-code">
|
||||
<el-button type="primary" class="send-btn" :size="props.size" :disabled="!canSend" @click="sendMsg" plain>
|
||||
<el-button
|
||||
type="primary"
|
||||
class="btn-normal"
|
||||
:size="props.size"
|
||||
:disabled="!canSend"
|
||||
@click="sendMsg"
|
||||
plain
|
||||
>
|
||||
{{ btnText }}
|
||||
</el-button>
|
||||
|
||||
<captcha @success="doSendMsg" ref="captchaRef"/>
|
||||
<captcha @success="doSendMsg" ref="captchaRef" />
|
||||
</el-container>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
// 发送短信验证码组件
|
||||
import {ref} from "vue";
|
||||
import {validateEmail, validateMobile} from "@/utils/validate";
|
||||
import {httpPost} from "@/utils/http";
|
||||
import {showMessageError, showMessageOK} from "@/utils/dialog";
|
||||
import { ref } from "vue";
|
||||
import { validateEmail, validateMobile } from "@/utils/validate";
|
||||
import { httpPost } from "@/utils/http";
|
||||
import { showMessageError, showMessageOK } from "@/utils/dialog";
|
||||
import Captcha from "@/components/Captcha.vue";
|
||||
import {getSystemInfo} from "@/store/cache";
|
||||
import { getSystemInfo } from "@/store/cache";
|
||||
|
||||
// eslint-disable-next-line no-undef
|
||||
const props = defineProps({
|
||||
@ -23,58 +30,65 @@ const props = defineProps({
|
||||
size: String,
|
||||
type: {
|
||||
type: String,
|
||||
default: 'mobile'
|
||||
default: "mobile"
|
||||
}
|
||||
});
|
||||
const btnText = ref('发送验证码')
|
||||
const canSend = ref(true)
|
||||
const captchaRef = ref(null)
|
||||
const enableVerify = ref(false)
|
||||
const btnText = ref("发送验证码");
|
||||
const canSend = ref(true);
|
||||
const captchaRef = ref(null);
|
||||
const enableVerify = ref(false);
|
||||
|
||||
getSystemInfo().then(res => {
|
||||
enableVerify.value = res.data['enabled_verify']
|
||||
})
|
||||
getSystemInfo().then((res) => {
|
||||
enableVerify.value = res.data["enabled_verify"];
|
||||
});
|
||||
|
||||
const sendMsg = () => {
|
||||
if (!validateMobile(props.receiver) && props.type === 'mobile') {
|
||||
return showMessageError("请输入合法的手机号")
|
||||
if (!validateMobile(props.receiver) && props.type === "mobile") {
|
||||
return showMessageError("请输入合法的手机号");
|
||||
}
|
||||
if (!validateEmail(props.receiver) && props.type === 'email') {
|
||||
return showMessageError("请输入合法的邮箱地址")
|
||||
if (!validateEmail(props.receiver) && props.type === "email") {
|
||||
return showMessageError("请输入合法的邮箱地址");
|
||||
}
|
||||
|
||||
|
||||
if (enableVerify.value) {
|
||||
captchaRef.value.loadCaptcha()
|
||||
captchaRef.value.loadCaptcha();
|
||||
} else {
|
||||
doSendMsg({})
|
||||
doSendMsg({});
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const doSendMsg = (data) => {
|
||||
if (!canSend.value) {
|
||||
return
|
||||
return;
|
||||
}
|
||||
|
||||
canSend.value = false
|
||||
httpPost('/api/sms/code', {receiver: props.receiver, key: data.key, dots: data.dots, x:data.x}).then(() => {
|
||||
showMessageOK('验证码发送成功')
|
||||
let time = 60
|
||||
btnText.value = time
|
||||
const handler = setInterval(() => {
|
||||
time = time - 1
|
||||
if (time <= 0) {
|
||||
clearInterval(handler)
|
||||
btnText.value = '重新发送'
|
||||
canSend.value = true
|
||||
} else {
|
||||
btnText.value = time
|
||||
}
|
||||
}, 1000)
|
||||
}).catch(e => {
|
||||
canSend.value = true
|
||||
showMessageError('验证码发送失败：' + e.message)
|
||||
canSend.value = false;
|
||||
httpPost("/api/sms/code", {
|
||||
receiver: props.receiver,
|
||||
key: data.key,
|
||||
dots: data.dots,
|
||||
x: data.x
|
||||
})
|
||||
}
|
||||
.then(() => {
|
||||
showMessageOK("验证码发送成功");
|
||||
let time = 60;
|
||||
btnText.value = time;
|
||||
const handler = setInterval(() => {
|
||||
time = time - 1;
|
||||
if (time <= 0) {
|
||||
clearInterval(handler);
|
||||
btnText.value = "重新发送";
|
||||
canSend.value = true;
|
||||
} else {
|
||||
btnText.value = time;
|
||||
}
|
||||
}, 1000);
|
||||
})
|
||||
.catch((e) => {
|
||||
canSend.value = true;
|
||||
showMessageError("验证码发送失败：" + e.message);
|
||||
});
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="stylus" scoped>
|
||||
@ -84,4 +98,4 @@ const doSendMsg = (data) => {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</style>
|
||||
|
||||
@ -27,18 +27,19 @@ onMounted(() => {
|
||||
<style lang="stylus" scoped>
|
||||
@import '@/assets/iconfont/iconfont.css'
|
||||
.theme-box{
|
||||
z-index :111
|
||||
position: fixed;
|
||||
right: 40px;
|
||||
bottom: 262px;
|
||||
cursor: pointer;
|
||||
background-color: #fff;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 50%;
|
||||
width 35px;
|
||||
height: 35px;
|
||||
line-height: 35px;
|
||||
text-align: center;
|
||||
background-color: rgb(146, 147, 148);
|
||||
// background-color: rgb(146, 147, 148);
|
||||
background: linear-gradient(135deg, rgba(134, 140, 255, 1) 0%, rgba(67, 24, 255, 1) 100%);
|
||||
|
||||
transition: all 0.3s ease;
|
||||
&:hover{
|
||||
|
||||
@ -5,352 +5,357 @@
|
||||
// * @Author yangjian102621@163.com
|
||||
// * +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
|
||||
|
||||
import {createRouter, createWebHistory} from "vue-router";
|
||||
import { createRouter, createWebHistory } from "vue-router";
|
||||
|
||||
const routes = [
|
||||
{
|
||||
name: 'Index',
|
||||
path: '/',
|
||||
meta: {title: "首页"},
|
||||
component: () => import('@/views/Index.vue'),
|
||||
},
|
||||
{
|
||||
name: 'home',
|
||||
path: '/home',
|
||||
redirect: '/chat',
|
||||
component: () => import('@/views/Home.vue'),
|
||||
children: [
|
||||
{
|
||||
name: 'chat',
|
||||
path: '/chat',
|
||||
meta: {title: '创作中心'},
|
||||
component: () => import('@/views/ChatPlus.vue'),
|
||||
},
|
||||
{
|
||||
name: 'chat-id',
|
||||
path: '/chat/:id',
|
||||
meta: {title: '创作中心'},
|
||||
component: () => import('@/views/ChatPlus.vue'),
|
||||
},
|
||||
{
|
||||
name: 'image-mj',
|
||||
path: '/mj',
|
||||
meta: {title: 'MidJourney 绘画中心'},
|
||||
component: () => import('@/views/ImageMj.vue'),
|
||||
},
|
||||
{
|
||||
name: 'image-sd',
|
||||
path: '/sd',
|
||||
meta: {title: 'stable diffusion 绘画中心'},
|
||||
component: () => import('@/views/ImageSd.vue'),
|
||||
},
|
||||
{
|
||||
name: 'member',
|
||||
path: '/member',
|
||||
meta: {title: '会员充值中心'},
|
||||
component: () => import('@/views/Member.vue'),
|
||||
},
|
||||
{
|
||||
name: 'chat-app',
|
||||
path: '/apps',
|
||||
meta: {title: '应用中心'},
|
||||
component: () => import('@/views/ChatApps.vue'),
|
||||
},
|
||||
{
|
||||
name: 'images',
|
||||
path: '/images-wall',
|
||||
meta: {title: '作品展示'},
|
||||
component: () => import('@/views/ImagesWall.vue'),
|
||||
},
|
||||
{
|
||||
name: 'user-invitation',
|
||||
path: '/invite',
|
||||
meta: {title: '推广计划'},
|
||||
component: () => import('@/views/Invitation.vue'),
|
||||
},
|
||||
{
|
||||
name: 'powerLog',
|
||||
path: '/powerLog',
|
||||
meta: {title: '消费日志'},
|
||||
component: () => import('@/views/PowerLog.vue'),
|
||||
},
|
||||
{
|
||||
name: 'xmind',
|
||||
path: '/xmind',
|
||||
meta: {title: '思维导图'},
|
||||
component: () => import('@/views/MarkMap.vue'),
|
||||
},
|
||||
{
|
||||
name: 'dalle',
|
||||
path: '/dalle',
|
||||
meta: {title: 'DALLE-3'},
|
||||
component: () => import('@/views/Dalle.vue'),
|
||||
},
|
||||
{
|
||||
name: 'suno',
|
||||
path: '/suno',
|
||||
meta: {title: 'Suno音乐创作'},
|
||||
component: () => import('@/views/Suno.vue'),
|
||||
},
|
||||
{
|
||||
name: 'ExternalLink',
|
||||
path: '/external',
|
||||
component: () => import('@/views/ExternalPage.vue'),
|
||||
},
|
||||
{
|
||||
name: 'song',
|
||||
path: '/song/:id',
|
||||
meta: {title: 'Suno音乐播放'},
|
||||
component: () => import('@/views/Song.vue'),
|
||||
},
|
||||
{
|
||||
name: 'luma',
|
||||
path: '/luma',
|
||||
meta: {title: 'Luma视频创作'},
|
||||
component: () => import('@/views/Luma.vue'),
|
||||
},
|
||||
]
|
||||
},
|
||||
{
|
||||
name: 'chat-export',
|
||||
path: '/chat/export',
|
||||
meta: {title: '导出会话记录'},
|
||||
component: () => import('@/views/ChatExport.vue'),
|
||||
},
|
||||
{
|
||||
name: 'login',
|
||||
path: '/login',
|
||||
meta: {title: '用户登录'},
|
||||
component: () => import('@/views/Login.vue'),
|
||||
},
|
||||
{
|
||||
name: 'login-callback',
|
||||
path: '/login/callback',
|
||||
meta: {title: '用户登录'},
|
||||
component: () => import('@/views/LoginCallback.vue'),
|
||||
},
|
||||
{
|
||||
name: 'register',
|
||||
path: '/register',
|
||||
{
|
||||
name: "Index",
|
||||
path: "/",
|
||||
meta: { title: "首页" },
|
||||
component: () => import("@/views/Index.vue")
|
||||
},
|
||||
{
|
||||
name: "home",
|
||||
path: "/home",
|
||||
redirect: "/chat",
|
||||
component: () => import("@/views/Home.vue"),
|
||||
children: [
|
||||
{
|
||||
name: "chat",
|
||||
path: "/chat",
|
||||
meta: { title: "创作中心" },
|
||||
component: () => import("@/views/ChatPlus.vue")
|
||||
},
|
||||
{
|
||||
name: "chat-id",
|
||||
path: "/chat/:id",
|
||||
meta: { title: "创作中心" },
|
||||
component: () => import("@/views/ChatPlus.vue")
|
||||
},
|
||||
{
|
||||
name: "image-mj",
|
||||
path: "/mj",
|
||||
meta: { title: "MidJourney 绘画中心" },
|
||||
component: () => import("@/views/ImageMj.vue")
|
||||
},
|
||||
{
|
||||
name: "image-sd",
|
||||
path: "/sd",
|
||||
meta: { title: "stable diffusion 绘画中心" },
|
||||
component: () => import("@/views/ImageSd.vue")
|
||||
},
|
||||
{
|
||||
name: "member",
|
||||
path: "/member",
|
||||
meta: { title: "会员充值中心" },
|
||||
component: () => import("@/views/Member.vue")
|
||||
},
|
||||
{
|
||||
name: "chat-app",
|
||||
path: "/apps",
|
||||
meta: { title: "应用中心" },
|
||||
component: () => import("@/views/ChatApps.vue")
|
||||
},
|
||||
{
|
||||
name: "images",
|
||||
path: "/images-wall",
|
||||
meta: { title: "作品展示" },
|
||||
component: () => import("@/views/ImagesWall.vue")
|
||||
},
|
||||
{
|
||||
name: "user-invitation",
|
||||
path: "/invite",
|
||||
meta: { title: "推广计划" },
|
||||
component: () => import("@/views/Invitation.vue")
|
||||
},
|
||||
{
|
||||
name: "powerLog",
|
||||
path: "/powerLog",
|
||||
meta: { title: "消费日志" },
|
||||
component: () => import("@/views/PowerLog.vue")
|
||||
},
|
||||
{
|
||||
name: "xmind",
|
||||
path: "/xmind",
|
||||
meta: { title: "思维导图" },
|
||||
component: () => import("@/views/MarkMap.vue")
|
||||
},
|
||||
{
|
||||
name: "dalle",
|
||||
path: "/dalle",
|
||||
meta: { title: "DALLE-3" },
|
||||
component: () => import("@/views/Dalle.vue")
|
||||
},
|
||||
{
|
||||
name: "suno",
|
||||
path: "/suno",
|
||||
meta: { title: "Suno音乐创作" },
|
||||
component: () => import("@/views/Suno.vue")
|
||||
},
|
||||
{
|
||||
name: "ExternalLink",
|
||||
path: "/external",
|
||||
component: () => import("@/views/ExternalPage.vue")
|
||||
},
|
||||
{
|
||||
name: "song",
|
||||
path: "/song/:id",
|
||||
meta: { title: "Suno音乐播放" },
|
||||
component: () => import("@/views/Song.vue")
|
||||
},
|
||||
{
|
||||
name: "luma",
|
||||
path: "/luma",
|
||||
meta: { title: "Luma视频创作" },
|
||||
component: () => import("@/views/Luma.vue")
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
name: "chat-export",
|
||||
path: "/chat/export",
|
||||
meta: { title: "导出会话记录" },
|
||||
component: () => import("@/views/ChatExport.vue")
|
||||
},
|
||||
{
|
||||
name: "login",
|
||||
path: "/login",
|
||||
meta: { title: "用户登录" },
|
||||
component: () => import("@/views/Login.vue")
|
||||
},
|
||||
|
||||
meta: {title: '用户注册'},
|
||||
component: () => import('@/views/Register.vue'),
|
||||
},
|
||||
{
|
||||
path: '/admin/login',
|
||||
name: 'admin-login',
|
||||
meta: {title: '控制台登录'},
|
||||
component: () => import('@/views/admin/Login.vue'),
|
||||
},
|
||||
{
|
||||
path: '/payReturn',
|
||||
name: 'pay-return',
|
||||
meta: {title: '支付回调'},
|
||||
component: () => import('@/views/PayReturn.vue'),
|
||||
},
|
||||
{
|
||||
name: 'admin',
|
||||
path: '/admin',
|
||||
redirect: '/admin/dashboard',
|
||||
component: () => import("@/views/admin/Home.vue"),
|
||||
meta: {title: 'Geek-AI 控制台'},
|
||||
children: [
|
||||
{
|
||||
path: '/admin/dashboard',
|
||||
name: 'admin-dashboard',
|
||||
meta: {title: '仪表盘'},
|
||||
component: () => import('@/views/admin/Dashboard.vue'),
|
||||
},
|
||||
{
|
||||
path: '/admin/system',
|
||||
name: 'admin-system',
|
||||
meta: {title: '系统设置'},
|
||||
component: () => import('@/views/admin/SysConfig.vue'),
|
||||
},
|
||||
{
|
||||
path: '/admin/user',
|
||||
name: 'admin-user',
|
||||
meta: {title: '用户管理'},
|
||||
component: () => import('@/views/admin/Users.vue'),
|
||||
},
|
||||
{
|
||||
path: '/admin/app',
|
||||
name: 'admin-app',
|
||||
meta: {title: '应用列表'},
|
||||
component: () => import('@/views/admin/Apps.vue'),
|
||||
},
|
||||
{
|
||||
path: '/admin/app/type',
|
||||
name: 'admin-app-type',
|
||||
meta: {title: '应用分类'},
|
||||
component: () => import('@/views/admin/AppType.vue'),
|
||||
},
|
||||
{
|
||||
path: '/admin/apikey',
|
||||
name: 'admin-apikey',
|
||||
meta: {title: 'API-KEY 管理'},
|
||||
component: () => import('@/views/admin/ApiKey.vue'),
|
||||
},
|
||||
{
|
||||
path: '/admin/chat/model',
|
||||
name: 'admin-chat-model',
|
||||
meta: {title: '语言模型'},
|
||||
component: () => import('@/views/admin/ChatModel.vue'),
|
||||
},
|
||||
{
|
||||
path: '/admin/product',
|
||||
name: 'admin-product',
|
||||
meta: {title: '充值产品'},
|
||||
component: () => import('@/views/admin/Product.vue'),
|
||||
},
|
||||
{
|
||||
path: '/admin/order',
|
||||
name: 'admin-order',
|
||||
meta: {title: '充值订单'},
|
||||
component: () => import('@/views/admin/Order.vue'),
|
||||
},
|
||||
{
|
||||
path: '/admin/redeem',
|
||||
name: 'admin-redeem',
|
||||
meta: {title: '兑换码管理'},
|
||||
component: () => import('@/views/admin/Redeem.vue'),
|
||||
},
|
||||
{
|
||||
path: '/admin/loginLog',
|
||||
name: 'admin-loginLog',
|
||||
meta: {title: '登录日志'},
|
||||
component: () => import('@/views/admin/LoginLog.vue'),
|
||||
},
|
||||
{
|
||||
path: '/admin/functions',
|
||||
name: 'admin-functions',
|
||||
meta: {title: '函数管理'},
|
||||
component: () => import('@/views/admin/Functions.vue'),
|
||||
},
|
||||
{
|
||||
path: '/admin/chats',
|
||||
name: 'admin-chats',
|
||||
meta: {title: '对话管理'},
|
||||
component: () => import('@/views/admin/ChatList.vue'),
|
||||
},
|
||||
{
|
||||
path: '/admin/images',
|
||||
name: 'admin-images',
|
||||
meta: {title: '绘图管理'},
|
||||
component: () => import('@/views/admin/ImageList.vue'),
|
||||
},
|
||||
{
|
||||
path: '/admin/medias',
|
||||
name: 'admin-medias',
|
||||
meta: {title: '音视频管理'},
|
||||
component: () => import('@/views/admin/Medias.vue'),
|
||||
},
|
||||
{
|
||||
path: '/admin/powerLog',
|
||||
name: 'admin-power-log',
|
||||
meta: {title: '算力日志'},
|
||||
component: () => import('@/views/admin/PowerLog.vue'),
|
||||
},
|
||||
{
|
||||
path: '/admin/manger',
|
||||
name: 'admin-manger',
|
||||
meta: {title: '管理员'},
|
||||
component: () => import('@/views/admin/Manager.vue'),
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
name: "login-callback",
|
||||
path: "/login/callback",
|
||||
meta: { title: "用户登录" },
|
||||
component: () => import("@/views/LoginCallback.vue")
|
||||
},
|
||||
{
|
||||
name: "register",
|
||||
path: "/register",
|
||||
|
||||
meta: { title: "用户注册" },
|
||||
component: () => import("@/views/Register.vue")
|
||||
},
|
||||
{
|
||||
name: "resetpassword",
|
||||
path: "/resetpassword",
|
||||
meta: { title: "重置密码" },
|
||||
component: () => import("@/views/Resetpassword.vue")
|
||||
},
|
||||
{
|
||||
path: "/admin/login",
|
||||
name: "admin-login",
|
||||
meta: { title: "控制台登录" },
|
||||
component: () => import("@/views/admin/Login.vue")
|
||||
},
|
||||
{
|
||||
path: "/payReturn",
|
||||
name: "pay-return",
|
||||
meta: { title: "支付回调" },
|
||||
component: () => import("@/views/PayReturn.vue")
|
||||
},
|
||||
{
|
||||
name: "admin",
|
||||
path: "/admin",
|
||||
redirect: "/admin/dashboard",
|
||||
component: () => import("@/views/admin/Home.vue"),
|
||||
meta: { title: "Geek-AI 控制台" },
|
||||
children: [
|
||||
{
|
||||
path: "/admin/dashboard",
|
||||
name: "admin-dashboard",
|
||||
meta: { title: "仪表盘" },
|
||||
component: () => import("@/views/admin/Dashboard.vue")
|
||||
},
|
||||
{
|
||||
path: "/admin/system",
|
||||
name: "admin-system",
|
||||
meta: { title: "系统设置" },
|
||||
component: () => import("@/views/admin/SysConfig.vue")
|
||||
},
|
||||
{
|
||||
path: "/admin/user",
|
||||
name: "admin-user",
|
||||
meta: { title: "用户管理" },
|
||||
component: () => import("@/views/admin/Users.vue")
|
||||
},
|
||||
{
|
||||
path: "/admin/app",
|
||||
name: "admin-app",
|
||||
meta: { title: "应用列表" },
|
||||
component: () => import("@/views/admin/Apps.vue")
|
||||
},
|
||||
{
|
||||
path: "/admin/app/type",
|
||||
name: "admin-app-type",
|
||||
meta: { title: "应用分类" },
|
||||
component: () => import("@/views/admin/AppType.vue")
|
||||
},
|
||||
{
|
||||
path: "/admin/apikey",
|
||||
name: "admin-apikey",
|
||||
meta: { title: "API-KEY 管理" },
|
||||
component: () => import("@/views/admin/ApiKey.vue")
|
||||
},
|
||||
{
|
||||
path: "/admin/chat/model",
|
||||
name: "admin-chat-model",
|
||||
meta: { title: "语言模型" },
|
||||
component: () => import("@/views/admin/ChatModel.vue")
|
||||
},
|
||||
{
|
||||
path: "/admin/product",
|
||||
name: "admin-product",
|
||||
meta: { title: "充值产品" },
|
||||
component: () => import("@/views/admin/Product.vue")
|
||||
},
|
||||
{
|
||||
path: "/admin/order",
|
||||
name: "admin-order",
|
||||
meta: { title: "充值订单" },
|
||||
component: () => import("@/views/admin/Order.vue")
|
||||
},
|
||||
{
|
||||
path: "/admin/redeem",
|
||||
name: "admin-redeem",
|
||||
meta: { title: "兑换码管理" },
|
||||
component: () => import("@/views/admin/Redeem.vue")
|
||||
},
|
||||
{
|
||||
path: "/admin/loginLog",
|
||||
name: "admin-loginLog",
|
||||
meta: { title: "登录日志" },
|
||||
component: () => import("@/views/admin/LoginLog.vue")
|
||||
},
|
||||
{
|
||||
path: "/admin/functions",
|
||||
name: "admin-functions",
|
||||
meta: { title: "函数管理" },
|
||||
component: () => import("@/views/admin/Functions.vue")
|
||||
},
|
||||
{
|
||||
path: "/admin/chats",
|
||||
name: "admin-chats",
|
||||
meta: { title: "对话管理" },
|
||||
component: () => import("@/views/admin/ChatList.vue")
|
||||
},
|
||||
{
|
||||
path: "/admin/images",
|
||||
name: "admin-images",
|
||||
meta: { title: "绘图管理" },
|
||||
component: () => import("@/views/admin/ImageList.vue")
|
||||
},
|
||||
{
|
||||
path: "/admin/medias",
|
||||
name: "admin-medias",
|
||||
meta: { title: "音视频管理" },
|
||||
component: () => import("@/views/admin/Medias.vue")
|
||||
},
|
||||
{
|
||||
path: "/admin/powerLog",
|
||||
name: "admin-power-log",
|
||||
meta: { title: "算力日志" },
|
||||
component: () => import("@/views/admin/PowerLog.vue")
|
||||
},
|
||||
{
|
||||
path: "/admin/manger",
|
||||
name: "admin-manger",
|
||||
meta: { title: "管理员" },
|
||||
component: () => import("@/views/admin/Manager.vue")
|
||||
}
|
||||
]
|
||||
},
|
||||
|
||||
{
|
||||
name: 'mobile-login',
|
||||
path: '/mobile/login',
|
||||
meta: {title: '用户登录'},
|
||||
component: () => import('@/views/Login.vue'),
|
||||
},
|
||||
{
|
||||
name: 'mobile-register',
|
||||
path: '/mobile/register',
|
||||
meta: {title: '用户注册'},
|
||||
component: () => import('@/views/Register.vue'),
|
||||
},
|
||||
{
|
||||
name: 'mobile',
|
||||
path: '/mobile',
|
||||
meta: {title: '首页'},
|
||||
component: () => import('@/views/mobile/Home.vue'),
|
||||
redirect: '/mobile/index',
|
||||
children: [
|
||||
{
|
||||
path: '/mobile/index',
|
||||
name: 'mobile-index',
|
||||
component: () => import('@/views/mobile/Index.vue'),
|
||||
},
|
||||
{
|
||||
path: '/mobile/chat',
|
||||
name: 'mobile-chat',
|
||||
component: () => import('@/views/mobile/ChatList.vue'),
|
||||
},
|
||||
{
|
||||
path: '/mobile/image',
|
||||
name: 'mobile-image',
|
||||
component: () => import('@/views/mobile/Image.vue'),
|
||||
},
|
||||
{
|
||||
path: '/mobile/profile',
|
||||
name: 'mobile-profile',
|
||||
component: () => import('@/views/mobile/Profile.vue'),
|
||||
},
|
||||
{
|
||||
path: '/mobile/imgWall',
|
||||
name: 'mobile-img-wall',
|
||||
component: () => import('@/views/mobile/pages/ImgWall.vue'),
|
||||
},
|
||||
{
|
||||
path: '/mobile/chat/session',
|
||||
name: 'mobile-chat-session',
|
||||
component: () => import('@/views/mobile/ChatSession.vue'),
|
||||
},
|
||||
{
|
||||
path: '/mobile/chat/export',
|
||||
name: 'mobile-chat-export',
|
||||
component: () => import('@/views/mobile/ChatExport.vue'),
|
||||
},
|
||||
]
|
||||
},
|
||||
{
|
||||
name: "mobile-login",
|
||||
path: "/mobile/login",
|
||||
meta: { title: "用户登录" },
|
||||
component: () => import("@/views/Login.vue")
|
||||
},
|
||||
{
|
||||
name: "mobile-register",
|
||||
path: "/mobile/register",
|
||||
meta: { title: "用户注册" },
|
||||
component: () => import("@/views/Register.vue")
|
||||
},
|
||||
{
|
||||
name: "mobile",
|
||||
path: "/mobile",
|
||||
meta: { title: "首页" },
|
||||
component: () => import("@/views/mobile/Home.vue"),
|
||||
redirect: "/mobile/index",
|
||||
children: [
|
||||
{
|
||||
path: "/mobile/index",
|
||||
name: "mobile-index",
|
||||
component: () => import("@/views/mobile/Index.vue")
|
||||
},
|
||||
{
|
||||
path: "/mobile/chat",
|
||||
name: "mobile-chat",
|
||||
component: () => import("@/views/mobile/ChatList.vue")
|
||||
},
|
||||
{
|
||||
path: "/mobile/image",
|
||||
name: "mobile-image",
|
||||
component: () => import("@/views/mobile/Image.vue")
|
||||
},
|
||||
{
|
||||
path: "/mobile/profile",
|
||||
name: "mobile-profile",
|
||||
component: () => import("@/views/mobile/Profile.vue")
|
||||
},
|
||||
{
|
||||
path: "/mobile/imgWall",
|
||||
name: "mobile-img-wall",
|
||||
component: () => import("@/views/mobile/pages/ImgWall.vue")
|
||||
},
|
||||
{
|
||||
path: "/mobile/chat/session",
|
||||
name: "mobile-chat-session",
|
||||
component: () => import("@/views/mobile/ChatSession.vue")
|
||||
},
|
||||
{
|
||||
path: "/mobile/chat/export",
|
||||
name: "mobile-chat-export",
|
||||
component: () => import("@/views/mobile/ChatExport.vue")
|
||||
}
|
||||
]
|
||||
},
|
||||
|
||||
{
|
||||
name: 'test',
|
||||
path: '/test',
|
||||
meta: {title: '测试页面'},
|
||||
component: () => import('@/views/Test.vue'),
|
||||
},
|
||||
{
|
||||
name: 'test2',
|
||||
path: '/test2',
|
||||
meta: {title: '测试页面'},
|
||||
component: () => import('@/views/RealtimeTest.vue'),
|
||||
},
|
||||
{
|
||||
name: 'NotFound',
|
||||
path: '/:all(.*)',
|
||||
meta: {title: '页面没有找到'},
|
||||
component: () => import('@/views/404.vue'),
|
||||
},
|
||||
]
|
||||
{
|
||||
name: "test",
|
||||
path: "/test",
|
||||
meta: { title: "测试页面" },
|
||||
component: () => import("@/views/Test.vue")
|
||||
},
|
||||
{
|
||||
name: "test2",
|
||||
path: "/test2",
|
||||
meta: { title: "测试页面" },
|
||||
component: () => import("@/views/RealtimeTest.vue")
|
||||
},
|
||||
{
|
||||
name: "NotFound",
|
||||
path: "/:all(.*)",
|
||||
meta: { title: "页面没有找到" },
|
||||
component: () => import("@/views/404.vue")
|
||||
}
|
||||
];
|
||||
|
||||
// console.log(MY_VARIABLE)
|
||||
const router = createRouter({
|
||||
history: createWebHistory(),
|
||||
routes: routes,
|
||||
})
|
||||
history: createWebHistory(),
|
||||
routes: routes
|
||||
});
|
||||
|
||||
|
||||
let prevRoute = null
|
||||
let prevRoute = null;
|
||||
// dynamic change the title when router change
|
||||
router.beforeEach((to, from, next) => {
|
||||
document.title = to.meta.title
|
||||
prevRoute = from
|
||||
next()
|
||||
})
|
||||
document.title = to.meta.title;
|
||||
prevRoute = from;
|
||||
next();
|
||||
});
|
||||
|
||||
export {router, prevRoute};
|
||||
export { router, prevRoute };
|
||||
|
||||
@ -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>
|
||||
Loading…
Reference in New Issue
Block a user