|
@@ -1,51 +1,36 @@
|
|
|
<template>
|
|
|
<div class="login-container">
|
|
|
- <div style="width:40%;float: left;padding-left: 10%;">
|
|
|
- <h1>欢迎登录</h1>
|
|
|
- <a-form id="formLogin" ref="formLogin" :form="form" class="login-form" @submit="handleSubmit">
|
|
|
- <a-form-item>
|
|
|
- <a-input
|
|
|
- type="text"
|
|
|
- placeholder="用户名"
|
|
|
- class="login-input"
|
|
|
- v-decorator="[
|
|
|
+ <h1>欢迎登录</h1>
|
|
|
+ <a-form id="formLogin" ref="formLogin" :form="form" class="login-form" @submit="handleSubmit">
|
|
|
+ <a-form-item>
|
|
|
+ <a-input type="text" placeholder="用户名" class="login-input" v-decorator="[
|
|
|
'username',
|
|
|
{
|
|
|
rules: [{ required: true, message: '请输入帐户名或邮箱地址' }, { validator: handleUsernameOrEmail }],
|
|
|
validateTrigger: 'change'
|
|
|
}
|
|
|
- ]"
|
|
|
- >
|
|
|
- <template slot="prefix">
|
|
|
- <div class="icon">
|
|
|
- <a-icon type="user" />
|
|
|
- </div>
|
|
|
- </template>
|
|
|
- </a-input>
|
|
|
- </a-form-item>
|
|
|
- <a-form-item>
|
|
|
- <a-input
|
|
|
- type="password"
|
|
|
- autocomplete="false"
|
|
|
- placeholder="请输入密码"
|
|
|
- class="login-input"
|
|
|
- max="6"
|
|
|
- v-decorator="['password', { rules: [{ required: true, message: '请输入密码' }], validateTrigger: 'blur' }]"
|
|
|
- >
|
|
|
- <template slot="prefix">
|
|
|
- <div class="icon">
|
|
|
- <a-icon type="lock" />
|
|
|
- </div>
|
|
|
- </template>
|
|
|
- </a-input>
|
|
|
- </a-form-item>
|
|
|
- <!-- <a-checkbox :checked="remberMe" v-model="remberMe"
|
|
|
- ><span style="color: #00deff; font-size: 14px">记住密码</span></a-checkbox
|
|
|
- > -->
|
|
|
- <a-button class="btn" type="primary" htmlType="submit"> 登录 </a-button>
|
|
|
- </a-form>
|
|
|
- </div>
|
|
|
- <div class="login-three" id="login-three"></div>
|
|
|
+ ]">
|
|
|
+ <template slot="prefix">
|
|
|
+ <div class="icon">
|
|
|
+ <a-icon type="user" />
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </a-input>
|
|
|
+ </a-form-item>
|
|
|
+ <a-form-item>
|
|
|
+ <a-input type="password" autocomplete="false" placeholder="请输入密码" class="login-input" max="6" v-decorator="['password', { rules: [{ required: true, message: '请输入密码' }], validateTrigger: 'blur' }]">
|
|
|
+ <template slot="prefix">
|
|
|
+ <div class="icon">
|
|
|
+ <a-icon type="lock" />
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </a-input>
|
|
|
+ </a-form-item>
|
|
|
+ <!-- <a-checkbox :checked="remberMe" v-model="remberMe"
|
|
|
+ ><span style="color: #00deff; font-size: 14px">记住密码</span></a-checkbox
|
|
|
+ > -->
|
|
|
+ <a-button class="btn" type="primary" htmlType="submit"> 登录 </a-button>
|
|
|
+ </a-form>
|
|
|
</div>
|
|
|
</template>
|
|
|
<script>
|
|
@@ -56,13 +41,10 @@ import { getSmsCaptcha, checkCaptchaCode, getInfo } from '@/api/upms/login'
|
|
|
import { encryptPassword } from '@/common/common'
|
|
|
import cookie from 'vue-cookie'
|
|
|
import BaseTool from '@/utils/tool'
|
|
|
-import * as THREE from 'three'
|
|
|
-import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js'
|
|
|
-import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js'
|
|
|
|
|
|
export default {
|
|
|
components: {
|
|
|
- TwoStepCaptcha
|
|
|
+ TwoStepCaptcha,
|
|
|
},
|
|
|
data() {
|
|
|
return {
|
|
@@ -81,22 +63,21 @@ export default {
|
|
|
loginBtn: false,
|
|
|
// login type: 0 email, 1 username, 2 telephone
|
|
|
loginType: 0,
|
|
|
- smsSendBtn: false
|
|
|
+ smsSendBtn: false,
|
|
|
},
|
|
|
remberMe: null,
|
|
|
password: null,
|
|
|
- // threeJs 涉及变量
|
|
|
- mesh: null,
|
|
|
- camera: null,
|
|
|
- scene: null,
|
|
|
- renderer: null,
|
|
|
- controls: null
|
|
|
}
|
|
|
},
|
|
|
- mounted () {
|
|
|
- this.init()
|
|
|
- },
|
|
|
created() {
|
|
|
+ // get2step({ })
|
|
|
+ // .then(res => {
|
|
|
+ // this.requiredTwoStepCaptcha = res.result.stepCode
|
|
|
+ // })
|
|
|
+ // .catch(() => {
|
|
|
+ // this.requiredTwoStepCaptcha = false
|
|
|
+ // })
|
|
|
+ // this.requiredTwoStepCaptcha = true
|
|
|
// 获取用户名和密码
|
|
|
let username = cookie.get('username')
|
|
|
if (BaseTool.Object.isBlank(username)) {
|
|
@@ -106,12 +87,12 @@ export default {
|
|
|
console.log(username, password, 33333)
|
|
|
this.remberMe = this.getRemberMe()
|
|
|
const {
|
|
|
- form: { setFieldsValue }
|
|
|
+ form: { setFieldsValue },
|
|
|
} = this
|
|
|
this.$nextTick(() => {
|
|
|
setFieldsValue({
|
|
|
username: username,
|
|
|
- password
|
|
|
+ password,
|
|
|
})
|
|
|
})
|
|
|
this.getCaptchaImage()
|
|
@@ -139,7 +120,7 @@ export default {
|
|
|
form: { validateFields },
|
|
|
state,
|
|
|
customActiveKey,
|
|
|
- Login
|
|
|
+ Login,
|
|
|
} = this
|
|
|
|
|
|
state.loginBtn = true
|
|
@@ -154,7 +135,7 @@ export default {
|
|
|
password: values.password ? encryptPassword(values.password) : '',
|
|
|
grant_type: 'password',
|
|
|
scope: 'server',
|
|
|
- loginType: customActiveKey === 'tab1' ? 1 : 2
|
|
|
+ loginType: customActiveKey === 'tab1' ? 1 : 2,
|
|
|
}
|
|
|
// 记住密码的时候直接使用cookie中的密码
|
|
|
if (values.password === cookie.get('password')) {
|
|
@@ -165,8 +146,8 @@ export default {
|
|
|
loginParams[!state.loginType ? 'email' : 'username'] = values.username
|
|
|
// loginParams.password = md5(values.password)
|
|
|
Login(loginParams)
|
|
|
- .then(res => this.loginSuccess(res))
|
|
|
- .catch(err => console.log(err))
|
|
|
+ .then((res) => this.loginSuccess(res))
|
|
|
+ .catch((err) => console.log(err))
|
|
|
.finally(() => {
|
|
|
state.loginBtn = false
|
|
|
this.getCaptchaImage()
|
|
@@ -182,12 +163,12 @@ export default {
|
|
|
e.preventDefault()
|
|
|
const {
|
|
|
form: { validateFields },
|
|
|
- state
|
|
|
+ state,
|
|
|
} = this
|
|
|
|
|
|
validateFields(['mobile', 'captchaCode'], { force: true }, (err, values) => {
|
|
|
if (!err) {
|
|
|
- checkCaptchaCode({ captchaCode: values.captchaCode, randomStr: this.randomStr }).then(res => {
|
|
|
+ checkCaptchaCode({ captchaCode: values.captchaCode, randomStr: this.randomStr }).then((res) => {
|
|
|
const flag = res.data
|
|
|
if (flag) {
|
|
|
state.smsSendBtn = true
|
|
@@ -202,15 +183,15 @@ export default {
|
|
|
|
|
|
const hide = this.$message.loading('验证码发送中..', 0)
|
|
|
getSmsCaptcha({ mobile: values.mobile, captchaCode: values.captchaCode, randomStr: this.randomStr })
|
|
|
- .then(res => {
|
|
|
+ .then((res) => {
|
|
|
setTimeout(hide, 2500)
|
|
|
this.$notification['success']({
|
|
|
message: '提示',
|
|
|
description: '验证码获取成功,您的验证码为:' + res.data,
|
|
|
- duration: 8
|
|
|
+ duration: 8,
|
|
|
})
|
|
|
})
|
|
|
- .catch(err => {
|
|
|
+ .catch((err) => {
|
|
|
setTimeout(hide, 1)
|
|
|
clearInterval(interval)
|
|
|
state.time = 60
|
|
@@ -240,7 +221,7 @@ export default {
|
|
|
setTimeout(() => {
|
|
|
this.$notification.success({
|
|
|
message: '欢迎',
|
|
|
- description: `${timeFix()},欢迎回来`
|
|
|
+ description: `${timeFix()},欢迎回来`,
|
|
|
})
|
|
|
}, 1000)
|
|
|
this.isLoginError = false
|
|
@@ -260,7 +241,7 @@ export default {
|
|
|
this.$notification['error']({
|
|
|
message: '错误',
|
|
|
description: ((err.response || {}).data || {}).message || '请求出现错误,请稍后再试',
|
|
|
- duration: 4
|
|
|
+ duration: 4,
|
|
|
})
|
|
|
},
|
|
|
getCaptchaImage() {
|
|
@@ -283,88 +264,22 @@ export default {
|
|
|
return remberMe === 'true'
|
|
|
}
|
|
|
},
|
|
|
- // 初始化
|
|
|
- init () {
|
|
|
- this.createScene() // 创建场景
|
|
|
- this.loadGLTF() // 加载GLTF模型
|
|
|
- this.createLight() // 创建光源
|
|
|
- this.createCamera() // 创建相机
|
|
|
- this.createRender() // 创建渲染器
|
|
|
- this.createControls() // 创建控件对象
|
|
|
- this.render() // 渲染
|
|
|
- },
|
|
|
- // 创建场景
|
|
|
- createScene () {
|
|
|
- this.scene = new THREE.Scene()
|
|
|
- },
|
|
|
- // 加载GLTF模型
|
|
|
- loadGLTF () {
|
|
|
- const loader = new GLTFLoader()
|
|
|
- loader.load('/models/gltf/工业设备07.gltf', model => {
|
|
|
- this.scene.add(model.scene)
|
|
|
- })
|
|
|
- },
|
|
|
- // 创建光源
|
|
|
- createLight () {
|
|
|
- // 环境光
|
|
|
- const ambientLight = new THREE.AmbientLight(0xffffff) // 创建环境光
|
|
|
- this.scene.add(ambientLight) // 将环境光添加到场景
|
|
|
- // 创建一个平行光
|
|
|
- const directionLight = new THREE.DirectionalLight(0xffffff, 1)
|
|
|
- directionLight.position.set(50, 100, 60)
|
|
|
- this.scene.add(directionLight)
|
|
|
- },
|
|
|
- // 创建相机
|
|
|
- createCamera () {
|
|
|
- const width = window.innerWidth // 窗口宽度
|
|
|
- const height = window.innerHeight // 窗口高度
|
|
|
- const k = width / height // 窗口宽高比
|
|
|
- this.camera = new THREE.PerspectiveCamera(35, k, 1, 800)
|
|
|
- this.camera.position.set(20, 20, 25) // 设置相机位置
|
|
|
- this.camera.lookAt(new THREE.Vector3(0, 0, 0)) // 设置相机方向
|
|
|
- this.scene.add(this.camera)
|
|
|
- },
|
|
|
-
|
|
|
- // 创建渲染器
|
|
|
- createRender () {
|
|
|
- const element = document.getElementById('login-three')
|
|
|
- this.renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true })
|
|
|
- this.renderer.setSize(window.innerWidth/2, 424) // 设置渲染区域尺寸
|
|
|
- //this.renderer.shadowMap.enabled = true // 显示阴影
|
|
|
- //this.renderer.shadowMap.type = THREE.PCFSoftShadowMap
|
|
|
- //this.renderer.setClearColor(0xffffff, 1) // 设置背景颜色
|
|
|
- this.renderer.setClearAlpha(0.0) // 背景透明度值
|
|
|
- element.appendChild(this.renderer.domElement)
|
|
|
- this.renderer.outputEncoding = THREE.sRGBEncoding
|
|
|
- },
|
|
|
- render () {
|
|
|
- this.renderer.render(this.scene, this.camera)
|
|
|
- this.controls.update()
|
|
|
- requestAnimationFrame(this.render)
|
|
|
- },
|
|
|
- // 创建控件对象,并设置自动旋转
|
|
|
- createControls () {
|
|
|
- this.controls = new OrbitControls(this.camera, this.renderer.domElement)
|
|
|
- this.controls.autoRotate = true
|
|
|
- this.controls.autoRotateSpeed = 2.0
|
|
|
- this.controls.dampingFactor = 0.9
|
|
|
- },
|
|
|
- }
|
|
|
+ },
|
|
|
}
|
|
|
</script>
|
|
|
<style lang="less" scoped>
|
|
|
.login-container {
|
|
|
- width: 100%;
|
|
|
+ width: 588px;
|
|
|
height: 624px;
|
|
|
- //background: #ffffff;
|
|
|
+ background: #ffffff;
|
|
|
border-radius: 24px;
|
|
|
opacity: 0.83;
|
|
|
position: absolute;
|
|
|
- //left: 10%;
|
|
|
+ left: 10%;
|
|
|
top: 50%;
|
|
|
font-family: PingFang SC;
|
|
|
transform: translateY(-50%);
|
|
|
- //padding: 100px;
|
|
|
+ padding: 100px;
|
|
|
text-align: center;
|
|
|
h1 {
|
|
|
font-size: 40px;
|
|
@@ -393,10 +308,4 @@ export default {
|
|
|
margin-top: 20px;
|
|
|
}
|
|
|
}
|
|
|
-.login-three {
|
|
|
- width: 45%;
|
|
|
- height: 624px;
|
|
|
- float: left;
|
|
|
- padding-top: 8%;
|
|
|
-}
|
|
|
</style>
|