bonus
/
bonus-ui
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

登录页

This commit is contained in:
bb_pan 2026-01-29 16:08:59 +08:00
parent 92b93e506b
commit 06570e3e07
4 changed files with 317 additions and 39 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
src/assets/images/bg-e.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 126 KiB

BIN
src/assets/images/ipt-tip.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 654 B

BIN
src/assets/images/logo-home-bl.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 119 KiB

356
src/views/login1.vue
View File

@ -2,9 +2,39 @@
<div class="container">
<div class="login" v-if="!isIws">
<div class="login-form">
<el-form ref="loginForm" :model="loginForm" :rules="loginRules" class="login-form">
<h3 class="title">机械化施工装备管理（共享）平台</h3>
<el-form ref="loginForm" :model="loginForm" :rules="loginRules" class="form-box">
<!-- <h3 class="title">机械化施工装备管理（共享）平台</h3> -->
<h3>
<img src="@/assets/images/logo-home-bl.png" style="width: 250px; height: 50px; cursor: pointer" />
</h3>
<template v-if="loginMethod === 'password'">
<el-form-item>
<div @click.stop="focusUnit">
<el-input v-model="unitName" readonly placeholder="点击请选择单位">
<div slot="prefix" class="icon-box">
<img src="@/assets/images/ipt-tip.png" style="width: 15; height: 15px" alt="" />
</div>
</el-input>
</div>
<div class="company-box" v-if="showUnitBox" ref="companyBox" @click.stop>
<ul class="tab-list">
<li class="tab-item" :class="{ 'is-active': isActive == 1 }" @click="handleActive(1)">
总分部/直属单位
</li>
<li class="tab-item" :class="{ 'is-active': isActive == 2 }" @click="handleActive(2)">
省（市）公司
</li>
<li class="tab-item" :class="{ 'is-active': isActive == 3 }" @click="handleActive(3)"> 外部单位 </li>
</ul>
<div class="department-warp">
<ul class="ul-list">
<li class="list-item" v-for="(item, index) in unitList" :key="index" @click="handleLi(item.value)">
{{ item.value }}
</li>
</ul>
</div>
</div>
</el-form-item>
<el-form-item prop="username">
<el-input
v-model="loginForm.username"
@ -14,7 +44,7 @@
config.loginConfig.emailPassword ? '/邮箱' : ''
}`"
>
<svg-icon slot="prefix" icon-class="user" class="el-input__icon input-icon"/>
<!-- <svg-icon slot="prefix" icon-class="user" class="el-input__icon input-icon"/> -->
</el-input>
</el-form-item>
<el-form-item prop="password">
@ -25,7 +55,7 @@
placeholder="密码"
@keyup.enter.native="handleLogin"
>
<svg-icon slot="prefix" icon-class="password" class="el-input__icon input-icon"/>
<!-- <svg-icon slot="prefix" icon-class="password" class="el-input__icon input-icon"/> -->
</el-input>
</el-form-item>
<el-form-item prop="code" v-if="captchaEnabled">
@ -36,10 +66,10 @@
style="width: 63%"
@keyup.enter.native="handleLogin"
>
<svg-icon slot="prefix" icon-class="validCode" class="el-input__icon input-icon"/>
<svg-icon slot="prefix" icon-class="validCode" class="el-input__icon input-icon" />
</el-input>
<div class="login-code">
<img :src="codeUrl" @click="getCode" class="login-code-img"/>
<img :src="codeUrl" @click="getCode" class="login-code-img" />
</div>
</el-form-item>
<el-form-item v-show="isAdmin" prop="verificationCode">
@ -54,7 +84,7 @@
{{ countdown === 0 ? '获取验证码' : `${countdown}s` }}
</el-button>
</template>
<svg-icon slot="prefix" icon-class="message" class="el-input__icon input-icon"/>
<svg-icon slot="prefix" icon-class="message" class="el-input__icon input-icon" />
</el-input>
</el-form-item>
</template>
@ -68,7 +98,7 @@
config.loginConfig.emailCode ? '邮箱' : ''
}`"
>
<svg-icon slot="prefix" icon-class="user" class="el-input__icon input-icon"/>
<svg-icon slot="prefix" icon-class="user" class="el-input__icon input-icon" />
</el-input>
</el-form-item>
<el-form-item prop="code" v-if="captchaEnabled">
@ -79,10 +109,10 @@
style="width: 63%"
@keyup.enter.native="handleLogin"
>
<svg-icon slot="prefix" icon-class="validCode" class="el-input__icon input-icon"/>
<svg-icon slot="prefix" icon-class="validCode" class="el-input__icon input-icon" />
</el-input>
<div class="login-code">
<img :src="codeUrl" @click="getCode" class="login-code-img"/>
<img :src="codeUrl" @click="getCode" class="login-code-img" />
</div>
</el-form-item>
<el-form-item prop="verificationCode">
@ -97,16 +127,16 @@
{{ countdown === 0 ? '获取验证码' : `${countdown}s` }}
</el-button>
</template>
<svg-icon slot="prefix" icon-class="message" class="el-input__icon input-icon"/>
<svg-icon slot="prefix" icon-class="message" class="el-input__icon input-icon" />
</el-input>
</el-form-item>
</template>
<div class="login-form-center">
<!-- <div class="login-form-center">
<el-link v-if="config.loginConfig.emailCode || config.loginConfig.phoneCode" @click="toggleLoginMethod">
{{ loginMethod === 'password' ? '短信登录' : '密码登录' }}
</el-link>
<!-- <el-checkbox v-model="loginForm.rememberMe">记住密码</el-checkbox> -->
</div>
<el-checkbox v-model="loginForm.rememberMe">记住密码</el-checkbox>
</div> -->
<el-form-item style="width: 100%">
<el-button
v-if="!isAdmin"
@ -131,6 +161,21 @@
<span v-else>登 录 中...</span>
</el-button>
</el-form-item>
<el-form-item style="width: 100%; text-align: end">
<span style="color: rgba(0, 0, 0, 0.65); font-size: 14px">忘记密码</span>
</el-form-item>
<el-form-item style="width: 100%">
<div class="btns">
<div class="btn">外部用户注册</div>
<div class="btn">外部单位注册</div>
</div>
</el-form-item>
<el-form-item style="width: 100%">
<div class="btns">
<div class="btn-text">i国网版</div>
<div class="btn-text">小程序版</div>
</div>
</el-form-item>
</el-form>
</div>
</div>
@ -157,6 +202,95 @@ export default {
qq: qq,
codeUrl: '',
isAdmin: false,
showUnitBox: false,
isActive: 1,
unitName: '',
unitList: [],
unitList1: [
{ label: '公司总部', value: '公司总部' },
{ label: '华北分部', value: '华北分部' },
{ label: '华东分部', value: '华东分部' },
{ label: '华中分部', value: '华中分部' },
{ label: '东北分部', value: '东北分部' },
{ label: '西北分部', value: '西北分部' },
{ label: '西南分部', value: '西南分部' },
{ label: '国网国际公司', value: '国网国际公司' },
{ label: '鲁能集团', value: '鲁能集团' },
{ label: '南瑞集团', value: '南瑞集团' },
{ label: '中电装备公司', value: '中电装备公司' },
{ label: '国网新源公司', value: '国网新源公司' },
{ label: '空间技术公司', value: '空间技术公司' },
{ label: '国网物资公司', value: '国网物资公司' },
{ label: '许继集团', value: '许继集团' },
{ label: '平高集团', value: '平高集团' },
{ label: '山东电工电气', value: '山东电工电气' },
{ label: '国网直流中心', value: '国网直流中心' },
{ label: '国网直流公司', value: '国网直流公司' },
{ label: '国网交流公司', value: '国网交流公司' },
{ label: '国网信通中心', value: '国网信通中心' },
{ label: '国网大数据中心', value: '国网大数据中心' },
{ label: '国网客服中心', value: '国网客服中心' },
{ label: '国网综能集团', value: '国网综能集团' },
{ label: '中国电科院', value: '中国电科院' },
{ label: '国网经研院', value: '国网经研院' },
{ label: '国网能源院', value: '国网能源院' },
{ label: '国网智研院', value: '国网智研院' },
{ label: '国网英大集团', value: '国网英大集团' },
{ label: '中国电财', value: '中国电财' },
{ label: '英大财险', value: '英大财险' },
{ label: '英大人寿', value: '英大人寿' },
{ label: '国网党校', value: '国网党校' },
{ label: '英大长安', value: '英大长安' },
{ label: '英大信托', value: '英大信托' },
{ label: '英大证券', value: '英大证券' },
{ label: '英大期货', value: '英大期货' },
{ label: '英大汇通', value: '英大汇通' },
{ label: '英大传媒集团', value: '英大传媒集团' },
{ label: '国网中兴公司', value: '国网中兴公司' },
{ label: '高培中心', value: '高培中心' },
{ label: '国网技术学院', value: '国网技术学院' },
{ label: '服务分公司', value: '服务分公司' },
{ label: '信通产业集团', value: '信通产业集团' },
{ label: '国网车网公司', value: '国网车网公司' },
{ label: '全球能源集团', value: '全球能源集团' },
{ label: '数科控股公司', value: '数科控股公司' },
{ label: '国中康健集团', value: '国中康健集团' },
{ label: '国网融资租赁', value: '国网融资租赁' },
{ label: '国网海外投资', value: '国网海外投资' },
{ label: '国网特高压公司', value: '国网特高压公司' },
{ label: '智芯公司', value: '智芯公司' },
{ label: '国网工研院', value: '国网工研院' },
],
unitList2: [
{ label: '北京电力', value: '北京电力' },
{ label: '天津电力', value: '天津电力' },
{ label: '河北电力', value: '河北电力' },
{ label: '冀北电力', value: '冀北电力' },
{ label: '山西电力', value: '山西电力' },
{ label: '山东电力', value: '山东电力' },
{ label: '上海电力', value: '上海电力' },
{ label: '江苏电力', value: '江苏电力' },
{ label: '浙江电力', value: '浙江电力' },
{ label: '安徽电力', value: '安徽电力' },
{ label: '福建电力', value: '福建电力' },
{ label: '湖北电力', value: '湖北电力' },
{ label: '湖南电力', value: '湖南电力' },
{ label: '河南电力', value: '河南电力' },
{ label: '江西电力', value: '江西电力' },
{ label: '四川电力', value: '四川电力' },
{ label: '重庆电力', value: '重庆电力' },
{ label: '辽宁电力', value: '辽宁电力' },
{ label: '吉林电力', value: '吉林电力' },
{ label: '黑龙江电力', value: '黑龙江电力' },
{ label: '蒙东电力', value: '蒙东电力' },
{ label: '陕西电力', value: '陕西电力' },
{ label: '甘肃电力', value: '甘肃电力' },
{ label: '青海电力', value: '青海电力' },
{ label: '宁夏电力', value: '宁夏电力' },
{ label: '新疆电力', value: '新疆电力' },
{ label: '西藏电力', value: '西藏电力' },
],
unitList3: [{ label: '外部单位', value: '外部单位' }],
loginForm: {
username: '',
password: '',
@ -167,16 +301,16 @@ export default {
uuid: '',
loginType: '',
phoneUuid: '',
mobileCodeType: 'LOGIN'
mobileCodeType: 'LOGIN',
},
passwordLoginRules: {
username: [{ required: true, trigger: 'blur', message: '请输入您的账号' }],
password: [{ required: true, trigger: 'blur', message: '请输入您的密码' }],
code: [{ required: true, trigger: 'change', message: '请输入验证码' }]
code: [{ required: true, trigger: 'change', message: '请输入验证码' }],
},
mobileLoginRules: {
mobile: [{ required: true, trigger: 'blur', message: '请输入您的手机号' }],
verificationCode: [{ required: true, trigger: 'blur', message: '请输入验证码' }]
verificationCode: [{ required: true, trigger: 'blur', message: '请输入验证码' }],
},
loading: false,
captchaEnabled: true,
@ -185,7 +319,7 @@ export default {
countdown: 0,
loginMethod: 'password', // 'password' or 'mobile'
supportsPhoneLogin: false,
supportsEmailLogin: false
supportsEmailLogin: false,
}
},
computed: {
@ -196,22 +330,22 @@ export default {
phonePassword: true,
emailPassword: true,
phoneCode: false,
emailCode: false
emailCode: false,
},
}
) // 获取 JSON 对象
},
loginRules() {
return this.loginMethod === 'password' ? this.passwordLoginRules : this.mobileLoginRules
}
},
},
watch: {
$route: {
handler(route) {
this.redirect = route.query && route.query.redirect
},
immediate: true
}
immediate: true,
},
},
async created() {
const origin = window.location.href
@ -219,12 +353,12 @@ export default {
this.isIws = true
const loading = this.$loading({
lock: true,
text: '登录中'
text: '登录中',
})
try {
const res = await iwsLogin({
ticket: origin.split('ticket=')[1].split('#/')[0] || origin.split('ticket%3D')[1].split('%26')[0],
sysType: 0
sysType: 0,
})
console.log('🚀 ~ created ~ res:', res)
if (res.code == 200) {
@ -242,7 +376,7 @@ export default {
console.log('🚀 ~ created ~ error:', error)
this.$message({
message: '登录失败, 即将关闭页面',
type: 'error'
type: 'error',
})
loading.close()
setTimeout(() => {
@ -282,7 +416,40 @@ export default {
} */
}
},
mounted() {
document.addEventListener('click', this.handleClickOutside)
},
beforeDestroy() {
document.removeEventListener('click', this.handleClickOutside)
},
methods: {
focusUnit() {
this.unitList = this.unitList1
this.showUnitBox = true
console.log('🚀 ~ this.showUnitBox:', this.showUnitBox)
},
handleActive(index) {
if (this.isActive === index) {
return
}
this.isActive = index
this.unitList = index === 1 ? this.unitList1 : index === 2 ? this.unitList2 : this.unitList3
},
handleLi(val) {
console.log('🚀 ~ val:', val)
this.unitName = val
this.showUnitBox = false
},
handleClickOutside(e) {
const box = this.$refs.companyBox
console.log('🚀 ~ box:', box)
if (!box) return
if (!box.contains(e.target)) {
this.showUnitBox = false
}
},
getCode() {
getCodeImg().then((res) => {
this.captchaEnabled = res.captchaEnabled !== undefined ? res.captchaEnabled : true
@ -350,10 +517,10 @@ export default {
if (this.loginForm.rememberMe) {
Cookies.set('username', this.loginForm.username, { expires: 30 })
Cookies.set('password', encrypt(this.loginForm.password), {
expires: 30
expires: 30,
})
Cookies.set('rememberMe', this.loginForm.rememberMe, {
expires: 30
expires: 30,
})
} else {
Cookies.remove('username')
@ -369,7 +536,7 @@ export default {
if (res.isLogin) {
this.$modal
.confirm('账号已在其他地方登录是否继续登录！！！！')
.then(function() {
.then(function () {
return this.$router.push({ path: this.redirect || '/' })
})
.then(() => {
@ -413,7 +580,7 @@ export default {
if (res.data) {
this.$modal
.confirm('账号已在其他地方登录是否继续登录！！！！')
.then(function() {
.then(function () {
return that.handleLogin()
})
.then(() => {
@ -473,8 +640,8 @@ export default {
'请先填写' + this.config.loginConfig.phoneCode
? '手机号'
: '/' + this.config.loginConfig.emailCode
? '邮箱'
: ''
? '邮箱'
: '',
)
return
}
@ -511,8 +678,8 @@ export default {
this.loginForm.loginMethod = ''
this.isAdmin = false
this.getCode()
}
}
},
},
}
</script>
@ -522,8 +689,9 @@ export default {
justify-content: flex-end;
align-items: center;
height: 100%;
background-image: url('../assets/images/bg.png');
background-size: cover;
background-image: url('../assets/images/bg-e.jpg');
background-size: 100% 100%;
// background-size: cover;
}
.login {
@ -541,10 +709,21 @@ export default {
}
.login-form {
border-radius: 6px;
background: #ffffff;
width: 400px;
padding: 25px;
// border-radius: 6px;
// background: #ffffff;
// // width: 400px;
// padding: 25px;
background-color: #fff;
border-radius: 12px;
position: absolute;
left: 55%;
top: 50%;
// padding: 88px 0;
transform: translateY(-50%);
height: 570px;
width: 507px;
// display: flex;
opacity: 0.91;
.el-input {
height: 38px;
@ -569,6 +748,105 @@ export default {
}
}
.form-box {
padding: 58px 90px 0;
.icon-box {
padding-left: 9px;
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
}
.btns {
font-size: 16px;
display: flex;
justify-content: space-between;
.btn {
color: #24b1b6;
border: 1px solid #dfdfdf;
padding: 0 26px;
line-height: 46px;
cursor: pointer;
border-radius: 4px;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
}
.btn-text {
width: 150px;
font-size: 18px;
text-align: center;
color: #24b1b6;
padding: 0 26px;
line-height: 46px;
cursor: pointer;
border-radius: 4px;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
}
}
.company-box {
width: 32rem;
background: #fff;
border-radius: 10px;
position: absolute;
top: 50px;
z-index: 90000;
transition: all 0.8s;
border: 1px solid #bababa;
.tab-list {
overflow: hidden;
border-bottom: 1px solid #d7dbf1;
display: flex;
list-style: none;
padding: 0;
margin: 0;
.tab-item {
font-size: 16px;
font-weight: 500;
line-height: 48px;
margin: 0 18px;
cursor: pointer;
}
.is-active {
color: #2cbab2;
}
}
.department-warp {
width: 100%;
margin-top: 14px;
padding: 0 20px;
height: 254px;
overflow-y: auto;
.ul-list {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-wrap: wrap;
.list-item {
width: 33%;
line-height: 32px;
cursor: pointer;
}
}
}
}
}
.login-tip {
font-size: 13px;
text-align: center;