byte-sailing-storage-android/pages/login/login.vue

<template>
	<view class="container-wrap my-fade-in" :style="{background: 'url(' + loginBg + ')'}">
		<uni-status-bar></uni-status-bar>
		<u-top-tips ref="uTips"></u-top-tips>
		<view class="container my-flex">
			<!-- 登录表单 -->
			<view class="form-wrap flex-column-center">
				<view class="logo-wrap my-flex">
					<view class="logo">
						<image src="../../static/images/LOGO.png" mode=""></image>
					</view>
				</view>
				<view class="form">
					<u-form :model="form" ref="uForm">
						<u-form-item :border-bottom="false" prop="username">
							<u-input style="font-size: 30rpx;" :accountIcon="true" height="72" :border="true"
								placeholder="请输入账号" v-model="form.username" />
						</u-form-item>
						<u-form-item :border-bottom="false" style="position: relative;" prop="password">
							<u-input @confirm="handleSubmit" style="font-size: 30rpx;" type="password" :border="true"
								placeholder="请输入密码" height="72" v-model="form.password" />
							<!-- <span class="forget my-fontsize-Small" @tap="toggleForget">忘记密码</span> -->
						</u-form-item>
						<!-- <u-form-item :border-bottom="false" v-if="isDev">
							<u-input style="font-size: 24rpx;" height="72" :border="true" placeholder="请输入IP" v-model="ip" />
						</u-form-item> -->
						<u-form-item :border-bottom="false">
							<u-button throttleTime="300" type="primary" style="width: 100%;margin-top: 30rpx;"
								@click="login">立即登录</u-button>
						</u-form-item>
						<u-form-item :border-bottom="false" style="margin-top: 70rpx;">
							<u-checkbox-group @change="checkboxGroupChange">
								<u-checkbox v-model="remember">记住用户名</u-checkbox>
							</u-checkbox-group>
						</u-form-item>
					</u-form>
				</view>
				<view class="bottom-pic-wrap flex-column-center">
					<view class="bottom-pic">
						<image src="../../static/images/login-pic.png" mode="heightFix"></image>
					</view>
				</view>
			</view>
			<view class="version" v-if="$storage.getStorageSync('version')">
				v{{ $storage.getStorageSync('version') || plus.runtime.version }}
			</view>
		</view>
	</view>
</template>

