jp-housekeep-electric/pages/businessHall/invoiceManagement/issueInvoice.vue

<template>
	<view>
		<u-navbar title="开具发票" title-color="#101010">
			<view class="slot" slot="right">
				开票说明
			</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">
					1000.00元
				</view>
			</view>

			<view class="item">
				<view class="title">
					抬头类型
				</view>
				<view class="value ">
					<label class="radio">
						<radio value="" /><text>企业单位</text>
					</label>
					<label class="radio">
						<radio value="" /><text>个人/非企业单位</text>
					</label>
				</view>
			</view>

			<view class="item">
				<view class="title">
					发票抬头
				</view>
				<view class="value">
					<input type="text" placeholder="联通公司" />
					<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">
					<input type="text" placeholder="15500001111" />
				</view>
			</view>
		</view>
		<!-- 个人/非企业单位 -->
		<view class="invoice-infos">
			<view class="item">
				<view class="title">
					发票金额
				</view>
				<view class="value money">
					1000.00元
				</view>
			</view>

			<view class="item">
				<view class="title">
					抬头类型
				</view>
				<view class="value ">
					<label class="radio">
						<radio value="" /><text>企业单位</text>
					</label>
					<label class="radio">
						<radio value="" /><text>个人/非企业单位</text>
					</label>
				</view>
			</view>

			<view class="item">
				<view class="title">
					发票抬头
				</view>
				<view class="value value2">
					<input type="text" placeholder="请选择发票抬头" />
					<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 value2">
					<input type="text" placeholder="请先选择发票抬头" />
				</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" 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>
	export default {
		data() {
			return {
				show: false,

			}
		},
		methods: {

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


			}

			.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>