uniapp/pagesAccount/login/index.vue

<template>
	<view class="content">
		<view class="one">
			{{basicInfo.name}}
		</view>
		<view class="two">
			<uni-forms ref="form" :model="form" :rules="rules" label-width="auto">
				<uni-forms-item label="登录账号" name="account">
					<uni-easyinput type="text" v-model="form.account" placeholder="请输入登录账号" />
				</uni-forms-item>
				<uni-forms-item label="登录密码" name="password">
					<uni-easyinput type="text" v-model="form.password" placeholder="请输入登录密码" />
				</uni-forms-item>
			</uni-forms>
			<view class="btn">
				<button size="mini" @tap="toSubmit('form')">提交登录</button>
			</view>
		</view>
		<view class="thr">
			<button size="mini" @tap="toRegister()">账号注册</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 基本信息
				basicInfo: {},
				form: {},
				rules: {
					account: {
						rules: [ //
							{
								required: true,
								errorMessage: '请输入登录账号',
							}
						]
					},
					passowrd: {
						rules: [ //
							{
								required: true,
								errorMessage: '请输入登录密码',
							}
						]
					}
				},
				// 协议
				agree: true
			};
		},
		onLoad() {

		},
		onShow() {
			const that = this;
			that.searchBasic();
		},
		methods: {
			searchBasic() {
				const that = this;
				uni.getStorage({
					key: 'basicInfo',
					success: (res) => {
						let data = res.data
						that.$set(that, `basicInfo`, data);
					}
				})
			},
			// 提交登录
			async toSubmit(ref) {
				const that = this;
				let agree = that.agree;
				let form = that.form;
				if (agree) {
					let res = await that.$api('user/login', 'POST', form)
					if (res.errcode == '0') {
						console.log(res.data);
					} else {
						uni.showToast({
							title: res.errmsg,
							icon: 'none'
						})
					}
				} else {
					uni.showToast({
						title: '请阅读并同意用户协议和隐私政策',
						icon: 'none'
					})
				}
			},
			toRegister() {
				uni.navigateTo({
					url: '/pagesAccount/register/index'
				})
			}
		}
	}
</script>

<style lang="scss">
	.content {
		background-color: var(--rgb000);
		padding: 0 2vw;

		.one {
			text-align: center;
			font-size: 30px;
			font-family: monospace;
			color: var(--rgbfff);
			padding: 10vw 0 10vw 0;
		}

		.two {
			margin: 0 0 4vw 0;

			.uni-easyinput {
				margin: 0 0 15px 0;
			}

			.btn {
				padding: 2vw 0 0 0;
				text-align: center;

				button {
					width: 80%;
					background-color: var(--rgbfa4);
					color: var(--rgbfff);
					padding: 1vw 0;
				}
			}
		}

		.thr {
			text-align: center;

			button {
				background-color: var(--rgbfa4);
				color: var(--rgbfff);
			}
		}
	}
</style>