gypsy-crm-frontend-vu/pages/customer/components/ClausePopup.vue

<template>
    <cwg-popup v-model:visible="visible" type="center" :mask-click="false" :showFooters="true"
        custom-class="clause-popup">
        <view class="popup-content">
            <scroll-view scroll-y class="clause-content" :style="{ height: px2rpx(400) + 'px' }">
                <view class="content" :style="{ lineHeight: 1.5, textAlign: 'left' }" id="Agreement"
                    v-if="country == 'CN'">
                    <view class="list" v-if="isGuoQin">
                        <view class="list-item" v-t="'news_add_field.CWGActivity_1.item1'"></view>
                        <view class="list-item" v-t="'news_add_field.CWGActivity_1.item2'"></view>
                        <view class="list-item" v-t="'news_add_field.CWGActivity_1.item3'"></view>
                        <view class="list-item">
                            <view class="list sub-list">
                                <view class="list-item" v-t="'news_add_field.CWGActivity_1.item31'"></view>
                                <view class="list-item" v-t="'news_add_field.CWGActivity_1.item32'"></view>
                            </view>
                        </view>
                        <view class="list-item" v-t="'news_add_field.CWGActivity_1.item4'"></view>
                        <view class="list-item" v-t="'news_add_field.CWGActivity_1.item5'"></view>
                        <view class="list-item">
                            <view class="list sub-list">
                                <view class="list-item" v-t="'news_add_field.CWGActivity_1.item51'"></view>
                            </view>
                        </view>
                        <view class="list-item" v-t="'news_add_field.CWGActivity_1.item6'"></view>
                        <view class="list-item" v-t="'news_add_field.CWGActivity_1.item7'"></view>
                        <view class="list-item" v-t="'news_add_field.CWGActivity_1.item8'"></view>
                        <view class="list-item" v-t="'news_add_field.CWGActivity_1.item9_1'"></view>
                        <view class="list-item" v-t="'news_add_field.CWGActivity_1.item9'"></view>
                        <view class="list-item" v-t="'news_add_field.CWGActivity_1.item10'"></view>
                        <view class="list-item" v-t="'news_add_field.CWGActivity_1.item11'"></view>
                        <view class="list-item" v-t="'news_add_field.CWGActivity_1.item12'"></view>
                    </view>
                    <view class="list" v-else>
                        <view class="list-item" v-t="'news_add_field.CWGActivity.item1'"></view>
                        <view class="list-item" v-t="'news_add_field.CWGActivity.item2'"></view>
                        <view class="list-item" v-t="'news_add_field.CWGActivity.item3'"></view>
                        <view class="list-item" v-t="'news_add_field.CWGActivity.item4'"></view>
                        <view class="list-item" v-t="'news_add_field.CWGActivity.item5'"></view>
                        <view class="list-item" v-t="'news_add_field.CWGActivity.item6'"></view>
                        <view class="list-item" v-t="'news_add_field.CWGActivity.item7'"></view>
                        <view class="list-item" v-t="'news_add_field.CWGActivity.item8'"></view>
                        <view class="list-item" v-t="'news_add_field.CWGActivity.item9_1'"></view>
                        <view class="list-item" v-t="'news_add_field.CWGActivity.item9'"></view>
                        <view class="list-item" v-t="'news_add_field.CWGActivity.item10'"></view>
                        <view class="list-item" v-t="'news_add_field.CWGActivity.item11'"></view>
                        <view class="list-item" v-t="'news_add_field.CWGActivity.item11_1'"></view>
                        <view class="list-item">
                            <view class="list sub-list">
                                <view class="list-item" v-t="'news_add_field.CWGActivity.item111'"></view>
                                <view class="list-item" v-t="'news_add_field.CWGActivity.item112'"></view>
                                <view class="list-item" v-t="'news_add_field.CWGActivity.item113'"></view>
                                <view class="list-item" v-t="'news_add_field.CWGActivity.item114'"></view>
                            </view>
                        </view>
                        <view class="list-item" v-t="'news_add_field.CWGActivity.item12'"></view>
                        <view class="list-item" v-t="'news_add_field.CWGActivity.item13'"></view>
                    </view>
                </view>
                <view class="content" :style="{ lineHeight: 1.5, textAlign: 'left' }" id="Agreement"
                    v-if="country != 'CN'">
                    <view class="list">
                        <view class="list-item" v-t="'news_add_field.CWGActivity_1.item1'"></view>
                        <view class="list-item" v-t="'news_add_field.CWGActivity_1.item2'"></view>
                        <view class="list-item" v-t="'news_add_field.CWGActivity_1.item3'"></view>
                        <view class="list-item">
                            <view class="list sub-list">
                                <view class="list-item" v-t="'news_add_field.CWGActivity_1.item31'"></view>
                                <view class="list-item" v-t="'news_add_field.CWGActivity_1.item32'"></view>
                            </view>
                        </view>
                        <view class="list-item" v-t="'news_add_field.CWGActivity_1.item4'"></view>
                        <view class="list-item" v-t="'news_add_field.CWGActivity_1.item5'"></view>
                        <view class="list-item">
                            <view class="list sub-list">
                                <view class="list-item" v-t="'news_add_field.CWGActivity_1.item51'"></view>
                            </view>
                        </view>
                        <view class="list-item" v-t="'news_add_field.CWGActivity_1.item6'"></view>
                        <view class="list-item" v-t="'news_add_field.CWGActivity_1.item7'"></view>
                        <view class="list-item" v-t="'news_add_field.CWGActivity_1.item8'"></view>
                        <view class="list-item" v-t="'news_add_field.CWGActivity_1.item9_1'"></view>
                        <view class="list-item" v-t="'news_add_field.CWGActivity_1.item9'"></view>
                        <view class="list-item" v-t="'news_add_field.CWGActivity_1.item10'"></view>
                        <view class="list-item" v-t="'news_add_field.CWGActivity_1.item11'"></view>
                        <view class="list-item" v-t="'news_add_field.CWGActivity_1.item12'"></view>
                        <view class="list-item" v-t="'news_add_field.CWGActivity_1.item13'"></view>
                    </view>
                </view>
            </scroll-view>
        </view>
        <template #footer>
            <button @click="close">{{ t('Btn.Cancel') }}</button>
            <button type="primary" @click="close">{{ t('Btn.Confirm') }}</button>
        </template>
    </cwg-popup>
</template>

<script setup>
import { computed } from 'vue';
import { useI18n } from 'vue-i18n';
import { useUserStore } from '@/stores/user';
// 用户信息
const userStore = useUserStore()
const userInfo = computed(() => userStore.userInfo)
const props = defineProps({
    visible: { type: Boolean, default: false },
    title: String,
    content: { type: String, default: '' }, // HTML
    items: { type: Array, default: () => [] },
    isGuoQin: { type: Boolean, default: false }
});
const emit = defineEmits(['update:visible']);

const { t } = useI18n();

const country = computed(() => {
    return userInfo.value.customInfo.country;
});
const visible = computed({
    get: () => props.visible,
    set: (val) => emit('update:visible', val)
});
const close = () => { visible.value = false; };
</script>

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

.clause-popup {
    width: 90%;
    max-width: 800px;

    .clause-content {
        padding: px2rpx(20);
        height: px2rpx(400);
        overflow-y: auto;
        text-align: left;
        line-height: 1.6;

        .list {
            .list-item {
                margin-bottom: px2rpx(8);

                .sub-list {
                    margin-left: px2rpx(20);

                    .list-item {
                        margin-bottom: px2rpx(6);
                    }
                }
            }
        }
    }
}
</style>