AiSkinMeasurementMp/pages/login/index.vue

<template>
	<view class="app-container">
		<view class="main">
			<view class="img-box">
				<image :showLoading="true" class="img_login" :src="img_login" mode="widthFix"></image>
			</view>

			<view class="login-box">
				
				<view class="form-box">
					<u--form labelPosition="left" :model="form" :rules="rules" ref="uForm">
						<u-form-item label="号码" prop="userInfo.name" borderBottom>
							<u-input v-model="form.userInfo.phone" border="none" placeholder="请输入手机号" type="number"></u-input>
						</u-form-item>
						<u-form-item label="验证码" prop="userInfo.name" borderBottom labelWidth="60">
							<u--input v-model="form.userInfo.code" border="none" placeholder="请输入验证码" type="number"></u--input>
							<u-code :seconds="seconds" @end="end" @start="start" ref="uCode"
								@change="codeChange"></u-code>
							<u-button @click="getCode" color="#f8f8f8" type="default" size="normal" slot="right">
								<u--text color="#333" :text="tips"></u--text>
							</u-button>

						</u-form-item>

					</u--form>
				</view>
				<view class="action-box">
					<view class="btn-box">
						<u-button @click="login('phone')" :color="bgthemeColor" type="info" size="large">
							<text class="black" :class="!checked ? 'gray' : ''">手机号码登录</text>
						</u-button>
					</view>
					<view class="btn-box">
						<u-button @click="login('wx')" :color="bgthemeColor" type="info" size="large">
							<text class="black" :class="!checked ? 'gray' : ''">微信一键登录</text>
						</u-button>
					</view>


				</view>
				<view class="agree-box">
					<u-checkbox-group>
						<u-checkbox v-model="checked" @change="onChange" shape="circle" size="20">
						</u-checkbox>
					</u-checkbox-group>
					<view class="agree-text">
						同意<text class="blue" @click="onUserAgreement">用户协议</text>和<text class="blue">隐私协议</text>
					</view>
				</view>
			</view>

		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			img_login: 'https://telpo-healthy.oss-cn-hangzhou.aliyuncs.com/healthy/knowledge/202502/008071d3dcac4785b3929a00800ae501.jpg',
			checked: false,
			tips: '',
			seconds: 10,
			active: false,
			form: {
				userInfo: {
					phone: '',
					code: ''
				}
			},
			value: '',
			tips: '',
			show: false,
			rules: {
				username: [{
					required: true,
					message: '请输入用户名',
					trigger: ['blur', 'change']
				}],
				password: [{
					required: true,
					message: '请输入密码',
					trigger: ['blur', 'change']
				}]
			}
		}
	},
	computed: {
		bgthemeColor() {
			return this.checked ? 'linear-gradient(90deg,rgba(158, 135, 255, 0.95),rgba(84, 71, 135, 0.95))' : 'linear-gradient(90deg,rgba(158, 135, 255, 0.4),rgba(84, 71, 135, 0.4))'
		},
	},
	onLoad() {
		// TODO 测试缓存
		this.$store.commit('SET_TEST_TEXT', '测试');
		this.$store.commit('SET_USER_ID', 'userId测试');
		console.log("testText", this.$store.getters.testText);
		console.log("userId", this.$store.getters.userId);
	},
	methods: {
		onUserAgreement() {},
		onAgreeChange() { },
		openPrivacyPolicy() { },
		codeChange(text) {
			this.tips = text;
		},
		login(type) {

		},

		getCode() {
			if (this.$refs.uCode.canGetCode) {
				// 模拟向后端请求验证码
				uni.showLoading({
					title: '正在获取验证码'
				})
				setTimeout(() => {
					uni.hideLoading();
					// 这里此提示会被this.start()方法中的提示覆盖
					uni.$u.toast('验证码已发送');
					// 通知验证码组件内部开始倒计时
					this.$refs.uCode.start();
				}, 2000);
			} else {
			}
		},
		end() {
			// uni.$u.toast('倒计时结束');
		},
		start() {
			uni.$u.toast('验证码已发送');
		},
		// 登录按钮操作
		handleSubmit() {
			this.$refs.form.validate().then(res => {
				this.$store.dispatch('Login', this.form)
					.then(res => {
						// 显示登录成功
						uni.showToast({
							title: "登录成功"
						});
						// 跳转到首页
						setTimeout(() => {
							uni.reLaunch({
								url: '/pages/index/index'
							});
						}, 1000)
					})
			})
		},
		getphonenumber(e) {
			console.log("快速登录", e);
		},
		onChange(n) {
			this.checked = n;
		}
	}
}
</script>

<style lang="scss">
.app-container {
	position: relative;
	height: 100vh;
	width: 100vw;
	overflow: hidden;

	.main {
		height: 100vh;
		.img-box {
			width: 100vw;
			z-index: 99;

			.img_login {
				width: 100%;
			}
		}

		.login-box {
			position: fixed;
			bottom: 0;
			width: 100vw;
			padding: 30rpx 0;
			padding-bottom: 60rpx;
			border-top-left-radius: 30rpx;
			border-top-right-radius: 30rpx;
			background: white;
			z-index: 999;
			.form-box {
				.u-form-item__body {
					padding: 20rpx !important;

					 .u-button {
						padding: 20rpx 10rpx !important;
					}
				}
			}

			.action-box {
				padding: 0 30rpx;

				.btn-box {
					margin-top: 20rpx;
					display: flex;
					justify-content: center;
					align-items: center;

					text {
						font-size: 36rpx;
					}

					.black {
						color: $uni-text-color;
					}

					.gray {
						color: $uni-text-color-grey;
					}
				}
			}

			.agree-box {
				padding: 40rpx 30rpx;
				display: flex;
				justify-content: center;
				align-items: center;

				.agree-text {
					margin-left: 30rpx;

					.blue {
						color: $uni-color-primary;
					}
				}
			}
		}


	}

}
</style>