cloud_admin_app/pagesCenter/billingPage/addInvoice/addInvoice.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="抬头类型" borderBottom ref="item1">
					</u-form-item>
					<view class="action">
						<radio-group @change="onChange">
							<label class="label-box" v-for="(item, index) in list" :key="index">
								<radio 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.invoiceTitle" borderBottom ref="item1">
						<u--input v-model="model1.userInfo.invoiceTitle" border="none" inputAlign='right'
							placeholder="请填写发票抬头"></u--input>
					</u-form-item>
				</view>
				<view v-if="checked==1">
					<view class="line">
						<u-form-item :required="true" label="税号" prop="userInfo.dutyNumber" borderBottom ref="item1">
							<u--input v-model="model1.userInfo.dutyNumber" border="none" inputAlign='right'
								placeholder="请填写纳税人识别号"></u--input>
						</u-form-item>
					</view>
					<view class="line">
						<u-form-item label="注册地址" prop="userInfo.registeredAddress" borderBottom ref="item1">
							<u--input v-model="model1.userInfo.registeredAddress" border="none" inputAlign='right'
								placeholder="请填写公司注册地址"></u--input>
						</u-form-item>
					</view>
					<view class="line">
						<u-form-item label="公司开户行" prop="userInfo.bankOfDeposit" borderBottom ref="item1">
							<u--input v-model="model1.userInfo.bankOfDeposit" border="none" inputAlign='right'
								placeholder="请填写银行名称"> </u--input>
						</u-form-item>
					</view>
					<view class="line">
						<u-form-item label="开户行账户" prop="userInfo.openBankAccount" borderBottom ref="item1">
							<u--input v-model="model1.userInfo.openBankAccount" border="none" inputAlign='right'
								placeholder="请填写银行账号"></u--input>
						</u-form-item>
					</view>
				</view>
			</u--form>
		</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>
		<view class="from-box amount">
			<view class="">设置为默认抬头</view>
			<view class="">
				<u-switch v-model="switchValue" @change="switchVhange"></u-switch>
			</view>
		</view> -->
		<!-- position bottom -->
		<view class="footer-box">
			<view>
				<u-button color="#4C91FF" shape='circle' @click="saveEvent">保存</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 switchValue = ref(false)
	const list = reactive([{
			name: 1,
			label: '企业单位',
		},
		{
			name: 2,
			label: '个人/非企业',
		}
	])
	const checked = ref('1')
	const isChecked = ref(0)
	const formRole = ref(null);
	const formAddress = ref(null);
	const model1 = reactive({
		userInfo: {
			invoiceTitle: '',
			dutyNumber: '',
			registeredAddress: '',
			bankOfDeposit: '',
			openBankAccount: '',
		}
	})
	const model2 = reactive({
		userInfo2: {
			address: '',
			phone: '',
			contacts: '',
		}
	})
	const email = ref()
	const isDefault = ref(0)
	const updataId = ref()
	const saveTaxid = ref('')
	// 校验
	const rules = ref({
		'userInfo.invoiceTitle': {
			required: true,
			message: '请填写发票抬头',
			trigger: ['blur', 'change']
		},
		'userInfo.dutyNumber': {
			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']
		}
	}

	// 
	onLoad((option) => {
		// console.log(option, 'option');
		// if (option.detail) {
		// 	let detail = JSON.parse(option.detail)
		// 	model1.userInfo.invoiceHeader = detail.invoiceHeader
		// 	model1.userInfo.taxId = detail.taxId
		// 	model1.userInfo.address = detail.address
		// 	model1.userInfo.bank = detail.bank
		// 	model1.userInfo.cardNo = detail.cardNo
		// 	model2.userInfo2.address = detail.shippingAddress
		// 	model2.userInfo2.phone = detail.contactPhone
		// 	model2.userInfo2.contacts = detail.recipient
		// 	email.value = detail.email
		// 	if (detail.type === 1) {
		// 		isChecked.value = 0
		// 		checked.value = 1
		// 	} else {
		// 		isChecked.value = 1
		// 		checked.value = 2
		// 	}
		// 	if (detail.isDefault === 1) {
		// 		switchValue.value = true
		// 	} else {
		// 		switchValue.value = false
		// 	}
		// 	updataId.value = detail.id
		// 	console.log('JSON.parse(option.detail)', JSON.parse(option.detail));
		// }
		handle_start_access_token()
	})
	// 监听
	watch(checked, (newVal, oldVal) => {
		console.log(newVal, 'new');
		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']
				}
			}
		} else {
			model1.userInfo.taxId = ''
			rules.value = {
				'userInfo.invoiceHeader': {
					required: true,
					message: '请填写发票抬头',
					trigger: ['blur', 'change']
				}
			}
		}
	})

	const handle_start_access_token = async () => {
		uni.$request({
			url: "https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=wx7b910c0c240c2676&secret=APPSECRET",
			method: 'GET'
		}).then(res => {
			console.log(res, '===发票步骤1====?');
		})
	}


	// 方法
	const onChange = (e) => {
		console.log(e, 'onChange');
		if (model1.userInfo.taxId) {
			saveTaxid.value = model1.userInfo.taxId
		}
		checked.value = e.detail.value
		if (checked.value == 1) {
			model1.userInfo.taxId = saveTaxid.value
		}
	}
	const switchVhange = (e) => {
		if (e) {
			isDefault.value = 1
		} else {
			isDefault.value = 0
		}
		console.log('==isDefault===', isDefault.value);
	}
	const saveEvent = () => {
		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) => {
		Promise.all([p1]).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 = {
				orderNo: 12,
				invoiceStatus: 0,
				type: checked.value,
				orderType: 1,
				// 1
				invoiceTitle: model1.userInfo.invoiceTitle,
				dutyNumber: model1.userInfo.dutyNumber,
				registeredAddress: model1.userInfo.registeredAddress,
				bankOfDeposit: model1.userInfo.bankOfDeposit,
				openBankAccount: model1.userInfo.openBankAccount,

			}
			// uni.$u.toast('校验通过')
			uni.$request({
				url: config.baseUrl + "app-api/cloud/invoice/create",
				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)
		})
	}
</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/.u-switch,
	/deep/.u-switch__bg {
		width: 100rpx !important;
		height: 52rpx !important;
	}

	/deep/.u-switch__node {
		width: 44rpx !important;
		height: 44rpx !important;
	}

	/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;
	}
</style>
<style lang="less">
	page {
		background-color: #F2F6F7;
		padding-bottom: 120rpx;
	}
</style>