自定义警告弹窗

<template>
  <view class="custom-warn-dialog">
    <uni-popup ref="warnDialog_ref" :mask-click="false" background-color="#fff" border-radius="20rpx">
      <view class="popup-content">
        <view class="text">{{r_title}}</view>
        <view class="border"></view>
        <view class="popup-action">
          <view @click="onCancel" class="action-item active-dark" style="color: #333;">{{r_cancelText}}</view>
          <view class="separator"></view>
          <view @click="onConfirm" class="action-item active-dark" style="color:#576B95;">{{r_confirmText}}</view>
        </view>
      </view>
    </uni-popup>
  </view>
</template>
<script setup>
import {ref} from 'vue'
const props = defineProps({
  title: {
    type: String,
    default: ''
  },
  cancelText: {
    type: String,
    default: '否'
  },
  confirmText: {
    type: String,
    default: '是'
  }
})
const warnDialog_ref = ref()
const r_title = ref(props.title)
const r_confirmText = ref(props.confirmText)
const r_cancelText = ref(props.cancelText)
let resolveCallback = null
let successCallback = null

function debounce(func, wait = 0) {
  let timeout
  return function (event) {
    clearTimeout(timeout)
    timeout = setTimeout(() => {
      func.call(this, event)
    }, wait)
  }
}

// 打开弹窗
const openPopup = () => {
  warnDialog_ref.value.open()
}

// 关闭弹窗
const closePopup = () => {
  warnDialog_ref.value.close()
}

// 确认操作
const onConfirm = () => {
  warnDialog_ref.value.close()
  callback(true)

}

// 取消操作
const onCancel = () => {
  warnDialog_ref.value.close()
  callback(false)
}

const callback = debounce(function (state) {
  if (resolveCallback) resolveCallback({ confirm: state })
  if (successCallback) successCallback({ confirm: state })
}, 500)

// 显示弹窗
const showWarnDlg = (options) => {
  return new Promise((resolve, reject) => {
    resolveCallback = resolve
    successCallback = options.success || null
    // 设置弹窗的文本和按钮文本
    r_title.value = options.title || props.title
    r_confirmText.value = options.confirmText || props.confirmText
    r_cancelText.value = options.cancelText || props.cancelText
    openPopup()
  })
}

defineExpose({
  openPopup,
  closePopup,
  showWarnDlg
})
</script>
<style scoped lang="scss">
.custom-warn-dialog {
  .popup-content {
    height: 336rpx;
    width: 640rpx;
    background-color: #fff;
    border-radius: 20rpx;

    .text {
      display: flex;
      justify-content: center;
      align-items: center;
      text-align: center;
      margin: 0 48rpx;
      height: 224rpx;
      font-weight: bold;
      font-size: 34rpx;
      color: #090909;
    }

    .border {
      width: 100%;
      margin: 0 auto;
      height: 1rpx;
      background-color: rgba(0, 0, 0, 0.1);
    }

    .popup-action {
      display: flex;
      align-items: center;
      height: 111rpx;

      .action-item {
        flex: 1;
        height: 100%;
        line-height: 111rpx;
        text-align: center;
        font-size: 32rpx;
        font-weight: bold;
      }

      .separator {
        width: 1rpx;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.1);
      }
    }
  }
}

</style>

<warn-dialog ref="warn_dialog_ref" />

warn_dialog_ref.value.showWarnDlg({
          title: '取消订单',
          confirmText: "是",
          cancelText: "否",
          success: function (res) {
            if (res.confirm) {
              console.log('点击了确认==')
            } else  {
              console.log('取消')
            }
          }
        })