read_opc/reado-app/pages/login/index.vue

<template>
	<view class="content">
		<view class="text-area">
			<h3 class="title">Easy Industrial Report</h3>
			<view calss="loginForm">
				<u--form ref="loginForm" :model="loginForm" :rules="rules" labelWidth="80" errorType="toast">
					<u-form-item label="账号" prop="userName" borderBottom class="form-item">
						<u--input v-model="loginForm.userName" placeholder="请输入账号" clearable></u--input>
					</u-form-item>
					<u-form-item label="密码" prop="password" borderBottom class="form-item">
						<u--input v-model="loginForm.password" placeholder="请输入密码" type="password" clearable></u--input>
					</u-form-item>
					<u-row class="form-item">
						<u-col span="8.5">
							<u-form-item label="验证码" prop="verifyCode" borderBottom>
								<u--input v-model="loginForm.verifyCode" placeholder="请输入验证码" clearable>
								</u--input>
							</u-form-item>
						</u-col>
						<u-col span="3.5">
							<u--image :src="src" @click="getCodeImage" width="200rpx" height="100rpx"
								mode="scaleToFill">
							</u--image>
						</u-col>
					</u-row>
					<!-- #ifdef APP-PLUS -->
					<!-- <u-form-item label="自动登录" style="position:relative;" class="form-item">
						<u-switch v-model="loginBtn" class="login-btn"></u-switch>
					</u-form-item> -->
					<!-- #endif -->
					<view class="form-btn">
						<u-button type="primary" text="登录" @click="getHttpPublicKey"></u-button>
					</view>
				</u--form>
			</view>
		</view>
		<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
	import {
		setPubKey,
		getPubKey
	} from '@/utils/auth.js'
	export default {
		data() {
			return {
				//表单
				loginForm: {
					userName: null,
					password: null,
					verifyCode: null,
					publicKey: null
				},
				//表单验证
				rules: {
					userName: [{
						required: true,
						message: '请输入账号',
						trigger: 'blur'
					}],
					password: [{
						required: true,
						message: '请输入密码',
						trigger: 'blur'
					}],
					verifyCode: [{
						required: true,
						message: '请输入验证码',
						trigger: 'blur'
					}]
				},
				//自动登录按钮
				loginBtn: false
			}
		},
		onShow() {
			this.getCodeImage()
			this.loginForm = {
				userName: null,
				password: null,
				verifyCode: null,
				publicKey: null
			}
		},
		computed: {
			src() {
				return this.$store.getters.codeUrl
			}
		},
		methods: {
			//登录按钮
			login(publicKey) {
				this.loginForm.publicKey = publicKey
				this.$refs.loginForm.validate().then(res => {
					this.$store.dispatch('user/login', this.loginForm).then(res => {
						if (res.data.code === 200) {
							uni.switchTab({
								url: '/pages/reportForm/index'
							})
						} else {
							this.$refs.uToast.show({
								message: res.data.msg,
								duration: 1000
							})
							this.getCodeImage()
							this.loginForm.verifyCode = null
						}
					})
				}).catch(errors => {
					uni.$u.toast(errors[0].message)
				})
			},
			getHttpPublicKey() {
				this.$store.dispatch('user/getPubKey').then(res => {
					if (res.data.code === 200) {
						this.login(res.data.data);
					} else {
						this.$refs.uToast.show({
							message: res.data.msg ? res.data.msg : "请重新刷新获取公钥",
							duration: 1000
						})
					}
				})
			},
			//获取验证码接口
			getCodeImage() {
				try{
					this.$store.dispatch('user/getCodeImage')
				}catch(e){
					alert(JSON.stringify(e))
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	::v-deep .u-line {
		border-bottom: 10rpx solid rgb(214, 215, 217) !important;
	}

	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		text-align: center;
	}

	.text-area {
		border-radius: 6rpx;
		background: #ffffff;
		width: 600rpx;
		padding: 25rpx;
		margin-top: 300rpx;

		.title {
			color: #707070;
			margin-bottom: 50rpx;
		}
	}

	.form-item {
		margin-bottom: 30rpx;
	}

	.login-btn {
		position: absolute;
		right: 0
	}
</style>