增加列表效果

pages/deductionRecord/billingRules.vue

@@ -1,14 +1,22 @@
 <template>
 	<view>
 		<u-navbar title="计费规则" title-color="#101010"></u-navbar>
-		<view class="tabs-box" v-if="!popShow" >
-			<view class="tabs1" v-show="tenantList.length>1" :style="{width: tenantList.length>4 ? '' : '100%'}" >
-				<u-tabs :list="tenantList1"   inactive-color="#777777" active-color="#333333	" 
-				 bg-color="#fff" :is-scroll="false" :current="current" @change="change"></u-tabs>
-			</view>
-			<view class="icon"  @click="popShow=true" v-if="tenantList.length >= 4" >
-				<u-icon name="arrow-down" color="#777777" size="28"></u-icon>
+		
+		<view class="head-head" style=" padding: 12px 0;" >
+			<view class="tabs-box" v-if="!popShow" >
+				<view class="tabs1" v-show="tenantList.length>1" :style="{width: tenantList.length>4 ? '' : '100%'}" >
+					<u-tabs :list="tenantList1"   inactive-color="#777777" active-color="#333333	" 
+					 bg-color="#fff" :is-scroll="false" :current="current" @change="change"></u-tabs>
+				</view>
+				<view class="icon"  @click="popShow=true" v-if="tenantList.length >= 4" >
+					<u-icon name="arrow-down" color="#777777" size="28"></u-icon>
+				</view>
 			</view>
+			<u-search placeholder="请输入关键字"  style="padding: 0 12px;" :show-action="false"		 v-model="keyword"></u-search>
+			
+		</view>
+		<view class="head-head-placeholder2 ">
+			
 		</view>
 		<!-- 标签弹出层 -->
 		<u-popup v-model="popShow"  @close="keyword=''"   length="80%" duration="10" mode="top" :negative-top="188" border-radius="32">
@@ -49,15 +57,7 @@
 			</view>
 		</u-popup>
 		<view class="background">
-			<!-- 单位 -->
-			<view class="unit"  v-if="queryList.length" >
-				<view class="title">
-					物业方：
-				</view>
-				<view class="value">
-					{{queryList[0].propertyManagement}}
-				</view>
-			</view>
+			
 			
 				
 			<view class="rules" v-if="queryList.length">
@@ -66,11 +66,12 @@
 						@change="change"></u-tabs>
 				</view>
 			
-				<view class="content" v-for="(item,i) in queryList" :key="i">
-					<view class="name-title">
-						承租方：
+				<view class="content" v-for="(item,i) in queryList" 
+				
+				v-show="keyword==''||(item.tenantName&&item.tenantName.indexOf(keyword)!=-1)"
+				
+				:key="i">
 					
-					</view>
 					<view class="name">
 						{{item.tenantName}}
 			
@@ -80,7 +81,7 @@
 						
 					</view>
 					<view class="contentRule1">
-						<view>收费标准</view>
+						
 						<u-table>
 							<u-th style="padding:0">
 								<u-tr >
@@ -247,34 +248,36 @@
 				this.merchantChangeApi()
 			},
 			merchantChange(item, index) {
-				// if(this.current==0){
-				// 	this.current=1;
-				// }
+				if(this.current==0){
+					this.current=1;
+				}
 				this.formData.tenantId= item.id;
 				
 				
 				 //this.$forceUpdate()
 				
-				this.getTenantListSort(this.tenantList)
+				this.getTenantListSort()
 				this.merchantChangeApi()
 				this.popShow = false;
 			},
