raex_front/src/App.vue

<template>
    <div class="scroll-wrapper" :class="[{ darkTheme: darkTheme }, routeName]" id="scroll-wrapper" ref="scroll"
        @scroll="scrollEvent" v-if="setting == false">
        <app-bar ref="bar"></app-bar>
        <router-view v-slot="{ Component }">
            <keep-alive :include="keeps">
                <component :is="Component" class="scroll-content" ref="content" :style="scrollStyle" />
            </keep-alive>
        </router-view>
        <phone-ver></phone-ver>
        <Transition>
            <swiper v-if="showSplash" pagination @reachEnd="reachEnd" class="appSwiper"
                :autoplay="{ delay: 3000, disableOnInteraction: false }">
                <swiper-slide>
                    <img src="https://cdn.raex.vip/image/splash1.jpg" alt="" />
                </swiper-slide>
                <swiper-slide>
                    <img src="https://cdn.raex.vip/image/splash2.jpg" alt="" />
                </swiper-slide>
                <swiper-slide>
                    <img src="https://cdn.raex.vip/image/splash3.jpg" alt="" />
                </swiper-slide>
                <swiper-slide>
                    <img src="https://cdn.raex.vip/image/splash4.jpg" alt="" />
                </swiper-slide>
                <swiper-slide>
                    <img src="https://cdn.raex.vip/image/splash5.jpg" alt="" />
                </swiper-slide>
                <swiper-slide>
                    <img src="https://cdn.raex.vip/image/splash6.jpg" alt="" />
                </swiper-slide>
                <div class="tiaozhuan" @click="goApp">跳过</div>
            </swiper>
        </Transition>
    </div>
    <div class="scroll-wrapper scroll-wrappers" :class="{ darkTheme: darkTheme }" id="scroll-wrapper" ref="scroll"
        @scroll="scrollEvent" v-else-if="setting == true">
        <app-bar ref="bar"></app-bar>
        <router-view v-slot="{ Component }">
            <keep-alive :include="keeps">
                <component :is="Component" class="scroll-content" ref="content" :style="scrollStyle" />
            </keep-alive>
        </router-view>
        <phone-ver></phone-ver>
        <Transition>
            <swiper v-if="showSplash" pagination @reachEnd="reachEnd" class="appSwiper"
                :autoplay="{ delay: 3000, disableOnInteraction: false }">
                <swiper-slide>
                    <img src="https://cdn.raex.vip/image/splash1.jpg" alt="" />
                </swiper-slide>
                <swiper-slide>
                    <img src="https://cdn.raex.vip/image/splash2.jpg" alt="" />
                </swiper-slide>
                <swiper-slide>
                    <img src="https://cdn.raex.vip/image/splash3.jpg" alt="" />
                </swiper-slide>
                <swiper-slide>
                    <img src="https://cdn.raex.vip/image/splash4.jpg" alt="" />
                </swiper-slide>
                <swiper-slide>
                    <img src="https://cdn.raex.vip/image/splash5.jpg" alt="" />
                </swiper-slide>
                <swiper-slide>
                    <img src="https://cdn.raex.vip/image/splash6.jpg" alt="" />
                </swiper-slide>
                <div class="tiaozhuan" @click="goApp">跳过</div>
            </swiper>
        </Transition>
    </div>
</template>

<script>
import AppBar from './components/AppBar.vue';
import { computed } from 'vue';
import PhoneVer from './components/PhoneVer.vue';
import { mapState } from 'vuex';
import { Swiper, SwiperSlide } from 'swiper/vue';

import 'swiper/swiper.min.css';
import 'swiper/swiper-bundle.min.css';

import SwiperCore, { Pagination, Autoplay } from 'swiper';
import dayjs from 'dayjs';
import { throwStatement } from '@babel/types';

