uniapp开发 结合uview实现登录记住密码.

使用

<rememberPassword :username.sync="formdata.username" :password.sync="formdata.userpwd" ref="rememberPassword"></rememberPassword>
bindLogin() {
	var that = this;
	if (!uni.$u.test.rangeLength(this.formdata.username, [1, 20])) {
		uni.showToast({
			title: '请输用户名',
			icon: 'none'
		})
		return
	}
	if (!uni.$u.test.rangeLength(this.formdata.userpwd, [1, 20])) {
		uni.showToast({
			title: '请输入密码',
			icon: 'none'
		})
		return
	}
	uni.showLoading({
		title: '登录中',
		mask: true
	})
	setTimeout(() => {
		uni.hideLoading()
	}, 3000)
	Login({
		"loginName": this.formdata.username,
		"password": this.formdata.userpwd
	}).then(res => {
		uni.hideLoading()
		if (res.code == 0) {
			that.$refs.rememberPassword.rememberPassword();
			uni.setStorageSync('userData', res.data)
			uni.setStorageSync('userCode', res.data.userCode)
			uni.showToast({
				title: '登录成功',
				icon: 'none'
			})
			setTimeout(() => {
				uni.reLaunch({
					url: '/pages/index/index'
				});
			}, 2000)
		}
	}).catch(err => {
	})
},

组件代码

/**
* @Author: 858834013@qq.com
* @Name: rememberPwd
* @Date: 2022-07-09
* @Desc: 记住密码
*/
<template>
	<div class="rememberPwd">
		<u-checkbox-group @change="change">
			<u-checkbox :checked="rememberPwd" shape="circle" label="记住密码"></u-checkbox>
		</u-checkbox-group>
	</div>
</template>

<script>
	export default {
		name: "rememberPwd",
		components: {},
		props: {
			password: {
				type: String,
				default () {
					return '';
				}
			},
			username: {
				type: String,
				default () {
					return '';
				}
			},
		},
		data() {
			return {
				rememberPwd: false
			}
		},
		watch: {
			rememberPwd() {
				uni.setStorageSync('rememberPwd', this.rememberPwd)
			}
		},
		mounted() {
			const username = uni.getStorageSync('username');
			const password = uni.getStorageSync('password');
			const rememberPwd = uni.getStorageSync('rememberPwd');
			if (rememberPwd) {
				this.rememberPwd = true
			} else {
				this.rememberPwd = false
			}
			if (username && password) {
				this.$emit('update:username', username)
				this.$emit('update:password', password)
			} else {
				this.$emit('update:username', '')
				this.$emit('update:password', '')
			}
		},
		methods: {
			change() {
				this.rememberPwd = !this.rememberPwd
			},
			rememberPassword() {
				if (this.rememberPwd) {
					uni.setStorageSync('username', this.username);
					uni.setStorageSync('password', this.password);
				} else {
					uni.removeStorageSync('username');
					uni.removeStorageSync('password');
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	.rememberPwd {
		display: flex;
		justify-content: flex-start;
		align-items: center;
		flex-wrap: nowrap;
		flex-direction: row;
		align-content: flex-start;
	}
</style>