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

<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>
		</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="chart-box">
		  <view class="infos">
		  	<view class="item">
		  		<view class="title">
		  			{{monthQuery}}月 共扣费
		  		</view>
		  		<view class="sum">
		  			{{monthAmount}}<text class="unit">元</text>
		  		</view>
		  	</view>
			
			<view class="item">
				<view class="title">
					账户余额
				</view>
				<view class="sum">
					{{balance}}<text class="unit">元</text>
				</view>
			</view>
		  </view>
			<view class="chart">
				<view id="pieEcharts" >
				
				</view>
			</view>
		
		</view>
		<!-- 标签 -->
		<view class="tabs">
			<u-picker  v-model="tabsFrom.show1" mode="selector" :range="tabsFrom.selector1"  range-key="label" @confirm="selector1confirm" ></u-picker>
			<u-picker-select title="日期选择" v-model="tabsFrom.show2"
			 :defaultTime="tabsFrom.show2Index" :endYear="endYear"
			 mode="time" :params="params"  @confirm="selector2confirm" @reset="selector2reset" ></u-picker-select>
			
			<view class="tabsItem" @click="tabsFrom.show1=!tabsFrom.show1">{{tabsFrom.show1Text}} <u-icon name="arrow-up"
					v-if="tabsFrom.show1"></u-icon><u-icon v-else name="arrow-down"></u-icon></view>
			<view class="tabsItem" @click="tabsFrom.show2=!tabsFrom.show2">{{tabsFrom.show2Text}} <u-icon name="arrow-up"
					v-if="tabsFrom.show2"></u-icon><u-icon v-else name="arrow-down"></u-icon></view>
		</view>
		<!-- 记录 -->
		<view class="records-item" >
			<view class="time">
				{{queryMonth}}  合计扣费  {{jpAmount(sumAmount)}}元
			</view>
			
				
			<view class="details" v-for="(item,i) in list" 
			@click="gotoUrl('/pages/deductionRecord/deductionDetails?id='+item.id)"
			:key="i" >
				<view class="icon">
					<image class="img" v-if="item.remark.indexOf('水')>-1" src="@/assets/img/wImage@1x.png" mode=""></image>
					<image class="img"  v-else-if="item.remark.indexOf('房')>-1||item.remark.indexOf('租')>-1" src="@/assets/img/wImage.png" mode=""></image>
					<image class="img"  v-else-if="item.remark.indexOf('保洁')>-1" src="@/assets/img/wImage3.png" mode=""></image>
					<image class="img" v-else-if="item.remark.indexOf('物业')>-1"  src="@/assets/img/wImage4.png" mode=""></image>
						
					<image class="img" v-else src="@/assets/img/Copy PEokWS2 Copy 1@1x.png" mode=""></image>
				</view>
				<view class="details-title">
					<view class="name">
						{{item.remark}} 
					</view>
					<view class="record-time">
						{{item.createTime}}  
					</view>
					<view class="record-time" v-if="item.extraInfo" v-html="extraInfoText(item.extraInfo)" >
						 
					</view>
				</view>
				<view class="sum">
					{{jpAmount(item.amount)}}元
					<u-icon name="arrow-right" style="margin-left: 10rpx;" size="32" color="#999999"></u-icon>
					
				</view>
			</view>
			
			<u-divider :isnone="list.length==0"  nonetext="没有找到相关内容"
				border-color="#CFD2D5">已经到底了</u-divider>
			
		</view>
		
	</view>
</template>

