wans

src/views/Login.vue

@@ -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>