-			getTenantListSort(list){
+			getTenantListSort( ){
+				var list=this.tenantList
 				for(var i  in list){
 					var obj=list[i]
 					if(this.formData.tenantId==obj.id){
-						var obj1=list[this.current];
-						list[this.current]=obj;
+						var obj1=list[this.current-1];
+						list[this.current-1]=obj;
 						list[i]=obj1;
 					}
 				}
 				
-				
-				this.tenantList=list;
-				var mList1 = [];
-				 
+				var mList1=[]
+				mList1.push({
+					id: '',
+					name: '全部'
+				});
 				for (var i = 0; i < list.length; i++) {
-					if (i >= 4) {
+					if (i >= 3) {
 					
 					} else {
 						mList1.push(list[i]);
@@ -290,14 +293,14 @@
 				API.tenantList().then((response) => {
 					uni.hideLoading();
 					
-					
 					var list=response.data.tenantInfoList;
-					if(list.length==0){
+					this.tenantList=list
+					if(list.length==1){
 						this.queryBl2=true
 					}else{
-						this.formData.tenantId=list[0].id
+						//this.formData.tenantId=list[0].id
 						this.merchantChangeApi()
-						this.getTenantListSort(list)
+						this.getTenantListSort()
 					}
 				
 					
@@ -342,15 +345,15 @@
 		  display: flex;
 		  align-items: center;
 		  justify-content: space-between;
-		  padding: 16rpx 32rpx 16rpx 0;
+		 // padding: 16rpx 32rpx 16rpx 0;
 		  .tabs{
 			  width: 96%;
 		  }
 	}
 	.background {
-		background: linear-gradient(180deg, rgba(22,119,255,1) 0%,rgba(22,119,255,0) 100%);
-		padding: 32rpx 0;
-		height: 720rpx;
+		// background: linear-gradient(180deg, rgba(22,119,255,1) 0%,rgba(22,119,255,0) 100%);
+		// padding: 32rpx 0;
+		// height: 720rpx;
 	
 		.unit {
 			background-color: #fff;
@@ -372,10 +375,8 @@
 	
 	// 规则
 	.rules {
-		margin: 24rpx 32rpx;
-		background-color: #fff;
-		padding-bottom: 24rpx;
-		border-radius: 8px;
+		
+		
 	
 		/deep/.u-tabs {
 			border-radius: 8px;
@@ -383,7 +384,11 @@
 		}
 	
 		.content {
+			background-color: #fff;
+			padding-bottom: 24rpx;
+			border-radius: 8px;
 			padding: 24rpx;
+			margin: 24rpx 32rpx;
 			.name-title {
 			    color: #999999;
 			}
@@ -445,7 +450,7 @@
 		  display: flex;
 		  align-items: center;
 		  justify-content: space-between;
-		  padding: 16rpx 32rpx 16rpx 32rpx;
+		  padding: 16rpx 0 16rpx 0;
 		  .tabs1{
 			  width: 96%;
 		  }
@@ -503,4 +508,8 @@
 		height: 112rpx;
 		
 	}
+	.head-head-placeholder2{
+		height: 222rpx;
+		
+	}
 </style>

pages/tenantList/rechargeRecord.vue

@@ -22,16 +22,7 @@
 				
 			</view>
 			
-			<view class="popup-tabs" v-if="false">
-				<view class="tabs1">
-					<!-- <u-tabs :list="tenantList1"   inactive-color="#777777" active-color="#333333	"
-					 bg-color="#fff" :is-scroll="false" :current="current" @change="change"></u-tabs> -->
-					<u-tabs :list="tenantList1" :is-scroll="false" :current="current" @change="change"></u-tabs >
-				</view>
-				<view class="more">
-					<u-icon name="arrow-up" color="#777777" size="40" @click="popShow=false"></u-icon>
-				</view>
-			</view>
+			
 			<view class="tabs-options">
 				<view class="item" v-for="(item, index) in tenantList"
 				v-show="keyword==''||(item.name&&item.name.indexOf(keyword)!=-1)"
@@ -63,7 +54,8 @@
 			<u-picker  v-model="tabsFrom.show1" mode="selector"
 			  :default-selector="[tabsFrom.show1Index]"
 			 :range="tabsFrom.selector1"  range-key="label" @confirm="selector1confirm" ></u-picker>
-			<u-picker-select title="日期选择" v-model="tabsFrom.show2"
+			<u-picker-select :noselect="false"
+			title="日期选择" v-model="tabsFrom.show2"
 			 :defaultTime="tabsFrom.show2Index" :endYear="endYear"
 			 mode="time" :params="params"  @confirm="selector2confirm" @reset="selector2reset" ></u-picker-select>
 			
@@ -83,7 +75,14 @@
 			 
 			 :key="i">
 				<view class="details-title">
-					<view class="name">
+					<view class="name" v-if="item.tenantName">
+						{{item.tenantName}}    
+					</view>
+					<view class="record-time" v-if="item.tenantName">
+						{{item.remark}}-{{item.methodN}}    
+					</view>
+					
+					<view class="name" v-else>
 						{{item.remark}}-{{item.methodN}}    
 					</view>
 					<view class="record-time" v-if="item.extraInfo" v-html="extraInfoText(item.extraInfo)" >
@@ -126,6 +125,7 @@
 				formData:{
 					pageIndex:1,
 					pageSize:9999,
+					tenantId:"",
 				},
 				
 				popShow:false,
@@ -140,7 +140,7 @@
 				params: {
 					year: true,
 					month: true,
-					day: true,
+					day: false,
 					hour: false,
 					minute: false,
 					second: false
@@ -177,6 +177,8 @@
 			
 			var date=new Date()
 			this.formData.startDate=date.getFullYear()+"-"+(date.getMonth() + 1) +"-1"
+			this.formData.endDate=nextMonth(date.getFullYear(),date.getMonth()+ 1, 1,1)
+			
 			this.queryMonth=date.getFullYear()+"年"+(date.getMonth() + 1) +"月"
 			
 			this.getTenantList()
@@ -213,15 +215,15 @@
 				this.merchantChangeApi()
 			},
 			merchantChange(item, index) {
-				// if(this.current==0){
-				// 	this.current=1;
-				// }
+				if(this.current==0){
+					this.current=1;
+				}
 				this.formData.tenantId= item.id;
 				
 				
 				 //this.$forceUpdate()
 				
-				this.getTenantListSort(this.tenantList)
+				this.getTenantListSort()
 				this.merchantChangeApi()
 				this.popShow = false;
 			},
@@ -236,9 +238,11 @@
 					
 					
 					var list=response.data.tenantInfoList;
-					this.formData.tenantId=list[0].id
+					//this.formData.tenantId=list[0].id
+					///mList1.push();
+					this.tenantList=list
 					
-					this.getTenantListSort(list)
+					this.getTenantListSort()
 					this.merchantChangeApi()
 				}).catch(error => {
 					uni.showToast({
@@ -247,30 +251,30 @@
 					})
 				})
 			},
-			getTenantListSort(list){
+			getTenantListSort( ){
+				var list=this.tenantList
 				for(var i  in list){
 					var obj=list[i]
 					if(this.formData.tenantId==obj.id){
-						var obj1=list[this.current];
-						list[this.current]=obj;
+						var obj1=list[this.current-1];
+						list[this.current-1]=obj;
 						list[i]=obj1;
 					}
 				}
 				
-				
-				this.tenantList=list;
-				var mList1 = [];
-				 // mList1.push({
-				 // 	id: '',
-				 // 	name: '全部'
-				 // });
+				var mList1=[]
+				mList1.push({
+					id: '',
+					name: '全部'
+				});
 				for (var i = 0; i < list.length; i++) {
-					if (i >= 4) {
+					if (i >= 3) {
 					
 					} else {
 						mList1.push(list[i]);
 					}
 				}
+				
 				this.tenantList1 = mList1;
 			},
 			extraInfoText(extraInfo){
@@ -318,7 +322,7 @@
 				this.tabsFrom.show2Text='全部时间'
 				this.tabsFrom.show2Index='';
 				
-				
+				var date=new Date()
 				this.formData.startDate=date.getFullYear()+"-"+(date.getMonth() + 1) +"-1"
 				this.queryMonth=date.getFullYear()+"年"+(date.getMonth() + 1)+"月" 
 				this.rechargeRecord()