密码强度+试听权限错乱

pages/bookShop/commodityDetail.vue

@@ -75,7 +75,7 @@
 								<image :src="item.images" mode="aspectFit"></image>
 							</view>
 							<text style="padding-right: 10rpx;">{{item.name}}</text>
-							<u-icon v-if="item.canListen == 'true'" name="volume" color="#71d5a1" size="24"
+							<u-icon v-if="item.canListen == true" name="volume" color="#71d5a1" size="24"
 								@click="goToListen(item.id)"></u-icon>
 							<u-icon v-else name="volume" color="#71d5a1" size="24"
 								@click="goToListenNone(item.id)"></u-icon>

pages/eBook/bookContent.vue

@@ -52,7 +52,7 @@
 			<view class="playList" v-if="libLIst.length > 0">
 				<view class="item" v-for="(item,index) in libLIst" :key="index" >
 					<view >
-						<view v-if="3 > index"
+						<view v-if="item.isFree == 1"
 						:class="[ 
 						userInfo.playingInfo.bookId==item.bookId && userInfo.playingInfo.id == item.id ? 'playing' : '']" @click="listenOne(item, index)">
 						<span :class="['graytitle']">{{item.chapter}}</span>&nbsp;&nbsp;
@@ -155,7 +155,9 @@
 		onPageScroll(e) {
 			this.scrollTop = e.scrollTop;
 		},
-
+		onHide() {
+			this.libLIst = []
+		},
 		//第一次加载
 		onLoad(e) {
 			this.bookId = e.Id
@@ -303,7 +305,13 @@
 						if(res.code == 0){
 							console.log(res,999)
 							if(res.BookCatalogue.length > 0){	
-								this.libLIst = res.BookCatalogue
+								res.BookCatalogue.map( item => {
+									if(item.isFree == 1){
+										this.libLIst.push(item)
+									}
+								})
+								console.log('改变后的试听目录',this.libLIst)
+								//this.libLIst = res.BookCatalogue
 								// this.fengImg = res.images
 							}
 						}

pages/user/persData.vue

@@ -50,8 +50,8 @@
 			<view class="tanchu">
 				<view class="dp_title">请输入昵称</view>
 				<u--input v-model="userMes.nickname" placeholder="请输入昵称" border="surround" clearable></u--input>
-				<u-button color="linear-gradient(to right, #72d386, #317e42)" text="确定" @click="choseNickname(userMes.nickname)"
-					style="margin-top: 50rpx;"></u-button>
+				<u-button color="linear-gradient(to right, #72d386, #317e42)" text="确定"
+					@click="choseNickname(userMes.nickname)" style="margin-top: 50rpx;"></u-button>
 				<view @click="nicknameShow=false" class="dp_canBtn">取消</view>
 			</view>
 		</u-popup>
@@ -88,16 +88,21 @@
 		</u-popup>
 
 		<!-- 密码 -->
-		<u-popup :show="passwordShow" :round="10" @close="passwordShow=false">
+		<u-popup :show="passwordShow" :round="10" @close="cancelPass">
 			<view class="tanchu">
 				<view class="dp_title">请修改密码</view>
-				<u--input v-model="userMes.password" placeholder="请输入新密码" :password="true" border="surround" clearable>
+				<u--input v-model="userMes.password" placeholder="请输入新密码" :password="true" border="surround" clearable
+					@input="inputMethod(userMes.password)">
 				</u--input>
+				<view class="" style="font-size: 28rpx; color: #999;">
+					<p v-if="note != ''">{{note}}</p>
+					<p v-html="str2" style="margin-top: 10rpx;"></p>
+				</view>				
 				<u--input v-model="userMes.Repassword" placeholder="请再确认密码" :password="true" border="surround" clearable
 					style="margin-top: 20rpx;"></u--input>
 				<u-button color="linear-gradient(to right, #72d386, #317e42)" text="确定" @click="chosePassword()"
 					style="margin-top: 50rpx;"></u-button>
-				<view @click="passwordShow=false" class="dp_canBtn">取消</view>
+				<view @click="cancelPass" class="dp_canBtn">取消</view>
 			</view>
 		</u-popup>
 		<!-- <view class="btn_box">
@@ -113,10 +118,18 @@
 	import {
 		mapState
 	} from 'vuex';
+	// 密码验证的正则
+	//1、密码为八位及以上并且字母数字特殊字符三项都包括
+	var strongRegex = new RegExp("^(?=.{8,})(?=.*[A-Z])(?=.*[a-z])(?=.*[0-9])(?=.*\\W).*$", "g");
+	//2、密码为八位及以上并且字母、数字、特殊字符三项中有两项，强度是中等
+	var mediumRegex = new RegExp(
+		"^(?=.{8,})(((?=.*[A-Z])(?=.*[a-z]))|((?=.*[A-Z])(?=.*[0-9]))|((?=.*[a-z])(?=.*[0-9]))|((?=.*[a-z])(?=.*\\W))|((?=.*[0-9])(?=.*\\W))|((?=.*[A-Z])(?=.*\\W))).*$",
+		"g");
+	var enoughRegex = new RegExp("(?=.{8,}).*", "g");
 	export default {
 		data() {
 			return {
-				playData:{},
+				playData: {},
 				userMes: {
 					id: '',
 					age: '',
@@ -125,7 +138,7 @@
 					tel: '',
 					password: '',
 					Repassword: '',
-					oldName:'',  // 老的用户名
+					oldName: '', // 老的用户名
 				},
 				avatarShow: false,
 				nicknameShow: false,
@@ -142,6 +155,9 @@
 						id: 0,
 					}
 				],
+				note: '',
+				str2: '',
+				passwordOk:false,     // 密码是否满足规则
 			};
 		},
 		//第一次加载
