cloud_admin_app/pagesCenter/billingPage/invoiceInf/invoiceInf.vue

<template>
	<view>
		<!-- 开具发票 -->
		<view class="from-box">
			<u--form labelPosition="left" ref="formRole" :rules="rules" :model="model1">
				<view class="line type-check">
					<u-form-item :required="true" label="抬头类型">
					</u-form-item>
					<view class="action">
						<radio-group @change="onChange">
							<label class="label-box" v-for="(item, index) in list" :key="index">
								<radio color="#4C91FF" class="blue radio" :value="item.name"
									:checked="index == isChecked">
								</radio>
								<text class="label-name">{{item.label}}</text>
							</label>
						</radio-group>
					</view>
				</view>
				<view class="line line-icon ">
					<u-form-item :required="true" label="发票抬头" prop="userInfo.invoiceHeader" borderBottom ref="item1">
						<u--input v-model="model1.userInfo.invoiceHeader" border="none" inputAlign='right'
							placeholder="请填写发票抬头"></u--input>
						<template #right>
							<view class="goinvoiceTitle" @click="goinvoiceTitle">
								<u-icon  name="arrow-right"></u-icon>
							</view>
						</template>
					</u-form-item>
				</view>
				<view v-if="checked==1">
					<view class="line">
						<u-form-item :required="true" label="税号" prop="userInfo.taxId" borderBottom ref="item1">
							<u--input v-model="model1.userInfo.taxId" border="none" inputAlign='right'
								placeholder="请填写纳税人识别号"></u--input>
						</u-form-item>
					</view>
					<view class="line">
						<u-form-item label="注册地址" prop="userInfo.address" borderBottom ref="item1">
							<u--input v-model="model1.userInfo.address" border="none" inputAlign='right'
								placeholder="请填写公司注册地址"></u--input>
						</u-form-item>
					</view>
					<view class="line">
						<u-form-item label="公司开户行" prop="userInfo.bank" borderBottom ref="item1">
							<u--input v-model="model1.userInfo.bank" border="none" inputAlign='right'
								placeholder="请填写银行名称"> </u--input>
						</u-form-item>
					</view>
					<view class="line">
						<u-form-item label="开户行账户" prop="userInfo.cardNo" borderBottom ref="item1">
							<u--input v-model="model1.userInfo.cardNo" border="none" inputAlign='right'
								placeholder="请填写银行账号"></u--input>
						</u-form-item>
					</view>
				</view>
			</u--form>
		</view>
		<view class="from-box amount">
			<view class="">总金额</view>
			<view class="price">{{money}}元</view>
		</view>
		<!-- 邮寄信息 -->
		<view class="content-title">
			<view class="content-name">
				<view class="orders-line"></view>
				<view>邮寄信息</view>
			</view>
		</view>
		<view class="from-box">
			<u--form labelPosition="left" ref="formAddress" :rules="rules2" :model="model2">
				<view class="line">
					<u-form-item :required="true" label="邮寄地址" prop="userInfo2.address" borderBottom ref="item1">
						<u--input v-model="model2.userInfo2.address" border="none" inputAlign='right'
							placeholder="请填写您的发票邮寄地址"></u--input>
					</u-form-item>
				</view>
				<view class="line">
					<u-form-item :required="true" label="邮寄联系人" prop="userInfo2.contacts" borderBottom ref="item1">
						<u--input v-model="model2.userInfo2.contacts" border="none" inputAlign='right'
							placeholder="请填写您的联系人姓名"></u--input>
					</u-form-item>
				</view>
				<view class="">
					<u-form-item :required="true" label="联系人电话" prop="userInfo2.phone" borderBottom ref="item1">
						<u--input v-model="model2.userInfo2.phone" border="none" inputAlign='right'
							placeholder="请填写您的联系人电话"></u--input>
					</u-form-item>
				</view>
			</u--form>
		</view>
		<view class="from-box amount">
			<view class="">电子邮箱</view>
			<view class="">
				<u--input v-model="email" border="none" inputAlign='right' placeholder="请填写您的邮箱账号"></u--input>
			</view>
		</view>
		<!-- position bottom -->
		<view class="footer-box">
			<view>
				<u-button color="#4C91FF" shape='circle' @click="submit">提交</u-button>
			</view>
		</view>
	</view>
</template>

