You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
148 lines
3.6 KiB
148 lines
3.6 KiB
<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>
|
|
|