gypsy-crm-frontend-vu/components/cwg-confirm-popup.vue

<template>
    <cwg-popup v-model:visible="visible" type="center" :mask-click="false" :show-footers="true">
        <view class="popup-content">
            <view class="confirm-title">{{ title }}</view>
            <view class="confirm-content">{{ content }}</view>
        </view>
        <template #footer>
            <button @click="cancel">{{ cancelText }}</button>
            <button type="primary" @click="confirm">{{ confirmText }}</button>
        </template>
    </cwg-popup>
</template>
<script setup>
import { ref, onMounted, onUnmounted, watch, computed } from 'vue'
import { useI18n } from 'vue-i18n';
const { t } = useI18n();
const title = ref(t('Msg.SystemPrompt'))
const content = ref('')
const confirmText = ref(t('Btn.Confirm'))
const cancelText = ref(t('Btn.Cancel'))
let currentEventId = null

const handleShowConfirm = (options) => {
    title.value = options.title || title.value
    content.value = options.content || ''
    confirmText.value = options.confirmText || t('Btn.Confirm')
    cancelText.value = options.cancelText || t('Btn.Cancel')
    currentEventId = options.eventId
    visible.value = true
}

const closeAndResult = (result) => {
    visible.value = false
    if (currentEventId) {
        uni.$emit(`confirmResult_${currentEventId}`, result)
        currentEventId = null
    }
}

const confirm = () => closeAndResult(true)
const cancel = () => closeAndResult(false)

onMounted(() => {
    uni.$on('showConfirm', handleShowConfirm)
})
onUnmounted(() => {
    uni.$off('showConfirm', handleShowConfirm)
})
const visible = ref(false)
watch(visible, (value) => {
    if (!value) closeAndResult(false)
})
</script>

<style scoped lang="scss">
@import "@/uni.scss";
:deep(.cwg-dialog) {
    width: px2rpx(500);
    background-color: #fff;
    border-radius: px2rpx(16);
    text-align: center;
    box-shadow: 0 px2rpx(10) px2rpx(20) rgba(0, 0, 0, 0.1);
}
.confirm-title {
    font-size: px2rpx(24);
    font-weight: 600;
    color: #333;
    margin-bottom: px2rpx(30);
}

.confirm-content {
    font-size: px2rpx(20);
    color: #666;
    margin-bottom: px2rpx(30);
    line-height: 1.5;
    word-break: break-word;
}

</style>