授权二维码 申请授权 提交反馈 申请人列表 人员权限管理

pages.json

@@ -426,6 +426,22 @@
         		"navigationBarTitleText" : "",
         		"enablePullDownRefresh" : false
         	}
+        },
+        {
+        	"path" : "pages/managementList/applyAuthorisation",
+        	"style" : 
+        	{
+        		"navigationBarTitleText" : "",
+        		"enablePullDownRefresh" : false
+        	}
+        },
+        {
+        	"path" : "pages/managementList/applicantsList",
+        	"style" : 
+        	{
+        		"navigationBarTitleText" : "",
+        		"enablePullDownRefresh" : false
+        	}
         }
       
        

pages/managementList/applicantsList.vue

@@ -0,0 +1,168 @@
+<template>
+	<view>
+		<u-navbar title="申请人列表" title-color="#101010">
+			
+		</u-navbar>
+		<view class="search-box">
+			<u-search placeholder="搜索授权用户" bg-color="#f2f4f6" height="80" :show-action="true" v-model="keyword">
+		
+		
+			</u-search>
+		
+		</view>
+		
+		<!-- 列表 -->
+		<view class="member-list">
+			<view class="item" v-for="item in 5" >
+				<view class="photo">
+					<img src="@/assets/img/PEokWS2@3x.png" alt="" />
+				</view>
+				<view class="infos">
+					<view class="name">
+						杨静云
+					</view>
+					<view class="tel-time">
+						<span class="tel" >19729922849</span>
+						<span class="time">06-17 12:00:00 申请</span>
+					</view>
+				</view>
+				
+				<!-- 通过 -->
+				<view class="pass" @click="pass=true" v-if="pass==false" >
+					通过
+				</view>
+				<!-- 已通过 -->
+				<view class="passed" v-if="pass" >
+					已通过
+				</view>
+				
+				
+				
+			</view>
+		</view>
+		
+		
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				keyword:"",
+				pass:false,
+				
+			}
+		},
+		methods: {
+			
+		}
+	}
+</script>
+
+<style>
+	page{
+		padding-bottom: 100px;
+	}
+</style>
+
+
+<style lang="scss" scoped>
+	
+	
+	.search-box {
+		padding: 16rpx 32rpx;
+		position: sticky;
+		top: 88rpx;
+		z-index: 999;
+		background-color: rgba(255,255,255,1);
+	
+		/deep/.u-content {
+			border-radius: 8px !important;
+		}
+	
+		;
+	
+		/deep/.u-search {
+			position: relative
+		}
+	
+		;
+	
+		/deep/.u-action {
+			width: 96rpx;
+			line-height: 56rpx;
+			border-radius: 4px;
+			background-color: rgba(22, 119, 255, 1);
+			color: rgba(255, 255, 255, 1);
+			text-align: center;
+			z-index: 9999;
+			position: absolute;
+			right: 12rpx;
+		}
+	}
+
+  // 列表
+  .member-list{
+	  background: #fff;
+	  .item{
+		  padding: 32rpx 0;
+		  margin: 0 32rpx;
+		  display: flex;
+		  align-items: center;
+		  border-bottom: 1px solid rgba(244,244,244,1);;
+	  }
+	  .photo{
+		  img{
+			  width: 80rpx;
+			  height: 80rpx;
+			  border-radius: 50px;
+		  }
+	  }
+	  .infos{
+		  margin-left: 16rpx;
+		  .name{
+			  color: rgba(51,51,51,1);
+			  font-size: 32rpx;
+		  }
+		  .tel-time{
+			  
+			  font-size: 24rpx;
+			  margin-top: 4rpx;
+			  .tel{
+				  color: rgba(119,119,119,1);
+			  }
+			  .time{
+				  color: #999999;
+				  margin-left: 16rpx;
+			  }
+		  }
+	  }
+	  .pass{
+		  width: 120rpx;
+		  height: 56rpx;
+		  line-height: 56rpx;
+		  border-radius: 50px;
+		  background-color: rgba(0,185,98,1);
+		  color: rgba(255,255,255,1);
+		  text-align: center;
+		  margin-left: auto;
+	  }
+	  .passed{
+		  margin-left: auto;
+		  color: rgba(153,153,153,1);
+	  }
+	 
+	  
+  }
+ 
+ 
+  
+ 
+ 
+
+ 
+
+ 
+ 
+</style>

pages/managementList/applyAuthorisation.vue

