main.vue

<template>
	<view>

		<!-- 添加小队按钮 -->
		<add-team-tag></add-team-tag>

		<!-- 标签栏 -->
		<u-tabs :list="list" lineWidth="30" lineColor="#F1992D" :activeStyle="{
		            color: '#F1992D',
		            fontWeight: 'bold',
		            transform: 'scale(1.05)'
		        }" :inactiveStyle="{
		            color: '#606266',
		            transform: 'scale(1)'
		        }" itemStyle="padding-left: 15px; padding-right: 15px; height: 34px;" @click="tabChange" :current="current">
		</u-tabs>


		<!-- 我的小队 -->
		<view v-if="current == 0">
			<view class="icon-with-name">
				<image :src="icon" class="icon" @click="showMember" />
				<text class="name" @click="showMember">{{name}}</text>
				<image src="../../static/team/out.png" class="out-team" @click="toggleMessage()" />
			</view>
			<view class="content" v-if="join==null">
				<view class="one-activity" v-for="item in activityList" @click="showActivityDetail(item.activityId)">
					<image class="horn-icon" :src="'../../static/team/horn.png'"
						style="width: 60px;height: 60px;margin-left: 10px;" />
					<text class="text-content">{{item.title}}</text>
				</view>
			</view>
			<view class="content" v-if="join==false">
				<view class="no-join">
					<view class="nojoin-icon-view">
						<image class="nojoin-icon" :src="'../../static/team/nojoin.png'"
							style="width: 230px;height: 200px;" />
					</view>
					<view class="text-no-view">
						<text class="text-no">您还没有加入任何小队哦~-</text>
					</view>
				</view>
			</view>
			<uni-popup ref="popupDialog" type="dialog">
				<uni-popup-dialog title="提示" content="是否确定退出小队？" :before-close="true" @confirm="dialogConfirm"
					@close="dialogClose" />
			</uni-popup>

		</view>
		<!-- 加入小队 -->
		<view v-if="current == 1">

		</view>





	</view>
</template>

<script>
	export default {

		data() {
			return {
				icon:'/static/icon/1.png',
				current: 0,
				show: false,
				value1: "",
				join: null,
				userId: '644a643a0c801ca878983559',
				list: [{
					name: '我的小队'
				}, {
					name: '加入小队',
				}, ],
				name: '昵称',
				activityList: [{
						activityId: 1,
						title: '跑步跑步跑步跑步跑步跑步跑步跑步跑步跑步跑步跑步跑步跑步跑步步跑步跑步跑步跑步步跑步跑步跑步跑步步跑步跑步跑步跑步步跑步跑步跑步跑步！'
					},
					{
						activityId: 2,
						title: '一起来！'
					}
				]
			};
		},
		methods: {
			tabChange(index) {
				this.current = index.index;
			},
			showActivityDetail(activityId){
				uni.reLaunch({
					url: '/pages/team/activity-detail?activityId='+activityId,
					animationType: 'pop-in',
					animationDuration: 300
				})
			},
			showMember(){
				uni.reLaunch({
					url: '/pages/team/member-list',
					animationType: 'pop-in',
					animationDuration: 300
				})
			},
			toggleMessage() {
				this.$refs['popupDialog'].open();
			},
			dialogConfirm() {
				uniCloud.callFunction({
						name: 'fe-team-leaveTeam',
						data: {
							userId: this.userId
						}
					})
					.then(res => {
						console.log(res)
						this.join = false
						console.log(this.join)
					})
				this.$refs['popupDialog'].close();
			},
			dialogClose() {
				this.$refs.popupDialog.close();
			},

		},
		onLoad() {
			uniCloud.callFunction({
					name: 'fe-team-activityList',
					data: {
						userId: this.userId
					}
				})
				.then(res => {
					console.log(res),
						this.name = res.result.data.username,
						this.activityList = res.result.data.activityList,
						this.join = res.result.join,
						this.icon = res.result.data.icon
						console.log(this.join)
				})
		}
	}
</script>

<style>
	.content {
		margin-top: 10px;
	}

	.icon-with-name {
		width: 100%;
		height: 45px;
		margin-left: 10px;
		margin-top: 15px;
		margin-bottom: 15px;
		float: left;
		overflow: auto;

	}

	.icon {
		width: 45px;
		height: 45px;
		border-radius: 50%;
		float: left;
	}

	.out-team {
		float: right;
		margin-right: 30px;
		width: 30px;
		margin-top: 11px;
		height: 30px;
	}

	.name {
		float: left;
		margin-bottom: auto;
		margin-left: 10px;
		margin-top: 9px;
		font-size: 18px;
		font-weight: bold;
		width: 60%;
	}

	.one-activity {
		width: 90%;
		background-color: rgb(245 154 35 / 30%);
		margin-left: auto;
		margin-right: auto;
		margin-top: 20px;
		border-radius: 15px;
		overflow: auto;
		display: flex;
		flex-direction: row;
		padding: 10px;
	}

	.no-join {
		width: 90%;
		margin-left: auto;
		margin-right: auto;
		margin-top: 20px;
		border-radius: 15px;
		overflow: auto;
		display: flex;
		flex-direction: column;
		padding: 10px;
	}

	.text-content {
		font-weight: bold;
		display: flex;
		margin-left: 10px;
		flex-direction: row;
		align-items: center;
		justify-content: center;
		word-wrap: break-word;
	}

	.text-no {
		font-weight: bold;
		display: flex;
		margin: auto;
		flex-direction: column;
		color: #F1992D;

	}

	.horn-icon {
		flex-shrink: 0;
		margin: auto 0;
	}

	.nojoin-icon {
		display: flex;
		flex-direction: column;
		margin: auto;
		display: block;
	}

	.nojoin-icon-view {
		margin-top: 50px;
	}

	.text-no-view {
		margin: 30px auto;
	}
</style>