YXGJ/pages/login/modules/account.vue

<template>
	<view class="container">
		<view class="input-box">
			<view class="iconfont icon-zhanghao" />
			<input class="input" placeholder-class="placeholder" type="text" :value="account.account" placeholder="请输入账号"
				data-name='account' @input="onInput">
		</view>
		<view class="input-box" style="margin-top:15px;">
			<view class="iconfont icon-mima" />
			<input class="input" placeholder-class="placeholder" type="password" :value="account.password"
				placeholder="请输入密码" data-name='password' @input="onInput">
		</view>
		<view class="assist">
			<navigator class="navigator" url="#" style="display: flex; align-items: center;"
				@click="memory = memory == '1' ? '0' : '1'">
				<u-checkbox :checked="memory == 1" />记住密码
			</navigator>

			<!-- <navigator class="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",
	props: {
		isAgreement: Boolean
	},
	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;
			if (!this.isAgreement) return uni.showToast({
				title: '请阅读并勾选用户协议',
				icon: 'none',
			})
			this.loading = true;
			this.$Http.login({
				"accountno": this.account.account,
				"password": hexMD5(this.account.password),
				"systemclient": "marketingtool"
			}).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)
				}
			})

		}
	}
}
</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;
		height: 30px;
	}

	.placeholder {
		font-size: 12px !important;
	}

	.iconfont {
		font-size: 12px;
		padding: 0 10px;
		color: #052E5D;
	}
}

.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: #dd524d;
}

.assist {
	display: flex;
	justify-content: space-between;
	align-items: center;
	width: 274px;
	margin: 13px auto 0;

	.navigator {
		padding-right: 5px;
		font-family: PingFang SC-Regular, PingFang SC;
		font-size: 12px !important;
		color: #FFFFFF;
		border-radius: 4px;
	}
}

/deep/.u-button__loading-text {
	font-size: 14px !important;
}
</style>