Vue &uni-app（附源码）-----实现登录注册功能

需求：

制作一个简易登录界面

思路：

（1）排版（不细讲）
（2）登录密码的input框，

我们通过v-if来判断输入框的类型、小眼睛的切换、密码是否隐藏

-----输入框的类型 

设置inputType这个变量的初始值为true

<input class="input-phone" type="password" 
v-model="password" placeholder="登录密码" v-if="inputType" />

<input class="input-phone" type="text" 
v-model="password" placeholder="登录密码" v-if="!inputType" />

data() {
			return {
				inputType: true, //初始化时，密码是隐藏，type:password
				password: ''
			}

然后通过点击输入框右侧小眼睛来切换输入框的类型

------小眼睛的切换

 

 在小眼睛上，绑定图片的路径，使用三元表达式，进行切换，

并绑定点击事件@click="changePw"

当inputType：ture时，就会显示图片2，显示密码（就是小黑点），

当inputType：false时，显示明文（数字或者文字）

<image class="input-type"
		:src="inputType ? require('static/mine/apply/2.jpg') :require('static/mine/apply/1.jpg')"
		mode="widthFix" @click="changePw"></image>

//隐藏显示密码
			changePw() {
				let pw = this.password //进行赋值
				this.inputType = !this.inputType 
				this.$nextTick(() => {
					this.password = pw
				})

（3）校验

在按钮上绑定点击事件

<button class="login-btn" type="default" @click="doLogin">登录</button>

//账号密码登录
	async doLogin() {
		var that = this; 声明赋值
		if (that.phone.length == 0 || that.password.length == 0) { 
        //校验非空 当手机号码或者密码没有填时，会有弹框
			wx.showToast({ //弹框提示
				icon: 'none',
				title: '登录账号或密码不能为空！',
				duration: 2000,
			})
		} else if (!this.checked) { 
            //勾选协议  //当服务协议没有打勾时，会有警告弹框
			wx.showToast({ //弹框提示
				icon: 'none',
				title: '请勾选用户服务协议',
				duration: 2000,
			})
		} else { 
			let params = {
				account: that.phone,
				password: that.password,
			};
			let data = await Api.apiCall('post', Api.my.login, params);
			console.log(data);
			if (data.result.code == "0") {
				wx.setStorageSync('account', that.phone);
				wx.setStorageSync('password', that.password);
				wx.setStorageSync('startTime', data.data.startTime);
				wx.setStorage({
					key: "user",
					data: data.data.user,
					success: function() {
						wx.switchTab({
							url: '/pages/home/index'
						});
					}
				});
			} else {  
				wx.showToast({
					icon: 'none',
					title: data.result.msg,
					duration: 2000,
				})
			}
		}

源码展示：

<template>
<view>
	<!-- 登录注册板块 -->
<view class="login">
	<view class="title">请登录</view>
<view class="input-content">
	<view class="input-box">
		<image class="input-bg" 
                      :src="require('static/mine/like/like.png')" 
                         mode="scaleToFill"></image>
	   <input class="input-phone" type="text" v-model="phone" placeholder="登录账号" />
	</view>
	<view class="input-box">
	<image class="input-bg" 
        :src="require('static/mine/like/forward.png')" mode="scaleToFill"></image>
	<input class="input-phone" 
        type="text" v-model="password" placeholder="登录密码" v-if="!inputType" />
	<input class="input-phone" 
        type="password" v-model="password" placeholder="登录密码" v-if="inputType" />
	<image class="input-type":src="inputType ? 
        require('static/mine/apply/2.jpg') : require('static/mine/apply/1.jpg')"
		mode="widthFix" @click="changePw"></image>
</view>
</view>
<button class="login-btn" type="default" @click="doLogin">登录</button>
<!-- 服务协议板块 -->
<view class="checkbox">
	<u-checkbox-group>
		<u-checkbox v-model="checked" shape="circle" size="36" active-color="#CC0000">
						已阅读并同意<text class="user">《用户服务协议》</text>
		</u-checkbox>
	</u-checkbox-group>
</view>
</view>		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				inputType: true, //显示密码
				password: ''
			}
		},
		methods: {
			
			//隐藏显示密码
			changePw() {
				let pw = this.password 
				this.inputType = !this.inputType 
				this.$nextTick(() => {
					this.password = pw
				})
		},
		//账号密码登录
		async doLogin() {
			var that = this;
			if (that.phone.length == 0 || that.password.length == 0) { //校验非空
				wx.showToast({ //弹框提示
					icon: 'none',
					title: '登录账号或密码不能为空！',
					duration: 2000,
				})
			} else if (!this.checked) { //勾选协议
				wx.showToast({ //弹框提示
					icon: 'none',
					title: '请勾选用户服务协议',
					duration: 2000,
				})
			} else {
				let params = {
					account: that.phone,
					password: that.password,
				};
				let data = await Api.apiCall('post', Api.my.login, params);
				console.log(data);
				if (data.result.code == "0") {
					wx.setStorageSync('account', that.phone);
					wx.setStorageSync('password', that.password);
					wx.setStorageSync('startTime', data.data.startTime);
					wx.setStorage({
						key: "user",
						data: data.data.user,
						success: function() {
							wx.switchTab({
								url: '/pages/home/index'
							});
						}
					});
				} else {
					wx.showToast({
						icon: 'none',
						title: data.result.msg,
						duration: 2000,
					})
				}
			}
		},
		onReady() {

		}
	}
	}
</script>

<style scoped lang="scss">
	
	.login {
		.bg-content {
			width: 100%;
			height: 450upx;
			position: relative;
			overflow: hidden;
	
			.bg {
				// width: 100%;
				width: 30upx;
				height: auto;
				position: absolute;
				bottom: 0;
				left: 50%;
				transform: translateX(-50%);
			}
		}
	
		.title {
			padding: 47upx;
			text-indent: 55upx;
			font-size: 48upx;
			font-weight: 400;
			color: #333333;
		}
	
		.input-content {
			padding: 0 23upx;
	
			.input-box {
				position: relative;
				margin: 0 auto;
				padding: 0 50upx;
				height: 120upx;
	
				.input-bg {
					position: absolute;
					left: 0;
					right: 0;
					top: 40upx;
					bottom: 0;
					width: 30upx;
					height: 30upx;
				}
	
				.input-phone {
					width: 100%;
					height: 100upx;
				}
	
				.input-type {
					z-index: 2;
					position: absolute;
					right: 50upx;
					top: 30upx;
					width: 40upx;
					height: auto;
				}
			}
		}
	
		.login-btn {
			margin-top: 86upx;
			width: 92%;
			height: 104upx;
			background: #CC0000;
			border-radius: 52px;
			color: #FFFFFF;
			box-shadow: 0upx 0upx 20upx rgba(204, 0, 0, 0.2);
		}
	
		.checkbox {
			width: 92%;
			margin: 20upx auto;
			font-size: 28upx;
	
			.user {
				color: #0096FF;
			}
		}
	}
</style>

效果展示：