fanghuayuexuan/pages_course/components/Invitation.vue

<template>
	<!-- show="true"  -->
	<u-popup :show="show" @close="handleClose" @open="handleOpen" round="32rpx" bgColor="#ffffff" zIndex="10077">
		<view class="viewer-list-popup">
			<view class="top">
				<image class="top_bg" src="/static/images/viewer_top.png"></image>
				<image class="title" src="/static/images/viewer_title.png"></image>
			</view>
			<scroll-view v-if="Array.isArray(viewers)" scroll-y class="scroll-content"
				:style="{ height: scrollHeight + 'px' }" @scrolltolower="handleScrollToLower">
				<view class="header">
					<text class="left">用户昵称</text>
					<view class="right">
						邀请值
						<image class="ml8 img" src="/static/images/problem.png"></image>
					</view>
				</view>
				<view class="viewer-item x-f mb32 mt20" v-for="(item, index) in viewers"
					:key="getViewerKey(item, index)">
					<view class="item">
						<image class="rank-level" v-if="index<3" :src="`/static/images/ranking${index+1}.png`"></image>
						<view v-else class="rank-level number">
							{{ 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 ml20 f30">{{ item.nickName || '未命名' }}</text>
					</view>
					<view class="item">
						<text class="txt">邀请值</text>
						<text class="num">2555</text>
					</view>
				</view>

				<!-- 加载状态 -->
				<view v-if="loading" class="loading-text">
					<u-loading-icon size="16"></u-loading-icon>
					加载中...
				</view>

				<!-- 无数据提示 -->
				<view v-if="!loading && viewers.length === 0" class="empty-text">
					暂无在线观众
				</view>
			</scroll-view>
		</view>
	</u-popup>
</template>

<script>
	export default {
		// name: 'Viewer',

		props: {
			// 是否显示弹窗
			show: {
				type: Boolean,
				default: false
			},
			// 观众列表数据
			// viewers: {
			// 	type: Array,
			// 	default: () => []
			// },
			// 是否正在加载
			loading: {
				type: Boolean,
				default: false
			},
			// 滚动区域高度
			scrollHeight: {
				type: Number,
				default: 400
			}
		},

		data() {
			return {
				viewers: [{
					avatar: "/static/images/viewer_top.png",
					nickName: '大概有'
				}, {
					avatar: "/static/images/viewer_top.png",
					nickName: '大概有'
				}]
				// 本地状态可以根据需要添加
			};
		},

		methods: {
			/**
			 * 处理关闭事件
			 */
			handleClose() {
				this.$emit('close');
			},

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

			/**
			 * 处理滚动到底部事件
			 */
			handleScrollToLower() {
				this.$emit('scrolltolower');
			},

			/**
			 * 生成观众项的唯一key
			 */
			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');
				}
			}
		}
	};
</script>

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

		.top {
			overflow: hidden;
			border-radius: 32rpx 32rpx 0rpx 0rpx;
			position: absolute;
			top: -126rpx;
			z-index: -1;
			width: 100%;
			height: 166rpx;

			.top_bg {
				width: 100%;
				height: 100%;
			}

			.title {
				position: absolute;
				left: 50%;
				top: 26rpx;
				transform: translateX(-50%);
				width: 262rpx;
				height: 72rpx;
			}
		}

		.scroll-content {
			padding: 36rpx 24rpx;
			box-sizing: border-box;
			flex: 1;
			overflow-y: auto;
			background: linear-gradient(180deg, #E7FEEE 0%, #FFFFFF 9%, #FFFFFF 100%);
			border-radius: 32rpx 32rpx 0rpx 0rpx;
			border: 4rpx solid #FFFFFF;
		}

		.header {
			margin-bottom: 42rpx;
			display: flex;
			justify-content: space-between;

			.left {
				font-size: 26rpx;
				color: #666666;
			}

			.right {
				font-size: 26rpx;
				color: #999999;
				display: flex;
				align-items: center;

				.img {
					width: 24rpx;
					height: 24rpx;
				}
			}
		}

		.viewer-item {
			margin-top: 32rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;

			.item {
				display: flex;
				align-items: center;

				.rank-level {
					width: 40rpx;
					height: 40rpx;
					margin-right: 20rpx;
				}

				.number {
					font-size: 32rpx;
					color: #666666;
					text-align: center;
					font-family: Roboto Flex, Roboto Flex;
				}

				.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;
					font-weight: 500;
					font-size: 32rpx;
					color: #333333;
				}

				.txt {
					font-size: 24rpx;
					color: #999999;
					margin-right: 16rpx;
				}

				.num {
					font-weight: 500;
					font-size: 32rpx;
					color: #02B176;
				}
			}
		}

		.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;
		}
	}
</style>