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>

		<!-- <view class="uni-padding-wrap">
			<view>
				<checkbox-group @change="handleChange">
					<label>
						<checkbox :value="true" :checked="isChecked" style="transform: scale(0.6)" />
					</label>
				</checkbox-group>
			</view>

						<view class="uni-title">
				已阅读并同意
				<text style="text-decoration: underline" @click="goPrivacy">《隐私政策》</text>

				和
				<text style="text-decoration: underline" @click="goAgreement">《用户服务协议》</text>
			</view>

			<uni-popup ref="privacyRef">
				<scroll-view scroll-y="true" class="privacy" style="height: 500px; border-radius: 20rpx">
					<view style="background-color: #fff; padding: 0 50rpx; border-radius: 20rpx">
						<Privacy />
					</view>
				</scroll-view>
			</uni-popup>

			<uni-popup ref="aggRef">
				<scroll-view scroll-y="true" class="privacy" style="height: 500px; border-radius: 20rpx">
					<view style="background-color: #fff; padding: 0 50rpx; border-radius: 20rpx">
						<Agg />
					</view>
				</scroll-view>
			</uni-popup>
		</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';
import Privacy from './privacy.vue';
import Agg from './agreement.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();
};

let isChecked = ref(false);
let my_value = ref(false);

const handleChange = (val) => {
	my_value.value = val.detail.value[0];
};

// let privacyRef = ref(null);
// let aggRef = ref(null);

// const goPrivacy = () => {
// 	privacyRef.value.open();
// };

// const goAgreement = () => {
// 	aggRef.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 (!my_value.value) {
	// 	uni.showToast({
	// 		title: '请阅读并同意隐私政策和用户服务协议',
	// 		icon: 'none', // 可选 success/error/loading/none
	// 		duration: 2000, // 持续时间，单位ms
	// 		mask: true // 是否显示透明蒙层，防止触摸穿透
	// 	});

	// 	return;
	// }
	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>
.privacy {
	height: 60vh;
	width: 85vw;
	overflow: hidden;
}

.uni-padding-wrap {
	display: flex;
	z-index: 999;
	justify-content: center;
	align-items: center;
	padding: 0 10rpx;
}
.uni-title {
	font-size: 12px;
}
.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>