logpm/pages/login/login.vue

<template>
	<image class="backimg" @click="back" src="/static/rigthviewb.png"></image>
	<image class="bgimgmabx" src="/static/mabg.png"></image>
	<view class="maboxview">
		<view class="tophi">
			<view>Hello！</view>
			<view>欢迎来到货无忧</view>
		</view>
		<view class="mabox">
			<view class="inptbox">
				<view class="inputs">
					<view>公司编号</view>
					<view>
						<input placeholder="请输入" v-model="tenantId" />
					</view>
				</view>
				<view class="inputs">
					<view>用户账号</view>
					<view>
						<input placeholder="请输入" v-model="username" />
					</view>
				</view>
				<view class="inputs">
					<view>登录密码</view>
					<view>
						<input placeholder="请输入" v-model="password" password />
					</view>
				</view>
			</view>
			<view class="isrememberpassword" @click="setisremember">
				<image :src="isremember?'/static/ck.png':'/static/nock.png'"></image>
				<view>记住密码</view>
			</view>
			<view class="submit" @click="submitlogin">
				登录
			</view>
		</view>
	</view>
	<view class="bgmabx" v-if="showck" @click="showck=false">
		<view class="changkus" @click.stop.prevent>
			<view class="tis">
				<image class="bgimgs" src="/static/tpbg.png"></image>
				<image class="ckbgcc" src="/static/changku.png"></image>
				<view class="titlck">选择仓库</view>
				<scroll-view scroll-y="true" class="scvuew">
					<view class="maboxs">
						<view @click="ckeckitem(item)" :class="item.name==checkitem.name?'items xzck':'items'"
							v-for="item in warehouseList">
							{{item.name}}
						</view>
					</view>
				</scroll-view>
				<view class="submitcheck" @click="sbckck">确认选择</view>
			</view>
		</view>
	</view>
	<tips ref="tip"></tips>
	<tiplist ref="tiplists"></tiplist>
</template>

