cwg-confirm-popup.vue 2.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100
  1. <template>
  2. <cwg-popup v-model:visible="visible" type="center" :mask-click="false" :show-footers="true">
  3. <view class="popup-content">
  4. <view class="confirm-title">{{ title }}</view>
  5. <view class="confirm-content">{{ content }}</view>
  6. </view>
  7. <template #footer>
  8. <button @click="handleCancel">{{ cancelText }}</button>
  9. <button type="primary" @click="handleConfirm">{{ confirmText }}</button>
  10. </template>
  11. </cwg-popup>
  12. </template>
  13. <script setup>
  14. import { ref, onMounted, onUnmounted } from 'vue'
  15. import { useI18n } from 'vue-i18n'
  16. const { t } = useI18n()
  17. const visible = ref(false)
  18. let currentEventId = null
  19. let isShowing = false // 单例锁,永远只弹一个
  20. const title = ref('')
  21. const content = ref('')
  22. const confirmText = ref('')
  23. const cancelText = ref('')
  24. // 显示弹窗
  25. const handleShowConfirm = (options) => {
  26. if (isShowing || visible.value) return
  27. isShowing = true
  28. currentEventId = options.eventId
  29. title.value = options.title || t('Msg.SystemPrompt')
  30. content.value = options.content || ''
  31. confirmText.value = options.confirmText || t('Btn.Confirm')
  32. cancelText.value = options.cancelText || t('Btn.Cancel')
  33. visible.value = true
  34. }
  35. // 关闭并返回结果 + 强制清空所有状态
  36. const close = (result) => {
  37. visible.value = false
  38. isShowing = false
  39. if (currentEventId) {
  40. uni.$emit(`confirmResult_${currentEventId}`, result)
  41. }
  42. // 🔥 强制清空,永不残留
  43. currentEventId = null
  44. title.value = ''
  45. content.value = ''
  46. confirmText.value = ''
  47. cancelText.value = ''
  48. }
  49. const handleConfirm = () => close(true)
  50. const handleCancel = () => close(false)
  51. onMounted(() => {
  52. uni.$on('showConfirm', handleShowConfirm)
  53. })
  54. onUnmounted(() => {
  55. uni.$off('showConfirm', handleShowConfirm)
  56. visible.value = false
  57. isShowing = false
  58. currentEventId = null
  59. })
  60. </script>
  61. <style scoped lang="scss">
  62. @import "@/uni.scss";
  63. :deep(.cwg-dialog) {
  64. width: px2rpx(500);
  65. background-color: #fff;
  66. border-radius: px2rpx(16);
  67. text-align: center;
  68. box-shadow: 0 px2rpx(10) px2rpx(20) rgba(0, 0, 0, 0.1);
  69. }
  70. .confirm-title {
  71. font-size: px2rpx(24);
  72. font-weight: 600;
  73. color: var(--bs-heading-color);
  74. margin-bottom: px2rpx(30);
  75. }
  76. .confirm-content {
  77. font-size: px2rpx(20);
  78. color: var(--bs-heading-color);
  79. margin-bottom: px2rpx(30);
  80. line-height: 1.5;
  81. word-break: break-word;
  82. }
  83. </style>