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>