teambuy-front/pages_order/mine/myTeam.vue

<template>
    <view class="my-team">
        <!-- 导航栏 -->
        <navbar title="我的团员" leftClick @leftClick="$utils.navigateBack" bgColor="#019245" color="#fff" />
        
        <!-- 团队信息展示 -->
        <view class="team-info-section">
            <!-- 店铺图片 -->
            <image :src="teamData.teamInfo.shopImage" mode="aspectFill" class="shop-image" />
            
            <!-- 团员数量 -->
            <view class="member-count">
                我的团员：<text class="count">{{ teamData.teamInfo.memberCount }}</text>人
            </view>
        </view>
        
        <!-- 团员列表 -->
        <view class="member-list">
            <view class="member-item" v-for="member in teamData.memberList" :key="member.id">
                <!-- 状态点 -->
                <view class="status-dot"></view>
                
                <!-- 头像 -->
                <image :src="member.avatar" mode="aspectFill" class="member-avatar" />
                
                <!-- 团员信息 -->
                <view class="member-info">
                    <view class="member-name">{{ member.nickname }}</view>
                    <view class="join-time">注册时间: {{ member.joinTime }}</view>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
import navbar from '@/components/base/navbar.vue'
import { teamData } from '@/static/js/mockTeamData.js'
import shareConfig from '@/mixins/configList.js'

export default {
    components: {
        navbar
    },
    mixins: [shareConfig],
    data() {
        return {
            teamData: null
        }
    },
    onLoad() {
        this.teamData = teamData
        
        // 设置分享信息
        this.Gshare = {
            ...this.Gshare,
            title: '查看我的团队成员',
            path: '/pages_order/mine/myTeam',
            identity: 1 // 确保以团长身份分享
        }
    },
    methods: {
        // 可以添加查询团员、团员管理等方法
    }
}
</script>

<style lang="scss" scoped>
.my-team {
    min-height: 100vh;
    background-color: #fff;
}

.team-info-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 30rpx 0;
    
    .shop-image {
        width: 140rpx;
        height: 140rpx;
        border-radius: 10rpx;
        margin-bottom: 20rpx;
    }
    
    .member-count {
        font-size: 30rpx;
        color: #333;
        
        .count {
            color: #019245;
            font-weight: bold;
        }
    }
}

.member-list {
    padding: 0 30rpx;
    
    .member-item {
        display: flex;
        align-items: center;
        padding: 24rpx 0;
        border-bottom: 1rpx solid #f0f0f0;
        position: relative;
        
        &:last-child {
            margin-bottom: 30rpx;
        }
        
        .status-dot {
            position: absolute;
            left: 0;
            top: 50%;
            transform: translateY(-50%);
            width: 12rpx;
            height: 12rpx;
            border-radius: 50%;
            background-color: #019245;
        }
        
        .member-avatar {
            width: 80rpx;
            height: 80rpx;
            // border-radius: 50%;
            margin-left: 20rpx;
        }
        
        .member-info {
            margin-left: 20rpx;
            flex: 1;
            
            .member-name {
                font-size: 28rpx;
                color: #333;
                margin-bottom: 6rpx;
            }
            
            .join-time {
                font-size: 24rpx;
                color: #999;
            }
        }
    }
}
</style>