yihuo/pages/rich_prize/index.vue

<template>
    <page title="奖品" ref="pageRef" light nav-color="transparent">
        <view class="bg"></view>
        <image :src="resource.popularize_bg" class="bg-2" />
        <view style="height: 40rpx"></view>
        <view v-if="prizeList && prizeList.length > 0">
            <view class="flex-wrap flex-align-center">
                <view v-for="(item, index) in prizeList" :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" mode="heightFix"/>
                    <view v-if="item.user" class="user flex-column-align-center">
                        <image :src="item.user.avatar" :style="{width: '40px', height: '40px', borderRadius: '20px'}" />
                        <view class="paddingX10 color-white marginT10 font3">{{item.user.nickname}}</view>
                    </view>
                </view>
            </view>
        </view>
        <view v-if="peoples && peoples.length > 0" class="marginT20 paddingX15">
            <view v-for="(item, index) in peoples" :key="index" class="cell flex-align" style="margin-bottom: 10px">
                <view class="index bold color-1">{{index + 1}}</view>
                <image v-if="index === 0" class="rank_flag translateY" :src="resource.prince_rank_1" />
                <image v-if="index === 1" class="rank_flag translateY" :src="resource.prince_rank_2" />
                <image v-if="index === 2" class="rank_flag translateY" :src="resource.prince_rank_3" />
                <image :src="item.avatar" style="width: 52rpx;height:52rpx;border-radius: 26rpx" />
                <view class="color-1 font2 marginL12 flex1">{{item.nickname}}</view>
            </view>
        </view>
        <goods-detail ref="goodsDetailRef" />
    </page>
</template>

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

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,
    11: resource.rank_normal,
}
export default {
    components: { goodsDetail },
    data() {
        return {
            resource,
            prizeList: [],
            rank: RANK_FLAG,
            peoples: []
        }
    },
    mounted() {
        this.getData()
    },
    methods: {
        async getData() {
            const res = await this.$service.weal.rich()
            if (res) {
                if (res.winnerList) {
                    res.prizeList.forEach((item, index) => {
                        if (res.winnerList.length > index) {
                            item.user = res.winnerList[index]
                        }
                    })
                }
                this.prizeList = res.prizeList
            }
        },
        showSpu(spu) {
            this.$refs.goodsDetailRef.show(spu)
        }
    }
}
</script>

<style lang="scss" scoped>
.bg {
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background: linear-gradient(180deg, #8332f5 0%, #2f4abd 100%);
    z-index: -1;
}
.bg-2 {
    position: fixed;
    z-index: -1;
    left: 0;
    top: 0;
    width: 100%;
    height: 1624rpx;
    z-index: 0;
}
.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: 0rpx;
        height: 26rpx;
        position: absolute;
        right: 0;
        bottom: 0;
    }
    .user {
        position: absolute;
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;
        background: rgba($color: #000, $alpha: 0.5);
    }
}
.cell {
    position: relative;
    height: 48px;
    background: rgba($color: #8f4bf1, $alpha: 0.1);
    border-radius: 4px;
    padding-left: 13px;
    padding-right: 25px;
    .index {
        width: 70px;
    }
    .num {
        font-size: 12px;
    }
    &.my {
        background: #8f4bf1;
        .num {
            color: #fff;
        }
    }
    .rank_flag {
        width: 21px;
        height: 20px;
        position: absolute;
        left: 35px;
    }
}
</style>