jp-housekeep-manage/pages/deductionRecord/billingRules.vue

<template>
	<view>
		<u-navbar title="计费规则" title-color="#101010"></u-navbar>
		
		<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">
			<u-navbar title="计费规则"  title-color="#101010" >
				
			</u-navbar>
			<view class="head-head">
				<u-search placeholder="请输入关键字" :show-action="false"		 v-model="keyword"></u-search>
				
			</view>
			<view class="head-head-placeholder ">
				
			</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)"
				
				 :class="{
				 	'item-index' : item.id==formData.tenantId
				 }"
				 :key="index"
					@click="merchantChange(item,index)">
					{{item.name}}
				</view>
				<u-divider   nonetext="没有找到相关内容"
					border-color="#CFD2D5">已经到底了</u-divider>
			</view>
		</u-popup>
		<view class="background">
			
			
				
			<view class="rules" v-if="queryList.length">
				<view class="tabs" v-if="false">
					<u-tabs font-size="24" :gutter="30" :item-width="100" :list="list" :is-scroll="false" :current="current"
						@change="change"></u-tabs>
				</view>
			
				<view class="content" v-for="(item,i) in queryList" 
				
				v-show="keyword==''||(item.tenantName&&item.tenantName.indexOf(keyword)!=-1)"
				
				:key="i">
					
					<view class="name">
						{{item.tenantName}}
			
					</view>
					
					<view class="address">
						
					</view>
					<view class="contentRule1">
						
						<u-table>
							<u-th style="padding:0">
								<u-tr >
									<u-td>名称</u-td>
								<!-- 	 -->
									<u-td>价格</u-td>
									<u-td>单位</u-td>
									
									
								</u-tr>
							</u-th>
							<template v-for="(it,j) in item.contractItemList" >
								<u-tr  :key="j" v-if="!it.periodPriceList">
									<u-td>{{it.name}}</u-td>
								<!-- 	<u-td>{{it.paymentMethodN}}</u-td> -->
									<u-td>{{it.price}}</u-td>
									<u-td>{{it.unit}}</u-td>
									
								</u-tr>
							
							</template>
							
						</u-table> 
						
						
					</view>
					
					<view class="contentRule1" style="margin-top: 20rpx;"  v-for="(it,j) in item.contractItemList"  :key="j"  v-if="it.periodPriceList">
						<template >
						<view>收费标准-{{it.name}}  ({{it.unit}})</view>
						<u-table>
							<u-th style="padding:0">
								<u-tr >
										<u-td>类型 </u-td>
									<u-td>时段</u-td>
								<!-- 	 -->
								
									<u-td>价格</u-td>
									
									
								</u-tr>
							</u-th>
							
								<u-tr  :key="k" v-for="(ito,k) in it.periodPriceList"   >
									<u-td>{{ito.periodN}}</u-td> 
									<u-td>{{ito.startTime}}-{{ito.endTime}}</u-td>
									
									<u-td>{{ito.price}}</u-td>
								
									
								</u-tr>
							
						
							
						</u-table> 
							</template>
						
					</view>
			
			<!-- 备注 -->
							<view class="remark" >
								
								<view class="title" v-if="false&&item.remark">
									备注说明：
								</view>
								<view class="value">
									<view class="item" v-if="false&&item.remark">
										{{item.remark}}
			
									</view>
									<view class="item" v-if="item.address">
										租住地址：{{item.address}}
									</view>
									<view class="item">
										租赁期：{{thisparseUnixTime(item.contractStartTime)}} 至 {{thisparseUnixTime(item.contractEndTime)}}
									</view>
								</view>
							</view>
				</view>
				
				
			</view>
			<view class="rules" v-else>
				
			
				<view class="content" >
					
					<view class="address" v-if="!queryBl2">
						{{!queryBl2&&queryBl?'未签订合同,请联系物业方':'加载中...'}}
						
					</view>
					<view class="address" v-else>
					
						<u-divider :isnone="true"  nonetext="没有找到相关内容"
							border-color="#CFD2D5">已经到底了</u-divider>
					</view>
			
			<!-- 备注 -->
					
				</view>
				
				
			</view>
			<u-divider v-if="!queryBl2"  nonetext="没有找到相关内容"
				border-color="#CFD2D5">已经到底了</u-divider>
			
		</view>
	


	</view>
</template>

