app_evaluating/pages/login/index.vue

<template>
	<view class="content" :style="{height: windowHeight +'px'}">
		<view class="app-title">
			<text>{{appTitle}}</text>
		</view>
		<image src="../../static/background.png" class="cont" mode="aspectFill"></image>
		<form @submit="formSubmit" @reset="formReset">
			<view class="uni-form-item">
				<view class="title">用户名</view>
				<input class="uni-input" v-model="username" placeholder="请输入用户名" />
			</view>
			<view class="uni-form-item">
				<view class="title">密码</view>
				<input class="uni-input" v-model="password" password placeholder="请输入密码" />
			</view>
			<view class="uni-form-item">
				<button class="login" type="primary" @click="login">登录</button>
			</view>
		</form>
	</view>
</template>

<script>
	import common from '../../common/common.js';
	import md5 from '../../common/md5.js';
	import CryptoJS from '../../common/crypto/crypto-js.js';
	export default {
		data() {
			return {
				appTitle: '民主测评平台',
				username: '',
				password: '',
				windowHeight: 0,
				appInfo: {
					deviceNo: '',
					appId: '240fbf7a-aa32-4cde-9674-5147a7d5eb2f',
					appVersion: 3
				}
			}
		},
		onLoad() {
			var self = this;
			try {
				var appToken = uni.getStorageSync('appToken');
				if (appToken) {
					// self.goIndex();
				}
			} catch (e) {
				console.log(e)
			}

			var systemInfo = uni.getSystemInfoSync();
			self.windowHeight = systemInfo.screenHeight;
			self.initDeviceNo();
		},
		methods: {
			initDeviceNo() {
				var self = this;
				var deviceNo = uni.getStorageSync('deviceNo');
				if (deviceNo) {
					self.appInfo.deviceNo = deviceNo;
					return;
				}
				deviceNo = common.uuid();
				uni.setStorageSync('deviceNo', deviceNo);
			},
			decrypt(word) {
				var str = common.decode(word.data);
				var key = CryptoJS.enc.Utf8.parse("CMXX_TOKEN_INFOS"); //十六位十六进制数作为密钥
				var iv = CryptoJS.enc.Utf8.parse("16-Bytes--String");
				var decryptedData = CryptoJS.AES.decrypt(str, key, {
					iv: iv,
					mode: CryptoJS.mode.CBC,
					padding: CryptoJS.pad.Pkcs7
				});
				var decryptedStr = CryptoJS.enc.Utf8.stringify(decryptedData);
				return decryptedStr;
			},
			login() {
				var self = this;
				if (self.username === '') {
					uni.showToast({
						title: '请输入用户名',
						duration: 1000,
						icon: 'none'
					});
					return;
				}
				if (self.password === '') {
					uni.showToast({
						title: '请输入密码',
						duration: 1000,
						icon: 'none'
					});
					return;
				}
				uni.request({
					url: common.path('{baseUrl}/app/sign/login', [common.userCenterBaseUrl]),
					method: 'POST',
					data: {
						username: self.username,
						password: md5.md5(md5.md5(md5.md5(self.password))),
						deviceNo: self.appInfo.deviceNo,
						appId: self.appInfo.appId,
						appVersion: self.appInfo.appVersion
					},
					success(response) {
						if (response.statusCode === 200) {
							var data = response.data;
							var loginStr = self.decrypt(data);
							console.log(loginStr);
							try {
								uni.setStorageSync('appToken', data.data);
								uni.setStorageSync('userInfo', loginStr);
								uni.setStorageSync('pwd', self.password);
								self.goIndex();
							} catch (e) {}
						} else if (response.statusCode === 400) {
							var data = response.data;
							uni.showToast({
								title: data.msg,
								duration: 1000,
								icon: 'none'
							})
						}

					},
					fail(response) {
						uni.showToast({
							title: '请求异常',
							duration: 1000,
							icon: 'none'
						})
					}
				});
			},
			goIndex() {
				uni.switchTab({
					url: '../index/index'
				})
			}
		}
	}
</script>

<style>
	.content {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		background: url(../../static/background.png);
	}

	image.cont {
		width: 750rpx;
		min-height: 100vh;
		height: auto;
		position: relative;
		height: 100%;
		position: absolute;
		z-index: 0;
	}

	.content .app-title {
		z-index: 99;
		font-size: 60rpx;
		color: #FFFFFF;
		border-bottom: 1rpx solid #FFFFFF;
	}

	.content form {
		width: 80%;
		margin-top: 100rpx;
	}

	.content form .uni-form-item {
		margin-bottom: 20rpx;
	}

	.content form .uni-form-item .title {
		font-size: 30rpx;
		color: #FFFFFF;
	}

	.content form .uni-form-item .uni-input {
		border: 1rpx solid #FFFFFF;
		background-color: #FFFFFF;
		height: 50rpx;
		padding: 10rpx;
		border-radius: 10rpx;
	}

	.content form .uni-form-item .login {
		margin-top: 180rpx;
		font-size: 30rpx;
	}
</style>