mall-front-app/pages/user/invoice/edit.vue

<!-- 收货地址的新增/编辑 -->
<template>
	<!-- {{ru}} -->
	<s-layout :title="state.model.id ? '编辑发票抬头' : '新增发票抬头'">
		<uni-forms ref="invoiceFormRef" v-model="state.model" :rules="rules" validateTrigger="bind" labelWidth="160"
			labelAlign="left" border :labelStyle="{ fontWeight: 'bold' }">
			<view class="bg-white form-box ss-p-x-30">
				<uni-forms-item name="invoiceType" label="发票类型">
					<radio-group @change="invoiceType">
						<radio value="1" :checked="state.model.invoiceType == 1" color="var(--ui-BG-Main)"
							class="radio ss-m-r-30" style="transform: scale(0.9)">纸质普票
						</radio>
						<radio value="2" :checked="state.model.invoiceType == 2" color="var(--ui-BG-Main)" class="radio"
							style="transform: scale(0.9)">专用发票</radio>
					</radio-group>
				</uni-forms-item>
				<!-- 当为专用发票时,不用选择抬头类型 -->
				<uni-forms-item name="invoiceTitleType" label="抬头类型" class="form-item" v-if="state.model.invoiceType == 1">
					<radio-group class="uni-flex uni-row radio-group" @change="invoiceTitleType">
						<radio value="1" :checked="state.model.invoiceTitleType == 1" color="var(--ui-BG-Main)"
							class="radio ss-m-r-30" style="transform: scale(0.9)">个人
						</radio>
						<radio value="2" :checked="state.model.invoiceTitleType == 2" color="var(--ui-BG-Main)"
							style="transform: scale(0.9)" class="radio">单位</radio>
					</radio-group>
				</uni-forms-item>
				<uni-forms-item name="invoiceTitle" label="发票抬头" class="form-item">
					<uni-easyinput v-model="state.model.invoiceTitle" placeholder="请输入发票抬头"
						:inputBorder="false"
						placeholderStyle="color:#BBBBBB;font-size:30rpx;font-weight:400;line-height:normal">
					</uni-easyinput>
				</uni-forms-item>
				<template v-if="state.model.invoiceTitleType == 2">
					<uni-forms-item name="taxIDNumber" label="单位税号" class="form-item">
						<uni-easyinput v-model="state.model.taxIDNumber" type="number" placeholder="请输入单位税号"
							:inputBorder="false"
							placeholderStyle="color:#BBBBBB;font-size:30rpx;font-weight:400;line-height:normal">
						</uni-easyinput>
					</uni-forms-item>
					<uni-forms-item name="invoiceTitle" label="注册地址" class="form-item">
						<uni-easyinput v-model="state.model.invoiceTitle" type="number" placeholder="选填"
							:inputBorder="false"
							placeholderStyle="color:#BBBBBB;font-size:30rpx;font-weight:400;line-height:normal">
						</uni-easyinput>
					</uni-forms-item>
					<uni-forms-item name="invoiceTitle" label="注册电话" class="form-item">
						<uni-easyinput v-model="state.model.invoiceTitle" type="number" placeholder="选填"
							:inputBorder="false"
							placeholderStyle="color:#BBBBBB;font-size:30rpx;font-weight:400;line-height:normal">
						</uni-easyinput>
					</uni-forms-item>
					<uni-forms-item name="invoiceTitle" label="开户银行" class="form-item">
						<uni-easyinput v-model="state.model.invoiceTitle" type="number" placeholder="选填"
							:inputBorder="false"
							placeholderStyle="color:#BBBBBB;font-size:30rpx;font-weight:400;line-height:normal">
						</uni-easyinput>
					</uni-forms-item>
					<uni-forms-item name="invoiceTitle" label="银行账号" class="form-item">
						<uni-easyinput v-model="state.model.invoiceTitle" type="number" placeholder="选填"
							:inputBorder="false"
							placeholderStyle="color:#BBBBBB;font-size:30rpx;font-weight:400;line-height:normal">
						</uni-easyinput>
					</uni-forms-item>
				</template>
				<template v-if="state.model.invoiceType == 2">
					<uni-forms-item name="taxIDNumber" label="单位税号" class="form-item">
						<uni-easyinput v-model="state.model.taxIDNumber" type="number" placeholder="请输入单位税号"
							:inputBorder="false"
							placeholderStyle="color:#BBBBBB;font-size:30rpx;font-weight:400;line-height:normal">
						</uni-easyinput>
					</uni-forms-item>
					<uni-forms-item name="invoiceTitle" label="注册地址" class="form-item">
						<uni-easyinput v-model="state.model.invoiceTitle" type="number" placeholder="必填"
							:inputBorder="false"
							placeholderStyle="color:#BBBBBB;font-size:30rpx;font-weight:400;line-height:normal">
						</uni-easyinput>
					</uni-forms-item>
					<uni-forms-item name="invoiceTitle" label="注册电话" class="form-item">
						<uni-easyinput v-model="state.model.invoiceTitle" type="number" placeholder="必填"
							:inputBorder="false"
							placeholderStyle="color:#BBBBBB;font-size:30rpx;font-weight:400;line-height:normal">
						</uni-easyinput>
					</uni-forms-item>
					<uni-forms-item name="invoiceTitle" label="开户银行" class="form-item">
						<uni-easyinput v-model="state.model.invoiceTitle" type="number" placeholder="必填"
							:inputBorder="false"
							placeholderStyle="color:#BBBBBB;font-size:30rpx;font-weight:400;line-height:normal">
						</uni-easyinput>
					</uni-forms-item>
					<uni-forms-item name="invoiceTitle" label="银行账号" class="form-item">
						<uni-easyinput v-model="state.model.invoiceTitle" type="number" placeholder="必填"
							:inputBorder="false"
							placeholderStyle="color:#BBBBBB;font-size:30rpx;font-weight:400;line-height:normal">
						</uni-easyinput>
					</uni-forms-item>
				</template>
			</view>
			<view class="ss-m-y-20 bg-white ss-p-x-30 ss-flex ss-row-between ss-col-center default-box" v-if="state.model.invoiceType == 2">
				<view class="default-box-title" :class="{ shake: currentProtocol }"> 
					<label class="radio ss-flex ss-col-center" @tap="onChange">
						<radio :checked="state.protocol" color="var(--ui-BG-Main)" style="transform: scale(0.8)"
							@tap.stop="onChange" />
						<view class="agreement-text ss-flex ss-col-center ss-m-l-8">
							我已阅读并同意
							<view class="tcp-text" @tap.stop="onProtocol('专用发票抬头确认书')">
								《专用发票抬头确认书》
							</view>
						</view>
					</label>
				</view>
			</view>
		</uni-forms>
		<su-fixed bottom :opacity="false" bg="" placeholder :noFixed="false" :index="10">
			<view class="footer-box ss-flex-col ss-row-between ss-p-20">
				<view class="ss-m-b-20">
					<button class="ss-reset-button save-btn ui-Shadow-Main" @tap="onSave">保存</button>
				</view>
				<button v-if="state.model.id" class="ss-reset-button cancel-btn" @tap="onDelete">
					删除
				</button>
			</view>
		</su-fixed>

	</s-layout>
