caimei-applets-caimei/pages/seller/remarks/institutional-activity-analysis.vue

<template>
    <view class="container club clearfix">
        <view
            class="club-search clearfix"
            :style="{ paddingTop: StatusBar + 'px', backgroundImage: `url(${imgUrl})`, backgroundSize: '100% 100%' }"
        >
            <view class="search-top" :style="{ height: CustomBar - StatusBar + 'px' }">
                <view
                    class="search-icon"
                    :style="{
                        width: CustomBar - StatusBar + 'px',
                        height: CustomBar - StatusBar + 'px',
                        lineHeight: CustomBar - StatusBar + 'px;'
                    }"
                >
                    <text @click="handleNavigateBack" class="iconfont icon-fanhui"></text>
                </view>
                <view class="title">机构活跃分析</view>
            </view>
            <analysis-card :analysis-info="dataList" />
        </view>
        <view class="analysis-list">
            <view class="analysis-tabs">
                <view
                    class="analysis-tab"
                    :class="currentTab === item.id && 'active'"
                    v-for="(item, index) in tabs"
                    :key="item.id"
                    @click="handleChangeActive(item.id)"
                >
                    {{ item.name }}
                </view>
            </view>
            <view class="list">
                <activity-analysis v-for="(item, index) in clubList" :key="index" :clubInfo="item" />
            </view>
        </view>
    </view>
</template>

<script>
import analysisCard from './components/analysis-card.vue'
import activityAnalysis from './components/activity-analysis.vue'
export default {
    components: {
        analysisCard,
        activityAnalysis
    },
    data() {
        return {
            isIphoneX: this.$store.state.isIphoneX,
            CustomBar: this.CustomBar,
            StatusBar: this.StatusBar,
            capsule: this.capsule,
            imgUrl: 'https://static.caimei365.com/app/img/icon/analysis-bg.png',
            userInfo: {},
            currentTab: 4,
            tabs: [
                {
                    id: 4,
                    name: '活跃机构'
                },
                {
                    id: 5,
                    name: '不活跃机构'
                }
            ],
            dataList: {},
            clubList: [], // 机构列表
            pageNum: 1,
            isLastPage: true // 是否是最后一页
        }
    },
    mounted() {
        this.userInfo = uni.getStorageSync('userInfo')
        this.getLivelyClub()
        this.getClubList()
    },
    watch: {
        currentTab(val) {
            if (val) {
                this.pageNum = 1
                this.clubList = []
                this.getClubList()
            }
        }
    },
    onReachBottom() {
        if (!this.isLastPage) {
            this.pageNum++
            this.getClubList()
        }
        console.log('触底刷新')
    },
    methods: {
        handleChangeActive(e) {
            this.currentTab = e
        },
        handleNavigateBack() {
            this.$api.navigateBack(1)
        },
        // 获取机构活跃分析占比
        async getLivelyClub() {
            const { data: data } = await this.SellerService.getLivelyClub({ spId: this.userInfo.serviceProviderId })
            this.dataList = data
        },
        // 获取机构列表
        async getClubList() {
            const { data } = await this.SellerService.getClubList({
                spId: this.userInfo.serviceProviderId,
                status: 90,
                type: this.currentTab,
                pageNum: this.pageNum,
                pageSize: 10
            })
            this.clubList = [...this.clubList, ...data.clubList.list]
            this.isLastPage = data.clubList.isLastPage
        }
    }
}
</script>

<style lang="scss" scoped>
.container {
    background: #ffffff;
    position: relative;
}
.club-search {
    height: 700rpx;
    width: 100%;
    background: #ffffff;
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 99;
    box-sizing: border-box;
    .search-top {
        display: flex;
        align-items: center;
        box-sizing: border-box;
        position: relative;
        margin-bottom: 80rpx;
        .title {
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
        }
        .search-icon {
            text-align: center;
            float: left;
            .icon-fanhui {
                font-size: 44rpx;
                color: #333333;
            }
            .icon-shouye {
                font-size: 44rpx;
                color: #333333;
            }
        }
    }
}
.analysis-list {
    padding: 38rpx 24rpx;
    box-sizing: border-box;
    .list {
        margin-top: 740rpx;
    }
    .analysis-tabs {
        color: #666666;
        display: flex;
        align-items: center;
        margin-bottom: 12rpx;
        position: fixed;
        background: #fff;
        width: 100%;
        height: 100rpx;
        top: 700rpx;
        .analysis-tab {
            font-size: 32rpx;
            height: 54rpx;
            margin-right: 80rpx;
            &.active {
                color: #ff5b00;
                border-bottom: 2px solid #ff5b00;
                font-weight: bold;
            }
        }
    }
}
</style>