sfms3.0-uniapp/src/pages/login/index.vue

<template>
	<view class="content">
		<image mode="widthFix" class="loginimg" src="../../static/icons_ui/login_bg.png"></image>
		<view class="login_title">
			<text>您好，欢迎使用</text><br>
			WMS仓库管理系统
		</view>
		<view class="bgf login_wrap">
			<view class="loginbox">
				<form>
					<view class="mytab">
						<view class="mytabline" :class="tapstyle == 2?'active_in':''" @click="tapchenge(2)">密码登录</view>
					</view>
					<view class="mybox" v-if="tapstyle == 2">
						<view class="conone">
							<view class="title uni-flex">
								<image class="icon_normal" src="@/static/icons_ui/icon_tenant.svg"></image>
								租户
							</view>
							<view>
								<input class="uni-input" placeholder="请输入租户名" v-model="tenantName" disabled="true" />
							</view>
						</view>
						<view class="conone">
							<view class="title uni-flex">
								<image class="icon_normal" src="@/static/icons_ui/icon_login_user.svg"></image>
								用户名
							</view>
							<view>
								<input class="uni-input" style="padding:25rpx" placeholder="请输入用户名"
									v-model="username" />
							</view>
						</view>
						<view class="conone">
							<view class="title uni-flex">
								<image class="icon_normal" src="../../static/icons_ui/icon_login_password.svg"></image>
								密码
							</view>
							<view class="uni-input-wrapper">
								<input class="uni-input" style="padding:25rpx" placeholder="请输入密码"
									:password="showPassword" v-model="password" />
								<text class="uni-icon" :class="[!showPassword ? 'uni-eye-active' : '']"
									@click="changePassword">&#xe568;</text>
							</view>
						</view>

					</view>
					<view style="display: flex;flex-direction: row;">
						<view class="uni-input-wrapper">
							<input class="" style="height: 80rpx; background-color: #F7F9FF;margin-right: 20rpx;"
								placeholder="请输入验证码" type="number" v-model="code" />
						</view>
						<view class="display: flex; align-items: center; text-center">
							<view class="">
								<image :src="imageSrc" style="width: 260rpx;height: 80rpx;" @click="getCode"></image>
							</view>
							<view style="font-size: 35rpx;color: #476DF5;" @click="getCode"> 获取验证码?</view>
						</view>

					</view>
					<view class="loginbtnbox">
						<button @click="handelerlogin()" class="loginbtn">登录</button>
					</view>
				</form>
			</view>
		</view>
		<com-message ref="comMessageRef" />
	</view>
</template>

