uni-app ——Related implementation of the login function of the applet

Article Directory

• foreword
• 1. Example diagram
• 2. Construction of static pages
  • 1. Static page for login page
  • css style settings
  • 2. Static page of my page
  • css style settings
• Third, the implementation logic of the login page
  • 1. Components for form validation
  • 2. The idea of ​​verifying successful login
  • 3. Specific code implementation

---

1. Example diagram

 

2. Construction of static pages

Implementation ideas:

The main function points that need to be realized: When the user is logged in or not logged in, the display status of "My Page" should change accordingly.

1. Static page for login

<template>
	<view>
		<image class="bg-img" src="../../static/images/one.jpg"></image>
		<view class="wrapper">

			<!-- 顶部退出按钮 -->

			<!-- 表单区域 -->
			<u-form :model="form" ref="uForm">
				<u-form-item prop="username" class="border-active">
					<u-input v-model="form.username" placeholder="请输入手机号/邮箱/用户名" />
				</u-form-item>
				<u-form-item prop="password">
					<u-input v-model="form.password" placeholder="请输入密码" />
				</u-form-item>
				<view class="m-3 button">
					<u-button @click="submit" text="登录"
						color="linear-gradient(to right, rgb(66, 83, 216), rgb(213, 51, 186))"></u-button>
				</view>
				<u-form-item prop="choose">
					<view class="d-flex m-3">
						<view class="checkbox d-flex" @click="changeChecked">
							<u-checkbox-group>
								<u-checkbox shape="circle" size="34" :checked="isChecked" :name="item.name">
								</u-checkbox>
								请勾选用户协议
							</u-checkbox-group>
						</view>
						<view class="forget-password">
							<text>忘记密码</text>
						</view>
					</view>
				</u-form-item>
			</u-form>



		</view>
	</view>

</template>

css style settings

<style scoped>
	/* 表单外部容器样式设置 */
	.bg-img {
		position: fixed;
		width: 100%;
		height: 100%;
		top: 0;
		left: 0;
		z-index: -1;
		opacity: .7;
	}

	.wrapper {
		margin: 0 auto;
		margin-top: 150rpx;
		padding: 80rpx;
		width: 500rpx;
		border: 3rpx solid rbg(193, 200, 215);
		border-radius: 30rpx;
		background: #fff;
		opacity: .8;
	}



	.border-active {
		border-color: black;
	}

	.m-3 {
		justify-content: space-between;
		font-size: 30rpx;
	}
</style>

2. Static page of "My Page"

<template>
	<view>
		<!-- 用户昵称区域 -->
		<view class="head">
			<image class="bg-img" src="../../static/images/bg.jpg" mode=""></image>
			<view class="d-flex user-about">
				<view class="d-flex">
					<view>
						<image class="user-img"
							:src="userinfo.avatar ? userinfo.avatar : '../../static/images/demo/demo6.jpg'" mode="">
						</image>
					</view>
					<view class="user-name">
						<text @click="toLogin">{
   
   {userinfo.nickname ?userinfo.nickname : '登录/注册' }}</text>
					</view>
				</view>
				<view class="member" v-if="userinfo.status == 1">
					<text>会员积分</text>
				</view>
			</view>
		</view>

		<!-- 订单信息区域 -->
		<view v-if="userinfo.status == 1">
			<view class="order d-flex a-center">
				<view class="my-order">
					我的订单
				</view>
				<view class="more-order">
					更多
				</view>
			</view>
			<view>
				<scroll-view scroll-x="true">
					<view class="d-flex">
						<view class="order-item">
							<view>
								<image class="order-img" src="../../static/images/demo/demo5.jpg" mode=""></image>
							</view>
							<view>
								小米手机
							</view>
						</view>
						<view class="order-item">
							<view>
								<image class="order-img" src="../../static/images/demo/demo5.jpg" mode=""></image>
							</view>
							<view>
								小米手机
							</view>
						</view>
						<view class="order-item">
							<view>
								<image class="order-img" src="../../static/images/demo/demo5.jpg" mode=""></image>
							</view>
							<view>
								小米手机
							</view>
						</view>
						<view class="order-item">
							<view>
								<image class="order-img" src="../../static/images/demo/demo5.jpg" mode=""></image>
							</view>
							<view>
								小米手机
							</view>
						</view>
						<view class="order-item">
							<view>
								<image class="order-img" src="../../static/images/demo/demo5.jpg" mode=""></image>
							</view>
							<view>
								小米手机
							</view>
						</view>
						<view class="order-item">
							<view>
								<image class="order-img" src="../../static/images/demo/demo5.jpg" mode=""></image>
							</view>
							<view>
								小米手机
							</view>
						</view>
					</view>
				</scroll-view>
			</view>
		</view>

		<!-- 功能列表区域 -->
		<view class="main">
			<view class="main-item" v-for="(item,index) in title" :key="index">
				<text class="iconfont icon" :class="item.icon" :style="'color:'+item.leftIconStyle"></text>
				<text>{
   
   {item.title}}</text>
			</view>
		</view>

		<!-- 退出登录区域 -->
		<view class="footer" v-if="userinfo.status == 1">
			<text @click="goLogin">退出登录</text>
		</view>
	</view>
</template>

css related styles

