jp-charge/pagesFinance/MyInvoice/invoiceManagement.vue

<template>
	<view >
		<ujp-navbar title="我的发票">
			<text class="management" @click="gotoUrl('pagesFinance/MyInvoice/invoiceTitleManagement')">抬头管理</text>
		</ujp-navbar>
	
<!-- 弹窗 -->
		<view class="modal">
			<u-picker v-model="showTimePicker"
			 @confirm="confirmTimePicker"  @cancel="showTime=true"
			 mode="time" :params="params" ></u-picker>
			 
			<u-modal v-model="showTime"  title="按时间开票" @confirm="confirmmodal"
				:show-cancel-button="true" confirm-text="去开票" cancel-text="取消">
				
				
				<view class="infos">
					
					<view class="item">
						<view class="name">
							开始时间
						</view>
						<view class="content" @click="TimeKey='A',showTimePicker=true,showTime=false">
							{{defaultTimeA?defaultTimeA:'请选择开始时间'}}
							<u-icon name="arrow-right"></u-icon>
						</view>
					</view>
					<view class="item">
						<view class="name">
							结束时间
						</view>
						<view class="content"  @click="TimeKey='B',showTimePicker=true,showTime=false">
							{{defaultTimeB?defaultTimeB:'请选择结束时间'}}
							<u-icon name="arrow-right"></u-icon>
						</view>
					</view>
					
					
				</view>


			</u-modal>
		
		</view>
	 
			<u-tabs  inactive-color="#888888" active-color="#101010" :list="list" :is-scroll="true"
					:current="current" @change="change"></u-tabs>
	
	
		<view class="carNone" v-if="list[current].list.length == 0">
				<img src="@/assets/img/暂无数据-缺省页.png" alt="">
				<p class="oldTextjp2" oldstyle="font-size: 18px;">暂无记录</p>
			</view>

<!-- 未开票 -->
      <view class="not-invoiced" v-show="current==0">
		  
        <view class="not-invoiced-item flex" v-for="(item,index) in list[0].list" :key="index">
			<view class="radio">
				<u-checkbox v-model="item.ck" @change="changeitem($event,item)" ></u-checkbox>
			</view>
			<view class="content oldTextjp2" 
			 oldstyle="font-size: 14px;"
			 @click="submit(item.id)">
				<view class="title">
					{{item.stationName}} <text class="price">{{item.actualFee?item.actualFee.toFixed(2):'0.00'}}元</text>
				</view>
				<p><text class="text-1">充电电量</text> <text class="text-2">{{item.electricQuantity/10000}}度</text></p>
				<p><text class="text-1">开始时间</text> <text class="text-2">{{item.startTime?item.startTime:item.endTime}}</text></p>
				 <p><text class="text-1">结束时间</text> <text class="text-2">{{item.endTime}}</text></p>
				 <p><text class="text-1">车牌号</text> <text class="text-2">{{item.carNumber}}</text></p>
				 
			</view>
			
        	
        </view>
		
       <p class="tips" v-if="list[current].list.length == list[current].recordsTotal && list[current].recordsTotal != 0" > 已经到底了</p>
       
		
      	
		<view class="bottom">
			<u-button type="info" @click="showsheet=true" v-if="list[0].list.length" shape="primary">更多方式</u-button>
			
			<view class="total">
				<p class="total-price">共<text style="color: #FF7300;" >{{sumActualFee.toFixed(2)}}元</text></p>
				<p class="order">{{selectcount}}个订单</p>
			</view>
			<u-button type="primary" @click="submit()" >去开票</u-button>
			<u-action-sheet :list="listsheet" @click="clicksheet" v-model="showsheet"></u-action-sheet>

		</view>
      </view>
	  <!-- 已开票 -->
	  <view class="invoiced" v-show="current==1">
	  	<view class="invoiced-item" v-for="(item,index) in list[1].list" :key="index"  @click="view(item.id)" >
	  		<view class="content oldTextjp2" 
			 oldstyle="font-size: 14px;" >
	  			<view class="title">
	  				{{item.stationName}} <text :class="{
						invoice:item.status==1,
						'have-invoiced':item.status==2
					}">{{item.statusText}}</text>
	  			</view>
	  			<p><text class="text-1">发票金额</text> <text class="text-2">{{item.amount?item.amount.toFixed(2):0}}元</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>
	<!-- 	<view class="invoiced-item">
			<view class="content">
				<view class="title">
					玉桥公园充电站 <text class="have-invoiced">开票成功</text>
				</view>
				<p><text>发票抬头</text> <text class="text-2">50.00元</text></p>
				<p><text class="text-1">发票抬头</text> <text class="text-2">刘德华</text></p>
				<p><text class="text-1">申请时间</text> <text class="text-2">2022-06-23 16：00：00</text></p>
			</view>
		</view> -->
		<p class="tips"> 仅展示最近12个月的发票信息</p>
	  </view>
	</view>
