383 lines
17 KiB
JavaScript
383 lines
17 KiB
JavaScript
"use strict";
|
|
var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
|
|
function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
|
|
return new (P || (P = Promise))(function (resolve, reject) {
|
|
function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
|
|
function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
|
|
function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
|
|
step((generator = generator.apply(thisArg, _arguments || [])).next());
|
|
});
|
|
};
|
|
function goi_sp_tu_api() {
|
|
return __awaiter(this, void 0, void 0, function* () {
|
|
return new Promise((resolve, reject) => {
|
|
return resolve(List_product);
|
|
});
|
|
});
|
|
}
|
|
function goi_sp_user_tu_api() {
|
|
return __awaiter(this, void 0, void 0, function* () {
|
|
return new Promise((resolve, reject) => {
|
|
return resolve(User);
|
|
});
|
|
});
|
|
}
|
|
function hienthi_nhomsp() {
|
|
return __awaiter(this, void 0, void 0, function* () {
|
|
const lay_sp_user_tu_api = yield goi_sp_user_tu_api();
|
|
DisplayListProductGroup(lay_sp_user_tu_api, 'js-holder-product-group');
|
|
});
|
|
}
|
|
function hienthi_sp() {
|
|
return __awaiter(this, void 0, void 0, function* () {
|
|
const lay_sp_tu_api = yield goi_sp_tu_api();
|
|
// code hien thi danh sach dang dien ra
|
|
showListProductHome(lay_sp_tu_api, 'out_stock', 'js-holder-list-out-stock');
|
|
showListProductHome(lay_sp_tu_api, 'started', 'js-holder-list-started');
|
|
showListProductHome(lay_sp_tu_api, 'coming', 'js-holder-list-coming');
|
|
});
|
|
}
|
|
function showListProductHome(lay_sp_tu_api, status, holderId) {
|
|
const html = [];
|
|
const holder = document.getElementById(holderId);
|
|
lay_sp_tu_api
|
|
.filter((product) => product.status == status)
|
|
.forEach(function (product, keyIndex) {
|
|
html.push(xayhtml(product));
|
|
if (status != 'out_stock' && product.to_time > product.from_time) {
|
|
const countdownTime = (status == 'started') ? product.to_time : product.from_time;
|
|
countDown(`js-deal-time-${product.productId}`, countdownTime);
|
|
}
|
|
});
|
|
if (holder) {
|
|
holder.innerHTML = html.join('');
|
|
}
|
|
}
|
|
function xayhtml(product) {
|
|
const quantity_sold = product.quantity - product.sale_quantity;
|
|
const line_sold = Math.ceil((quantity_sold / product.quantity) * 100);
|
|
const HtmlSl_nhom = product.quantity > product.quantity_member
|
|
? `<span class="soluongnhom">${product.quantity / product.quantity_member} nhóm duy nhất</span>`
|
|
: '';
|
|
let HtmlProductItem = '';
|
|
if (product.status === 'started' && product.price > product.sale_quantity) {
|
|
let htmlCheckGroup = '';
|
|
let HtmlListMember = '';
|
|
let htmlBtnProduct = '';
|
|
let addMember = '';
|
|
let noteMember = '';
|
|
if (product.list_group.length > 0) {
|
|
product.list_group.forEach((item) => {
|
|
item.list_member.forEach((user, index) => {
|
|
var more_qnt_member = product.quantity_member - index - 1;
|
|
const isLastMember = index > product.quantity_member;
|
|
HtmlListMember += `
|
|
<a href="javascript:void(0)" class="item${isLastMember ? 'add' : ''}">
|
|
${formatName(user.name_member)}
|
|
</a>
|
|
`;
|
|
addMember = isLastMember ? '' : '<a href="javascript:void(0)" class="item add">+</a>';
|
|
noteMember = isLastMember ? '' : `Cần thêm <b style="color: var(--color-global);">${more_qnt_member}</b> thành viên`;
|
|
});
|
|
});
|
|
htmlCheckGroup = `
|
|
<div class="box-price d-flex align-items">
|
|
<div class="retail_price">${formatPrice(product.retail_price)}đ</div>
|
|
<del class="price-old">${formatPrice(product.price)}đ</del>
|
|
</div>
|
|
<div class="list-memeber d-flex align-items">
|
|
<div class="box-memeber d-flex">${HtmlListMember} ${addMember}</div>
|
|
<div class="note">${noteMember}</div>
|
|
</div>
|
|
`;
|
|
htmlBtnProduct = `
|
|
<a href="javascript:void(0)" class="add-member" onclick="ShowPopupGlobal('AddMember')">
|
|
<i class="fa fa-plus"></i>
|
|
Mời thêm bạn
|
|
</a>
|
|
`;
|
|
}
|
|
else {
|
|
htmlCheckGroup = `
|
|
<div class="box-price d-flex align-items">
|
|
<div class="retail_price">${formatPrice(product.retail_price)}đ</div>
|
|
<span class="red">Khi mua nhóm ${product.quantity_member} người</span>
|
|
</div>
|
|
<div class="price-banle">Giá bán lẻ: ${formatPrice(product.price)}đ</div>
|
|
`;
|
|
htmlBtnProduct = `
|
|
<a href="javascript:void(0)" class="add-group" onclick="ShowPopupGlobal('AddGroup')">
|
|
<i class="fa fa-angle-double-right"></i>
|
|
<span>Tạo nhóm ngay</span>
|
|
<i class="fa fa-angle-double-left"></i>
|
|
</a>
|
|
`;
|
|
}
|
|
HtmlProductItem = `
|
|
<div class="product-item d-flex">
|
|
<a href="${product.productUrl}" class="product-image">
|
|
<img src="${product.image}" alt="${product.product_name}">
|
|
${HtmlSl_nhom}
|
|
</a>
|
|
<div class="product-info">
|
|
<a href="${product.productUrl}" class="product-name line-clamp-2">${product.product_name}</a>
|
|
${htmlCheckGroup}
|
|
<div class="box-sold">
|
|
<i class="icon_2023 hot"></i>
|
|
<div class="line-deal" style="width: ${line_sold}%;"></div>
|
|
<span class="quantity-sold">${quantity_sold} đã bán hết</span>
|
|
</div>
|
|
<div class="box-button d-flex align-items space-between">
|
|
<div class="time d-flex align-items">
|
|
<i class="icon_2023 time"></i>
|
|
<div class="product-time-holder js-deal-time-${product.productId}" data-time="${product.to_time}"></div>
|
|
</div>
|
|
${htmlBtnProduct}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
`;
|
|
}
|
|
else if (product.status === 'coming') {
|
|
HtmlProductItem = `
|
|
<div class="product-item d-flex">
|
|
<a href="${product.productUrl}" class="product-image">
|
|
<img src="${product.image}" alt="${product.product_name}">
|
|
${HtmlSl_nhom}
|
|
</a>
|
|
<div class="product-info">
|
|
<a href="${product.productUrl}" class="product-name line-clamp-2">${product.product_name}</a>
|
|
<div class="box-price d-flex align-items">
|
|
<div class="retail_price">${formatPrice(product.retail_price)}đ</div>
|
|
<span class="red">Khi mua nhóm ${product.quantity_member} người</span>
|
|
</div>
|
|
<div class="price-banle">Giá bán lẻ: ${formatPrice(product.price)}đ</div>
|
|
<div class="box-time d-flex align-items">
|
|
<i class="icon_2023 time"></i>
|
|
<div class="product-time-holder js-deal-time-${product.productId}" data-time="${product.from_time}"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
`;
|
|
}
|
|
else if (product.status === 'out_stock') {
|
|
HtmlProductItem = `
|
|
<div class="product-item d-flex">
|
|
<a href="${product.productUrl}" class="product-image sold">
|
|
<img src="${product.image}" alt="${product.product_name}">
|
|
${HtmlSl_nhom}
|
|
<span class="icon-sold"></span>
|
|
</a>
|
|
<div class="product-info">
|
|
<a href="${product.productUrl}" class="product-name line-clamp-2">${product.product_name}</a>
|
|
<div class="retail_price">${formatPrice(product.retail_price)}</div>
|
|
<div class="total-group">
|
|
<i class="icon_2023 group"></i>
|
|
<span>5 Nhóm mua hàng thành công</span>
|
|
</div>
|
|
<div class="box-sold">
|
|
<i class="icon_2023 hot"></i>
|
|
<div class="line-deal" style="width: 100%;"></div>
|
|
<span class="quantity-sold">${product.quantity} đã bán hết</span>
|
|
</div>
|
|
<div class="box-time d-flex align-items">
|
|
<i class="icon_2023 time"></i>
|
|
<div class="product-time-holder">
|
|
<b>00</b><b>00</b><b>00</b>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
`;
|
|
}
|
|
else {
|
|
HtmlProductItem = `<div class="d-flex align-items space-center notproduct">Sản phẩm đang được cập nhật..!</div>`;
|
|
}
|
|
return HtmlProductItem;
|
|
}
|
|
function DisplayListProductGroup(ProductUser, holderId) {
|
|
const html = [];
|
|
const holder = document.getElementById(holderId);
|
|
ProductUser.forEach(function (product, keyIndex) {
|
|
html.push(xayhtmlProductGroup(product));
|
|
product.list_group.forEach((Item) => {
|
|
countDown(`js-deal-time-${Item.product_id}`, Item.to_time);
|
|
});
|
|
});
|
|
if (holder) {
|
|
holder.innerHTML = html.join('');
|
|
}
|
|
}
|
|
function xayhtmlProductGroup(product) {
|
|
var HtmlProductItem = '';
|
|
var HtmlListMember = '';
|
|
var addMember = '';
|
|
var noteMember = '';
|
|
if (product.list_group.length > 0) {
|
|
product.list_group.forEach((Item) => {
|
|
const quantity_sold = Item.quantity - Item.sale_quantity;
|
|
const line_sold = Math.ceil((Item.quantity - Item.sale_quantity) / Item.quantity * 100);
|
|
var HtmlSl_nhom = '';
|
|
if (Item.quantity > Item.quantity_member) {
|
|
HtmlSl_nhom = `<span class="soluongnhom">${Item.quantity / Item.quantity_member} nhóm duy nhất</span>`;
|
|
}
|
|
Item.list_member.forEach((user, index) => {
|
|
var more_qnt_member = Item.quantity_member - index - 1;
|
|
const isLastMember = index > Item.quantity_member;
|
|
HtmlListMember += `
|
|
<a href="javascript:void(0)" class="item${isLastMember ? 'add' : ''}">
|
|
${formatName(user.name_member)}
|
|
</a>
|
|
`;
|
|
addMember = isLastMember ? '' : '<a href="javascript:void(0)" class="item add">+</a>';
|
|
noteMember = isLastMember ? '' : `Cần thêm <b style="color: var(--color-global);">${more_qnt_member}</b> thành viên`;
|
|
});
|
|
HtmlProductItem += `
|
|
<div class="product-item d-flex">
|
|
<a href="${Item.productUrl}" class="product-image">
|
|
<img src="${Item.product_image}" alt="${Item.product_name}">
|
|
${HtmlSl_nhom}
|
|
</a>
|
|
<div class="product-info">
|
|
<a href="${Item.productUrl}" class="product-name line-clamp-2">${Item.product_name}</a>
|
|
<div class="box-price d-flex align-items">
|
|
<div class="retail_price">
|
|
${formatPrice(Item.retail_price)}đ
|
|
</div>
|
|
<del class="price-old">${formatPrice(Item.price)}đ</del>
|
|
</div>
|
|
|
|
<div class="list-memeber d-flex align-items">
|
|
<div class="box-memeber d-flex">
|
|
${HtmlListMember}${addMember}
|
|
</div>
|
|
<div class="note">
|
|
${noteMember}
|
|
</div>
|
|
</div>
|
|
|
|
<div class="box-sold">
|
|
<i class="icon_2023 hot"></i>
|
|
<div class="line-deal" style="width: ${line_sold}%;"></div>
|
|
<span class="quantity-sold">${quantity_sold} đã bán hết</span>
|
|
</div>
|
|
<div class="box-button d-flex align-items space-between">
|
|
<div class="box-time d-flex align-items">
|
|
<i class="icon_2023 time"></i>
|
|
<div class="product-time-holder js-deal-time-${Item.product_id}" data-time="${Item.to_time}">
|
|
</div>
|
|
</div>
|
|
<a href="javascript:void(0)" class="add-member" onclick="ShowPopupGlobal('AddMember')">
|
|
<i class="fa fa-plus"></i>
|
|
Mời thêm bạn
|
|
</a>
|
|
</div>
|
|
<div class="note-leader">
|
|
<i class="icon_2023 bell"></i>
|
|
<span>${product.leaderEmail} vừa tạo nhóm thành công</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
`;
|
|
});
|
|
}
|
|
return HtmlProductItem;
|
|
}
|
|
function closeBackground() {
|
|
var eleBackground = document.getElementById('overlay');
|
|
eleBackground.classList.remove('active');
|
|
var eleGlobalPopup = document.getElementById('js-global-popup');
|
|
eleGlobalPopup.classList.remove('active');
|
|
document.body.classList.remove('active');
|
|
}
|
|
function copyLink() {
|
|
// Get the pre element
|
|
var preElement = document.getElementById("linkshare");
|
|
// Check if the element exists
|
|
if (preElement) {
|
|
// Create a textarea element
|
|
var textarea = document.createElement("textarea");
|
|
textarea.value = preElement.textContent || "";
|
|
document.body.appendChild(textarea);
|
|
textarea.select();
|
|
document.execCommand("copy");
|
|
document.body.removeChild(textarea);
|
|
alert("Copy link share thành công!");
|
|
}
|
|
}
|
|
// them o nhap email
|
|
let emailCounter = 3;
|
|
function addEmail() {
|
|
const contentEmail = document.getElementById('list-email-share');
|
|
const newEmailInput = document.createElement('input');
|
|
newEmailInput.type = 'text';
|
|
newEmailInput.id = 'email' + emailCounter;
|
|
newEmailInput.placeholder = 'Email ' + emailCounter;
|
|
contentEmail === null || contentEmail === void 0 ? void 0 : contentEmail.appendChild(newEmailInput);
|
|
emailCounter++;
|
|
}
|
|
function CountdownJoin() {
|
|
let countdown = 10 * 60;
|
|
const countdownElement = document.getElementById('js-time-join');
|
|
function updateCountdown() {
|
|
const minutes = Math.floor(countdown / 60);
|
|
const seconds = countdown % 60;
|
|
const formattedMinutes = minutes.toString().padStart(2, '0');
|
|
const formattedSeconds = seconds.toString().padStart(2, '0');
|
|
const formattedTime = `<b>${formattedMinutes}</b><b>${formattedSeconds}</b>`;
|
|
if (countdownElement) {
|
|
countdownElement.innerHTML = formattedTime;
|
|
}
|
|
}
|
|
function decrementCountdown() {
|
|
if (countdown > 0) {
|
|
countdown--;
|
|
updateCountdown();
|
|
}
|
|
else {
|
|
clearInterval(intervalId);
|
|
closeBackground();
|
|
}
|
|
}
|
|
updateCountdown();
|
|
const intervalId = setInterval(decrementCountdown, 1000);
|
|
}
|
|
function ShowPopupGlobal(key) {
|
|
const globalPopup = document.getElementById('js-global-popup');
|
|
globalPopup === null || globalPopup === void 0 ? void 0 : globalPopup.classList.add('active');
|
|
const eleBackground = document.getElementById('overlay');
|
|
eleBackground.classList.add('active');
|
|
document.body.classList.add('active');
|
|
const holderPupop = document.getElementById('js-content-popup');
|
|
if (key == 'AddGroup') {
|
|
holderPupop.innerHTML = AddGroupTemplate;
|
|
}
|
|
else if (key == 'AddMember') {
|
|
holderPupop.innerHTML = ShareGroupTemplate;
|
|
}
|
|
else if (key == 'waiting_join') {
|
|
holderPupop.innerHTML = JoinProductTemplate;
|
|
CountdownJoin();
|
|
}
|
|
}
|
|
function changeTab(contentId) {
|
|
// Xóa lớp 'active' khỏi tất cả các tab
|
|
const tabItems = document.querySelectorAll('.tab-list .item');
|
|
tabItems.forEach(item => item.classList.remove('active'));
|
|
// Thêm lớp 'active' vào tab được nhấp chuột
|
|
const selectedTabItem = event.currentTarget.parentElement; // Lấy phần tử cha của <a> (li.item)
|
|
// Lấy phần tử cha của <a> (li.item)
|
|
selectedTabItem.classList.add('active');
|
|
// Xóa lớp 'active' khỏi tất cả nội dung của tab
|
|
const tabPanes = document.querySelectorAll('.box-list-product');
|
|
tabPanes.forEach(pane => pane.classList.remove('active'));
|
|
// Thêm lớp 'active' vào nội dung của tab tương ứng
|
|
const selectedTabPane = document.querySelector(contentId);
|
|
if (selectedTabPane) {
|
|
selectedTabPane.classList.add('active');
|
|
}
|
|
}
|
|
// run function
|
|
hienthi_sp();
|
|
hienthi_nhomsp();
|