// install Swiper modules
SwiperCore.use([Pagination, Autoplay]);
export default {
    components: { AppBar, PhoneVer, Swiper, SwiperSlide },
    name: 'App',
    provide() {
        return {
            setKeeps: this.setKeeps,
            bar: computed(() => this.barValue),
            content: computed(() => this.$refs.content),
            scrollWrapper: computed(() => this.$el),
            changeScroll: this.changeScroll,
            keeps: computed(() => this.keeps),
            bodyScroll: computed(() => this.bodyScroll),
            changeTab: this.changeTab
        };
    },
    inject: ['barHeight'],
    computed: {
        ...mapState(['darkTheme']),
        barValue() {
            return this.$refs.bar;
        },
        scrollStyle() {
            return {
                boxSizing: 'border-box',
                minHeight: `calc(100vh - ${(this.barHeight || '0') + 'px'})`
            };
        }
    },
    data() {
        return {
            checkEvent: null,
            keeps: [],
            bodyScroll: 0,
            showSplash: false,
            setting: false,
            routeName: ''
        };
    },
    watch: {
        $route() {
            this.$nextTick(() => {
                this.$el.scrollTop = 0;
            });
            if (this.$route.name == 'userSettingComplete' || this.$route.name == 'userSetting') {
                this.setting = true;
            } else {
                this.setting = false;
            }
            this.routeName = this.$route.name;
        }
    },
    mounted() {
        if ('1' !== window.localStorage.getItem('AppSplash')) {
            this.showSplash = true;
            window.localStorage.setItem('AppSplash', '1');
        } else {
            if (window.cordova && StatusBar) {
                StatusBar.styleDefault();
            }
            this.getCard();
        }
        this.routeName = this.$route.name;
    },
    methods: {
        getCard() {
            this.$http
                .get('sysConfig/get/fu_startTime')
                .then(res => {
                    if (res.value) {
                        let date1 = dayjs(res.value);
                        let dates = [];
                        for (let i = 0; i < 10; i++) {
                            dates.push(date1.add(i, 'days').format('YYYY-MM-DD'));
                        }
                        console.log(dates);
                        console.log(dates.includes(dayjs().format('YYYY-MM-DD')));
                        if (dates.includes(dayjs().format('YYYY-MM-DD'))) {
                            if (!this.isLogin) {
                                return Promise.resolve();
                            } else {
                                return this.$http.post('/dailySign/search', {
                                    userId: this.$store.state.userInfo.id,
                                    start: dayjs().format('YYYY-MM-DD'),
                                    end: dayjs().format('YYYY-MM-DD')
                                });
                            }
                        }
                    }
                    return Promise.reject();
                })
                .then(res => {
                    if (res && res.length > 0) {
                        return Promise.reject();
                    } else {
                        return Promise.resolve();
                    }
                })
                .then(() => {
                    this.$router.push('/check');
                });
        },
        goApp() {
            this.showSplash = false;
            if (window.cordova && StatusBar) {
                StatusBar.styleDefault();
            }
            this.getCard();
        },
        reachEnd() {
            setTimeout(() => {
                this.goApp();
            }, 3000);
        },
        setKeeps(keep = [], isAdd = true, isClear = false) {
            let keeps = [...this.keeps];
            if (isAdd) {
                keeps = [...keeps, ...keep];
            } else {
                keeps = keeps.filter(item => {
                    return !keep.includes(item);
                });
            }
            if (isClear) {
                keeps = [];
            }
            this.keeps = keeps;
        },
        changeScroll(scrollTop, isAnimate = false) {
            console.log(scrollTop);
            if (isAnimate) {
                this.$el.scrollTo({
                    top: scrollTop || 0,
                    behavior: 'smooth'
                });
            } else {
                this.$el.scrollTop = scrollTop || 0;
            }
        },
        scrollEvent() {
            // console.log(this.$el.scrollTop);
            this.bodyScroll = this.$el.scrollTop;
        },
        changeTab(color) {
            this.$refs.bar.getColor(color);
        }
    }
};
</script>

<style lang="less" scoped>
.scroll-content {
    box-sizing: border-box;

    // padding-top: 46px;
    &.index {
        background-color: #0f0f0f;
    }
}

.scroll-wrapper {
    background-color: @bg;

    &.digitalOrganization {
        background: #272b2e;
    }

    &.store {
        background-color: #0f0f0f;
    }

    &.quotationRecord {
        background: #0F0F0F;
    }

    &.ranking {
        background: #010225;
    }

    &.metaDomain,
    &.shoppingCart {
        background: #000000;
    }

    &.home {
        background-color: var(--bg);
    }

    &.productDetail,
    &.assetDetail,
    &.auctionDetail {
        background-color: #0f0f0f;
    }

    &.productSearchCorpse,
    &.discover,
    &.mine,
    &.creatorDetail,
    &.hopeMarket {
        background-color: #272b2e;
    }

    &.userLogin,
    &.userRegister {
        background-color: #101010;
    }

    &.chatList,
    &.chatDetail,
    &.teamSetting,
    &.ai {
        background-color: #1c1c1c;
    }

    &.auction {
        background-color: #030001;
    }

    &.domainname,
    &.domainSubmit,
    &.activityList,
    &.newsList {
        background-color: #030001;
    }

    &.activityDetail {
        background-color: #181818;
    }
}

.scroll-wrappers {
    background-color: #272b2e;
}

.appSwiper {
    position: fixed;
    width: 100vw;
    height: 100vh;
    // height: var(--app-height);
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9999;
    object-fit: cover;
    opacity: 1;
    transition: opacity 0.8s ease-in-out;
    background-color: #000;
    --swiper-theme-color: #fff;

    .swiper-slide {
        img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
    }

    /deep/.swiper-pagination {
        .fixedBottom(40px);
    }

    .tiaozhuan {
        height: 26px;
        background: rgba(0, 0, 0, 0.3);
        border-radius: 14px;
        font-size: 14px;
        font-weight: 400;
        color: #ffffff;
        line-height: 26px;
        padding: 0 16px;
        position: fixed;
        z-index: 30;
        top: calc(var(--safe-top) + 36px);
        right: 30px;
    }
}

.v-enter-active,
.v-leave-active {
    transition: opacity 0.5s ease;
}

.v-enter-from,
.v-leave-to {
    opacity: 0;
}
</style>