jp-housekeep-electric/pages/businessHall-test/invoiceManagement/personalTitle.vue

<template>
	<view>
		<u-navbar title="编辑发票抬头" title-color="#101010">
			<view class="slot" slot="right" @click="show=true">
				删除
			</view>
		</u-navbar>
		<!-- 删除弹出框 -->
		<u-popup v-model="show"  mode="bottom" border-radius="12" >
			<view class="popup">
				<view class="headline">
					确认删除
				</view>
				<view class="hint">
					是否删除此发票抬头？
				</view>
				<view class="btn-box">
					<view class="think">
						我再想想
					</view>
					<view class="confirm">
						确认删除
					</view>
				</view>
			</view>
		</u-popup>
		<!-- 类型 -->
		<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-group>
		</view>
		<!-- 其他信息 -->
		<view class="main">
			<u-cell-group>
				
				
				
				<u-cell-item title="发票抬头" required value="" :arrow="false">
					<u-input value="李广宵"></u-input>
				</u-cell-item>
				<u-cell-item title="身份证号"  required value="" :arrow="false">
					<u-input value="420400200001011010"></u-input>
				</u-cell-item>
			</u-cell-group>
		</view>

		<view class="main">
			<u-cell-item title="联系电话" value="" required :arrow="false">
				<u-input value="15100001111
"></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: false,
				show:false,
				list: [{
						name: '企业单位',
						disabled: false
					},
					{
						name: '个人/非企业单位',
						disabled: false
					}
				],
				

				value: '个人/非企业单位',
			};
		},
		methods: {
			// 选中某个单选框时，由radio时触发
			radioChange(e) {
				// console.log(e);
			},
			// 选中任一radio时，由radio-group触发
			radioGroupChange(e) {
				// console.log(e);
			}
		}
	};
</script>

<style lang="scss" scoped>
	.slot {
		color: #ee3138;
	}
	.popup{
		padding: 32rpx;
		text-align: center;
		.headline{
			color: rgba(16,16,16,1);
			font-size: 36rpx;
			font-weight: bold;
		}
		.hint{
			color: rgba(16,16,16,1);
			font-size: 32rpx;
			margin-top: 40rpx;
		}
		.btn-box{
			margin-top: 82rpx;
			display: flex;
			justify-content: space-between;
			.think{
				width: 328rpx;
				line-height: 80rpx;
				border-radius: 4px;
				background-color: rgba(222,225,228,1);
				color: rgba(51,51,51,1);
				font-size: 32rpx;
			}
			.confirm{
				width: 328rpx;
				line-height: 80rpx;
				border-radius: 4px;
				background-color: rgba(255,68,68,1);
				color: rgba(255,255,255,1);
				font-size: 32rpx;
			}
		}
	}

	.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;
		;
	}

	/deep/.uni-textarea-textarea {
		line-height: 54rpx;


	}

	.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>