remember-word/pages/login/login.vue

<template>
	<view class="main">
		<navBar navTitle="" :backToUrl="'/pages/index/index'" :isSwitchTab="true" :color="'#000000'"
			:backBackGroundColor="'#3D553D'"></navBar>
		<view class="hint">*登录/注册后才可以体验所有功能</view>
		<view style="margin-top: 446upx; font-size: 40upx">{{ $t('login.title') }}</view>
		<view class="input-box">
			<u-input v-model="TelNum" :placeholder="$t('login.input')" shape="circle" type="number" border="none"
				class="login-input"></u-input>
			<u-checkbox-group v-model="checked" iconPlacement="left" placement="row" @change="changechec">
				<u-checkbox name="yes" shape="circle"></u-checkbox>
				<view class="know">
					{{ $t('login.agree') }}
					<text>{{ $t('login.service') }}</text>
					<text>{{ $t('login.privacy') }}</text>
					<text>{{ $t('login.registration') }}</text>
				</view>
			</u-checkbox-group>
		</view>
		<u-button :loading="loading" @click="goSendCode" class="btn" :text="$t('login.btn')" shape="circle"
			color="#699A70"></u-button>
		<slider-verify :isShow="sliderVerifyFLag" @touchSliderResult="verifyResult" ref="verifyElement"></slider-verify>
		<image class="logo" src="../../static/image/home/fontree-white.png"></image>
	</view>
</template>

<script>
export default {
	data() {
		return {
			TelNum: "",
			Password: "",
			checkKnow: "",
			loading: false,
			sliderVerifyFLag: false,
			count: 120,
			timer: null,
			checked: [],
		};
	},
	onLoad(e) {
		if (Object.keys(e).length) {
			const { collectionsUID, num } = e
			uni.setStorageSync('collectionsUID', collectionsUID);
			uni.setStorageSync('num', num);
			if (uni.getStorageSync("mall-user-info") && uni.getStorageSync("mall_token")) {
				uni.navigateTo({
					url: "/pages/login/welcome/welcome",
				});
			}
		}
	},
	methods: {
		goSendCode() {
			if (!uni.$u.test.mobile(this.TelNum)) {
				this.$u.toast(this.$t('error.phone'));
				return false
			}
			if (this.checked.length > 0) {
				this.sliderVerifyFLag = true;
			} else {
				this.$u.toast(this.$t('login.mess'));
			}
		},
		changechec() {
			console.log(this.checked);
		},
		countdown() {
			this.timer = setInterval(() => {
				this.count--;
				if (this.count === 0) {
					clearInterval(this.timer);
					// this.isReset = false;
				}
			}, 1000);
		},
		// 滑块验证结果回调函数
		verifyResult(res) {
			console.log(res);
			setTimeout(() => {
				this.sliderVerifyFLag = false;
				this.countdown();
				if (res) {
					uni.navigateTo({
						url: "../login/sendCode/sendCode?telNum=" + this.TelNum,
					});
				}
			}, 1000);
		},
	},
};
</script>

<style lang="scss">
/deep/ .u-input__content__field-wrapper__field {
	font-size: 24upx !important;
	margin-left: 10upx;
}

/deep/.u-checkbox__icon-wrap--circle {
	width: 25upx !important;
	height: 25upx !important;
}

/deep/ .u-checkbox-label--left {
	margin-top: -20rpx;
}

page {
	background: url("@/static/image/home/login-bg.png") no-repeat;
	background-size: 100% 100%;
	background-attachment: fixed;
	height: 100vh;
	box-sizing: border-box;
}

.main {
	height: 100%;
	position: relative;
	display: flex;
	justify-content: center;

	.hint {
		width: 588rpx;
		height: 72rpx;
		background-color: rgba(157, 208, 164, 0.3);
		font-size: 28rpx;
		line-height: 72rpx;
		text-align: center;
		border-radius: 20rpx;
		position: absolute;
		top: 216rpx;
	}

	.know {
		margin-top: 20upx;
		font-size: 28upx;
		color: rgba(255, 255, 255, 0.6);

		text {
			color: #699A70;
		}
	}

	.input-box {
		position: absolute;
		top: 658upx;
		width: 638upx;

		.login-input {
			height: 68upx;
			background-color: rgba(255, 255, 255, 0.5);
			margin-bottom: 17upx;
			padding: 0 20rpx;

			/deep/ .uni-input-placeholder {
				padding: 0 20rpx;
			}

			/deep/ .uni-input-input {
				color: #fff;
				padding: 0 20rpx;
			}
		}

		.close {
			width: 24upx;
			height: 24upx;
			margin-right: 20upx;
		}
	}

	.btn {
		width: 344upx;
		height: 60upx;
		position: absolute;
		top: 942upx;
	}

	.change-way {
		color: #fcb462;
		font-size: 28upx;
		position: absolute;
		top: 1068upx;
	}
}

.logo {
	width: 202upx;
	height: 56upx;
	position: absolute;
	bottom: 40upx;
}</style>