AnYang_UI/anyangWebAPP/pages/login/login.vue

<template>
	<view class="login">
		<view class="content">
			<!-- 头部logo -->
			<view class="header">
				<image :src="logoImage"></image>
			</view>
			<!-- 主体表单 -->
			<view class="main">
				<wInput v-model="phoneData" type="text" maxlength="11" placeholder="用户名" :focus="isFocus"></wInput>
				<wInput v-model="passData" type="password" maxlength="11" placeholder="密码"></wInput>
				<wInput v-model="verificationData" type="text" maxlength="11" placeholder="验证码" :focus="isFocus">
				</wInput>
			</view>
			<wButton class="wbutton" text="获取验证码" :rotate="isVerification" @click="sendVerification"></wButton>
			<wButton class="wbutton" text="登 录" :rotate="isRotate" @click="startLogin"></wButton>

		</view>
	</view>
</template>

<script>
	let _this;
	import wInput from '../../components/watch-login/watch-input.vue' //input
	import wButton from '../../components/watch-login/watch-button.vue' //button
	import CryptoJS from '../../node_modules/crypto-js/crypto-js.js'
	import md5 from '../../node_modules/md5/md5.js'


	export default {
		data() {
			return {
				//logo图片 base64
				logoImage: '../../static/login-icon.png',
				phoneData: '', //用户/电话
				passData: '', //密码
				verificationData: '', //验证码
				isRotate: false, //是否加载旋转
				isVerification: false,
				isFocus: true // 是否聚焦
			};
		},
		components: {
			wInput,
			wButton,
		},
		onLoad() {

			this.isLogin();
			uni.showToast({
				icon: 'none',
				position: 'bottom',
				title: process.env.NODE_ENV
			});

		},
		methods: {
			isLogin() {
				//判断缓存中是否登录过，直接登录
				try {
					const value = uni.getStorageSync('token');
					if (value) {
						//有登录信息
						console.log("已登录用户：", value);

						uni.switchTab({
							url: '/pages/myTask/myTask'
						});
					}
				} catch (e) {
					// error
				}
			},
			sendVerification() {
				this.isVerification = true
				console.log(this.passData)
				console.log(this.encryptPassWord(this.passData).toString())
				const params = {
					"usercode": this.phoneData,
					"Password": this.encryptPassWord(this.passData).toString(),
					"LoginTime": this.$mHelper.CurentTime(),
				}
				this.$http.post("/Login/SendCode", params).then((response) => {
					if (response.state.toLowerCase() === 'success') {
						this.isVerification = false
						uni.showModal({
							content: '验证码发送成功',
							showCancel: false
						});
					}
				}).catch((e) => {
					uni.showModal({
						content: e,
						showCancel: false
					});
					this.isVerification = false
					console.log(e)
				})
			},
			startLogin(e) {
				//登录
				if (this.isRotate) {
					//判断是否加载中，避免重复点击请求
					return false;
				}
				if (this.phoneData.length == "") {
					uni.showToast({
						icon: 'none',
						position: 'bottom',
						title: '用户名不能为空'
					});
					return;
				}
				if (this.passData.length == "") {
					uni.showToast({
						icon: 'none',
						position: 'bottom',
						title: '密码不能为空'
					});
					return;
				}
				this.isRotate = true

				const params = {
					"username": this.phoneData,
					"password": this.encryptPassWord(this.passData).toString(),
					"Code": this.verificationData,
					"LoginTime": this.$mHelper.CurentTime(),
				}

				this.$http.post("/Login/login", params).then((response) => {

					if (response.state.toLowerCase() === 'success') {
						this.isRotate = false

						uni.setStorageSync('Username', this.phoneData)
						uni.setStorageSync('Password', this.passData)
						uni.setStorageSync('token', response.data.token)
						this.getNowUser()
					}
				}).catch((e) => {
					uni.showModal({
						content: e,
						showCancel: false
					});
					this.isRotate = false
					console.log(e)
				})

			},
			// 获取用户信息
			getNowUser() {
				const params = {
					token: uni.getStorageSync("token"),
				}
				this.$http.get("UserAccount/GetNowUser", params).then((response) => {
						if (response.state.toLowerCase() === "success") {
							const data = response.data
							uni.setStorageSync('roleCode', data.role.F_RoleCode)
							uni.setStorageSync('userName', data.user.F_UserName)
							uni.setStorageSync('userCode', data.user.F_UserCode)
							const code = uni.getStorageSync("roleCode");
							
							if (code === "ZXLD"||code === "MTDD"||code === "WLDW"||code === "EJWLDW") {
								uni.switchTab({
									url: '/pages/myTask/myTask'
								});
							} else {
								this.$mHelper.toast("暂无操作权限");
							}


						}
					})
					.catch((e) => {
						this.$mHelper.toast(e);
					})
			},
			//密码加密
			encryptPassWord(passData) {
				const currenttime = this.$mHelper.CurentTime();
				const datatime = currenttime.split(' ')[1].split(':').join('')
				const key = CryptoJS.enc.Utf8.parse(")O[9d]6,YF}+efcaj{+8>Z'e9M" + datatime);
				const gl_psw = CryptoJS.enc.Utf8.parse(md5.hex_md5(this.passData));
				const encrypted = CryptoJS.AES.encrypt(gl_psw, key, {
					mode: CryptoJS.mode.ECB,
					padding: CryptoJS.pad.Pkcs7
				});
				return encrypted
			}

		}



	}
</script>

<style>
	@import url("../../components/watch-login/css/icon.css");
	@import url("./css/main.css");

	/deep/ .wbutton {
		margin-top: 20px;
	}

	/deep/ .main-list {
		margin: 10px 0px;
	}
</style>