huarun/pages/login/login.vue

<template>
	<image src="./static/login.png" mode="" class="containerImg"></image>

	<view class="header">
		<view class="p1">欢迎登录</view>
		<view class="p2">观星台服务应用</view>
	</view>

	<view class="content">
		<view class="title">
			<image src="../../static/登录.png" mode="" class="img"></image>
			<view>用户登录</view>
		</view>
		<up-form labelPosition="left" :model="state.userFrom" :rules="state.rules" ref="uFormRef">
			<up-form-item prop="staffName">
				<up-input v-model="state.userFrom.account" border="none" :customStyle="customStyle"
					placeholder="请输入LDAP账号">
					<template #prefix style="margin-right: 30rpx;">
						<image src="../../static/账号.png" mode="" style="width: 35rpx;height: 40rpx;margin-left: 35rpx;">
						</image>
					</template>

					<template #suffix style="margin-right: 30rpx;">
						@999.com.cn
					</template>
				</up-input>
			</up-form-item>

			<up-form-item prop="staffPass" borderBottom>
				<up-input v-if="passeye==false" v-model="state.userFrom.password" type="password" border="none"
					:customStyle="customStyle" placeholder="请输入密码">
					<template #prefix style="margin-right: 30rpx;">
						<image src="../../static/密码.png" mode="" style="width: 35rpx;height: 40rpx;margin-left: 35rpx;">
						</image>
					</template>

					<template #suffix>
						<view style="margin-right: 30rpx;">
							<up-icon name="eye" @click="passeye=true" size="40rpx"></up-icon>
						</view>
					</template>
				</up-input>

				<up-input v-if="passeye==true" v-model="state.userFrom.password" type="text" border="none"
					:customStyle="customStyle" placeholder="请输入密码">
					<template #prefix style="margin-right: 30rpx;">
						<image src="../../static/密码.png" mode="" style="width: 35rpx;height: 40rpx;margin-left: 35rpx;">
						</image>
					</template>

					<template #suffix>
						<view style="margin-right: 30rpx;">
							<up-icon name="eye" @click="passeye=false" size="40rpx"></up-icon>
						</view>
					</template>
				</up-input>

			</up-form-item>

			<up-form-item prop="verifyCode" borderBottom>
				<up-input v-model="state.userFrom.verifyCode" border="none" :customStyle="customStyle"
					placeholder="请输入验证码">
					<template #prefix style="margin-right: 30rpx;">
						<image src="../../static/密码.png" mode="" style="width: 35rpx;height: 40rpx;margin-left: 35rpx;">
						</image>
					</template>
					<template #suffix style="margin-right: 30rpx;">
						<view
							style="border-left: 1rpx solid #038CFF;color: #038CFF;height: 100rpx;padding-left: 20rpx;">
							<!-- apex -->
							<image style="width: 150rpx;height: 100rpx;" :src="imgUrl" mode=""
								@click="getgenerateCode()"></image>
						</view>

					</template>
				</up-input>
				<view style="width: 100%;text-align: right;font-size: 26rpx;color:#a5b1be ;margin-top: 20rpx;">
					注：验证码不区分大小写
				</view>

			</up-form-item>

		</up-form>

		<up-button type="primary" @click="submit" :customStyle="customStyle2">登录</up-button>

		<view class="footer">
			注：该小程序仅限公司内部员工使用，账号由公司分配。
		</view>
	</view>


</template>

