shanghaiganxiangtuzhuangworkshop_WMS_PDA/pages/login/login.vue

<template>
	<view class="common-container">
		<!-- 登录图片 -->
		<view class="login-banner-box">
			<u--image :showLoading="true" src="/static/images/login-icons/login.png" width="360px" height="240px"></u--image>
		</view>
		<!-- 登录框 -->
		<view class="login-form-box">
			<!-- 登录表单 -->
			<u--form labelPosition="left" :model="loginForm" ref="uForm">
				<u-form-item prop="username" borderBottom>
					<custom-input v-model="loginForm.username" border="none" placeholder="账号" prefixIcon="/static/images/login-icons/account.svg"
						prefixIconStyle="color: #909399" iconSize="32"></custom-input>
				</u-form-item>
				<u-form-item prop="password" borderBottom>
					<custom-input v-model="loginForm.password" border="none" placeholder="密码" prefixIcon="/static/images/login-icons/lock.svg"
						prefixIconStyle="color: #909399" iconSize="32"></custom-input>
				</u-form-item>
				<u-form-item prop="BaseUrl" borderBottom>
					<custom-input v-model="BaseUrl" border="none" placeholder="连接地址,例:127.0.0.1:8888" prefixIcon="/static/images/login-icons/ie.svg"
						prefixIconStyle="color: #909399" iconSize="32">
						<template slot="suffix">
							<u-button type="primary" size="mini" text="修改地址" @click="handlerBaseUrlConfirm"
								shape="circle"></u-button>
						</template>
					</custom-input>
				</u-form-item>
				<u-form-item prop="button" style="margin-top: 60px">
					<u-button @click="handleLogin" type="primary" :color="buttonColor" text="登录"
						shape="circle"></u-button>
				</u-form-item>
			</u--form>
		</view>

		<!-- 无网络处理 -->
		<u-no-network></u-no-network>
		<view class="bangben">版本号：{{ version }}</view>
	</view>
</template>

<script>
	import { getCodeImg } from '@/api/login';
	import { setToken } from '@/utils/auth';
	import { getBaseUrl, setBaseUrl } from '@/utils/baseUrl';
	import { getLoginInfo, setLoginInfo } from '@/utils/loginInfo';
	import config from '@/config';
	export default {
		onLoad() {
			this.version = uni.$u.sys().appWgtVersion;
		},
		data() {
			return {
				// 版本号
				version: '',
				// 验证码相关
				codeUrl: '',
				captchaEnabled: false,
				// 基础URL
				BaseUrl: '127.0.0.1:8888',
				// 按钮颜色
				buttonColor: 'linear-gradient(to right, #3296F9, #235FF5)',
				// 登录表单
				loginForm: {
					username: '',
					password: '',
					code: '',
					uuid: ''
				}
			};
		},
		created() {
			this.init();
			// this.getCode();
		},
		methods: {
			init() {
				// 初始化基础URL
				this.initBaseUrl();
				// 初始化用户登录信息
				this.initLoginInfo();
			},
			// 初始化基础URL
			initBaseUrl() {
				let baseUrl = getBaseUrl();
				if (!baseUrl) {
					baseUrl = '192.168.60.251:8888';
					setBaseUrl(baseUrl);
				}
				this.BaseUrl = baseUrl;
			},
			// 初始化用户登录信息
			initLoginInfo() {
				try {
					let loginInfoStr = getLoginInfo();
					let loginInfo = JSON.parse(loginInfoStr);
					if (loginInfo) {
						this.loginForm.username = loginInfo.username;
						this.loginForm.password = loginInfo.password;
					}
				} catch (e) {
					// console.log(e);
					//TODO handle the exception
				}
			},
			// 获取图形验证码
			getCode() {
				getCodeImg().then((res) => {
					if (res.code !== 200) {
						uni.showToast({
							title: '获取验证码失败！请检查网络！',
							icon: 'error'
						});
						return;
					}
					const result = res.data;
					if (result.captchaOff === 'off') {
						this.captchaEnabled = false;
						return;
					} else {
						this.captchaEnabled = true;
					}
					this.codeUrl = 'data:image/gif;base64,' + result.img;
					this.loginForm.uuid = result.uuid;
				});
			},
			// 登录方法
			async handleLogin() {
				// debug快速登录
				if (this.loginForm.username === 'debug') {
					setToken('123');
					this.$tab.reLaunch('/pages/index/index');
					return;
				}
				if (this.loginForm.username === '') {
					this.$modal.msgError('请输入您的账号');
				} else if (this.loginForm.password === '') {
					this.$modal.msgError('请输入您的密码');
				} else if (this.loginForm.code === '' && this.captchaEnabled) {
					this.$modal.msgError('请输入验证码');
				} else {
					this.$modal.loading('登录中，请耐心等待...');
					setTimeout(() => {
						this.$modal.closeLoading();
					}, 30000);
					this.pwdLogin();
				}
			},
			// 密码登录
			async pwdLogin() {
				this.$store
					.dispatch('Login', this.loginForm)
					.then(() => {
						try {
							const loginInfo = {
								username: this.loginForm.username,
								password: this.loginForm.password
							}
							const loginInfoStr = JSON.stringify(loginInfo);
							setLoginInfo(loginInfoStr);
						} catch (e) {
							// console.log(e);
						}
						this.$modal.closeLoading();
						this.loginSuccess();
					})
					.catch(() => {
						this.$modal.closeLoading();
						if (this.captchaEnabled) {
							this.getCode();
						}
					});
			},
			// 登录成功后，处理函数
			loginSuccess(result) {
				// 获取户信息
				this.$store.dispatch('GetInfo').then((res) => {
					this.$tab.reLaunch('/pages/index/index');
				});
			},
			// 确认修改链接地址
			handlerBaseUrlConfirm() {
				const baseUrl = this.BaseUrl;
				// console.log('changeBaseUrl', baseUrl);
				uni.showToast({
					title: '链接地址已修改：' + baseUrl,
					icon: 'none'
				});
				setBaseUrl(baseUrl);
			}
		}
	};
</script>

<style lang="scss">
	.bangben {
		margin-top: 110px;
		margin-left: 35%;
		font-size: 0.8rem;
	}

	@import url('login.scss');
</style>