bandhuBuy-h5/src/components/DialogBox/DialogBox.vue

<script lang="ts" setup>
type DialogType = 'success' | 'error' | 'info'

interface Props {
  /** 是否显示对话框 */
  show?: boolean
  /** 对话框类型 */
  type?: DialogType
  /** 确认按钮文本 */
  confirmText?: string
  /** 取消按钮文本 */
  cancelText?: string
  /** 图标大小 */
  iconSize?: string
  /** 主要消息内容 */
  message?: string
  /** 提示信息 */
  tip?: string
  /** 是否显示确认按钮 */
  showConfirm?: boolean
  /** 是否显示取消按钮 */
  showCancel?: boolean
  /** 是否显示提示信息 */
  showTip?: boolean
  /** 点击遮罩是否关闭 */
  closeOnClickOverlay?: boolean
}

interface Emits {
  /** 更新显示状态 */
  (e: 'update:show', value: boolean): void
  /** 确认按钮点击事件 */
  (e: 'confirm'): void
  /** 取消按钮点击事件 */
  (e: 'cancel'): void
  /** 对话框关闭事件 */
  (e: 'close'): void
}

const props = withDefaults(defineProps<Props>(), {
  show: false,
  type: 'info',
  confirmText: '确认',
  cancelText: '取消',
  iconSize: '120rpx',
  message: '',
  tip: '',
  showConfirm: true,
  showCancel: false,
  showTip: false,
  closeOnClickOverlay: true,
})

const emit = defineEmits<Emits>()

// 根据类型获取图标路径
const iconSrc = computed(() => {
  const iconMap = {
    success: '/static/icons/icon-success.png',
    error: '/static/icons/icon-error.png',
    info: '/static/icons/icon-info.png',
  }
  return iconMap[props.type]
})

// 处理遮罩点击
function handleOverlayClick() {
  if (props.closeOnClickOverlay) {
    handleClose()
  }
}

// 处理关闭
function handleClose() {
  emit('update:show', false)
  emit('close')
}

// 处理确认按钮点击
function handleConfirm() {
  emit('confirm')
  handleClose()
}

// 处理取消按钮点击
function handleCancel() {
  emit('cancel')
  handleClose()
}
</script>

<template>
  <wd-overlay :show="props.show" @click="handleOverlayClick">
    <view class="wrapper">
      <view class="rounded-24rpx bg-white p-40rpx text-center" @click.stop>
        <image
          :src="iconSrc"
          :style="{ width: props.iconSize, height: props.iconSize }"
        />
        <view class="pb-58rpx pt-34rpx text-center text-32rpx">
          {{ props.message }}
        </view>

        <!-- 按钮区域 -->
        <view class="button-container">
          <!-- 只有确认按钮时居中显示 -->
          <wd-button
            v-if="props.showConfirm && !props.showCancel"
            plain
            block
            @click="handleConfirm"
          >
            {{ props.confirmText }}
          </wd-button>

          <!-- 有取消按钮时并排显示 -->
          <template v-if="props.showConfirm && props.showCancel">
            <wd-button
              class="button-half"
              plain
              block
              custom-class="text-#333! border-#333!"
              @click="handleCancel"
            >
              {{ props.cancelText }}
            </wd-button>
            <wd-button
              plain
              block
              class="button-half"
              type="primary"
              @click="handleConfirm"
            >
              {{ props.confirmText }}
            </wd-button>
          </template>
        </view>

        <view v-if="props.showTip && props.tip" class="mt-20rpx text-24rpx text-gray-500">
          {{ props.tip }}
        </view>
      </view>
    </view>
  </wd-overlay>
</template>

<style lang="scss" scoped>
.wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  padding: 0 24rpx;
}

.button-container {
  display: flex;
  justify-content: center;
  gap: 20rpx;

  .button-half {
    flex: 1;
  }
}
</style>