yihuo/pages/award_detail/prince_goods.vue

<template>
    <view class="cu-modal" :class="{'show': visible}">
        <view class="prince-goods-mask" @click="close"></view>
        <view class="cu-dialog" style="background-color: transparent; width:100%">
            <view class="relative wrapper">
                <image :src="resource.prince_rank_bg" class="bg" mode="scaleToFill"/>
                <view class="flex-align-center">
                    <image :src="resource.prince_goods_title" class="title" />
                </view>
                <view class="flex-wrap flex-align-between marginT27">
                    <view v-for="item in list" :key="item.spuId" class="item" @click="showDetail(item.spu)">
                        <image :src="resource.prince_goods_wrapper" class="goods-wrapper" />
                        <image :src="item.spu.cover" mode="scaleToFill" class="image" />
                        <image v-if="item.theNextFlag === 1" :src="resource.prince_next_flag" class="next-flag" />
                    </view>
                </view>
            </view>
            <view class="paddingT30 flex-align-center">
                <image :src="resource.close" class="x" @click="close" />
            </view>
        </view>
    </view>
</template>

<script>
import resource from '@/utils/resource'
import { LEVEL_MAP } from '@/utils/config'

export default {
    props: {
        poolId: Number
    },
    data() {
        return {
            LEVEL_MAP,
            resource,
            list: [],
            visible: false,
            refreshing: false
        }
    },
    methods: {
        show() {
            this.$parent.$parent.$parent.lock = true
            this.visible = true
            this.getData()
        },
        close() {
            this.$parent.$parent.$parent.lock = false
            this.visible = false
            this.list = []
        },
        async getData() {
            const res = await this.$service.award.kingGoods(this.poolId)
            this.list = res || []
        },
        showDetail(spu) {
            this.$emit('showDetail', spu)
        }
    }
}
</script>

<style lang="scss" scoped>
.prince-goods-mask {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
}
.wrapper {
    z-index: 1001;
    margin: 0 28rpx;
    position: relative;
    padding: 52rpx 28rpx 80rpx;
    background: rgba(0, 0, 0, 0.6);
    border-radius: 16rpx;
    .bg {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
    }
    .title {
        width: 234rpx;
        height: 46rpx;
    }
    .item {
        width: 200rpx;
        height: 238rpx;
        position: relative;
        transform: scale(0.95);
        border-radius: 8rpx;
        overflow: hidden;
        .goods-wrapper {
            position: absolute;
            right: 0;
            top: 0;
            width: 100%;
            height: 100%;
        }
        .image {
            width: 200rpx;
            height: 238rpx;
        }
        .next-flag {
            position: absolute;
            right: 0;
            top: 0;
            width: 106rpx;
            height: 102rpx;
        }
    }
}
.x {
    width: 60rpx;
    height: 60rpx;
}
</style>