</template>

<script setup>
	import {
		ref,
		reactive,
		unref
	} from 'vue';
	import sheep from '@/sheep';
	import {
		onLoad
	} from '@dcloudio/uni-app';
	import _ from 'lodash';
	import {
		mobile
	} from '@/sheep/validate/form';
	import AreaApi from '@/sheep/api/system/area';
	import AddressApi from '@/sheep/api/member/address';
	import $helper from '@/sheep/helper';
	const invoiceFormRef = ref(null);
	const currentProtocol = ref(false)
	const state = reactive({
		showRegion: false,
		model: {
			invoiceType: 1,
			invoiceTitleType: 1,
			invoiceTitle: '',
			taxIDNumber: ''
		},
		rules: {},
		protocol: false,
	});
	// 勾选协议
	function onChange() {
		state.protocol = !state.protocol;
	}
	// 查看协议
	function onProtocol(title) {
		sheep.$router.go('/pages/public/richtext', {
			title,
		});
	}
	const rules = {
		invoiceType: {
			rules: [{
				required: true,
				errorMessage: '请选择发票类型'
			}]
		},
		invoiceTitleType: {
			rules: [{
				required: true,
				errorMessage: '请选择抬头类型'
			}]
		},
		invoiceTitle: {
			rules: [{
				required: true,
				errorMessage: '请输入发票抬头'
			}]
		},
		taxIDNumber: {
			rules: [{
				required: true,
				errorMessage: '请输入单位税号'
			}]
		},
	};
	const invoiceType = (e) => {
		state.model.invoiceType = e.detail.value
		state.model.invoiceTitleType = 1
	}
	const invoiceTitleType = (e) => {
		state.model.invoiceTitleType = e.detail.value
	}
	// 保存收货地址
	const onSave = async () => {
		
		// 参数校验
		const validate = await unref(invoiceFormRef)
			.validate()
			.catch((error) => {
				console.log('error: ', error);
			});
		if (!validate) {
			return;
		}
		if(!state.protocol){
			currentProtocol.value = true
			setTimeout(function(){
				currentProtocol.value = false
			},500)
			return
		}
		// 提交请求
		const formData = {
			...state.model
		}
		const {
			code
		} = state.model.id > 0 ? await AddressApi.updateAddress(formData) :
			await AddressApi.createAddress(formData);
		if (code === 0) {
			sheep.$router.back();
		}
	};

	// 删除收货地址
	const onDelete = () => {
		uni.showModal({
			title: '提示',
			content: '确认删除此收货地址吗？',
			success: async function(res) {
				if (!res.confirm) {
					return;
				}
				const {
					code
				} = await AddressApi.deleteAddress(state.model.id);
				if (code === 0) {
					sheep.$router.back();
				}
			},
		});
	};

	onLoad(async (options) => {



		// // 情况一：基于 id 获得收件地址
		// if (options.id) {
		// 	let {
		// 		code,
		// 		data
		// 	} = await AddressApi.getAddress(options.id);
		// 	if (code !== 0) {
		// 		return;
		// 	}
		// 	// console.log(data)
		// 	state.model = data;
		// }

	});
