uniProject/pages/admin/Hetong/components/addKh.vue

<template>
  <uni-popup ref="popupRef" type="bottom" background-color="#fff" :is-mask-click="false" :mask-click="false">
    <view class="admin-kehu-info">
    	<view class="icon-title-navBar-box">
    		<view @click="goback2" 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="jingli" maxlength="-1" placeholder="请填写具体地址" class="form-textarea-box" />
    		</view>
    	</view>
    	<button type="default" class="phone-green-btn info-btn" @click="saveBtn">保存</button>
    </view>
  </uni-popup>
</template>

<script setup>
import {ref,reactive,nextTick} from "vue";
import {onLoad} from "@dcloudio/uni-app";
import * as khApi from "@/api/kehu.js"

const emits = defineEmits('success')

const formData = reactive({
	realName: '',
	userName: '',
	idcard: '',
	idtype: '1',
})

function goback2() {
  popupRef.value.close();
  
  formData.realName = '';
  formData.userName = '';
  formData.idcard = '';
  formData.idtype = '1';
  
}

const popupRef = ref(null)
const data = reactive({
})

function handleShow() {
  popupRef.value.open();
}

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

// 保存
function saveBtn(){
	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,
	}
	khApi.getKehuAdd(opt).then(res => {
		if (res.data) {
			uni.showToast({
				title: '新增成功'
			})
			goback2();
			emits('success')
			nextTick(() => {
				formData.realName = '';
				formData.userName = '';
				formData.idcard = '';
				formData.idtype = '1';
			})
		}
	}).finally(()=>{
		uni.hideLoading()
	})
}

defineExpose({
  handleShow
})
</script>

<style>
</style>