ryx/pages/invoice/applyInvoice.vue

<template>
	<view class="">
		<u-navbar
		            title="开票信息"
		            :safeAreaInsetTop="true"
					leftIconSize="45"
					:titleStyle="{'font-size':'30rpx'}"
					leftIcon="arrow-left"
					@leftClick="backBtn()"
					
		        >
		            
		        </u-navbar>
		<!-- <view class="statues_bar"></view> -->
		<view class="top">
			<view class="" style="width: 40%;">
				开票金额共
			</view>
			<view class="">
				￥{{total}}
			</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>
			
			    <view v-if="state==1">
					<u-form-item  label="发票抬头" prop="presonalname" borderBottom  ref="item1" labelWidth="160rpx"  :required="true">
						<u-input v-model="presonalname"  disabledColor="#ffffff" placeholder="请输入个人姓名" border="none" placeholderStyle="color: #555555">
							<template slot="suffix"><text @click="goinvoiceList">抬头薄</text> </template>
						</u-input>
					</u-form-item>
					<u-form-item  label="邮寄地址" prop="prsonalemail" borderBottom  ref="item1" labelWidth="160rpx"  :required="true">
						<u-input v-model="prsonalemail"  disabledColor="#ffffff" placeholder="请输入发票邮寄地址" border="none" placeholderStyle="color: #555555">
							<template slot="suffix"><text @click="goinvoiceList"></text> </template>
						</u-input>
					</u-form-item>
					<view class="" style="margin: 30rpx 0;" >
						<!-- <text style="color: red;">*</text> -->
						<text>备注信息（选填）</text>
					</view>
					<u--textarea v-model="memo" :customStyle="{'background':'#F4F4F4','border-radius': '0px 32rpx 8rpx 32rpx'}" placeholder="输入备注信息" placeholderStyle="color: #555555"  height=120 border="none" :required="true"></u--textarea>
				</view>
				
				<view class="" v-if="state==0">
					<u-form-item  label="发票抬头" prop="userInfo.name" borderBottom  ref="item1" labelWidth="160rpx" :required="true">
						<u-input v-model="model1.userInfo.name"  disabledColor="#ffffff" :placeholder="state==0?'请输入公司名称':'请输入个人姓名'" border="none" placeholderStyle="color: #555555">
							<template slot="suffix"><text @click="goinvoiceList">抬头薄</text> </template>
						</u-input>
					</u-form-item>
					<u-form-item  label="纳税税号" prop="userInfo.tax_no" borderBottom  ref="item1" labelWidth="160rpx" :required="true">
						<u--input v-model="model1.userInfo.tax_no"  disabledColor="#ffffff" placeholder="请输入纳税税号" border="none" placeholderStyle="color: #555555" ></u--input>
					</u-form-item>
					<u-form-item  label="注册地址" prop="userInfo.address" borderBottom  ref="item1" labelWidth="160rpx">
						<u--input v-model="model1.userInfo.address"  disabledColor="#ffffff" placeholder="请输入注册地址" border="none" placeholderStyle="color: #555555"></u--input>
					</u-form-item>
					<u-form-item  label="电话" prop="userInfo.phone" borderBottom  ref="item1" labelWidth="160rpx">
						<u--input v-model="model1.userInfo.phone"  disabledColor="#ffffff" placeholder="请输入电话" border="none" placeholderStyle="color: #555555" type="number"></u--input>
					</u-form-item>
					<u-form-item  label="开户银行" prop="userInfo.bank_name" borderBottom  ref="item1" labelWidth="160rpx">
						<u--input v-model="model1.userInfo.bank_name"  disabledColor="#ffffff" placeholder="请输入开户银行" border="none" placeholderStyle="color: #555555"></u--input>
					</u-form-item>
					<u-form-item  label="银行账号" prop="userInfo.bank_no" borderBottom  ref="item1" labelWidth="160rpx">
						<u--input v-model="model1.userInfo.bank_no"  disabledColor="#ffffff" placeholder="请输入银行账号" border="none" placeholderStyle="color: #555555" type="number"></u--input>
						
					</u-form-item>
					<u-form-item   label="邮寄地址" prop="userInfo.email" borderBottom  ref="item1" labelWidth="160rpx" :required="true">
						<u--input v-model="model1.userInfo.email"  disabledColor="#ffffff" placeholder="请输入发票邮寄地址" placeholderStyle="color: #555555" border="none" ></u--input>
						
					</u-form-item>
					<view class="" style="margin: 30rpx 0;" >
						<!-- <text style="color: red;">*</text> -->
						<text>备注信息（选填）</text>
					</view>
					<u--textarea v-model="model1.userInfo.memo" :customStyle="{'background':'#F4F4F4','border-radius': '0px 32rpx 8rpx 32rpx'}" placeholder="输入备注信息" placeholderStyle="color: #555555"  height=120 border="none" :required="true"></u--textarea>
				</view>

				
			</u--form>
		</view>
		<view class="" style="margin-bottom: 144rpx;"></view>
	<view class="navbar" @click="submitApply">
		提交申请
	</view>
	</view>
