cxc-szcx-uniapp/pages/login/login.vue

<template>
	<view :class="{'gray':store.isgray==1}">
		<view class="logo f-col aic">
			<image src="@/static/login/logo.png"></image>
		</view>
		<view class="form f-col aic">
			<view class="box f-row aic">
				<image src="@/static/login/phone.png"></image>
				<input v-model="username" type="text" placeholder="请输入统一身份认证"
					placeholder-style="font-size: 28rpx;color: #999999;" />
			</view>
			<view class="box f-row aic">
				<image src="@/static/login/pwd.png"></image>
				<input v-model="password" :type="!showpwd?'password':'text'" placeholder="请输入密码"
					placeholder-style="font-size: 28rpx;color: #999999;" />
				<image v-if="showpwd" src="@/static/login/eye.png" @click="showpwd = !showpwd"></image>
				<image v-else src="@/static/login/eye-off.png" @click="showpwd = !showpwd"></image>
			</view>
		</view>
		<view class="pwd f-row aic">
			<view style="display: inline-block;" @click="check = !check">
				<view class="f-row aic">
					<image v-if="!check" src="@/static/login/nocheck.png"></image>
					<image v-else src="@/static/login/checked.png"></image>
					<text>记住密码</text>
				</view>
			</view>
		</view>
		<view class="login f-col aic">
			<view @click="login">
				登录
			</view>
		</view>
		<view class="login f-col aic">
			<text style="font-size: 10px;">Copyright (c) 2024 天然气产销厂</text>
			<text style="font-size: 10px;">版本号:{{systemInfo.appWgtVersion}}</text>
		</view>

	</view>
</template>

<script setup>
	import {
		ref,
		getCurrentInstance,
		watch
	} from 'vue';
	import {
		loginApi,
		localLoginApi,
		queryRoleApi
	} from '@/api/login.js';
	import {
		taskListApi
	} from '@/api/api.js';
	import Base64 from 'base-64';
	import {
		onLoad
	} from '@dcloudio/uni-app'
	import {
		useStore
	} from '@/store'
	const store = useStore()
	const {
		proxy
	} = getCurrentInstance()

	/** 系统信息 */
	const systemInfo = uni.getSystemInfoSync()
	/**是否明文显示密码*/
	const showpwd = ref(false)
	/**用于用户缓存账号和密码*/
	let localObj = {}
	/**记住账号和密码*/
	const savePwd = () => {
		let localObj = {
			un: username.value
		}
		if (check.value) {
			localObj.pw = password.value
		}
		uni.setStorageSync('accountObj', JSON.stringify(localObj))
	}

	/**是否选中记住密码*/
	const check = ref(true);
	/**账号*/
	const username = ref('')
	/**密码*/
	const password = ref('')
	const login = () => {
		if (!username.value.trim()) return proxy.$toast('请输入账号')
		if (!password.value.trim()) return proxy.$toast('请输入密码')
		let un = Base64.encode(encodeURIComponent(username.value))
		let pw = Base64.encode(encodeURIComponent(password.value))
		uni.showLoading({
			title: '登录中...'
		});

		/*生产环境 begin */
		// loginApi({
		// 	username: un,
		// 	password: pw,
		// 	ip: getDeviceIp()
		/*生产环境 end */

		/*开发环境 begin */
		localLoginApi({
			username: username.value,
			password: password.value,
			captcha: 'app'
			/*开发环境 end */
		}).then((loginres) => {
			if (loginres.success) {
				uni.setStorageSync('token', loginres.result.token)
				store.setToken(loginres.result.token)
				savePwd()
				queryRoleApi({
					roles: loginres.result.userInfo.roles
				}).then((roleres) => {
					//登录时间
					uni.setStorageSync('logintime', Date.now())
					// 登录人的角色
					uni.setStorageSync('role', roleres)
					store.setRole(roleres)

					// 登录人信息
					uni.setStorageSync('user', JSON.stringify(loginres.result
						.userInfo))
					store.setUserInfo(loginres.result.userInfo)
					//获取任务列表角标
					loadBadge()

					// 跳转首页
					uni.switchTab({
						url: '/pages/tab/index'
					})
				})

			}
		}).catch((err) => {
			console.log(err);
		})
	}

	let localAccountArr = []
	const accountArr = ref([])
	onLoad(() => {
		if (uni.getStorageSync('accountObj')) {
			let obj = JSON.parse(uni.getStorageSync('accountObj'))
			username.value = obj.un ? obj.un : ''
			password.value = obj.pw ? obj.pw : ''
		}
		// localAccountArr = uni.getStorageSync('accountArr') ? JSON.parse(uni.getStorageSync('accountArr')) : []
		// accountArr.value = localAccountArr
	})

	const loadBadge = () => {
		taskListApi().then((res) => {
			if (res.success) {
				if (res.result.total > 0) {
					uni.setTabBarBadge({
						index: '1',
						text: res.result.total // 角标内容
					});
				} else {
					uni.removeTabBarBadge({ // 移除角标
						index: '1',
					});
				}

			}
		})
	}



	function getDeviceIp() {
		// #ifdef APP-PLUS

		let deviceIp
		if (plus.os.name == "Android") {
			let Context = plus.android.importClass('android.content.Context')
			let main = plus.android.runtimeMainActivity()
			let cm = main.getSystemService(Context.CONNECTIVITY_SERVICE)
			plus.android.importClass(cm)
			let linkProperties = cm.getLinkProperties(cm.getActiveNetwork())
			let linkAddrs = plus.android.invoke(linkProperties, 'getLinkAddresses')
			plus.android.importClass(linkAddrs)
			for (var i = 0; i < linkAddrs.size(); i++) {
				let inetAddr = plus.android.invoke(linkAddrs.get(i), 'getAddress')
				deviceIp = plus.android.invoke(inetAddr, 'getHostAddress')
			}
			//再看有没有wifi
			if (deviceIp == '') {
				var wifiManager = plus.android.runtimeMainActivity().getSystemService(Context.WIFI_SERVICE);
				var wifiInfo = plus.android.invoke(wifiManager, "getConnectionInfo");
				var ipAddress = plus.android.invoke(wifiInfo, "getIpAddress");
				if (ipAddress != 0) {
					deviceIp = ((ipAddress & 0xff) + "." + (ipAddress >> 8 & 0xff) + "." + (ipAddress >> 16 &
						0xff) + "." + (ipAddress >> 24 & 0xff));
				}
			}
		}
		console.log(deviceIp)
		return deviceIp;
		// #endif
	}
