yihuo/pages/pull_new_user/people_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 class="paddingY20 flex-align-center relative">
                    <view class="">邀请详情</view>
                    <image :src="resource.icon_x" class="x" @click="close" />
                </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="font4 marginL10">
                                    {{ item.promotedNickName }}
                                </view>
                                <view class="flex1"></view>
                                <view
                                    class="marginL40 font4"
                                >
                                    {{ item.createTime }}
                                </view>
                            </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.wallet.getPullNewUserPeoples(this.current, 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: 20px 20px 0 0 !important;
    .title {
        width: 172rpx;
        height: 28rpx;
    }
    .x {
        position: absolute;
        right: 28rpx;
        top: 50%;
        margin-top: -16rpx;
        width: 32rpx;
        height: 32rpx;
    }
    .item {
        padding: 0 16rpx 0 40rpx;
        margin-right: 32rpx;
        height: 100rpx;
        .icon {
            width: 64rpx;
            height: 64rpx;
            border-radius: 32rpx;
        }
        .image {
            width: 84rpx;
            height: 84rpx;
            border-radius: 8rpx;
        }
    }
}
</style>