menber-center/pages/applyForBilling/applyForBilling.vue

<template>
	<view class="container">
		<view class="card-box">
			<view class="card-item-box">
				<view class="required"></view>
				<view class="label">
					开票金额
				</view>
				<view class="text">
					￥{{ formData.form.price }}元
				</view>
			</view>
		</view>
		<u-form :model="formData.form" ref="formRef">
			<view class="card-box">
				<view class="card-item-box">
					<view class="required">*</view>
					<view class="label">
						发票类型
					</view>
					<view class="text">
						<u-form-item prop="type">
							<u-radio-group v-model="formData.form.type">
								<u-radio
									@change="onTypeChange" 
									v-for="(item, index) in typeList" :key="index" 
									:name="item.name"
									icon-size="26"
									label-size="26"
								>
									{{item.name}}
								</u-radio>
							</u-radio-group>
						</u-form-item>
					</view>
				</view>
				<view class="card-item-box">
					<view class="required">*</view>
					<view class="label">
						抬头类型
					</view>
					<view class="text">
						<u-form-item prop="titleType">
							<u-radio-group v-model="formData.form.titleType">
								<u-radio
									@change="onTitleTypeChange" 
									v-for="(item, index) in titleTypeList" :key="index" 
									:name="item.name"
									icon-size="26"
									label-size="26"
								>
									{{item.name}}
								</u-radio>
							</u-radio-group>
						</u-form-item>
					</view>
				</view>
				<view class="card-item-box">
					<view class="required">*</view>
					<view class="label">
						抬头名称
					</view>
					<view class="text">
						<u-form-item prop="name">
							<u-input v-model="formData.form.name" type="text" :border="false" placeholder=""/>
						</u-form-item>
					</view>
				</view>
				<view class="card-item-box">
					<view class="required">{{formData.form.titleType === '企业单位' ? '*' : ''}}</view>
					<view class="label">
						纳税人识别号
					</view>
					<view class="text">
						<u-form-item prop="number">
							<u-input v-model="formData.form.number" type="text" :border="false" placeholder=""/>
						</u-form-item>
					</view>
				</view>
				<view class="card-item-box">
					<view class="required">*</view>
					<view class="label">
						收票人邮箱
					</view>
					<view class="text">
						<u-form-item prop="email">
							<u-input v-model="formData.form.email" type="text" :border="false" placeholder=""/>
						</u-form-item>
					</view>
				</view>
				<view class="card-item-box">
					<view class="required">*</view>
					<view class="label">
						手机号码
					</view>
					<view class="text">
						<u-form-item prop="tel">
							<u-input v-model="formData.form.tel" type="text" :border="false" placeholder=""/>
						</u-form-item>
					</view>
				</view>
				<view class="card-item-box" v-if="showMore">
					<view class="required"></view>
					<view class="label">
						地址
					</view>
					<view class="text">
						<u-form-item prop="address">
							<u-input v-model="formData.form.address" type="text" :border="false" placeholder=""/>
						</u-form-item>
					</view>
				</view>
				<view class="card-item-box" v-if="showMore">
					<view class="required"></view>
					<view class="label">
						开户银行
					</view>
					<view class="text">
						<u-form-item prop="bank">
							<u-input v-model="formData.form.bank" type="text" :border="false" placeholder=""/>
						</u-form-item>
					</view>
				</view>
				<view class="card-item-box" v-if="showMore">
					<view class="required"></view>
					<view class="label">
						银行账号
					</view>
					<view class="text">
						<u-form-item prop="bankAccount">
							<u-input v-model="formData.form.bankAccount" type="text" :border="false" placeholder=""/>
						</u-form-item>
					</view>
				</view>
				<view class="card-item-box" v-if="showMore">
					<view class="required"></view>
					<view class="label">
						备注说明
					</view>
					<view class="text">
						<u-form-item prop="remark">
							<u-input v-model="formData.form.remark" type="text" :border="false" placeholder=""/>
						</u-form-item>
					</view>
				</view>
				<view class="card-item-box func" @click="showMore = !showMore">
					<view class="text">
						{{ showMore ? '收起' : '展开' }}选项信息&nbsp;<span class="iconfont icon-chevron-up" :class="{'reversal': !showMore}"></span>
					</view>
				</view>
			</view>
			<view class="bottom-box">
				<u-button type="error" shape="circle" @click="onSubmit">提交申请</u-button>
			</view>
		</u-form>
	</view>