<script>
	import * as API from '@/apis/pagejs/tenantList.js'
	import {
			parseUnixTime,newDate
		
		} from '@/apis/utils'

	export default {
		data() {
			return {
				tenantList:[],
				tenantList1:[],
				popShow:false,
				current:0,
				current1:0,
				current2: 0,
				formData:{
					
				},
				queryList: [],
				companyInfo:{},
				tenantInfo:{},
				queryBl:false,
				queryBl2:false,
				keyword:'',
				
			}
		},
		onLoad(op) {
			if(op.id){
				
			}
		
		},
		onReady() {
			this.getTenantList()
			
		},
		methods: {
			merchantChangeApi(){
				this.getContractList()
			},
			thisparseUnixTime(time){
				return parseUnixTime(newDate(time),'{y}年{m}月{d}日')
			},
			change(index) {
				
				this.current = index;
				this.formData.tenantId = this.tenantList1[index].id;
				 this.popShow = false;
				this.merchantChangeApi()
			},
			merchantChange(item, index) {
				if(this.current==0){
					this.current=1;
				}
				this.formData.tenantId= item.id;
				
				
				 //this.$forceUpdate()
				
				this.getTenantListSort()
				this.merchantChangeApi()
				this.popShow = false;
			},
			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-1];
						list[this.current-1]=obj;
						list[i]=obj1;
					}
				}
				
				var mList1=[]
				mList1.push({
					id: '',
					name: '全部'
				});
				for (var i = 0; i < list.length; i++) {
					if (i >= 3) {
					
					} else {
						mList1.push(list[i]);
					}
				}
				this.tenantList1 = mList1;
			},
			getTenantList(){
				uni.showLoading({
					title: "加载中",
					mask: true,
				})
				API.tenantList().then((response) => {
					uni.hideLoading();
					
					var list=response.data.tenantInfoList;
					this.tenantList=list
					if(list.length==1){
						this.queryBl2=true
					}else{
						//this.formData.tenantId=list[0].id
						this.merchantChangeApi()
						this.getTenantListSort()
					}
				
					
				}).catch(error => {
					uni.showToast({
						title: error,
						icon: "none"
					})
				})
			},
			getContractList(){
				uni.showLoading({
					mask:true,title:'加载中...'
				})
				API.contractList(this.formData).then((response) => {
					uni.hideLoading();
					//this.list=response.data.data;
					this.queryList = response.data.contractList;
					console.log(this.queryList )
					this.queryBl=true
				}).catch(error => {
					uni.hideLoading();
					uni.showToast({
						icon: "none",
						title: error
					})
				})
			},
			change1(index) {
				this.current1 = index;
			},
			change2(index) {
				this.current2 = index;
			}
		}
	}
</script>

<style lang="scss" scoped>
	// 标签
	.tabs-box{
		  display: flex;
		  align-items: center;
		  justify-content: space-between;
		 // 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;
	
		.unit {
			background-color: #fff;
			margin: 0 32rpx;
			border-radius: 8px;
			padding: 32rpx;
	
			.title {
				color: rgba(153, 153, 153, 1);
			}
	
			.value {
				color: rgba(51, 51, 51, 1);
				font-size: 40rpx;
				margin-top: 16rpx;
			}
		}
	}
	
	// 规则
	.rules {
		
		
	
		/deep/.u-tabs {
			border-radius: 8px;
	
		}
	
		.content {
			background-color: #fff;
			padding-bottom: 24rpx;
			border-radius: 8px;
			padding: 24rpx;
			margin: 24rpx 32rpx;
			.name-title {
			    color: #999999;
			}
			.name {
				margin: 16rpx 0;
				color: rgba(16, 16, 16, 1);
				font-size: 38rpx;
			}
	
			.address {
				margin: 8rpx 0;
			}
	
			.contentRule1 {
				
	
				.rule1 {
					//width: 298rpx;
						display: flex;
					.title {
						line-height: 96rpx;
						color: rgba(51, 51, 51, 1);
						font-size: 32rpx;
					}
	
					.value {
						
						color: rgba(51, 51, 51, 1);
						line-height: 96rpx;
					}
				}
			}
	
	
	
		}
	
		// 备注
		.remark {
			padding: 40rpx 32rpx;
			margin-top:  24rpx;
			border-radius: 8px;
			background-color: rgba(242, 244, 246, 1);
			color: rgba(16, 16, 16, 1);
			font-size: 24rpx;
			line-height: 34rpx;
	
			.value {
				margin-top: 16rpx;
			}
	
			.item {
				margin-bottom: 8rpx;
			}
		}
	}
	.tabs-box{
		background-color: #fff;
		  display: flex;
		  align-items: center;
		  justify-content: space-between;
		  padding: 16rpx 0 16rpx 0;
		  .tabs1{
			  width: 96%;
		  }
	}
	
	
	.popup-tabs {
		background-color: #fff;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding-top: 32rpx;
		padding-right: 32rpx;
		color: rgba(51, 51, 51, 1);
		font-size: 32rpx;
	
		.tabs1 {
			width: 88%;
	
		}
	}
	
	/deep/.u-tab-item {
		width: 25% !important;
		flex: none !important;
	}
	
	.tabs-options {
		//display: flex;
		padding: 24rpx 32rpx ;
		flex-wrap: wrap;
	
		.item {
			//width: 25%;
			color:rgb(119, 119, 119);
			margin-bottom: 24rpx;
			font-size: 32rpx;
		}
		.item-index{
			    color: rgb(51, 51, 51);
				font-weight: bold;
		}
	}
	.head-head{
		box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.15);
		background: #fff;
		padding:24rpx;
		position: fixed;
		    left: 0;
		    right: 0;
		    top: 80rpx;
		    z-index: 991;
	}
	.head-head-placeholder{
		height: 112rpx;
		
	}
	.head-head-placeholder2{
		height: 222rpx;
		
	}
</style>