lm-safe-app/pages/login/index.vue

<template>
	<view class="my-page">
		<view class="header">
			<view class="login-title-wrap">
				<text class="login-title">登录</text>
			</view>
			<view class="sub-title-wrap">
				<text class="sub-title">欢迎进入矿山安全生产标准化系统</text>
			</view>
		</view>
		<view class="form">
			<u--form :model="dataModel" :rules="rules" ref="form">
				<view class="title">账号</view>
				<u-form-item prop="username">
					<u--input v-model="dataModel.username" placeholder='请输入账号' placeholderStyle="color: grey;" :customStyle="{backgroundColor: '#fafafa', border: 'none'}" />
				</u-form-item>
				<view class="title">密码</view>
				<u-form-item prop="password">
					<u-input v-model="dataModel.password" placeholder='请输入密码' placeholderStyle="color: grey;" :customStyle="{backgroundColor: '#fafafa', border: 'none'}" :password="!showPassword">
						<u-icon slot="suffix" class="eye-icon" size="24" @click="switchShowPassword" :name="showPassword === true ? 'eye-fill' : 'eye-off'"></u-icon>
					</u-input>
				</u-form-item>
				<view class="uni-column remember-me">
					<checkbox value="remember" /><text>记住我</text>
				</view>
				<view class="uni-btn-v">
					<button type="primary" @click="formSubmit">登录</button>
				</view>
			</u--form>
		</view>
	</view>
</template>

<script>
	import {
		toLogin
	} from '../../services/app'
	import MD5 from 'md5'

	export default {
		data() {
			return {
				dataModel: {
					username: '',
					password: ''
				},
				rules: {
					username: {
						required: true,
						message: '请输入账号',
						trigger: ['blur', 'change']
					},
					password: {
						required: true,
						message: '请输入密码',
						trigger: ['blur', 'change']
					}
				},
				showPassword: false
			}
		},
		onLoad() {
			const token = uni.getStorageSync('accessToken')
			const orgId = uni.getStorageSync('orgId')
			const Tenant = uni.getStorageSync('Tenant')
			const appInfo = uni.getStorageSync('appInfo')
			if (token && orgId && Tenant && appInfo) {
				uni.switchTab({
					url: '/pages/index/index2'
				})
			}
		},
		methods: {
			switchShowPassword() {
				this.showPassword = !this.showPassword
			},

			formSubmit: function(e) {
				this.$refs.form.validate().then(res => {
					// #ifdef APP-PLUS
					plus.runtime.getProperty(plus.runtime.appid, (widgetInfo) => {
						// 增量版本： widgetInfo.version
						// 全量版本：plus.runtime.version
						var formdata = this.dataModel
						toLogin({
							username: formdata.username,
							password: MD5(formdata.password),
							device: 'App',
							version: widgetInfo.version,
							grant_type: 0,
							ClientId: 'app'
							// random: verifyRandomCode,
							// verificationCode: verifyCode
						}).then(res => {
							console.log('token:', res)
						})
					})
					// #endif
					// #ifndef APP-PLUS
					var formdata = this.dataModel
					toLogin({
						username: formdata.username,
						password: MD5(formdata.password),
						device: 'H5',
						version: navigator.userAgent.slice(0, 998),
						grant_type: 0,
						ClientId: 'app'
						// random: verifyRandomCode,
						// verificationCode: verifyCode
					}).then(res => {
						console.log('token:', res)
					})

					// #endif

				}).catch(errors => {
					uni.$u.toast('校验失败')
				})
			},
		}
	}
</script>

<style>
	.my-page {
		margin-top: 98px;
		background-image: url("~@/static/img_login_bg@2x.png");
		background-size: 292px 297px;
		background-repeat: no-repeat;
	}

	.my-page .header {
		padding: 0 24px;
	}

	.my-page .header .login-title-wrap {
		margin-bottom: 10px;
	}

	.my-page .header .login-title {
		color: #004f9d;
		font-weight: 700;
		font-size: 32px;
		line-height: 38px;
	}

	.my-page .header .sub-title-wrap {
		margin-bottom: 54px;
	}

	.my-page .header .sub-title {
		color: #999999;
		font-size: 16px;
		line-height: 27px;
	}

	.logo image {
		width: 100px;
		height: 100px;
		border-radius: 50%;
	}

	.form {
		padding: 0 24px;
	}

	.form .title {
		color: #333333;
		font-size: 16px;
		line-height: 24px;
		font-weight: 500;
		/*margin-bottom: 10px;*/
	}

	.form .password-input {
		position: relative;
	}

	.form .password-input .eye-icon {
		position: absolute;
		right: 20px;
		top: 50%;
		margin-top: -12px;
	}

	.remember-me {
		display: flex;
		align-items: center;
		padding: 16px 0
	}

	.remember-me text {
		margin-left: 6px
	}

	.uni-form-item {
		margin-bottom: 18px;
	}

	.uni-form-item .uni-input {
		border-radius: 8px;
		background: #fafafa;
		padding: 12px 16px;
		font-size: 16px;
		line-height: 24px;
		color: #333;
	}
</style>