zhibo/pages_course/components/viewer.vue

<template>
	<u-popup :show="show" mode="bottom" @close="handleClose" @open="handleOpen" round="20rpx" bgColor="#ffffff" zIndex="10077">
		<view class="viewer-list-popup">
			<view class="popup-header fs32">在线观众</view>

			<view class="list-container">
				<mescroll-uni ref="mescrollRef" :fixed="false" :down="downOption" :up="upOption" @init="mescrollInit" @down="downCallback" @up="upCallback">
					<view class="viewer-item x-f mb20 mt20" v-for="(item, index) in viewers" :key="getViewerKey(item, index)">
						<!-- <view 
				class="rank-number"
				:style="getRankStyle(index)"
			>
				{{ index + 1 }}
			</view> -->
						<view
							class="rank-number"
							:style="{
								color: index < 3 ? ['#FF3B30', '#FF9500', '#FFCC00'][index] : '#8E8E93',
								fontWeight: index < 3 ? 'bold' : 'normal',
								width: '50rpx'
							}"
						>
							{{ index + 1 }}
						</view>

						<!-- 用户头像 -->
						<view class="avatar-container">
							<u-avatar v-if="item.avatar" :src="item.avatar" :size="36"></u-avatar>
							<view v-else class="default-avatar" :style="{ backgroundColor: getUserRandomColor(item.userId) }">
								<text class="avatar-text">{{ getNicknameInitial(item.nickName) }}</text>
							</view>
						</view>

						<text class="nickname ml16 f30">{{ item.nickName || '未命名' }}</text>
					</view>

					<!-- mescroll 自带 loading 和 noMore，不需要这里的 loading-text -->
					
					<!-- 无数据提示 -->
					<!-- <view v-if="!loading && viewers.length === 0" class="empty-text">暂无在线观众</view> -->
					
					<view v-if="lookAudsCount > 0" class="more-text">还有{{lookAudsCount}}用户正在观看</view>
					
				</mescroll-uni>
			</view>
		</view>
	</u-popup>
</template>

<script>
import MescrollUni from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-uni.vue";
export default {
	// name: 'Viewer',
	components: {
		MescrollUni
	},
	props: {
		// 是否显示弹窗
		show: {
			type: Boolean,
			default: false
		},
		// 观众列表数据
		viewers: {
			type: Array,
			default: () => []
		},
		// 是否正在加载
		loading: {
			type: Boolean,
			default: false
		},
		// 滚动区域高度
		scrollHeight: {
			type: Number,
			default: 400
		},
		lookAudsCount: {
			type: Number,
			default: 0
		}
		
		
	},

	data() {
		return {
			mescroll: null,
			downOption: {
				use: false // 禁用下拉刷新
			},
			upOption: {
				auto: false, // 不自动加载，由父组件控制或者 open 时触发
				noMoreSize: 5,
				textNoMore: '没有更多了',
				empty: {
					use: true,
					icon: "/static/images/no_data.png", // 假设有
					tip: "暂无在线观众"
				},
				toTop: {
					src: '' // 不显示回到顶部按钮
				}
			}
		};
	},

	methods: {
		mescrollInit(mescroll) {
			this.mescroll = mescroll;
		},
		downCallback() {
			this.mescroll.endSuccess();
		},
		upCallback(page) {
			this.$emit('loadMore', page);
		},
		// 暴露给父组件的方法
		endSuccess(curPageLen, hasNext) {
			if (this.mescroll) {
				this.mescroll.endSuccess(curPageLen, hasNext);
			}
		},
		endErr() {
			if (this.mescroll) {
				this.mescroll.endErr();
			}
		},
		reset() {
			if (this.mescroll) {
				this.mescroll.resetUpScroll();
			}
		},
		/**
		 * 处理关闭事件
		 */
		handleClose() {
			this.$emit('close');
		},

		/**
		 * 处理打开事件
		 */
		handleOpen() {
			this.$emit('open');
		},

		/**
		 * 处理滚动到底部事件
		 */
		getViewerKey(item, index) {
			return item.userId ? `viewer_${item.userId}` : `viewer_${index}`;
		},

		/**
		 * 获取排名样式
		 */
		getRankStyle(index) {
			const rankColors = {
				0: '#FF3B30', // 第一名
				1: '#FF9500', // 第二名
				2: '#FFCC00' // 第三名
			};

			return {
				color: rankColors[index] || '#8E8E93',
				fontWeight: index < 3 ? 'bold' : 'normal',
				width: '50rpx'
			};
		},

		/**
		 * 获取用户随机颜色（从父组件传入或本地实现）
		 */
		getUserRandomColor(userId) {
			// 如果父组件传入了方法，可以使用父组件的方法
			// 否则这里实现一个简单的版本
			if (this.$parent && this.$parent.getUserRandomColor) {
				return this.$parent.getUserRandomColor(userId);
			}

			// 简单的本地实现
			if (!userId) return '#8978e2';

			const colorPool = ['#FF6B6B', '#4ECDC4', '#45B7D1', '#96CEB4', '#FFEAA7', '#DDA0DD', '#98D8C8', '#F7DC6F', '#BB8FCE', '#85C1E9'];

			let seed = 0;
			for (let i = 0; i < userId.length; i++) {
				seed = (seed * 31 + userId.charCodeAt(i)) % 1000000;
			}
			return colorPool[seed % colorPool.length];
		},

		/**
		 * 获取昵称首字母
		 */
		getNicknameInitial(nickName) {
			if (!nickName || typeof nickName !== 'string') return '未';
			if (/^[\u4e00-\u9fa5]/.test(nickName[0])) {
				return nickName[0];
			}
			return nickName[0].toUpperCase();
		}
	},

	watch: {
		// 监听显示状态变化
		show(newVal) {
			if (newVal) {
				this.$emit('open');
				this.$nextTick(() => {
					this.reset();
				});
			}
		}
	}
};
</script>

<style scoped lang="scss">
.viewer-list-popup {
	position: relative;
	height: 60vh;
	padding: 40rpx 0rpx;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;

	.popup-header {
		text-align: center;
		font-weight: 600;
		margin-bottom: 20rpx;
	}

	.list-container {
		flex: 1;
		min-height: 0;
		width: 100%;
		overflow: hidden;
	}

	.viewer-item {
		align-items: center;
		padding: 16rpx 0;

		.rank-number {
			text-align: center;
			margin-right: 20rpx;
			font-size: 28rpx;
		}

		.avatar-container {
			.default-avatar {
				width: 72rpx;
				height: 72rpx;
				border-radius: 50%;
				display: flex;
				align-items: center;
				justify-content: center;

				.avatar-text {
					color: #ffffff;
					font-size: 24rpx;
					font-weight: 500;
				}
			}
		}

		.nickname {
			flex: 1;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
		}
	}

	.loading-text {
		text-align: center;
		color: #999;
		font-size: 28rpx;
		padding: 40rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 16rpx;
	}

	.empty-text {
		text-align: center;
		color: #999;
		font-size: 28rpx;
		padding: 80rpx 40rpx;
	}
	
	.more-text {
		text-align: center;
		color: #999;
		font-size: 28rpx;
		padding: 30rpx 20rpx;
	}

	.list-container {
		flex: 1;
		min-height: 0;
		overflow: hidden;
	}
}
</style>