yihuo/pages/product/moli.vue

<template>
    <view class="wrapper">
        <view class="font4 bold color-1">宝箱推荐</view>
        <view>
            <view
                v-for="item in data"
                :key="item.id"
                class="marginT15 flex-align"
                @click="showDetail(item)"
            >
                <view class="relative radius4 overflow-hidden flex-shrink0">
                    <image :src="item.cover" class="image" mode="aspectFill" />
                    <!-- <view class="image-desc">欧气命中节省¥987</view> -->
                </view>
                <view
                    class="marginL10 relative flex1 self-stretch flex-column-between overflow-hidden"
                >
                    <view class="color-1 font4 line-ellipsis flex-shrink1">{{ item.name }}</view>
                    <view class="color-money font2">¥{{ item.price }}</view>
                    <view class="font2 color-2">
                        {{ item.goodsHighLevelQuantity }}稀有款 ｜ 共{{ item.goodsTotalQuantity }}款
                    </view>
                    <view
                        style="heigth: 80rpx"
                        class="relative"
                        :style="{ width: scrollwidth + 'px' }"
                    >
                        <scroll-view scroll-x class="scroll-wrapper">
                            <image
                                v-for="img in item.goodsCoverList"
                                :key="img"
                                :src="img"
                                class="item"
                                mode="aspectFit"
                            />
                        </scroll-view>
                    </view>
                </view>
            </view>
        </view>
    </view>
</template>
<script>
export default {
    props: {
        data: Array
    },
    computed: {
        scrollwidth() {
            let width = this.$store.state.systemInfo.screenWidth
            width = width - uni.upx2px(28 * 2 + 220 + 20)
            return width
        }
    },
    methods: {
        showDetail(item) {
            if (item.mode === 'UNLIMITED') {
                this.$router.pushCheck('award_detail', {
                    poolId: item.id
                })
            } else if (item.mode === 'YFS_PRO') {
                this.$router.pushCheck('award_detail_yfs', {
                    poolId: item.id
                })
            }
        }
    }
}
</script>
<style lang="scss" scoped>
.wrapper {
    margin-top: 20rpx;
    background: #fff;
    border-radius: 20rpx;
    padding: 36rpx 28rpx;
    .image {
        width: 220rpx;
        height: 220rpx;
        border-radius: 4rpx;
    }
    .image-desc {
        color: #fff;
        font-size: 20rpx;
        position: absolute;
        left: 0;
        bottom: 0;
        width: 220rpx;
        height: 40rpx;
        line-height: 40rpx;
        text-align: center;
        background: linear-gradient(270deg, #b91a59 0%, #3f0bbd 100%);
    }
    .scroll-wrapper {
        overflow: hidden;
        height: 80rpx;
        white-space: nowrap;
        .item {
            display: inline-block;
            background: #f2f2f2;
            width: 80rpx;
            height: 80rpx;
            margin-right: 12rpx;
            border-radius: 8rpx;
        }
    }
}
</style>