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"  v-if="false" >
				<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">
					联通公司
				</view>
				
			</view>
			<view class="item">
				<view class="item-title">
					发票金额
				</view>
				<view class="item-value">
					1000.00元
				</view>
				
			</view>
			
			
		</view>
		<!-- 按钮 -->
		<view class="btns">
			<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:{}
			}
		},
		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();
					
				}).catch(error => {
					uni.hideLoading();
					
				})
			}
		}
	}
</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);
		}
	}

</style>