342 lines
12 KiB
JavaScript
342 lines
12 KiB
JavaScript
|
// Live Stream Page JavaScript
|
|||
|
|
|
|||
|
|
$(document).ready(function() {
|
|||
|
|
initLivePage();
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
function initLivePage() {
|
|||
|
|
loadChatMessages();
|
|||
|
|
loadLiveProducts();
|
|||
|
|
updateLiveStats();
|
|||
|
|
bindLiveEvents();
|
|||
|
|
|
|||
|
|
// 监听语言切换
|
|||
|
|
$(document).on('languageChanged', function() {
|
|||
|
|
loadChatMessages();
|
|||
|
|
loadLiveProducts();
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
// 自动滚动到最新消息
|
|||
|
|
scrollChatToBottom();
|
|||
|
|
|
|||
|
|
// 模拟实时更新统计数据
|
|||
|
|
setInterval(updateLiveStats, 5000);
|
|||
|
|
|
|||
|
|
// 模拟新消息
|
|||
|
|
setInterval(addRandomMessage, 10000);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 绑定事件
|
|||
|
|
function bindLiveEvents() {
|
|||
|
|
// Tab切换
|
|||
|
|
$('.tab-btn').on('click', function() {
|
|||
|
|
const tabName = $(this).data('tab');
|
|||
|
|
switchTab(tabName);
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
// 发送消息
|
|||
|
|
$('#sendMessageBtn').on('click', function() {
|
|||
|
|
sendMessage();
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
$('#chatInput').on('keypress', function(e) {
|
|||
|
|
if (e.which === 13) {
|
|||
|
|
sendMessage();
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
// 产品点击
|
|||
|
|
$(document).on('click', '.live-product-item', function() {
|
|||
|
|
const productId = $(this).data('product-id');
|
|||
|
|
window.location.href = `product-detail.html?id=${productId}`;
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
$(document).on('click', '.live-product-btn', function(e) {
|
|||
|
|
e.stopPropagation();
|
|||
|
|
const productId = $(this).closest('.live-product-item').data('product-id');
|
|||
|
|
addProductToCart(productId);
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// Tab切换
|
|||
|
|
function switchTab(tabName) {
|
|||
|
|
$('.tab-btn').removeClass('active');
|
|||
|
|
$(`.tab-btn[data-tab="${tabName}"]`).addClass('active');
|
|||
|
|
|
|||
|
|
$('.tab-content').removeClass('active');
|
|||
|
|
$(`#${tabName}Tab`).addClass('active');
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 加载聊天消息
|
|||
|
|
function loadChatMessages() {
|
|||
|
|
const lang = i18n.currentLang;
|
|||
|
|
|
|||
|
|
const messages = [
|
|||
|
|
{
|
|||
|
|
type: 'system',
|
|||
|
|
text: lang === 'zh-CN' ? '欢迎来到直播间！' :
|
|||
|
|
lang === 'en-US' ? 'Welcome to the live stream!' :
|
|||
|
|
'ライブ配信へようこそ！',
|
|||
|
|
time: '10:00'
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
username: lang === 'zh-CN' ? '小明' : lang === 'en-US' ? 'Mike' : 'タロウ',
|
|||
|
|
text: lang === 'zh-CN' ? '这款拼图看起来很不错！' :
|
|||
|
|
lang === 'en-US' ? 'This puzzle looks great!' :
|
|||
|
|
'このパズルは素晴らしいですね！',
|
|||
|
|
time: '10:05'
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
username: lang === 'zh-CN' ? '小红' : lang === 'en-US' ? 'Lucy' : 'ハナコ',
|
|||
|
|
text: lang === 'zh-CN' ? '适合多大年龄的孩子？' :
|
|||
|
|
lang === 'en-US' ? 'What age is it suitable for?' :
|
|||
|
|
'何歳の子供に適していますか？',
|
|||
|
|
time: '10:06'
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
username: lang === 'zh-CN' ? '主播' : lang === 'en-US' ? 'Host' : 'ホスト',
|
|||
|
|
text: lang === 'zh-CN' ? '这款拼图适合3-6岁的孩子，可以培养动手能力和空间想象力！' :
|
|||
|
|
lang === 'en-US' ? 'This puzzle is suitable for children aged 3-6 and helps develop hands-on skills and spatial imagination!' :
|
|||
|
|
'このパズルは3〜6歳の子供に適しており、実践的なスキルと空間想像力を養うのに役立ちます！',
|
|||
|
|
time: '10:07'
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
username: lang === 'zh-CN' ? '李华' : lang === 'en-US' ? 'David' : 'ダビデ',
|
|||
|
|
text: lang === 'zh-CN' ? '价格很优惠，已经下单了！' :
|
|||
|
|
lang === 'en-US' ? 'Great price, just ordered!' :
|
|||
|
|
'価格もお得で、注文しました！',
|
|||
|
|
time: '10:08'
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
username: lang === 'zh-CN' ? '王芳' : lang === 'en-US' ? 'Sarah' : 'サラ',
|
|||
|
|
text: lang === 'zh-CN' ? '材质安全吗？' :
|
|||
|
|
lang === 'en-US' ? 'Is the material safe?' :
|
|||
|
|
'素材は安全ですか？',
|
|||
|
|
time: '10:09'
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
username: lang === 'zh-CN' ? '主播' : lang === 'en-US' ? 'Host' : 'ホスト',
|
|||
|
|
text: lang === 'zh-CN' ? '所有产品都通过了安全认证，使用环保材料，家长可以放心！' :
|
|||
|
|
lang === 'en-US' ? 'All products are safety certified and made from eco-friendly materials. Parents can rest assured!' :
|
|||
|
|
'すべての製品は安全認証を受けており、環境に優しい素材を使用しています。親御さんも安心です！',
|
|||
|
|
time: '10:10'
|
|||
|
|
}
|
|||
|
|
];
|
|||
|
|
|
|||
|
|
let chatHtml = '';
|
|||
|
|
messages.forEach(msg => {
|
|||
|
|
if (msg.type === 'system') {
|
|||
|
|
chatHtml += `
|
|||
|
|
<div class="chat-message system">
|
|||
|
|
<div class="chat-text">${msg.text}</div>
|
|||
|
|
</div>
|
|||
|
|
`;
|
|||
|
|
} else {
|
|||
|
|
chatHtml += `
|
|||
|
|
<div class="chat-message">
|
|||
|
|
<div class="chat-message-header">
|
|||
|
|
<span class="chat-username">${msg.username}</span>
|
|||
|
|
<span class="chat-time">${msg.time}</span>
|
|||
|
|
</div>
|
|||
|
|
<div class="chat-text">${msg.text}</div>
|
|||
|
|
</div>
|
|||
|
|
`;
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
$('#chatMessages').html(chatHtml);
|
|||
|
|
scrollChatToBottom();
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 加载直播商品
|
|||
|
|
function loadLiveProducts() {
|
|||
|
|
const lang = i18n.currentLang;
|
|||
|
|
|
|||
|
|
const products = [
|
|||
|
|
{
|
|||
|
|
id: 1,
|
|||
|
|
name: '200片拼图 - 海洋世界',
|
|||
|
|
name_en: '200 Piece Puzzle - Ocean World',
|
|||
|
|
name_ja: '200ピースパズル - 海の世界',
|
|||
|
|
price: 19.99,
|
|||
|
|
originalPrice: 29.99,
|
|||
|
|
image: 'https://picsum.photos/200/200?random=live1'
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
id: 2,
|
|||
|
|
name: '艺术绘画套装',
|
|||
|
|
name_en: 'Art Painting Set',
|
|||
|
|
name_ja: 'アート絵画セット',
|
|||
|
|
price: 24.99,
|
|||
|
|
originalPrice: 34.99,
|
|||
|
|
image: 'https://picsum.photos/200/200?random=live2'
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
id: 3,
|
|||
|
|
name: '木质积木 - 100块',
|
|||
|
|
name_en: 'Wooden Blocks - 100 Pieces',
|
|||
|
|
name_ja: '木製ブロック - 100ピース',
|
|||
|
|
price: 29.99,
|
|||
|
|
originalPrice: 39.99,
|
|||
|
|
image: 'https://picsum.photos/200/200?random=live3'
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
id: 4,
|
|||
|
|
name: '磁力片建构玩具',
|
|||
|
|
name_en: 'Magnetic Building Tiles',
|
|||
|
|
name_ja: 'マグネットタイル',
|
|||
|
|
price: 34.99,
|
|||
|
|
originalPrice: 49.99,
|
|||
|
|
image: 'https://picsum.photos/200/200?random=live4'
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
id: 5,
|
|||
|
|
name: '儿童桌游套装',
|
|||
|
|
name_en: 'Kids Board Game Set',
|
|||
|
|
name_ja: '子供用ボードゲームセット',
|
|||
|
|
price: 27.99,
|
|||
|
|
originalPrice: 37.99,
|
|||
|
|
image: 'https://picsum.photos/200/200?random=live5'
|
|||
|
|
}
|
|||
|
|
];
|
|||
|
|
|
|||
|
|
let productsHtml = '';
|
|||
|
|
products.forEach(product => {
|
|||
|
|
const productName = lang === 'zh-CN' ? product.name :
|
|||
|
|
lang === 'en-US' ? product.name_en :
|
|||
|
|
product.name_ja;
|
|||
|
|
const btnText = i18n.t('add_to_cart');
|
|||
|
|
|
|||
|
|
productsHtml += `
|
|||
|
|
<div class="live-product-item" data-product-id="${product.id}">
|
|||
|
|
<div class="live-product-image">
|
|||
|
|
<img src="${product.image}" alt="${productName}">
|
|||
|
|
</div>
|
|||
|
|
<div class="live-product-info">
|
|||
|
|
<div class="live-product-title">${productName}</div>
|
|||
|
|
<div class="live-product-price">
|
|||
|
|
<span class="live-product-current-price">$${product.price.toFixed(2)}</span>
|
|||
|
|
<span class="live-product-original-price">$${product.originalPrice.toFixed(2)}</span>
|
|||
|
|
</div>
|
|||
|
|
<button class="live-product-btn">${btnText}</button>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
`;
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
$('#liveProducts').html(productsHtml);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 更新直播统计
|
|||
|
|
function updateLiveStats() {
|
|||
|
|
const currentViewers = parseInt($('#viewerCount').text().replace(/,/g, ''));
|
|||
|
|
const currentLikes = parseInt($('#likeCount').text().replace(/,/g, ''));
|
|||
|
|
const currentMessages = parseInt($('#messageCount').text().replace(/,/g, ''));
|
|||
|
|
|
|||
|
|
// 随机增加数值
|
|||
|
|
const newViewers = currentViewers + Math.floor(Math.random() * 20) - 5;
|
|||
|
|
const newLikes = currentLikes + Math.floor(Math.random() * 15);
|
|||
|
|
const newMessages = currentMessages + Math.floor(Math.random() * 5);
|
|||
|
|
|
|||
|
|
$('#viewerCount').text(Math.max(1000, newViewers).toLocaleString());
|
|||
|
|
$('#likeCount').text(Math.max(500, newLikes).toLocaleString());
|
|||
|
|
$('#messageCount').text(Math.max(50, newMessages).toLocaleString());
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 发送消息
|
|||
|
|
function sendMessage() {
|
|||
|
|
const message = $('#chatInput').val().trim();
|
|||
|
|
|
|||
|
|
if (!message) {
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const lang = i18n.currentLang;
|
|||
|
|
const username = lang === 'zh-CN' ? '我' : lang === 'en-US' ? 'Me' : '私';
|
|||
|
|
const currentTime = new Date();
|
|||
|
|
const timeString = `${currentTime.getHours()}:${currentTime.getMinutes().toString().padStart(2, '0')}`;
|
|||
|
|
|
|||
|
|
const messageHtml = `
|
|||
|
|
<div class="chat-message">
|
|||
|
|
<div class="chat-message-header">
|
|||
|
|
<span class="chat-username">${username}</span>
|
|||
|
|
<span class="chat-time">${timeString}</span>
|
|||
|
|
</div>
|
|||
|
|
<div class="chat-text">${message}</div>
|
|||
|
|
</div>
|
|||
|
|
`;
|
|||
|
|
|
|||
|
|
$('#chatMessages').append(messageHtml);
|
|||
|
|
$('#chatInput').val('');
|
|||
|
|
scrollChatToBottom();
|
|||
|
|
|
|||
|
|
// 更新消息计数
|
|||
|
|
const currentCount = parseInt($('#messageCount').text().replace(/,/g, ''));
|
|||
|
|
$('#messageCount').text((currentCount + 1).toLocaleString());
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 添加随机消息
|
|||
|
|
function addRandomMessage() {
|
|||
|
|
const lang = i18n.currentLang;
|
|||
|
|
|
|||
|
|
const usernames = lang === 'zh-CN' ? ['张三', '李四', '王五', '赵六'] :
|
|||
|
|
lang === 'en-US' ? ['John', 'Jane', 'Bob', 'Alice'] :
|
|||
|
|
['太郎', '花子', '次郎', '美咲'];
|
|||
|
|
|
|||
|
|
const messages = lang === 'zh-CN' ?
|
|||
|
|
['这个产品真不错！', '价格很实惠', '已经下单了', '质量怎么样？', '有优惠码吗？'] :
|
|||
|
|
lang === 'en-US' ?
|
|||
|
|
['This product is great!', 'Great price', 'Just ordered', 'How\'s the quality?', 'Any discount codes?'] :
|
|||
|
|
['この製品は素晴らしいです！', '価格もお得', '注文しました', '品質はどうですか？', '割引コードはありますか？'];
|
|||
|
|
|
|||
|
|
const randomUsername = usernames[Math.floor(Math.random() * usernames.length)];
|
|||
|
|
const randomMessage = messages[Math.floor(Math.random() * messages.length)];
|
|||
|
|
const currentTime = new Date();
|
|||
|
|
const timeString = `${currentTime.getHours()}:${currentTime.getMinutes().toString().padStart(2, '0')}`;
|
|||
|
|
|
|||
|
|
const messageHtml = `
|
|||
|
|
<div class="chat-message">
|
|||
|
|
<div class="chat-message-header">
|
|||
|
|
<span class="chat-username">${randomUsername}</span>
|
|||
|
|
<span class="chat-time">${timeString}</span>
|
|||
|
|
</div>
|
|||
|
|
<div class="chat-text">${randomMessage}</div>
|
|||
|
|
</div>
|
|||
|
|
`;
|
|||
|
|
|
|||
|
|
$('#chatMessages').append(messageHtml);
|
|||
|
|
scrollChatToBottom();
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 滚动聊天到底部
|
|||
|
|
function scrollChatToBottom() {
|
|||
|
|
const chatMessages = document.getElementById('chatMessages');
|
|||
|
|
if (chatMessages) {
|
|||
|
|
chatMessages.scrollTop = chatMessages.scrollHeight;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 添加商品到购物车
|
|||
|
|
function addProductToCart(productId) {
|
|||
|
|
const lang = i18n.currentLang;
|
|||
|
|
|
|||
|
|
// 这里使用模拟数据，实际应该从产品列表中获取
|
|||
|
|
const product = {
|
|||
|
|
id: productId,
|
|||
|
|
name: '直播商品',
|
|||
|
|
name_en: 'Live Product',
|
|||
|
|
name_ja: 'ライブ商品',
|
|||
|
|
price: 19.99,
|
|||
|
|
image: 'https://picsum.photos/200/200?random=' + productId
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
cart.addToCart(product);
|
|||
|
|
|
|||
|
|
const message = i18n.t('product_added_to_cart') ||
|
|||
|
|
(lang === 'zh-CN' ? '商品已添加到购物车' :
|
|||
|
|
lang === 'en-US' ? 'Product added to cart' :
|
|||
|
|
'商品がカートに追加されました');
|
|||
|
|
|
|||
|
|
alert(message);
|
|||
|
|
}
|