SmartStorage/pages/login/login.vue

<template>
	<view>
		<view class="upper-bgd">
			<view class="logo">
				<image src="../../static/logo.png" mode=""></image>
			</view>
			<view class="tit">
				智慧仓储管理平台
			</view>
		</view>
		<view class="switch-log">
			<view :class="[{ active: switchStatus == 1 }]" @click="switchUpper(1)">
				账号登录
			</view>
			<view :class="[{ active: switchStatus == 2 }]" @click="switchUpper(2)">
				手机登录
			</view>
		</view>
		<view class="login-area">
			<uni-forms v-show="switchStatus == 1" ref="accountForm" :modelValue="accountFormData" :rules="accountRules"
				class="form-area" label-position="top">
				<uni-forms-item name="username" required label="用户名" label-width="100">
					<uni-easyinput placeholder="请输入用户名称" maxlength="60"
						v-model="accountFormData.username"></uni-easyinput>
				</uni-forms-item>
				<uni-forms-item name="password" required label="密码" label-width="100">
					<uni-easyinput type="password" placeholder="请输入密码" maxlength="60"
						v-model="accountFormData.password"></uni-easyinput>
				</uni-forms-item>
				<text style="
						width: 100%; 
						display: flex; 
						justify-content: flex-end;
						color: #3689FF;
						font-size: 14px;
					">
					忘记密码
				</text>
				<button class="submit-btn" @click="accountSubmit">登录</button>
			</uni-forms>
			<uni-forms v-show="switchStatus == 2" ref="veriForm" :modelValue="veriFormData" :rules="veriRules"
				class="form-area" label-position="top">
				<uni-forms-item name="phone" required label="手机号码" label-width="100">
					<uni-easyinput placeholder="请输入手机号码" type="number" v-model="veriFormData.phone"
						maxlength="11"></uni-easyinput>
				</uni-forms-item>
				<uni-forms-item name="code" required label="验证码" label-width="100">
					<uni-easyinput type="number" maxlength="6" placeholder="请输入验证码"
						v-model="veriFormData.code"></uni-easyinput>
					<button class="count-down" :disabled="sendDisabled" @click="sendVeriCode" style="font-size: 14px;">
						<span v-if="countDownStatus == 0">发送验证码</span>
						<span v-if="countDownStatus == 1">
							{{ countDown }}s
						</span>
					</button>
				</uni-forms-item>
				<button class="submit-btn" @click="veriSubmit">登录</button>
			</uni-forms>
		</view>
		<u-loading-page :loading="showLoading" color="#000" loading-text="登录中,请稍后..."></u-loading-page>
	</view>
</template>

