uniProject/pages/admin/zizhanghao/components/editorUserDl.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-content" :class="dialogContentClass">
					<view class="form-label-input">
						<view class="phone-form-label"><text class="form-label-require"></text>姓名</view>
						<input v-model="realName" placeholder="请输入姓名" />
					</view>
					<view class="form-label-input">
						<view class="phone-form-label"><text class="form-label-require"></text>手机号</view>
						<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 {
		getUserGuanliUpdate,
		getUserGuanliInfo
	} 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 userId = ref(null)

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

<style>
</style>