jp-housekeep-electric/pages/businessHall-test/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="value" @change="radioGroupChange">
								<u-radio 
									@change="radioChange" 
									v-for="(item, index) in list" :key="index" 
									:name="item.name"
									:disabled="item.disabled"
								>
									{{item.name}}
								</u-radio>
							</u-radio-group>
					
				</u-cell-item>
				<u-cell-item  title="发票类型" required :arrow="false">
					<u-radio-group v-model="value" @change="radioGroupChange">
								<u-radio 
									@change="radioChange" 
									v-for="(item, index) in list2" :key="index" 
									:name="item.name"
									: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" >
					<u-input placeholder="请填写发票抬头" ></u-input>
				</u-cell-item>
				<u-cell-item  title="公司税号" value="" required :arrow="false" >
					<u-input placeholder="请填写纳税人税号" ></u-input>
				</u-cell-item>
				<u-cell-item  title="开户银行" value="" required :arrow="false" >
					<u-input placeholder="请填写开户银行全称" ></u-input>
				</u-cell-item>
				<u-cell-item  title="银行账户" value="" required :arrow="false" >
					<u-input placeholder="请填写银行账户" ></u-input>
				</u-cell-item>
				<u-cell-item  title="公司地址" value="" required :arrow="false" >
					<u-input placeholder="请填写公司详细地址" ></u-input>
				</u-cell-item>
			</u-cell-group>
		</view>
		
		<view class="main">
			<u-cell-item  title="联系电话" value="" required :arrow="false" >
				<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: [
				{
					name: '企业单位',
					disabled: false
				},
				{
					name: '个人/非企业单位',
					disabled: false
				}
			],
			list2: [
				{
					name: '增值税专票',
					disabled: false
				},
				{
					name: '增值税普票',
					disabled: false
				}
			],
			
			value: 'orange',
		};
	},
	methods: {
		// 选中某个单选框时，由radio时触发
		radioChange(e) {
			// console.log(e);
		},
		// 选中任一radio时，由radio-group触发
		radioGroupChange(e) {
			// console.log(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>