yihuo/pages/weal/index.vue

<template>
    <page :nav="false" ref="pageRef" class="relative">
        <view
            class="wrapper"
            :style="
                active == 0
                    ? 'background-color:#fff'
                    : active == 1
                    ? 'background-image:url(' + ossurl.welfare.toysBg + ')'
                    : 'background-image:url(' + ossurl.welfare.blessings.blessingsBg + ')'
            "
        >
            <view
                class="pagae-nav"
                :style="{ paddingTop: statusBarHeight + 'px', background: headerBg }"
            >
                <view class="flex-column-align-center nav-title">福利</view>
            </view>
            <view style="height: 72rpx"></view>
            <view
                class="tabs flex-align"
                :style="{ top: statusBarHeight + 36 + 'px', background: headerBg }"
            >
                <view
                    v-for="(item, index) in tabData"
                    :key="item.value"
                    class="marginR15 tabItem"
                    :class="{ active: active == index }"
                    @click="changeActive(item)"
                >
                    <image class="image" :src="active == index ? item.activeIcon : item.icon" />
                </view>
            </view>
            <view>
                <room
                    v-if="active >= 0 && tabData[active].value === 'room'"
                    ref="room"
                    :statusBarHeight="statusBarHeight"
                />

                <wish
                    v-else-if="active >= 0 && tabData[active].value === 'wish'"
                    :statusBarHeight="statusBarHeight"
                />
                <activity
                    v-else-if="active >= 0 && tabData[active].value === 'activity'"
                    :statusBarHeight="statusBarHeight"
                    :activityId="activityId"
                />
                <catch-doll
                    v-else-if="active >= 0 && tabData[active].value === 'claw'"
                    :statusBarHeight="statusBarHeight"
                />
            </view>
        </view>
    </page>
</template>

