caimei-applets-caimei/pages/seller/club/team-list.vue

<template>
    <view class="container club clearfix">
        <tui-skeleton v-if="skeletonShow" backgroundColor="#fafafa" borderRadius="10rpx" :isLoading="true"
            :loadingType="5" />
        <template v-else>
            <view class="club-main">
                <view v-if="isEmpty" class="empty-container">
                    <image class="club-empty-image"
                        src="https://img.caimei365.com/group1/M00/03/71/Cmis2F3wna6AY2ZjAABpmnBICH4247.png"
                        mode="aspectFit"></image>
                    <view class="txt">暂无数据~</view>
                </view> 
                <view v-else class="club-list">
                    <scroll-view scroll-y="true" class="club-list-main">
                        <view class="list" v-for="(team, index) in teamList" :key="index">
                            <view class="club-list-top">
                                <view class="list-left">
                                    <view class="list-head">
                                        <image src="https://static.caimei365.com/app/img/icon/default-head-new.png"  mode=""></image>
                                    </view>
                                </view>
                                <view class="list-item">
                                    <view class="list-title">
                                        <text class="list-name"> {{ team.linkMan }} </text>
                                    </view>
                                </view>
                            </view>
                            <view class="club-list-bot">
                                <view class="btn" @click.stop="handleClickOper(1, team)">
                                    组员订单
                                </view>
                                <view class="btn" @click.stop="handleClickOper(2, team)">
                                    组员机构
                                </view>
                            </view>
                        </view>
                    </scroll-view>
                </view>
            </view>
        </template>
    </view>
</template>

<script>
    export default {
        components: {},
        data() {
            return {
                skeletonShow:true,
                isShowClose: false,
                isEmpty: false,
                nomoreText: '上拉显示更多',
                hasNextPage: false,
                loadding: false,
                pullUpOn: true,
                pullFlag: true,
                scrollHeight: '',
                currPage: '', //当前页面
                prevPage: '', //上一个页面
                teamList: [],
                currentIndex: 0
            }
        },
        onLoad() {},
        methods: {
            async initGetStotage() {
                // 初始化
                const userInfo = await this.$api.getStorage()
                this.userSellerServiceTeam(userInfo.serviceProviderId)
                setTimeout(()=>{
                    this.skeletonShow = false
                },1000)
            },
            searchClubList() {
                // 搜索
                this.userSellerServiceTeam()
            },
            async userSellerServiceTeam(spId) {
            	//获取组员服务商列表
            	try{
            		const res = await this.SellerService.userSellerServiceTeam({ spId: spId })
            		this.teamList = res.data
            	}catch(e){
            		console.log('=========>获取组员服务商列表异常')
            	}
            },
            handleClickOper(type, team) {
                const pathMap = {
                    1: `/pages/seller/order/order-team-list?groupServiceId=${team.serviceProviderId}&name=${team.name}`,
                    2: `/pages/seller/club/club-team-list?groupServiceId=${team.serviceProviderId}&name=${team.name}`,
                }
                this.$api.navigateTo(pathMap[type])
            },
            handleShowBubble(club, index) {
                this.currentIndex = index
                club.bubble = !club.bubble
            }
        },
        onShow() {
            this.initGetStotage()
        }
    }
</script>

