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-12 16:37:07 +08:00
parent 43a2e17a80
commit 3efdbfc662
547 changed files with 23001 additions and 28169 deletions
Download Patch File Download Diff File Expand all files Collapse all files

240
pages/passport/login.vue
View File

@@ -15,17 +15,17 @@
<el-tabs v-model="activeName" class="demo-tabs ">
<el-tab-pane label="账号登录" name="account">
<div class="custom-style my-4">
<el-form :model="form" :rules="rules" ref="ruleForm" label-width="auto" class="w-[330px]">
<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 prop="username">
<el-form-item>
<el-input class="w-full" size="large" placeholder="登录账号" :prefix-icon="Avatar" v-model="form.username" />
</el-form-item>
<el-form-item prop="password">
<el-form-item>
<el-input type="password" size="large" maxlength="100" placeholder="登录密码" :prefix-icon="Briefcase" v-model="form.password" />
</el-form-item>
<el-form-item prop="code">
<el-form-item>
<el-space class="flex justify-between w-full">
<el-input size="large" placeholder="图形验证码" maxlength="5" v-model="form.code" @keyup.enter.prevent="onSubmit" />
<el-image alt="" :src="captcha" @click="changeCaptcha" />
@@ -43,13 +43,13 @@
</el-tab-pane>
<el-tab-pane label="短信登录" name="sms">
<div class="custom-style my-4">
<el-form :model="form" :rules="rules" ref="ruleForm" label-width="auto" class="w-[330px]">
<el-form-item prop="phone">
<el-form :model="form" label-width="auto" class="w-[330px]">
<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 prop="code">
<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">
@@ -80,18 +80,18 @@
<!-- 注册界面 -->
<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">
<div class="custom-style ">
<el-form :model="form" :rules="rules" ref="ruleForm" label-width="auto" class="w-[330px]">
<el-form-item prop="phone">
<span class="text-sm text-gray-400 mb-4">
未注册手机号验证通过后将自动注册
</span>
<el-tab-pane label="手机号注册" name="sms">
<span class="text-sm text-gray-400">
未注册手机号验证通过后将自动注册
</span>
<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="11" placeholder="请输入手机号码" v-model="form.phone">
<template #prepend>+86</template>
</el-input>
</el-form-item>
<el-form-item prop="code">
<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" />
<el-button size="large" class="w-full" :disabled="!!countdownTime" @click="checkUser">
@@ -100,12 +100,6 @@
</el-button>
</el-space>
</el-form-item>
<el-form-item prop="companyName">
<el-input class="w-full" size="large" placeholder="企业名称" v-model="form.companyName" />
</el-form-item>
<el-form-item prop="email">
<el-input class="w-full" size="large" placeholder="邮箱地址" v-model="form.email" />
</el-form-item>
<el-form-item>
<el-checkbox v-model="form.isAgree">我已阅读并同意</el-checkbox>
<a href="#" class="text-gray-700">《用户协议》</a>
@@ -118,41 +112,41 @@
</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>-->
<!-- </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>
</el-form>
</div>
</el-tab-pane>
</el-tabs>
</el-space>
</el-card>
@@ -163,13 +157,11 @@ 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 type {FormInstance, FormRules, UploadProps, UploadUserFile} from 'element-plus'
import { Shop, Key, Avatar, Briefcase } 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 type {ShopMerchantApply} from "~/api/shop/shopMerchantApply/model";
import {useClientRequest} from "~/composables/useClientRequest";
import {getCaptcha, sendSmsCaptcha} from "~/api/passport/login";
// 配置信息
const runtimeConfig = useRuntimeConfig();
@@ -177,7 +169,6 @@ const website = useWebsite();
const config = useConfigInfo();
const token = useToken();
const user = useUser();
const formRef = ref<FormInstance>()
const activeName = ref('account')
@@ -196,20 +187,14 @@ const countdownTime = ref(0);
// 验证码倒计时定时器
let countdownTimer: number | null = null;
if(getIdBySpm(0) == 'register'){
loginBar.value = false;
}
// 配置信息
const { form,assignFields, resetFields } = useFormData<User>({
const { form } = useFormData<User>({
userId: undefined,
companyName: undefined,
email: undefined,
username: undefined,
phone: undefined,
password: undefined,
code: undefined,
smsCode: undefined,
username: '',
phone: '',
password: '',
code: '',
smsCode: '',
isAgree: false,
remember: true,
isSuperAdmin: true
@@ -236,33 +221,6 @@ const checkUser = async () => {
}
};
// 验证规则
const rules = reactive<FormRules<User>>({
phone: [
{required: true, message: '请输入手机号码', trigger: 'blur'},
{pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号码', trigger: 'blur'},
],
password: [
{required: true, message: '请输入密码', trigger: 'blur'},
],
code: [
{required: true, message: '请输入验证码', trigger: 'blur'},
],
smsCode: [
{required: true, message: '请输入短信验证码', trigger: 'blur'},
],
username: [
{required: true, message: '请输入用户名', trigger: 'blur'},
],
companyName: [
{required: true, message: '请输入公司名称', trigger: 'blur'},
],
email: [
{required: true, message: '请输入邮箱', trigger: 'blur'},
{pattern: /^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/, message: '请输入正确的邮箱', trigger: 'blur'},
]
})
/* 发送短信验证码 */
const sendCode = async () => {
@@ -273,10 +231,9 @@ const sendCode = async () => {
imgCode.value = text.value;
codeLoading.value = true;
const {data: smsCode } = await useServerRequest<ApiResult<CaptchaResult>>('/sendSmsCaptcha',{baseURL: runtimeConfig.public.apiServer,method: "post",body: {
sendSmsCaptcha({
phone: form.phone
}});
if(smsCode.value?.code == 0){
}).then(res => {
codeLoading.value = false;
countdownTime.value = 30;
// 开始对按钮进行倒计时
@@ -287,10 +244,9 @@ const sendCode = async () => {
}
countdownTime.value--;
}, 1000);
}
if(smsCode.value?.code != 0){
ElMessage.error(smsCode.value?.message);
}
}).catch(msg => {
ElMessage.error(msg)
})
};
const navigateTo = (url: string) => {
@@ -298,24 +254,19 @@ const navigateTo = (url: string) => {
}
const onLoginBar = () => {
// if(loginBar.value){
// return navigateTo(`/passport/register`)
// }
loginBar.value = !loginBar.value
activeName.value = loginBar.value ? 'account' : 'sms'
}
/* 获取图形验证码 */
const changeCaptcha = async () => {
const {data: captchaInfo } = await useServerRequest<ApiResult<CaptchaResult>>('/captcha',{baseURL: runtimeConfig.public.apiServer});
const captchaData = captchaInfo.value?.data
if(captchaData){
getCaptcha().then(captchaData => {
captcha.value = captchaData.base64;
text.value = captchaData.text;
}
// 已经登录跳转首页
if(token.value && token.value.length > 0){
navigateTo('/user')
return;
}
})
};
@@ -328,19 +279,7 @@ useHead({
* 执行登录
*/
const onSubmit = async () => {
if(!form.username){
ElMessage.error('请填登录账号')
return;
}
if(!form.password){
ElMessage.error('请填密码')
return;
}
if(!form.code){
ElMessage.error('请填验证码')
return;
}
const {data: response} = await useServerRequest<ApiResult<LoginResult>>('/login',{baseURL: runtimeConfig.public.apiServer,method: "post",body: form})
const {data: response} = await useServerRequest<ApiResult<LoginResult>>('/login',{baseURL: 'https://server.gxwebsoft.com/api',method: "post",body: form})
// 登录成功
if(response.value?.code == 0){
ElMessage.success(response.value?.message)
@@ -356,14 +295,6 @@ const onSubmit = async () => {
* 短信验证码登录
*/
const onSubmitBySms = async () => {
if(!form.phone){
ElMessage.error('请填手机号码')
return;
}
if(!form.code){
ElMessage.error('请填验证码')
return;
}
const {data: response} = await useServerRequest<ApiResult<LoginResult>>('/loginBySms',{baseURL: runtimeConfig.public.apiServer,method: "post",body: {
phone: form.phone,
code: form.code,
@@ -384,28 +315,12 @@ const onSubmitBySms = async () => {
* 账号密码注册
*/
const onRegister = async () => {
if(!form.phone){
ElMessage.error('请填手机号码')
return;
}
if(!form.companyName){
ElMessage.error('请填写企业名称')
return;
}
if(!form.code){
ElMessage.error('请填验证码')
return;
}
if(!form.email){
ElMessage.error('请填邮箱')
return;
}
const loading = ElLoading.service({
lock: true,
text: 'Loading'
})
await useClientRequest<ApiResult<LoginResult>>('/register',{method: "post",body: {
companyName: form.companyName,
companyName: '应用名称',
username: form.phone,
phone: form.phone,
password: form.password,
@@ -471,21 +386,4 @@ changeCaptcha();
color: #606266;
font-size: 18px;
}
/* 改变激活标签的颜色 */
//.el-tabs__item.is-active {
// color: #cf1313;
//}
//
///* 改变标签边界的颜色 */
//.el-tabs__item:not(.is-disabled):focus,
//.el-tabs__item:not(.is-disabled):hover {
// border-color: #cf1313;
//}
//
///* 改变标签栏指示器的颜色 */
//.el-tabs--top .el-tabs__active-bar,
//.el-tabs--bottom .el-tabs__active-bar {
// background: #cf1313;
//}
</style>