baiyuApp/pages_enter/activity/team.vue

<template>
	<view class="team-page">
		<u-navbar title="我的队伍" :autoBack="true" :bgColor="bgColor" leftIconColor="#333"
			titleStyle="font-weight:bold;"></u-navbar>
		<image class="bg_dance" src="/static/images/enter/activity/bg_dance.png" mode=""></image>
		<view class="team-card u-f u-f-ac">
			<view class="team-logo u-f-ajc es-mr-30">
				<image :src="teamInfo.coverUrl || '/static/images/enter/activity/icon_team.png'" class="" mode="">
				</image>
			</view>
			<view class="team-info">
				<view class="team-name">{{teamInfo.teamName || ''}}</view>
				<view class="tags u-f u-f-ac">
					<view class="tag city">{{teamInfo.city || ''}}</view>
					<view class="tag count">{{teamInfo.memberCount || 0}}人</view>
				</view>
				<view class="captain-info">领队：{{teamInfo.leaderName || ''}}（{{teamInfo.leaderPhone || ''}}）</view>
				<view class="team-code u-f u-f-ac" @click="copyCode">
					<text class="es-mr-12">队伍码：{{teamInfo.teamCode || ''}}</text>
					<image class="es-icon-32" src="/static/images/enter/activity/icon_copy.png" mode=""></image>
				</view>
			</view>
		</view>

		<view class="content-box es-mt-16">
			<view class="tabs u-f-ajc ">
				<view v-for="(tab, index) in tabs" :key="index" class="tab-item u-f-ajc"
					:class="{active: currentTab === index}" @click="switchTab(index)">
					{{tab.name}}<text v-if="tab.count">·{{tab.count}}</text>
					<view class="line" v-if="currentTab === index"></view>
				</view>
			</view>

			<!-- <mescroll-body ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="upCallback"
				:down="downOption" :up="upOption"> -->
			<!-- Works List -->
			<view v-if="currentTab === 0" class="work-list">
				<view class="work-item" v-for="(item, index) in workList" :key="index">
					<image @tap="videoShow=true" v-if="!videoShow" :src="item.coverUrl" mode="aspectFill"
						class="work-cover"></image>
					<video v-else :src="item.videoUrl" class="work-cover" object-fit="cover"
						:show-center-play-btn="false"></video>
					<view class="work-info">
						<view class="work-title ellipsis">{{item.workName}}</view>
						<view class="u-f u-f-jsb u-f-ac">
							<view class="vote-num">票数：{{item.voteCount}}</view>
							<view class="delete-btn u-f u-f-ac" @click="handleDeleteWork(item)">
								<u-icon name="edit-pen" color="#999" size="18"></u-icon>
								<text>修改</text>
							</view>
						</view>
					</view>
				</view>
			</view>

			<!-- Members List -->
			<view v-if="currentTab === 1" class="member-list">
				<view class="member-item u-f u-f-jsb u-f-ac" v-for="(item, index) in memberList" :key="index">
					<view class="member-info u-f u-f-ac">
						<image :src="item.avatar || '/static/images/detault_head.jpg'" class="avatar" mode="aspectFill">
						</image>
						<view class="name">{{item.userName}}</view>
						<view class="captain-tag" v-if="teamInfo.leaderId == item.userId">领队</view>
					</view>
					<view class="remove-btn u-f u-f-ac"
						v-if="(teamInfo.leaderId == userId && item.userId != userId) || (item.userId == userId && teamInfo.leaderId != userId)"
						@click="handleRemoveMember(item)">
						<u-icon name="minus-circle" color="#FF4D4F" size="18"></u-icon>
						<text>移出</text>
					</view>
				</view>
			</view>
			<!-- </mescroll-body> -->
		</view>

		<!-- Bottom Buttons -->
		<view class="bottom-fixed" v-if="teamInfo.leaderId == userId">
			<view v-if="currentTab === 0" class="btn primary-btn"
				@click="$navTo(`/pages_enter/activity/publishWork?teamId=${teamInfo.id || ''}`)">
				<u-icon name="plus-circle" color="#fff" size="20" class="btn-icon"></u-icon>
				发布作品
			</view>
			<view v-if="currentTab === 1" class="btn outline-btn" @click="handleDisband()">
				解散队伍
			</view>
		</view>
	</view>
</template>