</script>

<style lang="scss" scoped>
	:deep(.uni-select) {
		border: none;
		padding-left: 0;
		height: 88rpx;
	}

	:deep(.uni-select__input-placeholder) {
		font-size: 28rpx;
		color: #999999;
	}

	:deep(.uni-icons) {
		display: none;
	}

	.logo {
		padding-top: 184rpx;

		image {
			width: 475rpx;
			height: 199rpx;
		}
	}

	.form {
		margin-top: 60rpx;

		.box {
			width: 570rpx;
			height: 88rpx;
			background: #F8F8F8;
			border-radius: 44rpx;
			padding: 0 30rpx;
			margin-top: 40rpx;
			position: relative;

			.account_box {
				position: absolute;
				top: 100rpx;
				left: 90rpx;
				width: 500rpx;
				background-color: #fff;
				box-shadow: 0px 0px 3px 1px #dfdfdf;
				z-index: 99;
				border-radius: 10rpx;

				// &::after {
				// 	position: absolute;
				// 	content: ' ';
				// 	border: 15rpx solid;
				// 	border-color: transparent transparent #fff transparent;
				// 	top: -30rpx;
				// 	left: 30rpx;
				// 	z-index: 999;
				// }


				.account {
					max-height: 200rpx;

					overflow-y: auto;

					view {
						padding: 10rpx;
					}

				}
			}

			image {
				width: 40rpx;
				height: 40rpx;
				margin-right: 20rpx;
			}

			input {
				height: 100%;
				flex: 1;
			}
		}
	}

	.pwd {
		image {
			width: 34rpx;
			height: 34rpx;
			margin-right: 4rpx;
		}

		justify-content: flex-end;
		margin-top: 20rpx;
		margin-right: 60rpx;
		font-size: 24rpx;
		color: #01508B;
	}

	.login {
		margin-top: 63rpx;

		view {
			width: 630rpx;
			height: 88rpx;
			background: #4e74fb;
			border-radius: 44rpx;
			font-size: 32rpx;
			color: #FFFFFF;
			text-align: center;
			line-height: 88rpx;
		}
	}
</style>