zhibo/pages_course/components/viewer.vue

<template>
  <u-popup 
    :show="show" 
    @close="handleClose" 
    @open="handleOpen"
    round="20rpx" 
    bgColor="#ffffff" 
    zIndex="10077"
  >
    <view class="viewer-list-popup">
      <view class="popup-header fs32">在线观众</view>
      
      <scroll-view 
        v-if="Array.isArray(viewers)" 
        scroll-y 
        class="scroll-content"
        :style="{ height: scrollHeight + 'px' }" 
        @scrolltolower="handleScrollToLower"
      >
        <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>
        
        <!-- 加载状态 -->
        <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 {
      // 本地状态可以根据需要添加
    };
  },
  
  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;
  padding: 40rpx 0rpx;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  
  .popup-header {
    text-align: center;
    font-weight: 600;
    margin-bottom: 20rpx;
  }
  
  .scroll-content {
    flex: 1;
    overflow-y: auto;
    padding: 0 40rpx;
  }
  
  .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;
  }
}
</style>