</template>

<script>
	import * as API from '@/apis/invoiceApi.js'
	import udoublepicker from '@/components/u-double-picker.vue'
	
	export default {
		components: {
			udoublepicker
		},
		data() {
			return {
				id:"",
				allck:false,
				list: [{
					value:0,
					name: '未开发票',
					pageIndex: 1,
					recordsTotal: 0,
					list:[],
				}, {
					value:1,
					name: '已开发票',
					pageIndex: 1,
					recordsTotal: 0,
					list:[],
				}],
				current: 0,
				personInfo:{},
			
				listsheet:[ {
					text: '全部开票' 
				}, {
					text: '按时间选择' 
				}],
					showTime:false,
				showsheet:false,
					showTimePicker:false,
				TimeKey:"",
				defaultTimeA:'',
				defaultTimeB:'',
				params: {
									year: true,
									month: true,
									day: true,
									hour: false,
									minute: false,
									second: false
				},
			}
		},
		onReachBottom() {
			var list=this.list[this.current].list;
			var recordsTotal=this.list[this.current].recordsTotal;
			
			if (list.length < recordsTotal) {			
				this.myLoadmore();
			}
		},
		onShow(){
			
		},
		onLoad(op){
			this.id=op.id
			this.getlist(true);
		},
		computed:{
			
			sumActualFee(){
				try{
					var list=this.list[0].list;
					var sum=0;
					 
					for(var i in list ){
						var obj=list[i];
						if(obj.ck){
						 
							sum+=obj.actualFee*100
						}
					}
								 
					return sum/100
				}catch(e){
					//TODO handle the exception
					return 0
				}
			
			},
			selectIds(){
				var list=this.list[0].list;
				var sz=[]
				for(var i in list ){
					var obj=list[i];
					if(obj.ck){
						sz.push(obj.id);
					}
				}
							
				return sz.join();
			},
			selectcount(){
				var list=this.list[0].list;		 
				var count=0
				for(var i in list ){
					var obj=list[i];
					if(obj.ck){
						count++;
					}
				}
			
				return count;
			}
		},
		 
		methods: {
			confirmmodal(){
				if(!this.defaultTimeA){
					uni.showToast({
						title:"请选择开始时间"
					})
					this.showTime=true
					return
				}
				if(!this.defaultTimeB){
					uni.showToast({
						title:"请选择结束时间"
					})
					this.showTime=true
					return
				}
				if(this.defaultTimeA>this.defaultTimeB){
					uni.showToast({
						title:"结束时间需要大于开始时间"
					})
					this.showTime=true
					return
				}
				uni.navigateTo({
					url:'/pagesFinance/MyInvoice/issueInvoice?startDate='+this.defaultTimeA+'&endDate='+this.defaultTimeB+'&id='+this.id,
					events: {
						refreshData: () => {
							this.init()
						}
					}
				})
				
			},
			confirmTimePicker(e){
				console.log(e)
				var time=e.year+'-'+e.month+'-'+e.day
				
				
				if(this.TimeKey=='A'){
					this.defaultTimeA=time
				}
				if(this.TimeKey=='B'){
					this.defaultTimeB=time
				}
				this.showTime=true
			},
			alerttipsCk(){
				uni.redirectTo({
					url:"/pagesFinance/login/login?jpcode2=invoice"
				})
			},
			view(id){
				uni.navigateTo({
					url:"/pagesFinance/MyInvoice/invoiceDetail?id="+id
				})
			},
			changeitem(e,item){
				
				item.ck=e.value
				if(!e.value){
					this.allck=false
				}
			},
			allckBtn(e){
				console.log(e.value)
					var list=this.list[0].list;	
				if(e.value){
					for(var i in list ){
						var obj=list[i];
						if(obj.ck){
							 obj.ck=false
						}else{
							obj.ck=true
						}
					}
						this.$forceUpdate()
				}
			
			},
			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 = [];
					 this.list[current].pageIndex=1;
					pageIndex = 1;
				}
			 
				API.invoiceList({
					pageIndex: pageIndex,
					status:current,
					entAccountId:this.id
				}).then((res) => {
					uni.hideLoading();
					
					var datalist=[]
					// if(current==0){
					// 	datalist=res.data.station;
					// }
					// if(current==1){
					// 	datalist=res.data.data;
					// }
					datalist=res.data.data;
					
					for(var i in datalist){
						var obj=datalist[i]
						obj.ck=false;
						this.allck=false;
					}
					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.list[this.current].pageIndex=pageIndex;
				
				this.getlist()
			},
			change(index) {
				this.current = index;
				var list =this.list[this.current].list
				this.getlist(true);
			},
			init() {
				
				this.getlist(true)
			},
			submit(id){
				
				if(!id){
					id=this.selectIds
				}
				if(!id){
					uni.showToast({
						title:"请至少勾选一条记录"
					})
					return
				}
				
				uni.navigateTo({
					url:'/pagesFinance/MyInvoice/issueInvoice?ids='+id+'&id='+this.id,
					events: {
						refreshData: () => {
							this.init()
						}
					}
				})
			},
			clicksheet(index){
				if(index==0){
					uni.navigateTo({
						url:'/pagesFinance/MyInvoice/issueInvoice?saveAll=1'+'&id='+this.id,
						events: {
							refreshData: () => {
								this.init()
							}
						}
					})
				}else{
					this.showTime=true
					
				}
			},
			
			submit1(){
				
				
			}
				
		},
	}
