GCLS_Page_Mobile/pages/login/index.vue

<template>
	<view>
		<navbar :back="false" />
		<!-- 登录 -->
		<view class="login">
			<view class="title-big">欢迎登录</view>
			<view class="title">国际中文智慧教育引擎</view>
			<uni-forms ref="form" :model="formData" :rules="rules">
				<uni-forms-item name="user_type">
					<uni-data-select class="login-text" v-model="value" :localdata="userTypeList" @change="change"
						placeholder="请选择登录身份" />
				</uni-forms-item>
				<uni-forms-item name="user_name">
					<uni-easyinput class="login-text" type="text" v-model="formData.user_name" placeholder="输入邮箱、手机号或用户名"
						:styles="login_text_styles" :placeholderStyle="placeholderStyle" />
				</uni-forms-item>
				<uni-forms-item name="password">
					<uni-easyinput class="login-text" type="password" v-model="formData.password" placeholder="输入登录密码"
						:styles="login_text_styles" :placeholderStyle="placeholderStyle" />
				</uni-forms-item>
				<uni-forms-item name="verification_code_image_text" class="verification-code">
					<uni-easyinput class="login-text" type="text" v-model="formData.verification_code_image_text"
						placeholder="输入验证码" :styles="login_text_styles" :placeholderStyle="placeholderStyle" />
				</uni-forms-item>
				<image v-if="image_content_base64.length > 0" :src="`data:image/jpg;base64,${image_content_base64}`"
					@click="updateVerificationCode" mode="widthFix">
				</image>

			</uni-forms>
			<view class="forget">
				<text @click="forget">忘记密码？</text>
			</view>
			<button class="submit" @click="submitForm">登 录</button>
		</view>
	</view>
</template>

<script>
	import md5 from 'md5';
	import {
		GetVerificationCodeImage,
		GetLogo,
		ParseAccessToken
	} from '@/api/api';
	import {
		loginControlIsEffectiveUser
	} from '@/api/user.js';
	import {
		getToken,
		setConfig,
		getConfig,
		userTypeList
	} from '@/utils/auth';
	import Cookies from "js-cookie";
	import {
		isEnable
	} from '../answer_question/common/data/common';

	export default {
		data() {
			return {
				// 状态栏高度
				statusBarHeight: 0,
				// 导航栏高度
				navBarHeight: 82 + 11,
				value: '',
				userTypeList,
				// 校验表单数据
				formData: {
					user_type: '',
					user_name: '',
					password: '',
					is_password_md5: 'true',
					verification_code_image_id: '',
					verification_code_image_text: ''
				},
				image_content_base64: '',
				// 校验规则
				rules: {
					user_type: {
						rules: [{
							required: true,
							errorMessage: '请选择登录身份'
						}]
					},
					user_name: {
						rules: [{
							required: true,
							errorMessage: '请输入邮箱、手机号或用户名'
						}]
					},
					password: {
						rules: [{
							required: true,
							errorMessage: '请输入登录密码',
						}]
					},
					verification_code_image_text: {
						rules: [{
							required: true,
							errorMessage: '请输入验证码'
						}]
					}
				},
				placeholderStyle: "color:#555454;font-size:32rpx",
				login_text_styles: {
					color: '#555454',
					borderColor: '#8E8383',
					backgroundColor: '#f9f8f9'
				},
				share_record_id: ''
			};
		},
		onReady() {
			// 需要在onReady中设置规则
			this.$refs.form.setRules(this.rules);
		},
		onLoad(options) {
			if (options && '' != options.share_record_id) {
				this.share_record_id = options.share_record_id;
			}
			this.updateVerificationCode();
			var that = this;
			//有效访问令牌下无需登录
			uni.getStorage({
				key: 'AccessToken',
				success: function(res) {
					ParseAccessToken({
						access_token: res.data
					}).then(({
						is_effective
					}) => {
						if (is_effective == 'true') {
							if (that.share_record_id) {
								uni.navigateTo({
									url: '/pages/answer_question/answer/index?share_record_id=' + that.share_record_id +
										'&isScanCode=true'
								})
							} else {
								uni.switchTab({
									url: '/pages/tabbar/task/index'
								})
							}
						} else {
							that.getLogo();
						}
					});
				}
			})
		},
		//第一次加载时调用
		created() {
			//获取手机状态栏高度
			this.statusBarHeight = uni.getSystemInfoSync()['statusBarHeight'];
		},
		methods: {
			updateVerificationCode() {
				GetVerificationCodeImage().then(({
					image_id,
					image_content_base64: image
				}) => {
					this.formData.verification_code_image_id = image_id;
					this.image_content_base64 = image;
				});
			},
			getLogo() {
				GetLogo().then((res) => {
					setConfig(res);
				});
			},

			change(e) {
				this.formData.user_type = e;
			},

			submitForm() {
				this.$refs.form.validate((valid) => {
					if (valid) return false;
					let _form = {
						...this.formData,
						password: md5(this.formData.password).toUpperCase()
					};
					this.$store
						.dispatch('user/login', _form)
						.then(() => {
							const token = getToken();
							if (token) {
								uni.setStorage({
									key: 'AccessToken',
									data: getToken().access_token
								});
							}
							if (this.share_record_id) {
								uni.navigateTo({
									url: '/pages/answer_question/answer/index?share_record_id=' + this.share_record_id +
										'&isScanCode=true'
								})
							} else {
								uni.switchTab({
									url: '/pages/tabbar/task/index'
								})
							}

						})
						.catch((res) => {
							this.updateVerificationCode();
						});
				})

			},
			forget() {
				uni.navigateTo({
					url: '/pages/login/Forget'
				})
			}

		}
	}
</script>

<style lang="scss" scoped>
	.login {
		width: 90%;
		margin: 172rpx auto 0;

		.title-big {
			margin: 0;
			font-size: 74rpx;
			font-weight: 700;
			line-height: 94rpx;
			color: #000;
		}

		.title {
			margin: 16rpx 0 72rpx;
			font-size: 56rpx;
			font-weight: 400;
			line-height: 70rpx;
			color: #000;
		}

		.uni-forms-item:first-child {
			border: 1px solid #8E8383;
			background-color: $uni-bg-color-grey;
			border-radius: 8rpx;

			/deep/ .uni-select {
				border: 0;
				background-color: $uni-bg-color-grey;
			}

			/deep/ .uni-select__input-placeholder {
				color: #555454;
				background-color: $uni-bg-color-grey;
				font-size: 32rpx;
			}
		}

		.login-text {
			display: flex;
			height: 98rpx;
			margin: -4rpx auto;
		}

		.verification-code {
			float: left;
			width: calc(100% - 300rpx);
		}

		image {
			margin-top: -4rpx;
			float: right;
			width: 264rpx;
		}

		.forget {
			clear: both;
			text-align: right;
			margin-bottom: 46rpx;
			color: #000000;
			border-radius: 8rpx;
			margin-top: -16rpx;
		}

		.submit {
			background-color: #175DFF;
			width: 100%;
			height: 98rpx;
			border-radius: 10rpx;
			font-size: 36rpx;
			color: #fff;
		}
	}
</style>