<script>
	import loginBg from '@/static/images/login-bg.png'
	import {
		mapActions
	} from 'vuex'
	import config from '@/libs/config/config.js'
	import w_md5 from "../../js_sdk/zww-md5/w_md5.js"
	export default {
		data() {
			return {
				loginBg,
				ip: '',
				remember: true,
				form: {
					tenantId: '000000',
					username: 'admin',
					password: 'admin',
					//账号类型
					type: 'loginWithoutVerificationCode',
					//验证码的值
					code: '',
					//验证码的索引
					key: '',
					grant_type: 'captcha',
				},
				rules: {
					account: [{
							required: true,
							message: '账号不能为空',
							// 可以单个或者同时写两个触发验证方式 
							trigger: ['blur']
						},
						{
							pattern: /^[0-9a-zA-Z]*$/g,
							// 正则检验前先将值转为字符串
							transform(value) {
								return String(value);
							},
							message: '只能包含字母或数字',
							trigger: ['change']
						}
					],
					password: [{
						required: true,
						message: '密码不能为空',
						// 可以单个或者同时写两个触发验证方式 
						trigger: ['blur']
					}]
				}
			};
		},
		methods: {
			...mapActions({
				setToken: 'user/setToken',
				setUserInfo: 'user/setUserInfo'
			}),
			handleSubmit() {
				this.login()
			},
			login() {
				function filter(str) { // 特殊字符转义
					str += ''; // 隐式转换
					str = str.replace(/%/g, '%25');
					str = str.replace(/\+/g, '%2B');
					str = str.replace(/ /g, '%20');
					str = str.replace(/\//g, '%2F');
					str = str.replace(/\?/g, '%3F');
					str = str.replace(/&/g, '%26');
					str = str.replace(/\=/g, '%3D');
					str = str.replace(/#/g, '%23');
					return str;
				}
				
				function formateObjToParamStr(paramObj) {
					const sdata = [];
					for (let attr in paramObj) {
						sdata.push(`${attr}=${filter(paramObj[attr])}`);
					}
					return sdata.join('&');
				}
				const loginForm = {...this.form}
				loginForm.password = w_md5.hex_md5_32(loginForm.password)
				console.log(this.form)
				this.$utils.formValidate(this.$refs.uForm).then(() => {
					uni.request({
						url: 'http://36.134.91.96:10001/api' + '/blade-auth/oauth/token?' + formateObjToParamStr(loginForm),
						method: 'POST',
						header: {
							'Content-Type': 'application/json',
							'Captcha-Key': loginForm.key,
							'Captcha-Code': loginForm.code,
							'Tenant-Id': loginForm.tenantId,
							'Authorization':'Basic c2FiZXI6c2FiZXJfc2VjcmV0',
							'Blade-Auth': undefined
						},
						success: res => {
							if(res.statusCode == 200){
								this.$storage.setStorageSync('token', res.data.access_token)
								this.$storage.setStorageSync('userInfo', res.data)
								this.$utils.openNew('/pages/index/index')
							}
							console.log(res) 
						},
					});
					// this.$http.Login(this.form).then(res => {
					// 	console.log(res)
					// 	if (res.code === 0) {
					// 		this.$storage.setStorageSync('token', res.result.token)
					// 		this.saveUserInfo()
					// 	}
					// })
				})
			},
			// 获取并保存用户信息到本地
			saveUserInfo() {
				this.$http.GetUserInfo().then(res => {
					console.log(res)
					if (res.code == 0) {
						this.setUserInfo(res.result)
						this.$storage.setStorageSync('userInfo', res.result)
						this.$utils.openNew('/pages/index/index')
					}
				})
			},
			checkboxGroupChange() {},
			toggleForget() {}
		},
		onLoad() {
			this.form.account = this.userInfo.account

			this.$utils.updateVersion()
		},
		onReady() {
			this.$refs.uForm.setRules(this.rules);
		},
		computed: {
			// 测试环境下显示ip输入
			isDev() {
				if (process.env.NODE_ENV === 'development') {
					return true
				} else {
					return false
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	@import '../../static/css/mycss.scss';
	@import '../../static/css/animate.css';

	/deep/ .u-select__body__picker-view__item {
		.u-line-1 {
			font-size: 46rpx;
		}
	}

	/deep/ .u-select__header__btn {
		font-size: 46rpx;
	}

	/deep/ .u-drawer-content {
		border-radius: 20rpx 20rpx 0 0;
	}

	.container-wrap {
		width: 750rpx;

		.container {
			height: calc(100vh - var(--status-bar-height));

			.form-wrap {
				position: relative;
				width: 620rpx;
				height: 85vh;
				border-radius: 20rpx;
				background: #FFFFFF;
				box-shadow: 0 5px 10px #383838;

				.logo-wrap {
					flex: 1;
					width: 100%;

					.logo {
						width: 250rpx;
						min-width: 250rpx;
						height: 100rpx;
					}
				}

				.form {
					flex: 1;
					padding: 0 50rpx;
					width: 100%;

					.forget {
						position: absolute;
						bottom: -30rpx;
						right: 0;
						color: #666666;
					}
				}

				.bottom-pic-wrap {
					flex: 1;
					width: 100%;

					.bottom-pic {
						height: 80%;
						min-height: 250rpx;
						// width: 311rpx;
						// height: 315rpx;
					}
				}
			}

			.forget-wrap {
				position: relative;
				width: 580rpx;
				height: 620rpx;
				box-shadow: 0 5px 10px #383838;
				border-radius: 20rpx;
				background: #fff;

				.close-icon-wrap {
					position: absolute;
					top: 18rpx;
					right: 18rpx;

					.close-icon {
						width: 50rpx;
						height: 50rpx;
					}
				}

				.gantanhao-wrap {
					padding-top: 120rpx;

					.gantanhao {
						width: 200rpx;
						height: 160rpx;
					}
				}

				.text {
					padding-top: 75rpx;
					text-align: center;
					color: #333;

					.phone {
						color: rgb(200, 60, 160);
						font-weight: bold;
					}
				}
			}
		}

		.version {
			position: fixed;
			bottom: 0;
			left: 0;
			width: 100%;
			padding: 10rpx 0;
			text-align: center;
		}
	}
</style>