uniProject/pages/admin/zizhanghao/components/addUserDl.vue

<template>
	<uni-popup ref="commonPopup" :animation="false" :is-mask-click="false" mask-background-color="rgba(0, 0, 0, 0.4)">
		<view class="phone-common-dialog">
			<view class="common-body-box">
				<view class="common-title">{{title}}</view>
				<view class="common-input-box">
					<view class="common-input-row">
						<view class="common-input-label"><text class="common-label-require">*</text>姓名：</view>
						<input class="common-input" v-model="realName" placeholder="请输入姓名" />
					</view>
					<view class="common-input-row">
						<view class="common-input-label"><text class="common-label-require">*</text>密码：</view>
						<input class="common-input" v-model="password" placeholder="请输入密码" />
					</view>
					<view class="common-input-row">
						<view class="common-input-label"><text class="common-label-require">*</text>手机号：</view>
						<input class="common-input" v-model="userName" placeholder="请输入手机号" />
					</view>
				</view>
				<view class="common-btn-box">
					<view class="not-confirm-btn" @click="handleClose">{{notBtn}}</view>
					<view class="confirm-btn" @click="confirmBtn">{{okBtn}}</view>
				</view>
			</view>
		</view>
	</uni-popup>
</template>

<script setup>
	import {
		ref
	} from 'vue';
	import {
		getUserGuanliAdd
	} from "@/api/zizhanghao.js"

	const props = defineProps({
		title: {
			type: String,
			default: ''
		},
		dialogContentClass: {
			type: String,
			require: true,
			default: 'content-center-class'
		},
		notBtn: {
			type: String,
			require: true,
			default: '取消'
		},
		okBtn: {
			type: String,
			require: true,
			default: '确认'
		},
	});

	const realName = ref('');
	const userName = ref('');
	const password = ref('');
	const userId = ref(null)

	const commonPopup = ref(null); // 索引
	const $emit = defineEmits(['confirm-btn'])
	// 打开弹窗
	function handleShow() {
		commonPopup.value.open();
	}
	// 取消
	function handleClose() {
		commonPopup.value.close();
		realName.value = '';
		userName.value = '';
		userId.value = null;
		password.value = '';
	}
	// 确认
	function confirmBtn() {
		if (!realName.value) {
			uni.showToast({
				icon: 'none',
				title: '请输入用户名'
			})
			return;
		}
		if (!userName.value) {
			uni.showToast({
				icon: 'none',
				title: '请输入手机号'
			})
			return;
		}
		if (!password.value) {
			uni.showToast({
				icon: 'none',
				title: '请输入密码'
			})
			return;
		}
		getUserGuanliAdd({
			userName: userName.value,
			realName: realName.value,
			password: password.value
		}).then(res => {
			if (res.data) {
				uni.showToast({
					icon: 'none',
					title: '新增成功'
				})
				$emit('confirm-btn');
				commonPopup.value.close();
				realName.value = '';
				userName.value = '';
				userId.value = null;
				password.value = '';
			}
		})
	}
	defineExpose({
		handleShow,
		handleClose
	})
</script>

<style>
</style>