我的团队

src/pageMerchant/storeModule/myTeam.vue

@@ -1,122 +1,165 @@
-<template>
-  <view class="container">
-    <view class="top-img-box">
-      <img class="top-img" src="@/static/QR57a.jpg" alt="" />
-      <view class="top-name"> My Team </view>
-    </view>
-
-    <view class="group-item-box">
-      <view class="item-top">
-        <view class="top-l">团队成员</view>
-        <view class="top-r">
-          <u-icon name="arrow-right" color="#C0C0C0" size="16"></u-icon>
-        </view>
-      </view>
-      <view class="item-content">
-        <img
-          class="item-img"
-          :key="item"
-          src="@/static/QR57a.jpg"
-          alt=""
-          v-for="item of 3"
-        />
-      </view>
-    </view>
-
-    <view class="group-item-box">
-      <view class="item-top">
-        <view class="top-l">最近动态</view>
-        <view class="top-r">
-          <u-icon name="arrow-right" color="#C0C0C0" size="16"></u-icon>
-        </view>
-      </view>
-      <view class="item-content dynamic-img-box">
-        <img class="dynamic-img" src="@/static/QR57a.jpg" alt="" />
-      </view>
-    </view>
-
-    <view class="group-item-box">
-      <view class="item-top">
-        <view class="top-l">团队任务</view>
-        <view class="top-r">
-          <u-icon name="arrow-right" color="#C0C0C0" size="16"></u-icon>
-        </view>
-      </view>
-      <view class="item-content">
-        <img
-          class="item-img"
-          src="@/static/QR57a.jpg"
-          alt=""
-          :key="item"
-          v-for="item of 3"
-        />
-      </view>
-    </view>
-  </view>
-</template>
-
-<script>
-export default {
-  data() {
-    return {};
-  },
-};
-</script>
-
-<style lang="scss" scoped>
-.container {
-  padding: 20rpx 10rpx 50rpx;
-
-  .top-img-box {
-    text-align: center;
-
-    .top-img {
-      width: 160rpx;
-      height: 160rpx;
-      border-radius: 100rpx;
-    }
-
-    .top-name {
-      color: #6b7280;
-      font-weight: bold;
-      font-size: 32rpx;
-      margin-top: 20rpx;
-    }
-  }
-
-  .group-item-box {
-    padding: 0 20rpx;
-    margin-top: 60rpx;
-
-    .item-top {
-      display: flex;
-      justify-content: space-between;
-
-      .top-l,
-      .top-r {
-        color: #6b7280;
-        font-weight: bold;
-        font-size: 32rpx;
-        margin-top: 20rpx;
-      }
-    }
-
-    .item-content {
-      display: flex;
-
-      .item-img {
-        width: 160rpx;
-        height: 160rpx;
-        border-radius: 100rpx;
-        margin: 60rpx 20rpx 0 0;
-      }
-
-      .dynamic-img {
-        width: 100%;
-        height: 500rpx;
-        margin-top: 60rpx;
-      }
-    }
-  }
-}
-</style>
+<template>
+	<view class="container">
+		<view class="top-img-box">
+			<img class="top-img" src="@/static/QR57a.jpg" alt="" />
+			<view class="top-name">{{nickname}} </view>
+		</view>
+
+		<view class="group-item-box">
+			<view class="item-top">
+				<view class="top-l">团队成员</view>
+				<view class="top-r">
+					<u-icon name="arrow-right" color="#C0C0C0" size="16"></u-icon>
+				</view>
+			</view>
+			<view class="item-content">
+				<view class="person-item" v-for="item of teamPersonList" :key="item">
+					<image class="item-img" :src="item.inviteUserAvatar" mode="aspectFill" />
+					<view class="item-name">{{ item.name }}</view>
+				</view>
+			</view>
+		</view>
+
+		<!-- <view class="group-item-box">
+			<view class="item-top">
+				<view class="top-l">最近动态</view>
+				<view class="top-r">
+					<u-icon name="arrow-right" color="#C0C0C0" size="16"></u-icon>
+				</view>
+			</view>
+			<view class="item-content dynamic-img-box">
+				<img class="dynamic-img" src="@/static/QR57a.jpg" alt="" />
+			</view>
+		</view> -->
+
+		<!-- <view class="group-item-box">
+			<view class="item-top">
+				<view class="top-l">团队任务</view>
+				<view class="top-r">
+					<u-icon name="arrow-right" color="#C0C0C0" size="16"></u-icon>
+				</view>
+			</view>
+			<view class="item-content">
+				<img class="item-img" src="@/static/QR57a.jpg" alt="" :key="item" v-for="item of 3" />
+			</view>
+		</view> -->
+	</view>
+</template>
+
+<script>
+	import {
+		getMyTeam,
+		inviteBind
+	} from "@/api/client/mine.js"
+	import {
+		mapGetters
+	} from "vuex"
+	export default {
+
+		data() {
+			return {
+				queryParams: {
+					paging: '1,10'
+				},
+				teamPersonList: []
+			};
+		},
+		mounted() {
+			this.handlerInitList()
+		},
+		computed: {
+			...mapGetters(['userId', 'gender', 'avatar', 'nickname'])
+		},
+		methods: {
+			// 初始化我的团队列表
+			handlerInitList() {
+				getMyTeam(this.queryParams).then(res => {
+					let {
+						records
+					} = res.data
+					this.teamPersonList = records
+					console.log("Res", res)
+				})
+			}
+		}
+	};
+</script>
+
+<style lang="scss" scoped>
+	.container {
+		padding: 20rpx 10rpx 50rpx;
+
+		.top-img-box {
+			text-align: center;
+
+			.top-img {
+				width: 160rpx;
+				height: 160rpx;
+				border-radius: 100rpx;
+			}
+
+			.top-name {
+				color: #6b7280;
+				font-weight: bold;
+				font-size: 32rpx;
+				margin-top: 20rpx;
+			}
+		}
+
+		.group-item-box {
+			padding: 0 20rpx;
+			margin-top: 60rpx;
+
+			.item-top {
+				display: flex;
+				justify-content: space-between;
+
+				.top-l,
+				.top-r {
+					color: #6b7280;
+					font-weight: bold;
+					font-size: 32rpx;
+					margin-top: 20rpx;
+				}
+			}
+
+			.item-content {
+				display: flex;
+				width: 100%;
+
+				.person-item {
+					margin-right: 20rpx;
+					text-align: center;
+					width: 25%;
+				}
+
+				.item-name {
+					font-size: 28rpx;
+					font-weight: bold;
+					color: #000;
+					width: 100%;
+					text-overflow: ellipsis;
+					white-space: nowrap;
+					overflow: hidden;
+				}
+
+				.person-item:last-child {
+					margin: 0;
+				}
+
+				.item-img {
+					width: 160rpx;
+					height: 160rpx;
+					border-radius: 100rpx;
+					margin: 60rpx 20rpx 0 0;
+				}
+
+				.dynamic-img {
+					width: 100%;
+					height: 500rpx;
+					margin-top: 60rpx;
+				}
+			}
+		}
+	}
+</style>