YXGJ/pages/login/modules/phone.vue

<template>
	<view class="container">
		<view class="input-box">
			<view class="iconfont icon-shoujihao" />
			<input class="input" placeholder-class="placeholder" type="number" :value="phoneNumber" placeholder="请输入手机号码"
				data-name='phoneNumber' @input="onInput">
		</view>
		<view class="authcode" style="margin-top:15px;">
			<view class="input-box">
				<view class="iconfont icon-duanxinyanzheng" />
				<input class="input" placeholder-class="placeholder" type="number" :value="password" placeholder="请输入验证码"
					data-name='password' @input="onInput">
			</view>
			<button class="cu-btn bg-red" :loading='loading' @click="getAuthcode">{{ butText }}</button>
		</view>
		<u-button :customStyle="butSty" :disabled="phoneNumber == '' || password == ''" :loading="loading"
			loadingText='登陆中...' @click="startLogging">
			<text style="font-size: 4.267vw;">
				确 定
			</text>
		</u-button>
	</view>
</template>

<script>
let countDown = null;
import { hexMD5 } from "./md5";
import { CheckPhoneNumber } from "../../../utils/basicInspection";
import { loginMsg } from "./dispose";

export default {
	name: "Phone",
	props: {
		isAgreement: Boolean
	},
	data() {
		return {
			loading: false,
			phoneNumber: "",
			password: "",
			butText: "获取验证码",
			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.phoneNumber = uni.getStorageSync("phoneNumber") || "";
	},
	methods: {
		/* 获取验证码 */
		getAuthcode() {
			if (this.butText == '获取验证码' || this.butText == '重新获取') {
				if (!CheckPhoneNumber(this.phoneNumber, '请输入正确的手机号码')) return;
				this.$Http.getpassword({
					"phonenumber": this.phoneNumber,
					"systemclient": "marketingtool"
				}).then(res => {
					console.log("获取验证码", res)
					uni.showToast({
						title: res.msg,
						duration: 3000,
						icon: "none",
					});
					if (res.code == 0) return;
					var count = 30;
					this.butText = count + 's';
					countDown = setInterval(() => {
						if (count == 0) {
							clearInterval(countDown);
							this.butText = '重新获取';
						} else {
							count = count - 1;
							this.butText = count + 's';
						}
					}, 1000)
				});
			};
		},
		/* 输入框输入内容 */
		onInput(e) {
			this[e.currentTarget.dataset.name] = e.detail.value;
		},
		/* 开始登录 */
		startLogging() {
			if (this.loading) return;
			if (!this.isAgreement) return uni.showToast({
				title: '请阅读并勾选用户协议',
				icon: 'none',
			})
			if (!CheckPhoneNumber(this.phoneNumber, '请输入正确的手机号码')) return;
			if (this.password == "") return uni.showToast({
				title: '还未填写验证码',
				duration: 2000,
				icon: "none",
			});
			this.loading = true;
			this.$Http.plogin({
				"phonenumber": this.phoneNumber,
				"password": hexMD5(this.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("phoneNumber", this.phoneNumber);
					uni.setStorageSync("loginMethod", 'phone');
					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;

	.input {
		font-size: 14px;
		height: 30px;
		line-height: 30px;
	}

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

	.iconfont {
		font-size: 11px;
		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: 12px;
	font-family: PingFang SC-Regular, PingFang SC;
	padding: 0;
}

.icon {
	background-color: #dd524d;
}

/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;
	}
}

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