uniProject/pages/admin/my/passwordDialog.vue

<template>
	<uni-popup ref="passwordPopup" :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">修改密码</view>
			<view class="common-input-box">
				<view class="common-input-row">
					<text class="common-input-label"><text class="common-label-require">*</text>原密码：</text>
					<input class="common-input" v-model="data.oldPassWord"  placeholder="请输入原密码" />
				</view>
				<view class="common-input-row">
					<text class="common-input-label"><text class="common-label-require">*</text>新密码：</text>
					<input class="common-input" v-model="data.newPassWord"  placeholder="请输入新密码" />
				</view>
				<view class="common-input-row">
					<text class="common-input-label"><text class="common-label-require">*</text>确认密码：</text>
					<input class="common-input" v-model="data.okPassWord"  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,reactive} from "vue"
	const props = defineProps({
	  notBtn: {
	    type: String,
	  	require: true,
	    default: '取消'
	  },
	  okBtn: {
	    type: String,
	  	require: true,
	    default: '确认'
	  },
	});
	const data = reactive({
		okPassWord: '',
		oldPassWord: '',
		newPassWord: '',
	})
	const passwordPopup = ref(null); // 索引
	const $emit = defineEmits(['confirm-btn'])
	
	function passClear(){
		data.okPassWord = '';
		data.oldPassWord = '';
		data.newPassWord = '';
	}
	// 打开弹窗
	function handleShow() {
		passwordPopup.value.open();
	}
	// 取消
	function handleClose() {
		passClear();
		passwordPopup.value.close();
	}
	// 确认
	function confirmBtn(){
		let arr = [];
		if (!data.oldPassWord) {
			arr.push('原密码');
		}
		if (!data.newPassWord) {
			arr.push('新密码');
		}
		if (!data.newPassWord) {
			arr.push('确认密码');
		}
		if (!data.oldPassWord || !data.newPassWord) {
			uni.showToast({
				icon: 'none',
				title: `请输入${arr.join('、')}信息！`
			})
			return;
		}
		if (data.newPassWord != data.okPassWord) {
			uni.showToast({
				icon: 'none',
				title: '新密码和确认密码不同'
			})
			return;
		}
		$emit('confirm-btn',data);
		passClear();
		passwordPopup.value.close();
	}
	defineExpose({
			handleShow,
			handleClose
		})
</script>

<style>
</style>