简洁登录

<template> <viewclass="page"> <viewclass="m-all"> <viewclass="header"> <viewclass="tit">你好,请登录!</view> <viewclass="p">欢迎来到知行</view> </vie

平台:uniapp

类型:页面

分类:表单

热度:43°

详情描述

<template>
	<view class="page">
		<view class="m-all">
			<view class="header">
				<view class="tit">你好,请登录!</view>
				<view class="p">欢迎来到知行</view>
			</view>
			<form @submit="formSubmit">
				<view class="m-form">
					<view class="item">
						<view class="pic">
							<image style="width:26rpx;" src="../../static/images/3.30.1.png" mode="widthFix"></image>
						</view>
						<input type="tel" name="tel" placeholder="请输入手机号码" class="inp1">
					</view>
					<view class="item">
						<view class="pic">
							<image style="width:26rpx;" src="../../static/images/3.30.2.png" mode="widthFix"></image>
						</view>
						<input type="password" name="password" password placeholder="请输入登录密码" class="inp1">
					</view>
					<view style="height: 120rpx;"></view>
					<tui-button class="butt" type="green" width="100%" height="88rpx" form-type="submit">登录</tui-button>
				</view>
			</form>
			<view class="link">
				<navigator url="reg" class="s1" hover-class="none">注册账号></navigator>
				<navigator url="pass" class="s1" hover-class="none">忘记密码></navigator>
			</view>
		</view>
	</view>
</template>

<script>
	import form from "@/components/common/tui-validation/tui-validation.js";
	import {
		Login
	} from '@/common/api.js';
	export default {
		data() {
			return {

			}
		},
		methods: {
			formSubmit: function(e) {
				let rules = [{
						name: "tel",
						rule: ["required", "isMobile"],
						msg: ["请输入手机号", "请输入正确的手机号"]
					},
					{
						name: "password",
						rule: ["required", "minLength:6"],
						msg: ["请输入密码", "密码至少需要6个字符"]
			}	
				]
				let formData = e.detail.value;
				//进行表单检查
				let checkRes = form.validation(formData, rules);
				if (!checkRes) {
					Login({
						tel: formData.tel,
						password: formData.password,
					}).then(res => {
						if (res.code == 0) {
							console.log(res)
							this.tui.toast('登录成功')
							this.tui.setUserInfo(res.data, res.token)
							this.tui.goto('/pages/home/home', 1)
						}
						this.tui.goto('/pages/home/home', 1)
					})
				} else {
					this.tui.toast(checkRes);
				}
			}
		}
	}
</script>

<style>
	page{
		background-color: #ffffff;
	}
	input {
		outline: none;
	}

	.m-all {
		padding: 0 40rpx;
	}

	.m-all .header {
		margin-top: 165rpx;
		margin-bottom: 80rpx;
	}

	.m-all .tit {
		font-size: 45rpx;
		color: #262626;
		padding-bottom: 10rpx;
	}

	.m-all .p {
		font-size: 24rpx;
		color: #ababab;
	}

	.m-form {
		overflow: hidden;
	}

	.m-form .item {
		overflow: hidden;
		border-bottom: 1rpx solid #dcdcdc;
		padding: 0 10rpx;
	}

	.m-form .pic {
		float: left;
		width: 26rpx;
		margin-right: 20rpx;
		padding: 25rpx 0;
	}

	.m-form .inp1 {
		width: 520rpx;
		font-size: 29rpx;
		color: #ababab;
		border: none;
		padding: 25rpx 0;
	}

	.m-all .link {
		font-size: 22rpx;
		margin-top: 40rpx;
		color: #ababab;
		text-align: center;
		position: relative;
	}

	.m-all .s1 {
		display: inline;
		padding: 0 28rpx;
	}

	.m-all .link::before {
		content: '';
		height: 25rpx;
		border: 1rpx solid #ababab;
		position: absolute;
		top: 5rpx;
		left: 335rpx;
	}

	.m-form .butt {
		border-radius: 50rpx;
	}
</style>


评论

评论 (0)

上一页 下一页

我要点评

您还未登录,无法发表评论!

售价

¥9.90

购买说明

  • 一次购买拥有使用
  • 有些模块需要下载对应的依赖文件包含(UI框架)

推荐模块