yihuo/pages/weal/catch_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>
                <view v-if="data && data.length > 0">
                    <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  marginL12 flex1">
                                    {{ item.nickname }}
                                </view>
                                <view class="font2  marginL12 flex1">获得了</view>
                                <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>
                <empty v-else :top="150" />
            </view>
        </view>
    </view>
</template>

<script>
import resource from '@/utils/resource'
import empty from '@/components/empty'

export default {
    components: { empty },
    data() {
        return {
            resource,
            visible: false,
            data: [],
            refreshing: false,
            requesting: false,
            current: 1,
            size: 20
        }
    },
    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.current = 1
            this.refreshing = true
            this.data = []
            this.getData()
        },
        loadMore() {
            if (this.requesting) return
            if (this.data.length > 0 && this.data.length % this.size === 0) {
                this.current += 1
                this.getData()
            }
        },
        async getData() {
            this.requesting = true
            const res = await this.$service.weal.prizeReslut({
                current: this.current,
                size: this.size
            })
            this.refreshing = false
            if (res.records && res.records.length > 0) {
                this.data.push(...res.records)
            }
            this.requesting = false
        },
        close() {
            this.current = 1
            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 2px 2px !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 {
            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>