yihuo/pages/award_detail_yfs/product_a.vue

<template>
    <view class="p30" style="padding-bottom: 200rpx;">
        <view class="levelBox" v-for="levelItem of Arrbylevel">
            <view class="levelItem" v-if="levelItem.list.length > 0" :style="'background: url(' + levelItem.itembj + ')no-repeat; background-size: 100% 100%;'">
                <view
                    class="levelTitle fx-c-c"
                    :style="{
                        color: levelItem.color,
                    }"
                >
                    {{ levelItem.title }}
                    <span class="levelProportion">{{ getLevelA(levelItem.level) }}</span>
                </view>

               <view class="levelList">
                    <view class="listBg">
                        <view class="levelListScroll">
                            <view
                                v-for="(item, index) in levelItem.list"
                                :key="index"
                                class="item"
                                :style="{
                                    backgroundImage: 'url(' + LEVEL_MAP[item.level].bg + ')'
                                }"
                                @click="showSwipe(item)"
                            >
                                <view class="text" style="color: #333;">{{ getLeftNum(item) }}/{{ item.quantity }}</view>
                                <image
                                    class="super-image translateX"
                                    :src="item.spu.cover"
                                    mode="aspectFit"
                                />
                                <view
                                    class="text Probability"
                                    :style="{
                                        color: levelItem.color,
                                        borderColor: levelItem.color
                                    }"
                                >
                                    <text>{{ getProbability(item) }}</text>
                                </view>
                            </view>
                        </view>
                    </view>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
    import { LEVEL_MAP } from '@/utils/config'
    import ossurl from '@/utils/ossurl'
    export default {
        props: {
            products: Array,
            poolId: [Number,String],
            box: Object,
            levelist: Array
        },
        data() {
            return {
                LEVEL_MAP,
                ossurl
            }
        },
        computed: {
            Arrbylevel() {
                let levelA = this.products.filter((e) => {
                    return e.level == 'A'
                })

                let levelB = this.products.filter((e) => {
                    return e.level == 'B'
                })

                let levelC = this.products.filter((e) => {
                    return e.level == 'C'
                })

                let levelD = this.products.filter((e) => {
                    return e.level == 'D'
                })
                return [
                    {
                        ...LEVEL_MAP['A'],
                        level: 'A',
						itembj: ossurl.box.detail.itembjA,
                        list: levelA
                    },
                    {
                        ...LEVEL_MAP['B'],
                        level: 'B',
						itembj: ossurl.box.detail.itembjB,
                        list: levelB
                    },
                    {
                        ...LEVEL_MAP['C'],
                        level: 'C',
						itembj: ossurl.box.detail.itembjC,
                        list: levelC
                    },
                    {
                        ...LEVEL_MAP['D'],
                        level: 'D',
						itembj: ossurl.box.detail.itembjD,
                        list: levelD
                    }
                ]
            }
        },
		created() {
			console.log('sd', this.Arrbylevel);
		},
        methods: {
            showSwipe(item) {
              console.log(item)
              let index = this.products.findIndex(e=>{
                return e.spu.id == item.spu.id
              })
                this.$router.push('award_detail_swipe', { poolId: this.poolId, index })
            },
            getLeftNum(row) {
                if (
                    !this.box ||
                    !this.box.usedStat ||
                    !this.box.usedStat[row.spu.id] ||
                    !this.box.usedStat[row.spu.id].quantity
                ) {
                    return row.quantity
                }
                return row.quantity - this.box.usedStat[row.spu.id].quantity
            },
            getProbability(row) {
                if (!this.box) return
                let leftNum = this.getLeftNum(row)
                return (
                    this.$common.ignoreRatio0(
                        ((leftNum / this.box.leftQuantity) * 100).toFixed(4)
                    ) + '%'
                )
            },
            getLevelA(level) {
                let item = this.levelist.find((e) => {
                    return e.level == level
                })
                if (item) {
                    return item.probability + '%'
                } else {
                    return '0%'
                }
            }
        }
    }
</script>

<style lang="scss" scoped>
    .levelBox {
		
    }
    .levelItem {
        padding: 8rpx 20rpx;
		margin-bottom: 30rpx;
        .levelTitle {
            font-size: 36rpx;
            // background: #fdd6b3;
            // display: inline-block;
            font-weight: bold;
            padding: 12rpx 28rpx;
            border-radius: 24rpx 24rpx 0 0;
            background-size: 100%;
            .levelProportion {
                font-size: 24rpx;
                font-family: Source Han Sans, Source Han Sans;
                font-weight: 350;
				background: #fff;
				border-radius: 40rpx;
				margin-left: 10rpx;
				padding: 4rpx 16rpx;
            }
        }
        .levelList {
            // background: #fdd6b3;
            padding: 12rpx 18rpx 22rpx 18rpx;
            border-radius: 0 0 24rpx 24rpx;

            .listBg {
                overflow: hidden;
                word-break: keep-all;
                white-space: nowrap;
                padding-bottom: 24rpx;
                border-radius: 24rpx;
                position: relative;
                width: 100%;
            }
            .levelListScroll {
                overflow: auto;
            }

            .item {
                width: 155rpx;
                // height: 230rpx;
                display: inline-block;
                background-position: 0 40rpx;
                background-size: 100% auto;
                background-repeat: no-repeat;
                margin-left: 10px;
                position: relative;
				padding-top: 28rpx;
                // padding-bottom: 10rpx;
                .super-image {
                    width: 140rpx;
                    height: 170rpx;
                }
                .text {
                    color: #fff;
                    border-radius: 5rpx;
                    font-size: 22rpx;
                    text-align: center;
                }
                .Probability {
                    width: 100%;
					height: 70rpx;
					text-align: center;
					text{
						color: #000;
					}
                }
            }
        }
    }
</style>