yihuo/pages/popularize_people/index.vue

<template>
    <page title="详情" light nav-color="transparent">

        <view v-if="data" class="top flex-align">
            <image :src="data.avatar" class="tx" />
            <view class="paddingL20">
                <view class="font6 bold color-white">{{ data.nickname }}</view>
                <view class="color-white paddingT12">
                    共拉新{{ data.quantity }}人/TOP{{ data.index }}
                </view>
            </view>
        </view>
        <view class="body">
            <view class="paddingT20 paddingB14 flex-align-center">
                <image
                    :src="require('@/static/image/popularize_flag.png')"
                    style="width: 294rpx; height: 52rpx"
                />
            </view>
            <scroll-view
                class="wrapper"
                :style="{
                    height: `calc(100vh - ${statusBarHeight} - 32px - 216rpx - 120rpx - 60rpx)`
                }"
                scroll-y
                refresher-enabled
                refresher-default-style="white"
                @scrolltolower="loadMore"
            >
                <view class="flex-wrap flex-align-between">
                    <view v-for="item in tableData" :key="item.userId" class="item flex-align">
                        <image :src="item.avatar" class="tx" />
                        <view class="paddingL12 color-white font2">{{ item.nickname }}</view>
                    </view>
                </view>
            </scroll-view>
        </view>
    </page>
</template>

<script>
import store from '@/store'
import pageMixin from '@/mixin/page'

export default {
    mixins: [pageMixin],
    data() {
        return {
            data: null,
            pageSize: 100
        }
    },
    computed: {
        statusBarHeight() {
            if (store.state.systemInfo) {
                return store.state.systemInfo.statusBarHeight + 'px'
            }
            return 20 + 'px'
        }
    },
    onLoad(options) {
        this.data = options
    },
    mounted() {
        this.refresh()
    },
    methods: {
        async loadData(loading = false) {
            const res = await this.$service.weal.popularizePeoples(
                this.pageNum,
                this.pageSize,
                this.data.userId,
                loading
            )
            return res
        }
    }
}
</script>

<style>

</style>
<style lang="scss" scoped>
.bg {
    position: fixed;
    z-index: -1;
    left: 0;
    right: 0;
    top: 0;
    width: 100%;
    height: 100%;
}
.top {
    margin: 20rpx 34rpx;
    height: 176rpx;
    background: rgba(0, 0, 0, 0.5);
    box-shadow: 0px 0px 8rpx 4rpx rgba(147, 67, 255, 0.3);
    border: 2rpx solid rgba(174, 231, 255, 0.5);
    border-radius: 12rpx;
    padding: 0 50rpx;
    .tx {
        width: 120rpx;
        height: 120rpx;
        border-radius: 60rpx;
        border: 1px solid #00a2e7;
    }
}
.body {
    margin: 0 34rpx;
    background: rgba(0, 0, 0, 0.5);
    box-shadow: 0px 0px 4px 2px rgba(147, 67, 255, 0.3);
    border: 1px solid rgba(174, 231, 255, 0.5);
    border-radius: 12rpx;
    .item {
        width: 33%;
        padding: 14rpx 0 14rpx 50rpx;
        .tx {
            width: 52rpx;
            height: 52rpx;
            border-radius: 26rpx;
            border: 1px solid #fff;
        }
    }
}
</style>