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>
		<view class="flex flex-direction" style="padding: 104rpx 100rpx; 0">
			<button class="cu-btn bg-red margin-tb-sm lg" :disabled="phoneNumber == '' || password == ''" :loading='loading'
				@click="startLogging">{{ loading ? ' 登陆中' :
					'登录' }}</button>
		</view>
	</view>
</template>

<script>
let countDown = null;
import { hexMD5 } from "./md5";
export default {
	name: "Phone",
	data() {
		return {
			loading: false,
			phoneNumber: "",
			password: "",
			butText: "获取验证码"
		};
	},
	created() {
		if (uni.getStorageSync("phoneNumber")) this.phoneNumber = uni.getStorageSync("phoneNumber");
	},
	methods: {
		/* 获取验证码 */
		getAuthcode() {
			if (this.butText == '获取验证码' || this.butText == '重新获取') {
				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() {
			this.loading = true;
			uni.setStorageSync("loginMethod", 'phone');
			uni.setStorageSync("phoneNumber", this.phoneNumber);
			setTimeout(() => {
				this.loading = false;
			}, 1000)
		}
	}
}
</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;
	}
}

.cu-btn {
	background: #0A3971;
	opacity: 0.65;
}
</style>