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

<template>
	<view>
		<u-navbar title="新增发票抬头"  title-color="#101010" ></u-navbar>
		<!-- 类型 -->
		<view class="main">
			<u-cell-group>
				<u-cell-item  title="抬头类型" required :arrow="false" >
					<u-radio-group v-model="form.headerType" @change="radioGroupChange">
								<u-radio 
									@change="radioChange" 
									v-for="(item, index) in list" :key="index" 
									:name="item.id"
									:disabled="item.disabled"
								>
									{{item.name}}
								</u-radio>
							</u-radio-group>
					
				</u-cell-item>
				<u-cell-item  title="发票类型" required :arrow="false" v-show="setparameter('type')" >
					<u-radio-group v-model="form.type" @change="radioGroupChange">
								<u-radio 
									@change="radioChange" 
									v-for="(item, index) in list2" :key="index" 
									:name="item.id"
									:disabled="item.disabled"
								>
									{{item.name}}
								</u-radio>
							</u-radio-group>
				</u-cell-item>
			</u-cell-group>
		</view>
		<!-- 其他信息 -->
		<view class="main">
			<u-cell-group>
				<u-cell-item  title="发票抬头" value="" required :arrow="false"   v-show="setparameter('title')" >
					<u-input placeholder="请填写发票抬头" ></u-input>
				</u-cell-item>
				<u-cell-item  title="公司税号" value="" required :arrow="false"   v-show="setparameter('companyTaxNo')" >
					<u-input placeholder="请填写纳税人税号" ></u-input>
				</u-cell-item>
				<u-cell-item  title="开户银行" value=""  :required="setparameter('bankName')==2" :arrow="false" v-show="setparameter('bankName')" >
					<u-input placeholder="请填写开户银行全称" ></u-input>
				</u-cell-item>
				<u-cell-item  title="银行账户" value=""  :required="setparameter('accountNo')==2" :arrow="false" v-show="setparameter('accountNo')" >
					<u-input placeholder="请填写银行账户" ></u-input>
				</u-cell-item>
				<u-cell-item  title="公司地址" value="" :required="setparameter('companyAddress')==2" :arrow="false" v-show="setparameter('companyAddress')" >
					<u-input placeholder="请填写公司详细地址" ></u-input>
				</u-cell-item>
				
				<u-cell-item  title="身份证号" value="" required :arrow="false" v-show="setparameter('idCard')" >
					<u-input placeholder="请填写身份证号" ></u-input>
				</u-cell-item>
			</u-cell-group>
		</view>
		
		<view class="main">
			<u-cell-item  title="联系电话" value="" required :arrow="false"  v-show="setparameter('companyTelephone')"  >
				<u-input placeholder="请填写联系电话" ></u-input>
			</u-cell-item>
		</view>
		<!-- 默认 -->
		<view class="main ">
			<u-cell-item title="设为默认"  :arrow="false" >
				<u-switch  size="40" v-model="checked" active-color="#00e266"></u-switch>
			</u-cell-item>
		</view>
		
		<button class="save">保存</button>
	</view>
</template>

<script>
export default {
	data() {
		return {
			checked:true,
			list: [
				{
					id:1,
					name: '企业单位',
					disabled: false
				},
				{
					id:2,
					name: '个人/非企业单位',
					disabled: false
				}
			],
			list2: [
				{
					id:1,
					name: '增值税专票',
					disabled: false
				},
				{
					id:2,
					name: '增值税普票',
					disabled: false
				}
			],
			
			value: 'orange',
			form:{
				headerType:'',//专票必填
				type:"",//专票必填
				//companyName:"",//专票必填
				companyTaxNo:"",//专票必填
				bankName:"",
				accountNo:"",
				companyAddress:"",
				companyTelephone:"",
				defaultHeader:"",
				title:"",//个人
				idCard:"",//个人
			}
		};
	},
	computed:{
		ruleReqlist(){
			if(this.form.headerType==2){
				return ["title","idCard"]
			}else if(this.form.headerType==1&&this.form.type==2){
				return ["headerType","type","title","companyTaxNo",
			"companyTelephone","defaultHeader"]
			}else{
				return ["headerType","type","title","companyTaxNo",
			"bankName","accountNo","companyAddress",
			"companyTelephone","defaultHeader"]
			}
		},
		rulelist(){
			if(this.form.headerType==1&&this.form.type==2){
				return ["bankName","accountNo","companyAddress"]
			}else {
				return []
			}
		}
	
	},
	methods: {
		setparameter(key){
			
			if(this.ruleReqlist.indexOf(key)!=-1){
				//console.log(2,key,this.ruleReqlist)
				return 2
			}
			if(this.rulelist.indexOf(key)!=-1){
				//console.log(1,key,this.rulelist)
				return 1
			}
			//console.log(0,key)
			return 0
		},
		// 选中某个单选框时，由radio时触发
		radioChange(e) {
			// console.log(e);
		},
		// 选中任一radio时，由radio-group触发
		radioGroupChange(e) {
			
			
		}
	}
};
</script>

<style lang="scss" scoped>
	.main{
		background-color: #fff;
		margin-bottom: 24rpx;
	}
	
	/deep/.u-cell{
		height: 96rpx;
	}
	/deep/.u-cell__value{
		text-align: left;
		margin-left: 8%;
		font-size: 32rpx;
		
	}
	/deep/.u-switch{
		margin: auto 0;
		float: left;;
	}
		
	
	.save{
		
		margin: 24rpx 32rpx;
		line-height: 88rpx;
		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;
		
	}
	

</style>