<script lang="ts" setup>
	import { detailsType } from '@/interfaces/home/login'
	import { oauthtoken, getMyWarehouseList, preserveCurrentWarehouse } from '@/api/user.js'
	import {
		onShow,
		onLoad,
		onHide,
		onPullDownRefresh
	} from '@dcloudio/uni-app'
	import { reactive, ref, toRefs } from "vue";
	import utils from '@/utils/utils';
	// 引入pinia仓库
	import { useUserStore } from '@/store/uaeUserStore';
	import useBluetoothStore from '@/store/useBluetoothStore.js';
	import useStorageStore from '@/store/useStorageStore';
	const { HANDLE_CLEARSTORAGE } = useStorageStore()
	const { HANDLE_INITBLUETOOTH } = useBluetoothStore()
	// import { storeToRefs } from 'pinia';
	const userStore = useUserStore()
	const { HANDLE_ACCTOKEN, HANDLE_REFTOKEN, HANDLE_USERINFO } = userStore
	let tip = ref(null)
	let details = reactive<detailsType>({
		tenantId: '',
		password: '',
		username: '',
		isremember: true,
		showck: false,
		warehouseList: [],
		checkitem: {},
	})
	const tiplists = ref(null)
	// 蓝牙列表
	const bluetoothList = utils.initbl()
	console.log('bluetoothList :>> ', bluetoothList);
	onLoad(() => {
		let users = <{ password : string; tenantId : string; username : string }>uni.getStorageSync('loginuser')

		details.isremember = uni.getStorageSync('isremember')

		if (users) {
			if (details.isremember) details.password = users.password
			details.tenantId = users.tenantId
			details.username = users.username
		}
		// 初始化获取蓝牙信息
		HANDLE_INITBLUETOOTH()
	})
	onShow(() => {
		const timer = setTimeout(() => {
			// 清除Pinia中存储的本仓库位信息
			HANDLE_CLEARSTORAGE()
			settips()
			clearTimeout(timer)
		}, 2000)
	})

	// 下拉刷新
	onPullDownRefresh(() => {
		const timer = setTimeout(() => {
			details.username = ''
			details.tenantId = ''
			details.password = ''
			// 关闭刷新动画
			uni.stopPullDownRefresh()
			clearTimeout(timer)
		}, 500)
	})

	function ckeckitem(item) {
		details.checkitem = item
	}

	async function sbckck() {
		if (!details.checkitem.id) {
			uni.showToast({
				title: '没有选择仓库，请先选择仓库',
				icon: 'none'
			})
			utils.ttsspke('没有选择仓库，请先选择仓库')
			return
		}

		let resdata = await preserveCurrentWarehouse(details.checkitem)
		uni.setStorageSync('checkname', details.checkitem)
		uni.switchTab({
			url: '/pages/index/index'
		})
	}

	function settips() {
		// tip.value.setisshow(false)
		// tip.value.setdetails({
		// 	title:'确认是否登录',
		// 	content:'您确认登录吗您确认您确认登录吗您确认登录吗登录吗您确认登录吗？',
		// 	confirmTxt:'登录',
		// 	isshow:true
		// })
		// tip.value.setdetails({
		// 	title:'提示',
		// 	content:'请确认账号密码正确，多次错误后禁止登录',
		// 	confirmTxt:'确认',
		// 	isshow:true,
		// 	isshowcancel:false,
		// 	success:()=>{
		// 		tip.value.setisshow(false)
		// 	},
		// 	cancel:()=>{
		// 		tip.value.setisshow(false)
		// 	},
		// 	close:()=>{
		// 		tip.value.setisshow(false)
		// 	}
		// })
	}
	async function submitlogin() {
		try {
			let data = {
				"grant_type": 'password',
				'scope': 'all',
				'username': details.username,
				'password': details.password,
				'tenantId': details.tenantId,
				'isLogin': true
			}
			uni.showLoading({
				mask: true,
				title: '登录中'
			})
			let response = await oauthtoken(data)
			console.log(response);
			if (response?.refresh_token) {
				setloctuser(response)
				uni.setStorageSync('checkname', {
					warehouse_id: response.detail.warehouse_id,
					warehouse_name: response.detail.warehouse_name,
					name: response.detail.warehouse_name,
				})
				if (response.detail.warehouse_id) {
					uni.switchTab({
						url: '/pages/index/index'
					})
					return
				}

				let res = await getMyWarehouseList({})
				details.warehouseList = res.data
				if (details.warehouseList.length == 1) {
					let resdata = await preserveCurrentWarehouse(details.warehouseList[0])
					uni.setStorageSync('checkname', details.warehouseList[0])
					uni.switchTab({
						url: '/pages/index/index'
					})
					return
				}
				details.showck = true

			} else {
				tip.value.setdetails({
					title: '提示',
					content: '请确认账号密码正确，多次错误后禁止登录',
					confirmTxt: '确认',
					isshow: true,
					isshowcancel: false,
					success: () => {
						tip.value.setisshow(false)
					},
					cancel: () => {
						tip.value.setisshow(false)
					},
					close: () => {
						tip.value.setisshow(false)
					}
				})
				console.log('登录错误');
			}
		} catch (err) {
			console.log('err :>> ', err);
			//TODO handle the exception
		} finally {
			// 关闭loading效果
			uni.hideLoading()
		}
	}
	function setisremember() {
		details.isremember = !details.isremember
		uni.setStorageSync('isremember', details.isremember)
	}
	function back() {
		uni.navigateBack()
	}
	function setloctuser(userinfo : any) {
		// 将数据存入本地和仓库
		uni.setStorageSync('access_token', userinfo.access_token)
		HANDLE_ACCTOKEN('userinfo.access_token')
		uni.setStorageSync('refresh_token', userinfo.refresh_token)
		HANDLE_REFTOKEN(userinfo.refresh_token)
		uni.setStorageSync('userinfo', userinfo)
		HANDLE_USERINFO(userinfo)
		uni.removeStorageSync('authbuts')
		uni.removeStorageSync('homerouter')
		if (details.isremember) {
			let user = {
				tenantId: details.tenantId,
				password: details.password,
				username: details.username
			}
			uni.setStorageSync('loginuser', user)
		}

	}
	const { checkitem, warehouseList, showck, username, password, tenantId, isremember } = toRefs(details)
</script>

