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

<template>
    <uni-popup ref="popupRef" type="center" @change="handlePopupChange" class="crm-popup" @maskClick="closeDialog"
        :isMaskClick="maskClick">
        <view class="cwg-dialog" :style="{ width: width }">
            <!-- 弹窗头部 -->
            <view class="dialog-header" v-if="title">
                <text class="dialog-title">{{ title || t('Tips.DeleteAccount') }}</text>

                <uni-icons class="dialog-close1 cursor-pointer" :data-tooltip="t('Btn.Close')" type="closeempty"
                    size="20" color="#999" @click="closeDialog" />
            </view>

            <!-- 弹窗内容 -->
            <view class="dialog-content">
                <slot />
            </view>
            <!-- 底部按钮区域 - 支持多种模式 -->
            <view class="dialog-footer" v-if="props.showFooters">
                <!--              底部-额外自定义插槽 -->
                <template v-if="slotName && slots[slotName]">
                    <slot :name="slotName" />
                </template>
                <!-- 自定义底部插槽 -->
                <template v-if="slots.footer">
                    <view class="btn-content">
                        <slot name="footer" />
                    </view>
                </template>

                <!-- 无按钮模式：只显示一条线或不显示任何内容 -->
                <template v-else-if="footerType === 'none'">
                    <!-- 不显示任何按钮，只留一个占位线（可选） -->
                    <view v-if="showFooterLine" class="footer-line"></view>
                </template>

                <!-- 单按钮模式 -->
                <template v-else-if="footerType === 'single'">
                    <view class="btn-content">
                        <button hover-class="" class="single-btn" :class="singleBtnType" @click="handleSingleBtnClick">
                            {{ singleBtnText || t('common.confirm') }}
                        </button>
                    </view>
                </template>

                <!-- 双按钮模式（默认） -->
                <template v-else>
                    <view class="btn-content">
                        <button hover-class="" class="cancel-btn" @click="closeDialog">
                            {{ cancelText || t('common.cancel') }}
                        </button>
                        <button hover-class="" class="confirm-btn" :class="confirmBtnType" @click="handleConfirm">
                            {{ confirmText || t('common.confirm') }}
                        </button>
                    </view>
                </template>
            </view>
        </view>
    </uni-popup>
</template>

<script setup>
import { ref, watch, computed, useSlots } from 'vue'
import { useI18n } from 'vue-i18n'

const { t } = useI18n()

const props = defineProps({
    // 是否显示弹窗
    visible: {
        type: Boolean,
        default: false
    },
    // 弹窗标题
    title: {
        type: String,
        default: ''
    },
    // 是否显示底部
    showFooters: {
        type: Boolean,
        default: true
    },
    // 底部按钮类型：double(双按钮), single(单按钮), none(无按钮)
    footerType: {
        type: String,
        default: 'double',
        validator: (value) => ['double', 'single', 'none'].includes(value)
    },
    // 单按钮文本
    singleBtnText: {
        type: String,
        default: ''
    },
    // 单按钮类型：primary, danger, default
    singleBtnType: {
        type: String,
        default: 'primary'
    },
    // 取消按钮文本
    cancelText: {
        type: String,
        default: ''
    },
    // 确认按钮文本
    confirmText: {
        type: String,
        default: ''
    },
    // 确认按钮类型：primary, danger
    confirmBtnType: {
        type: String,
        default: 'primary'
    },
    // 是否显示底部线条（当footerType为none时）
    showFooterLine: {
        type: Boolean,
        default: false
    },
    // 加载状态
    loading: {
        type: Boolean,
        default: false
    },
    // 自定义插槽名称
    slotName: {
        type: String,
        default: ''
    },
    // 内容宽度
    width: {
        type: String,
        default: '600px'
    },
    // 遮罩层点击
    maskClick: {
        type: Boolean,
        default: true
    },
    // 分页信息（传递给父组件使用）
    pagerInfo: {
        type: Object,
        default: () => ({
            current: 1,
            row: 10,
            pageTotal: 0,
            rowTotal: 0
        })
    }
})
const emit = defineEmits(['update:visible', 'confirm', 'close', 'single-click'])

// 弹窗引用
const popupRef = ref(null)
const slots = useSlots()

// 监听 visible 变化
watch(() => props.visible, (val) => {
    if (val) {
        popupRef.value?.open()
    } else {
        popupRef.value?.close()
    }
}, { immediate: true })

// 弹窗状态变化
const handlePopupChange = (e) => {
    if (!e.show) {
        setTimeout(() => {
            emit('close')
        }, 300)
    }
}

// 关闭弹窗
const closeDialog = () => {
    popupRef.value?.close()
    emit('update:visible', false)
}

// 确认操作
const handleConfirm = () => {
    emit('confirm')
}

// 单按钮点击
const handleSingleBtnClick = () => {
    emit('single-click')
}

// 暴露方法给父组件
defineExpose({
    close: closeDialog,
    open: () => popupRef.value?.open()
})
</script>

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

.crm-popup {
    z-index: 999;
}

.cwg-dialog {
    background-color: rgba(var(--bs-body-bg-rgb), 1) !important;
    border-radius: px2rpx(8);

    overflow: hidden;
    width: px2rpx(600);
    max-width: 90vw;
    color: var(--bs-emphasis-color) !important;
}



.dialog-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: px2rpx(30) px2rpx(30) px2rpx(20);
    border-bottom: 1px solid var(--bs-border-color);

    .dialog-title {
        font-size: px2rpx(20);
        font-weight: 600;
        color: var(--bs-emphasis-color);
    }

    .dialog-close1 {
        width: px2rpx(36);
        height: px2rpx(36);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: px2rpx(32);
        color: var(--bs-emphasis-color);
        cursor: pointer;
        transition: all 0.3s;
        border-radius: 50%;
        box-sizing: border-box;
        padding: 0;
        background: rgba(255, 255, 255, 0.1);

        &:hover {
            background: rgba(255, 255, 255, 0.2);
            transform: rotate(90deg);
        }

        &:active {
            transform: rotate(90deg) scale(0.9);
        }
    }
}

.dialog-content {
    padding: px2rpx(20) px2rpx(30);
    max-height: 60vh;
    overflow-y: auto;

    // 自定义滚动条样式
    &::-webkit-scrollbar {
        width: px2rpx(6);
    }

    &::-webkit-scrollbar-thumb {
        background-color: #ddd;
        border-radius: px2rpx(3);
    }
}

@media screen and (max-width: 768px) {
    :deep(.cwg-dialog) {
        width: px2rpx(600) !important;
    }

    .dialog-content {
        padding: px2rpx(20) px2rpx(20);
        max-height: 60vh;
        overflow-y: auto;

        // 自定义滚动条样式
        &::-webkit-scrollbar {
            width: px2rpx(6);
        }

        &::-webkit-scrollbar-thumb {
            background-color: #ddd;
            border-radius: px2rpx(3);
        }
    }
}
</style>