water_affairs/pages/login/modules/phone.vue

<template>
	<view class="container">
		<view class="input-box">
			<view class="icon" />
			<input type="number" :value="phoneNumber" placeholder="请输入手机号码" data-name='phoneNumber' @input="onInput">
		</view>
		<view class="authcode" style="margin-top:30rpx;">
			<view class="input-box">
				<view class="icon" />
				<input 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='登陆中...' text="确 定" @click="startLogging" />
	</view>
</template>

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

export default {
	name: "Phone",
	data() {
		return {
			loading: false,
			phoneNumber: "",
			password: "",
			butText: "获取验证码",
			butSty: {
				width: "550rpx",
				height: "90rpx",
				background: "#0A3971",
				borderRadius: "8rpx",
				opacity: "0.65",
				borderWidth: 0,
				fontSize: "32rpx",
				fontFamily: " PingFang SC - Regular, PingFang SC",
				color: " #FFFFFF",
				margin: "134rpx 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": "wechat"
				}).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 (!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": "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("phoneNumber", this.phoneNumber);
					uni.setStorageSync("loginMethod", 'phone');
					loginMsg(res.account_list, this.$Http)
				}
			})
		}
	}
}
</script>

<style lang="scss">
@import url("./input.css");

.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: 548rpx;
	height: 34rpx;
	font-size: 24rpx;
	font-family: PingFang SC-Regular, PingFang SC;
	color: #FFFFFF;
	margin: 26rpx auto 0;

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

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

	navigator {
		padding-right: 10rpx;
	}
}
</style>