JP-ChargeTeam51/pages/MyInvoice/invoiceDetail.vue

<template>
	<view>
		<view v-show="step==1">
			<ujp-navbar title="开票充电订单" :custom-back="customback2">
				
			</ujp-navbar>
			<view class="invoiced" >
			  	<view class="invoiced-item" v-for="(item,index) in list" :key="index"   >
			  		<view class="content oldTextjp2" 
						oldstyle="font-size: 14px;">
			  			<view class="title">
			  				{{item.stationName}}
							 <text class="price2">{{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"> 已经到底了</p>
			  </view>
		</view>
		
		<view v-show="step==0">
			<ujp-navbar title="发票详情"></ujp-navbar>
			<view class="price">
				<view class="num">
					{{invoiceInfo.amount.toFixed(2)}}元
				</view>
				<view class="text" >
					发票金额
				</view>
			</view>
			
			<u-cell-group>
					<u-cell-item  title="开票状态" :arrow="false">
						<text 
						:class="{
							 success:invoiceInfo.status==2,
							error:invoiceInfo.status==1
						}"
						>{{invoiceInfo.statusText}}</text>
					</u-cell-item>
					<u-cell-item  title="所属站点" :arrow="false" :value="invoiceInfo.stationName"></u-cell-item>
					<u-cell-item  title="充电度数" :arrow="false" :value="invoiceInfo.totalElectricQuantity/10000+'度'"></u-cell-item>
				<u-cell-item  title="充电笔数" :arrow="false" :value="invoiceInfo.recordNum+'笔'"></u-cell-item>
				
				
					<u-cell-item  title="发票类型":arrow="false" :value="invoiceInfo.headerType=='1'?'企业单位':'个人/非企业单位'"></u-cell-item>
					<u-cell-item  title="发票抬头" :arrow="false"  :value="invoiceInfo.title"></u-cell-item>
					<u-cell-item  title="发票税号" :arrow="false" :value="invoiceInfo.companyTaxNo?invoiceInfo.companyTaxNo:'--'"></u-cell-item>
					<u-cell-item  title="开票时间" :arrow="false"  :value="invoiceInfo.invoicingTime"></u-cell-item>
				</u-cell-group>
				
				<u-cell-item style="background-color: #fff;"  title="开票充电订单" :arrow="false">
					<text 
					@click="viewList()"
					:class="{
						 success:true,
					
					}"
					>查看</text>
				</u-cell-item>
				<u-cell-item style="background-color: #fff;"  title="发票预览":arrow="false">
					<text 
					@click="view()"
					:class="{
						 success:invoiceInfo.status==2,
						color959595:invoiceInfo.status==1
					}"
					>查看</text>
				</u-cell-item>
				
		</view>
	</view>
</template>

<script>
	import * as API from '@/apis/invoiceApi.js'
	export default {
		data() {
			return {
				id: '',
				invoiceInfo:{},
				step:0,
				list:[]
			}
		},
		onLoad(op) {
			if(op.id) {
				this.id = op.id;
				this.invoiceDetail();
			}
			
			
		},
		methods: {
			customback2(){
				this.step=0;
			},
			viewList(){
				this.step=1;
			},
			view(){
				if(this.invoiceInfo.status==2){
					uni.navigateTo({
						url:"/pages/MyInvoice/invoicePreview?id="+this.invoiceInfo.id
					})
				}else{
					uni.showToast({
						title:'开票中，请等待开票'
					})
				}
				
			},
			invoiceDetail() {
				uni.showLoading({
					title: "加载中",
					mask: true,
				})		
				API.invoiceDetail({
					invoiceId:this.id
				}).then((res) => {
					uni.hideLoading();
					this.invoiceInfo=res.data.invoiceInfo;
					this.list=res.data.invoiceRecordList;
				}).catch(error => {
					uni.showToast({
						title: error,
						icon: "none"
					})
				})
			}
		}
	}
</script>

<style lang="scss">
	.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;
		
	}
	
	.price{
		background-color: #fff;
		 padding: 24px 0;
		text-align: center;
		.num{
			line-height: 36px;
			color: rgba(16, 16, 16, 100);
			font-size: 36px;
		}
		.text{
			color: rgba(102, 102, 102, 100);
			font-size: 16px;
			margin-top: 4px;
		}
	}
	::v-deep.u-cell-box{
		margin: 12px 0;
		
	}
	::v-deep.u-cell__value,::v-deep.u-cell_title{
		font-size: 18px 
	}
	::v-deep.u-cell_title{
		color: #666666;
	}
	::v-deep.u-cell__value{
		color: #101010;
	}
	.color959595{
		color: #959595;
	}

	.error{
		color: #FF6100;
	}
	.success{
		color: #00b962;
	}
	.tips{
		color: rgba(153, 153, 153, 100);
		text-align: center;
	}
	.price2 {
		color: rgba(16, 16, 16, 100);
	}
	.price2.invoice,.have-invoiced{
		height: 18px;
		color: rgba(255, 61, 0, 100);
		font-size: 18px;
		
	}
	
	.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;
			
		}
	
		
	}
	
</style>