mky-vent-base/src/views/vent/gas/components/modal/confirmModal1.vue

<template>
  <Teleport to="body">
    <Transition name="fade">
      <div v-if="visible" class="password-dialog-overlay" @click.self="handleOverlayClick">
        <div class="password-dialog">
          <!-- 标题栏 -->
          <div class="dialog-header">
            <h3>密码校验</h3>
          </div>
          <div class="close-btn" @click="handleCancel">
            <img src="@/assets/images/home-container/configurable/close.svg" alt="" />
          </div>

          <!-- 内容区域 -->
          <div class="dialog-content">
            <!-- 密码输入框 -->
            <div class="input-wrapper" :class="{ error: showError }">
              <input
                ref="passwordInput"
                v-model="password"
                :type="showPassword ? 'text' : 'password'"
                :placeholder="placeholder"
                maxlength="20"
                @keyup.enter="handleConfirm"
                @input="clearError"
              />
              <!-- 显示/隐藏密码切换 -->
              <button type="button" class="toggle-password" @click="togglePassword" tabindex="-1">
                <span v-if="showPassword"> <img src="@/assets/images/home-container/configurable/showPassword.svg" alt="" /></span>
                <span v-else> <img src="@/assets/images/home-container/configurable/hidePassword.svg" alt="" /></span>
              </button>
            </div>

            <!-- 错误提示 -->
            <Transition name="slide">
              <p v-if="errorMessage" class="error-message">{{ errorMessage }}</p>
            </Transition>
          </div>

          <!-- 按钮区域 -->
          <div class="dialog-footer">
            <button class="btn cancel" @click="handleCancel"><span>取消</span></button>
            <button class="btn confirm" @click="handleConfirm"><span>确认</span></button>
          </div>
        </div>
      </div>
    </Transition>
  </Teleport>
</template>

<script setup>
import { ref, nextTick, watch } from 'vue';

// Props
const props = defineProps({
  // 弹窗显示状态
  visible: {
    type: Boolean,
    default: false,
  },
  // 提示消息
  message: {
    type: String,
    default: '',
  },
  // 输入框占位符
  placeholder: {
    type: String,
    default: '请输入密码(必填)',
  },
  // 点击遮罩层是否关闭
  closeOnClickOverlay: {
    type: Boolean,
    default: true,
  },
});

// Emits
const emit = defineEmits(['update:visible', 'confirm', 'cancel', 'forgot-password', 'error']);

// 状态
const password = ref('');
const showPassword = ref(false);
const errorMessage = ref('');
const showError = ref(false);
const passwordInput = ref(null);

// 监听弹窗显示，自动聚焦
watch(
  () => props.visible,
  async (newVal) => {
    if (newVal) {
      await nextTick();
      passwordInput.value?.focus();
      // 重置状态
      password.value = '';
      errorMessage.value = '';
      showError.value = false;
    }
  }
);

// 清除错误
const clearError = () => {
  showError.value = false;
  errorMessage.value = '';
};

// 切换密码显示
const togglePassword = () => {
  showPassword.value = !showPassword.value;
};

// 处理取消
const handleCancel = () => {
  emit('update:visible', false);
  emit('handleCancel');
  resetState();
};
// 处理确认
const handleConfirm = async () => {
  if (!password.value) {
    showError.value = true;
    errorMessage.value = '请输入密码';
    return;
  }
  showError.value = false;
  try {
    // 触发确认事件，返回密码
    const result = await emit('handleConfirm', password.value);
    // 如果确认成功（组件外部处理），关闭弹窗
    if (result !== false) {
      handleCancel();
    }
  } catch (error) {
    // 密码错误
    showError.value = true;
    errorMessage.value = '密码错误';

    // 清空密码输入
    password.value = '';

    // 重新聚焦
    await nextTick();
    passwordInput.value?.focus();
  } finally {
  }
};
// 点击遮罩层
const handleOverlayClick = () => {
  if (props.closeOnClickOverlay) {
    handleCancel();
  }
};

// 重置状态
const resetState = () => {
  password.value = '';
  showPassword.value = false;
  errorMessage.value = '';
  showError.value = false;
};

// 暴露方法给父组件
defineExpose({
  resetState,
  focus: () => passwordInput.value?.focus(),
});
</script>

<style scoped>
@font-face {
  font-family: 'douyuFont';
  src: url('../../../../assets/font/douyuFont.otf');
}
.password-dialog-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.password-dialog {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 12px;
  width: 500px; /* 固定宽度 */
  height: 270px; /* 固定高度 */
  background: url('/@/assets/images/home-container/configurable/confirmBj.png') no-repeat;
  background-size: 100% 100%;
}

/* 调整 close-btn 的位置 */
.close-btn {
  width: 30px;
  position: absolute;
  top: -6px;
  right: -23px;
  cursor: pointer;
}

/* 调整标题位置 */
.dialog-header {
  padding: 20px 24px;
  text-align: center;
  color: #fff;
  background: url('/src/assets/images/home-container/configurable/confirmTitle.png') no-repeat;
  background-size: 100% 40%;
  width: 70%;
  margin: 30px auto 0; /* 改为 margin: 30px auto 0 */
}

.dialog-header h3 {
  margin: 5px;
  font-size: 18px;
  color: #fff;
  margin-top: -35px;
  font-family: 'douyuFont';
}
.close-btn :hover {
  cursor: pointer;
}

/* 内容区域 */
.dialog-content {
  padding: 24px;
}

.input-wrapper {
  position: relative;
  margin-bottom: 8px;
}

.input-wrapper input {
  width: 100%;
  padding: 12px 40px 12px 12px;
  background: url('/@/assets/images/home-container/configurable/input-success.png') no-repeat;
  background-size: 100% 100%;
  border-radius: 8px;
  border: none;
  font-size: 16px;
  transition: all 0.3s;
  box-sizing: border-box;
  color: #fff;
  height: 53px;
}

.input-wrapper input:focus {
  outline: none;
}

.input-wrapper.error input {
  background: url('/@/assets/images/home-container/configurable/input-error.png') no-repeat;
  background-size: 100% 100%;
}

.toggle-password {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
  color: #999 !important;
  font-size: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.toggle-password:hover {
  color: #666;
}

.error-message {
  color: #e90203;
  font-size: 16px;
  margin: 4px 0 0 0;
  min-height: 18px;
  text-align: center;
}

.forgot-password {
  display: inline-block;
  margin-top: 12px;
  color: #409eff;
  font-size: 14px;
  text-decoration: none;
}

.forgot-password:hover {
  text-decoration: underline;
}

/* 底部按钮 */
/* 调整底部按钮位置 */
.dialog-footer {
  position: absolute;
  bottom: 30px;
  left: 50%;
  transform: translateX(-50%);
  width: auto;
  display: flex;
  gap: 10px;
}

.btn {
  flex: 1;
  cursor: pointer;
  transition: all 0.3s;
  border-radius: 5px;
  height: 40px;
}

.btn.cancel {
  width: 100px;
  background: none;
  color: #fff;
  border: 2px solid #1b6e96;
}

.btn.confirm {
  width: 100px;
  margin-left: 10px;
  background-color: #1da2a9;
  border: 2px solid #2effee;
  color: #fff;
}

.btn.confirm:disabled {
  background-color: #a0cfff;
  cursor: not-allowed;
}
</style>