@@ -0,0 +1,145 @@
+<template>
+	<view>
+		<u-navbar title="填写申请人信息" title-color="#101010">
+			
+		</u-navbar>
+		
+		<view class="main">
+			<view class="item">
+				<view class="title">
+					<span>*</span>头像
+				</view>
+				<view class="value">
+					<img src="@/assets/img/PEokWS2Copy1@3x.png" alt="" />
+				</view>
+				<view class="icon">
+					<u-icon name="arrow-right" color="#777777" ></u-icon>
+				</view>
+			</view>
+			
+			<view class="item">
+				<view class="title">
+					<span>*</span>姓名
+				</view>
+				<view class="value">
+					<input type="text" placeholder="请填写姓名" />
+				</view>
+				
+			</view>
+			
+			<view class="item">
+				<view class="title">
+					<span>*</span>联系电话
+				</view>
+				<view class="value">
+					<input type="text" placeholder="请填写手机号码" />
+				</view>
+				
+			</view>
+			
+		</view>
+		<!-- 提交 -->
+		<button class="submit" @click="show=true" >提交</button>
+		<!-- 提交反馈 -->
+		<u-modal v-model="show" :show-title="false" :show-cancel-button="true" cancel-text="关闭" :show-confirm-button="false" >
+			<view class="modal">
+				<view class="success-icon">
+					<img src="@/assets/img/md-check_circle vRxbRvD@3x.png" alt="" />
+				</view>
+				<view class="success-text">
+					授权申请提交成功
+				</view>
+				<view class="wait">
+					请等待单位能源管理员审核通过
+				</view>
+				
+			</view>
+			
+		</u-modal>
+				
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				show:false
+			}
+		},
+		methods: {
+			
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	.main{
+		margin: 24rpx 0;
+		background-color: #fff;
+		.item{
+			padding: 24rpx 32rpx; 
+			display: flex;
+			align-items: center;
+			border-bottom: 1px solid rgba(221,221,221,1);
+			.title{
+				width: 30%;
+				color: #777777;
+				font-size: 32rpx;
+				span{
+					color: #EE3138;
+				}
+			}
+			.value{
+				
+				img{
+					width: 80rpx;
+					
+				}
+				.uni-input-placeholder{
+					color: rgba(204,204,204,1);;
+				}
+			}
+			.icon{
+				margin-left: auto;
+			}
+		}
+		.item:last-of-type{
+			border: none;
+		}
+		
+	}
+     
+	 // 提交
+	 .submit{
+		 background-color: rgba(22,119,255,1);
+		 color: rgba(255,255,255,1);
+		 margin: 0 32rpx;
+		 border-radius: 50px;
+	 }
+
+  // 提交反馈
+  .modal{
+	  text-align: center;
+	  .success-icon{
+		  margin-top: 24rpx;
+		  img{
+			  width: 132rpx;
+			  height: 132rpx;
+			  
+		  }
+	  }
+	  .success-text{
+		  color: rgba(16,16,16,1);
+		  font-size: 36rpx;
+		  margin-top: 16rpx;
+		  font-weight: bold;
+		  
+	  }
+	  .wait{
+		  margin-top: 10rpx;
+		  margin-bottom: 48rpx;
+	  }
+  }
+
+</style>

pages/managementList/authorizedQRCode.vue

@@ -1,6 +1,6 @@
 <template>
 	<view>
-		<u-navbar title="授权管理" title-color="#101010">
+		<u-navbar title="授权二维码" title-color="#101010">
 			
 		</u-navbar>
 		
@@ -36,10 +36,10 @@
 				</view>
 				<view class="win">
 				    
-				    <view class="border_corner border_corner_left_top"></view>
-				    <view class="border_corner border_corner_right_top"></view>
-				    <view class="border_corner border_corner_left_bottom"></view>
-				    <view class="border_corner border_corner_right_bottom"></view>
+				    <view class="border-corner left-top"></view>
+				    <view class="border-corner right-top"></view>
+				    <view class="border-corner left-bottom"></view>
+				    <view class="border-corner right-bottom"></view>
 				    <view class="code-box">
 				    	<img src="@/assets/img/qrCode.png" alt="" />
 				    </view>
@@ -95,11 +95,12 @@
 			font-size: 32rpx;
 			margin-top: 20rpx;
 			text-align: center;
+			font-weight: bold;
 		}
 		
 		.infos{
 			display: flex;
-			align-items: center;
+			align-items: c;
 			margin-top: 48rpx;
 			padding:48rpx 80rpx;
 			border: 1px solid rgba(244,244,244,1);
@@ -152,11 +153,12 @@
 	}
 	// 二维码
 	.qr-code{
-		padding: 48rpx 80rpx;
+		padding: 48rpx 0rpx;
+		text-align: center;
 		.title{
 			color: rgb(16,16,16);
 			font-size: 32rpx;
-			text-align: center;
+			
 			
 		}
 		.code-box {
@@ -177,7 +179,7 @@
 		    display: inline-block;
 		}
 		
-		.border_corner{
+		.border-corner{
 		    z-index: 2500;
 		    position: absolute;
 		    width: 70rpx;
@@ -185,28 +187,28 @@
 		    background: rgba(0,0,0,0);
 		    border: 4px solid #5396FF;
 		}
-		.border_corner_left_top{
+		.left-top{
 		    top: 0;
 		    left: 0;
 		    border-right: none;
 		    border-bottom: none;
 		    border-top-left-radius: 4px;
 		}
-		.border_corner_right_top{
+		.right-top{
 		    top: 0;
 		    right: 0;
 		    border-left: none;
 		    border-bottom: none;
 		    border-top-right-radius: 4px;
 		}
-		.border_corner_left_bottom{
+		.left-bottom{
 		    bottom: 0;
 		    left: 0;
 		    border-right: none;
 		    border-top: none;
 		    border-bottom-left-radius: 4px;
 		}
-		.border_corner_right_bottom{
+		.right-bottom{
 		    bottom: 0;
 		    right: 0;
 		    border-left: none;

pages/managementList/managementList.vue

@@ -5,13 +5,17 @@
 				<img src="@/assets/img/riLine-list-settings-line.svg" alt="" />
 			</view>
 		</u-navbar>
-		<view class="search">
-			<u-search placeholder="搜索授权用户" :show-action="false"		 v-model="keyword"></u-search>
+		<view class="search-box">
+			<u-search placeholder="搜索授权用户" bg-color="#f2f4f6" height="80" :show-action="true" v-model="keyword">
+		
+		
+			</u-search>
+		
 		</view>
 		
 		<!-- 列表 -->
 		<view class="member-list">
-			<view class="item" v-for="item in 15" >
+			<view class="item" v-for="item in 5" >
 				<view class="photo">
 					<img src="@/assets/img/PEokWS2@3x.png" alt="" />
 				</view>
@@ -24,7 +28,7 @@
 					</view>
 				</view>
 				
-				<view class="button" v-if="!deleteShow">
+				<view class="button" @click="show=true" v-if="!deleteShow">
 					权限管理
 				</view>
 				<!-- 单选框 -->
@@ -79,7 +83,39 @@
 			</view>
 		</u-popup>
 		
-		
+		<!-- 人员权限管理 -->
+		<view>
+				<u-popup v-model="show" mode="bottom">
+					<view class="popup2" >
+						<view class="title">
+							杨静云-权限管理
+						</view>
+						
+						<view class="content">
+							<view class="item" v-for="item in 3" >
+								<view class="item-title">
+									荆鹏A栋9楼总电表
+								</view>
+								<view class="item-radio">
+									<label class="radio">
+										<radio value="" /><text></text>
+									</label>
+								</view>
+							</view>
+						</view>
+						<view class="popup-bottom">
+							<view class="button cancel">
+								取消
+							</view>
+							<view class="button save">
+								保存
+							</view>
+						</view>
+						
+					</view>
+				</u-popup>
+				
+			</view>
 	</view>
 </template>
 
@@ -89,7 +125,8 @@
 			return {
 				keyword:"",
 				deleteShow:false,
-				deletePopup:false
+				deletePopup:false,
+				show:false,
 			}
 		},
 		methods: {
@@ -118,15 +155,36 @@
 		}
 	}
 	
-	.search{
-		border-bottom: 1px solid rgba(242,242,242,1);
-		background: #fff;
-		padding:24rpx;
-		position:sticky;
-		    left: 0;
-		    right: 0;
-		    top: 80rpx;
-		    z-index: 991;
+	.search-box {
+		padding: 16rpx 32rpx;
+		position: sticky;
+		top: 88rpx;
+		z-index: 999;
+		background-color: rgba(255,255,255,1);
+	
+		/deep/.u-content {
+			border-radius: 8px !important;
+		}
+	
+		;
+	
+		/deep/.u-search {
+			position: relative
+		}
+	
+		;
+	
+		/deep/.u-action {
+			width: 96rpx;
+			line-height: 56rpx;
+			border-radius: 4px;
+			background-color: rgba(22, 119, 255, 1);
+			color: rgba(255, 255, 255, 1);
+			text-align: center;
+			z-index: 9999;
+			position: absolute;
+			right: 12rpx;
+		}
 	}
 
   // 列表
@@ -292,5 +350,46 @@
  	}
  }
  
+  // 人员权限管理
+  .popup2{
+	  padding: 32rpx 0;
+	  .title{
+		  color: rgba(16,16,16,1);
+		  font-size: 36rpx;
+		  font-weight: bold;
+	  }
+	  .content{
+		  margin-bottom: 24rpx;
+		  .item{
+			  display: flex;
+			  align-items: center;
+			  justify-content: space-between;
+			  padding: 28rpx 30rpx;
+			  border-bottom: 1px solid rgba(245,245,245,1);
+		  }
+	  }
+	  .popup-bottom{
+		  display: flex;
+		  justify-content: space-between;
+		  padding: 0 32rpx;
+		  .button{
+			  width: 328rpx;
+			  height: 80rpx;
+			  line-height: 80rpx;
+			  border-radius: 4px;
+			  
+			  font-size: 32rpx;
+			  text-align: center;
+		  }
+		  .cancel{
+			  background-color: rgba(222,225,228,1);
+			  color: rgba(51,51,51,1);
+		  }
+		  .save{
+			  background-color: rgba(22,119,255,1);
+			  color: rgba(255,255,255,1);
+		  }
+	  }
+  }
  
 </style>