<script>
	import * as API from '@/apis/pagejs/tenantList.js'
	
	import {
		nextDay,
		nextMonth,
	
	} from '@/apis/utils'
	import * as echarts from "echarts";
	
	export default {
		data() {
			return {
				popShow:false,
				monthQuery:"",
				tenantList:[],
				tenantList1:[],
				
				monthAmount:0,
				balance:0,
				personInfo:{},
				myChart:null,
				list:[],
				list1: [{
					name: '格莱慧'
				}, {
					name: '楚之源'
				}, {
					name: '杜宝银',
					
				}, {
					name: '王玉清',
					
				}, {
					name: '荆州万乘',
					
				}],
				current:0,
				formData:{
					pageIndex:1,
					pageSize:9999,
				},
				
				endYear:'',
				keyword:"",
				queryMonth:"",
				params: {
					year: true,
					month: true,
					day: false,
					hour: false,
					minute: false,
					second: false
				},
				tabsFrom: {
					show1: false,
					show1Index:0,
					show2Index:'',
					show2: false,
					show1Text: "全部类型",
					show2Text: "全部时间",
					selector1:[
						{
								label: '全部类型',
								value: '',
							},
						{
								label: '线上充值',
								value: '1',
							},
							{
								label: '线下充值',
								value: '2',
							},
					]
				},
			}
		},
		onLoad(op) {
			if(op.id){
				this.formData.tenantId=op.id
			}
			this.endYear=new Date().getFullYear()
			var date=new Date()
			this.formData.startDate=date.getFullYear()+"-"+(date.getMonth() + 1) +"-1"
			this.queryMonth=date.getFullYear()+"年"+(date.getMonth() + 1) +"月"
			this.monthQuery=(date.getMonth() + 1) +"月"
		},
		onReady() {
			this.getTenantList()
			this.merchantChangeApi()
		},
		onShow(){
			
		},
		computed:{
			sumAmount(){
				let totalAmount =0
				if(this.list){
					var amounts=this.list.map(item=>{
						return item.amount*-1
					})
				
					 totalAmount = amounts.reduce((accumulator, currentValue) => {  
					  return accumulator + currentValue;  
					}, 0); 
				}
				 
				
				return   totalAmount
			}
		},
		methods: {
			merchantChangeApi(){
				this.contractItemList()
				this.deductionRecord();
				this.deductionRecordGraph();
			},
			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.tenantList)
				this.merchantChangeApi()
				this.popShow = false;
			},
			getTenantListSort(list){
				for(var i  in list){
					var obj=list[i]
					if(this.formData.tenantId==obj.id){
						var obj1=list[this.current];
						list[this.current]=obj;
						list[i]=obj1;
					}
				}
				
				
				this.tenantList=list;
				var mList1 = [];
				 
				for (var i = 0; i < list.length; i++) {
					if (i >= 4) {
					
					} 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.getTenantListSort(list)
					
				}).catch(error => {
					uni.showToast({
						title: error,
						icon: "none"
					})
				})
			},
			extraInfoText(extraInfo){
				var obj=JSON.parse(extraInfo)
				return  `起止码${obj.startMeter}-${obj.endMeter};<br/>合计${obj.kwh}度`
				
			},
			selector2confirm(e){
				
				this.tabsFrom.show2Text=e.year+"年"+e.month+"月"
				
				this.tabsFrom.show2Index=e.year+"-"+e.month
				if(e.day){
					this.tabsFrom.show2Text+=e.day+"日"
					this.tabsFrom.show2Index+='-'+e.day	
				}
				//this.tabsFrom.show2Index=this.tabsFrom.show2Text
				
			
				if(e.day){
					this.formData.startDate=e.year+"-"+e.month +"-"+e.day	
				
					this.queryMonth=e.year+"年"+e.month+"月"+e.day+"日"
					this.formData.endDate=this.formData.startDate
					//nextDay(e.year,e.month, e.day)
					
					
				}else{
					this.queryMonth=e.year+"年"+e.month+"月"
					this.formData.startDate=e.year+"-"+e.month +"-1"
					
					this.formData.endDate=nextMonth(e.year,e.month, 1,1)
					
					
				}
				this.deductionRecord()
			},
			selector2reset(e){
			
				this.tabsFrom.show2Text='全部时间'
				this.tabsFrom.show2Index='';
				
				var date=new Date()
				this.formData.startDate=date.getFullYear()+"-"+(date.getMonth() + 1) +"-1"
				this.formData.endDate=""
				
				this.queryMonth=date.getFullYear()+"年"+(date.getMonth() + 1)+"月" 
				this.deductionRecord()
			},
			selector1confirm(e){
			
				var index=e[0]
				this.tabsFrom.show1Index=index
				this.tabsFrom.show1Text=this.tabsFrom.selector1[index].label
				this.formData.contractItemId=this.tabsFrom.selector1[index].value
				this.deductionRecord()
			},
			
			deductionRecordGraph(){
				
				API.deductionRecordGraph({
					tenantId:this.formData.tenantId
				}).then((response) => {
					this.balance=response.data.balance
					
					var list=response.data.monthRecordList;
					this.monthAmount=list[list.length-1].monthAmount
					  // uni.getSystemInfo({  
					  //     success: (res) => {  
					  //       const screenWidth = res.windowWidth; // 屏幕宽度,单位为px  
					  //       console.log('屏幕宽度:', screenWidth); 
							
					  //     },  
					  //   });  
						 this.getPle(list)
						//uni.upx2px(600)
					
				}).catch(error => {
					uni.hideLoading();
					uni.showToast({
						icon: "none",
						title: error
					})
				})
			},
			getPle(list){
				
				if (!this.myChart) {
					this.myChart = echarts.init(document.getElementById('pieEcharts'),null,{
						width:uni.upx2px(700),height:uni.upx2px(280)
					});
				}
				this.myChart.clear();
				var data1=list.map(item=>{
					return item.month.replace("-", "年")+"月"
				});
				var data2=list.map(item=>{
					return item.monthAmount
				});
				var headitemby=""
				var showkey = "";
				var option = {
					 tooltip: {
					    trigger: 'axis'
					  },
					grid: {
						top: '6%',
						left: '3%',
						right: '8%',
						bottom: '8%',
						containLabel: true
					},
					  xAxis: {
					    type: 'category',
					    data: data1,
						axisLabel: {
							formatter: (value) => {
								if (headitemby == "") {
									headitemby = value
								}
								var i = 0
								
								var showvalue = "";
								var key = value.substring(0, 5);
						
								if (showkey == "" || value == headitemby) {
									showkey = key
						
									showvalue = value
									showvalue = value.substring(2)
								} else {
									if (key != showkey) {
										showkey = key
										showvalue = value
										showvalue = value.substring(2)
									} else {
										showvalue = value.substring(5)
									}
								}
								return showvalue.replace("年", ".").replace("月", "");
						
							},
							textStyle: {
								color: "#333"
							}
						},
					  },
					  yAxis: {
					    type: 'value'
					  },
					  series: [
					    {
						  name: '合计',
					      data: data2,
					      type: 'line'
					    }
					  ]
				}
				console.log(option)
				this.myChart.setOption(option);
				
				
			},
			deductionRecord(){
				uni.showLoading({
					mask:true,title:'加载中...'
				})
				API.tenantDeductionRecords(this.formData).then((response) => {
					uni.hideLoading();
					this.list=response.data.data;
				}).catch(error => {
					uni.hideLoading();
					uni.showToast({
						icon: "none",
						title: error
					})
				})
			},
			contractItemList(){
				API.contractItemList(this.formData).then((response) => {
					//uni.hideLoading();
					var contractItemList=response.data.contractItemList
					this.tabsFrom.selector1=[{
						label: "全部类型",
						value: '',
					}]
					contractItemList.forEach(item=>{
						this.tabsFrom.selector1.push({
							label: item.name,
							value: item.id,
						})
					})
					
				}).catch(error => {
					//uni.hideLoading();
					uni.hideLoading();
					uni.showToast({
						icon: "none",
						title: error
					})
				})
			},
			change1(index) {
				this.current = index;
			},
		}
	}