<script setup>
	import {
		ref,
		reactive,
		getCurrentInstance
	} from 'vue';
	import {
		onReady,
		onShow,
		onLoad,
	} from '@dcloudio/uni-app'
	import JSEncrypt from '@/uni_modules/jsencrypt/lib/index.js';

	const {
		proxy
	} = getCurrentInstance()
	import {
		Storage
	} from '@/service/storage'

	const storage = new Storage()

	const state = reactive({
		userFrom: {
			account: '',
			password: "",
			verifyCode: "",
			verifyId: ''
		},
		rules: {
			'account': {
				type: 'string',
				required: true,
				message: '注：重要项必须输入',
				trigger: ['blur'],
			},
			'password': {
				type: 'string',
				required: true,
				message: '注：重要项必须输入',
				trigger: ['blur'],
			},
			'verifyCode': {
				type: 'string',
				len: 4,
				message: '注：输入4位数验证码',
				trigger: ['blur'],
			},
		},
	});
	const customStyle = reactive({
		backgroundColor: '#ebf3fb',
		height: '100rpx'
	})
	const customStyle2 = reactive({
		height: '112rpx',
		fontSize: '32rpx',
		borderRadius: '20rpx',
		marginTop: '50rpx'
	});
	// 使用 ref 创建响应式引用  
	const formRef = ref(null);
	const passeye = ref(false)
	const uFormRef = ref(null);
	const code = ref()
	const imgUrl = ref('')
	const baseUrl = ref()

	onLoad(() => {
		baseUrl.value = import.meta.env.VITE_APP_API_BASEURL
		if (storage.getToken()) {
			uni.setStorageSync('subscript', true);
			uni.reLaunch({
				url: '/components/tabbar/tabbar'
			})
		}
		getgenerateCode()
	})

	const getgenerateCode = async () => {
		let a = generateUUID();
		state.userFrom.verifyId = a, uni.request({
			url: `${baseUrl.value}/v1/api/login/generateCode`,
			data: {
				data: {
					codeId: a
				}
			},
			responseType: "arraybuffer",
			method: "post",
			header: {
				accessToken: storage.getStorageSync("accessToken")
			},
			success: a => {
				if (200 === a.statusCode) {
					let b = uni.arrayBufferToBase64(a.data);
					imgUrl.value = "data:image/jpeg;base64," + b
				}
			}
		})
	}, generateUUID = () => {
		const a = Array(16);
		for (let b = 0; 16 > b; b++) a[b] = Math.floor(256 * Math.random());
		return a[6] = 64 | 15 & a[6], a[8] = 128 | 63 & a[8], a.map((a, b) => (4 === b || 6 === b || 8 === b ||
			10 === b ? "-" : "") + ("0" + a.toString(16)).slice(-2)).join("")
	};


	const submit = () => {
		uFormRef.value.validate().then(valid => {
			if (valid) {
				login()
			}
		}).catch(() => {
			// 处理验证错误  
			uni.$u.toast('请完善输入框的信息')
		});
	}


	const login = async () => {

		const pubKey =
			"MFwwDQYJKoZIhvcNAQEBBQADSwAwSAJBAJIMt6SCsx+KiBuagZmEtYBo+OnMJBCgKLWsJ1dw7k6bzzRWmDA2AQFxNo2xYkMrDkKOQpNXbUyrw1/mxKI3amsCAwEAAQ==",
			encryptor = new JSEncrypt;
		encryptor.setPublicKey(
			"MFwwDQYJKoZIhvcNAQEBBQADSwAwSAJBAJIMt6SCsx+KiBuagZmEtYBo+OnMJBCgKLWsJ1dw7k6bzzRWmDA2AQFxNo2xYkMrDkKOQpNXbUyrw1/mxKI3amsCAwEAAQ=="
			);
		let rsaPassWord = encryptor.encrypt(`${state.userFrom.password}`),
			data = {
				...state.userFrom,
				password: rsaPassWord
			};
		uni.showLoading({
			title: '登录中，请稍后...'
		});
		// 加密调用登录
		let res = await proxy.$api.login.logins({
			data
		})

		if (res.code == 0) {
			storage.setToken(res.data)
			uni.login({
				success(res3) {
					console.log('微信code信息', res3.code);
					code.value = res3.code
					proxy.$api.login.getOpenId(code.value)
					uni.setStorageSync('subscript', false);
					proxy.$api.login.getInfo().then((res) => {
						uni.setStorageSync('userInfo', res.data)
						uni.hideLoading();
						uni.reLaunch({
							url: '/components/tabbar/tabbar'
						})
					})

				}
			})
		}

	}
</script>

<style lang="scss">
	.footer {
		color: ghostwhite;
		margin-top: 260rpx;
		font-size: 24rpx;
	}

	.container {
		width: 100%;
		height: 100%;
		position: absolute;
		z-index: -1;
	}

	.containerImg {
		width: 100%;
		height: 100%;
		position: absolute;
	}

	.header {
		width: 90%;
		margin: auto;
		height: 180rpx;
		position: absolute;
		z-index: 1;
		top: 180rpx;
		left: 0;
		right: 0;
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		align-items: center;

		.p1 {
			width: 100%;
			font-size: 50rpx;
			font-weight: bold;
		}

		.p2 {
			width: 100%;
			font-size: 38rpx;
			font-weight: bold;
		}

	}

	.content {
		width: 85%;
		// margin: auto;
		position: absolute;
		z-index: 2;
		top: 460rpx;
		left: 0;
		right: 0;
		margin: auto;

		.title {
			display: flex;
			align-items: center;
			font-size: 36rpx;
			margin-bottom: 20rpx;

			.img {
				width: 50rpx;
				height: 50rpx;
				margin-right: 15rpx;
			}

		}
	}
</style>