pms-app/pages/user/login.vue

<template>
  <view class="login">
    <view class="login-top">
      <image class="back-img" src="../../static/login/login-back.png"></image>
      <view class="login-text">
        <view class="text"> {{ $t("login.welcome") }}</view>
        <view class="text">
          {{ $t("app.appName") }}
        </view>
      </view>
    </view>
    <view class="login-form-wrap">
      <uni-forms
        class="login-form"
        ref="formRef"
        :modelValue="loginData"
        :rules="loginRules">
        <uni-forms-item name="username" class="margin-bt">
          <!-- type="number" -->
          <uni-easyinput
            class="login-input"
            v-model="loginData.username"
            :placeholder="$t('login.enterUsername')"
            :placeholderStyle="placeholderStyle"
            :styles="inputStyles" />
        </uni-forms-item>
        <uni-forms-item name="password" class="margin-bt">
          <uni-easyinput
            type="password"
            v-model="loginData.password"
            :placeholder="$t('login.enterPassword')"
            :placeholderStyle="placeholderStyle"
            :styles="inputStyles" />
        </uni-forms-item>
      </uni-forms>
      <button type="primary" @click="formSubmit(formRef)">
        {{ $t("login.login") }}
      </button>
      <view class="flex-row align-center justify-between">
        <view class="btn-text" @click="loginWithDingTalk">
          {{ $t("login.loginWithDingTalk") }}
        </view>
        <view class="btn-text" @click="openLanguagePopup">
          {{ $t("login.languageChange") }}
        </view>
      </view>
    </view>

    <!-- 引用语言选择组件 -->
    <language-popup ref="languagePopupRef" />
    <upgrade ref="upgradeRef" />
  </view>
</template>

<script setup>
import { reactive, ref, onMounted, nextTick, getCurrentInstance } from "vue";
import { onLoad } from "@dcloudio/uni-app";
// 引入接口api
import {
  appLogin,
  dingTalkLogin,
  dingTalkLoginH5,
  getInfo,
  getTokenByUserId,
} from "@/api/login.js";
// 引入配置文件
import config from "@/utils/config";
// 引入数据库操作
import { saveUser } from "@/utils/appDb";
// 引入本地存储操作
import { setUserId, setToken, setDeptId, setUserInfo } from "@/utils/auth.js";
import { useDataDictStore } from "@/store/modules/dataDict";
// 引入组件
import Upgrade from "@/components/upgrade.vue";
import LanguagePopup from "@/components/language-popup.vue";

// 引入钉钉JSAPI -- 仅在H5环境下使用
let dd = null;
// #ifdef H5
import * as dingTalkJsApi from "dingtalk-jsapi";
dd = dingTalkJsApi;
// #endif

const { appContext } = getCurrentInstance();
const t = appContext.config.globalProperties.$t;
const languagePopupRef = ref(null);

const openLanguagePopup = () => {
  languagePopupRef.value?.open();
};

// 判断当前环境是否在钉钉环境
const isDingTalk = () => {
  const ua = window.navigator.userAgent.toLowerCase();
  console.log("🚀 ~ 当前环境 ~ ua:", ua);
  return ua.includes("dingtalk") || ua.includes("dingtalkwork");
};

const dingTalkAutoLogin = () => {
  // 判断是否在钉钉环境
  if (!isDingTalk()) {
    console.log("当前环境不是钉钉环境，无法自动登录");
    return;
  }
  // 执行钉钉微应用免登逻辑
  loginWithDingTalkH5();
};

// 钉钉登录
const loginWithDingTalk = async () => {
  // #ifdef APP
  const plugin = uni.requireNativePlugin("DingTalk");
  // 钉钉登录，这里无法使用async，否则java端会报参数错误
  plugin.login((res) => {
    console.log(res);
    if (res.success === 1) {
      dingTalkLogin({
        type: 20,
        code: res.code,
        state: res.state,
      }).then((res) => {
        console.log(res);
        handleLoginSuccess(res);
      });
    } else if (res.success === 2) {
      uni.showToast({ title: t("login.dingTalkError"), icon: "none" });
      console.error("APP端钉钉登录失败：", res);
    }
  });
  // #endif
  // #ifdef H5
  if (isDingTalk()) {
    if (!dd) {
      uni.showToast({ title: t("login.dingTalkJsapiMissing"), icon: "none" });
      return;
    }
    loginWithDingTalkH5();
  } else {
    console.log("当前是普通 H5 环境，无法使用钉钉登录");
    uni.showToast({ title: t("login.h5DingTalk"), icon: "none" });
  }
  // #endif
};

