<template>
<view class="fapiao">
	<view class="order">
		<image src="../../static/images/img/userBg.png" mode=""></image>
		<view class="info">
			<view class="item">
				订单编号：89897989886597989
			</view>
			<view class="subItem">
				<text>开票金额：</text><text style="color:#EB6100;margin-right:17rpx;">￥208.00</text>
				<u-icon name="error-circle" color="#999999" size="13"></u-icon>
			</view>
		</view>
	</view>
	<view class="form">
		<view class="formItem">
			<view class="title">
				<text>发票类型</text>
				<u-icon name="error-circle" color="#999999" size="13"></u-icon>
			</view>
			<view class="content">
				普通发票-纸质
			</view>
		</view>
		<view class="formItem">
			<view class="title">
				<text>抬头类型</text>
			</view>
			<view class="content">
				<u-radio-group 
				    v-model="form.type"
				    placement="row">
					<u-radio activeColor="#EB6100" labelSize="13" labelColor="#222222" label="个人或事业单位"></u-radio>
					<u-radio activeColor="#EB6100" labelSize="13" labelColor="#222222" label="企业" style="margin-left:70rpx;"></u-radio>
				</u-radio-group>
			</view>
		</view>
		<view class="formItem">
			<view class="title">
				<text>发票抬头</text>
			</view>
			<view class="contentPlaceholder">
				<text>填写需要开具发票的企业</text>
				<u-icon name="arrow-right" color="#999999" size="13"></u-icon>
			</view>
		</view>
		<view class="formItem">
			<view class="title">
				<text>税号</text>
			</view>
			<view class="contentPlaceholder">
				
				<u-input
					placeholder="纳税人识别号"
					border="none"
					v-model="form.num"
				></u-input>
			</view>
		</view>
		<view class="formItem">
			<view class="title">
				<text>开户银行</text>
			</view>
			<view class="contentPlaceholder">
				<u-input
					placeholder="选填"
					border="none"
					v-model="form.back"
				></u-input>
			</view>
		</view>
		<view class="formItem">
			<view class="title">
				<text>银行账号</text>
			</view>
			<view class="contentPlaceholder">
				
				<u-input
					placeholder="选填"
					border="none"
					v-model="form.account"
				></u-input>
			</view>
		</view>
		
		<view class="formItem">
			<view class="title">
				<text>企业地址</text>
			</view>
			<view class="contentPlaceholder">
			
				<u-input
					placeholder="选填"
					border="none"
					v-model="form.addr"
				></u-input>
			</view>
		</view>
		<view class="formItem">
			<view class="title">
				<text>企业电话</text>
			</view>
			<view class="contentPlaceholder">
			
				<u-input
					placeholder="选填"
					border="none"
					v-model="form.phone"
				></u-input>
			</view>
		</view>
		
	</view>
	<view class="btn">
		提交
	</view>
</view>
</template>

<script>
export default{
	data(){
		return{
			
			form:{
				type:'个人或事业单位',
				company:null,
				num:null,
				back:null,
				account:null,
				addr:null,
				phone:null,
			}
		}
	},
	methods:{
		
	}
}
</script>

<style scoped lang="scss">
.fapiao{
	background-color: #F2F3F4;
	min-height: calc(100vh);
	padding:24rpx;
	.order{
		
		background: #FFFFFF;
		border-radius: 20rpx;
		display: flex;
		align-items: center;
		padding: 20rpx;
		&>image{
			width: 100rpx;
			height: 100rpx;
			background: #C9D7E4;
			border-radius: 10rpx;
			flex-shrink: 0;
		}
		.info{
			margin-left:20rpx;
			flex:1;
			
			justify-content: space-around;
			.item{
				
				font-family: Alibaba PuHuiTi;
				font-weight: 400;
				font-size: 28rpx;
				color: #222222;
			}
			.subItem{
				display: flex;
				align-items: center;
				margin-top:21rpx;
				text{
					
					font-family: Alibaba PuHuiTi;
					font-weight: 400;
					font-size: 24rpx;
					color: #222222;
				}
			}
		}
	}
	.form{
		margin-top:20rpx;
		padding: 30rpx 20rpx 0 20rpx;
		
		background: #FFFFFF;
		border-radius: 20rpx;
		.formItem{
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-bottom:43rpx;
			.title{
				display: flex;
				align-items: center;
				text{
					
					font-family: Alibaba PuHuiTi;
					font-weight: 400;
					font-size: 28rpx;
					color: #222222;
				}
				.content{
					
					font-family: Alibaba PuHuiTi;
					font-weight: 400;
					font-size: 26rpx;
					color: #222222;
				}
				
			}
			.contentPlaceholder{
				font-family: Alibaba PuHuiTi;
				font-weight: 400;
				font-size: 26rpx;
				color: #999999;
				display: flex;
				align-items: center;
				::v-deep input{
					text-align:right !important;
				}
			}
		}
	}
	.btn{
		position: fixed;
		bottom:50rpx;
		width:94%;
		left:3%;
		padding:30rpx 0;
		text-align: center;
		background: #EB6100;
		border-radius: 45px;
		font-family: Alibaba PuHuiTi;
		font-weight: 400;
		font-size: 30rpx;
		color: #FFFFFF;
	}
}
</style>