<style lang="scss">
	.bgmabx {
		position: fixed;
		left: 0;
		top: 0;
		background-color: #00000050;
		width: 100vw;
		height: 100vh;
		z-index: 9999999999999;

		.changkus {
			width: 100vw;
			box-sizing: border-box;
			background-color: #FFFFFF;
			position: absolute;
			bottom: 0;
			left: 0;
			border-radius: 30upx 30upx 0 0;
			box-sizing: border-box;

			// padding: 30upx 0;
			.tis {
				position: relative;
				display: flex;
				align-items: center;
				flex-direction: column;
			}

			.bgimgs {
				position: absolute;
				left: 0;
				top: 0;
				width: 100vw;
				height: 100%;
			}

			.ckbgcc {
				position: absolute;
				top: -150upx;
				right: 20upx;
				width: 260upx;
				height: 260upx;
			}

			.titlck {
				width: 650upx;
				font-size: 34upx;
				font-weight: 500;
				color: #020B18;
				padding-top: 30upx;
			}

			.scvuew {
				width: 576upx;
				height: 470rpx;
				margin-top: 40upx;
				margin-bottom: 20upx;

				.maboxs {
					display: flex;
					flex-wrap: wrap;
					align-items: center;

					.xzck {
						background-color: #faf2e9 !important;
						border-color: #D3832A !important;
						color: #D3832A !important;
					}

					.items {
						&:nth-child(odd) {
							margin-right: 20upx;
						}

						width: 272upx;
						height: 72upx;
						background-color: #FFFFFF;
						border-radius: 8upx 8upx 8upx 8upx;
						opacity: 1;
						border: 2upx solid #EEEEEE;
						display: flex;
						align-items: center;
						justify-content: center;
						font-size: 32rpx;
						font-weight: 400;
						color: #90A0AF;
						margin-bottom: 20upx;
					}
				}
			}

			.submitcheck {
				width: 686upx;
				height: 100upx;
				background: #D3832A;
				border-radius: 16upx;
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 32upx;
				font-weight: 400;
				color: #FFFFFF;
				margin-bottom: 30upx;
				position: relative;
			}
		}
	}

	.bgimgmabx {
		width: 100vw;
		height: 100vh;
		position: absolute;
		left: 0;
		top: 0;

	}

	.backimg {
		width: 40upx;
		height: 40upx;
		position: absolute;
		left: 50upx;
		z-index: 9;
		top: 70upx;
		transform: rotate(180deg);
	}

	.maboxview {
		position: relative;
		width: 100vw;
		height: 100vh;
		display: flex;
		flex-direction: column;
		align-items: center;
		// justify-content: center;
	}

	.tophi {
		width: 600upx;
		margin-top: 240upx;

		>view:nth-of-type(1) {
			width: 250upx;
			font-size: 72upx;
			font-weight: 700;
			line-height: 104upx;
			background-image: linear-gradient(275deg, rgba(9, 44, 77, 0) 0%, #092C4D 100%);
			-webkit-background-clip: text;
			-webkit-text-fill-color: transparent;
		}

		>view:nth-of-type(2) {
			font-size: 40upx;
			font-weight: 700;
			color: #092C4D;
		}
	}

	.mabox {
		position: absolute;
		bottom: 0upx;
		left: 50%;
		transform: translate(-50%);
		width: 660upx;
		height: 67vh;
		padding: 20upx;
		box-sizing: border-box;
		background-color: #ffffff;
		border-radius: 30upx 30upx 0 0;
		box-shadow: 0upx 2upx 10upx 0upx #e2e2e380;
		padding-bottom: 40upx;

		// .title{
		// 	display: flex;
		// 	align-items: center;
		// 	justify-content: center;
		// 	color: #D3832A;
		// 	font-size: 45upx;
		// 	font-weight: 600;
		// }
		.isrememberpassword {
			display: flex;
			align-items: center;
			justify-content: center;

			>image {
				width: 45upx;
				height: 45upx;
				margin-right: 15upx;
			}

			>view {
				font-size: 28upx;
				color: #092C4D;
			}
		}

		.inptbox {
			display: flex;
			flex-direction: column;
			align-items: center;
			margin-top: 50upx;

			>.inputs {
				display: flex;
				align-items: center;
				justify-content: center;
				margin-bottom: 30upx;

				>view:nth-of-type(1) {
					font-size: 32upx;
					font-weight: 500;
					color: #092C4D;
					margin-right: 20upx;
				}

				>view:nth-of-type(2) {
					width: 400upx;
					height: 80upx;
					background: #F4F8FB;
					border-radius: 8upx;
					opacity: 1;
					padding: 10upx;
					padding-left: 20upx;
					box-sizing: border-box;
					font-size: 24upx;
					font-weight: 400;
					color: #AFB4BA;
					display: flex;
					align-items: center;

					>input {
						flex: 1;
						font-size: 24upx;
					}
				}
			}
		}

		.submit {
			width: 600upx;
			height: 100upx;
			display: flex;
			align-items: center;
			justify-content: center;
			background-color: #D3832A;
			color: #ffffff;
			border-radius: 16upx;
			margin: auto;
			margin-top: 20upx;
			box-sizing: border-box;
		}
	}
</style>