yihuo/pages/store/safe.vue

<template>
    <view>
        <scroll-view
            class="wrapper"
            :style="{ top: top + 'px' }"
            scroll-y
            refresher-enabled
            refresher-default-style="white"
            @refresherrefresh="pullRefresh"
            :refresher-triggered="refreshing"
        >
            <view v-if="tableData && tableData.length > 0" class="paddingX14">
                <view
                    v-for="(item, index) in tableData"
                    :key="item.id"
                    class="cell"
                    @click="choose(item)"
                >
                    <view class="header">
                        <view class="titleBox">
                            <template>
                                <view class="checkBox" :class="{ check: !!checkMap[item.id] }">
                                    <view class="cuIcon-check"></view>
                                </view>
                            </template>
                            <image class="icon-title" :src="LEVEL_MAP[item.level].titleText" />
                        </view>
                        <view
                            class="lockBox"
                            @click.stop="
                                item.safeFlag !== 1 ? moveToBx(item, index) : moveOutBx(item, index)
                            "
                        >
                            {{ item.safeFlag !== 1 ? '锁定' : '解锁' }}
                            <image
                                :src="item.safeFlag !== 1 ? ossurl.mine.lock : ossurl.mine.unlock"
                                webp
                                class="lockImage"
                            />
                        </view>
                    </view>
                    <view class="flex-align paddingT14">
                        <image
                            class="icon flex-shrink0"
                            :src="item.spu.cover"
                            @click.stop="showGoodsDetail(item)"
                            mode="aspectFit"
                        />
                        <view class="flex1 marginL12">
                            <view
                                class="font4 bold paddingB13"
                                style="-webkit-line-clamp: 2;word-break: break-all;text-overflow：ellipsis"
                            >
                                {{ item.spu.name }}
                            </view>
                            <view class="flex-align-between">
                                <view class="font3" style="opacity: 0.8">
                                    从
                                    <text v-if="item.fromRelationType === 'LUCK'">宝箱</text>
                                    <text v-else-if="item.fromRelationType === 'TRADE'">魔换</text>
                                    <text v-else-if="item.fromRelationType === 'LUCK_ROOM'">
                                        福利房
                                    </text>
                                    <text v-else-if="item.fromRelationType === 'LUCK_KING'">
                                        魔王战
                                    </text>
                                    <text v-else-if="item.fromRelationType === 'LUCK_WHEEL'">
                                        魔天轮
                                    </text>
                                    <text v-else-if="item.fromRelationType === 'SUBSTITUTE'">
                                        置换
                                    </text>
                                    <text v-else-if="item.fromRelationType === 'ACTIVITY'">
                                        活动
                                    </text>
                                    <text v-else-if="item.fromRelationType === 'DOLL_MACHINE'">
                                        娃娃机
                                    </text>
                                    <text v-else>其他</text>
                                    获得
                                </view>
                                <view v-if="hide" class="flex-align-between">
                                    <view class="font4 radius2" v-if="item.magicAmount > 0">
                                        可兑换
                                        <text :style="{ color: '#FEC433' }">
                                            {{ item.magicAmount }}
                                        </text>
                                        源石
                                    </view>
                                    <view v-else class="font4 radius2">不可兑换</view>
                                </view>
                            </view>
                        </view>
                    </view>
                </view>
            </view>
            <empty v-if="isEmpty" :top="200" />
        </scroll-view>
        <image
            v-if="!isEmpty"
            :src="ossurl.mine.checkAll"
            webp
            class="check-all"
            @click="checkAll"
        />
        <view class="bottom paddingX10" v-if="!isEmpty">
            <view class="bottom-btns flex-align-center">
                <view class="applyBtn" @click="moveOutAll">移出保险柜</view>
            </view>
        </view>
        <goods-detail ref="goodsDetailRef" />
    </view>
</template>

