jp-charge/pagesFinance/recordOfInvoice/recordOfInvoice.vue

<template>
	<view >
		<ujp-navbar title="申请开票记录">
			
		</ujp-navbar>
	
	
			<u-tabs  inactive-color="#888888" active-color="#101010" :list="list" :is-scroll="true"
					:current="current" @change="change"></u-tabs>
					
					<view style="text-align: center;margin-top: 100px" v-if="list[current].list.length == 0" >
						<img src="@/assets/img/blankpage.png">
						<view>查询为空</view>
					</view>
<!-- 待开票 -->
      <view :class="{
		  'not-invoiced':current==0,
		   'invoiced':current==1,
	  }">
	  	<view class="invoiced-item" v-for="(item,index) in list[current].list"
		 @tap="view(item.id)"
		 :key="index" >
	  		<view class="content"  >
	  			<view class='title' 
				:class="{
					 success:item.status==2,
					error:item.status==1
				}"
				>
	  				用户充电订单发票 <text class="to-invoice">{{item.statusText}}</text>
	  			</view>
	  			<p><text class="text-1">发票金额</text> <text class="text-2">{{item.amount.toFixed(2)}}元</text></p>
	  			<p><text class="text-1">发票抬头</text><text class="text-2">{{item.title}}</text></p>
	  			<p><text class="text-1">申请时间</text> <text class="text-2">{{item.createTime}}</text></p>
	  		</view>
	  	</view>
		
		<p class="tips" v-show="current==1" > 仅展示最近12个月的发票信息</p>
		
      </view>
	 
	</view>
</template>

<script>
	import * as API from '@/apis/finance.js'
	
	export default {
		data() {
			return {
				list: [{
					value:1,
					name: '待开票',
					pageIndex: 1,
					recordsTotal: 0,
					list:[],
				}, {
					value:2,
					name: '已开票',
					pageIndex: 1,
					recordsTotal: 0,
					list:[],
				}],
				
				current: 0,
				
			}
		},
		onReachBottom() {
			var list=this.list[this.current].list;
			var recordsTotal=this.list[this.current].recordsTotal;
			
			if (list.length < recordsTotal) {			
				this.myLoadmore();
			}
		},
		onShow(){
			this.allck=false;
			this.getlist(true);
		},
		methods: {
			view(id){
				uni.navigateTo({
					url:'/pagesFinance/recordOfInvoice/applicationDetails?id='+id
				})
			},
			getlist(bl) {
				uni.showLoading({
					title: "加载中",
					mask: true,
				})
				var current=this.current;
				var pageIndex=this.list[current].pageIndex;
				var list=this.list[current].list;
				if (bl) {
					 list = [];
					pageIndex = 1;
				}
			 
				API.merchantInvoiceList({
					pageIndex: pageIndex,
					status:this.list[current].value,
				
				}).then((res) => {
					uni.hideLoading();
					
					var datalist=[]
					datalist=res.data.data;
				
					
				
					this.list[current].list = [
						...list,
						...datalist
					];
					this.list[current].recordsTotal = res.data.recordsTotal;
				}).catch(error => {
					uni.showToast({
						title: error,
						icon: "none"
					})
				})
			},
			myLoadmore() {
				var pageIndex=this.list[this.current].pageIndex;
				
				pageIndex += 1;
				this.getlist()
			},
			change(index) {
				this.current = index;
				var list =this.list[this.current].list
				if(list.length==0){
					this.getlist(true);
				}
			},
				
	},
	}
</script>

<style lang="scss" scoped>
	page{
		background-color: #F2F4F4;  
	}
	
	/deep/.u-scroll-box{
		 width: 65.8% !important;
		 margin: 0 auto;
		 display: flex;
		 
	}
	/deep/.u-tab-bar{
		width: 18% !important;
		left: -5% !important;
		background-color: #00B962 !important; }
	
	// 未开票
	.flex{
		display: flex;
	}
	.not-invoiced-item,.invoiced-item{
		width: 91.4%;
		border-radius: 12px;
		background-color: rgba(255, 255, 255, 100);
		border: 1px solid rgba(235, 235, 235, 100);
		padding: 16px 0;
		padding-left: 18px;
		margin:12px auto;
		
	}
	.content{
		width: 100%;
		margin-left: 4px;
		.title{
			line-height: 18px;
			color: rgba(16, 16, 16, 100);
			font-size: 16px;
			margin-bottom: 12px;
			padding-right: 12px;
			display: flex;
			justify-content: space-between;
			.price,.invoice,.have-invoiced{
				height: 18px;
				color: rgba(255, 61, 0, 100);
				font-size: 18px;
				
			}
			
		}
		.error{
			color: #FF6100;
		}
		.success{
			color: #00b962;
		}
		
		p{
			color: rgba(102, 102, 102, 100);
			line-height: 26px;
			
		}
		.text-1{
			display: inline-block;
			width: 25vw;
			
		}
		.text-2{
			display: inline-block;
			margin-left:4px;
			width:54.6vw;
			
		}
		.order-box{
			
			display: flex;
			.order{
				width: 17vw;
			}
			.order-num{
				flex: 1;
				margin-left:4px;
				overflow: hidden;
				white-space: nowrap;
				text-overflow: ellipsis;
				
			}
		}
		
	}
	.radio{
		margin: auto 0;
		/deep/.uni-radio-input{
			width: 20px !important;
			height: 20px !important;
		}
	}
	
	
	.to-invoice{
		//color:#FF6100!important;
		font-size: 18px
	}
	.have-invoiced{
		//color: #00B962!important;
		font-size: 18px
	}
	.tips{
		color: rgba(153, 153, 153, 100);
		text-align: center;
	}
	
	
</style>