yihuo/pages/fireworks_year/index.vue

<template>
    <page light title="源力烟花年" ref="pageRef" nav-color="transparent">
        <view class="fireworks-bg flex-column">
            <image :src="resource.fireworks_bg" class="fireworks-bg2" mode="widthFix" />
            <view :style="{height: (statusBarHeight + 32) + 'px'}"></view>
            <view class="paddingT30 text-center">
                <view class="color-white font5 bold">
                    集材料瓜分<text class="font15 bold" style="color:#FF5055">8888</text>现金
                </view>
                <view class="color-white font5 bold">High翻！超级烟花年</view>
            </view>
            <view class="flex1 flex-column-align-center relative">
                <view v-if="tableData && tableData.length > 0" class="relative width100">
                    <swiper v-if="!hasAmount" class="card-swiper" @change="changeSwiper" :current="active">
                        <swiper-item v-for="(item, index) in tableData" class="height100" :key="item.id"
                            :class="[active == index ? 'cur' : '']">
                            <view v-if="item.id != -1" class="swiper-item" :class="[item.num > 0 && 'active']">
                                <view style="height: 170rpx" class="flex-align-center font10 color-white bold">
                                    {{item.name}}
                                </view>
                                <view class="flex-align-center">
                                    <image :src="item.cover" style="width: 300rpx; height: 300rpx;" mode="aspectFit"></image>
                                </view>
                                <view v-if="item.num > 0" class="flex-align-center paddingT20">
                                    <view class="welcome flex-align-center">{{item.greeting}}</view>
                                </view>
                            </view>
                            <view v-else class="swiper-item ">
                                <image :src="resource.fireworks_item_bg_big" class="swiper-item-bg" />
                                <view class="flex-column-align-center paddingT35  relative">
                                    <image :src="resource.logo" style="width: 90rpx; height: 90rpx" />
                                    <view class="font8 bold paddingT18" style="color: #B55C26">祝您福气满满!</view>
                                </view>
                                <view class="play translateX">
                                    <view class="relative width100 height100 flex-align-center">
                                        <image :src="resource.fireworks_play" class="image" />
                                        <view class="bold color-white font18 relative">
                                            {{ total }}
                                        </view>
                                    </view>
                                </view>
                                <view class="complete translateX relative">已合成，1月30日18时开奖</view>
                            </view>
                        </swiper-item>
                    </swiper>
                    <view v-else class="card-swiper flex-align-center" style="margin-top: -200rpx">
                        <view class="swiper-item ">
                            <image :src="resource.fireworks_item_bg_big2" class="swiper-item-bg" />
                            <view class="flex-column-align-center paddingT35  relative">
                                <image :src="resource.logo" style="width: 90rpx; height: 90rpx" />
                                <view class="font8 bold paddingT18" style="color: #B55C26">祝您福气满满!</view>
                            </view>
                            <view v-if="total > 1" class="money translateXY relative marginT20" style="font-size: 70rpx">{{ amount }}元 x
                                {{ total > 3 ? 3 : total }}</view>
                            <view v-else-if="total == 1" class="money translateXY relative marginT20">{{ amount }}元 </view>
                            <view v-else style="color: #B55C26" class="relative paddingX20 paddingT20">您暂未合成烟花，无法获得奖励</view>
                        </view>
                    </view>

                    <view v-if="!hasAmount" class="flex-align-center paddingT40">
                        <image :src="resource.fireworks_collection" style="width: 250rpx; height: 70rpx" @click="$router.index()" />
                    </view>
                </view>
            </view>
            <view v-if="!hasAmount && tableData && tableData.length > 0" class="paddingB35">
                <scroll-view v-if="tableData.length > 5 " scroll-x class="scroll-wrapper paddingL14">
                    <view v-for="(item, index) in tableData" :key="item.id" class="item" @click="changeActive(index)">
                        <view class="top">
                            <image v-if="active === index" :src="resource.fireworks_item_bg" class="item-bg" />
                            <view class="width100 height100 flex-align-center">
                                <view class="content">
                                    <image v-if="item.id == -1" :src="resource.fireworks_item_light" class="image" />
                                    <image v-else :src="item.num > 0 ? item.light : item.dart" class="image" />
                                </view>
                            </view>
                            <view v-if="item.num > 0" class="badge flex-align-center">
                                {{ item.num > 99 ? '99' : item.num }}
                            </view>
                        </view>
                        <view class="font7 bold text-center paddingT5" :class="[active == index ? 'color-white' : 'color-un']">
                            {{item.name}}
                        </view>
                    </view>
                </scroll-view>
                <view v-else class="flex-align-around scroll-wrapper paddingX14">
                    <view v-for="(item, index) in tableData" :key="item.id" class="item" @click="changeActive(index)">
                        <view class="top">
                            <image v-if="active === index" :src="resource.fireworks_item_bg" class="item-bg" />
                            <view class="width100 height100 flex-align-center">
                                <view class="content">
                                    <image :src="item.num > 0 ? item.light : item.dart" class="image" />
                                </view>
                            </view>
                            <view v-if="item.num > 0" class="badge flex-align-center">
                                {{ item.num > 99 ? '99' : item.num }}
                            </view>
                        </view>
                        <view class="font7 bold text-center paddingT5" :class="[active == index ? 'color-white' : 'color-un']">
                            {{item.name}}
                        </view>
                    </view>
                </view>
            </view>
        </view>
        <view class="index" @click="$router.index()">首页</view>
        <view class="rule" @click="showRule">规则</view>
        <rule ref="ruleRef" />
    </page>
</template>

<script>
import resource from '@/utils/resource'
import rule from './rule'

