优化登录页面问题

This commit is contained in:
BianLzhaoMin 2024-05-30 18:04:30 +08:00
parent eae0491788
commit 05f15fcd5d
11 changed files with 110 additions and 86 deletions

View File

@ -5,5 +5,5 @@ VUE_APP_TITLE = 施工装备管理系统
ENV = 'production'
# 若依管理系统/生产环境
VUE_APP_BASE_API = '/sgzbgl-api'
VUE_APP_BASE_API = '/gl/dev-api'

BIN
sgzb-ui/dist01.rar Normal file

Binary file not shown.

View File

@ -6,7 +6,7 @@
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="renderer" content="webkit">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<link rel="icon" href="/favicon.ico">
<link rel="icon" href="favicon.ico">
<title>
<%= webpackConfig.name %>
</title>

View File

@ -107,6 +107,7 @@ export default {
// location.href = '/gl/login';
location.href = process.env.NODE_ENV === 'production' ? '/sgzbgl/login' : '/login'
// next({ path: process.env.NODE_ENV === 'production' ? '/gl/login' : '/login' })
})
})
.catch(() => {})

View File

@ -37,6 +37,7 @@ router.beforeEach((to, from, next) => {
// next({ path: '/gl/login' })
next({ path: process.env.NODE_ENV === 'production' ? '/sgzbgl/login' : '/login' })
// next({ path: process.env.NODE_ENV === 'production' ? '/gl/login' : '/login' })
})
})
} else {

View File

@ -207,6 +207,7 @@ export default new Router({
scrollBehavior: () => ({ y: 0 }),
routes: constantRoutes,
base: process.env.NODE_ENV === 'production' ? '/sgzbgl' : ''
// base: process.env.NODE_ENV === 'production' ? '/gl' : ''
})

View File

@ -5,7 +5,7 @@
// const qrUrl = 'https://z.csgmall.com.cn/gl/qrCode/qrCodePage?qrCode='; //南网
const qrUrl = process.env.NODE_ENV === 'production' ? 'https://test-cc.zhgkxt.com/qrCode/qrCodePage?qrCode=' : 'http://192.168.0.14:18866/qrCode/qrCodePage?qrCode='
const qrUrl = process.env.NODE_ENV === 'production' ? 'https://test-cc.zhgkxt.com/sgzbgl/qrCode/qrCodePage?qrCode=' : 'http://192.168.0.14:18866/qrCode/qrCodePage?qrCode='
export default {
qrUrl,
}

View File

@ -91,6 +91,7 @@ service.interceptors.response.use(res => {
// location.href = '/gl/login';
location.href = process.env.NODE_ENV === 'production' ? '/sgzbgl/login' : '/login'
// location.href = process.env.NODE_ENV === 'production' ? '/gl/login' : '/login'
})
}).catch(() => {
isRelogin.show = false;

View File

@ -6,7 +6,13 @@
<el-tabs v-model="activeName" style="width: 400px; padding: 25px 25px 5px 25px">
<el-tab-pane label="账号登录" name="account">
<!-- 账户密码登录 -->
<el-form ref="loginForm" :model="loginForm" :rules="loginRules" class="login-form">
<el-form
ref="loginForm"
:model="loginForm"
:rules="loginRules"
class="login-form"
v-if="activeName === 'account'"
>
<el-form-item prop="username">
<el-input v-model="loginForm.username" type="text" auto-complete="off" placeholder="账号">
<svg-icon slot="prefix" icon-class="user" class="el-input__icon input-icon" />
@ -34,7 +40,7 @@
<div
class="login-code-img"
style="border: 1px solid rgb(220, 223, 230)"
v-show="showNew === 1"
v-if="showNew === 1"
@click="getTextCodeNew"
>
获取验证码
@ -45,7 +51,7 @@
<div
class="login-code-img"
style="border: 1px solid rgb(220, 223, 230)"
v-show="showNew === 3"
v-if="showNew === 3"
@click="getTextCodeNew"
>
重发
@ -85,54 +91,30 @@
</el-tab-pane>
<el-tab-pane label="手机登录" name="phone">
<!-- 手机验证码登录 -->
<el-form ref="phoneLoginFormRef" :model="phoneLoginParams" :rules="phoneLoginRules" class="login-form">
<el-form
ref="phoneLoginFormRef"
:model="phoneLoginParams"
:rules="phoneLoginRules"
class="login-form"
v-if="activeName === 'phone'"
>
<el-form-item prop="phone">
<el-input
v-model="phoneLoginParams.phone"
type="text"
:readonly="readonlyFlag"
@focus="handleInputClick"
auto-complete="off"
placeholder="手机号"
>
<svg-icon slot="prefix" icon-class="phone" class="el-input__icon input-icon" />
</el-input>
</el-form-item>
<!-- 5.27 新增发送短信验证时 增加图形验证码校验 暂时注释 因为放在表单内显得暧昧 先模仿南网注册页面使用弹框提示图形验证码 -->
<!-- <el-form-item
prop="code"
v-if="captchaEnabled"
class="code-container"
>
<el-input
v-model="phoneLoginParams.code"
auto-complete="off"
placeholder="图形验证码"
@keyup.enter.native="textLogin"
style="width: 63%"
>
<svg-icon
slot="prefix"
icon-class="validCode"
class="el-input__icon input-icon"
/>
</el-input>
<div class="login-code">
<img
:src="phoneCodeUrl"
@click="getCode(2)"
class="login-code-img"
style="width: 100%"
/>
</div>
</el-form-item> -->
<el-form-item prop="textCode" class="code-container">
<el-input
v-model="phoneLoginParams.textCode"
auto-complete="off"
placeholder="短信验证码"
style="width: 63%"
@focus="handleInputClick"
@input="inputChangeTextCode"
>
<svg-icon slot="prefix" icon-class="validCode" class="el-input__icon input-icon" />
</el-input>
@ -142,18 +124,18 @@
class="login-code-img"
style="border: 1px solid rgb(220, 223, 230)"
v-show="show === 1"
@click="getTextCode"
@click.prevent="getTextCode"
>
获取验证码
</div>
<div class="login-code-img" style="border: 1px solid rgb(220, 223, 230)" v-show="show === 2">
<div class="login-code-img" style="border: 1px solid rgb(220, 223, 230)" v-if="show === 2">
{{ count }} s
</div>
<div
class="login-code-img"
style="border: 1px solid rgb(220, 223, 230)"
v-show="show === 3"
@click="getTextCode"
v-if="show === 3"
@click.prevent="getTextCode"
>
重发
</div>
@ -272,10 +254,6 @@ export default {
textCode: '',
uuid: '',
},
//
phoneLoginParams: {
code: '',
},
//
loginRules: {
username: [
@ -376,8 +354,17 @@ export default {
activeName: {
handler(newVal) {
// this.$refs['loginForm'].clearValidate()
this.resetForm('loginForm')
this.resetForm('phoneLoginFormRef')
// this.$refs['phoneLoginFormRef'].clearValidate()
if (newVal) {
console.log(this.phoneLoginParams.phone, ' this.phoneLoginParams.phone ', this.phoneLoginParams.textCode)
this.phoneLoginParams.phone = ''
this.phoneLoginParams.textCode = ''
this.loginForm.username = ''
this.loginForm.password = ''
this.loginForm.textCode = ''
this.loginForm.code = ''
}
//
if (newVal === 'account') {
this.getCode(1)
@ -410,6 +397,12 @@ export default {
this.getCookie()
},
methods: {
inputChangePhone() {
this.$forceUpdate()
},
inputChangeTextCode() {
this.$forceUpdate()
},
getCode(type) {
getCodeImg().then(res => {
/* 根据 type 判断当前获取的图形验证码如何赋值 1 账号登录 2 手机验证码登录 */
@ -434,7 +427,7 @@ export default {
},
//
getTextCode() {
this.$refs.phoneLoginFormRef.validateField('phone', valid => {
this.$refs.phoneLoginFormRef.validateField(['phone'], valid => {
if (!valid) {
this.getCode(2)
this.dialogCodeVisible = true
@ -444,13 +437,8 @@ export default {
// admin
getTextCodeNew() {
this.getCode(3)
this.dialogCodeVisibleNew = true
},
submitSendCodeNew() {
this.$refs.phoneLoginCodeFormNewRef.validate(valid => {
if (valid) {
// this.getCode(3)
// this.dialogCodeVisibleNew = true
this.phoneLoginParamsNew.username = this.loginForm.username
sendCodeNew(this.phoneLoginParamsNew)
.then(res => {
@ -476,10 +464,40 @@ export default {
.catch(err => {
console.log(err)
})
}
})
},
// submitSendCodeNew() {
// this.$refs.phoneLoginCodeFormNewRef.validate(valid => {
// if (valid) {
// this.phoneLoginParamsNew.username = this.loginForm.username
// sendCodeNew(this.phoneLoginParamsNew)
// .then(res => {
// if (res.code == 200) {
// this.$modal.msgSuccess('')
// const TIME_COUNT = 60
// if (!this.timerNew) {
// this.countNew = TIME_COUNT
// this.showNew = 2
// this.timerNew = setInterval(() => {
// if (this.countNew > 0 && this.countNew <= TIME_COUNT) {
// this.countNew--
// } else {
// this.showNew = 3
// clearInterval(this.timerNew)
// this.timerNew = null
// }
// }, 1000)
// }
// this.dialogCodeVisibleNew = false
// }
// })
// .catch(err => {
// console.log(err)
// })
// }
// })
// },
/* 图形验证码弹框中确定按钮 */
submitSendCode() {
this.$refs.phoneLoginCodeFormRef.validate(valid => {

View File

@ -100,7 +100,8 @@ export default {
// location.href = '/login';
// location.href = '/gl/login';
location.href = process.env.NODE_ENV === 'production-nw' ? '/sgzbgl/login' : '/login'
location.href = process.env.NODE_ENV === 'production' ? '/sgzbgl/login' : '/login'
// location.href = process.env.NODE_ENV === 'production-nw' ? '/gl/login' : '/login'
})
})
}
@ -111,7 +112,8 @@ export default {
// location.href = '/login';
// location.href = '/gl/login';
location.href = process.env.NODE_ENV === 'production-nw' ? '/sgzbgl/login' : '/login'
location.href = process.env.NODE_ENV === 'production' ? '/sgzbgl/login' : '/login'
// location.href = process.env.NODE_ENV === 'production-nw' ? '/gl/login' : '/login'
})
},
},

View File

@ -19,7 +19,7 @@ module.exports = {
// 部署生产环境和开发环境下的URL。
// 默认情况下Vue CLI 会假设你的应用是被部署在一个域名的根路径上
// 例如 https://www.ruoyi.vip/。如果应用被部署在一个子路径上,你就需要用这个选项指定这个子路径。例如,如果你的应用被部署在 https://www.ruoyi.vip/admin/,则设置 baseUrl 为 /admin/。
publicPath: process.env.NODE_ENV === 'production' ? '/' : '/', ///gl/
publicPath: process.env.NODE_ENV === 'production' ? '/gl' : '/', ///gl/
// 在npm run build 或 yarn build 时 生成文件的目录名称要和baseUrl的生产环境路径一致默认dist
outputDir: 'dist',
// 用于放置生成的静态资源 (js、css、img、fonts) 的;(项目打包之后,静态资源会放在这个文件夹下)