<script>
    import empty from '@/components/empty'
    import { LEVEL_MAP } from '@/utils/config'
    import resource from '@/utils/resource'
    import ossurl from '@/utils/ossurl'
    import { throttle } from '@/utils'
    import goodsDetail from './goods_detail'

    export default {
        components: { empty, goodsDetail },
        data() {
            return {
                tableData: [],
                resource,
                ossurl,
                LEVEL_MAP,
                refreshing: false,
                checkMap: {},
                isEmpty: false
            }
        },
        computed: {
            top() {
                let height = this.$store.state.systemInfo.statusBarHeight + 36 + 50 + 10
                return height
            },
            itemWidth() {
                let width = this.$store.state.systemInfo.screenWidth
                width = (width - 8 - 40) / 3
                let height = (165 / 109) * width
                return { width, height }
            }
        },
        mounted() {
            this.loadData(true)
        },
        methods: {
            pullRefresh() {
                this.refreshing = true
                this.loadData()
            },
            async loadData(loading = false) {
                const res = await this.$service.award.store(1, 10000, 1, '', true)
                this.tableData = res
                this.checkMap = {}
                this.isEmpty = !this.tableData || this.tableData.length === 0
                setTimeout(() => {
                    this.refreshing = false
                }, 1000)
            },
            choose(item) {
                if (!!this.checkMap[item.id]) {
                    delete this.checkMap[item.id]
                } else {
                    this.checkMap[item.id] = item
                }
                this.checkMap = { ...this.checkMap }
            },
            forceChoose(item, flag, refresh = true) {
                if (flag) {
                    this.checkMap[item.id] = item
                } else {
                    delete this.checkMap[item.id]
                }
                if (refresh) {
                    this.checkMap = { ...this.checkMap }
                }
            },
            checkAll() {
                if (!this.tableData) return
                let flag = this.tableData.every((item) => !!this.checkMap[item.id])
                if (flag) {
                    this.checkMap = {}
                } else {
                    this.tableData.forEach((item) => {
                        this.forceChoose(item, true, false)
                    })
                    this.checkMap = { ...this.checkMap }
                }
            },
            showGoodsDetail(item) {
                this.$refs.goodsDetailRef.show(item.spu)
            },
            moveOutBx(item, index) {
                throttle.call(() => {
                    this.realMoveOutBx(item, index)
                })
            },
            async realMoveOutBx(item, index) {
                const res = await this.$service.award.moveOutSaveStore([item.id])
                if (res) {
                    this.tableData.splice(index, 1)
                    if (this.checkMap) {
                        delete this.checkMap[item.id]
                        this.checkMap = { ...this.checkMap }
                    }
                    this.isEmpty = !this.tableData || this.tableData.length === 0
                }
            },
            moveOutAll() {
                let values = Object.values(this.checkMap)
                if (!values || values.length === 0) {
                    this.$message.warn('请至少选择一个商品！')
                    return
                }
                throttle.call(this.realMoveOutAll)
            },
            async realMoveOutAll() {
                let values = Object.values(this.checkMap)
                let ids = values.map((item) => item.id)
                const res = await this.$service.award.moveOutSaveStore(ids)
                if (res) {
                    this.loadData(true)
                    this.isEmpty = !this.tableData || this.tableData.length === 0
                }
            }
        }
    }
</script>
<style lang="scss" scoped>
    .bg {
        position: fixed;
        z-index: -1;
        left: 0;
        right: 0;
        top: 0;
        width: 100%;
        height: 100%;
        opacity: 0.3;
    }
    .wrapper {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 168rpx;
    }
    .bottom {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        height: 168rpx;
        padding-bottom: 40rpx;
        .bottom-btns {
            height: 128rpx;
        }
        .image {
            height: 128rpx;
            width: 0;
        }
    }
    .cell {
        background: #ffffff;
        border-radius: 12rpx;
        border: 2rpx solid rgba(255, 255, 255, 0.4);
        padding: 30rpx;
        margin-bottom: 20rpx;
        position: relative;
        overflow: hidden;
        .header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            position: relative;
            border-bottom: 2rpx solid rgba(0, 0, 0, 0.05);
            padding-bottom: 28rpx;
            .titleBox {
                display: flex;
                align-items: center;
            }
            .lockBox {
                display: flex;
                align-items: center;
                font-size: 24rpx;
                font-family: Source Han Sans, Source Han Sans;
                font-weight: 350;
                color: #999999;
            }
            .lockImage {
                width: 48rpx;
                height: 48rpx;
            }
        }
        .icon {
            width: 180rpx;
            height: 180rpx;
            border-radius: 10rpx;
        }
        .icon-title {
            width: 90rpx;
            height: 32rpx;
            // margin-left: -18rpx;
        }

        .btn-bx {
            width: 180rpx;
            height: 40rpx;
            background: linear-gradient(90deg, #2affff 0%, #4d70f2 100%);
            border-radius: 20rpx;
        }
        .safe-flag {
            width: 192rpx;
            height: 120rpx;
            position: absolute;
            right: 32rpx;
        }
    }
    .check-all {
        width: 68rpx;
        height: 98rpx;
        position: fixed;
        bottom: 600rpx;
        right: 20rpx;
    }
    .checkBox {
        border: 4rpx solid #000000;
        background-color: #fff;
        color: #fff;
        width: 32rpx;
        border-radius: 4rpx;
        margin-right: 12rpx;
        height: 32rpx;
        text-align: center;
        line-height: 28rpx;
        font-size: 24rpx;
        &.check {
            background: #fec433;
            border-color: #fec433;
            color: #000;
        }
    }
    .applyBtn {
        width: 426rpx;
        height: 64rpx;
        background: #fec433;
        border-radius: 178rpx 178rpx 178rpx 178rpx;
        font-size: 28rpx;
        font-family: Source Han Sans, Source Han Sans;
        font-weight: 400;
        color: #000000;
        text-align: center;
        line-height: 64rpx;
    }
</style>