const greeting = [
    '2023欧气满满',
    '2023一发即中',
    '2023大吉大利',
    '2023水到渠成',
    '烟花岁岁爆竹声声',
    '燚火漫域祝您新年大吉',
    '2023好事发生',
    '2023欧皇附体',
    '2023水逆退散',
    '燚火漫域祝您一路发发发'
]
export default {
    components: { rule },
    data() {
        return {
            resource,
            active: 0,
            tableData: null,
            total: 0,
            hasAmount: false,
            amount: null
        }
    },
    computed: {
        statusBarHeight() {
            if (this.$store.state.systemInfo) {
                return this.$store.state.systemInfo.statusBarHeight
            }
            return 20
        }
    },
    onShow() {
        this.getData()
    },
    methods: {
        async getData() {
            const res = await this.$service.weal.fireworks()
            if (!res) {
                this.total = 0
                this.tableData = null
                this.hasAmount = false
                this.amount = null
                return
            }
            if (res) {
                if (typeof res.amount != 'undefined' || res.amount != null) {
                    this.hasAmount = true
                    this.amount = res.amount
                }
                let map = {}
                if (res.myPrizeList) {
                    res.myPrizeList.forEach((e) => {
                        let num = map[e.id]
                        if (!num) {
                            map[e.id] = 1
                        } else {
                            map[e.id] = num + 1
                        }
                    })
                }
                let total = []
                if (res.prizeList) {
                    const arrays = this.$common.shuffle(greeting)
                    res.prizeList.forEach((item, index) => {
                        if (item.pic) {
                            let array = item.pic.split(',')
                            item.dart = array[0]
                            if (array.length > 1) {
                                item.light = array[1]
                            } else {
                                item.light = array[0]
                            }
                        }
                        item.greeting = arrays[index]
                        item.num = map[item.id] || 0
                        total.push(item.num)
                    })
                }
                this.total = Math.min(...total)
                if (this.total > 0) {
                    res.prizeList.unshift({
                        id: -1,
                        name: '烟花',
                        num: this.total
                    })
                }
                this.tableData = res.prizeList
            }
        },
        changeSwiper(e) {
            this.changeActive(e.detail.current)
        },
        changeActive(index) {
            this.active = index
        },
        showRule() {
            this.$refs.ruleRef.show()
        }
    }
}
</script>

<style lang="scss" scoped>
.fireworks-bg {
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background: linear-gradient(180deg, #1b033f 0%, #5d3374 100%);
    // z-index: -1;
}
.fireworks-bg2 {
    position: fixed;
    left: 0;
    right: 0;
    top: 170rpx;
    width: 100%;
    height: 0;
    z-index: -1;
}
.index {
    position: fixed;
    top: 180rpx;
    right: 0;
    width: 96rpx;
    height: 48rpx;
    background: linear-gradient(315deg, #0bd1ce 0%, #3ba1ff 100%);
    border-radius: 200rpx 0px 0px 200rpx;
    line-height: 48rpx;
    text-align: center;
    color: #fff;
    font-size: 28rpx;
    z-index: 100;
}
.rule {
    position: fixed;
    top: 260rpx;
    right: 0;
    width: 96rpx;
    height: 48rpx;
    background: linear-gradient(315deg, #ff345a 0%, #ffa25e 100%);
    border-radius: 200rpx 0px 0px 200rpx;
    line-height: 48rpx;
    text-align: center;
    color: #fff;
    font-size: 28rpx;
    z-index: 100;
}

.card-swiper {
    height: 650rpx !important;
    .swiper-item,
    .swiper-item2 {
        padding: 0;
        width: 466rpx;
        position: relative;
        height: 627rpx;
        border-radius: 40rpx;
    }
    .swiper-item {
        background: linear-gradient(180deg, #9033ad 0%, #fecca5 100%);
        &.active {
            background: linear-gradient(180deg, #fb4433 0%, #f8b5a9 100%);
        }
        .welcome {
            width: 365rpx;
            height: 58rpx;
            border-radius: 29rpx;
            background: #f98779;
            font-size: 28rpx;
            color: #fff;
        }
        .play {
            position: absolute;
            bottom: 106rpx;
            width: 200rpx;
            height: 200rpx;
            .image {
                position: absolute;
                left: 0;
                top: 0;
                width: 200rpx;
                height: 200rpx;
            }
        }
        .money {
            position: absolute;
            color: #ff5055;
            font-size: 80rpx;
            font-weight: bold;
            width: 100%;
            text-align: center;
        }
        .complete {
            color: #d29259;
            position: absolute;
            bottom: 40rpx;
            font-size: 28rpx;
            width: 100%;
            text-align: center;
        }
    }
    .swiper-item-bg {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
    }
}
.scroll-wrapper {
    overflow: hidden;
    height: 184rpx;
    white-space: nowrap;
    width: 100%;
    .item {
        position: relative;
        display: inline-block;
        width: 108rpx;
        height: 184rpx;
        margin: 0 14rpx;
        .top {
            width: 108rpx;
            height: 130rpx;
            position: relative;
            .item-bg {
                position: absolute;
                top: 0;
                left: 0;
                right: 0;
                width: 108rpx;
                height: 130rpx;
            }
            .content {
                width: 88rpx;
                height: 110rpx;
                background: linear-gradient(180deg, #fb5e2f 0%, #f53015 100%);
                border-radius: 10rpx;
                overflow: hidden;
                .image {
                    width: 88rpx;
                    height: 110rpx;
                }
            }
            .badge {
                position: absolute;
                right: 0;
                top: 0;
                width: 32rpx;
                height: 32rpx;
                border-radius: 16rpx;
                background: linear-gradient(180deg, #f8dbbd 0%, #feb578 100%);
                color: #9a6600;
                font-size: 24rpx;
            }
        }
        .color-un {
            color: #ac76c8;
        }
    }
}
</style>