<script setup>
	import config from '@/common/config/config.js';
	import {
		reactive,
		ref,
		watch
	} from "vue";
	import {
		onLoad,
		onShow,
		onReachBottom
	} from "@dcloudio/uni-app";
	const model1 = reactive({
		userInfo: {
			invoiceHeader: '',
			taxId: '',
			address: '',
			bank: '',
			cardNo: '',
		}
	})
	const model2 = reactive({
		userInfo2: {
			address: '',
			phone: '',
			contacts: '',
		}
	})
	const email = ref()
	const money = ref(0)
	const list = reactive([{
			name: 1,
			label: '企业单位',
		},
		{
			name: 2,
			label: '个人/非企业',
		}
	])
	const checked = ref('1')
	const isChecked = ref(0)
	const saveInf = ref()
	const formRole = ref(null);
	const formAddress = ref(null);
	// 校验
	const rules = ref({
		'userInfo.invoiceHeader': {
			required: true,
			message: '请填写发票抬头',
			trigger: ['blur', 'change']
		},
		'userInfo.taxId': { 
			required: true,
			pattern: /^[0-9a-zA-Z]*$/g,
						transform(value) {
							return String(value);
						},
						message: '只能包含字母或数字',
			trigger: ['blur', 'change']
		}
	})
	const rules2 = {
		'userInfo2.address': {
			required: true,
			message: '请填写发票邮寄地址',
			trigger: ['blur', 'change']
		},
		'userInfo2.contacts': {
			required: true,
			message: '请填写联系人姓名',
			trigger: ['blur', 'change']
		},
		'userInfo2.phone': {
			validator: (rule, value, callback) => {
							// 上面有说，返回true表示校验通过，返回false表示不通过
							// uni.$u.test.mobile()就是返回true或者false的
							return uni.$u.test.mobile(value);
						},
			required: true,
			message: '联系电话格式不正确',
			trigger: ['blur', 'change']
		}
	}
	const upList = ref()
	const orderTypeVal = ref(0)
	const saveTaxid=ref('')
	// 
	onLoad((option) => {
		money.value = option.price
		upList.value = JSON.parse(option.list)
		if (option.orderType == 1) {
			orderTypeVal.value = option.orderType
		}
		console.log(option.price, option.list, '--------', orderTypeVal.value);

		uni.$request({
			url: config.wxUrl_pay + "pay/invoice/selectDefault",
		}).then(res => {
			// uni.$u.toast(res.data.msg)
			if (res.data.data) {
				model1.userInfo.invoiceHeader = res.data.data.invoiceHeader
				model1.userInfo.taxId = res.data.data.taxId
				model1.userInfo.address = res.data.data.address
				model1.userInfo.bank = res.data.data.bank
				model1.userInfo.cardNo = res.data.data.cardNo
				model2.userInfo2.address = res.data.data.shippingAddress
				model2.userInfo2.phone = res.data.data.contactPhone
				model2.userInfo2.contacts = res.data.data.recipient
				email.value = res.data.data.email
				if (res.data.data.type == 1) {
					isChecked.value = 0
					checked.value = 1
				} else {
					isChecked.value = 1
					checked.value = 2
				}
			}
			console.log(res, '默认地址');
		})
	})
	onShow((e) => {
		console.log('onshow');
		if (e) {
			saveInf.value = e
			console.log(e, 'asdzxc', saveInf.value);
			model1.userInfo.invoiceHeader = saveInf.value.invoiceHeader
			model1.userInfo.taxId = saveInf.value.taxId
			model1.userInfo.address = saveInf.value.address
			model1.userInfo.bank = saveInf.value.bank
			model1.userInfo.cardNo = saveInf.value.cardNo
			model2.userInfo2.address = saveInf.value.shippingAddress
			model2.userInfo2.phone = saveInf.value.contactPhone
			model2.userInfo2.contacts = saveInf.value.recipient
			email.value = saveInf.value.email
			if (saveInf.value.type == 1) {
				isChecked.value = 0
				checked.value = 1
			} else {
				isChecked.value = 1
				checked.value = 2
				console.log('go',isChecked.value,checked.value);
			}
			console.log('go2',isChecked.value,checked.value);
		}
	})

	// 监听
	watch(checked, (newVal, oldVal) => {
		if (newVal == 1) {
			rules.value = {
				'userInfo.invoiceHeader': {
					required: true,
					message: '请填写发票抬头',
					trigger: ['blur', 'change']
				},
				'userInfo.taxId': {
					required: true,
					pattern: /^[0-9a-zA-Z]*$/g,
								// 正则检验前先将值转为字符串
								transform(value) {
									return String(value);
								},
								message: '只能包含字母或数字',
					trigger: ['blur', 'change']
				}
			}
			console.log(rules.value,'11111');
		} else {
			model1.userInfo.taxId = ''
			rules.value = {
				'userInfo.invoiceHeader': {
					required: true,
					message: '请填写发票抬头',
					trigger: ['blur', 'change']
				}
			}
			console.log(rules.value,'2222');
		}
	})

	// 
	const submit = () => {
		let p1 = new Promise((resolve, reject) => {
			formRole.value.validate().then(res => {
				resolve()
			}).catch(err => {
				console.log(err, '校验失败1');
			})
		})
		let p2 = new Promise((resolve, reject) => {
			formAddress.value.validate().then(res => {
				resolve()
			}).catch(err => {
				console.log(err, '校验失败2');
			})
		})
		Promise.all([p1, p2]).then((result) => {
			console.log('xxxxxxxxx', model1.userInfo.invoiceHeader);
			if(checked.value==2){
				 model1.userInfo.taxId=''
				 model1.userInfo.address=''
				 model1.userInfo.bank=''
				 model1.userInfo.cardNo=''
			}
			let data = {
				type: checked.value,
				email: email.value,
				invoiceMethod: 1, //开票方式，1：电子；2：邮寄
				invoiceAmount: money.value,
				orderType: orderTypeVal.value,
				orderNoList: upList.value,
				// 1
				invoiceHeader: model1.userInfo.invoiceHeader,
				taxId: model1.userInfo.taxId,
				address: model1.userInfo.address,
				bank: model1.userInfo.bank,
				cardNo: model1.userInfo.cardNo,

				// 2
				shippingAddress: model2.userInfo2.address,
				contactPhone: model2.userInfo2.phone,
				recipient: model2.userInfo2.contacts,
			}
			// uni.$u.toast('校验通过')
			uni.$request({
				url: config.wxUrl_pay + "pay/invoice/add",
				method: 'POST',
				data: data,
			}).then(res => {
				uni.$u.toast(res.data.msg)
				setTimeout(function() {
					uni.navigateBack({
						delta: 1,
					});
				}, 500)
				console.log(res.data.msg, '=======?');
			})

		}).catch((error) => {
			console.log(error)
		})
	}
	const onChange = (e) => {
		console.log(e, 'onChange',isChecked.value);
		if(model1.userInfo.taxId){
			saveTaxid.value=model1.userInfo.taxId
		}
		// checked.value = e.detail.value
		if (e.detail.value == 1) {
			isChecked.value = 0
			checked.value = 1
		} else {
			isChecked.value = 1
			checked.value = 2
		}
		if(checked.value==1){
			model1.userInfo.taxId=saveTaxid.value
		}
	}
	const goinvoiceTitle = () => {
		uni.navigateTo({
			url: '../invoiceTitle/invoiceTitle'
		})
	}