</script>

<style lang="scss" scoped>
	.slot{
		color: rgba(16,16,16,1);
		font-size: 32rpx;
		margin-right: 32rpx;
	}
	.tabs-box{
		background-color: #fff;
		  display: flex;
		  align-items: center;
		  justify-content: space-between;
		  padding: 16rpx 32rpx 16rpx 32rpx;
		  .tabs1{
			  width: 96%;
		  }
	}
	
	
	// 折线图
	.chart-box {
		padding: 24rpx 32rpx;
		background: linear-gradient(180deg, rgba(203, 234, 255, 1) 0%, rgba(255, 255, 255, 1) 100%);
	    
		.infos{
			display: flex;
			align-items: center;
			.item{
				width: 50%;
			}
		}
	  
		.title {
			color: rgb(16, 16, 16);
		}
	
		.sum {
			color: rgb(51, 51, 51);
			font-size: 64rpx;
			margin-top: 16rpx;
	
			.unit {
				color: rgb(16, 16, 16);
				font-size: 28rpx;
				margin-left: 8rpx;
			}
		}
	
		.chart {
			width: 100%;
			height: 240rpx;
			margin-top: 8rpx;
	
			.img {
				width: 100%;
				height: 100%;
			}
		}
	
	}
	.tabs{
		
		height: 96rpx;
		line-height: 96rpx;
		background-color: #fff;
		border-top: 1px solid rgba(241,241,241,1);
		display: flex;
		justify-content: space-around;
		
	}
	// 记录
	.records-item{
		.time{
			padding: 24rpx 32rpx;
			color: rgba(119,119,119,1);
			font-size: 32rpx;
		}
		.details{
			background-color: #fff;
			padding: 32rpx;
			display: flex;
			align-items: center;
			border-bottom: 1px solid rgba(244,244,244,1);
			.img{
				width: 80rpx;
				height: 80rpx;
			}
			.details-title{
				margin-left: 24rpx;
				.title{
					color: rgba(51,51,51,1);
					font-size: 32rpx;
				}
				.record-time{
					color: rgb(153,153,153);
					font-size: 24rpx;
					
					margin-top: 8rpx;
				}
			}
			.sum{
				color: rgb(16,16,16);
				font-size: 40rpx;
				margin-left: auto;
				  white-space: pre;
			}
		}
	}
	
	.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{
		background: #fff;
		padding:24rpx;
		position: fixed;
		    left: 0;
		    right: 0;
		    top: 80rpx;
		    z-index: 991;
	}
	.head-head-placeholder{
		height: 112rpx;
		
	}
	
</style>