</template>

<script setup>
	import { ref, reactive } from 'vue'
	import { onReady, onLoad } from '@dcloudio/uni-app'
	
	const showMore = ref(false)
	
	const formRef = ref()
	const formData = reactive({
		form: {
			orderIds: null, // 订单Id
			price: '0.00', // 开票金额
			type: '全电专票', // 发票类型
			titleType: '企业单位', // 抬头类型
			name: null, // 抬头名称
			number: null, // 纳税人识别号
			email: null, // 收票人邮箱
			tel: null, // 手机号码
			address: null, // 地址
			bank: null, // 开户银行
			bankAccount: null, // 银行账号
			remark: null // 备注说明
		},
		rules: {
			type: [
				{ 
					required: true, 
					message: '请选择发票类型', 
					// 可以单个或者同时写两个触发验证方式 
					trigger: ['change','blur'],
				}
			],
			titleType: [
				{ 
					required: true, 
					message: '请选择抬头类型', 
					// 可以单个或者同时写两个触发验证方式 
					trigger: ['change','blur'],
				}
			],
			name: [
				{ 
					required: true, 
					message: '请输入抬头名称', 
					// 可以单个或者同时写两个触发验证方式 
					trigger: 'blur',
				}
			],
			number: [
				{ 
					required: true, 
					message: '请输入纳税人识别号', 
					// 可以单个或者同时写两个触发验证方式 
					trigger: 'blur',
				}
			],
			email: [
				{ 
					required: true, 
					message: '请输入收票人邮箱', 
					// 可以单个或者同时写两个触发验证方式 
					trigger: 'blur',
				}
			],
			tel: [
				{ 
					required: true, 
					message: '请输入手机号码', 
					// 可以单个或者同时写两个触发验证方式 
					trigger: 'blur',
				}
			],
		}
	})
	const typeList = ref([
		{
			name: '全电专票'
		},
		{
			name: '全店普票'
		}
	])
	const titleTypeList = ref([
		{
			name: '企业单位'
		},
		{
			name: '个人/非企业单位'
		}
	])
	function onTypeChange(val) {}
	function onTitleTypeChange(val) {
		if (val !== '企业单位') {
			formData.rules.number[0].required = false
		} else {
			formData.rules.number[0].required = true
		}
	}
	function onSubmit() {
		formRef.value.validate((valid) => {
			if (valid) {
				uni.redirectTo({
					url: '/pages/invoiceResult/invoiceResult'
				})
			}
		})
	}
	
	onReady(() => {
		formRef.value.setRules(formData.rules)
	})
	onLoad((load) => {
		formData.form.orderIds = load.ids
		formData.form.price = load.price
		
		console.log('form', formData.form)
	})
</script>

<style lang="scss" scoped>
	.container {
		height: 100vh;
		width: 100vw;
		background-color: $uni-bg-color;
		padding: 0 20rpx;
		position: relative;
		
		.card-box {
			padding: 0 20rpx;
			background-color: $uni-text-color-inverse;
			border-radius: $uni-card-border-radius;
			margin-bottom: 20rpx;
			// &:first-child {
			// 	.card-item-box {
			// 		padding: 0;
			// 	}
			// }
			.card-item-box {
				display: flex;
				align-items: center;
				// padding: 20rpx 0;
				font-size: $uni-title-font-size-2;
				border-bottom: 1rpx solid #E6E6E6;
				height: 82rpx;
				&:last-child {
					border-bottom: none;
				}
				.required {
					width: 3%;
					color: $uni-color-error;
					font-weight: bold;
				}
				.label {
					width: 27%;
					font-weight: bold;
				}
				.text {
					width: 70%;
					::v-deep .u-form-item {
						padding: 0 !important;
						line-height: 0;
						font-size: $uni-title-font-size-2;
					}
				}
			}
			.func {
				justify-content: center;
				text-align: center;
				color: $uni-text-color-grey;
				
				.reversal {
					display: inline-block;
					transform: rotate(180deg);
				}
			}
		}
	
		.bottom-box {
			padding: 20rpx;
			
			position: absolute;
			bottom: 50rpx;
			width: 95%;
		}
	}
</style>