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

<template>
    <cwg-popup v-model:visible="visible" type="center" :mask-click="false" :showFooters="true"
        custom-class="clause-popup" :title="title">
        <view class="popup-content">
            <scroll-view scroll-y class="clause-content">
                <view>
                    <view v-if="country === 'CN'">
                        <view class="intro" v-t="'news_add_field1.deposit.item7'"></view>
                        <view class="list">
                            <view class="list-item">
                                <text v-t="'news_add_field1.deposit.item8'"></text>
                                <view class="sub-list">
                                    <view class="list-item" v-t="'news_add_field1.deposit.item9'"></view>
                                    <view class="list-item" v-t="'news_add_field1.deposit.item10'"></view>
                                </view>
                            </view>
                            <view class="list-item">
                                <text v-t="'news_add_field1.deposit.item11'"></text>
                                <view class="sub-list">
                                    <view class="list-item" v-t="'news_add_field1.deposit.item12'"></view>
                                    <view class="list-item" v-t="'news_add_field1.deposit.item13'"></view>
                                </view>
                            </view>
                            <view class="list-item">
                                <text v-t="'news_add_field1.deposit.item14'"></text>
                                <view class="sub-list">
                                    <view class="list-item" v-t="'news_add_field1.deposit.item15'"></view>
                                    <view class="list-item" v-t="'news_add_field1.deposit.item16'"></view>
                                    <view class="list-item" v-t="'news_add_field1.deposit.item17'"></view>
                                </view>
                            </view>
                            <view class="list-item">
                                <text v-t="'news_add_field1.deposit.item18'"></text>
                                <view class="sub-list">
                                    <view class="list-item" v-t="'news_add_field1.deposit.item19'"></view>
                                    <view class="list-item" v-t="'news_add_field1.deposit.item20'"></view>
                                    <view class="list-item" v-t="'news_add_field1.deposit.item21'"></view>
                                    <view class="list-item" v-t="'news_add_field1.deposit.item22'"></view>
                                </view>
                            </view>
                        </view>
                        <view class="h4" v-t="'news_add_field1.deposit.item23'"></view>
                        <view class="list">
                            <view class="list-item" v-t="'news_add_field1.deposit.item24'"></view>
                            <view class="list-item" v-t="'news_add_field1.deposit.item25'"></view>
                            <view class="list-item" v-t="'news_add_field1.deposit.item26'"></view>
                            <view class="list-item" v-t="'news_add_field1.deposit.item27'"></view>
                            <view class="list-item" v-t="'news_add_field1.deposit.item28'"></view>
                            <view class="list-item" v-t="'news_add_field1.deposit.item29'"></view>
                            <view class="list-item" v-t="'news_add_field1.deposit.item30'"></view>
                            <view class="list-item" v-t="'news_add_field1.deposit.item31'"></view>
                            <view class="list-item" v-t="'news_add_field1.deposit.item32'"></view>
                            <view class="list-item" v-t="'news_add_field1.deposit.item33'"></view>
                            <view class="list-item" v-t="'news_add_field1.deposit.item34'"></view>
                        </view>
                    </view>
                    <view v-else>
                        <view class="intro" v-t="'news_add_field1.deposit.item35'"></view>
                        <view class="list">
                            <view class="list-item">
                                <text v-t="'news_add_field1.deposit.item36'"></text>
                                <view class="sub-list">
                                    <view class="list-item" v-t="'news_add_field1.deposit.item37'"></view>
                                    <view class="list-item" v-t="'news_add_field1.deposit.item38'"></view>
                                </view>
                            </view>
                            <view class="list-item">
                                <text v-t="'news_add_field1.deposit.item39'"></text>
                                <view class="sub-list">
                                    <view class="list-item" v-t="'news_add_field1.deposit.item40'"></view>
                                    <view class="list-item" v-t="'news_add_field1.deposit.item41'"></view>
                                </view>
                            </view>
                            <view class="list-item">
                                <text v-t="'news_add_field1.deposit.item42'"></text>
                                <view class="sub-list">
                                    <view class="list-item" v-t="'news_add_field1.deposit.item43'"></view>
                                    <view class="list-item" v-t="'news_add_field1.deposit.item44'"></view>
                                    <view class="list-item" v-t="'news_add_field1.deposit.item45'"></view>
                                </view>
                            </view>
                            <view class="list-item">
                                <text v-t="'news_add_field1.deposit.item46'"></text>
                                <view class="sub-list">
                                    <view class="list-item" v-t="'news_add_field1.deposit.item47'"></view>
                                    <view class="list-item" v-t="'news_add_field1.deposit.item48'"></view>
                                    <view class="list-item" v-t="'news_add_field1.deposit.item49'"></view>
                                    <view class="list-item" v-t="'news_add_field1.deposit.item50'"></view>
                                </view>
                            </view>
                        </view>
                        <view class="h4" v-t="'news_add_field1.deposit.item51'"></view>
                        <view class="list">
                            <view class="list-item" v-t="'news_add_field1.deposit.item52'"></view>
                            <view class="list-item" v-t="'news_add_field1.deposit.item53'"></view>
                            <view class="list-item" v-t="'news_add_field1.deposit.item54'"></view>
                            <view class="list-item" v-t="'news_add_field1.deposit.item55'"></view>
                            <view class="list-item" v-t="'news_add_field1.deposit.item56'"></view>
                            <view class="list-item" v-t="'news_add_field1.deposit.item57'"></view>
                            <view class="list-item" v-t="'news_add_field1.deposit.item58'"></view>
                            <view class="list-item" v-t="'news_add_field1.deposit.item59'"></view>
                            <view class="list-item" v-t="'news_add_field1.deposit.item60'"></view>
                            <view class="list-item" v-t="'news_add_field1.deposit.item61'"></view>
                            <view class="list-item" v-t="'news_add_field1.deposit.item62'"></view>
                            <view class="list-item" v-t="'news_add_field1.deposit.item63'"></view>
                        </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 }
});
const emit = defineEmits(['update:visible']);

const { t } = useI18n();
const visible = computed({
    get: () => props.visible,
    set: (val) => emit('update:visible', val)
});
const country = computed(() => {
    return userInfo.value.customInfo.country;
});
const title = computed(() => {
    return country.value == 'CN' ? 'CWG 20%赠金入会礼' : '20% CASH BACK BONUS';
});
const close = () => { visible.value = false; };
</script>

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

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

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

        .intro {
            font-size: px2rpx(14);
            margin-bottom: px2rpx(16);
        }

        .h4 {
            font-size: px2rpx(16);
            font-weight: bold;
            margin: px2rpx(20) 0 px2rpx(12);
        }

        .list {
            .list-item {
                font-size: px2rpx(14);
                margin-bottom: px2rpx(10);

                .sub-list {
                    margin-left: px2rpx(15);
                    margin-top: px2rpx(6);

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