日常开发

src/api/request.ts

@@ -16,7 +16,7 @@ service.interceptors.request.use(
     //console.log("config", config)
     const token = localStorage.getItem('token') || '';
     if (token && Boolean(config.headers['auth']) == true) {
-      config.headers['Authorization'] = token;
+      config.headers['Authorization'] = 'JWT ' + token;
     }
     if (!token && Boolean(config.headers['auth']) == true) {
       delete config.headers['auth'];

src/views/login/index.vue

@@ -58,16 +58,18 @@ const getLogin = () => {
   proxy?.$http.common.login(params).then((res: any) => {
     if (res.access_token) {
       //保存token
-      let token = 'JWT ' + res.access_token;
+      let token = res.access_token;
       localStorage.setItem("token", token);
       //跳转
       router.push({ path: '/' });
-      loading.value = false;
       getUserInfo();
     }
   }).catch(() => {
     key.value++;
-  }).finally(() => proxy?.$modal?.closeLoading());
+  }).finally(() => {
+    loading.value = false;
+    proxy?.$modal?.closeLoading()
+  });
 };
 
 //获取个人信息
@@ -92,18 +94,6 @@ onMounted(() => {
 </script>
 
 <style lang="scss" scoped>
-$waiPadding: 6.51rem;
-
-.logo {
-  img {
-    width: 14.563rem;
-  }
-
-  position: absolute;
-  left: $waiPadding;
-  top: 5.19rem;
-}
-
 .login-title {
   img {
     width: 9.88rem;
@@ -112,10 +102,6 @@ $waiPadding: 6.51rem;
   margin-bottom: 1.8rem;
 }
 
-.login-input {
-  width: 10rem;
-}
-
 .login-content {
   width: 45%;
   height: 100vh;
@@ -146,7 +132,9 @@ $waiPadding: 6.51rem;
       .login-item {
         width: 100%;
         margin-bottom: 2rem;
-
+        display: flex;
+        justify-content: center;
+        
         .login-input {
           width: 52.6%;
           height: 2.9rem;
@@ -186,31 +174,4 @@ $waiPadding: 6.51rem;
     }
   }
 }
-
-.erweima {
-  position: absolute;
-  right: 3.87rem;
-  bottom: 3.87rem;
-  text-align: center;
-
-  img {
-    width: 6.625rem;
-  }
-
-  span {
-    display: block;
-    color: #FFFFFF;
-    font-size: 1.1rem;
-    padding-top: 3px;
-  }
-}
-
-@media screen and (max-width: 1450px) {
-  $waiPadding: 13rem;
-
-  .logo {
-    left: $waiPadding;
-  }
-
-}
 </style>

src/views/login/mobile.vue

@@ -4,15 +4,13 @@
       <div class="login-content-center" v-if="!show">
         <div class="login-input-box">
           <div class="login-item">
-            <input class="login-input login-input-deviceid" type="text" placeholder="请输入设备ID"
-              v-model.trim="loginForm.deviceid" />
+            <input class="login-input" type="text" placeholder="请输入设备ID" v-model.trim="loginForm.deviceid" />
           </div>
           <div class="login-item">
-            <input class="login-input login-input-username" type="text" placeholder="请输入帐号"
-              v-model.trim="loginForm.username" />
+            <input class="login-input" type="text" placeholder="请输入帐号" v-model.trim="loginForm.username" />
           </div>
           <div class="login-item">
-            <input class="login-input login-input-password" type="password" autocomplete="off" placeholder="请输入密码"
+            <input class="login-input" type="password" autocomplete="off" placeholder="请输入密码"
               v-model.trim="loginForm.password" />
           </div>
           <div @click="getLogin" class="login-btn">登 录</div>
@@ -20,10 +18,16 @@
       </div>
       <div v-else class="login-content-center">
         <div class="login-input-box">
-          <div style="margin-bottom: 15px;">模拟发送手势：</div>
-          <div class="login-item"><div @click="getCmdtest(1)"  class="login-btn" style="width:100%;">1、左滑动（切换项目）</div></div>
-          <div class="login-item"><div @click="getCmdtest(2)"  class="login-btn" style="width:100%;">2、举左手（确认）</div></div>
-          <div class="login-item" style="margin-bottom: 0;"><div @click="getCmdtest(3)"  class="login-btn" style="width:100%;">3、双手胸前交叉（退出）</div></div>
+          <div style="margin-bottom: 15px;font-size: 5rem;">SN：{{ loginForm.deviceid }}</div>
+          <div class="login-item">
+            <div @click="getCmdtest(1)" class="login-btn" style="width:100%;">1、左滑动（切换项目）</div>
+          </div>
+          <div class="login-item">
+            <div @click="getCmdtest(2)" class="login-btn" style="width:100%;">2、举左手（确认）</div>
+          </div>
+          <div class="login-item" style="margin-bottom: 0;">
+            <div @click="getCmdtest(3)" class="login-btn" style="width:100%;">3、双手胸前交叉（退出）</div>
+          </div>
         </div>
       </div>
     </div>
@@ -42,15 +46,16 @@ const data = reactive<any>({
     deviceid: '38715692',
     username: 'manage1',
     password: 'trops@2022'
-  }
+  },
+  loading: false,
 });
-const { show, handcontroller, loginForm } = toRefs(data);
+const { show, handcontroller, loginForm, loading } = toRefs(data);
 
 // 登录
 const getLogin = () => {
   let sid = route.query.sid;
-  if(sid==undefined && !sid){
-    proxy?.$modal.msgWarning("缺少SID，请重新扫码！");
+  if (sid == undefined && !sid) {
+    proxy?.$modal.msgError("缺少SID，请重新扫码！");
     return false;
   }
   let deviceid = loginForm.value.deviceid;
@@ -60,6 +65,7 @@ const getLogin = () => {
     proxy?.$modal.msgWarning("请填写完整信息！");
     return false;
   }
+  loading.value = true;
   proxy?.$modal.loading();
   let params = {
     sid,
@@ -71,14 +77,17 @@ const getLogin = () => {
     if (res.access_token) {
       show.value = true
       //保存token
-      let token = 'JWT ' + res.access_token;
+      let token = res.access_token;
       localStorage.setItem("token", token);
-      setTimeout(()=>{
+      setTimeout(() => {
         getDeviceInfo()
-      },500)
+      }, 500)
     }
   }).catch(() => {
-  }).finally(() => proxy?.$modal?.closeLoading());
+  }).finally(() => {
+    loading.value = false;
+    proxy?.$modal?.closeLoading();
+  });
 };
 
 // 设备信息
