敢为人鲜小程序前端代码仓库
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

1 month ago
  1. <template>
  2. <view class="my-team">
  3. <!-- 导航栏 -->
  4. <navbar title="我的团员" leftClick @leftClick="$utils.navigateBack" bgColor="#019245" color="#fff" />
  5. <!-- 团队信息展示 -->
  6. <view class="team-info-section">
  7. <!-- 店铺图片 -->
  8. <image :src="teamData.teamInfo.shopImage" mode="aspectFill" class="shop-image" />
  9. <!-- 团员数量 -->
  10. <view class="member-count">
  11. 我的团员<text class="count">{{ teamData.teamInfo.memberCount }}</text>
  12. </view>
  13. </view>
  14. <!-- 团员列表 -->
  15. <view class="member-list">
  16. <view class="member-item" v-for="member in teamData.memberList" :key="member.id">
  17. <!-- 状态点 -->
  18. <view class="status-dot"></view>
  19. <!-- 头像 -->
  20. <image :src="member.avatar" mode="aspectFill" class="member-avatar" />
  21. <!-- 团员信息 -->
  22. <view class="member-info">
  23. <view class="member-name">{{ member.nickname }}</view>
  24. <view class="join-time">注册时间: {{ member.joinTime }}</view>
  25. </view>
  26. </view>
  27. </view>
  28. </view>
  29. </template>
  30. <script>
  31. import navbar from '@/components/base/navbar.vue'
  32. import { teamData } from '@/static/js/mockTeamData.js'
  33. import shareConfig from '@/mixins/configList.js'
  34. export default {
  35. components: {
  36. navbar
  37. },
  38. mixins: [shareConfig],
  39. data() {
  40. return {
  41. teamData: null
  42. }
  43. },
  44. onLoad() {
  45. this.teamData = teamData
  46. // 设置分享信息
  47. this.Gshare = {
  48. ...this.Gshare,
  49. title: '查看我的团队成员',
  50. path: '/pages_order/mine/myTeam',
  51. identity: 1 // 确保以团长身份分享
  52. }
  53. },
  54. methods: {
  55. // 可以添加查询团员、团员管理等方法
  56. }
  57. }
  58. </script>
  59. <style lang="scss" scoped>
  60. .my-team {
  61. min-height: 100vh;
  62. background-color: #fff;
  63. }
  64. .team-info-section {
  65. display: flex;
  66. flex-direction: column;
  67. align-items: center;
  68. padding: 30rpx 0;
  69. .shop-image {
  70. width: 140rpx;
  71. height: 140rpx;
  72. border-radius: 10rpx;
  73. margin-bottom: 20rpx;
  74. }
  75. .member-count {
  76. font-size: 30rpx;
  77. color: #333;
  78. .count {
  79. color: #019245;
  80. font-weight: bold;
  81. }
  82. }
  83. }
  84. .member-list {
  85. padding: 0 30rpx;
  86. .member-item {
  87. display: flex;
  88. align-items: center;
  89. padding: 24rpx 0;
  90. border-bottom: 1rpx solid #f0f0f0;
  91. position: relative;
  92. &:last-child {
  93. margin-bottom: 30rpx;
  94. }
  95. .status-dot {
  96. position: absolute;
  97. left: 0;
  98. top: 50%;
  99. transform: translateY(-50%);
  100. width: 12rpx;
  101. height: 12rpx;
  102. border-radius: 50%;
  103. background-color: #019245;
  104. }
  105. .member-avatar {
  106. width: 80rpx;
  107. height: 80rpx;
  108. // border-radius: 50%;
  109. margin-left: 20rpx;
  110. }
  111. .member-info {
  112. margin-left: 20rpx;
  113. flex: 1;
  114. .member-name {
  115. font-size: 28rpx;
  116. color: #333;
  117. margin-bottom: 6rpx;
  118. }
  119. .join-time {
  120. font-size: 24rpx;
  121. color: #999;
  122. }
  123. }
  124. }
  125. }
  126. </style>