hcp_h5/src/components/ModernDialog.vue

<template>
  <van-overlay :show="show" class="custom-overlay" @click="handleClose" />

  <transition name="dialog-pop">
    <div v-if="show" class="modern-dialog">
      <div class="dialog-content">
        <div class="dialog-title">{{ title }}</div>
        <div class="dialog-message">{{ message }}</div>

        <!-- 按钮区：支持 1 或 2 个按钮 -->
        <div
          class="dialog-actions"
          :class="{
            two: hasConfirm && hasCancel,
            one: hasConfirm !== hasCancel,
          }"
        >
          <!-- 失败/取消：无背景，边框+文字色由 color 控制 -->
          <van-button
            v-if="hasCancel"
            plain
            class="btn btn--fail"
            :color="cancelColor"
            round
            @click="handleCancel"
          >
            {{ cancelText }}
          </van-button>

          <!-- 成功/确定：填充背景，支持渐变 -->
          <van-button
            v-if="hasConfirm"
            type="primary"
            class="btn btn--success"
            :color="confirmColor"
            round
            @click="handleConfirm"
          >
            {{ confirmText }}
          </van-button>
        </div>
      </div>
    </div>
  </transition>
</template>

<script setup lang="ts">
import { computed } from 'vue'

const props = defineProps({
  show: { type: Boolean, required: true },
  title: { type: String, default: '提示' },
  message: { type: String, default: '' },

  /** 成功按钮（右侧） */
  confirmText: { type: String, default: '' },
  /** 失败按钮（左侧），无背景 */
  cancelText: { type: String, default: '' },

  /** 成功按钮背景色（可用渐变） */
  confirmColor: {
    type: String,
    default: 'linear-gradient(90deg, #ff7a00, #ffa94d)',
  },
  /** 失败按钮文字/边框颜色（plain 模式下作为描边+文字色） */
  cancelColor: {
    type: String,
    default: '#fe783d',
  },

  /** 点击遮罩是否关闭 */
  closeOnClickOverlay: { type: Boolean, default: true },
})

const emit = defineEmits<{
  (e: 'update:show', v: boolean): void
  (e: 'confirm'): void
  (e: 'cancel'): void
  (e: 'close'): void
}>()

const hasConfirm = computed(() => !!props.confirmText)
const hasCancel = computed(() => !!props.cancelText)

const handleConfirm = () => emit('confirm')
const handleCancel = () => emit('cancel')
const handleClose = () => {
  if (props.closeOnClickOverlay) emit('update:show', false)
  emit('close')
}
</script>

<style scoped lang="scss">
.custom-overlay {
  backdrop-filter: blur(8px);
  background: rgba(0, 0, 0, 0.25);
  z-index: 9998;
  animation: fadeIn 0.3s ease;
}

.modern-dialog {
  position: fixed;
  inset: 50% auto auto 50%;
  transform: translate(-50%, -50%);
  z-index: 9999;
  width: 80vw;
  border-radius: 5vw;
  background: #fff;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.15);
  text-align: center;
  animation: dialogPop 0.28s ease-out;
  box-sizing: border-box;

  .dialog-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 6vw 5vw 5vw;
    gap: 5vw;
  }

  .dialog-title {
    font-size: 4.4vw;
    font-weight: 700;
    color: #222;
  }

  .dialog-message {
    font-size: 3.6vw;
    line-height: 1.7;
    color: #555;
    word-break: break-word;
  }

  /* 按钮区域布局 */
  .dialog-actions {
    width: 100%;
    padding: 0 5vw 2.5vw;
    box-sizing: border-box;
    display: grid;
    gap: 3vw;

    &.one {
      grid-template-columns: 1fr;

      .btn {
        height: 12vw;
        border-radius: 3vw;
        font-size: 4vw;
        font-weight: 600;
        letter-spacing: 0.2vw;
      }
    }

    &.two {
      grid-template-columns: 1fr 1fr;

      .btn {
        height: 12vw;
        border-radius: 3vw;
        font-size: 4vw;
        font-weight: 600;
        letter-spacing: 0.2vw;
      }

      /* 失败按钮：无背景（plain），加淡边框 */
      .btn--fail {
        /* 让边框略淡一些，视觉层次更好 */
        border-width: 1px;
      }
    }
  }
}

/* 过渡动画 */
.dialog-pop-enter-active,
.dialog-pop-leave-active {
  transition: all 0.25s ease;
}
.dialog-pop-enter-from,
.dialog-pop-leave-to {
  opacity: 0;
  transform: translate(-50%, -45%) scale(0.9);
}

@keyframes dialogPop {
  from {
    transform: translate(-50%, -45%) scale(0.9);
    opacity: 0;
  }
  to {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
  }
}
</style>