</script>

<style lang="less" scoped>
	.from-box {
		background: #fff;
		margin-top: 16rpx;
		padding: 0 32rpx;
	}

	.price {
		color: #4C91FF;
		font-size: 28rpx;
		font-weight: 400;
		text-align: right;
	}

	.line {
		border-bottom: 1px solid #eee;
	}

	/deep/.u-form-item__body {
		padding: 24rpx 0 !important;
	}

	/deep/.u-form-item__body__left {
		width: 250rpx !important;
	}

	/deep/.u-form-item__body__left__content__label {
		color: #585858 !important;
		font-size: 28rpx !important;
		font-weight: 400 !important;
		text-align: left !important;
	}

	/deep/.u-form-item__body__right {
		// width: 50% !important;
	}

	/deep/.u-line:last-child {
		border: 0 !important;
	}

	.type-check {
		display: flex;
		justify-content: space-between;

		/deep/.u-radio-group {
			justify-content: flex-end !important;
			align-content: center !important;
		}

		/deep/.u-radio {
			margin-left: 32rpx;
		}
	}

	.amount {
		display: flex;
		padding: 24rpx 32rpx;
		justify-content: space-between;
		align-items: center;
		color: #585858;
		font-size: 28rpx;
		font-weight: 400;
		text-align: left;
	}

	/deep/.u-input__content__field-wrapper__field {
		height: 40rpx !important;
		line-height: 40rpx !important;
	}

	.content-title {
		display: flex;
		justify-content: space-between;
		margin: 24rpx 32rpx 16rpx 32rpx;
	}

	.content-name {
		font-size: 32rpx;
		font-weight: 400;
		text-align: left;
		color: #171717;
		display: flex;
		align-items: center;
	}

	.orders-line {
		width: 4rpx;
		height: 28rpx;
		margin-right: 8rpx;
		border-left: 4rpx solid #4C91FF;
		border-radius: 4rpx;
	}

	.footer-box {
		width: 100%;
		position: fixed;
		bottom: 0;
		padding: 16rpx 32rpx;
		background-color: #fff;
		border-top: 1px solid #eee;

		/deep/.u-button {
			height: 72rpx !important;
		}
	}

	/deep/.u-input--square {
		background-color: #fff !important;
	}

	.line-icon {
		/deep/.u-icon__icon {
			color: #808080 !important;
			margin-left: 8rpx;
		}
	}

	.line:last-child {
		border: 0;
	}

	/deep/radio.radio[checked]::after,
	/deep/ radio.radio .uni-radio-input-checked::after {
		width: 12px !important;
		height: 12px !important;
		border-top-left-radius: 110px;
		border-top-right-radius: 110px;
		border-bottom-right-radius: 110px;
		border-bottom-left-radius: 110px;
		border-top-width: 5px !important;
		border-right-width: 5px !important;
		border-bottom-width: 5px !important;
		border-left-width: 5px !important;
		background-color: #4C91FF;
	}

	.action {
		display: flex;
		align-items: center;
	}

	.label-box {
		margin-left: 32rpx;
	}

	.label-name {
		margin-left: 8rpx;
		font-size: 28rpx;
	}

	.type-check {
		/deep/.u-form-item__body__left {
			width: 150rpx !important;
		}
	}

	/deep/.u-form-item__body__right__message {
		text-align: right !important;
	}
	.goinvoiceTitle{
		// background: #4C91FF;
	}
</style>
<style lang="less">
	page {
		background-color: #F2F6F7;
		padding-bottom: 120rpx;
	}
</style>