yihuo/pages/award_detail_yfs/num_choose.vue

<template>
    <view class="cu-modal bottom-modal" :class="{ show: visible }" v-if="visible">
        <view class="mask" @click="close"></view>
        <view class="wrapper cu-dialog">
            <view>
                <view class="title">
                    自由超神
                    <view class="close" @click="close">
                        <text class="cuIcon-close"></text>
                    </view>
                </view>
            </view>
            <view class="flex-align-center font2 paddingY5">
                <view class="bold">
                    第
                    <text style="color: #FFE957;">{{ box.number }}</text>
                    /{{ box.lastNumber }}盒
                </view>
            </view>
            <tabbar4
                v-if="tabs"
                custom-class="marginX10 marginB10"
                :tabs="tabs"
                @change="clickTab"
            />
            <scroll-view ref="scrollRef" style="height: 888rpx" scroll-y :scroll-top="scrollTop">
                <view class="flex-wrap" v-if="tab">
                    <view
                        v-for="item in tab.data"
                        :key="item"
                        @click="choose(item)"
                        class="item flex-column-align-center"
                        :class="[
                            !!checkMap[item] && 'active',
                            !!useMap[item] && 'level',
                            !!lockMap[item] && 'invalid'
                        ]"
                        :style="{ width: itemWidth + 'px', height: itemWidth / 2 + 'px' }"
                    >
                        <div v-if="useMap[item]" class="flex-column-align-center">
                            <div class="font0 bold" style="opacity: 0.5">{{ item }}号</div>
                            <view
                                class="levelTitle"
                                :style="{ color: LEVEL_MAP[useMap[item]].color }"
                            >
                                {{ LEVEL_MAP[useMap[item]].title }}
                            </view>
                        </div>
                        <div v-else>{{ item }}号</div>
                        <view class="checkIcon" v-if="!!checkMap[item]">
                            <text class="cuIcon-check"></text>
                        </view>
                        <view class="checkIcon" v-if="!!lockMap[item]">
                            <text class="cuIcon-lock"></text>
                        </view>
                    </view>
                </view>
            </scroll-view>
            <view class="paddingB20">
                <scroll-view scroll-x class="scroll-content paddingX9 marginT10 marginB2">
                    <view v-for="item in chooseData" :key="item" class="cell marginX5 selectItem">
                        <div class="flex-align-between height100">
                            <div class="font2">{{ item }}号</div>
                            <view class="closeBtn" @click="deleteChoose(item)">
                                <text class="cuIcon-close"></text>
                            </view>
                        </div>
                    </view>
                </scroll-view>
                <view class="btnBox">
                    <view class="relative btn" :style="{ backgroundImage: 'url(' + ossurl.mine.butbj + ')' }" @click="preview">
                        确定选择
                        <view class="text">
                            已选择
                            <span class="num">({{ chooseData.length }})</span>
                            发
                        </view>
                    </view>
                </view>
            </view>
        </view>
    </view>
