fans-mobile/src/views/login.vue

<template>
  <div class="login">
    <div class="login-header">
      <img class="logo" :style="VUE_APP_USERNAME == 'smt' ? 'width:200px;height:200px' : ''" :src=" logo" />
      <h2 v-if="VUE_APP_USERNAME != 'smt'">{{ $t('login.title') }}</h2>
    </div>
    <div class="login-form">
      <!-- <van-field v-model="loginForm.tenantId" name="" label="" :placeholder="$t('login.form.tenantId')"
                 :rules="[{ required: true, message: $t('login.form.tenantId') }]" autocomplete="off" /> -->
      <van-field v-model="loginForm.username" name="" label="" :placeholder="$t('login.form.username')"
                 :rules="[{ required: true, message: $t('login.form.username') }]" autocomplete="off" />
      <van-field v-model="loginForm.password" type="password" name="" label="" :placeholder="$t('login.form.password')"
                 :rules="[{ required: true, message: $t('login.form.password') }]" />

      <van-form @submit="onSubmit">
        <van-cell-group inset> </van-cell-group>
        <div style="margin: 16px">
          <van-button round block type="primary" native-type="submit">
            {{$t('common.submit')}}
          </van-button>
        </div>
        <div class="check-warp" style="text-align: left; justify-content: left">
          <div class="check-icon-warp">
            <van-checkbox icon-size="16px" v-model="rememberMe"></van-checkbox>
          </div>
          {{$t('login.rememberPassword')}}
        </div>
      </van-form>
    </div>
    <!-- <div class="login-btn">
      <div class="check-warp">
        <div class="check-icon-warp">
          <van-checkbox icon-size="16px" v-model="clause"></van-checkbox>
        </div>
        <div>
          {{ $t('login.agreement.text') }}
          <span>{{ $t('login.agreement.clause') }}</span>
          {{ $t('login.agreement.and') }}
          <span>{{ $t('login.agreement.agreement') }}</span>
        </div>
      </div>

    </div> -->
    <van-dialog v-model:show="langModal" title="选择语言" show-cancel-button @confirm="changeLang">
      <van-radio-group v-model="langType">
        <van-radio name="zh-cn" style="height:50px;padding-left: 20px;">简体中文</van-radio>
        <van-radio name="en-us" style="height:50px;padding-left: 20px;">English</van-radio>
      </van-radio-group>
    </van-dialog>
  </div>
</template>
<style lang="scss" scoped>
.login {
  height: 100vh;
  width: 100%;
  background-size: 100% 100%;
  background: #fff;
  .check-warp {
    display: flex;
    align-items: center;
    justify-content: center;
    .check-icon-warp {
      margin-right: 5px;
    }
    span {
      color: #3370ff;
      margin: 0 4px;
    }
  }
  .login-form {
    padding: 5px 20px;
  }
  .login-btn {
    font-size: 12px;
    position: fixed;
    bottom: 50px;
    left: 0;
    right: 0;
  }
  .van-cell {
    border: 5px;
    background: #f1f1f1;
    margin-bottom: 12px;
    height: 50px;
    box-sizing: border-box;
    line-height: 44px;
    padding: 3px 12px;
    font-size: 16px;
  }
  .login-header {
    background: url(../assets/images/login-header.png) no-repeat;
    height: 200px;
    background-size: cover;
    padding: 44px 20px 17px;
    box-sizing: border-box;
    .logo {
      height: 45px;
    }
    h2 {
      margin-top: 40px;
    }
  }
}
</style>
<script setup>
import "vant/lib/index.css";
import { ref, getCurrentInstance, onMounted } from "vue";
import { setUserInfo, setToken, getUserInfo, getToken } from "@/utils/auth";
import { showSuccessToast, showFailToast, showConfirmDialog } from "vant";
import * as dd from "dingtalk-jsapi";
import axios from "axios";
import { useRoute } from "vue-router";
import logo from "@/assets/logo.png";
import smtLogo from "@/assets/smtLogo.png";
const route = useRoute();
const proxy = getCurrentInstance().proxy;
const VUE_APP_USERNAME = ref(process.env.VUE_APP_USERNAME);
const langModal = ref(false);
const langType = ref("zh-cn");
const loginForm = ref({
  username: "",
  password: "",
  rememberMe: false,
  tenantId: "000000",
  code: "",
  uuid: "",
});
const rememberMe = ref(false);
const clause = ref(false);

const radioChange = () => {
  console.log(loginForm.rememberMe);
  // loginForm.value.rememberMe = loginForm.value.rememberMe ? false : false;
};

const onSubmit = () => {
  proxy
    .post("login", loginForm.value, "post", {
      tenantId: loginForm.value.tenantId,
    })
    .then((res) => {
      console.log(res);
      if (res.code == 200) {
        setToken(res.token);
        getInfo();
      }
    });
};

const changeLang = () => {
  proxy.$i18n.locale = langType.value;
  window.localStorage.setItem("lang", langType.value);
  langModal.value = false;
};

const getInfo = () => {
  proxy.post("getInfo", {}, "get").then((res) => {
    console.log(res);
    if (res.code == 200) {
      setUserInfo(res.user);
      window.localStorage.setItem("tenantId", loginForm.value.tenantId);
      if (rememberMe.value) {
        window.localStorage.setItem("username", loginForm.value.username);
        window.localStorage.setItem("password", loginForm.value.password);
        window.localStorage.setItem("rememberMe", rememberMe.value);
      } else {
        window.localStorage.setItem("username", "");
        window.localStorage.setItem("password", "");
        window.localStorage.setItem("tenantId", "");
        window.localStorage.setItem("rememberMe", false);
      }
      showSuccessToast("登录成功");
      proxy.$router.push("/main");
    }
  });
};
onMounted(() => {
  let username = window.localStorage.getItem("username");
  let password = window.localStorage.getItem("password");
  let tenantId = window.localStorage.getItem("tenantId");
  let rememberMeCopy = window.localStorage.getItem("rememberMe");
  let lang = window.localStorage.getItem("lang");
  if (!lang) {
    langModal.value = true;
  }
  if (rememberMeCopy == "true") {
    loginForm.value.username = username;
    loginForm.value.password = password;
    rememberMe.value = true;
    loginForm.value.tenantId = tenantId;
  }
});
const loginData = ref({});
let code = ref("");
const ddLoginInit = () => {
  if (getToken()) {
    //proxy.$router.push('/main')
  }
  dd.ready(function () {
    dd.ui.webViewBounce.disable();
    dd.runtime.permission.requestAuthCode({
      corpId: route.query.id, // 企业id
      onSuccess: function (info) {
        code.value = info.code;
        proxy
          .post("/open/dingApi/getUserToken", {
            code: code.value,
            corpId: route.query.id,
          })
          .then(
            (res) => {
              window.localStorage.setItem("corpId", route.query.id);
              setToken(res.data);
              getInfo();
            },
            (catchError) => {}
          );
      },
      onFail: function (err) {},
    });
  });
};
ddLoginInit();
</script>