</template>

<script>
	export default{
		data(){
			return{
				state:0,
				showSex:false,
				presonalname:'',
				prsonalemail:'',
				memo:'',
				ids:[],
				total:0,
				rules:{
					'userInfo.name': {
						type: 'string',
						required: true,
						message: '请填写公司名称',
						trigger: ['blur', 'change']
					},
					'personalname': {
						type: 'string',
						required: true,
						message: '请填写个人姓名',
						trigger: ['blur', 'change']
					},
					'prsonalemail': {
						type: 'string',
						required: true,
						message: '请填写接收邮箱',
						trigger: ['blur', 'change']
					},
					'userInfo.tax_no': {
						type: 'string',
						required: true,
						message: '请填写税号',
						trigger: ['blur', 'change']
					},
					'userInfo.email': {
						type: 'string',
						required: true,
						message: '请填写接收邮箱',
						trigger: ['blur', 'change']
					},
				},
				model1: {
					userInfo: {
						name: '',
						tax_no: '',
						address: '',
						phone: '',
						bank_name: '',
						bank_no: '',
						type: '',
						email:'',
						memo:'',
						orders:[]
					},
				}
			}	
		},

		
		onLoad(o){
				let order=uni.getStorageSync("order")
				this.ids=order.ids
				this.total=order.total
				
			if(o.obj){
				let userInfo=JSON.parse(o.obj)
				if(userInfo.type=="企业"){
					this.model1.userInfo=userInfo
					this.state=0
				}else{
					this.state=1
					this.presonalname=userInfo.name
					this.memo=userInfo.memo
				}
			}
		},
		methods:{
			// 跳转抬头列表
			goinvoiceList(){
				let obj={
					choose:true,
					state:this.state
				}
				uni.navigateTo({
					url:"/pages/invoice/invoiceAdmin?obj="+JSON.stringify(obj)
				})
			},
			backBtn(){
				uni.navigateBack({
					delta:1
				})
			},
			submitApply(){
			
				uni.showLoading({})
				if(this.state==0){
					var form = this.model1.userInfo
					 this.model1.userInfo.orders=this.ids
					form.type=2
					if(!form.tax_no){
						this.$toast("请输入纳税税号")
						return
					}
					if(!form.email){
						this.$toast("请输入邮箱号码")
						return
					}
					if(!form.name){
						this.$toast("请输入公司名称")
						return
					}
					// if(!form.memo){
					// 	this.$toast("请输入备注信息")
					// 	return
					// }
				}else{
					var form={
						type:1,
						name:this.presonalname,
						email:this.prsonalemail,
						orders:this.ids,
						memo:this.memo
					}
					if(!form.name){
						this.$toast("请输入邮箱号码")
						return
					}
					if(!form.email){
						this.$toast("请输入名称")
						return
					}
					// if(!form.memo){
					// 	this.$toast("请输入备注信息")
					// 	return
					// }
				}
				this.$delete(form,'id');
				
				
				uni.$u.http.post('/api/bill/add', form, {
					custom: {
						auth: true
					}
				}).then((res) => {
					console.log(res)
					this.$toast("申请成功")
					setTimeout(() => {
						uni.navigateTo({
							url:"/pages/invoice/invoiceList"
						})
					}, 1500)
				
				}).catch((err) => {
					uni.hideLoading()
					this.$toast(err.message)
				})
			}
	    },
	}
</script>

<style lang="less">

	// .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;
			margin-top: 160rpx;
		}
	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>