登录loading

src/views/common/login.vue

@@ -95,6 +95,15 @@ import { getUUID } from '@/utils'
       dataFormSubmit () {
         this.$refs['dataForm'].validate((valid) => {
           if (valid) {
+            // 显示全屏loading - 美观且专业
+            const loading = this.$loading({
+              lock: true,
+              text: '正在登录，请稍候...',
+              spinner: 'el-icon-loading',
+              background: 'rgba(0, 0, 0, 0.5)',
+              customClass: 'login-loading'
+            })
+
             this.$http({
               url: this.$http.adornUrl('/sys/login'),
               method: 'post',
@@ -124,9 +133,18 @@ import { getUUID } from '@/utils'
                 localStorage.setItem('refresh', "0")
                 localStorage.setItem('userName', this.dataForm.userName)
                 this.getConfigParams()
+
+                // 登录成功后关闭loading（路由跳转会自动关闭，这里作为备用）
+                setTimeout(() => {
+                  loading.close()
+                }, 500)
               } else {
+                loading.close() // 登录失败立即关闭loading
                 this.$message.error(data.msg)
               }
+            }).catch(error => {
+              loading.close() // 请求异常时关闭loading
+              this.$message.error('登录请求失败，请检查网络连接')
             })
           }
         })
@@ -172,3 +190,22 @@ import { getUUID } from '@/utils'
 }
 </style>
 
+<style lang="scss">
+// 全屏登录loading样式 - 更美观专业
+.login-loading {
+  .el-loading-spinner {
+    .el-icon-loading {
+      font-size: 50px;
+      color: #17B3A3;
+    }
+    .el-loading-text {
+      color: #ffffff;
+      font-size: 16px;
+      font-weight: 500;
+      margin-top: 15px;
+      letter-spacing: 1px;
+    }
+  }
+}
+</style>
+