<template>
	<view>
		<view class="top">
			<image class="back" src="/static/login/returnBack.png" @click="goBack()"></image>
			<view class="title">成员列表</view>
			<span class="empty"></span>
		</view>
		<view class="memList" v-for="(item,index) in memList" :key="index">
			<image class="icon" :src="item.memberIcon"></image>
			<view class="membername">{{item.memberName}}</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				userId: '644a643a0c801ca878983559',
				memList: [{
					memberIcon: '/static/icon/1.png',
					memberName: "不会取名字",
				},{
					memberIcon: '/static/sport/icon.jpg',
					memberName: "不会取名字",
				}]
			}
		},
		methods: {
			goBack() {
				uni.reLaunch({
					url: '/pages/team/main',
					animationType: 'pop-in',
					animationDuration: 300
				})
			}
		},
		onLoad() {
			this.userId=getApp().globalData.userId
			uniCloud.callFunction({
					name: 'fe-team-memberList',
					data: {
						userId: this.userId
					}
				})
				.then(res => {
					console.log(res),
					this.memList = res.result.data
				})
		}
	}
</script>

<style>
	.returnBack {
		height: 55rpx;
		width: 55rpx;
		margin-top: 60rpx;
		margin-left: 20rpx;
		margin-right: auto;
	}

	.top {
		width: 100%;
		height: 50px;
		background-color: #EDEEF0;
		text-align: center;
	}

	.back {
		width: 40px;
		height: 30px;
		margin-top: 10px;
		margin-bottom: 10px;
		float: left;
		margin-left: 10px;
	}

	.empty {
		width: 40px;
		height: 30px;
		margin-top: 10px;
		margin-bottom: 10px;
		float: right;
		margin-right: 10px;
	}

	.title {
		font-size: 20px;
		margin-top: 10px;
		font-weight: bold;
		color: #f1992d;
		display: inline-block;
	}
	
	.memList{
		margin-top: 20px;
	}
	.icon{
		position: relative;
		top:2px;
		left: 38px;
		width: 50px;
		height: 50px;
		border-radius: 50%;
	}
	.membername{
		display: inline; 
		position: relative;
		font-size: 20px;
		font-weight: bold;
		bottom: 20px;
		left: 48px;
		color: #7F7F7F;
	}
</style>