<script>
    import loginMixin from '@/mixin/login'
    import room from './room'
    import topic from './topic'
    import reel from './reel'
    import wish from './wish'
    import activity from './activity'
    import catchDoll from './catchDoll'
    import store from '@/store'
    import { SET_PID } from '@/store/mutation-types'
    import ossurl from '@/utils/ossurl'

    const TAB_DATA = [
        {
            icon: ossurl.welfare.room,
            activeIcon: ossurl.welfare.roomActive,
            value: 'room',
            name: '房间'
        }
    ]

    const TAB_DATA_HIDE = [
        {
            icon: ossurl.welfare.room,
            activeIcon: ossurl.welfare.roomActive,
            value: 'room',
            name: '房间'
        },
        // {
        //     icon: ossurl.welfare.toysIcon,
        //     activeIcon: ossurl.welfare.toysActive,
        //     value: 'claw',
        //     name: '扭蛋机'
        // },
        {
            icon: ossurl.welfare.wish,
            activeIcon: ossurl.welfare.wishActive,
            value: 'wish',
            name: '祈福'
        }
    ]
    const TAB_DATA_HIDE2 = [
        {
            icon: ossurl.welfare.room,
            activeIcon: ossurl.welfare.roomActive,
            value: 'room',
            name: '房间'
        },
        {
            icon: ossurl.welfare.toysIcon,
            activeIcon: ossurl.welfare.toysActive,
            value: 'claw',
            name: '扭蛋机'
        },
        {
            icon: ossurl.welfare.wish,
            activeIcon: ossurl.welfare.wishActive,
            value: 'wish',
            name: '祈福'
        }
    ]
    export default {
        components: { room, topic, reel, wish, activity, catchDoll },
        mixins: [loginMixin],
        data() {
            return {
                ossurl,
                active: 0,
                activityId: null,
                showRedFloat: false,
                scrollTop: 0,
                userInfo: null,
                roomNdj: false
            }
        },
        computed: {
            statusBarHeight() {
                if (this.$store.state.systemInfo) {
                    return this.$store.state.systemInfo.statusBarHeight
                }
                return 20
            },
            tabData() {
				console.log('数据', !this.$store.state.hide? this.roomNdj? TAB_DATA_HIDE2: TAB_DATA_HIDE: TAB_DATA);
				
                return !this.$store.state.hide? this.roomNdj? TAB_DATA_HIDE2: TAB_DATA_HIDE: TAB_DATA
            },
            headerBg() {
                return this.scrollTop > 0 ? '#fff' : 'transparent'
            }
        },
        onPageScroll(e) {
            this.scrollTop = e.scrollTop
        },
        onShow(option) {
			console.log("tabData", this.tabData);
            this.getParamConfig()
            this.getUser()
            if (!!getApp().globalData.wealActive || getApp().globalData.wealActive === 0) {
                this.active = getApp().globalData.wealActive
                getApp().globalData = {}
            }
            this.refresh()
        },
        mounted() {
            this.loadActivity()
        },
        onTabItemTap() {
            this.loadActivity()
        },
        onShareAppMessage(res) {
            return {
                title: '超多羊毛快来薅',
                path: '/pages/weal/index'
            }
        },
        onShareTimeline() {
            return {
                title: '超多羊毛快来薅'
            }
        },
        methods: {
            async getParamConfig() {
                const res = await this.$service.user.getParamConfig('room_ndj')
                this.roomNdj = res.state != 0
            },
            async getUser() {
                const res = await this.$service.user.getInfo()
                this.userInfo = res
            },
            async loadActivity() {
                this.getActivity()
                const res = await this.$service.weal.activityTab()
                if (res) {
                    this.activityId = res.id
                } else {
                }
            },
            changeActive(item) {
                for (let i = 0; i < this.tabData.length; i++) {
                    if (this.tabData[i].value === item.value) {
                        this.active = i
                        break
                    }
                }
            },
            init() {
                let active = this.active
                this.active = -1
                this.$nextTick(() => {
                    this.active = active
                })
            },
            refresh() {
                if (this.active < 0) return
                if (this.tabData[this.active].value === 'room') {
                    this.$refs.room && this.$refs.room.refresh()
                } else if (this.tabData[this.active].value === 'reel') {
                    this.$refs.reel && this.$refs.reel.init()
                }
            },
            async getActivity() {
                const res = await this.$service.weal.redPacketRainInfo()
                this.showRedFloat = !!res
            }
        }
    }
</script>

<style></style>
<style lang="scss" scoped>
    .wrapper {
        min-height: 100vh;
        background-size: 100% 100%;
        background-repeat: no-repeat;
    }
    .pagae-nav {
        width: 100%;
        position: fixed;
        left: 0;
        right: 0;
        z-index: 100;
        .nav-title {
            height: 80rpx;
            font-size: 32rpx;
            font-family: Source Han Sans, Source Han Sans;
            font-weight: bold;
            color: #000000;
        }
    }
    .tabs {
        position: fixed;
        left: 0;
        right: 0;
        z-index: 100;
        padding: 12rpx 20rpx;
        .tabItem {
            color: rgba(0, 0, 0, 0.5);
            font-size: 32rpx;
            text-align: center;
            .image {
                width: 158rpx;
                height: 58rpx;
            }
        }
    }

    .bg {
        position: fixed;
        z-index: -1;
        left: 0;
        right: 0;
        top: 0;
        width: 100%;
        height: 100%;
        opacity: 0.3;
    }
    .red-float {
        position: fixed;
        right: 10rpx;
        bottom: 500rpx;
        width: 116rpx;
        height: 86rpx;
        animation: red 0.5s linear infinite;
    }

    @keyframes red {
        0% {
            transform: rotateZ(-10deg);
        }
        25% {
            transform: rotateZ(0deg);
        }
        50% {
            transform: rotateZ(10deg);
        }
        75% {
            transform: rotateZ(0deg);
        }
        100% {
            transform: rotateZ(-10deg);
        }
    }
</style>