yihuo/pages/sprint/index.vue

<template>
    <page-meta :page-style="lock ? 'overflow: hidden' : 'overflow: auto'" />
    <page title="冲刺牛人" light nav-color="transparent">
        <view class="bg"></view>
        <image :src="resource.sprint_bg" class="bg-2" />
        <view class="index" @click="$router.index()">首页</view>
        <view style="height: 40rpx"></view>
        <view v-if="data && data.length > 0" style="padding-bottom: 160rpx">
            <view class="flex-wrap flex-align-center">
                <view
                    v-for="(item, index) in data"
                    :key="index"
                    class="item flex-align-center"
                    @click="showSpu(item)"
                >
                    <image :src="item.cover" class="image" mode="aspectFit" />
                    <image v-if="rank[index + 1]" :src="rank[index + 1]" class="flag" />
                </view>
            </view>
            <view class="content paddingX15">
                <view class="title-wrapper translateX">
                    <image :src="resource.popularize_content_bg" class="image" />
                    <view class="relative font4 color-white bold">规则</view>
                </view>
                <view class="flex paddingT30 paddingB20">
                    <image
                        class="flex-shrink0 marginT4"
                        :src="resource.weal_activity_flag"
                        style="width: 28rpx; height: 28rpx"
                    />
                    <view class="font5 paddingL10 color-theme bold">
                        活动期间（自1月20日0时-29日24时），无论新老用户，凡
                        <text style="color: #ff5055">【宝箱实际消费】</text>
                        即可计入榜单，1元=1牛气值，榜单实时更新。
                    </view>
                </view>
            </view>
            <view class="content paddingX15">
                <view class="title-wrapper translateX">
                    <image :src="resource.popularize_content_bg" class="image" />
                    <view class="relative font4 color-white bold">奖励领取要求</view>
                </view>
                <view class="flex paddingT30 paddingB20">
                    <image
                        class="flex-shrink0 marginT4"
                        :src="resource.weal_activity_flag"
                        style="width: 28rpx; height: 28rpx"
                    />
                    <view class="font5 paddingL10 color-theme bold">
                        榜单
                        <text style="color: #ff5055">前十名</text>
                        可依名次获得相应奖品，结果于@燚火漫域SuperMarts公众号中公布，奖品均于活动结束后三个工作日内发放。
                    </view>
                </view>
            </view>
        </view>
        <view class="bottom paddingB25 flex-align-center">
            <image
                :src="resource.sprint_btn"
                style="width: 336rpx; height: 108rpx"
                @click="$router.index()"
            />

            <image
                :src="resource.popularize_btn_2"
                class="marginL10"
                style="width: 336rpx; height: 108rpx"
                @click="showRank"
            />
        </view>
        <goods-detail ref="goodsDetailRef" />
        <rank ref="rankRef" />
    </page>
</template>

<script>
import resource from '@/utils/resource'
import goodsDetail from './../store/goods_detail'
import store from '@/store'
import rank from './rank'

const RANK_FLAG = {
    1: resource.rank_1,
    2: resource.rank_2,
    3: resource.rank_3,
    4: resource.rank_4,
    5: resource.rank_5,
    6: resource.rank_6,
    7: resource.rank_7,
    8: resource.rank_8,
    9: resource.rank_9,
    10: resource.rank_10
}
export default {
    components: { goodsDetail, rank },
    data() {
        return {
            resource,
            data: null,
            rank: RANK_FLAG,
            lock: false
        }
    },
    mounted() {
        this.getData()
    },
    methods: {
        async getData() {
            const res = await this.$service.weal.sprint()
            this.data = res
        },
        showSpu(spu) {
            this.$refs.goodsDetailRef.show(spu)
        },
        showRank() {
            this.$refs.rankRef.show()
        }
    }
}
</script>

<style lang="scss" scoped>
.bg {
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background: linear-gradient(180deg, #ff4743 0%, #230782 100%);
    z-index: -1;
}
.bg-2 {
    position: fixed;
    z-index: -1;
    left: 0;
    top: 0;
    width: 100%;
    height: 1624rpx;
    z-index: 0;
}
.image-1 {
    position: fixed;
    left: 0;
    top: 200rpx;
    width: 100%;
    height: 100rpx;
}
.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;
}
.item {
    margin: 10rpx 12rpx;
    position: relative;
    width: 152rpx;
    height: 180rpx;
    background: #ffffff;
    box-shadow: inset 0px 0px 30rpx 0px rgba(125, 84, 255, 0.5);
    border-radius: 12rpx;
    .image {
        width: 132rpx;
        height: 150rpx;
    }
    .flag {
        width: 60rpx;
        height: 26rpx;
        position: absolute;
        right: 0;
        bottom: 0;
    }
}
.content {
    position: relative;
    background: #ffffff;
    box-shadow: inset 0px 0px 30rpx 0px rgba(84, 14, 142, 0.5);
    border-radius: 16rpx;
    border: 4rpx solid #4f0c8f;
    margin: 30rpx 30rpx;
    .title-wrapper {
        position: absolute;
        top: -8rpx;
        width: 250rpx;
        height: 50rpx;
        line-height: 50rpx;
        text-align: center;
        .image {
            position: absolute;
            left: 0;
            top: 0;
            width: 250rpx;
            height: 50rpx;
            z-index: 0;
        }
    }
}
.bottom {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    .share-btn {
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
    }
}
</style>