uni-app 实现H5登录页面布局样式

uni-app 实现H5登录页面布局样式

代码实现

<template>
	<view class="loginform">
		<view class="title-log">
			<image src="https://img0.baidu.com/it/u=1904323991,1275566072&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500"
				mode="widthFix"></image>
			<text>uni-app H5模板</text>
		</view>
		<uni-forms ref="form" :modelValue="formData" :rules="rules">
			<uni-forms-item label="姓名:" name="username">
				<uni-easyinput prefixIcon="person-filled" type="text" v-model="formData.username" clearable
					placeholder="请输入姓名" />
			</uni-forms-item>
			<!-- @input="binddata('email',$event.detail.value)" -->
			<uni-forms-item label="密码:" name="password">
				<uni-easyinput prefixIcon="locked-filled" type="password" v-model="formData.password"
					placeholder="请输入密码" />
			</uni-forms-item>
		</uni-forms>
		<checkbox-group @change="checkboxChange">
			<label>
				<checkbox value="checkoutbut" style="transform:scale(0.7)" />
				<span>我已阅读同意<a href="#">服务协议</a>和<a href="#">隐私政策</a></span>
			</label>
		</checkbox-group>

		<button type="primary" @click="submit" :loading="loading">登录</button>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex'
	import {
		login,
		getInfo
	} from '@/api/user'
	export default {
		name: 'login',
		computed: {
			...mapState('user', ['name'])
		},
		data() {
			return {
				// 表单开关
				checkoutage: true,
				// 表单数据
				formData: {
					username:'admin',
					password: '111111'
				},
				// 开关
				loading: false,
				rules: {
					username: {
						rules: [{
							required: true,
							errorMessage: '请输入账号',
						}, ]
					},
					password: {
						rules: [{
							required: true,
							errorMessage: '请输入密码',
						}, ]
					}
				}
			};
		},
		created() {
			console.log('process.env', process.env);
		},
		methods: {
			// 阅读协议
			checkboxChange(e) {
				console.log('协议值', e);
				let data = e.detail.value[0] == 'checkoutbut'
				console.log('data', data);
				this.checkoutage = data ? false : true
			},
			// 触发提交表单
			submit() {
				this.$refs.form.validate().then(res => {
					console.log('this.checkoutage', this.checkoutage);
					if (this.checkoutage) {
						return uni.$showToast('请先勾选用户协议')
					}
					this.loading = true
					console.log('表单数据信息：', res);
					this.login(this.formData)
					this.loading = false
				}).catch(err => {
					console.log('表单错误信息：', err);
					this.loading = false
				})
			},
			async login(userInfo) {
				const res = await login(userInfo)
				console.log('登录接口', res)
				if (res.data.data) {
					console.log('成功了');
					// 存储token
					this.$store.commit("user/SET_TOKEN", res.data.data)
				}
				uni.switchTab({
					url: "/pages/home/home"
				})
				uni.$showToast('登录成功')
			},
		}
	}
</script>

<style lang="scss">
	.loginform {
		width: 100vw;
		height: 100vh;
		// 触发盒子模型-防止右边距不生效
		box-sizing: border-box;
		padding: 50rpx 80rpx;
	}

	.title-log {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		margin: 120rpx auto 100rpx;

		// background-color: aqua;
		image {
			width: 160rpx;
			height: 160rpx;
			margin-bottom: 20rpx;
		}

		text {
			font-size: 60rpx;
		}
	}

	::v-deep uni-checkbox-group {
		margin: -20rpx 0 60rpx 0;

		span {
			a {
				&:nth-child(n) {
					color: #5391ce;
					text-decoration: underline;
				}
			}
		}
	}

	::v-deep::v-deep uni-button {
		margin-top: 80rpx;
		line-height: 70rpx !important;
	}
</style>