uni-app 记住账号密码功能

桃扇骨 2024-04-18 12:41 74阅读 0赞

> 效果

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3hoXzk2MDEyNQ_size_16_color_FFFFFF_t_70][]

> 代码

<template>
    	<view class="content">
    		<view class="login-bg">
    			<view class="login-card">
    				<view class="login-head">瓦力教务登录</view>
    				<view class="login-input login-margin-b">
    					<input type="text" placeholder="账号" id="username" v-model="username" />
    				</view>
    				<view class="login-input">
    					<input type="password" placeholder="请输入密码(8-16位)" id="password" v-model="password" />
    				</view>
    				<view class="remember-psw">
    					<checkbox-group>
    						<label>
    							<checkbox value="psw" :checked='rememberPsw' @tap="rememberPsw =! rememberPsw" color="#09CC86" />记住账号密码</label>
    					</checkbox-group>
    				</view>
    			</view>
    		</view>
    		<view class="login-btn">
    			<button class="landing" type="primary" @tap="loadList">登录</button>
    		</view>
    	</view>
    </template>
    
    <script>
    	export default {
    		data() {
    			return {
    				title: '',
    				username: '',
    				password: '',
    				rememberPsw: true,
    			}
    		},
    		mounted() {
    			//页面加载完成，获取本地存储的用户名及密码
    			const username = uni.getStorageSync('username');
    			const password = uni.getStorageSync('password');
    			// console.log("22",username)
    			if (username && password) {
    				this.username = username;
    				this.password = password;
    			} else {
    				this.username = "";
    				this.password = "";
    			}
    
    		},
    
    		methods: {
    			loadList() {
    				let _this = this;
    				var allParams = {
    					url: 'http://xxx/login?username=' + this.username + '&password=' + this.password, //地址为Config.restUrl拼接地址 
    					setUpUrl: false, //不需要拼接请设置为false 
    					type: 'post', //请求类型
    					success: res => {
    						
    					},
    					sCallback: function(data) {
    						
    					},
    					eCallback: function() {}
    				};
    				//登录成功将用户名密码存储到用户本地
    				if (this.rememberPsw) { //用户勾选“记住密码”
    					uni.setStorageSync('username', this.username);
    					uni.setStorageSync('password', this.password);
    				} else { //用户没有勾选“记住密码”
    					uni.removeStorageSync('username');
    					uni.removeStorageSync('password');
    					this.username = "";
    					this.password = "";
    				}
    				
    				_this.$base.request(allParams);
    			},
    
    		}
    	}
    </script>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3hoXzk2MDEyNQ_size_16_color_FFFFFF_t_70]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/ed7719c4077a4ba6a6119a501930b11f.png