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

<template>
	<view>
		<u-navbar title="开具发票" title-color="#101010">
			<view class="slot" slot="right" @click="gotoUrl('/pages/invoiceManagement/applyMessage')" >
				开票说明
			</view>
		</u-navbar>
		<view class="cover">
			<view class="title">
				发票信息
			</view>
			<view class="image">
				<image class="img" src="@/assets/img/invoice.svg" mode=""></image>
			</view>
		</view>
		<!-- 详细信息 -->
		<!-- 企业单位 -->
		
		<!-- 个人/非企业单位 -->
		<view class="invoice-infos"  >
			<view class="item">
				<view class="title">
					发票金额
				</view>
				<view class="value money">
					{{totalPrice}}元
				</view>
			</view>

			<view class="item">
				<view class="title">
					抬头类型
				</view>
				<view class="value ">
					<view class="invoiceTypeClass">
						<view class="invoiceTypeClassText" v-show="invoiceType.id">{{invoiceType.headerType=='1'?'企业单位':''}}{{invoiceType.headerType=='2'?'个人/非企业单位':''}}</view>
						<view class="invoiceTypeClassTextNo"  v-show="!invoiceType.id" >请选择发票抬头</view>
						
					</view>
				</view>
			</view>
			<view class="item" v-if="invoiceType.headerType=='1'">
				<view class="title">
					发票类型
				</view>
				<view class="value ">
					<view class="invoiceTypeClass">
						<view class="invoiceTypeClassText" v-show="invoiceType.id">{{invoiceType.type=='1'?'增值税专票':''}}{{invoiceType.type=='2'?'增值税普票':''}}</view>
						<view class="invoiceTypeClassTextNo"  v-show="!invoiceType.id" >请选择发票抬头</view>
						
					</view>
				</view>
			</view>
			<view class="item" @click="gotoUrl('/pages/invoiceManagement/selectTitleManagement')" >
				<view class="title">
					发票抬头
				</view>
				<view class="value value2"  >
					<view class="invoiceTypeClass">
						<view class="invoiceTypeClassText" v-show="invoiceType.id">{{invoiceType.title}}</view>
						<view class="invoiceTypeClassTextNo"  v-show="!invoiceType.id" >请选择发票抬头</view>
						
					</view>
					<view class="icon">
						<u-icon name="arrow-right" color="#acacac"></u-icon>
					</view>
				</view>
			</view>
			<view class="item">
				<view class="title">
					联系电话
				</view>
				<view class="value ">
					<view class="invoiceTypeClass">
						<view class="invoiceTypeClassText" v-show="invoiceType.id">{{invoiceType.companyTelephone}}</view>
						<view class="invoiceTypeClassTextNo"  v-show="!invoiceType.id" >请选择发票抬头</view>
						
					</view>
				</view>
			</view>
		</view>
		<!-- 底部 -->
		<view class="bottom">
			<button class="btn" @click="show=true">提交申请</button>
		</view>
		<!-- 弹窗 -->
		<view class="modal">
			<u-modal v-model="show" :show-title="false" :show-cancel-button="true"
			 @confirm="submit"
			 
			 cancel-text="返回修改"
				confirm-text="确认开票">
				<view class="headline">
					<p>发票开具成功后不可撤销</p>
					<p>请您仔细核对开票信息!</p>
				</view>
				<view class="infos">
					<view class="item">
						<view class="title">
							发票项目
						</view>
						<view class="value">
							2024年1月扣费发票



						</view>
					</view>
					<view class="item">
						<view class="title">
							发票抬头
						</view>
						<view class="value">
							联通公司


						</view>
					</view>
					<view class="item">
						<view class="title">
							发票金额
						</view>
						<view class="value">
							1000.00元
						</view>
					</view>
					<view class="hint">
						发票开具后，可开票额度将按照实际开票金额相应扣减
					
					</view>
				</view>
				
			</u-modal>
		</view>
	</view>
</template>

