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

<template>
    <uni-popup ref="popup" type="center" :is-mask-click="false" @change="onChange">
        <view class="confirm-popup">
            <view class="confirm-title">{{ title }}</view>
            <view class="confirm-content">{{ content }}</view>
            <view class="confirm-buttons">
                <button class="confirm-btn cancel" @click="cancel">{{ cancelText }}</button>
                <button class="confirm-btn confirm" @click="confirm">{{ confirmText }}</button>
            </view>
        </view>
    </uni-popup>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue'
const popup = ref(null)
const title = ref('提示')
const content = ref('')
const confirmText = ref('确定')
const cancelText = ref('取消')
let currentEventId = null

const handleShowConfirm = (options) => {
    title.value = options.title || '提示'
    content.value = options.content || ''
    confirmText.value = options.confirmText || '确定'
    cancelText.value = options.cancelText || '取消'
    currentEventId = options.eventId
    popup.value?.open()
}

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

const confirm = () => closeAndResult(true)
const cancel = () => closeAndResult(false)
const onChange = (e) => {
    if (e.type === 'close') closeAndResult(false)
}

onMounted(() => {
    uni.$on('showConfirm', handleShowConfirm)
})
onUnmounted(() => {
    uni.$off('showConfirm', handleShowConfirm)
})
</script>

<style scoped lang="scss">
@import "@/uni.scss";

.confirm-popup {
    width: px2rpx(500);
    background-color: #fff;
    border-radius: px2rpx(16);
    padding: px2rpx(20) px2rpx(16);
    text-align: center;
    box-shadow: 0 px2rpx(10) px2rpx(20) rgba(0, 0, 0, 0.1);
    animation: popup-in 0.3s ease-out;
}

.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;
}

.confirm-buttons {
    display: flex;
    justify-content: space-between;
    gap: px2rpx(24);
}

.confirm-btn {
    flex: 1;
    height: px2rpx(40);
    line-height: px2rpx(40);
    border-radius: px2rpx(20);
    font-size: px2rpx(20);
    border: none;
    background-color: #f5f5f5;
    color: #666;
    font-weight: 500;
    transition: all 0.2s ease;
    -webkit-tap-highlight-color: transparent;
}

.confirm-btn:active {
    transform: scale(0.98);
    opacity: 0.9;
}

.confirm-btn.confirm {
    background-color: #2979ff;
    color: #fff;
}

.confirm-btn.confirm:active {
    background-color: #1a66e5;
}

.confirm-btn.cancel {
    background-color: #f5f5f5;
    color: #666;
}

.confirm-btn.cancel:active {
    background-color: #e6e6e6;
}

@keyframes popup-in {
    from {
        opacity: 0;
        transform: scale(0.9);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* 响应式调整 */
@media screen and (max-width: 750px) {
    .confirm-popup {
        width: 85vw;
        max-width: px2rpx(600);
        padding: px2rpx(32) px2rpx(24);
    }

    .confirm-title {
        font-size: px2rpx(24);
        margin-bottom: px2rpx(16);
    }

    .confirm-content {
        font-size: px2rpx(20);
        margin-bottom: px2rpx(32);
    }

    .confirm-btn {
        height: px2rpx(48);
        line-height: px2rpx(48);
        font-size: px2rpx(24);
    }
}
</style>