uni-zhihuikuangshan/pages/workbench/invoice_assistant/invoice_assistant.vue

<template>
	<view>
		<view class="content">
			<view class="info">
				<view class="info_title">
					<view class="info_title_icon"></view>
					<view class="info_title_name">增值税开票信息</view>
				</view>
				<view class="info_inner">
					<view class="info_inner_item">
						<view class="item_label">
							<text>名称：</text>
						</view>
						<view class="item_text">
							<text>{{Info.name}}</text>
						</view>
					</view>
					<view class="info_inner_item">
						<view class="item_label">
							<text>税号: </text>
						</view>
						<view class="item_text">
							<text>{{Info.identification}}</text>
						</view>
					</view>
					<view class="info_inner_item">
						<view class="item_label">
							<text>地址：</text>
						</view>
						<view class="item_text">
							<text>{{Info.address}}</text>
						</view>
					</view>
					<view class="info_inner_item">
						<view class="item_label">
							<text>电话：</text>
						</view>
						<view class="item_text">
							<text>{{Info.tel}}</text>
						</view>
					</view>
					<view class="info_inner_item">
						<view class="item_label">
							<text>开户行：</text>
						</view>
						<view class="item_text">
							<text>{{Info.bank}}</text>
						</view>
					</view>
					<view class="info_inner_item">
						<view class="item_label">
							<text>账号：</text>
						</view>
						<view class="item_text">
							<text>{{Info.account}}</text>
						</view>
					</view>
				</view>
			</view>
			
			<view class="info">
				<view class="info_title">
					<view class="info_title_name">交款信息</view>
				</view>
				<view class="info_inner">
					<view class="info_inner_item">
						<view class="item_label">
							<text>账户名称：</text>
						</view>
						<view class="item_text">
							<text>{{Payment.name}}</text>
						</view>
					</view>
					<view class="info_inner_item">
						<view class="item_label">
							<text>开户行: </text>
						</view>
						<view class="item_text">
							<text>{{Payment.bank}}</text>
						</view>
					</view>
					<view class="info_inner_item">
						<view class="item_label">
							<text>账户：</text>
						</view>
						<view class="item_text">
							<text>{{Payment.account}}</text>
						</view>
					</view>
					
				</view>
			</view>
			
			<view class="info">
				<view class="info_title">
					<view class="info_title_name">收据抬头</view>
				</view>
				<view class="info_inner">
					<view class="info_inner_item">
						<view class="item_label">
							<text>名称：</text>
						</view>
						<view class="item_text">
							<text>{{Title}}</text>
						</view>
					</view>
					
				</view>
			</view>
			
			
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				Info:{},
				Payment:{},
				Title:""
			};
		},
		onLoad() {
			this.getInvoice()
		},
		methods:{
			// 请求开票信息
			getInvoice(){
				this.$api.workbench_invoice_info({
					
				}).then((res)=>{
					console.log(res)
					const data = res.data.data
					console.log(data)
					this.Info = data.invoiceInfo
					this.Payment = data.invoicePayment
					this.Title = data.invoiceTitle
				})
				
			},
			
		}
	}
</script>

<style lang="scss">
	page{
		background-color: #009FE8;
	}
	.content{
		background-color: #009FE8;
		box-sizing: border-box;
		padding: 31rpx 36rpx 0;
		padding-bottom: 50rpx;
		.info{
			margin-bottom: 20rpx;
			box-sizing: border-box;
			padding-top: 19rpx;
			background: #FFFFFF;
			border-radius: 20rpx;
			.info_title{
				display: flex;
				justify-content: center;
				.info_title_icon{
					width: 52rpx;
					height: 52rpx;
					background-image: url(./icon/invoice.png);
					background-size: cover;
					background-repeat: no-repeat;
				}
				.info_title_name{
					margin-left: 12rpx;
					font-size: 38rpx;
					font-weight: 500;
					color: #232627;
					line-height: 52rpx;

				}
			}
			.info_inner{
				box-sizing: border-box;
				padding-left: 46rpx;
				padding-bottom: 40rpx;
				.info_inner_item{
					overflow: hidden;
					margin-top: 40rpx;
					
					font-size: 27rpx;
					font-weight: 500;
					color: #7D7C7C;
					line-height: 39rpx;

					.item_label{
						float: left;
						width: 140rpx;
					}
					.item_text{
						float: left;
						width: 440rpx;
						color: #2C3E50;
					}
				}
			}

		}
	}
</style>