<script>
	import {
		deleteTeamMember,
		getUserTeam,
		getWorkList,
		getUserTeamMember
	} from '@/api/activity.js';
	import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";

	export default {
		mixins: [MescrollMixin],
		data() {
			return {
				videoShow: false,
				bgColor: 'transparent',
				teamInfo: {},
				tabs: [{
						name: '作品',
						count: 0
					},
					{
						name: '成员',
						count: 26
					}
				],
				currentTab: 0,
				workList: [],
				memberList: [],
				downOption: {
					use: true,
					auto: false
				},
				upOption: {
					auto: true,
					page: {
						num: 0,
						size: 100
					},
					onScroll: false,
					use: true,
					noMoreSize: 10,
					textNoMore: "已经到底了",
					empty: {
						icon: 'https://zkzh-2025.oss-cn-beijing.aliyuncs.com/fs/20240423/cf4a86b913a04341bb44e34bb4d37aa2.png',
						tip: '暂无数据'
					}
				},
				userId: null,
				teamId: null
			}
		},
		onLoad() {
			this.userId = JSON.parse(uni.getStorageSync('userInfo')).userId
		},
		onPageScroll(e) {
			if (e.scrollTop > 20) {
				this.bgColor = '#ffefef'
			} else {
				this.bgColor = 'transparent'
			}
		},
		onShow() {
			this.fetchDetail();
		},
		methods: {
			async deleteTeamMemberFun() {
				const res = await deleteTeamMember({
					activityId: this.teamInfo.id
				})
				if (res.code == 200) {} else {
					uni.showToast({
						icon: 'none',
						title: res.msg
					})
				}
			},
			async fetchDetail() {
				const res = await getUserTeam({
					activityId: getApp().globalData.activityId
				})
				if (res.code == 200) {
					this.teamInfo = res.team
					this.tabs[1].count = this.teamInfo.memberCount || 0
					this.teamId = res.team.id
					this.getUserTeamMemberFun(res.team.id)
					this.getWorkListFun(res.team.id)
				} else {
					uni.showToast({
						icon: 'none',
						title: res.msg
					})
				}
			},
			async getUserTeamMemberFun(id) {
				const res = await getUserTeamMember({
					activityId: this.teamInfo.id,
					teamId: id
				})
				if (res.code == 200) {
					this.memberList = res.data
				} else {
					uni.showToast({
						icon: 'none',
						title: res.msg
					})
				}
			},
			async getWorkListFun(id) {
				const res = await getWorkList({
					activityId: this.teamInfo.id,
					teamId: id
				})
				if (res.code == 200) {
					this.workList = res.data.list
				} else {
					uni.showToast({
						icon: 'none',
						title: res.msg
					})
				}
			},


			copyCode() {
				uni.setClipboardData({
					data: this.teamInfo.teamCode,
					success: () => {
						uni.showToast({
							title: '复制成功',
							icon: 'success'
						});
					}
				});
			},
			switchTab(index) {
				this.currentTab = index;
				this.mescroll.resetUpScroll();
			},
			async upCallback(page) {
				return
				if (this.currentTab === 0) {
					const res = await getUserTeamMember({
						pageNum: page.num,
						pageSize: page.size,
						activityId: getApp().globalData.activityId,
					})
					if (res.code === 200) {
						let curList = res.data.list || [];
						if (page.num === 1) this.workList = [];
						this.workList = this.workList.concat(curList);
						this.mescroll.endBySize(this.memberList.length, res.data.total);
					} else {
						this.mescroll.endErr();
					}
				}
			},
			handleDeleteWork(item) {
				uni.navigateTo({
					url: `/pages_enter/activity/publishWork?id=${item.id}&teamId=${this.teamInfo.id || ''}`
				})
				return
				uni.showModal({
					title: '确认删除',
					content: '确认删除该作品吗？',
					success: (res) => {
						if (res.confirm) {
							deleteWork({
								workId: item.id
							}).then(res => {
								if (res.code === 200) {
									uni.showToast({
										title: '删除成功',
										icon: 'success'
									});
									this.mescroll.resetUpScroll();
								}
							});
						}
					}
				});
			},
			handleRemoveMember(item) {
				uni.showModal({
					title: '确认移出',
					content: `确认将 ${item.userName} 移出队伍吗？`,
					success: (res) => {
						if (res.confirm) {
							deleteTeamMember({
								activityId: this.teamInfo.id,
								teamId: this.teamInfo.id,
								deleteUserId: item.userId
							}).then(res => {
								if (res.code === 200) {
									this.getUserTeamMemberFun(this.teamId)
									uni.showToast({
										title: '移出成功',
										icon: 'success'
									});
								} else {
									uni.showToast({
										title: res.msg,
										icon: 'none'
									})
								}
							});
						}
					}
				});
			},
			handleDisband() {
				uni.showModal({
					title: '确认解散',
					content: '解散后队伍信息将无法找回，确认解散吗？',
					success: (res) => {
						if (res.confirm) {
							deleteTeamMember({
								activityId: this.teamInfo.id,
								teamId: this.teamInfo.id,
								deleteUserId: this.teamInfo.leaderId
							}).then(res => {
								if (res.code === 200) {
									uni.showToast({
										title: '已解散',
										icon: 'success'
									});
									setTimeout(() => {
										uni.redirectTo({
											url: '/pages_enter/activity/index'
										})
									}, 1500);
								} else {
									uni.showToast({
										title: res.msg,
										icon: 'none'
									})
								}
							});
						}
					}
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	.team-page {
		min-height: 100vh;
		background-color: #f8f8f8;
		padding-top: 120rpx;
		box-sizing: border-box;
		position: relative;
	}

	.bg_dance {
		width: 100%;
		position: absolute;
		top: 0;
		left: 0;
		z-index: 0;
		height: 304rpx;
	}

	.team-card {
		position: relative;
		z-index: 1;
		width: 100vw;
		background: #fff;
		padding: 40rpx 30rpx;
		border-radius: 32rpx;

		.team-logo {
			width: 152rpx;
			height: 152rpx;
			border-radius: 24rpx;
			background: #FFF5F2;

			image {
				width: 88rpx;
				height: 88rpx;
				border-radius: 20rpx;
			}
		}

		.team-info {
			flex: 1;

			.team-name {
				font-size: 36rpx;
				font-weight: bold;
				color: #333;
				margin-bottom: 16rpx;
			}

			.tags {
				margin-bottom: 16rpx;

				.tag {
					font-size: 22rpx;
					padding: 4rpx 16rpx;
					border-radius: 6rpx;
					margin-right: 16rpx;

					&.city {
						background: #FFF0F0;
						color: #A33C3C;
					}

					&.count {
						background: #FFF0F0;
						color: #A33C3C;
					}
				}
			}

			.captain-info {
				font-size: 24rpx;
				color: #999;
				margin-bottom: 10rpx;
			}

			.team-code {
				font-size: 24rpx;
				color: #999;

				.copy-icon {
					margin-left: 10rpx;
				}
			}
		}
	}

	.content-box {
		background-color: #fff;
		padding: 30rpx;
		min-height: calc(100vh - 360rpx);
		padding-bottom: 140rpx;

		.tabs {
			margin-bottom: 30rpx;
			justify-content: space-around;

			.tab-item {
				font-size: 32rpx;
				color: #666;
				position: relative;
				padding-bottom: 16rpx;
				margin-right: 60rpx;

				&.active {
					color: #333;
					font-weight: bold;
				}

				.line {
					position: absolute;
					bottom: 0;
					left: 50%;
					transform: translateX(-50%);
					width: 40rpx;
					height: 6rpx;
					background-color: #FF4500;
					border-radius: 4rpx;
				}
			}
		}
	}

	.work-list {
		.work-item {
			background-color: #fff;
			border-radius: 20rpx;
			overflow: hidden;
			box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.05);
			margin-bottom: 30rpx;

			.work-cover {
				width: 100%;
				height: 360rpx;
				background-color: #eee;
			}

			.work-info {
				padding: 24rpx;

				.work-title {
					font-size: 32rpx;
					font-weight: bold;
					color: #333;
					margin-bottom: 24rpx;
				}

				.vote-num {
					font-size: 26rpx;
					color: #999;
				}

				.delete-btn {
					color: #999;
					font-size: 26rpx;

					text {
						margin-left: 8rpx;
					}
				}
			}
		}
	}

	.member-list {
		.member-item {
			padding: 30rpx 0;
			border-bottom: 2rpx solid #f0f0f0;

			&:last-child {
				border-bottom: none;
			}

			.avatar {
				width: 90rpx;
				height: 90rpx;
				border-radius: 50%;
				margin-right: 24rpx;
				background-color: #eee;
			}

			.name {
				font-size: 30rpx;
				color: #333;
			}

			.captain-tag {
				font-size: 20rpx;
				background-color: #FFB35B;
				color: #fff;
				padding: 2rpx 12rpx;
				border-radius: 8rpx;
				margin-left: 20rpx;
			}

			.remove-btn {
				color: #FF4D4F;
				font-size: 28rpx;

				text {
					margin-left: 8rpx;
				}
			}
		}
	}

	.bottom-fixed {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		background-color: #fff;
		padding: 20rpx 40rpx calc(20rpx + env(safe-area-inset-bottom));
		box-shadow: 0 -4rpx 16rpx rgba(0, 0, 0, 0.05);
		z-index: 10;

		.btn {
			height: 90rpx;
			border-radius: 45rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 30rpx;
			font-weight: 500;

			&.primary-btn {
				background: linear-gradient(90deg, #FF7F50, #FF1493);
				color: #fff;
				box-shadow: 0 4rpx 12rpx rgba(255, 20, 147, 0.3);

				.btn-icon {
					margin-right: 12rpx;
				}
			}

			&.outline-btn {
				border: 2rpx solid #FF4D4F;
				color: #FF4D4F;
			}

			&:active {
				opacity: 0.8;
			}
		}
	}
</style>