uniProject/pages/admin/kehu/kehuInfo.vue

<template>
	<view class="admin-kehu-info">
		<view class="icon-title-navBar-box">
			<view @click="goUpPage" class="nav-bar-icon"></view>
			<text class="nav-bar-title">家政客户</text>
		</view>
		<view>
			<view class="form-label-input">
				<view class="phone-form-label"><text class="form-label-require">*</text>姓名</view>
				<uni-easyinput v-model="formData.realName" placeholder="请输入姓名" />
			</view>

			<view class="form-label-input">
				<view class="phone-form-label"><text class="form-label-require">*</text>手机号</view>
				<uni-easyinput type="number" v-model="formData.userName" placeholder="请输入手机号" maxlength="11" />
			</view>
			<view class="form-label-input">
				<view class="phone-form-label">
					<text class="form-label-require"></text>
					<text v-if="formData.idtype ==1">身份证号</text>
					<text v-if="formData.idtype ==2">护照号</text>
					<icon @click="idCardChange" class="change-icon">切换</icon>
				</view>
				<uni-easyinput :disabled="!statusFlag && status=='edit'" @blur="idCardBlur" v-model="formData.idcard"
					placeholder="请输入身份证号或护照号" maxlength="18" />
			</view>
			<view class="form-label-input flex-start-row">
				<view class="phone-form-label"><text class="form-label-require"></text>具体地址</view>
				<textarea v-model="formData.jutidizhi" maxlength="-1" placeholder="请填写具体地址" class="form-textarea-box" />
			</view>
		</view>
		<button type="default" class="phone-green-btn info-btn" @click="saveBtn">保存</button>

		<commonDialogVue ref="comRefAdd" :content="contentAdd" @confirm-btn="htAdd2"></commonDialogVue>
		<commonDialogVue ref="comRefEditor" :content="contentEditor" @confirm-btn="htAdd2"></commonDialogVue>
	</view>
</template>

<script setup>
	import {
		ref,
		reactive
	} from "vue";
	import {
		onLoad
	} from "@dcloudio/uni-app";
	import * as khApi from "@/api/kehu.js"
	const formData = reactive({
		realName: '',
		userName: '',
		idcard: '',
		idtype: '1',

		jutidizhi: '',
		pageFlag: 'add',
		id: null,
		userId: null,
	})

	const contentAdd = ref('');
	const contentEditor = ref('');

	const comRefAdd = ref(null);
	const comRefEditor = ref(null)

	// 返回
	function goUpPage() {
		uni.redirectTo({
			url: '/pages/admin/kehu/kehuList'
		})
	}

	function idCardChange(data) {
		formData.idtype = formData.idtype == 1 ? 2 : 1;
	}

	// 保存
	function saveBtn() {
		if (formData.pageFlag === 'editor') {
			htEditor();
		} else {
			htAdd();
		}
	}

	// 新增
	function htAdd() {

		let arr = [];
		if (!formData.realName) {
			arr.push('姓名');
		}
		if (!formData.userName) {
			arr.push('电话');
		}
		if (!formData.realName || !formData.userName) {
			uni.showToast({
				icon: 'none',
				title: `请完善${arr.join('、')}信息！`
			})
			return;
		}

		uni.showLoading({
			title: '新增中...',
			mask: true
		});
		const opt = {
			realName: formData.realName,
			userName: formData.userName,
			idtype: formData.idtype,
			idcard: formData.idcard,
			jutidizhi: formData.jutidizhi,
			checked: 0
		}
		khApi.getKehuAdd(opt).then(res => {
			if (res.data.result) {
				uni.showToast({
					title: '新增成功'
				})
				goUpPage();
			} else {
				contentAdd.value = res.data.message;
				comRefAdd.value.handleShow();
			}
		}).finally(() => {
			uni.hideLoading()
		})
	}

	function htAdd2() {

		let arr = [];
		if (!formData.realName) {
			arr.push('姓名');
		}
		if (!formData.userName) {
			arr.push('电话');
		}
		if (!formData.realName || !formData.userName) {
			uni.showToast({
				icon: 'none',
				title: `请完善${arr.join('、')}信息！`
			})
			return;
		}

		uni.showLoading({
			title: '新增中...',
			mask: true
		});
		const opt = {
			realName: formData.realName,
			userName: formData.userName,
			idtype: formData.idtype,
			idcard: formData.idcard,
			jutidizhi: formData.jutidizhi,
			checked:1
		}
		khApi.getKehuAdd(opt).then(res => {
			if (res.data) {
				uni.showToast({
					title: '新增成功'
				})
				goUpPage();
			}
		}).finally(() => {
			uni.hideLoading()
		})
	}


	// 编辑
	function handleEditor() {
		khApi.getKehuInfo({
			userId: formData.userId,
			id: formData.id,
		}).then(res => {
			formData.realName = res.data.realName,
				formData.userName = res.data.userName,
				formData.idcard = res.data.idcard;
			formData.idtype = res.data.idtype;
			formData.addres = res.data.addres;
			formData.jutidizhi = res.data.jutidizhi;
			formData.idtype = res.data.idtype;

		})
	}

	function htEditor() {
		let arr = [];
		if (!formData.realName) {
			arr.push('姓名');
		}
		if (!formData.userName) {
			arr.push('电话');
		}
		if (!formData.realName || !formData.userName) {
			uni.showToast({
				icon: 'none',
				title: `请完善${arr.join('、')}信息！`
			})
			return;
		}
		uni.showLoading({
			title: '更新中...',
			mask: true
		});
		const opt = {
			userId: formData.userId,
			realName: formData.realName,
			userName: formData.userName,
			idtype: formData.idtype,
			idcard: formData.idcard,
			jutidizhi: formData.jutidizhi,
			checked: 0
		}
		khApi.getKehuUpdate(opt).then(res => {
			if (res.data.result) {
				uni.showToast({
					title: '编辑成功'
				})
				goUpPage();
			} else {
				contentEditor.value = res.data.message;
				comRefEditor.value.handleShow();
			}
		}).finally(() => {
			uni.hideLoading()
		})
	}

	function htEditor2() {
		let arr = [];
		if (!formData.realName) {
			arr.push('姓名');
		}
		if (!formData.userName) {
			arr.push('电话');
		}
		if (!formData.realName || !formData.userName) {
			uni.showToast({
				icon: 'none',
				title: `请完善${arr.join('、')}信息！`
			})
			return;
		}
		uni.showLoading({
			title: '更新中...',
			mask: true
		});
		const opt = {
			userId: formData.userId,
			realName: formData.realName,
			userName: formData.userName,
			idtype: formData.idtype,
			idcard: formData.idcard,
			jutidizhi: formData.jutidizhi,
			checked: 1
		}
		khApi.getKehuUpdate(opt).then(res => {
			if (res.data) {
				uni.showToast({
					title: '编辑成功'
				})
				goUpPage();
			}
		}).finally(() => {
			uni.hideLoading()
		})
	}

	onLoad((options) => {
		if (options.id && options.userId) {
			formData.pageFlag = 'editor';
			formData.id = options.id;
			formData.userId = options.userId;
			handleEditor();
		}
	})
</script>

<style>
</style>