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

<template>
    <uni-popup ref="popupRef" type="center" @change="handlePopupChange">
        <view class="cwg-dialog">
            <!-- 弹窗头部 -->
            <view class="dialog-header">
                <text class="dialog-title">{{ title || t('Tips.DeleteAccount') }}</text>
                <uni-icons type="closeempty" size="20" color="#999" @click="closeDialog" />
            </view>

            <!-- 弹窗内容 -->
            <view class="dialog-content">
                <slot />
            </view>

            <!-- 底部按钮区域 - 支持多种模式 -->
            <view class="dialog-footer" v-if="showFooter">
                <!-- 自定义底部插槽 -->
                <template v-if="$slots.footer">
                    <slot name="footer" />
                </template>

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

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

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

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

const { t } = useI18n()

const props = defineProps({
    // 是否显示弹窗
    visible: {
        type: Boolean,
        default: false
    },
    // 弹窗标题
    title: {
        type: String,
        default: ''
    },
    // 是否显示底部
    showFooter: {
        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
    },
    // 分页信息（传递给父组件使用）
    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)

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

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

// 关闭弹窗
const closeDialog = () => {
    popupRef.value?.close()
}

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

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

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

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

.cwg-dialog {
    background-color: var(--color-white);
    border-radius: px2rpx(8);
    overflow: hidden;
    width: px2rpx(600);
    max-width: 90vw;
}

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


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

    .dialog-title {
        font-size: px2rpx(20);
        font-weight: 600;
        color: #333;
    }
}

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

.dialog-footer {
    padding: px2rpx(20) px2rpx(30) px2rpx(30);
    border-top: 1px solid #f0f0f0;

    // 双按钮模式
    &:not(:has(button:only-child)):has(button) {
        display: flex;
        justify-content: flex-end;
        gap: px2rpx(20);
    }

    // 单按钮模式
    &:has(button:only-child) {
        display: flex;
        justify-content: center;
    }

    .footer-line {
        height: 1px;
        background-color: #f0f0f0;
        margin: px2rpx(-20) 0 0;
    }

    button {
        min-width: px2rpx(120);
        height: px2rpx(40);
        border-radius: px2rpx(4);
        font-size: px2rpx(16);
        display: flex;
        align-items: center;
        justify-content: center;
        border: none;
        cursor: pointer;
        transition: all 0.3s ease;

        &:active {
            opacity: 0.8;
            transform: scale(0.98);
        }

        &:disabled {
            opacity: 0.5;
            cursor: not-allowed;
        }
    }

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

        &:active {
            background-color: #e8e8e8;
        }
    }

    .confirm-btn {
        &.primary {
            background-color: #007aff;
            color: #fff;

            &:active {
                background-color: #0056b3;
            }
        }

        &.danger {
            background-color: #ff6b6b;
            color: #fff;

            &:active {
                background-color: #ff5252;
            }
        }
    }

    .single-btn {
        min-width: px2rpx(200);

        &.primary {
            background-color: #007aff;
            color: #fff;
        }

        &.danger {
            background-color: #ff6b6b;
            color: #fff;
        }

        &.default {
            background-color: #f5f5f5;
            color: #666;
        }
    }
}
</style>