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 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 = async () => {
  // 判断是否在钉钉环境
  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/home/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;
  await formEl
    .validate()
    .then((res) => {
      appLogin({
        ...loginData,
        // rememberMe: ,
        // tenantName: ""
      })
        .then(async (result) => {
          console.log("result,", result.data);
          if (result) {
            await saveUser({
              name: loginData.username,
              pwd: loginData.password,
            });
            await handleLoginSuccess(result);
          }
        })
        .finally(() => {});
    })
    .catch((err) => {
      console.log("err", err);
    });
};

const handleLoginSuccess = async (result) => {
  if (result) {
    await setUserId(result.data.userId);
    await setToken(result.data);
    await getInfo().then(async (res) => {
      // console.log('useres', res)
      const data = JSON.stringify({
        user: res.data.user,
        roles: res.data.roles,
      });
      // console.log('data', data)
      await setUserInfo(data);
      await setDeptId(res.data.user.deptId);

      await uni.switchTab({
        url: "/pages/home/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>