</script>

<style lang="scss" scoped>
	.carNone{
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		img{
			width: 100%;
			height: 100%;
		}
		p{
			margin-top: -60px;
		}
	}
	page{
		padding-bottom: 100px;
	}
	.management{
		position: absolute;
		right: 16px;
		font-size: 12px
	}
	::v-deep.u-scroll-box{
		 width: 65.8% !important;
		 margin: 0 auto;
		 display: flex;
		 
	}
	::v-deep.u-tab-bar{
		width: 24% !important;
		left: -8% !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;
				
			}
			
		}
		
		p{
			color: rgba(102, 102, 102, 100);
			line-height: 26px;
			
		}
		.text-1{
			display: inline-block;
			width: 22vw;
			color: #666666;
		}
		.text-2{
			display: inline-block;
			margin-left:4px;
			width:50vw;
			color: #101010;
			
		}
		// .order-box{
			
		// 	display: flex;
		// 	.order{
		// 		width: 17vw;
		// 	}
		// 	.order-num{
				
		// 		width:55vw;
		// 		margin-left:4px;
		// 		overflow: hidden;
		// 		white-space: nowrap;
		// 		text-overflow: ellipsis;
				
		// 	}
		// }
		
	}
	.radio{
		margin: auto 0;
		::v-deep.uni-radio-input{
			width: 20px !important;
			height: 20px !important;
		}
	}
	
	.bottom{
		width: 100%;
		padding: 28rpx ;
		background-color: rgba(255, 255, 255, 100);
		position: fixed;
		bottom: 0;
		left: 0;
		display: flex;
		 ::v-deep.u-btn{
			margin: 0 16rpx;
		}
		.check-all{
			font-size: 32rpx;
			margin: auto 10rpx;
		}
		.total{
			flex: 1;
			// margin-left: 80px;
			text-align: right;
			.total-price{
				font-size:32rpx
			}
			.order{
				font-size: 24rpx;
				
			}
		}
		
	}
	.invoice{
		color: rgba(255, 97, 0, 100) !important;
	}
	.have-invoiced{
		color: rgba(0, 185, 98, 100) !important;
	}
	.tips{
		color: rgba(153, 153, 153, 100);
		text-align: center;
	}
	
	
	// 弹窗
	.modal {
		background-color: #101010;
	
		.title {
	
			line-height: 20px;
			padding: 18px 52px;
			background-image: linear-gradient(rgb(0, 217, 115), #00A457);
			color: #fff;
			text-align: center;
	
		}
	
		.infos {
			padding: 20px 14px;
	
			.item {
				white-space: pre;
				line-height: 28px;
				display: flex;
				justify-content: space-between;
				color: #666666;
				font-size: 16px
				
			}
			.content{
				color: #000;
			}
			.hint {
				color: rgba(238, 49, 56, 100);
				margin-top: 16px;
	
				font-size: 14px
			}
		}
	
	}
</style>