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

<template>
    <cwg-popup v-model:visible="visible" type="center" :mask-click="false" :show-footers="true">
        <view class="popup-content" v-if="isSuccess">
            <view class="icon"><cwg-icon name="verified" :size="80" color="#009933" /></view>
            <view class="des1">{{ t('ApplicationDialog.Des1') }}</view>
        </view>
        <view class="popup-content" v-else>
            <view class="icon"><cwg-icon name="gy" :size="80" color="#eb3f57" /></view>
            <view class="des1">{{ responseMessage }}</view>
        </view>
        <template #footer>
            <button type="primary" @click="closeDia">{{ t('Btn.Confirm') }}</button>
            <button @click="closeDia">{{ t('Btn.Cancel') }}</button>
        </template>
    </cwg-popup>
</template>

<script setup>
import { computed } from 'vue';
import { useI18n } from 'vue-i18n';

const props = defineProps({
    visible: {
        type: Boolean,
        default: false
    },
    isSuccess: {
        type: Boolean,
        default: true
    },
    responseMessage: {
        type: String,
        default: ''
    }
});

const emit = defineEmits(['update:visible', 'confirm']);

const { t } = useI18n();

// Watch for changes in visible prop and emit update event
const visible = computed({
    get: () => props.visible,
    set: (value) => emit('update:visible', value)
});
const closeDia = () => {
    visible.value = false;
    emit('confirm');
}
</script>

<style lang="scss" scoped>
.clause-popup {
    width: 90%;
    max-width: 800px;
    max-height: 80vh;
    overflow: hidden;

    .clause-content {
        padding: 20px;

        scroll-view {
            width: 100%;

            h4 {
                font-size: 16px;
                font-weight: 600;
                color: #303133;
                margin-bottom: 12px;
            }

            ul {
                margin-bottom: 20px;

                li {
                    margin-bottom: 8px;
                    line-height: 1.5;
                    color: #606266;
                }
            }

            table {
                margin: 16px 0;
                width: 100%;
                border-collapse: collapse;

                th,
                td {
                    padding: 10px;
                    text-align: center;
                    border: 1px solid #dcdfe6;
                    font-size: 14px;
                }

                th {
                    background: #f5f7fa;
                    font-weight: 600;
                    color: #303133;
                }

                td {
                    color: #606266;
                }
            }

            // Handle v-html content
            div {
                line-height: 1.6;
                color: #606266;

                p {
                    margin-bottom: 12px;
                }

                h1,
                h2,
                h3,
                h4,
                h5,
                h6 {
                    margin: 16px 0 8px 0;
                    color: #303133;
                }

                ul,
                ol {
                    margin-left: 20px;
                    margin-bottom: 12px;
                }

                li {
                    margin-bottom: 4px;
                }
            }
        }
    }

    .clause-footer {
        padding: 16px 20px;
        border-top: 1px solid #e4e7ed;
        display: flex;
        justify-content: center;

        button {
            min-width: 120px;
            padding: 10px 20px;
            border-radius: 4px;
        }
    }
}

// Responsive styles
@media (max-width: 768px) {
    .clause-popup {
        width: 95%;
        max-height: 85vh;

        .clause-header {
            padding: 12px 16px;

            .clause-title {
                font-size: 16px;
            }
        }

        .clause-content {
            padding: 16px;

            scroll-view {
                height: 50vh;

                h4 {
                    font-size: 14px;
                }

                table {

                    th,
                    td {
                        padding: 8px;
                        font-size: 12px;
                    }
                }
            }
        }

        .clause-footer {
            padding: 12px 16px;

            button {
                min-width: 100px;
                padding: 8px 16px;
            }
        }
    }
}
</style>