app_evaluating/pages/login/index.vue

<template>
	<view>
		<view class="conbox">
			<view class="container">
				<!-- 背景 -->
				<!-- <image src="../../static/background.png" class="cont" mode="aspectFill"></image> -->
				<view class="canvas-content">
					<!-- <view class="title">您好!</view> -->
					<view class="hint">欢迎来到</view>
					<view class="hint">内蒙古艺术学院</view>
					<view class="hint">处级干部民主测评平台</view>
					<view class="input-form">
						<input class="input-font" placeholder="请输入账号" type="text" v-model="username"
							placeholder-class="input-placeholder" />
						<input class="input-font" placeholder="请输入密码" type="password" v-model="password"
							placeholder-class="input-placeholder" />
					</view>
					<view class="btn" @click="login">
						<text>登录</text>
					</view>
				</view>
			</view>
		</view>
	</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.$RULE.token = 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();
				self.appInfo.deviceNo = deviceNo;
				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);
							try {
								uni.setStorage({
									key: "appToken",
									data: data.data
								})
								self.$RULE.token = data.data
								uni.setStorage({
									key: 'userInfo',
									data: loginStr
								})
								uni.setStorage({
									key: 'pwd',
									data: 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/indexOne'
				})
			}
		}
	}
</script>

<style>
	.content {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		/* background: linear-gradient(#d3959b, #d3959b, #bfe6ba); */
		/* 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;
	}

	.input-form {
		margin-top: 30rpx;
	}

	.canvas-content {
		margin: 0 auto;
		position: relative;
		display: flex;
		top: 400rpx;
		padding: 20rpx;
		justify-content: center;
		flex-direction: column;
		width: 80%;
		height: 600rpx;
		border-radius: 2%;
		/* box-shadow: 10rpx 10rpx 40rpx #F8F8F8; */
		background-size: cover;
		/* background-clip: padding-box; */
		/* background-color: #ffcb3f; */
	}

	.btn {
		margin: 35rpx auto 22rpx auto;
		text-align: center;
		height: 84rpx;
		width: 95%;
		line-height: 84rpx;
		border-radius: 55rpx;
		color: #157a60;
		background-color: #FFFFFF;
	}

	.btn:active {
		margin: 35rpx auto 22rpx auto;
		text-align: center;
		height: 84rpx;
		width: 95%;
		line-height: 84rpx;
		border-radius: 55rpx;
		color: #157a60;
		background-color: #F2F2F2;
	}

	.input-font {
		color: #FFFFFF;
		padding-top: 10rpx;
		padding-bottom: 10rpx;
		margin-top: 25rpx;
		font-size: 30rpx;
		width: 100%;
		border-bottom: 1rpx solid #FFFFFF;
	}

	.verify-box {
		margin-top: 30rpx;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		width: 100%;
		border-bottom: 1rpx solid #D3D3D3;
	}

	.verify-btn {
		min-width: 100rpx;
		text-align: center;
		font-size: 20rpx;
		color: #007AFF;
		padding: 10rpx;
		margin-bottom: 5rpx;
		border: 1rpx solid #007AFF;
		border-radius: 40rpx;
		align-self: flex-end;
	}

	.verify-btn:active {
		font-size: 20rpx;
		min-width: 100rpx;
		text-align: center;
		color: #666666;
		padding: 10rpx;
		margin-bottom: 5rpx;
		border: 1rpx solid #666666;
		border-radius: 40rpx;
		align-self: flex-end;
	}

	.canvas-content .title {
		color: #FFFFFF;
		font-size: 40rpx;
		font-weight: bold;
	}

	.canvas-content .hint {
		color: #FFFFFF;
		font-size: 40rpx;
		font-weight: bold;
	}

	.input-verify {
		padding-top: 10rpx;
		padding-bottom: 10rpx;
		font-size: 30rpx;
		width: 60%;
	}

	.conbox {
		background: linear-gradient(#157a60, #107a58, #05744a);
		/* background: #FFFFFF; */
		width: 750rpx;
		height: 100vh;
		overflow-x: hidden;
		overflow-y: scroll;
	}

	.container,
	image.cont {
		width: 750rpx;
		min-height: 100vh;
		height: auto;
		position: relative;
	}

	image.cont {
		height: 100%;
		position: absolute;
		z-index: 0;
	}

	.input-placeholder {
		color: #FFFFFF;
		font-size: 25rpx;
	}
</style>