water_affairs/pages/login/modules/account.vue

<template>
	<view class="container">
		<view class="input-box">
			<view class="icon" />
			<input class="input" type="text" :value="account.account" placeholder="请输入账号" data-name='account'
				@input="onInput">
		</view>
		<view class="input-box" style="margin-top:15px;">
			<view class="icon" />
			<input class="input" type="password" :value="account.password" placeholder="请输入密码" data-name='password'
				@input="onInput">
		</view>
		<view class="assist">
			<label @click="memory = memory == '1' ? '0' : '1'">
				<checkbox :checked="memory == 1" :class="memory == 1 ? 'checked blue' : 'blue'" />记住密码
			</label>
			<navigator url="#">忘记密码?</navigator>
		</view>
		<u-button :customStyle="butSty" :disabled="account.account == '' || account.password == ''" :loading="loading"
			loadingText='登陆中...' @click="startLogging">
			<text style="font-size: 4.267vw;">
				确 定
			</text>
		</u-button>
	</view>
</template>

<script>
import { hexMD5 } from "./md5";
import { loginMsg } from "./dispose";
export default {
	name: "Account",
	data() {
		return {
			memory: 1,//是否记忆密码
			loading: false,
			account: {
				account: "",
				password: ""
			},
			butSty: {
				width: "73.333vw",
				height: "12.000vw",
				background: "#0A3971",
				borderRadius: "1.067vw",
				opacity: "0.65",
				borderWidth: 0,
				fontFamily: " PingFang SC - Regular, PingFang SC",
				color: " #FFFFFF",
				margin: "17.867vw auto 0"
			}
		};
	},
	mounted() {
		this.account = uni.getStorageSync("account") || {
			account: "",
			password: ""
		};
		this.memory = uni.getStorageSync("memory") || 0;
	},
	methods: {
		/* 输入框输入内容 */
		onInput(e) {
			this.account[e.target.dataset.name] = e.detail.value;
		},
		/* 开始登录 */
		startLogging() {
			if (this.loading) return;
			this.loading = true;
			this.$Http.login({
				"accountno": this.account.account,
				"password": hexMD5(this.account.password),
				"systemclient": "wechat"
			}).then(res => {
				console.log("账号密码登录", res)
				this.loading = false;
				if (res.code == 0) {
					uni.showToast({
						title: res.msg,
						duration: 2000,
						icon: "none"
					});
				} else {
					//存储是否记住密码 以及登录方式
					uni.setStorageSync("memory", this.memory + '');
					uni.setStorageSync("loginMethod", 'account')
					uni.setStorageSync("account", {
						account: this.account.account,
						password: this.memory == 1 ? this.account.password : ''
					});
					loginMsg(res.account_list, this.$Http)
				}
			})

		}
	}
}
</script>

<style lang="scss">
.input-box {
	display: flex;
	align-items: center;
	width: 275px;
	height: 45px;
	background: #FFFFFF;
	border-radius: 4px;
	opacity: 0.65;
	margin: 0 auto 0;

	.input {
		font-size: 14px;
	}
}

.icon {
	width: 16px;
	height: 16px;
	margin: 0 10px;
}

input {
	width: 80%;
}

/* 验证码 */
.authcode {
	display: flex;
	justify-content: space-between;
	height: 45px;
	width: 275px;
	margin: 0 auto 0;
}

.authcode .input-box {
	width: 170px;
}

.authcode .cu-btn {
	width: 97px;
	height: 45px;
	background: #0A3971;
	border-radius: 4px;
	opacity: 0.65;
	margin-left: 8px;
	font-size: 24px;
	font-family: PingFang SC-Regular, PingFang SC;
	padding: 0;
}

.icon {
	background-color: $my-color-main;
}

/deep/uni-checkbox.blue.checked .uni-checkbox-input {
	background-color: #0A3971 !important;
	opacity: 0.65;
}

.assist {
	display: flex;
	justify-content: space-between;
	width: 274px;
	height: 17px;
	font-size: 12px;
	font-family: PingFang SC-Regular, PingFang SC;
	color: #FFFFFF;
	margin: 13px auto 0;

	label {
		display: flex;
		align-items: center;

		checkbox {
			transform: scale(0.6);
			background: #0A3971;
			color: #0A3971;
			border-radius: 4px;
			opacity: 0.65;
			border: 1px solid rgba(11, 63, 126, 0.1);
		}
	}

	navigator {
		padding-right: 5px;
	}
}
</style>