</script>

<style lang="scss" scoped>
	.shake {
		animation: shake 0.05s linear 4 alternate;
	}
	
	@keyframes shake {
		from {
			transform: translateX(-10rpx);
		}
	
		to {
			transform: translateX(10rpx);
		}
	}
	:deep() {
		.uni-forms-item__label .label-text {
			font-size: 28rpx !important;
			color: #333333 !important;
			line-height: normal !important;
		}

		.uni-forms-item__content {
			display: flex;
			align-items: center;
		}

		.uni-easyinput__content-input {
			font-size: 28rpx !important;
			color: #333333 !important;
			line-height: normal !important;
			padding-left: 0 !important;
		}

		.uni-easyinput__content-textarea {
			font-size: 28rpx !important;
			color: #333333 !important;
			line-height: normal !important;
			margin-top: 8rpx !important;
		}

		.uni-icons {
			font-size: 40rpx !important;
		}

		.is-textarea-icon {
			margin-top: 22rpx;
		}

		.is-disabled {
			color: #333333;
		}
	}

	.default-box {
		width: 100%;
		box-sizing: border-box;
		height: 100rpx;

		.default-box-title {
			font-size: 28rpx;
			color: #333333;
			line-height: normal;
		}
	}
.tcp-text {
		color: var(--ui-BG-Main);
	}
	.footer-box {
		.save-btn {
			width: 710rpx;
			height: 80rpx;
			border-radius: 40rpx;
			background: linear-gradient(90deg, var(--ui-BG-Main), var(--ui-BG-Main-gradient));
			color: $white;
		}

		.cancel-btn {
			width: 710rpx;
			height: 80rpx;
			border-radius: 40rpx;
			background: var(--ui-BG);
		}
	}
</style>