const loginWithDingTalkH5 = async () => {
  const corpId = config.default.corpId;
  console.log("🚀 ~ loginWithDingTalkH5 ~ corpId:", corpId);
  const clientId = config.default.clientId;
  console.log("🚀 ~ loginWithDingTalkH5 ~ clientId:", clientId);

  if (!corpId || !clientId) {
    console.error("缺少必要参数");
    return;
  }
  dd.requestAuthCode({
    corpId,
    clientId,
    success: async (result) => {
      console.log("🚀 ~ loginWithDingTalkH5 ~ result:", result);
      const { code } = result;
      dingTalkLoginH5({
        type: 10,
        state: new Date().getTime(),
        code: code,
      })
        .then((res) => {
          console.log("🚀 ~ loginWithDingTalkH5 ~ res:", res);
          handleLoginSuccess(res);
        })
        .catch((err) => {
          console.log("🚀 ~ loginWithDingTalkH5 ~ err:", err);
        });
    },
    fail: (err) => {
      console.log("🚀 ~ loginWithDingTalkH5 ~ err:", err);
      uni.showToast({
        title: "获取code失败:" + JSON.stringify(err),
        icon: "none",
      });
    },
  });
};

onLoad(async (options) => {
  console.log(
    "onLoad Login",
    uni.getLocale(),
    11,
    uni.getStorageSync("language")
  );

  console.log(options);

  // 保存钉钉消息传递的参数
  if (options.userId) {
    uni.setStorageSync("dingTalkJson", JSON.stringify(options));
    const isLoggedIn = uni.getStorageSync("userId");
    if (!isLoggedIn) {
      const result = await getTokenByUserId(options.userId);
      await handleLoginSuccess(result);
    }
  }
  // #ifdef H5
  // 当前环境为H5时，判断是否是通过钉钉微应用打开的链接
  // 获取当前Url地址
  const url = window.location.href;
  console.log("当前环境为H5时 当前Url地址:", url);
  // 判断是否是通过钉钉微应用打开的链接
  if (url.includes("/deepoil")) {
    dingTalkAutoLogin();
  }
  // #endif
});

onMounted(() => {
  // console.log("onMounted");
  // 检查是否需要显示语言选择弹窗
  if (!uni.getStorageSync("language")) {
    nextTick(() => {
      openLanguagePopup();
    });
  }
  // 检查是否已登录
  const isLoggedIn = uni.getStorageSync("userId");
  // console.log("isLoggedIn", isLoggedIn);
  if (isLoggedIn) {
    uni.switchTab({
      url: "/pages/entry/index",
    });
  }
});

const placeholderStyle = ref("color:#797979;font-weight:500;font-size:16px");
const inputStyles = reactive({
  backgroundColor: "#F0F3FB",
  color: "#797979",
});
const loginData = reactive({
  username: "",
  password: "",
});
const loginRules = ref({
  username: {
    rules: [
      {
        required: true,
        errorMessage: t("login.enterUsername"),
      },
    ],
  },
  password: {
    rules: [
      {
        required: true,
        errorMessage: t("login.enterPassword"),
      },
    ],
  },
});

const formRef = ref();
const formSubmit = async (formEl) => {
  if (!formEl) return;

  try {
    await formEl.validate();
    const result = await appLogin({ ...loginData });

    if (!result) return;

    console.log("result,", result.data);
    await saveUser({
      name: loginData.username,
      pwd: loginData.password,
    });
    await handleLoginSuccess(result);
  } catch (err) {
    console.log("err", err);
  }
};

const handleLoginSuccess = async (result) => {
  if (!result) return;

  await setUserId(result.data.userId);
  await setToken(result.data);

  const res = await getInfo();
  const data = JSON.stringify({
    user: res.data.user,
    roles: res.data.roles,
  });

  await setUserInfo(data);
  await setDeptId(res.data.user.deptId);
  await useDataDictStore().loadDataDictList();
  await uni.switchTab({
    url: "/pages/entry/index",
  });
};
</script>

<style lang="scss" scoped>
.login-top {
  position: relative;
  width: 100%;
  height: 422rpx;
}

.back-img {
  width: 100%;
  height: 100%;
}

.login-text {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  position: absolute;
  top: 0;
  left: 0;
  color: #ffffff;
  font-size: 40rpx;
  font-family: "Negreta,PingFang SC";
  font-weight: 600;
  padding: 0 56rpx;
  display: flex;
  justify-content: center;
  flex-direction: column;

  .text {
    width: 100%;
    margin-bottom: 6rpx;
  }
}

.margin-bt {
  margin-bottom: 25px;
}

.login-form-wrap {
  padding: 60rpx;
}

:deep(.uni-easyinput__content-input) {
  height: 45px;
}

:deep(.uni-input-input) {
  color: #999999 !important;
}

uni-button[type="primary"] {
  background: #004098;
}

.btn-text {
  color: #004098;
  margin-top: 20px;
  font-size: 14px;
  font-weight: 500;
}
</style>