gypsy-crm-frontend-vu/pages/ib/components/BonusAgreementPopup.vue

<template>
    <cwg-popup v-model:visible="visible" type="center" :title="title" :mask-click="false" :showFooters="false">
        <view class="popup-content clause-popup">
            <view class="clause-content" id="Agreement">
                <scroll-view scroll-y="true" style="height: 60vh;">
                    <view v-if="type === 'nzTwo'">
                        <h4>{{ t('news_add_field1.activitiesNZTwo.item8') }}{{ tableData4Two.applicationStartTime }} -
                            {{ tableData4Two.applicationEndTime }}</h4>
                        <h4 style="margin-top: 20px">{{ t('news_add_field1.activitiesNZTwo.item10') }}</h4>
                        <ul style="margin-left: 15px; font-size: 14px">
                            <li>{{ t('news_add_field1.activitiesNZTwo.item11') }}</li>
                            <li>{{ t('news_add_field1.activitiesNZTwo.item12') }}</li>
                            <li>{{ t('news_add_field1.activitiesNZTwo.item13') }}</li>
                            <li>{{ t('news_add_field1.activitiesNZTwo.item14') }}</li>
                            <li v-t="'news_add_field1.activitiesNZTwo.item15'"></li>
                            <li v-t="'news_add_field1.activitiesNZTwo.item16'"></li>
                            <table class="nz_table" border="1" cellpadding="10" cellspacing="0" width="100%">
                                <tr>
                                    <th v-t="'news_add_field1.activitiesNZTwo.item31'"></th>
                                    <th v-t="'news_add_field1.activitiesNZTwo.item41'"></th>
                                    <th v-t="'news_add_field1.activitiesNZTwo.item51'"></th>
                                    <th v-t="'news_add_field1.activitiesNZTwo.item61'"></th>
                                    <th v-t="'news_add_field1.activitiesNZTwo.item71'"></th>
                                    <th v-t="'news_add_field1.activitiesNZTwo.item81'"></th>
                                    <th v-t="'news_add_field1.activitiesNZTwo.item91'"></th>
                                </tr>
                                <tr>
                                    <td v-t="'news_add_field1.activitiesNZTwo.item32'"></td>
                                    <td v-t="'news_add_field1.activitiesNZTwo.item42'"></td>
                                    <td v-t="'news_add_field1.activitiesNZTwo.item52'"></td>
                                    <td v-t="'news_add_field1.activitiesNZTwo.item62'"></td>
                                    <td v-t="'news_add_field1.activitiesNZTwo.item72'"></td>
                                    <td v-t="'news_add_field1.activitiesNZTwo.item82'"></td>
                                    <td v-t="'news_add_field1.activitiesNZTwo.item92'"></td>
                                </tr>
                                <tr>
                                    <td v-t="'news_add_field1.activitiesNZTwo.item33'"></td>
                                    <td v-t="'news_add_field1.activitiesNZTwo.item43'"></td>
                                    <td>
                                        <span style="color: #f56c6c"
                                            v-t="'news_add_field1.activitiesNZTwo.item53'"></span>
                                    </td>
                                    <td v-t="'news_add_field1.activitiesNZTwo.item63'"></td>
                                    <td v-t="'news_add_field1.activitiesNZTwo.item73'"></td>
                                    <td v-t="'news_add_field1.activitiesNZTwo.item83'"></td>
                                    <td v-t="'news_add_field1.activitiesNZTwo.item93'"></td>
                                </tr>
                                <tr>
                                    <td v-t="'news_add_field1.activitiesNZTwo.item34'"></td>
                                    <td v-t="'news_add_field1.activitiesNZTwo.item44'"></td>
                                    <td v-t="'news_add_field1.activitiesNZTwo.item54'"></td>
                                    <td v-t="'news_add_field1.activitiesNZTwo.item64'"></td>
                                    <td v-t="'news_add_field1.activitiesNZTwo.item74'"></td>
                                    <td v-t="'news_add_field1.activitiesNZTwo.item84'"></td>
                                    <td v-t="'news_add_field1.activitiesNZTwo.item94'"></td>
                                </tr>
                                <tr>
                                    <td v-t="'news_add_field1.activitiesNZTwo.item35'"></td>
                                    <td v-t="'news_add_field1.activitiesNZTwo.item45'"></td>
                                    <td v-t="'news_add_field1.activitiesNZTwo.item55'"></td>
                                    <td v-t="'news_add_field1.activitiesNZTwo.item65'"></td>
                                    <td v-t="'news_add_field1.activitiesNZTwo.item75'"></td>
                                    <td v-t="'news_add_field1.activitiesNZTwo.item85'"></td>
                                    <td v-t="'news_add_field1.activitiesNZTwo.item95'"></td>
                                </tr>
                            </table>
                            <li v-t="'news_add_field1.activitiesNZTwo.item17'"></li>
                            <li v-t="'news_add_field1.activitiesNZTwo.item18'"></li>
                            <li v-t="'news_add_field1.activitiesNZTwo.item19'"></li>
                            <li v-t="'news_add_field1.activitiesNZTwo.item20'"></li>
                            <li v-t="'news_add_field1.activitiesNZTwo.item21'"></li>
                        </ul>
                    </view>
                    <view v-else-if="type === 'newList'">
                        <div v-html="content"></div>
                    </view>
                </scroll-view>
            </view>
            <template #footer>
                <button type="primary" @click="visible = false">{{ t('Btn.Confirm') }}</button>
            </template>
        </view>
    </cwg-popup>
</template>

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

const props = defineProps({
    visible: {
        type: Boolean,
        default: false
    },
    type: {
        type: String,
        default: 'nzTwo',
        validator: (value) => ['nzTwo', 'newList'].includes(value)
    },
    title: {
        type: String,
        default: ''
    },
    tableData4Two: {
        type: Object,
        default: () => ({})
    },
    content: {
        type: String,
        default: ''
    }
});

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

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