yihuo/pages/award_detail/record.vue

<template>
    <view class="cu-modal bottom-modal" :class="{ show: visible }">
        <view class="mask" @click="close"></view>
        <view class="wrapper cu-dialog">
            <view :style="{ height: wrapperWidth + 'rpx' }">
                <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: wrapperWidth - 132 + 'rpx' }"
                    :scroll-y="true"
                    refresher-enabled
                    refresher-default-style="white"
                    @refresherrefresh="refresh"
                    :refresher-triggered="refreshing"
                    @scrolltolower="loadMore"
                >
                    <view>
                        <view v-for="(item, index) in data" class="item flex-align" :key="index">
                            <image :src="item.avatar || resource.defaultAvatar" class="icon" />
                            <view class="font2 color-black marginL12 flex1">
                                {{ item.nickname }}
                            </view>
                            <image
                                :src="LEVEL_MAP[item.level].titleText"
                                class="marginL20"
                                style="width: 90rpx; height: 32rpx"
                            />
                            <view
                                class="marginL20 font2 line-ellipsis"
                                style="width: 30%;color:#FEC433;"
                            >
                                {{ item.name }}
                            </view>
                            <image :src="item.cover" class="image marginL20" />
                        </view>
                    </view>
                </scroll-view>
            </view>
        </view>
    </view>
</template>

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

    const Tabs = [
        { title: '全部', value: '' },
        { title: '超神款', value: 'A' },
        { title: '欧皇款', value: 'B' },
        { title: '隐藏款', value: 'C' },
        { title: '普通款', value: 'D' }
    ]
    export default {
        components: { tabbar3 },
        props: {
            poolId: [Number,String]
        },
        data() {
            return {
                resource,
                LEVEL_MAP,
                visible: false,
                lastId: null,
                data: [],
                refreshing: false,
                requesting: false,
                tabs: Tabs,
                tab: Tabs[0]
            }
        },
        computed: {
            wrapperWidth() {
                return (this.$store.state.systemInfo.screenHeight / 3) * 2 * 2
            }
        },
        methods: {
            show() {
                this.visible = true
                this.data = []
                this.refresh()
            },
            refresh() {
                if (this.requesting) return
                this.lastId = null
                this.refreshing = true
                this.getData()
            },
            loadMore() {
                if (this.requesting) return
                this.getData()
            },
            async getData() {
                this.requesting = true
                const res = await this.$service.award.buyRecord(
                    this.poolId,
                    this.lastId,
                    this.tab.value
                )
                this.refreshing = false
                if (res && res.length > 0) {
                    this.data = !!this.lastId ? this.data.concat(res) : res
                    this.lastId = res[res.length - 1].id
                }
                this.requesting = false
            },
            clickTab(item) {
                this.tab = item
                this.refresh(true)
            },
            close() {
                this.visible = false
                this.$emit('close', false)
            }
        }
    }
</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;
        overflow: hidden;
        .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 {
            padding: 0 16rpx 0 40rpx;
            margin: 0 28rpx 20rpx 28rpx;
            height: 116rpx;
            border-radius: 8rpx;
            background: #FFF7E3;
            .icon {
                width: 64rpx;
                height: 64rpx;
                border-radius: 50%;
            }
            .image {
                width: 48rpx;
                height: 48rpx;
                border-radius: 24rpx;
                background-color: #fff;
            }
        }
    }
</style>