</template>

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

    export default {
        components: { tabbar4 },
        props: {
            poolId: [Number,String]
        },
        data() {
            return {
				ossurl,
                LEVEL_MAP,
                resource,
                visible: false,
                data: [],
                tabs: null,
                tab: null,
                box: null,
                value: 10,
                checkMap: {},
                useMap: {},
                lockMap: {},
                scrollTop: 0
            }
        },
        computed: {
            itemWidth() {
                if (!this.$store.state.systemInfo) {
                    return 60
                }
                let width = (this.$store.state.systemInfo.screenWidth - 28 - 12 * 4) / 5
                return Math.floor(width)
            },
            chooseData() {
                let array = Object.values(this.checkMap)
                return array
            }
        },
        methods: {
            isShow() {
                return this.visible
            },
            show(box) {
                this.$parent.$parent.lock = true
                this.visible = true
                this.box = box
                setTimeout(() => {
                    this.getData()
                }, 0)
                setTimeout(() => {
                    this.handleTab()
                }, 310)
                this.$event.on(this.$event.key.NUM_REFRESH, this.getData)
            },
            close() {
                this.$parent.$parent.lock = false
                this.data = []
                this.box = null
                this.tabs = null
                this.tab = null
                this.visible = false
                this.checkMap = {}
                this.useMap = {}
                this.lockMap = {}
                this.$emit('close', false)
                this.$event.off(this.$event.key.NUM_REFRESH)
            },
            handleTab() {
                let totalData = []
                for (let i = 1; i <= this.box.quantity; i++) {
                    totalData.push(i)
                }
                const Tabs = []
                let count =
                    Math.floor(this.box.quantity / 100) + (this.box.quantity % 100 > 0 ? 1 : 0)
                for (let i = 0; i < count; i++) {
                    let title = `${100 * i + 1}~${100 * i + 100}`
                    if (100 * (i + 1) > totalData.length) {
                        title = `${100 * i + 1}~${totalData.length}`
                    }
                    Tabs.push({
                        title: title,
                        value: i + 1,
                        data: totalData.slice(100 * i, 100 * (i + 1))
                    })
                }
                this.tabs = Tabs
                this.tab = Tabs[0]
            },
            async getData() {
                let startSeatNumber = 1
                let endSeatNumber = 100
                if (this.tab) {
                    let data = this.tab.data
                    startSeatNumber = data[0]
                    endSeatNumber = data[data.length - 1]
                }
                const res = await this.$service.award.unavaliableSeatNumbers(
                    this.poolId,
                    this.box.number,
                    startSeatNumber,
                    endSeatNumber
                )
                if (res) {
                    let nums = []
                    if (res.usedSeatNumbers) {
                        let map = {}
                        res.usedSeatNumbers.forEach((item) => {
                            map[item.seatNumber] = item.level
                            nums.push(item.seatNumber)
                        })
                        setTimeout(() => {
                            this.useMap = map
                        }, 0)
                    }
                    if (res.applyedSeatNumbers) {
                        let map = {}
                        res.applyedSeatNumbers.forEach((item) => {
                            map[item] = item
                            nums.push(item)
                        })
                        setTimeout(() => {
                            this.lockMap = map
                        }, 0)
                    }
                    if (nums && nums.length > 0) {
                        this.handleDuplicate(nums)
                    }
                }
            },
            clickTab(item) {
                this.tab = item
                this.getData()
                this.scrollTop = this.scrollTop == 1 ? 0 : 1
            },
            choose(item) {
                if (this.useMap[item] || this.lockMap[item]) {
                    return
                }
                if (this.checkMap[item]) {
                    delete this.checkMap[item]
                } else {
                    if (this.chooseData && this.chooseData.length >= 50) {
                        this.$message.warn('最多不超过50发')
                        return
                    }
                    this.checkMap[item] = item
                }
                this.checkMap = { ...this.checkMap }
            },
            deleteChoose(item) {
                delete this.checkMap[item]
                this.checkMap = { ...this.checkMap }
            },
            handleDuplicate(nums) {
                nums.forEach((item) => {
                    delete this.checkMap[item]
                })
                this.checkMap = { ...this.checkMap }
            },
            async preview() {
                if (!this.$common.isLogin()) {
                    this.$router.push('login')
                    return
                }
                if (!this.chooseData || this.chooseData.length <= 0) {
                    this.$message.warn('请选择号码')
                    return
                }
                const res = await this.$service.award.preview(
                    this.poolId,
                    this.chooseData.length,
                    this.box.number,
                    this.chooseData
                )
                if (res) {
                    if (res.duplicateSeatNumbers && res.duplicateSeatNumbers.length > 0) {
                        this.$message.alert(`${res.duplicateSeatNumbers.join(',')}号被占用`)
                        this.handleDuplicate(res.duplicateSeatNumbers)
                        this.getData()
                        return
                    }
                    this.$emit('pay', { res, chooseNum: this.chooseData, boxNum: this.box.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 10rpx 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 {
            margin: 7px 6px;

            background: #FFE957;
            border-radius: 4rpx;
            font-size: 24rpx;
            color: #000;
            position: relative;
            .levelTitle {
                font-size: 20rpx;
            }
            &.active {
            }
            &.level {
                background: #e8e8e8;
            }
            &.invalid {
                background: rgba(98, 99, 115, 0.3);
                box-shadow: none;
                color: rgba(255, 255, 255, 0.3);
                border: none;
            }
            .checkIcon {
                width: 32rpx;
                height: 28rpx;
                color: #FFE957;
                background: #000;
                border-radius: 12rpx 0 0 0;
                text-align: center;
                position: absolute;
                right: 0;
                bottom: 0;
            }
        }
    }
    .scroll-content {
        position: relative;
        height: 60rpx;
        white-space: nowrap;
        width: 100%;
        .cell {
            display: inline-block;
            overflow: hidden;
            width: 60px;
            height: 30px;
            border-radius: 4rpx;
            padding: 0 7px;
        }
        .selectItem {
            background: #FFE957;
            .closeBtn {
                color: #000;
                background: rgba(255, 255, 255, 0.3);
                border-radius: 50%;
                padding: 4rpx;
                margin-left: 12rpx;
            }
        }
    }
    .btnBox {
        color: #000;

        .btn {
            width: 358rpx;
            height: 80rpx;
            padding-top: 10rpx;
            font-size: 28rpx;
            text-align: center;
            border-radius: 178rpx 178rpx 178rpx 178rpx;
            font-weight: bold;
          margin: auto;
            line-height: 40rpx;
            .text {
                font-size: 20rpx;
                font-family: Source Han Sans, Source Han Sans;
                font-weight: 350;
                color: #000000;
                width: 100%;

                line-height: 20rpx;
            }
        }
    }
</style>