扫码登录

pages/otherpage/user/scanLogin.vue

@@ -0,0 +1,127 @@
+<template>
+  <div class="scanLogin">
+    <div class="content">
+      <div class="img">
+        <img src="@/assets/img/other/user/compute@2x.png" alt="">
+      </div>
+      <div class="tips1">电脑端登陆确认</div>
+      <div class="tips2">信息将自动会自动同步到APP</div>
+      <div class="submitBtn" @click="submit">
+        <p>登录</p>
+      </div>
+      <div class="cancle" @click="close">取消登录</div>
+    </div>
+  </div>
+</template>
+
+<script>
+  /**
+   * 扫码登录web端
+   */
+  export default {
+    name: 'ScanLogin',
+    asyncData({  }) {
+      return {
+
+      }
+    },
+    data() {
+
+    },
+    created() {
+      this.code = this.$route.query.code
+    },
+    async mounted() {
+
+    },
+    methods: {
+      submit() {
+        this.$axios.$post('/api/user/qrcodeLoginSubmit', {
+          code: this.code
+        }).then(res=>{
+          if (Number(res.status) === 1) {
+            this.$toast('登录成功')
+            setTimeout(()=>{
+              window.close()
+            })
+          }
+        })
+      },
+      close() {
+        window.close()
+      }
+    },
+  }
+</script>
+
+<style lang="scss" scoped>
+  @import "../../../assets/css/scssCommon";
+  .scanLogin {
+    height: 100%;
+    overflow: hidden;
+    margin-top: 0;
+    .content {
+      width: 100vw;
+      height: 100%;
+      min-height: calc(100vh - 50px);
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      flex-direction: column;
+      .img {
+        width: pxtovw(125);
+        height: pxtovw(125);
+        font-size: 0;
+        img {
+          width: pxtovw(125);
+          height: pxtovw(125);
+        }
+      }
+      .tips1 {
+        margin-top: pxtovw(22);
+        height: pxtovw(22);
+        font-size: pxtovw(16);
+        font-weight: 600;
+        text-align: left;
+        color: #222222;
+        line-height: pxtovw(22);
+      }
+      .tips2 {
+        margin-top: pxtovw(3);
+        height: pxtovw(17);
+        font-size: pxtovw(12);
+        font-weight: 400;
+        text-align: center;
+        color: #929aa4;
+        line-height: pxtovw(17);
+      }
+      .submitBtn {
+        margin-top: pxtovw(20);
+        width: pxtovw(208);
+        height: pxtovw(44);
+        background: #308eff;
+        border-radius: pxtovw(2);
+        box-shadow: 0px 2px 6px 0px;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        p {
+          font-size: pxtovw(14);
+          font-weight: 500;
+          text-align: center;
+          color: #ffffff;
+          line-height: pxtovw(20);
+        }
+      }
+      .cancle {
+        margin-top: pxtovw(17);
+        height: pxtovw(20);
+        font-size: pxtovw(14);
+        font-weight: 400;
+        text-align: center;
+        color: #666666;
+        line-height: pxtovw(20);
+      }
+    }
+  }
+</style>