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

<template>
	<view class="content">
		<!-- <image mode="widthFix" class="loginimg" src="../../static/login.png"></image> -->
		<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 == 1?'active':''" @click="tapchenge(1)">扫码登录</view> -->
						<view class="mytabline" :class="tapstyle == 2?'active_in':''" @click="tapchenge(2)">密码登录</view>
					</view>

					<!-- <view class="mybox" v-if="tapstyle == 1">
						<view class="conone">
							<uni-easyinput prefixIcon="scan" class="uni-input" type="password" v-model="smloginmsg"
								name="nickname" placeholder="扫码登录"></uni-easyinput>
						</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" 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" placeholder="请输入密码" :password="showPassword"
									v-model="password" />
								<text class="uni-icon" :class="[!showPassword ? 'uni-eye-active' : '']"
									@click="changePassword">&#xe568;</text>
							</view>
							<!-- 	<view class="uni-input-wrapper">
							  <input class="uni-input"  type="password" name="password"
							  :password="showPassword"
							  	placeholder="请输入密码" v-model="password"></input>
							    <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">
							<input class="" placeholder="请输入验证码"
							v-model="code"
								style="background-color: lightgray;padding-top: 40rpx;padding-bottom: 40rpx;margin-right: 20rpx;" />
						</view> -->
						<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;"></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>
		<comMessage ref="comMessage"></comMessage>
	</view>
</template>

<script>
	import comMessage from '@/mycomponents/common/comMessage.vue'
	import {
		login,
		authorize,
		getUserInfo,
	} from '@/api/request.js';
	import {
		getCaptchaImage
	} from '@/api/request2.js';
	import {
		mapState,
		mapMutations
	} from 'vuex'

	export default {
		components: {
			comMessage
		},
		data() {
			return {
				smloginmsg: "",
				tenantName: "闻荫源码",
				username: "",
				password: "",
				tapstyle: 2,
				loading: false,
				showPassword: true,
				imageSrc: "",
				code: "",
				uuid: ""
			}
		},
		// computed: mapState(['forcedLogin', 'hasLogin']),
		mounted() {
			
			localStorage.clear();
			sessionStorage.clear();
			uni.clearStorage(); //清除缓存
			if (process.env.NODE_ENV === 'development') {
				this.username = "admin"
				this.password = "123456";
			}
			uni.setNavigationBarColor({
				frontColor: '#ffffff',
				backgroundColor: "#476DF5 !important"
			})
		},
		//返回首页
		onNavigationBarButtonTap(e) {
			if (e.index === 0) {
				uni.navigateTo({
					url:"/pages/config/config"
				})
			} 
			
		},
		onLoad() {
			getCaptchaImage().then(res => {
				if (res) {
					var code = res.data.img;
					let base64 = 'data:image/jpeg;base64,' + code
					// console.log("图标", base64)
					this.imageSrc = base64.replace(/[\r\n]/g, "")
					this.uuid = res.data.uuid
				}
			}).catch(error=>{
				this.showErrorMessage(error);
			})
		},
		methods: {
			// ...mapMutations(['login']),
			handelerlogin() {
				if (this.username === '') {
					uni.showToast({
						title: '用户名不能为空',
						icon: 'none',
						mask: true
					})
				} else if (this.password === '') {
					uni.showToast({
						title: '密码不能为空',
						icon: 'none',
						mask: true
					})
				} else if (this.code === '') {
					uni.showToast({
						title: '验证码不能为空',
						icon: 'none',
						mask: true
					})
				} else {
					// console.log("用户名：", this.username, "密码：", this.password, this.tapstyle, this.smloginmsg)
					let logininfo = {
						username: "",
						password: "",
						code: "",
						uuid: ""
					}
					if (this.tapstyle == 2) //密码登录
					{
						logininfo.username = this.username;
						logininfo.password = this.password
						logininfo.code = this.code;
						logininfo.uuid = this.uuid;
					} else if (this.tapstyle == 1) {
						// let arr = Base64.decode(this.smloginmsg).split(':')
						// logininfo.username = arr[0];
						// logininfo.password = arr[1]
					}
					let params = JSON.stringify(logininfo);
					console.log('params', params);
					this.newLogin(logininfo)

				}
			},

			async newLogin(logininfo) {
				uni.showLoading({
					title:"正在登录",
					mask:true
				})
				await this.$store.dispatch('Login', logininfo);
				// await this.$store.dispatch('GetTenantIdInfo', this.tenantName)
				uni.hideLoading()
				sessionStorage.setItem('hasLogin', true);
				uni.switchTab({
					url: '/pages/index/index'
				});
			},


			tapchenge(e) {
				this.tapstyle = e
			},
			onchange(e) {
				const value = e.detail.value
			},
			changePassword: function() {
				this.showPassword = !this.showPassword;
			},
			showErrorMessage(message) {
				this.$refs.comMessage.showErrorMessage(message, res => {
					if (res) {

					}
				});
			},
			getCode() {
				getCaptchaImage().then(res => {
					if (res) {
						var code = res.data.img;
						let base64 = 'data:image/jpeg;base64,' + code
						this.imageSrc = base64.replace(/[\r\n]/g, "")
						this.uuid = res.data.uuid
					}
				})
			}
		}
	}
</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>