登录记住账号密码

pages/group-buy/group-baseinfo.nvue

@@ -467,6 +467,7 @@
 	.uni-input-text {
 		font-size: 14px;
 		color: #888;
+		line-height: 50%;
 	}
 
 	.icon-arrow {

pages/login/login.nvue

@@ -30,6 +30,37 @@
 					placeholder-class='placeholder-text' />
 			</view> -->
 		</view>
+		<!-- <view class="mui-input-row mui-checkbox rememberAll">
+			<view class="rememberNum">
+				<checkbox-group @change="checkboxChangeNum">
+					<checkbox
+						color="#FF1D32"
+						id="chkRemNum"
+						type="checkbox"
+						:checked="rememberAt"
+						@tap="rememberAt = !rememberAt"
+						class="RememberCheck"
+					>
+					</checkbox>
+					<lable for="chkRemNum" class="RememberPass">记住账号</lable>
+				</checkbox-group>
+			</view>
+			<view class="">
+				<checkbox-group @change="checkboxChange">
+					<checkbox
+						color="#FF1D32" 
+						id="chkRem"
+						type="checkbox"
+						:checked="rememberPsw"
+						@tap="rememberPsw = !rememberPsw"
+						class="RememberCheck"
+					>
+					</checkbox>
+					<lable for="chkRem" class="RememberPass">记住密码</lable>
+				</checkbox-group>
+			</view>
+		</view> -->
+
 		<view class="bottom">
 			<button class="btn" type="default" @click="goLogin" :class="{ 'btn-disabled': disabled }"
 				:disabled="disabled"><text class="btn-text">{{loginBtnText}}</text></button>
@@ -65,7 +96,9 @@
 				loginType: 'password',
 				passwordVisible: false,
 				disabled: false,
-				cursorNumber: 0
+				cursorNumber: 0,
+				rememberPsw: true,
+				rememberAt: true,
 			}
 		},
 		computed: {
@@ -112,18 +145,13 @@
 		mounted() {
 			let that = this;
 			//缓存的账号
-			const username = uni.getStorageSync('username');
+			const username = uni.getStorageSync('username') || '';
 			//缓存的密码
-			const password = uni.getStorageSync('password');
+			const password = uni.getStorageSync('password') || '';
 			console.log("密码",password,username)
 			//有缓存就赋值给文本没有就清空
-			if (username && password) {
-				that.account = username;
-				that.password = password;
-			} else {
-				that.account = '';
-				that.password = '';
-			}
+			that.account = username || ''
+			that.password = password || ''
 			that.handlePasswordVisible()
 			that.$nextTick(()=>{
 				setTimeout(function() {
@@ -132,6 +160,27 @@
 			})
 		},
 		methods: {
+			checkboxChangeNum(){
+				if (e.detail.value.length == 1) {
+					//获取缓存的账号
+					 uni.getStorageSync('username',this.account);
+					 // uni.getStorageSync('password',this.password);
+				} else {
+					  uni.removeStorageSync('username');
+					  // uni.removeStorageSync('password');              
+				}
+			},
+			//复选框
+			checkboxChange: function(e) {
+				if (e.detail.value.length == 1) {
+					//获取缓存的账号
+					 // uni.getStorageSync('username',this.account);
+					 uni.getStorageSync('password',this.password);
+				} else {
+					  // uni.removeStorageSync('username');
+					  uni.removeStorageSync('password');              
+				}
+			},
 			// 切换密码可见性
 			handlePasswordVisible() {
 				this.passwordVisible = !this.passwordVisible;
@@ -157,8 +206,19 @@
 					// 	status: 1
 					// }
 					if (res.status === 1) {
-						uni.setStorageSync('username', this.account);
+						//缓存账号和密码
+						if (this.rememberPsw) {
 							uni.setStorageSync('password', this.password);
+						} else {
+							uni.removeStorageSync('password');   
+						}
+						if(this.rememberAt){
+							uni.setStorageSync('username', this.account);
+						} else {
+							uni.removeStorageSync('username');
+						}
+						// uni.setStorageSync('username', this.account);
+						// uni.setStorageSync('password', this.password);
 						this.$uStore({
 							name: 'userInfo',
 							value: {
@@ -221,6 +281,13 @@
 </script>
 
 <style lang="scss" scoped>
+	.mui-checkbox input[type='checkbox']:checked:before {
+	    color: #00bbb1;
+	}
+	.RememberPass {
+	    color: #adadad;
+	    margin-top: 5px;
+	}
 	.login {
 		display: flex;
 		flex-direction: column;
@@ -248,7 +315,7 @@
 	.middle {
 		display: flex;
 		flex-direction: column;
-		margin: 100rpx 0 56rpx;
+		margin: 100rpx 0 26rpx;
 	}
 
 	.placeholder-text {
@@ -322,4 +389,13 @@
 		font-size: 28rpx;
 		color: #666660;
 	}
+	.rememberAll{
+		margin-bottom: 28rpx;
+	}
+	.rememberNum{
+		margin-right: 60rpx;
+	}
+	.RememberCheck{
+		margin-right: 10rpx;
+	}
 </style>