JP-ChargeTeam51/pages/MyInvoice/invoiceManagement.vue

<template>
	<view >
		<ujp-navbar title="我的发票">
			<text class="management" @click="gotoUrl('pages/MyInvoice/invoiceTitleManagement')">抬头管理</text>
		</ujp-navbar>
		<u-alert-tips type="warning"  v-if="personInfo&&personInfo.userType==1" 
		 :descStyle="{
			     fontSize: '28rpx',
			     color: '#ef7a30',
		 }" @click="alerttipsCk"
		 :show-icon="true"  :description="description"></u-alert-tips>
	
			<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/static/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">
			<view class="radio">
				<u-checkbox v-model="allck" @change="allckBtn"></u-checkbox>
			</view>
			<view class="check-all">
				全选
			</view>
			<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="success" @click="submit()" shape="circle">去开票</u-button>
		</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'
	
	export default {
		data() {
			return {
				allck:false,
				list: [{
					value:0,
					name: '未开发票',
					pageIndex: 1,
					recordsTotal: 0,
					list:[],
				}, {
					value:1,
					name: '已开发票',
					pageIndex: 1,
					recordsTotal: 0,
					list:[],
				}],
				current: 0,
				personInfo:{},
				description:"游客模式下需要补全手机号信息,点击前往",
				
			}
		},
		onReachBottom() {
			var list=this.list[this.current].list;
			var recordsTotal=this.list[this.current].recordsTotal;
			
			if (list.length < recordsTotal) {			
				this.myLoadmore();
			}
		},
		onShow(){
			this.personInfo=this.carhelp.getPersonInfo()
			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: {
			alerttipsCk(){
				uni.redirectTo({
					url:"/pages/login/login?jpcode2=invoice"
				})
			},
			view(id){
				uni.navigateTo({
					url:"/pages/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){
							 
						}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,
				
				}).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);
			},
			submit(id){
				if(this.personInfo&&this.personInfo.userType==1 ){
					uni.showModal({
						title: "提示",
						content: "游客模式下需要补全手机号信息,点击前往",
						confirmText: "补全手机号",
						success: res1 => {
							if (res1.confirm) {
								this.alerttipsCk()
							} else if (res1.cancel) {
								//('用户点击取消');
							}
						}
					})
					return
				}
				if(!id){
					id=this.selectIds
				}
				if(!id){
					uni.showToast({
						title:"请至少勾选一条记录"
					})
					return
				}
				
				uni.navigateTo({
					url:'/pages/MyInvoice/issueInvoice?ids='+id
				})
			}
				
		},
	}
</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: 14px 13px;
		background-color: rgba(255, 255, 255, 100);
		position: fixed;
		bottom: 0;
		left: 0;
		display: flex;
		.check-all{
			font-size: 16px;
			margin: auto 5px;
		}
		.total{
			flex: 1;
			// margin-left: 80px;
			text-align: right;
			.total-price{
				font-size:16px
			}
			.order{
				font-size: 12px;
				
			}
		}
		::v-deep.u-btn{
			width: 27.7%;
			line-height: 40px;
			font-size: 18px;
			margin-left:20px;
		}
	}
	.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;
	}
</style>