ai_dianshang/web/assets/js/livestream.js

// 直播投流源管理
const LiveStreamManager = {
    // 初始化
    init: function() {
        this.loadLiveStreams();
    },

    // 加载直播投流源
    loadLiveStreams: function() {
        LiveStreamAPI.getActiveLiveStreams()
            .then(data => {
                if (data && data.length > 0) {
                    this.renderLiveStreams(data);
                    $('#livestreamSection').show();
                } else {
                    $('#livestreamSection').hide();
                }
            })
            .catch(error => {
                console.error('加载直播投流源失败:', error);
                $('#livestreamSection').hide();
            });
    },

    // 渲染直播投流源列表
    renderLiveStreams: function(streams) {
        const grid = $('#livestreamGrid');
        grid.empty();

        streams.forEach(stream => {
            const card = this.createStreamCard(stream);
            grid.append(card);
        });
    },

    // 创建直播卡片
    createStreamCard: function(stream) {
        const platformColors = {
            '抖音': '#000',
            '快手': '#ff6600',
            '淘宝': '#ff4400',
            '京东': '#e60012',
            '小红书': '#ff2442',
            '视频号': '#07c160'
        };

        const platformColor = platformColors[stream.platform] || '#666';
        const isLive = !!stream.stream_url; // 判断是否有直播源

        const card = $('<div class="livestream-card"></div>');
        
        // 如果未开播，添加未开播样式类
        if (!isLive) {
            card.addClass('not-live');
        }

        // 封面图片
        if (stream.cover_image) {
            card.append(`
                <img src="${stream.cover_image}" 
                     alt="${stream.title}" 
                     class="cover-image" 
                     onerror="this.style.display='none'; this.nextElementSibling.style.display='flex'">
                <div class="placeholder-cover" style="display: none;">
                    📺
                </div>
            `);
        } else {
            card.append(`
                <div class="placeholder-cover">
                    📺
                </div>
            `);
        }

        // 直播标识或未开播标识
        if (isLive) {
            card.append('<div class="live-badge">LIVE</div>');
        } else {
            card.append('<div class="offline-badge">未开播</div>');
        }

        // 平台标识
        card.append(`
            <div class="platform-badge" style="background-color: ${platformColor};">
                ${stream.platform}
            </div>
        `);

        // 卡片内容
        const btnText = isLive ? '观看直播' : '暂未开播';
        const btnClass = isLive ? 'watch-btn' : 'watch-btn disabled';
        
        const content = $(`
            <div class="card-content">
                <h3 class="card-title">${stream.title}</h3>
                <p class="card-description">${stream.description || (isLive ? '欢迎来到直播间' : '主播暂时不在，敬请期待')}</p>
                <div class="card-footer">
                    <div class="view-count">
                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                            <path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"></path>
                            <circle cx="12" cy="12" r="3"></circle>
                        </svg>
                        <span>${this.formatViewCount(stream.view_count)}</span>
                    </div>
                    <button class="${btnClass}">${btnText}</button>
                </div>
            </div>
        `);

        card.append(content);

        // 只有开播时才添加点击事件
        if (isLive) {
            card.on('click', () => {
                this.openLiveStream(stream);
            });
        } else {
            // 未开播时点击提示
            card.on('click', () => {
                Toast.show('该平台暂未开播，敬请期待', 'info');
            });
        }

        return card;
    },

    // 格式化观看次数
    formatViewCount: function(count) {
        if (!count || count === 0) return '0';
        if (count < 1000) return count.toString();
        if (count < 10000) return (count / 1000).toFixed(1) + 'K';
        if (count < 100000) return (count / 10000).toFixed(1) + 'W';
        return (count / 10000).toFixed(0) + 'W';
    },

    // 打开直播投流源
    openLiveStream: function(stream) {
        // 增加观看次数
        LiveStreamAPI.incrementViewCount(stream.id)
            .then(() => {
                console.log('观看次数已增加');
            })
            .catch(error => {
                console.error('增加观看次数失败:', error);
            });

        // 在新窗口打开直播URL
        if (stream.stream_url) {
            window.open(stream.stream_url, '_blank');
        } else {
            Toast.show('直播地址无效', 'error');
        }
    }
};

// 页面加载完成后初始化
$(document).ready(function() {
    LiveStreamManager.init();
});