<style scoped>
	/* 顶部区域样式设置 */

	.bg-img {
		position: fixed;
		width: 100%;
		height: 380rpx;
		top: 0;
		left: 0;
		z-index: -1;
		opacity: .7;
	}

	.user-img {
		width: 180rpx;
		height: 180rpx;
		border-radius: 50%;
		margin-right: 30rpx;
	}

	.user-about {
		height: 180rpx;
		line-height: 180rpx;
		margin-top: 150rpx;
		padding: 0 40rpx;
		justify-content: space-between;
	}

	.user-name text {
		font-size: 40rpx;
	}

	.member {
		width: 220rpx;
		height: 80rpx;
		line-height: 80rpx;
		margin-top: 45rpx;
		background: linear-gradient(to right, rgb(170, 170, 255), rgb(201, 134, 142));
		text-align: center;
		border-radius: 50rpx;
	}

	/* 订单区域样式设置 */
	.order {
		bakcground: #bfa;
		padding: 40rpx;
		justify-content: space-between;
		margin-top: 30rpx;
	}

	.more-order {
		width: 140rpx;
		height: 60rpx;
		line-height: 60rpx;
		text-align: center;
		border-radius: 50rpx;
		border: 3rpx solid rgb(244, 244, 244);
	}

	.order-img {
		width: 150rpx;
		height: 150rpx;
		border-radius: 30rpx;
	}

	.order-item {
		margin-left: 33rpx;
	}

	/* 功能区域列表样式设置 */
	.main {
		padding: 0 30rpx;
		margin-top: 55rpx;
		line-height: 80rpx;
	}

	.main-item {
		border-bottom: 3rpx solid rgb(214, 214, 214);
	}

	.icon {
		margin-right: 20rpx;
	}

	/* 退出登录区域样式设置 */
	.footer {
		height: 100rpx;
		line-height: 100rpx;
		margin-top: 20rpx;
		text-align: center;
	}

	.footer text {
		width: 200rpx;
		background: pink;
		height: 80rpx;
		line-height: 80rpx;
		border-radius: 40rpx;
		display: inline-block;
		background: linear-gradient(to right, rgb(203, 211, 216), rgb(192, 122, 141));
	}
</style>

Third, the implementation logic of the login page

1. Components for form validation

Here you can use the from component in uview, which is relatively simple for form validation.

2. The idea of ​​verifying successful login

• When the user name and password format is entered incorrectly, there should be a corresponding prompt.

• After the user name and password are entered correctly, if the user does not check to agree to the user agreement, there should be a corresponding prompt.

 3. Specific code implementation

3.1 Realization of login function

<script>
	// 引入获取登录页面数据的方法
	import {
		getLogin
	} from '../../api/login.js'

	export default {
		data() {
			return {

				// 用来表示复选框是否被选中
				isChecked: false,
				form: {
					username: '',
					password: '',
					choose: ''
				},
				rules: {
					// 验证用户名
					username: [{
							required: true,
							message: '请输入用户名',
							trigger: ['change', 'blur'],
						},
						{
							// 自定义验证函数，见上说明
							validator: (rule, value, callback) => {

								// 上面有说，返回true表示校验通过，返回false表示不通过
								// uni.$u.test.mobile()就是返回true或者false的
								return uni.$u.test.enOrNum(value);
							},
							message: '用户名不正确',
							// 触发器可以同时用blur和change
							trigger: ['change', 'blur'],
						}
					],
					// 验证密码
					password: [{
							required: true,
							message: '请输入密码',
							trigger: ['change', 'blur'],
						},
						{
							// 自定义验证函数，见上说明
							validator: (rule, value, callback) => {
								// 上面有说，返回true表示校验通过，返回false表示不通过
								// uni.$u.test.mobile()就是返回true或者false的
								return uni.$u.test.enOrNum(value);
							},
							message: '密码不正确',
							// 触发器可以同时用blur和change
							trigger: ['change', 'blur'],
						}
					],

				},

			};
		},

		methods: {
			// 表单提交事件
			submit() {
				if (this.isChecked) {
					this.$refs.uForm.validate().then(res => {
						uni.$u.toast('登录成功！');
						getLogin(this.form).then((response) => {
							console.log(response)
							if (response.msg == 'ok') {
								this.$store.dispatch('login/userInfo', response.data);
							}
						})
						uni.switchTab({
							url: '../../pages/myfile/myfile'
						})
					}).catch(errors => {
						uni.$u.toast('登录失败！')
					})
				} else {
					uni.showModal({
						title: '提示',
						content: '请勾选用户协议!',
					});

				}
			},

			// 复选框的点击事件
			changeChecked() {
				this.isChecked = !this.isChecked;
				console.log(this.isChecked)
			},

		},

		// 必须要在onReady生命周期，因为onLoad生命周期组件可能尚未创建完毕
		onReady() {
			this.$refs.uForm.setRules(this.rules);
		},

	};
</script>

3.2 "My Page" function realization

<script>
	import {
		mapState
	} from 'vuex';
	export default {
		data() {
			return {
				title: [{
						title: '小米会员',
						icon: 'icon-VIP',
						leftIconStyle: '#FDBF2E'
					},
					{
						title: '会员中心',
						icon: 'icon-huangguan',
						leftIconStyle: '#FCBE2D'
					},
					{
						title: '服务中心',
						icon: 'icon-service',
						leftIconStyle: '#FA6C5E'
					},
					{
						title: '小米之家',
						icon: 'icon-home',
						leftIconStyle: '#FE8B42'
					},
					{
						title: '更多功能',
						icon: 'icon-gengduo',
						leftIconStyle: '#9ED45A'
					},
				]
			}
		},
		computed: {
			...mapState('login', ['userinfo'])
		},
		methods: {
			// 退出登录跳转到登录页面
			goLogin() {
				uni.navigateTo({
					url: '../../pages/login/login'
				})
				this.$store.dispatch('login/loginout')
			},
			// 点击登录字体登录
			toLogin() {
				uni.navigateTo({
					url: '../../pages/login/login'
				})
			}
		}
	}
</script>