jp-housekeep-hall/pages/invoiceManagement/invoiceDetails.vue

<template>
	<view>
		<u-navbar title="发票详情"  title-color="#101010" ></u-navbar>
		<view class="background">
			<view class="recharge-details">
				<view class="headline">
					发票金额(元)
				</view>
				<view class="sum">
					{{detail.amount}}
				</view>
				<view :class="{
							state:!detail.image,
							state2:detail.image,
						}">
					
					{{detail.image?'已开票':'开票中'}}
				</view>
				<view class="details">
					
					<view class="item">
						<view class="item-title">
							抬头类型
							
							
						</view>
						<view class="item-value">
								{{detail.headerType=='1'?'企业单位':''}}{{detail.headerType=='2'?'个人/非企业单位':''}}
								
								
								
						</view>
					</view>
					<view class="item" v-if="detail.headerType=='1'">
						<view class="item-title">
							发票类型
							
						</view>
						<view class="item-value">
							{{detail.type=='1'?'增值税专票':''}}{{detail.type=='2'?'增值税普票':''}}
							
						</view>
					</view>
					<view class="item">
						<view class="item-title">
							发票抬头
							
							
						</view>
						<view class="item-value">
							{{detail.title}}
							
						</view>
					</view>
					<view class="item" v-if="detail.companyTaxNo" >
						<view class="item-title">
							公司税号
							
							
						</view>
						<view class="item-value">
							{{detail.companyTaxNo}}
							
							
						</view>
					</view>
					<view class="item" v-if="detail.companyTelephone">
						<view class="item-title">
							手机号码
							
						</view>
						<view class="item-value">
								{{detail.companyTelephone}}
							
						</view>
					</view>
					<view class="item" v-if="detail.idCard">
						<view class="item-title">
							身份证号
						</view>
						<view class="item-value">
					
									{{detail.idCard}}
								
						</view>
					</view>
				</view>
				
				<view class="details">
					
					
					<view class="item"  v-if="false" >
						<view class="item-title">
							申请单号
						</view>
						<view class="item-value">
							T20230816112557708460925
							
							

						</view>
					</view>
					<view class="item">
						<view class="item-title">
							申请时间
						</view>
						<view class="item-value">
							{{detail.createTime}}
						</view>
					</view>
					<view class="item" v-if="false" >
						<view class="item-title">
							开票时间
						</view>
						<view class="item-value">
							2023-08-20 10:29:00
						</view>
					</view>
					<view  v-if="extraInfo" >
						<view class="item-title" style=" text-align: start; color: #777777;">
							开票明细
						</view>
						
							<table class="table1" v-for="(item,i) in extraInfo">
								<template >
									<tr :key="i" >
										<td colspan="2" class="tr2" >{{i}}</td>
									</tr>
									<tr v-for="(it,j) in item" :key="i+'_'+j" v-if="!(['yearMonth','tenantContractId','name','totalAmount'].indexOf(j)>=0)&&it!=0"  >
										<td class="tr2"  >{{j}}</td>
										<td>{{it}}</td>
									</tr>
									
									<tr v-for="(it,j) in item" :key="i+'_'+j" v-if="'totalAmount'==j"  >
										<td class="tr2"  >合计</td>
										<td>{{it}}</td>
									</tr>
									
								</template>
								
							</table>
						
					</view>
					
				</view>
			</view>
			
			<!-- 查看 -->
			<button class="check" @click="down(detail.image)" v-if="detail.image">查看电子发票</button>
			<!-- 返回 -->
			<button class="back" @click="goBack" >返回</button>
		</view>
		
	</view> 
</template>

<script>
	import * as API from '@/apis/pagejs/invoiceApi.js'
	
	export default {
		data() {
			return {
				id:'',
				detail:{},
				extraInfo:null
			}
		},
		onLoad(op){
			this.id=op.id;
			this.getInvoiceDetail()
		},
		methods: {
			down(image){
				uni.showLoading({
					title: "加载中",
					mask: true,
				})	
				window.location.href = image;
								
				setTimeout(()=>{
					uni.hideLoading()
				},2000)
				
			},
			goBack(){
				uni.navigateBack()
			},
			getInvoiceDetail(){
				uni.showLoading({
					mask:true,title:'加载中...'
				})
				API.invoiceDetail({
					id:this.id
				}).then((response) => {
					uni.hideLoading();
					this.detail=response.data.invoiceInfo
					if(this.detail.extraInfo){
						this.extraInfo=JSON.parse(this.detail.extraInfo)
					}
				}).catch(error => {
					uni.hideLoading();
					uni.showToast({
						icon: "none",
						title: error
					})
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.table1{
		margin: 16rpx 0;
		width: 100%;
		   border-collapse: collapse;
		td{
			border: 1px solid #e7e7e7;
			text-align: end;
		
				padding: 16rpx 16rpx;
		}
		.td1{
			text-align: start;
			min-width: 20%;
			max-width: 30%;
		}
		.td3{
			
			white-space: pre;
		}
		tr{
			 background-color:#f5f5f6 
		}
		.tr1{
			text-align: end;
				font-weight: bold;
		}
		.tr2{
			text-align: start;
			
		}
		 tr:nth-child(even) {  
		    background-color: #fff;  
		  }  
	}
	.background{
		
		height: 400rpx;
		padding: 24rpx 32rpx;
		background: linear-gradient(180deg, rgba(203,234,255,1) 0%,rgba(203,234,255,0) 100%);
		.recharge-details{
			
			background-color: #fff;
			border-radius: 8px;
			padding: 40rpx 32rpx;
			text-align: center;
			.headline{
				color: rgb(16,16,16);
				font-size: 36rpx;
				
			}
			.sum{
				color: rgb(16,16,16);
				font-size: 48rpx;
				margin-top: 32rpx;

			}
			.state{
				color: rgba(255,123,0,1);
				margin-top: 8rpx;
			}
			.state2{
				color: rgba(0,185,98,1);
				font-size: 36rpx;
			}
			.details{
				margin-top: 40rpx;
				padding-top: 40rpx;
				border-top: 1px solid rgba(241,241,241,1);
				.item{
					display: flex;
					align-items: center;
					justify-content: space-between;
					margin-bottom:16rpx;
					.item-title{
						color: rgb(119,119,119);
					}
					.item-value{
						color: rgb(48,48,48);
					}
				}
			}
		}
	}
 // 返回
 .back{
	 border: 1px solid rgba(205,205,205,1);
	 line-height: 88rpx;
	 border-radius: 8px;
	 background-color: rgba(255,255,255,1);
	 color: rgba(119,119,119,1);
	 font-size: 32rpx;
	
	 margin-top: 24rpx;
 }
 // 查看
 .check{
	 
	 line-height: 88rpx;
	 border-radius: 8px;
	 background-color: rgba(22,119,255,1);
	 color: rgba(255,255,255,1);
	 font-size: 32rpx;
	 margin-top: 24rpx;
	
 }
</style>