<script>
	import * as API from '@/apis/pagejs/invoiceApi.js'
	
	export default {
		data() {
			return {
				show: false,
				ids:"",
				totalPrice:0,
				invoiceType:{
					
				}
			}
		},
		onLoad(op	){
			this.ids=op.ids
			this.carhelp.set('select_invoice_title','')
			this.openInvoiceByRecordIds();
		},
		onShow() {
			var item=this.carhelp.get('select_invoice_title')
			if(item){
				this.invoiceType=item;
				this.carhelp.set('select_invoice_title','')
			}
		},
		methods: {
			submit(){
				if (!(this.invoiceType&&this.invoiceType.id)) {
					uni.showToast({
						icon: "none",
						title: "请选择发票抬头",
						
					})
					return;
				}
					uni.showLoading({
						mask:true,title:'加载中...'
					})
					API.saveInvoiceByRecordIds({
						recordIds:this.ids,
						invoiceTypeId:this.invoiceType.id
					}).then((response) => {
						uni.hideLoading();
						const eventChannel = this.getOpenerEventChannel();
						eventChannel.emit('refreshData');
						
						uni.redirectTo({
							url:"/pages/invoiceManagement/applyBilling?id="+response.data.id
						})
					}).catch(error => {
						uni.hideLoading();
						
					})
			},
			openInvoiceByRecordIds(){
				
				uni.showLoading({
					mask:true,title:'加载中...'
				})
				API.openInvoiceByRecordIds({
					recordIds:this.ids
				}).then((response) => {
					uni.hideLoading();
					//this.list=response.data.data;
					this.invoiceType=response.data.invoiceType;
					this.totalPrice=response.data.totalPrice;
				}).catch(error => {
					uni.hideLoading();
					
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.cover {
		margin: 24rpx 32rpx;
		padding: 58rpx 32rpx;
		border-radius: 8px;
		position: relative;
		background: linear-gradient(90deg, rgba(49, 110, 207, 1) 2%, rgba(20, 73, 159, 1) 100%);

		.title {
			color: rgba(255, 255, 255, 1);
			font-size: 48rpx;
			font-weight: bold;
		}

		.image {
			width: 176rpx;
			height: 176rpx;
			position: absolute;
			right: 0;
			top: 0;

			.img {
				width: 100%;
				height: 100%;
			}
		}
	}

	// 详细信息
	.invoice-infos {
		background-color: #fff;
		border-radius: 8px;
		margin: 36rpx 32rpx;

		.item {
			display: flex;
			align-items: center;
			padding: 28rpx 32rpx;

			.title {
				color: rgba(119, 119, 119, 1);
				font-size: 32rpx;
			}

			.value {
				flex: 1;
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin-left: 40rpx;

				/deep/.uni-radio-input {
					width: 32rpx;
					height: 32rpx;
				}

				/deep/.uni-input-placeholder {
					//color: rgba(16, 16, 16, 1);
					font-size: 32rpx;
				}

				.radio {
					margin-right: 16rpx;
				}

				.invoiceTypeClass{
					font-size: 32rpx;
					.invoiceTypeClassTextNo{
						color: rgba(119, 119, 119, 1);
						
					}
				}
			}

			.value2 {

				/deep/.uni-input-placeholder {
					//color: rgba(172, 172, 172, 1);
					font-size: 32rpx;
				}



			}

			.money {
				color: rgba(255, 61, 0, 1);
			}
		}
	}

	// 底部
	.bottom {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		background-color: #fff;
		padding: 24rpx 32rpx;

		.btn {
			line-height: 80rpx;
			border-radius: 50px;
			background: linear-gradient(-88.46deg, rgba(34, 109, 198, 1) 2.59%, rgba(9, 158, 237, 1) 97.02%);
			color: rgba(255, 255, 255, 1);
			font-size: 36rpx;
		}
	}

	// 弹窗
	.modal {
		.headline {
			text-align: center;
			background: linear-gradient(90deg, rgba(49, 110, 207, 1) 2%, rgba(20, 73, 159, 1) 100%);
			color: #fff;
			padding: 32rpx 0;

		}
		.infos {
			padding: 40rpx 48rpx 26rpx;
		
			.item {
				display: flex;
				justify-content: space-between;
				margin-bottom: 24rpx;
		
				.title {
					color: rgba(119, 119, 119, 1);
					font-size: 32rpx;
				}
		
				.value {
					color: rgba(51, 51, 51, 1);
					font-size: 32rpx;
				}
			}
		
		}
		.hint{
							 color: rgba(238,49,56,1);
							 font-size: 28rpx
		}
	}

	
</style>