yihuo/pages/award_detail_yfs/box_choose.vue

<template>
    <view class="cu-modal bottom-modal" :class="{ show: visible }">
        <view class="mask" @click="close"></view>
        <view class="wrapper cu-dialog">
            <view>
                <view>
                    <view class="title">
                        全部盒子
                        <view class="close" @click="close">
                            <text class="cuIcon-close"></text>
                        </view>
                    </view>
                </view>
                <tabbar3
                    custom-class="marginX14 marginB15 flex-align-between"
                    :tabs="tabs"
                    @change="clickTab"
                />
                <scroll-view
                    style="height: 950rpx"
                    scroll-y
                    class=" paddingB20"
                    refresher-enabled
                    refresher-default-style="white"
                    @refresherrefresh="pullRefresh"
                    :refresher-triggered="refreshing"
                    @scrolltolower="loadMore"
                    :scroll-top="scrollTop"
                >
                    <view>
                        <view
                            v-for="(item, index) in tableData.filter((e) => {
                                return e.leftQuantity > 0
                            })"
                            :key="item.number"
                            class="item invalid paddingY5 flex-align marginB10"
							:style="{ backgroundImage: 'url(' + ossurl.box.detail.boxChoosebj + ')' }"
                            @click="choose(item)"
                        >
                            <view
                                class="itemIndex"
                                :style="{
                                    backgroundImage: 'url(' + ossurl.box.detail.boxIndexBg + ')'
                                }"
                            >
                                {{ index + 1 }}
                            </view>
                            <view class="itemBox">
                                <view class="left flex-column-align-center">
                                    <view class="relative">
                                        <image
                                            :src="ossurl.box.detail.boxIcon"
                                            class="boxIcon"
                                            mode="aspectFit"
                                        />
                                    </view>
                                    <view class="font2">剩{{ item.leftQuantity }}发</view>
                                </view>
                                <view class="line"></view>
                                <view class="flex1 levelList">
                                    <view class="font1 levelBox">
                                        <image
                                            :src="ossurl.box.detail.levelTextA"
                                            class="levelIcon"
                                            mode="aspectFit"
                                        />
                                        <view class="numBox">
                                            <span class="currentNum">{{ item.leftQuantityA }}</span>
                                            /{{ item.quantityA }}
                                        </view>
                                    </view>
                                    <view class="font1 levelBox">
                                        <image
                                            :src="ossurl.box.detail.levelTextB"
                                            class="levelIcon"
                                            mode="aspectFit"
                                        />
                                        <view class="numBox">
                                            <span class="currentNum">{{ item.leftQuantityB }}</span>
                                            /{{ item.quantityB }}
                                        </view>
                                    </view>

                                    <view class="font1 levelBox">
                                        <image
                                            :src="ossurl.box.detail.levelTextC"
                                            class="levelIcon"
                                            mode="aspectFit"
                                        />
                                        <view class="numBox">
                                            <span class="currentNum">{{ item.leftQuantityC }}</span>
                                            /{{ item.quantityC }}
                                        </view>
                                    </view>
                                    <view class="font1 levelBox">
                                        <image
                                            :src="ossurl.box.detail.levelTextD"
                                            class="levelIcon"
                                            mode="aspectFit"
                                        />
                                        <view class="numBox">
                                            <span class="currentNum">{{ item.leftQuantityD }}</span>
                                            /{{ item.quantityD }}
                                        </view>
                                    </view>
                                </view>
                            </view>
                        </view>
                    </view>
                </scroll-view>
            </view>
        </view>
    </view>
</template>

<script>
    import resource from '@/utils/resource'
    import ossurl from '@/utils/ossurl'
    import pageMixin from '@/mixin/page'
    import tabbar3 from '@/components/tabbar3'

    const Tabs = [
        { title: '全部', value: '' },
        { title: '超神款', value: 'A' },
        { title: '欧皇款', value: 'B' },
        { title: '隐藏款', value: 'C' },
        { title: '普通款', value: 'D' }
    ]
    export default {
        mixins: [pageMixin],
        components: { tabbar3 },
        props: {
            poolId: [Number,String]
        },
        data() {
            return {
                resource,
                ossurl,
                visible: false,
                refreshing: false,
                tabs: Tabs,
                tab: Tabs[0],
                scrollTop: 0
            }
        },
        methods: {
            show() {
                this.$parent.$parent.lock = true
                this.visible = true
                this.refresh()
            },
            clickTab(item) {
                this.tab = item
                this.refresh(true)
                this.scrollTop = this.scrollTop == 1 ? 0 : 1
            },
            pullRefresh() {
                this.refreshing = true
                this.refresh()
            },
            async loadData() {
                const res = await this.$service.award.boxs(
                    this.poolId,
                    this.tab.value,
                    this.pageNum,
                    this.pageSize
                )
                if (this.pageNum == 1) {
                    setTimeout(() => {
                        this.refreshing = false
                    }, 500)
                }
                return res
            },
            close() {
                this.$parent.$parent.lock = false
                this.data = []
                this.visible = false
                this.$emit('close', false)
                this.tab = Tabs[0]
            },
            choose(item) {
                if (item.leftQuantity <= 0) return
                this.close()
                this.$emit('choose', item.number)
            }
        }
    }
</script>

<style lang="scss" scoped>
    .mask {
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
    }
    .wrapper {
        background: #fff;
        border-radius: 15px 15px 0px 0px !important;

        .title {
            text-align: center;
            font-size: 32rpx;
            font-family: Source Han Sans, Source Han Sans;
            font-weight: 700;
            color: #000000;
            padding: 44rpx 0 48rpx 0;
            position: relative;
        }

        .close {
            position: absolute;
            right: 0;
            width: 48rpx;
            height: 48rpx;
            background: #ebebeb;
            border-radius: 48rpx;
            color: #a2a2a2;
            top: 30rpx;
            line-height: 48rpx;
        }
        .item {
            border-radius: 4px;
            padding: 14rpx;
            position: relative;
            .itemIndex {
                position: absolute;
                left: 0;
                top: 0;
                width: 68rpx;
                height: 44rpx;
                background-size: 100%;
                font-size: 28rpx;
                font-family: Source Han Sans, Source Han Sans;
                font-weight: 700;
                color: #000000;
                line-height: 44rpx;
                font-size: 28rpx;
                font-family: Source Han Sans, Source Han Sans;
                font-weight: 700;
                color: #000000;
                line-height: 44rpx;
                text-align: center;
            }
            .left {
                width: 148rpx;

                font-size: 24rpx;
                .boxIcon {
                    height: 48rpx;
                    width: 48rpx;
                }
            }
            .line {
                width: 1px;
                height: 79rpx;
                opacity: 0.1;
                border: 1px solid #dcdad3;
                margin-right: 20rpx;
            }

            .itemBox {
                width: 100%;
                display: flex;
                align-items: center;
                padding: 24rpx;
                .currentNum {
                    font-size: 36rpx;
                    font-family: Source Han Sans, Source Han Sans;
                    font-weight: 700;
                    color: #000000;
                }

                .levelBox {
                    width: 50%;
                    flex: 1;
                    display: flex;
                    align-items: center;
                    .levelIcon {
                        min-width: 90rpx;
                        width: 90rpx;
                        height: 32rpx;
                    }
                }
                .levelList {
                    display: flex;
                    flex-wrap: wrap;
                }
            }
        }
    }
</style>