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>
	</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,
})

// 返回
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,
	}
	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,
	}
	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>