<script setup lang="ts">
	import {
		onLoad,
		onShow,
		onNavigationBarButtonTap,
		onReady
	} from '@dcloudio/uni-app'
	import {
		ref,
		getCurrentInstance
	} from 'vue'
	import {
		getCaptchaImage
	} from '@/api/request2.js';
	import {
		useCountStore
	} from '@/store'
	// 获取自定义的store
	const store = useCountStore()
	const { proxy } = getCurrentInstance()
	const smloginmsg = ref('')
	const tenantName = ref('闻荫源码')
	const username = ref('')
	const password = ref('')
	const tapstyle = ref(2)
	const loading = ref(false)
	const showPassword = ref(true)
	const imageSrc = ref('')
	const code = ref('')
	const uuid = ref('')
	const comMessageRef = ref('')
	// 返回首页
	onNavigationBarButtonTap((e) => {
		if (e.index === 0) {
			uni.navigateTo({
				url: "/pages/config/config"
			})
		}
	})
	onReady(() => {
		console.log()
	})
	onLoad(() => {
		uni.clearStorageSync()
		uni.clearStorage(); //清除缓存
		if (import.meta.env.VITE_USER_NODE_ENV === 'development') {
			username.value = "admin"
			password.value = "123456";
		}
		uni.setNavigationBarColor({
			frontColor: '#ffffff',
			backgroundColor: "#476DF5 !important"
		})

		// #ifdef APP-PLUS
		uni.setNavigationBarColor({
			frontColor: "#ffffff",
			backgroundColor: "#476DF5"
		})
		// #endif
		getCode()
	})
	const handelerlogin = () => {
		if (username.value === '') {
			proxy.$modal.showToast('用户名不能为空')
		} else if (password.value === '') {
			proxy.$modal.showToast('密码不能为空')
		} else if (code.value === '') {
			proxy.$modal.showToast('验证码不能为空')
		} else {
			// console.log("用户名：", this.username, "密码：", this.password, this.tapstyle, this.smloginmsg)
			let logininfo = {
				username: "",
				password: "",
				code: "",
				uuid: ""
			}
			//密码登录
			if (tapstyle.value == 2) {
				logininfo.username = username.value;
				logininfo.password = password.value
				logininfo.code = code.value;
				logininfo.uuid = uuid.value;
			} else if (tapstyle.value == 1) {
			}
			let params = JSON.stringify(logininfo);
			newLogin(logininfo)
		}
	}
	const newLogin = async (logininfo) => {
		proxy.$modal.loading('正在登录')
		await store.Login(logininfo)
		proxy.$modal.closeLoading()
		uni.setStorageSync('hasLogin', true)
		uni.switchTab({
			url: '/pages/index/index'
		});
		uni.setStorageSync('username', username.value);
	}
	const tapchenge = (e) => {
		tapstyle.value = e
	}
	const onchange = (e) => {
		const value = e.detail.value
	}
	const changePassword = () => {
		showPassword.vlaue = !showPassword.vlaue;
	}
	const showErrorMessage = (message) => {
		console.log(comMessag1e.value)
		comMessageRef.value.showErrorMessage(message, res => { });
	}
	const getCode = () => {
		getCaptchaImage().then(res => {
			if (res) {
				var code = res.data.img;
				let base64 = 'data:image/jpeg;base64,' + code
				imageSrc.value = base64.replace(/[\r\n]/g, "")
				uuid.value = res.data.uuid
			}
		}).catch(error => {
			showErrorMessage(error)
		})
	}
</script>

<style>
	page {
		background-color: #fff;
	}

	.content {
		width: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		background-color: #FFFFFF;
	}

	.cs {
		margin-bottom: 20upx;
	}

	.mytab {
		display: flex;
	}

	.mytabline {
		flex: 1;
		text-align: center;
		padding: 20rpx 0;
		color: #666;
		position: relative;
		font-size: 0.875rem;
	}

	.active_in {
		color: #101010;
		font-weight: bold;
	}

	.active_in::after {
		content: "";
		position: absolute;
		bottom: 0;
		left: 50%;
		transform: translateX(-50%);
		height: 8rpx;
		background-color: #007AFF;
		width: 40rpx;
		border-radius: 8rpx;
	}

	.loginbox {
		box-sizing: border-box;
		padding: 30rpx;

	}

	.loginimg {
		width: 100%;
	}

	.logo {
		height: 200rpx;
		width: 200rpx;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 50rpx;
	}

	.conone {
		margin: 30rpx 0;
		align-items: center;
	}

	.conone .uni-input-wrapper {
		position: relative;
	}

	.conone .uni-input {
		background-color: #F7F9FF;
		height: 90rpx;
		line-height: 90rpx;
		padding: 0 0 0 20rpx;
	}

	.conone .title {
		font-size: .875rem;
		align-items: center;
		margin-bottom: 20rpx;
		letter-spacing: 1rpx;
	}

	.conone .title image {
		margin-right: 6rpx;
	}

	.uni-easyinput .is-input-border {
		border-color: transparent !important;
	}

	.loginbtnbox {
		margin-top: 40rpx;
	}

	.loginbtn {
		color: #fff;
		font-size: 0.875rem;
		height: 100rpx;
		line-height: 100rpx;
		background: #5d66de;
		border-radius: 8rpx;
		border: none;
		outline: none;
	}

	.conone .uni-icon {
		float: right;
		position: absolute;
		right: 20rpx;
		color: #ccc;
		font-size: 1.25rem;
	}

	.conone .uni-eye-active {
		color: #5a7cf3;
	}
</style>