gxwebsoft/template-10490
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

新版本官网优化完成

Browse Source
This commit is contained in:
赵忠林
2025-02-15 02:53:56 +08:00
parent 3e84bbba59
commit 4c601b31a2
55 changed files with 3046 additions and 915 deletions
Download Patch File Download Diff File Expand all files Collapse all files

179
pages/passport/login.vue
View File

@@ -3,24 +3,21 @@
<div class="flash">
</div>
<el-card class="m-5 w-screen-sm sm:w-[430px] sm:h-[520px] flex justify-around relative border-0" style="border: 0;">
<div class="login-bar absolute top-0 right-0 cursor-pointer" @click="onLoginBar">
<el-card class="m-5 w-screen-sm sm:w-[420px] sm:h-[450px] flex justify-around relative border-0" style="border: 0;">
<div class="login-bar absolute top-0 right-0 cursor-pointer">
<div class="go-to-register cursor-pointer">
<img src="https://img.alicdn.com/imgextra/i3/O1CN01yz6fEl1MwaRtkJyvf_!!6000000001499-55-tps-70-70.svg" alt=""/>
<img src="/assets/images/O1CN01yz6fEl1MwaRtkJyvf_!!6000000001499-55-tps-70-70.svg" alt=""/>
</div>
<span class="absolute top-3 right-1.5 text-sm text-white font-bold cursor-pointer">{{ loginBar ? '注册' : '登录' }}</span>
<span class="absolute top-3.5 right-2 text-sm text-white font-bold cursor-pointer"><el-icon size="20"><FullScreen /></el-icon></span>
</div>
<!-- 登录界面 -->
<el-space class="tabs pt-5 text-xl flex justify-center" v-if="loginBar">
<el-tabs v-model="activeName" class="demo-tabs ">
<el-tab-pane label="账号登录" name="account">
<el-space class="tabs pt-3 text-xl flex justify-center" v-if="loginBar">
<el-tabs v-model="activeName" class="">
<el-tab-pane label="密码登录" name="account">
<div class="custom-style my-4">
<el-form :model="form" label-width="auto" class="w-[330px]">
<!-- <el-form-item>-->
<!-- <el-input class="w-full" size="large" placeholder="租户ID" :prefix-icon="Shop" v-model="form.tenantId" />-->
<!-- </el-form-item>-->
<el-form-item>
<el-input class="w-full" size="large" placeholder="登录账号" :prefix-icon="Avatar" v-model="form.username" />
<el-input class="w-full" size="large" placeholder="登录账号" maxlength="20" :prefix-icon="Avatar" v-model="form.username" />
</el-form-item>
<el-form-item>
<el-input type="password" size="large" maxlength="100" placeholder="登录密码" :prefix-icon="Briefcase" v-model="form.password" />
@@ -67,20 +64,15 @@
</el-tabs>
</el-space>
<!-- 快捷登录 --->
<template v-if="loginBar && activeName == 'account'">
<!-- <div class="clearfix flex justify-center">-->
<!-- <el-divider>-->
<!-- <span class="text-gray-400">其他登录方式</span>-->
<!-- </el-divider>-->
<!-- </div>-->
<!-- <div class="clearfix flex justify-center">-->
<!-- <el-button circle :icon="ElIconUserFilled"></el-button>-->
<!-- </div>-->
<template v-if="loginBar">
<div class="clearfix flex justify-center">
<nuxt-link to="/passport/login?type=register"><span class="text-sm text-blue-400">免费注册</span></nuxt-link>
</div>
</template>
<!-- 注册界面 -->
<el-space class="tabs pt-5 text-xl flex justify-center" v-if="!loginBar">
<el-tabs v-model="activeName" class="demo-tabs ">
<el-tab-pane label="手机号注册" name="sms">
<el-space class="tabs pt-3 text-xl flex justify-center" v-if="!loginBar">
<el-tabs v-model="activeName">
<el-tab-pane label="手机号注册" name="account">
<span class="text-sm text-gray-400">
未注册手机号验证通过后将自动注册
</span>
@@ -104,46 +96,13 @@
<el-checkbox v-model="form.isAgree">我已阅读并同意</el-checkbox>
<a href="#" class="text-gray-700">《用户协议》</a>
<a href="#" class="text-gray-700">《隐私政策》</a>
<a href="#" class="text-gray-700">《产品服务协议》</a>
</el-form-item>
<el-form-item>
<el-button type="primary" size="large" class="w-full" :disabled="!form.isAgree" @click="onRegister">注册</el-button>
</el-form-item>
</el-form>
</div>
</el-tab-pane>
<el-tab-pane label="账号密码注册" name="account">
<div class="custom-style my-4">
<el-form :model="form" label-width="auto" class="w-[330px]">
<el-form-item>
<el-input class="w-full" size="large" maxlength="30" placeholder="登录账号" v-model="form.username" />
</el-form-item>
<el-form-item>
<el-input type="password" size="large" maxlength="30" placeholder="登录密码" v-model="form.password" />
</el-form-item>
<el-form-item>
<el-input class="w-full" size="large" maxlength="11" placeholder="请输入手机号码" v-model="form.phone">
<template #prepend>+86</template>
</el-input>
</el-form-item>
<el-form-item>
<el-space class="flex justify-between w-full">
<el-input size="large" placeholder="短信验证码" maxlength="6" class="w-full" v-model="form.code" @keyup.enter.prevent="onSubmitBySms" />
<el-button size="large" class="w-full" :disabled="!!countdownTime" @click="checkUser">
<span v-if="!countdownTime">发送验证码</span>
<span v-else>已发送 {{ countdownTime }} s</span>
</el-button>
</el-space>
</el-form-item>
<el-form-item>
<el-checkbox v-model="form.isAgree">我已阅读并同意</el-checkbox>
<a href="#" class="text-gray-700">《用户协议》</a>
<a href="#" class="text-gray-700">《隐私政策》</a>
<a href="#" class="text-gray-700">《产品服务协议》</a>
</el-form-item>
<el-form-item>
<el-button type="primary" size="large" class="w-full" :disabled="!form.isAgree" @click="onRegister">注册</el-button>
</el-form-item>
<div class="clearfix flex justify-center">
<nuxt-link to="/passport/login"><span class="text-sm text-blue-400">已有账号，立即登录</span></nuxt-link>
</div>
</el-form>
</div>
</el-tab-pane>
@@ -157,14 +116,15 @@ import {useConfigInfo, useToken, useUser, useWebsite} from "~/composables/config
import useFormData from '@/utils/use-form-data';
import type { User } from '@/api/system/user/model';
import { ref } from 'vue'
import { Shop, Key, Avatar, Briefcase } from '@element-plus/icons-vue'
import { Shop, Key, Avatar, Briefcase, FullScreen } from '@element-plus/icons-vue'
import {useServerRequest} from "~/composables/useServerRequest";
import type {ApiResult} from "~/api";
import type {CaptchaResult, LoginResult} from "~/api/passport/login/model";
import {getCaptcha, sendSmsCaptcha} from "~/api/passport/login";
import {getCaptcha, loginBySms, register, sendSmsCaptcha} from "~/api/passport/login";
// 配置信息
const runtimeConfig = useRuntimeConfig();
const route = useRoute();
const website = useWebsite();
const config = useConfigInfo();
const token = useToken();
@@ -295,20 +255,17 @@ const onSubmit = async () => {
* 短信验证码登录
*/
const onSubmitBySms = async () => {
const {data: response} = await useServerRequest<ApiResult<LoginResult>>('/loginBySms',{baseURL: runtimeConfig.public.apiServer,method: "post",body: {
phone: form.phone,
code: form.code,
isSuperAdmin: true
}})
// 登录成功
if(response.value?.code == 0){
ElMessage.success(response.value?.message)
await doLogin(response.value.data)
}
if(response.value?.code != 0){
ElMessage.error(response.value?.message)
await changeCaptcha()
}
loginBySms({
phone: form.phone,
code: form.code,
isSuperAdmin: true
}).then(response => {
ElMessage.success('登录成功')
doLogin(response)
}).catch(() => {
ElMessage.error('验证码错误')
changeCaptcha()
})
}
/**
@@ -319,31 +276,47 @@ const onRegister = async () => {
lock: true,
text: 'Loading'
})
await useClientRequest<ApiResult<LoginResult>>('/register',{method: "post",body: {
companyName: '应用名称',
username: form.phone,
phone: form.phone,
password: form.password,
code: form.code,
email: form.email,
isSuperAdmin: true
}}).then(response => {
// 登录成功
if(response?.code == 0){
register({
companyName: '应用名称',
username: form.phone,
phone: form.phone,
password: form.password,
code: form.code,
email: form.email,
isSuperAdmin: true
}).then(response => {
loading.close();
ElMessage.success(response?.message)
doLogin(response.data)
}
if(response?.code != 0){
loading.close;
ElMessage.error(response?.message)
changeCaptcha()
}
ElMessage.success('注册成功')
doLogin(response)
}).catch(() => {
loading.close();
}).finally(() => {
loading.close();
})
// await useClientRequest<ApiResult<LoginResult>>('/register',{method: "post",body: {
// companyName: '应用名称',
// username: form.phone,
// phone: form.phone,
// password: form.password,
// code: form.code,
// email: form.email,
// isSuperAdmin: true
// }}).then(response => {
// // 登录成功
// if(response?.code == 0){
// loading.close();
// ElMessage.success(response?.message)
// doLogin(response.data)
// }
// if(response?.code != 0){
// loading.close;
// ElMessage.error(response?.message)
// changeCaptcha()
// }
// }).catch(() => {
// loading.close();
// }).finally(() => {
// loading.close();
// })
}
@@ -366,14 +339,26 @@ const doLogin = async (data: any) => {
localStorage.setItem('UserId',data.user.userId);
localStorage.setItem('Avatar',data.user.avatar);
localStorage.setItem('TID_ADMIN',data.user.tenantId);
// localStorage.setItem('TenantId',data.user.tenantId);
}
setTimeout(() => {
navigateTo('/')
return;
},500)
}
changeCaptcha();
watch(
() => route.query.type,
(type) => {
loginBar.value = true
activeName.value = 'account'
if(type == 'register'){
loginBar.value = false
}
},
{ immediate: true }
);
</script>
<style lang="less">
.login{