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

<template>
	<view>
		<u-navbar title="申请开票"  title-color="#101010" ></u-navbar>
		<view class="success-icon">
			<image class="img" src="@/assets/img/md-check_circle vRxbRvD.svg" mode=""></image>
		</view>
		<view class="success-text">
			申请成功

		</view>
		<!-- 支付详情 -->
		<view class="payment-infos">
			<view class="item">
				<view class="item-title">
					承租方
				</view>
				<view class="item-value">
					{{detail.tenantName}}
				</view>
				
			</view>
			
			<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">
				<view class="item-title">
					发票金额
				</view>
				<view class="item-value">
					{{detail.amount}}元
				</view>
				
			</view>
			<view class="item">
				<view class="item-title">
					申请时间
				</view>
				<view class="item-value">
					{{detail.createTime}}
				</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 class="btns" v-if="false">
			<button class="btn1">完成</button>
			<button class="btn2"  >查看发票详情</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: {
			gotoInfo2(){
				uni.navigateBack()
			},
			gotoInfo(){
				uni.redirectTo({
					url:"/pages/invoiceManagement/invoiceDetails?id="+this.id
				})
			},
			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>
	page{
		background-color: #fff;
	}
	.success-icon{
		width: 132rpx;
		height: 132rpx;
		margin: 48rpx auto; 
		.img{
			width: 100%;
			height: 100%;
		}
	}
	.success-text{
		color: rgba(51,51,51,1);
		font-size: 48rpx;
		text-align: center;
	}
	// 支付详情
	.payment-infos{
		margin-top: 64rpx;
		padding: 0 80rpx;
		.item{
			display: flex;
			justify-content: space-between;
			margin-bottom: 24rpx;
			.item-title{
				color: rgb(119,119,119);
			}
			.item-value{
				color: rgb(51,51,51);
			}
		}
	}
	// 按钮
	.btns{
		display: flex;
		padding: 0 80rpx;
		margin-top: 80rpx;
		.btn1{
			width: 280rpx;
			height: 80rpx;
			background-color: rgba(255,255,255,1);
			color: rgba(51,51,51,1);
			font-size: 32rpx;
			border-radius: 50px;
			border: 1px solid rgba(223,223,223,1);
		}
		.btn2{
			width: 280rpx;
			height: 80rpx;
			border-radius: 50px;
			background-color: rgba(22,119,255,1);
			color: rgba(255,255,255,1);
			font-size: 32rpx;
			border: 0px solid rgba(187,187,187,1);
		}
	}

	.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;  
		  }  
	}
</style>