<style lang="scss">
    page {
        height: auto;
    }

    page,
    .container {
        /* padding-bottom: 120upx; */
        background: #f7f7f7;
    }

    .container {
        position: relative;
    }

    .club-main {
        padding-top: 0rpx;
        .club-list{
            width: 100%;
            padding: 20rpx 0;
            .club-list-main{
                width: 100%;
                box-sizing: border-box;
                padding: 0 24rpx;
                .list {
                    align-items: center;
                    width: 100%;
                    height: auto;
                    padding: 18rpx 20rpx;
                    background: #ffffff;
                    position: relative;
                    float: left;
                    margin-bottom: 20rpx;
                    box-sizing: border-box;
                    border-radius: 24rpx;
                    .club-list-top {
                        width: 100%;
                        height: 100rpx;
                        float: left;
                        display: flex;
                        align-items: center;
                
                        .list-left {
                            height: 100rpx;
                            flex: 1;
                            margin-right: 15rpx;
                
                            .list-head {
                                width: 100rpx;
                                height: 100rpx;
                                border-radius: 50%;
                
                                image {
                                    width: 100rpx;
                                    height: 100rpx;
                                    border-radius: 50%;
                                }
                            }
                        }
                
                        .list-item {
                            height: 100rpx;
                            flex: 8;
                            display: flex;
                            flex-direction: column;
                
                            .list-title {
                                flex: 2;
                                line-height: 100rpx;
                                width: 100%;
                                font-size: $font-size-28;
                                color: $text-color;
                                padding-left: 11rpx;
                                flex-direction: row;
                                justify-content: flex-start;
                
                                .list-name {
                                    min-width: 100rpx;
                                    display: block;
                                    float: left;
                                    text-align: left;
                                    -o-text-overflow: ellipsis;
                                    text-overflow: ellipsis;
                                    display: -webkit-box;
                                    word-break: break-all;
                                    -webkit-box-orient: vertical;
                                    -webkit-line-clamp: 1;
                                    overflow: hidden;
                                }
                
                                .tags {
                                    display: inline-block;
                                    height: 36rpx;
                                    padding: 0 15rpx;
                                    border-radius: 8rpx;
                                    background: #f0cb72;
                                    font-size: $font-size-22;
                                    color: #4e4539;
                                    text-align: center;
                                    line-height: 36rpx;
                                    margin-left: 10rpx;
                                    margin-right: 10rpx;
                
                                    &.sv {
                                        background: #333333;
                                        color: #f0cb72;
                                    }
                                }
                
                                .list-hist {
                                    display: block;
                                    float: right;
                                    color: #999999;
                                    font-size: $font-size-24;
                                    text-align: right;
                                    padding-right: 30rpx;
                
                                    .icon-dingdanliebiao {
                                        font-size: $font-size-30;
                                        color: #999999;
                                    }
                                }
                            }
                
                            .list-opea {
                                width: 100%;
                                display: flex;
                                flex: 4;
                                color: #166ce1;
                                flex-direction: row;
                                align-items: center;
                
                                .tags {
                                    display: inline-block;
                                    height: 36rpx;
                                    padding: 0 15rpx;
                                    border-radius: 8rpx;
                                    background: #f0cb72;
                                    font-size: $font-size-22;
                                    color: #4e4539;
                                    text-align: center;
                                    line-height: 36rpx;
                                    margin-left: 10rpx;
                                    margin-right: 10rpx;
                
                                    &.sv {
                                        background: #333333;
                                        color: #f0cb72;
                                    }
                
                                    &.sm {
                                        display: inline-block;
                                        height: 36rpx;
                                        box-sizing: border-box;
                                        padding: 0 8rpx 0 15rpx;
                                        border-radius: 8rpx;
                                        background: #faede5;
                                        font-size: $font-size-22;
                                        color: $color-system;
                                        text-align: center;
                                        line-height: 36rpx;
                                        margin-right: 10rpx;
                
                                        .icon-xiayibu {
                                            font-size: 20rpx;
                                            margin-left: 10rpx;
                                        }
                                    }
                                }
                            }
                        }
                    }
                
                    .club-list-bot {
                        width: 100%;
                        height: 60rpx;
                        float: left;
                        border-radius: 8rpx;
                        .btn {
                            height: 62rpx;
                            box-sizing: border-box;
                            line-height: 63rpx;
                            padding: 0 30rpx;
                            font-size: $font-size-24;
                            background: #ffffff;
                            color: #666666; 
                            text-align: center;
                            float: right;
                            position: relative;
                            border-radius: 40rpx;
                            margin: 0 10rpx;
                            box-sizing: border-box;
                            border: 1px solid #e1e1e1;
                            &.buy{
                                background:$btn-confirm;
                                color: #FFFFFF;
                            }
                        }
                    }
                }
            }
        }
    }
</style>