@@ -106,10 +115,24 @@ const getCmdtest = (data: any) => {
     cmd: data
   };
   proxy?.$http.common.cmdtest(params).then((res: any) => {
-  });
+    proxy?.$modal.msgSuccess("发送成功");
+  }).catch(() => {
+    proxy?.$modal.msgError("发送失败");
+  }).finally(() => { });
 };
 
 onMounted(() => {
+  let sid = route.query.sid;
+  if (sid == undefined && !sid) {
+    proxy?.$modal.msgError("缺少SID，请重新扫码！");
+    return false;
+  }
+  //测试环境默认密码
+  if (import.meta.env.DEV) {
+    loginForm.value.deviceid = '38715692';
+    loginForm.value.username = 'manage1';
+    loginForm.value.password = 'trops@2022';
+  }
 })
 </script>
 
@@ -125,7 +148,7 @@ onMounted(() => {
     height: 100vh;
     margin: 0 auto;
     display: flex;
-    align-items:flex-end;
+    align-items: flex-end;
     justify-content: center;
 
     .login-content-center {
@@ -134,6 +157,7 @@ onMounted(() => {
       justify-content: center;
       flex-wrap: wrap;
       width: 100%;
+
       .login-input-box {
         display: flex;
         justify-content: center;
@@ -143,16 +167,19 @@ onMounted(() => {
         padding: 5vh 0;
         border-radius: 2rem;
         opacity: 1;
-        background-color: rgba(#ffffff,0.9);
-        margin-bottom: 12vh;
+        background-color: rgba(#ffffff, 0.9);
+        margin-bottom: 11vh;
+
         .login-item {
           width: 100%;
-          padding:0 10%;
+          padding: 0 10%;
           box-sizing: border-box;
-          margin-bottom: 4rem;
-
+          margin-bottom: 4.5rem;
+          display: flex;
+          justify-content: center;
+          
           .login-input {
-            width:100%;
+            width: 100%;
             height: 10rem;
             line-height: 10rem;
             border-radius: 1rem;
@@ -178,6 +205,10 @@ onMounted(() => {
           text-align: center;
           cursor: pointer;
           background: radial-gradient(141% 126% at 5% 93%, #8EFFA9 0%, #07FFE7 100%);
+
+          &:hover {
+            background: #8EFFA9;
+          }
         }
       }
     }

src/views/login/qrcode.vue

@@ -1,22 +1,39 @@
 <template>
   <div class="qrcodeLogin">
-    <div class="left">
-      <img src="@/assets/images/common/qrcodeLogin.png" />
-    </div>
-    <div class="right">
-      <div>
-        <div class="login-title"><img src="@/assets/images/login/login.png" /></div>
-        <div class="tab">
-          <li>扫码登录</li>
-          <li>密码登录</li>
-        </div>
-        <div class="qrcodeBox">
-          <img :src="erweima" @click="getMobile" />
+    <div class="qrcodeLogin-center">
+      <div class="login-title"><img src="@/assets/images/login/login.png" /></div>
+      <Transition :enter-active-class="proxy?.animate.error.enter">
+        <div class="qrcodeLogin-box" :key="key">
+          <div class="tab">
+            <div class="li" :class="{ 'current': type == 1 }" @click="changeType(1)">扫码登录</div>
+            <div class="li" :class="{ 'current': type == 2 }" @click="changeType(2)">密码登录</div>
+          </div>
+          <div class="qrcodeLogin-content">
+            <div class="qrcodeBox" v-show="type == 1 ? true : false">
+              <div class="pic"><img :src="erweima" @click="getMobile" /></div>
+              <div class="name">使用微信扫一扫</div>
+            </div>
+            <div class="login-input-box" v-show="type == 2 ? true : false">
+              <div class="login-item">
+                <input class="login-input" type="text" placeholder="请输入设备ID" v-model.trim="loginForm.deviceid" />
+              </div>
+              <div class="login-item">
+                <input class="login-input" type="text" placeholder="请输入帐号" v-model.trim="loginForm.username" />
+              </div>
+              <div class="login-item">
+                <input class="login-input" type="password" autocomplete="off" placeholder="请输入密码"
+                  v-model.trim="loginForm.password" />
+              </div>
+              <div @click="getLogin" class="login-btn">
+                <el-icon class="is-loading" v-if="loading">
+                  <Loading />
+                </el-icon>
+                登 录
+              </div>
+            </div>
+          </div>
         </div>
-        <div class="formBox">
-
-        </div>
-      </div>
+      </Transition>
     </div>
   </div>
 </template>
@@ -32,8 +49,16 @@ const data = reactive<any>({
   erweima: '',
   sid: '',
   listenWs: false,//是否监听手势
+  loginForm: {
+    deviceid: '',
+    username: '',
+    password: ''
+  },
+  loading: false,
+  key: 0,
+  type: 1,
 });
-const { erweima, sid, listenWs } = toRefs(data);
+const { erweima, sid, listenWs, loginForm, loading, key, type } = toRefs(data);
 
 /**
  * 手势
@@ -63,29 +88,16 @@ const getHandWs = () => {
     //获取信息
     if (e?.data?.token) {
       //保存token
-      let token = 'JWT ' + e.data.token;
+      let token = e.data.token;
       localStorage.setItem("token", token);
       let deviceid = e?.data?.deviceid;
       localStorage.setItem("deviceid", deviceid);
-      getUserInfo();
       //刷新
       window.location.reload()
     }
   });
 };
 
-//获取个人信息
-const getUserInfo = () => {
-  let params = {};
-  proxy?.$http.common.getUserInfo(params).then((res: any) => {
-    //保存信息
-    if (res.data.length) {
-      let info = JSON.stringify(res.data[0]);
-      localStorage.setItem("userInfo", info);
-    }
-  });
-};
-
 /**
  * 获取二维码
 */
@@ -98,6 +110,46 @@ const getErweima = () => {
     })
 }
 
+// 登录
+const getLogin = () => {
+  let deviceid = loginForm.value.deviceid;
+  let username = loginForm.value.username;
+  let password = loginForm.value.password;
+  if (!deviceid || !username || !password) {
+    proxy?.$modal.msgWarning("请填写完整信息！");
+    return false;
+  }
+  loading.value = true;
+  proxy?.$modal.loading();
+  let params = {
+    sid: sid.value,
+    deviceid,
+    username,
+    password,
+  };
+  proxy?.$http.common.qrlogin(params).then((res: any) => {
+    if (res.access_token) {
+    }
+  }).catch(() => {
+    key.value++;
+  }).finally(() => {
+    proxy?.$modal?.closeLoading();
+    loading.value = false;
+  });
+};
+
+/**
+ * 切换登录类型
+*/
+const changeType = (data: Number) => {
+  type.value = data
+  if (type.value == 2 && sid.value == undefined && !sid.value) {
+    proxy?.$modal.msgError("缺少SID，重新获取！");
+    //刷新
+    window.location.reload()
+  }
+}
+
 /**
  * 跳转手机登录页
 */
@@ -112,7 +164,6 @@ onMounted(() => {
   if (token && deviceid) {
     //跳转
     router.push({ path: '/gesture' });
-    getUserInfo();
   } else {
     getHandWs();
   }
@@ -121,25 +172,132 @@ onMounted(() => {
 onBeforeUnmount(() => {
   listenWs.value = false;
 })
+
+onMounted(() => {
+  //测试环境默认密码
+  if (import.meta.env.DEV) {
+    loginForm.value.deviceid = '38715692';
+    loginForm.value.username = 'manage1';
+    loginForm.value.password = 'trops@2022';
+  }
+})
 </script>
 
 <style lang="scss" scoped>
 .qrcodeLogin {
-  width: 100vw;
+  width: 100%;
   height: 100vh;
   display: flex;
-  background: #ffffff;
+  align-items: center;
+  justify-content: center;
+
+  .qrcodeLogin-center {
+    .login-title {
+      text-align: center;
 
-  .left {
-    width: 50%;
+      img {
+        width: 8rem;
+      }
 
-    img {
-      width: 100%;
+      margin-bottom: 1.2rem;
     }
-  }
 
-  .right {
-    width: 50%;
+    .qrcodeLogin-box {
+      background: linear-gradient(41deg, #1D2F3D -83%, #304453 95%);
+      box-shadow: inset 0px 1px 0px 2px rgba(255, 255, 255, 0.2);
+      border-radius: 1.6rem;
+
+      .tab {
+        display: flex;
+        font-size: 1.2rem;
+        text-align: center;
+        height: 4rem;
+        line-height: 4rem;
+        .li {
+          width: 50%;
+          color: #ffffff;
+          border-bottom: 1px solid #f1f1f1;
+          cursor: pointer;
+        }
+        .current{
+          color: #14F287;
+          border-bottom: 1px solid #14F287;
+        }
+      }
+
+      .qrcodeLogin-content {
+        width: 13rem;
+        height: calc(13rem + 1rem + 2rem);
+        padding: 2rem 5rem;
+        .qrcodeBox {
+          text-align: center;
+
+          .pic {
+            width: 100%;
+            margin-bottom: 1rem;
+            img {
+              width: 100%;
+            }
+          }
+
+          .name {
+            color: #ffffff;
+            font-size: 1.4rem;
+          }
+        }
+
+        .login-input-box {
+          display: flex;
+          justify-content: center;
+          align-items: center;
+          flex-direction: column;
+          width: 100%;
+
+          .login-item {
+            width: 100%;
+            margin-bottom: 1.2rem;
+            display: flex;
+            justify-content: center;
+
+            .login-input {
+              width: 100%;
+              height: 2.9rem;
+              line-height: 2.9rem;
+              border-radius: 0.83rem;
+              padding: 0 1rem;
+              text-align: center;
+              font-size: 1.65rem;
+              opacity: 1;
+              background: #EAEAEA;
+              box-sizing: border-box;
+              border: 1px solid #FFFFFF;
+              box-shadow: inset 0px 0px 10px 1px rgba(78, 78, 78, 0.5899);
+            }
+          }
+
+
+          .login-btn {
+            width: 100%;
+            height: 3.59rem;
+            line-height: 3.59rem;
+            border-radius: 0.83rem;
+            font-size: 2rem;
+            opacity: 1;
+            text-align: center;
+            background: radial-gradient(141% 126% at 5% 93%, #8EFFA9 0%, #07FFE7 100%);
+            box-shadow: inset 0px 1px 0px 2px rgba(255, 255, 255, 0.5577);
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+
+            .is-loading {
+              margin-right: 5px;
+            }
+          }
+        }
+      }
+    }
   }
 }
 </style>