RiyueGorge/pages/invoice/applyInvoice.vue

<template>
	<view class="">
		<view class="top">
			<view class="" style="width: 40%;">
				开票金额共
			</view>
			<view class="">
				￥2538
			</view>
		</view>
		<view class="form" >
			<u--form labelPosition="left" :model="model1"  ref="form1">
			  <view class="">
			  	抬头类型
			  </view>
			   	<view class="btn">
			   		<view :class="state==0?'btn-item-active':'btn-item'" @click="state=0">企业</view>	
					<view :class="state==1?'btn-item-active':'btn-item'" @click="state=1">个人</view>
			   	</view>
			
			    <u-form-item  label="发票抬头" prop="userInfo.me" borderBottom  ref="item1" labelWidth="160rpx">
					<u-input v-model="model1.userInfo.me"  disabledColor="#ffffff" :placeholder="state==0?'请输入公司姓名':'请输入个人姓名'" border="none" placeholderStyle="color: #555555">
						<template slot="suffix"><text @click="goinvoiceList">抬头薄</text> </template>
					</u-input>
				</u-form-item>
				
				<view class="" v-if="state==0">
					<u-form-item  label="纳税税号" prop="userInfo.name" borderBottom  ref="item1" labelWidth="160rpx">
						<u--input v-model="model1.userInfo.name"  disabledColor="#ffffff" placeholder="请输入税号" border="none" placeholderStyle="color: #555555"></u--input>
					</u-form-item>
					<u-form-item  label="注册地址" prop="userInfo.name" borderBottom  ref="item1" labelWidth="160rpx">
						<u--input v-model="model1.userInfo.name"  disabledColor="#ffffff" placeholder="请输入注册地址" border="none" placeholderStyle="color: #555555"></u--input>
					</u-form-item>
					<u-form-item  label="电话" prop="userInfo.name" borderBottom  ref="item1" labelWidth="160rpx">
						<u--input v-model="model1.userInfo.name"  disabledColor="#ffffff" placeholder="请输入电话" border="none" placeholderStyle="color: #555555"></u--input>
					</u-form-item>
					<u-form-item  label="开户银行" prop="userInfo.name" borderBottom  ref="item1" labelWidth="160rpx">
						<u--input v-model="model1.userInfo.name"  disabledColor="#ffffff" placeholder="请输入开户银行" border="none" placeholderStyle="color: #555555"></u--input>
					</u-form-item>
					<u-form-item  label="银行账号" prop="userInfo.name" borderBottom  ref="item1" labelWidth="160rpx">
						<u--input v-model="model1.userInfo.name"  disabledColor="#ffffff" placeholder="请输入银行账号" border="none" placeholderStyle="color: #555555"></u--input>
					</u-form-item>
				</view>
			
					<u-form-item   label="发送邮箱" prop="userInfo.idcard" borderBottom  ref="item1" labelWidth="160rpx">
						<u--input v-model="model1.userInfo.idcard"  disabledColor="#ffffff" placeholder="输入接收邮箱" placeholderStyle="color: #555555" border="none" ></u--input>
					</u-form-item>
			
				
				<view class="" style="margin: 30rpx 0;">
					备注信息（选填）
				</view>
				<u--textarea v-model="value2" placeholder="输入备注信息" placeholderStyle="color: #555555"  height=120 border="none"></u--textarea>
			</u--form>
		</view>
		<view class="" style="margin-bottom: 144rpx;"></view>
	<view class="navbar">
		提交申请
	</view>
	</view>
</template>

<script>
	export default{
		data(){
			return{
				state:0,
				showSex:false,
				model1: {
					userInfo: {
						invoice:'',
						name: '',
						type: '',
						me:'',
						
					},
				}
			}	
		},
		methods:{
			// 跳转抬头列表
			goinvoiceList(){
				uni.navigateTo({
					url:"/pages/invoice/invoiceAdmin"
				})
			}
	    },
	}
</script>

<style lang="less">
	.u-form-item__body.data-v-5e7216f1{
		padding: 30rpx 0 !important;
	}
	.u-textarea.data-v-81cd9d32{
		background-color:#F4F4F4 !important; 
		border-radius: 0px 32rpx 8rpx 32rpx !important;
	}
	.top{
			background: #FFFFFF;
			border-radius: 8rpx 32rpx 8rpx 8rpx;
			margin: 30rpx;
			padding: 40rpx;
			display: flex;
		}
	page{
		background-color: #F4F4F4;
		font-size: 30rpx;
	}
	.form{
		background-color: #fff;
		padding: 30rpx;
		margin: 30rpx;
		border-radius: 8rpx 32rpx 8rpx 32rpx;
		margin-bottom: 144rpx;
		
	}
	.btn{
		display: flex;
		border-bottom: 1rpx solid #E3E3E3;
		padding: 30rpx 0;
		.btn-item{
			text-align: center;
			line-height: 60rpx;
			width: 176rpx;
			height: 60rpx;
			background: #F4F4F4;
			border-radius: 30rpx;
			margin:0 10rpx;
		}
		.btn-item-active{
			text-align: center;
			line-height: 58rpx;
			width: 174rpx;
			height: 58rpx;
			background: rgba(30, 159, 106, 0.1);
			border-radius: 30rpx;
			border: 1px solid #1E9F6A;
			color: #1E9F6A;
			margin:0 10rpx;
		}
	}
	.navbar{
		padding: 30rpx 0;
		text-align: center;
		background:#1E9F6A ;
		color: #fff;
		bottom: 0;
		margin: 0 auto;
		left: 0;
		position: fixed;
		width: 100%;
		border-radius: 16rpx 16rpx 0px 0px;
		
	}
</style>