<script>
import { authPath, publicPath, systemPath } from '../../public'
export default {
	data() {
		return {
			showLoading: false,
			accountFormData: {
				username: '',
				password: ''
			},
			veriFormData: {
				phone: '',
				code: ''
			},
			switchStatus: 1,
			countDown: 60,
			countDownStatus: 0,
			sendDisabled: false,
			givenCode: '',
			accountRules: {
				username: {
					rules: [
						{
							required: true,
							errorMessage: '请输入用户名称！'
						}
					]
				},
				password: {
					rules: [
						{
							required: true,
							errorMessage: '请输入密码！'
						}
					]
				}
			},
			veriRules: {
				phone: {
					rules: [
						{
							required: true,
							errorMessage: '请输入手机号码！'
						}
					]
				},
				code: {
					rules: [
						{
							required: true,
							errorMessage: '请输入验证码！'
						}
					]
				}
			}
		}
	},
	methods: {
		switchUpper(count) {
			this.switchStatus = count
		},
		sendVeriCode() {
			let that = this
			let phoneReg = /^(?:(?:\+|00)86)?1[3-9]\d{9}$/
			if (!phoneReg.test(that.veriFormData.phone)) {
				uni.showToast({
					icon: 'none',
					title: '请输入正确格式的手机号！'
				})
			} else {
				that.$api.login.codeLogin({
					phone: String(that.veriFormData.phone)
				}).then(res => {
					console.log(res);
				}).catch(err => {
					console.log(err);
				})
				that.countDownStatus = 1
				that.sendDisabled = true
				let timeInterval = setInterval(() => {
					that.countDown -= 1
				}, 1000)
				let timeOut = setTimeout(() => {
					that.countDownStatus = 0
					that.countDown = 60
					that.sendDisabled = false
					clearInterval(timeInterval)
					clearTimeout(timeOut)
				}, 1000 * 60)
			}
		},
		veriSubmit() {
			let that = this
			that.$refs.veriForm.validate().then(formRes => {
				that.showLoading = true
				console.log(formRes);
				that.$api.login.checkCode(formRes).then(res => {
					console.log(res);
					if (res.data.code == 200) {
						uni.setStorageSync('userInfo', res.data.data.login_user)
						uni.setStorageSync('token', res.data.data.access_token)
						uni.setStorageSync('roles', res.data.data.login_user.roles)
						uni.setStorageSync('deptId', res.data.data.login_user.sysUser.dept.deptId)
						uni.showToast({
							icon: 'none',
							title: '登录成功！',
							success: () => {
								that.showLoading = false
								uni.switchTab({
									url: '/pages/index/index'
								})
							}
						})
					} else {
						uni.showToast({
							icon: 'none',
							title: res.data.msg,
							success: () => {
								that.showLoading = false
							}
						})
					}
				}).catch(err => {
					console.log(err);
				})
			})
		},
		accountSubmit() {
			let that = this
			that.$refs.accountForm.validate().then(formData => {
				that.showLoading = true
				console.log(formData);
				that.$api.login.log(formData).then(res => {
					console.log(res);
					if (res.data.code == 200) {
						uni.setStorageSync('userInfo', res.data.data.login_user)
						uni.setStorageSync('token', res.data.data.access_token)
						uni.setStorageSync('roles', res.data.data.login_user.roles)
						uni.setStorageSync('deptId', res.data.data.login_user.sysUser.dept.deptId)
						uni.showToast({
							icon: 'none',
							title: '登录成功！',
							success: () => {
								that.showLoading = false
								uni.switchTab({
									url: '/pages/index/index'
								})
							}
						})
					} else {
						uni.showToast({
							icon: 'none',
							title: res.data.msg,
							success: () => {
								that.showLoading = false
							}
						})
					}
				}).catch(err => {
					console.log(err);
				})
			})
		}
	}
}
</script>

<style lang="scss">
body {
	background: url('/static/log-bgd.png');
	background-repeat: no-repeat;
	background-size: 100% 100%;
}

.upper-bgd {
	width: 100%;
	height: 25vh;
	box-sizing: border-box;
	padding-top: 10vh;

	.logo {
		width: 20%;
		height: 10vh;
		margin: 0 auto;
		margin-bottom: 2vh;

		image {
			width: 100%;
			height: 100%;
		}
	}

	.tit {
		width: 100%;
		font-size: 20px;
		font-weight: bold;
		display: flex;
		justify-content: center;
		color: #3C87F3;
	}
}

.switch-log {
	width: 80%;
	height: 100rpx;
	margin: 6vh auto;
	margin-bottom: 1vh;
	display: flex;
	justify-content: space-around;
	align-items: center;
	font-size: 26rpx;

	.active {
		font-size: 14px;
		font-weight: bold;
		border-bottom: 4px solid #B4D0FF;
		border-bottom-left-radius: 15rpx;
		border-bottom-right-radius: 15rpx;
	}
}

.login-area {
	width: 80%;
	box-sizing: border-box;
	padding: 3vh;
	margin: 0 auto;
	background-color: #fff;
	border-radius: 20rpx;
	box-shadow: 0 3px 5px #E6EEFE;

	.uni-forms-item__content[data-v-61dfc0d0] {
		display: flex;
	}

	.submit-btn {
		background-color: #3888FF;
		margin: 10vh auto;
		margin-bottom: 0;
		border-radius: 50rpx;
		color: #fff;
		font-size: 26rpx;
	}
}
</style>