@@ -158,7 +174,7 @@
 			uni.hideTabBar();
 			this.getData();
 		},
-		components:{
+		components: {
 			musicPlay
 		},
 		//方法
@@ -181,146 +197,190 @@
 						});
 				}
 			},
-
-			// 头像
-			choseAvatar(e) {
-				let that = this
-				if (that.fileAvatar.length == 0) {
-					uni.showToast({
-						title: "请选择图片",
-						icon: 'none'
-					});
-					return
-				}
-				that.userMes.avatar = that.fileAvatar[0].url
-				that.choseData()
-				that.avatarShow = false
-				that.fileAvatar.splice(0, 1)
+			cancelPass(){
+					this.passwordShow = false,
+					this.userMes.password = '',
+					this.userMes.Repassword = ''
+					this.note = '',
+					this.str2 = ''
 			},
-			// 年龄
-			choseAge(e) {
-				let that = this
-				if(that.userMes.age<=0){
-					uni.showToast({
-						title: "年龄不能小于0",
-						icon: 'none'
-					});
-					return
-				}
-				that.choseData()
-				that.ageShow = false
-			},
-
-			// 昵称
-			choseNickname(e) {
-				let that = this
-				if(e && e != ''){
-					
-					that.choseData()
-					that.nicknameShow = false
-				}else{
-					that.userMes.nickname = that.userMes.oldName
-					console.log(that.userMes.nickname)
-					uni.showToast({
-						title:'昵称不可为空',
-						icon:'none'
-					})
-				}
-			},
-
-			// 性别
-			choseSex(e) {
-				let that = this
-				that.userMes.sex = e
-				that.choseData()
-				that.sexShow = false
-			},
-
-			// 修改密码
-			chosePassword() {
-				let that = this
-				if (that.userMes.Repassword == '' || that.userMes.password == '') {
-					uni.showToast({
-						icon: "none",
-						title: "请输入密码！"
-					});
-					return
-				}
-				if (that.userMes.Repassword != that.userMes.password) {
-					uni.showToast({
-						icon: "none",
-						title: "两次密码输入不一致！"
-					});
-					return
-				}
-				that.choseData()
-				that.passwordShow = false
-			},
-
-			// 修改个人资料
-			choseData() {
-				let that = this
-				$http.request({
-					url: "book/user/update",
-					method: "POST",
-					data: that.userMes,
-					header: {
-						'Content-Type': 'application/json'
+			// 密码验证
+			inputMethod(value) {
+				this.passwordOk = false
+				console.log('输入的值为：', value)
+				if (strongRegex.test(value)) {
+					//console.log('强密码-----',value)
+					this.str2 = "<span style='color:#18bc37'>密码强度很不错哦！</span>"
+					// this.note = '请至少使用大小写字母、数字、符号两种类型组合的密码，长度至少为8位。'
+					this.note = ''
+					this.passwordOk = true
+				} else if (mediumRegex.test(value)) {
+					//console.log('中等密码-----',value)
+					this.note = '请至少使用大小写字母、数字、符号两种类型组合的密码，长度至少为8位。'
+					this.str2 = "<span style='color:#2979ff'>密码强度中等!</span>"
+					this.passwordOk = true
+				} else if (enoughRegex.test(value)) {
+					//console.log('弱密码-----',value)
+					this.str2 = "<span style='color:#f3a73f'>密码强度太弱!</span>"
+					this.note = '请至少使用大小写字母、数字、符号两种类型组合的密码，长度至少为8位。'
+				} else {
+					this.note = '请至少使用大小写字母、数字、符号两种类型组合的密码，长度至少为8位。'
+					//console.log('密码-----',value)				
+}
+				},
+				// 头像
+				choseAvatar(e) {
+						let that = this
+						if (that.fileAvatar.length == 0) {
+							uni.showToast({
+								title: "请选择图片",
+								icon: 'none'
+							});
+							return
+						}
+						that.userMes.avatar = that.fileAvatar[0].url
+						that.choseData()
+						that.avatarShow = false
+						that.fileAvatar.splice(0, 1)
 					},
-				}).then(function(res) {
-					if (res.code == 0) {
-						uni.showToast({
-							title: "修改成功"
+					// 年龄
+					choseAge(e) {
+						let that = this
+						if (that.userMes.age <= 0) {
+							uni.showToast({
+								title: "年龄不能小于0",
+								icon: 'none'
+							});
+							return
+						}
+						that.choseData()
+						that.ageShow = false
+					},
+
+					// 昵称
+					choseNickname(e) {
+						let that = this
+						if (e && e != '') {
+
+							that.choseData()
+							that.nicknameShow = false
+						} else {
+							that.userMes.nickname = that.userMes.oldName
+							console.log(that.userMes.nickname)
+							uni.showToast({
+								title: '昵称不可为空',
+								icon: 'none'
+							})
+						}
+					},
+
+					// 性别
+					choseSex(e) {
+						let that = this
+						that.userMes.sex = e
+						that.choseData()
+						that.sexShow = false
+					},
+
+					// 修改密码
+					chosePassword() {
+						if(!this.passwordOk){
+							 console.log('不满足密码格式',this.note)
+							uni.showToast({
+								title:this.note,
+								icon: 'none'
+							})
+							return
+						}
+						
+						let that = this					
+						
+						if (that.userMes.Repassword == '' || that.userMes.password == '') {
+							uni.showToast({
+								icon: "none",
+								title: "请输入密码！"
+							});
+							return
+						}
+						if (that.userMes.Repassword != that.userMes.password) {
+							uni.showToast({
+								icon: "none",
+								title: "两次密码输入不一致！"
+							});
+							return
+						}
+						
+						that.choseData()
+						that.passwordShow = false
+					},
+
+					// 修改个人资料
+					choseData() {
+						let that = this
+						$http.request({
+							url: "book/user/update",
+							method: "POST",
+							data: that.userMes,
+							header: {
+								'Content-Type': 'application/json'
+							},
+						}).then(function(res) {
+							if (res.code == 0) {
+								uni.showToast({
+									title: "修改成功,退出登陆后生效"
+								});
+							}
+						}).catch(function(error) {
+							console.log(error);
 						});
-					}
-				}).catch(function(error) {
-					console.log(error);
-				});
-			},
+					},
 
 
-			// 头像上传
-			afterRead(e) {
-				let that = this
-				uni.uploadFile({
-					url: this.$baseUrl + 'oss/fileoss',
-					filePath: e.file[0].url,
-					name: 'file',
-					formData: {},
-					success: (res) => {
-						that.fileAvatar.push({
-							url: JSON.parse(res.data).url
-						})
-					}
-				});
-			},
+					// 头像上传
+					afterRead(e) {
+						let that = this
+						uni.uploadFile({
+							url: this.$baseUrl + 'oss/fileoss',
+							filePath: e.file[0].url,
+							name: 'file',
+							formData: {},
+							success: (res) => {
+								that.fileAvatar.push({
+									url: JSON.parse(res.data).url
+								})
+							}
+						});
+					},
 
-			// 删除图片
-			deletePic() {
-				let that = this
-				that.fileAvatar.splice(0, 1)
+					// 删除图片
+					deletePic() {
+						let that = this
+						that.fileAvatar.splice(0, 1)
+					},
 			},
-		},
-	};
+		};
 </script>
 <style lang="scss" scoped>
 	@import '@/style/mixin.scss';
-.btn_box {
-			margin-top: 40rpx;
-			padding: 10px;
-			button {
-				font-size: 32rpx;
-				background-color: #e5e5e5;
-				color: #fff;
-				height: 80rpx;
-				line-height: 80rpx;
-				border-radius: 50rpx;
 
-				&.active {
-					@include theme('btn_bg') color: #fff;
-				}
+	.btn_box {
+		margin-top: 40rpx;
+		padding: 10px;
+
+		button {
+			font-size: 32rpx;
+			background-color: #e5e5e5;
+			color: #fff;
+			height: 80rpx;
+			line-height: 80rpx;
+			border-radius: 50rpx;
+
+			&.active {
+				@include theme('btn_bg') color: #fff;
 			}
 		}
+	}
+
 	.tabulate {
 		.per_list {
 			font-size: 30rpx;
@@ -423,7 +483,6 @@
 			color: #888;
 		}
 	}
-	.submit{
 
-	}
+	.submit {}
 </style>