tropsCode/src/views/login/mobile.vue

<template>
  <div class="mobileLogin">
    <div class="login-content">
      <div class="login-content-center" v-if="!show">
        <div class="login-input-box">
          <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">登 录</div>
        </div>
      </div>
      <div v-else class="login-content-center">
        <div class="login-input-box">
          <div style="margin-bottom: 15px;font-size: 2.4rem;">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">
            <div @click="getCmdtest(3)" class="login-btn" style="width:100%;">3、双手胸前交叉（退出）</div>
          </div>
          <div class="login-item" style="margin-bottom: 0;">
            <div @click="getCmdtest(4)" class="login-btn" style="width:100%;">4、刷新</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup name="MobileLogin" lang="ts">
const { proxy } = getCurrentInstance() as any;
const router = useRouter();
const route = useRoute();

interface DataType {
  show: boolean,
  handcontroller: string,
  loginForm: {
    username: string,
    password: string,
    deviceid: string,
  },
  loading: boolean,
}

const data = reactive<DataType>({
  show: false,
  handcontroller: '',
  loginForm: {
    username: '',
    password: '', deviceid: '',
  },
  loading: false,
});
const { show, handcontroller, loginForm, loading } = toRefs(data);

// 登录
const getLogin = () => {
  let sid = route.query.sid;
  if (sid == undefined && !sid) {
    proxy?.$modal.msgError("缺少SID，请重新扫码！");
    return false;
  }
  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,
    deviceid,
    username,
    password,
  };
  proxy?.$http.common.qrlogin(params).then((res: any) => {
    if (res.access_token) {
      show.value = true
      //保存token
      let token = res.access_token;
      localStorage.setItem("token", token);
      setTimeout(() => {
        getDeviceInfo()
      }, 500)
    }
  }).catch(() => {
  }).finally(() => {
    loading.value = false;
    proxy?.$modal?.closeLoading();
  });
};

// 设备信息
const getDeviceInfo = () => {
  let deviceid = loginForm.value.deviceid;
  let params = {
    search_info: deviceid,
    page: 1,
    per_page: 1,
  };
  proxy?.$http.common.deviceInfo(params).then((res: any) => {
    if (res.data.length) {
      handcontroller.value = res.data[0]?.handcontroller_id
    }
  }).catch(() => {
  }).finally(() => { });
};

/**
 * 模拟发送手势
*/
const getCmdtest = async (data: any) => {
  if (data == 4) {
    await proxy?.$modal.confirm("确定要刷新吗？")
  }
  let params = {
    hctrl_name: `handcontroller_${handcontroller.value}`,
    cmd: data
  };
  proxy?.$http.common.cmdtest(params).then((res: any) => {
    proxy?.$modal.msgSuccess("发送成功");
  }).catch(() => {
    proxy?.$modal.msgError("发送失败");
  }).finally(() => { });
};

onMounted(() => {
  let sid = route.query.sid;
  let deviceid = route.query.deviceid;
  if (sid == undefined && !sid) {
    proxy?.$modal.msgError("缺少SID，请重新扫码！");
    return false;
  }
  //测试环境默认密码
  if (import.meta.env.DEV) {
    loginForm.value.deviceid = deviceid ? deviceid : '25821975';
    loginForm.value.username = 'manage1';
    loginForm.value.password = 'trops@2022';
  }
  if (deviceid) {
    loginForm.value.deviceid = deviceid;
  }
})
</script>

<style lang="scss">
@media screen and (max-width: 1280px) {
  :root {
    font-size: calc(1280px / 106);
  }
}

.mobileLogin {
  width: 100%;
  height: 100vh;
  background: url("@/assets/images/gesture/mobile.png") top center no-repeat;
  background-size: cover;

  .login-content {
    width: 80%;
    height: 100vh;
    margin: 0 auto;
    display: flex;
    align-items: flex-end;
    justify-content: center;

    .login-content-center {
      display: flex;
      text-align: center;
      justify-content: center;
      flex-wrap: wrap;
      width: 100%;

      .login-input-box {
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        width: 100%;
        padding: 5vh 0;
        border-radius: 1rem;
        opacity: 1;
        background-color: rgba(#ffffff, 0.9);
        margin-bottom: 11vh;

        .login-item {
          width: 100%;
          padding: 0 10%;
          box-sizing: border-box;
          margin-bottom: 1.2rem;
          display: flex;
          justify-content: center;

          .login-input {
            width: 100%;
            height: 3rem;
            line-height: 3rem;
            border-radius: 0.5rem;
            padding: 0 1rem;
            text-align: center;
            font-size: 1.3rem;
            opacity: 1;
            background: #EAEAEA;
            box-sizing: border-box;
            border: 1px solid #FFFFFF;
            box-shadow: inset 0px 0px 5px 1px rgba(78, 78, 78, 0.2);
          }
        }


        .login-btn {
          width: 60%;
          height: 3rem;
          line-height: 3rem;
          border-radius: 1.5rem;
          font-size: 1.5rem;
          text-align: center;
          cursor: pointer;
          background: radial-gradient(141% 126% at 5% 93%, #8EFFA9 0%, #07FFE7 100%);

          &:active {
            background: #8EFFA9;
          }
        }
      }
    }
  }
}
</style>