yihuo/pages/store-choose/index.vue

<template>
    <page title="选择商品" ref="pageRef" nav-color="#fff">
        <tabbar2 custom-class="marginX14 marginT10" :tabs="tabs" @change="clickTab" />
        <scroll-view
            class="scroll"
            :style="{ top: top + 'px' }"
            scroll-y
            refresher-enabled
            refresher-default-style="white"
            @refresherrefresh="pullRefresh"
            :refresher-triggered="refreshing"
            @scrolltolower="loadMore"
        >
            <view v-if="tableData && tableData.length > 0" class="paddingX14">
                <view
                    v-for="item in tableData"
                    :key="item.id"
                    class="cell flex-align"
                    @click="choose(item)"
                >
                    <image
                        class="icon flex-shrink0"
                        :src="item.spu.cover"
                        @click.stop="showGoodsDetail(item)"
                        mode="aspectFit"
                    />
                    <view class="flex1 marginL12 flex-column-around self-stretch">
                        <view
                            class="font4 bold"
                            style="-webkit-line-clamp: 2;word-break: break-all;text-overflow：ellipsis"
                        >
                            {{ item.spu.name }}
                        </view>
                        <image class="icon-title" :src="LEVEL_MAP[item.level].titleText" />
                        <view class="flex-align">
                            <view class="font4 radius2">
                                可兑换
                                <text :style="{ color: LEVEL_MAP[item.level].bgColor }">
                                    {{ item.magicAmount }}
                                </text>
                                源石
                            </view>
                        </view>
                    </view>
                    <image
                        class="check"
                        v-if="!!goodsMap[item.id]"
                        :src="resource.icon_check"
                        mode="scaleToFill"
                    />
                    <view class="un-check" v-else></view>
                </view>
            </view>
            <empty v-if="isEmpty" :top="200" />
        </scroll-view>
        <image
            v-if="!single"
            :src="ossurl.mine.checkAll"
            webp
            class="check-all"
            @click="chooseAll"
        />
        <view class="bottom-wrapper flex-align-center">
            <view class="btn-create relative" @click="submit">
                <view class="btn">
                    {{ single || type == 1 ? '确定' : '确认选择放入赠品池' }}
                </view>
                <view v-if="!(single || type == 1)" class="text">{{ tip }}</view>
            </view>
        </view>
    </page>
</template>

<script>
    import resource from '@/utils/resource'
    import ossurl from '@/utils/ossurl'
    import pageMixin from '@/mixin/page'
    import empty from '@/components/empty'
    import { LEVEL_MAP } from '@/utils/config'
    import goodsDetail from './../store/goods_detail'
    import tabbar2 from '@/components/tabbar2'

    const Tabs = [
        { title: '全部', value: '' },
        { title: '普通', value: 'D' },
        { title: '隐藏', value: 'C' },
        { title: '欧皇', value: 'B' },
        { title: '超神', value: 'A' },
        { title: '其他', value: 'OTHER' }
    ]
    export default {
        mixins: [pageMixin],
        components: { empty, goodsDetail, tabbar2 },
        data() {
            return {
                resource,
                ossurl,
                LEVEL_MAP,
                refreshing: false,
                goodsMap: {},
                tip: '',
                tab: Tabs[0],
                tabs: Tabs,
                single: false,
                type: 0
            }
        },
        computed: {
            top() {
                let height = this.$store.state.systemInfo.statusBarHeight + 36 + 45
                return height
            }
        },
        onLoad(options) {
            this.single = !!options.single
            this.type = options.type || 0
        },
        mounted() {
            let map = this.$cache.get(this.$cache.key.STORE_CHOOSE, this.goodsMap) || {}
            this.goodsMap = map
            this.$cache.remove(this.$cache.key.STORE_CHOOSE)
            this.refresh(true)
            this.cacuTip()
        },
        methods: {
            clickTab(item) {
                this.tab = item
                this.refresh(true)
            },
            pullRefresh() {
                this.refreshing = true
                this.refresh()
            },
            async loadData(loading = false) {
                const res = await this.$service.award.store(
                    this.pageNum,
                    this.pageSize,
                    0,
                    this.tab.value,
                    loading
                )
                setTimeout(() => {
                    this.refreshing = false
                }, 1000)
                return res
            },
            choose(item) {
                if (this.single) {
                    this.goodsMap = { [item.id]: item }
                    this.cacuTip()
                    return
                }
                if (!!this.goodsMap[item.id]) {
                    delete this.goodsMap[item.id]
                } else {
                    this.goodsMap[item.id] = item
                }
                this.goodsMap = { ...this.goodsMap }
                this.cacuTip()
            },
            forceChoose(item, flag, refresh = true) {
                if (flag) {
                    this.goodsMap[item.id] = item
                } else {
                    delete this.goodsMap[item.id]
                }
                if (refresh) {
                    this.goodsMap = { ...this.goodsMap }
                    this.cacuTip()
                }
            },
            chooseAll() {
                let flag = this.tableData.every((item) => !!this.goodsMap[item.id])
                if (flag) {
                    this.goodsMap = {}
                } else {
                    this.tableData.forEach((item) => {
                        this.forceChoose(item, true, false)
                    })
                    this.goodsMap = { ...this.goodsMap }
                }
                this.cacuTip()
            },
            cacuTip() {
                let list = Object.values(this.goodsMap)
                let total = 0
                list.forEach((item) => {
                    total += item.magicAmount
                })
                if (!list || list.length === 0) return (this.tip = '')
                this.tip = `已选${list.length}件，价值${total}源石`
            },
            submit() {
                this.$event.emit(this.$event.key.STORE_CHOOSE, this.goodsMap)
                this.$router.back()
            }
        }
    }
</script>
<style></style>
<style lang="scss" scoped>
    .bg {
        position: fixed;
        z-index: -1;
        left: 0;
        right: 0;
        top: 0;
        width: 100%;
        height: 100%;
        opacity: 0.3;
    }
    .scroll {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 176rpx;
        padding-top: 10rpx;
    }

    .bottom-wrapper {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        background-color: #fff;
        padding-bottom: 48rpx;
        padding-top: 20rpx;
    }
    .btn-create {
        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;
        .text {
            text-align: center;
            color: #000;
            font-size: 24rpx;
        }
    }
    .check-all {
        width: 68rpx;
        height: 98rpx;
        position: fixed;
        bottom: 400rpx;
        right: 20rpx;
    }
    .cell {
        background: #fff;
        border-radius: 16rpx 4rpx 16rpx 16rpx;
        padding: 30rpx;
        margin-bottom: 20rpx;
        position: relative;
        overflow: hidden;
        .icon {
            width: 180rpx;
            height: 180rpx;
            border-radius: 10rpx;
        }
        .icon-title {
            width: 90rpx;
            height: 32rpx;
        }
        .un-check {
            width: 32rpx;
            height: 32rpx;
            background: rgba($color: #fff, $alpha: 0.5);
            position: absolute;
            right: 0;
            top: 0;
        }
        .check {
            width: 32rpx;
            height: 32rpx;
            position: absolute;
            right: 0;
            top: 0;
        }
    }
    .tabs {
        height: 32px;
        background: rgba(0, 0, 0, 0.4);
        box-shadow: 0px 0px 5px 0px rgba(167, 110, 244, 0.5);
        border-radius: 4px;
        border: 1px solid rgba(255, 255, 255, 0.2);
    }
</style>