tieptk/mua_hang_theo_nhom
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

11:40 29/12/2023

Browse Source
This commit is contained in:
Tieptk
2023-12-29 11:40:36 +07:00
parent 6c8d6d98c0
commit 1a4abf2dda
14 changed files with 3689 additions and 83 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1334
assets/css/style_mobile.css Normal file
View File

File diff suppressed because it is too large Load Diff

1
assets/css/style_mobile.css.map Normal file
View File

File diff suppressed because one or more lines are too long

1323
assets/css/style_mobile.scss Normal file
View File

File diff suppressed because it is too large Load Diff

BIN
assets/images/background-successful-purchase-mb.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 68 KiB

BIN
assets/images/background-thele-mb.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 41 KiB

22
dist/data.js vendored
View File

@@ -2,7 +2,7 @@
//
const List_product = [
{
productId: 1,
productId: 22,
product_name: 'Combo Bàn phím và Chuột không dây MOFII CANDY Milk Tea',
productUrl: '/',
image: 'https://mygear.vn/media/product/589-1.jpg',
@@ -89,7 +89,7 @@ const List_product = [
quantity: 30,
sale_quantity: 10,
quantity_member: 5,
from_time: 1703696400000,
from_time: 1703782800000,
to_time: 1703955600000,
status: 'coming',
category_info: [
@@ -150,7 +150,7 @@ const User = [
{
group_id: 1,
name_group: 'Hura săn sale',
product_id: 1,
product_id: 33,
productUrl: '/',
product_image: 'https://mygear.vn/media/product/589-1.jpg',
product_name: 'Combo Bàn phím và Chuột không dây MOFII CANDY Milk Tea',
@@ -159,7 +159,7 @@ const User = [
quantity: 20,
sale_quantity: 10,
quantity_member: 5,
to_time: 1703955600000,
to_time: 1703955500000,
list_member: [
{
id_member: 1,
@@ -304,7 +304,7 @@ const ShareGroupTemplate = `
</a>
</div>
<a href="javascript:void(0)" class="btn-add-member" onclick="showContentPopup('waiting_join')">
<a href="javascript:void(0)" class="btn-add-member" onclick="ShowPopupGlobal('waiting_join')">
Gửi email thông báo
</a>
</div>
@@ -429,3 +429,15 @@ const InfoPayProductTemplate = `
</a>
</div>
`;
const OutTimeJoinTpl = `
<a href="javascript:void(0)" class="btn-close"
onclick="$('.global-popup').removeClass('active');closeBackground()">
<i class="fa fa-times"></i>
</a>
<div class="content">
<h2 class="title">Thời gian tham gia nhóm Hurasoft săn sale Noel đã hết hạn!</h2>
<div class="note">Bạn vui lòng tham gia nhóm khác hoặc tự tạo nhóm để mua sản phẩm chuột máy tính ABC với giá ưu đãi nha</div>
</div>
`;
function XayHtmlPopup() {
}

58
dist/main.js vendored
View File

@@ -25,7 +25,6 @@ function goi_sp_user_tu_api() {
function hienthi_nhomsp() {
return __awaiter(this, void 0, void 0, function* () {
const lay_sp_user_tu_api = yield goi_sp_user_tu_api();
console.log(lay_sp_user_tu_api);
DisplayListProductGroup(lay_sp_user_tu_api, 'js-holder-product-group');
});
}
@@ -33,7 +32,6 @@ 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
console.log(lay_sp_tu_api);
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');
@@ -73,14 +71,13 @@ function xayhtml(product) {
item.list_member.forEach((user, index) => {
var more_qnt_member = product.quantity_member - index - 1;
const isLastMember = index > product.quantity_member;
console.log(isLastMember);
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` : '';
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 = `
@@ -203,6 +200,9 @@ function DisplayListProductGroup(ProductUser, holderId) {
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('');
@@ -222,31 +222,15 @@ function xayhtmlProductGroup(product) {
HtmlSl_nhom = `<span class="soluongnhom">${Item.quantity / Item.quantity_member} nhóm duy nhất</span>`;
}
Item.list_member.forEach((user, index) => {
if (index > Item.quantity_member) {
HtmlListMember += `
<a href="javascript:void(0)" class="item">
${formatName(user.name_member)}
</a>
`;
addMember = ``;
noteMember = ``;
}
else {
var more_qnt_member = Item.quantity_member - index - 1;
const isLastMember = index > Item.quantity_member;
HtmlListMember += `
<a href="javascript:void(0)" class="item">
<a href="javascript:void(0)" class="item${isLastMember ? 'add' : ''}">
${formatName(user.name_member)}
</a>
`;
addMember = `
<a href="javascript:void(0)" class="item add">
+
</a>
`;
noteMember = `
Cần thêm <b style="color: var(--color-global);">${more_qnt_member}</b> thành viên
`;
}
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">
@@ -283,7 +267,7 @@ function xayhtmlProductGroup(product) {
<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">
<a href="javascript:void(0)" class="add-member" onclick="ShowPopupGlobal('AddMember')">
<i class="fa fa-plus"></i>
Mời thêm bạn
</a>
@@ -371,8 +355,28 @@ function ShowPopupGlobal(key) {
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();
CountdownJoin();

811
index-mobile.html Normal file
View File

@@ -0,0 +1,811 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mua hàng theo nhóm</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.3.1/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="assets/css/style_mobile.css">
</head>
<body>
<div class="container-mb">
<script src="./dist/hoadaoroi.js"></script>
<div class="overlay" id="overlay" onclick="closeBackground();"></div>
<div class="header">
<div class="container">
<div class="header-main-content d-flex align-items space-between">
<a href="/" class="logo">
<img src="./assets/images/logo.png" width="126" height="50" alt="logo">
</a>
<div class="header-right d-flex align-items">
<a href="javascript:void(0)" class="item d-flex align-items">
<i class="icon_2023 thele"></i>
<span class="txt">Thể lệ</span>
</a>
<a href="javascript:void(0)" class="item d-flex align-items">
<i class="icon_2023 muahang" aria-hidden="true"></i>
<span class="txt">Mua thành công</span>
</a>
<a href="/taikhoan" class="item d-flex align-items">
<i class="icon_2023 user"></i>
<span class="txt">
Hi, Hồng! <i class="fa fa-caret-down"></i>
</span>
</a>
</div>
</div>
</div>
</div>
<div class="homepage">
<div class="container">
<div class="banner">
<a href="" class="item">
<img src="./assets/images/banner.png" alt="">
</a>
</div>
<div class="box-quytrinh d-flex space-center">
<div class="item">
<i class="icon_2023 group"></i>
<span class="txt">Tạo nhóm</span>
</div>
<div class="item">
<i class="icon_2023 share"></i>
<span class="txt">Chia sẻ, <br> mời thành viên</span>
</div>
<div class="item">
<i class="icon_2023 cart"></i>
<span class="txt">Mua hàng <br> theo nhóm</span>
</div>
<div class="item">
<i class="icon_2023 check"></i>
<span class="txt">Hoàn thành</span>
</div>
</div>
<div class="box-combo-sold-out d-flex flex-wrap space-center" id="js-holder-list-out-stock">
<div class="product-item d-flex">
<a href="" class="product-image sold">
<img src="./assets/images/image-sp.png" alt="">
<span class="soluongnhom">5 nhóm duy nhất</span>
<span class="icon-sold"></span>
</a>
<div class="product-info">
<a href="" class="product-name line-clamp-2">Combo Bàn phím và Chuột không dây MOFII CANDY
Milk
Tea/ Nâu Combo Bàn phím và Chuột không dây MOFII CANDY Milk Tea/ Nâu</a>
<div class="retail_price">
199.000đ
</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: 90%;"></div>
<span class="quantity-sold">10 đã 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 js-deal-time" data-time="">
<b>20</b>
<b>11</b>
<b>30</b>
</div>
</div>
</div>
</div>
<div class="product-item d-flex">
<a href="" class="product-image sold">
<img src="./assets/images/image-sp.png" alt="">
<span class="soluongnhom">5 nhóm duy nhất</span>
<span class="icon-sold"></span>
</a>
<div class="product-info">
<a href="" class="product-name line-clamp-2">Combo Bàn phím và Chuột không dây MOFII CANDY
Milk
Tea/ Nâu Combo Bàn phím và Chuột không dây MOFII CANDY Milk Tea/ Nâu</a>
<div class="retail_price">
199.000đ
</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: 90%;"></div>
<span class="quantity-sold">10 đã 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 js-deal-time" data-time="">
<b>20</b>
<b>11</b>
<b>30</b>
</div>
</div>
</div>
</div>
</div>
<div class="box-group-user background-white">
<h2 class="title">Nhóm của bạn</h2>
<div class="list-product d-flex flex-wrap" id="js-holder-product-group">
<div class="product-item d-flex">
<a href="" class="product-image">
<img src="./assets/images/image-sp.png" alt="">
<span class="soluongnhom">5 nhóm duy nhất</span>
</a>
<div class="product-info">
<a href="" class="product-name line-clamp-2">Combo Bàn phím và Chuột không dây MOFII
CANDY
Milk
Tea/ Nâu Combo Bàn phím và Chuột không dây MOFII CANDY Milk Tea/ Nâu</a>
<div class="box-price d-flex align-items">
<div class="retail_price">
199.000đ
</div>
<del class="price-old">320.000đ</del>
</div>
<div class="list-memeber d-flex align-items">
<div class="box-memeber d-flex">
<a href="javascript:void(0)" class="item">
v
</a>
<a href="javascript:void(0)" class="item add">
+
</a>
</div>
<div class="note">
Cần thêm <b style="color: var(--color-global);">02</b> thành viên
</div>
</div>
<div class="box-sold">
<i class="icon_2023 hot"></i>
<div class="line-deal" style="width: 90%;"></div>
<span class="quantity-sold">10 đã 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" data-time="">
<b>20</b>
<b>11</b>
<b>30</b>
</div>
</div>
<a href="javascript:void(0)" class="add-member">
<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>Hongvtxx@gmail.com vừa tạo nhóm thành công</span>
</div>
</div>
</div>
<div class="product-item d-flex">
<a href="" class="product-image">
<img src="./assets/images/image-sp.png" alt="">
<span class="soluongnhom">5 nhóm duy nhất</span>
</a>
<div class="product-info">
<a href="" class="product-name line-clamp-2">Combo Bàn phím và Chuột không dây MOFII
CANDY
Milk
Tea/ Nâu Combo Bàn phím và Chuột không dây MOFII CANDY Milk Tea/ Nâu</a>
<div class="box-price d-flex align-items">
<div class="retail_price">
199.000đ
</div>
<del class="price-old">320.000đ</del>
</div>
<div class="list-memeber d-flex align-items">
<div class="box-memeber d-flex">
<a href="javascript:void(0)" class="item">
v
</a>
<a href="javascript:void(0)" class="item add">
+
</a>
</div>
<div class="note">
Cần thêm <b style="color: var(--color-global);">02</b> thành viên
</div>
</div>
<div class="box-sold">
<i class="icon_2023 hot"></i>
<div class="line-deal" style="width: 90%;"></div>
<span class="quantity-sold">10 đã 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" data-time="">
<b>20</b>
<b>11</b>
<b>30</b>
</div>
</div>
<a href="javascript:void(0)" class="add-member">
<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>Hongvtxx@gmail.com vừa tạo nhóm thành công</span>
</div>
</div>
</div>
</div>
</div>
<div class="group-list-product">
<ul class="tab-list">
<li class="item active">
<a href="javascript:void(0)" onclick="changeTab('#box-pro-status')">Đang diễn ra</a>
</li>
<li class="item">
<a href="javascript:void(0)" onclick="changeTab('#box-pro-coming')">Sắp diễn ra</a>
</li>
</ul>
<div class="box-list-product active" id="box-pro-status">
<div class="list-category d-flex align-items">
<a href="javascript:void(0)" class="item-cate active">
Tất cả +
</a>
<a href="javascript:void(0)" class="item-cate" data-id="1">
Bàn phím
</a>
<a href="javascript:void(0)" class="item-cate" data-id="2">
Phụ kiện
</a>
</div>
<div class="product-list d-flex flex-wrap" id="js-holder-list-started">
<div class="product-item d-flex">
<a href="" class="product-image">
<img src="./assets/images/image-sp.png" alt="">
<span class="soluongnhom">5 nhóm duy nhất</span>
</a>
<div class="product-info">
<a href="" class="product-name line-clamp-2">Combo Bàn phím và Chuột không dây MOFII
CANDY
Milk
Tea/ Nâu Combo Bàn phím và Chuột không dây MOFII CANDY Milk Tea/ Nâu</a>
<div class="box-price d-flex align-items">
<div class="retail_price">
199.000đ
</div>
<del class="price-old">320.000đ</del>
</div>
<div class="list-memeber d-flex align-items">
<div class="box-memeber d-flex">
<a href="javascript:void(0)" class="item">
v
</a>
<a href="javascript:void(0)" class="item add">
+
</a>
</div>
<div class="note">
Cần thêm <b style="color: var(--color-global);">02</b> thành viên
</div>
</div>
<div class="box-sold">
<i class="icon_2023 hot"></i>
<div class="line-deal" style="width: 90%;"></div>
<span class="quantity-sold">10 đã 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" data-time="">
<b>20</b>
<b>11</b>
<b>30</b>
</div>
</div>
<a href="javascript:void(0)" class="add-member">
<i class="fa fa-plus"></i>
Mời thêm bạn
</a>
</div>
</div>
</div>
<div class="product-item d-flex">
<a href="" class="product-image">
<img src="./assets/images/image-sp.png" alt="">
<span class="soluongnhom">5 nhóm duy nhất</span>
</a>
<div class="product-info">
<a href="" class="product-name line-clamp-2">Combo Bàn phím và Chuột không dây MOFII
CANDY
Milk
Tea/ Nâu Combo Bàn phím và Chuột không dây MOFII CANDY Milk Tea/ Nâu</a>
<div class="box-price d-flex align-items">
<div class="retail_price">
199.000đ
</div>
<span class="red">Khi mua nhóm 5 người</span>
</div>
<div class="price-banle">Giá bán lẻ: 320.000đ</div>
<div class="box-sold">
<i class="icon_2023 hot"></i>
<div class="line-deal" style="width: 90%;"></div>
<span class="quantity-sold">10 đã 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" data-time="">
<b>20</b>
<b>11</b>
<b>30</b>
</div>
</div>
<a href="javascript:void(0)" class="add-group">
<i class="fa fa-angle-double-right"></i>
<span>Tạo nhóm ngay</span>
<i class="fa fa-angle-double-left"></i>
</a>
</div>
</div>
</div>
<div class="product-item d-flex">
<a href="" class="product-image">
<img src="./assets/images/image-sp.png" alt="">
<span class="soluongnhom">5 nhóm duy nhất</span>
</a>
<div class="product-info">
<a href="" class="product-name line-clamp-2">Combo Bàn phím và Chuột không dây MOFII
CANDY
Milk
Tea/ Nâu Combo Bàn phím và Chuột không dây MOFII CANDY Milk Tea/ Nâu</a>
<div class="box-price d-flex align-items">
<div class="retail_price">
199.000đ
</div>
<span class="red">Khi mua nhóm 5 người</span>
</div>
<div class="price-banle">Giá bán lẻ: 320.000đ</div>
<div class="box-sold">
<i class="icon_2023 hot"></i>
<div class="line-deal" style="width: 90%;"></div>
<span class="quantity-sold">10 đã 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" data-time="">
<b>20</b>
<b>11</b>
<b>30</b>
</div>
</div>
<a href="javascript:void(0)" class="add-group">
<i class="fa fa-angle-double-right"></i>
<span>Tạo nhóm ngay</span>
<i class="fa fa-angle-double-left"></i>
</a>
</div>
</div>
</div>
</div>
</div>
<div class="box-list-product" id="box-pro-coming">
<div class="list-category d-flex align-items">
<a href="javascript:void(0)" class="item-cate active">
Tất cả +
</a>
<a href="javascript:void(0)" class="item-cate" data-id="1">
Bàn phím
</a>
<a href="javascript:void(0)" class="item-cate" data-id="2">
Phụ kiện
</a>
</div>
<div class="product-list d-flex flex-wrap" id="js-holder-list-coming">
<div class="product-item d-flex">
<a href="" class="product-image">
<img src="./assets/images/image-sp.png" alt="">
<span class="soluongnhom">5 nhóm duy nhất</span>
</a>
<div class="product-info">
<a href="" class="product-name line-clamp-2">Combo Bàn phím và Chuột không dây MOFII
CANDY
Milk
Tea/ Nâu Combo Bàn phím và Chuột không dây MOFII CANDY Milk Tea/ Nâu</a>
<div class="box-price d-flex align-items">
<div class="retail_price">
199.000đ
</div>
<span class="red">Khi mua nhóm 5 người</span>
</div>
<div class="price-banle">Giá bán lẻ: 320.000đ</div>
<div class="box-time d-flex align-items">
<i class="icon_2023 time"></i>
<div class="product-time-holder js-deal-time" data-time="">
<b>20</b>
<b>11</b>
<b>30</b>
</div>
</div>
</div>
</div>
<div class="product-item d-flex">
<a href="" class="product-image">
<img src="./assets/images/image-sp.png" alt="">
<span class="soluongnhom">5 nhóm duy nhất</span>
</a>
<div class="product-info">
<a href="" class="product-name line-clamp-2">Combo Bàn phím và Chuột không dây MOFII
CANDY
Milk
Tea/ Nâu Combo Bàn phím và Chuột không dây MOFII CANDY Milk Tea/ Nâu</a>
<div class="box-price d-flex align-items">
<div class="retail_price">
199.000đ
</div>
<span class="red">Khi mua nhóm 5 người</span>
</div>
<div class="price-banle">Giá bán lẻ: 320.000đ</div>
<div class="box-time d-flex align-items">
<i class="icon_2023 time"></i>
<div class="product-time-holder js-deal-time" data-time="">
<b>20</b>
<b>11</b>
<b>30</b>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="box-successful-purchase">
<div class="background-white">
<div class="title">Mua hàng thành công</div>
<div class="content">
<div class="item-success d-flex">
<div class="avatar">H</div>
<div class="info">
<b>Nhóm Huraxxx</b>
<div class="name-pro">Chuột gaming Logitech G102 Gen2 Lightsync</div>
<div class="d-flex align-items">
<b style="color: #F32A1D;font-weight: 700;">199.000đ</b>
<del style="color: #A7A7A7;margin-left: 7px;">320.000đ</del>
</div>
<div class="time">Hôm nay, 01 : 20 : 41</div>
</div>
</div>
<div class="item-success d-flex">
<div class="avatar">H</div>
<div class="info">
<b>Nhóm Huraxxx</b>
<div class="name-pro">Chuột gaming Logitech G102 Gen2 Lightsync</div>
<div class="d-flex align-items">
<b style="color: #F32A1D;font-weight: 700;">199.000đ</b>
<del style="color: #A7A7A7;margin-left: 7px;">320.000đ</del>
</div>
<div class="time">Hôm nay, 01 : 20 : 41</div>
</div>
</div>
<div class="item-success d-flex">
<div class="avatar">H</div>
<div class="info">
<b>Nhóm Huraxxx</b>
<div class="name-pro">Chuột gaming Logitech G102 Gen2 Lightsync</div>
<div class="d-flex align-items">
<b style="color: #F32A1D;font-weight: 700;">199.000đ</b>
<del style="color: #A7A7A7;margin-left: 7px;">320.000đ</del>
</div>
<div class="time">Hôm nay, 01 : 20 : 41</div>
</div>
</div>
<div class="item-success d-flex">
<div class="avatar">H</div>
<div class="info">
<b>Nhóm Huraxxx</b>
<div class="name-pro">Chuột gaming Logitech G102 Gen2 Lightsync</div>
<div class="d-flex align-items">
<b style="color: #F32A1D;font-weight: 700;">199.000đ</b>
<del style="color: #A7A7A7;margin-left: 7px;">320.000đ</del>
</div>
<div class="time">Hôm nay, 01 : 20 : 41</div>
</div>
</div>
</div>
</div>
</div>
<div class="box-thele">
<div class="title">Thể lệ chương trình</div>
<div class="content">
<div class="item d-flex">
<div class="number">01.</div>
<div class="txt">Tạo nhóm với đủ số lượng thành viên yêu cầu để được mua hàng với giá ưu
đãi,
giảm giá các sản phẩm lên đến 70%.</div>
</div>
<div class="item d-flex">
<div class="number">02.</div>
<div class="txt">Đăng nhập bằng gmail, facebook để tạo nhóm và tham gia nhóm.</div>
</div>
<div class="item d-flex">
<div class="number">03.</div>
<div class="txt">Chia sẻ với bạn bè, người thân để tham gia nhóm và mở khóa ưu đãi khi đủ số
lượng thành viên</div>
</div>
<div class="item d-flex">
<div class="number">04.</div>
<div class="txt">
<p>Điều kiện để nhóm được mua hàng với giá ưu đãi:</p>
<ul>
<li>Đủ thành viên tham gia theo yêu cầu</li>
<li>Thanh toán trong thời gian quy định</li>
</ul>
</div>
</div>
<div class="item d-flex">
<div class="number">05.</div>
<div class="txt">
<p>Trường hợp nhóm bị hủy quyền mua hàng khi:</p>
<ul>
<li>Không đủ thành viên tham gia trong thời gian quy định</li>
<li>Không thanh toán trong thời gian quy định</li>
<li>Hết số lượng sản phẩm ưu đãi”</li>
</ul>
</div>
</div>
</div>
</div>
<div class="box-questions background-white">
<h2 class="title">
Câu hỏi thường gặp
</h2>
<div class="content d-flex flex-wrap" id="accordion">
<div class="item">
<div class="card">
<a href="#" class="card-link collapsed" data-toggle="collapse" data-target="#question-1"
aria-expanded="false">
<div class="card-header d-flex align-items space-between">
<div class="card-left d-flex align-items">
<span class="number">01.</span>
<span>Đấu giá trực tuyến có phức tạp không ?</span>
</div>
<i class="fa"></i>
</div>
</a>
<div id="question-1" class="collapse" data-parent="#accordion">
<div class="card-body">
Rất dễ dàng, ,tham gia mọi lúc mọi nơi chỉ cần có smartphone và internet
</div>
</div>
</div>
</div>
<div class="item">
<div class="card">
<a href="#" class="card-link collapsed" data-toggle="collapse" data-target="#question-2"
aria-expanded="false">
<div class="card-header d-flex align-items space-between">
<div class="card-left d-flex align-items">
<span class="number">01.</span>
<span>Đấu giá trực tuyến có phức tạp không ?</span>
</div>
<i class="fa"></i>
</div>
</a>
<div id="question-2" class="collapse" data-parent="#accordion">
<div class="card-body">
Rất dễ dàng, ,tham gia mọi lúc mọi nơi chỉ cần có smartphone và internet
</div>
</div>
</div>
</div>
<div class="item">
<div class="card">
<a href="#" class="card-link collapsed" data-toggle="collapse" data-target="#question-3"
aria-expanded="false">
<div class="card-header d-flex align-items space-between">
<div class="card-left d-flex align-items">
<span class="number">01.</span>
<span>Đấu giá trực tuyến có phức tạp không ?</span>
</div>
<i class="fa"></i>
</div>
</a>
<div id="question-3" class="collapse" data-parent="#accordion">
<div class="card-body">
Rất dễ dàng, ,tham gia mọi lúc mọi nơi chỉ cần có smartphone và internet
</div>
</div>
</div>
</div>
<div class="item">
<div class="card">
<a href="#" class="card-link collapsed" data-toggle="collapse" data-target="#question-4"
aria-expanded="false">
<div class="card-header d-flex align-items space-between">
<div class="card-left d-flex align-items">
<span class="number">01.</span>
<span>Đấu giá trực tuyến có phức tạp không ?</span>
</div>
<i class="fa"></i>
</div>
</a>
<div id="question-4" class="collapse" data-parent="#accordion">
<div class="card-body">
Rất dễ dàng, ,tham gia mọi lúc mọi nơi chỉ cần có smartphone và internet
</div>
</div>
</div>
</div>
<div class="item">
<div class="card">
<a href="#" class="card-link collapsed" data-toggle="collapse" data-target="#question-5"
aria-expanded="false">
<div class="card-header d-flex align-items space-between">
<div class="card-left d-flex align-items">
<span class="number">01.</span>
<span>Đấu giá trực tuyến có phức tạp không ?</span>
</div>
<i class="fa"></i>
</div>
</a>
<div id="question-5" class="collapse" data-parent="#accordion">
<div class="card-body">
Rất dễ dàng, ,tham gia mọi lúc mọi nơi chỉ cần có smartphone và internet
</div>
</div>
</div>
</div>
<div class="item">
<div class="card">
<a href="#" class="card-link collapsed" data-toggle="collapse" data-target="#question-6"
aria-expanded="false">
<div class="card-header d-flex align-items space-between">
<div class="card-left d-flex align-items">
<span class="number">01.</span>
<span>Đấu giá trực tuyến có phức tạp không ?</span>
</div>
<i class="fa"></i>
</div>
</a>
<div id="question-6" class="collapse" data-parent="#accordion">
<div class="card-body">
Rất dễ dàng, ,tham gia mọi lúc mọi nơi chỉ cần có smartphone và internet
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="footer">
<div class="container">
<div class="footer-main-content">
<div class="item-footer">
<p>
<b>Showrrom Open:</b>
<span>8:30 - 20:00</span>
</p>
<p>
<b>Tiếp nhận bảo hành:</b>
<span>Thứ 3 đến Thứ 7</span>
</p>
<p>
<b>Địa chỉ:</b>
<span>266/32 Đường Tô Hiến Thành,Phường 15, Quận 10, TP. HCM( Có thể đậu ôtô)</span>
</p>
</div>
<div class="item-footer">
<b>Kết nối với chúng tôi</b>
<div class="d-flex align-items">
<div class="box-social d-flex align-items">
<a href="" class="icon_social youtobe"></a>
<a href="" class="icon_social tiktok"></a>
<a href="" class="icon_social facebook"></a>
<a href="" class="icon_social zalo"></a>
<a href="" class="icon_social map"></a>
</div>
<a href="" target="_blank">
<img src="./assets/images/btc.png" alt="">
</a>
</div>
<a href="" target="_blank">
<img src="./assets/images/dmca.png" alt="">
</a>
</div>
<div class="item-footer">
<p>
<span>HOTLINE:</span><a href="tel:0787955888 ">0787955888</a>
</p>
<p>
<span>KỸ THUẬT:</span><a href="tel:0932772240 ">0932772240</a>
</p>
<a href="">
<img src="./assets/images/icon-pay.png" alt="">
</a>
</div>
</div>
</div>
<div class="footer-bottom">
<div class="container">
<div class="footer-content-bottom">
<a href="/" class="logo">
<img src="./assets/images/logo.png" alt="">
</a>
<div class="content-right">
<p>Công ty TNHH MYGEAR - Địa chỉ kinh doanh: Địa chỉ 266/32 Đường Tô Hiến Thành,Phường 15,
Quận
10, TP. HCM</p>
<p>Giấy phép kinh doanh cấp ngày 26 tháng 10 2021</p>
<p>Mã số thuế doanh nghiệp: 0316992079 tại phòng đăng ký kinh doanh Sở Kế Hoạch và Đầu Tư
thành
phố Hồ Chí Minh</p>
<p>Chịu trách nhiệm nội dung: Nguyễn Văn Hùng Copyrights © 2022 Mygear.vn. All Rights
Reserved
Email: info@mygear.vn</p>
</div>
</div>
</div>
</div>
</div>
<div class="box-login">
<div class="background-group-form">
<a href="javascript:void(0)" class="btn-close">
<i class="fa fa-times"></i>
</a>
<div class="content">
<h2 class="title">Vui lòng đăng nhập tài khoản của bạn để tham gia chương trình</h2>
<a href="javascript:void(0)" class="btn-login facebook">
<span class="icon">
<i class="fa fa-facebook-f"></i>
</span>
<span class="txt">Đăng nhập bằng Facebook</span>
</a>
<a href="javascript:void(0)" class="btn-login google">
<span class="icon">
<i class="fa fa-google"></i>
</span>
<span class="txt">Đăng nhập bằng Google</span>
</a>
</div>
</div>
</div>
<div class="global-popup" id="js-global-popup">
<div class="background-group-form" id="js-content-popup">
</div>
</div>
</div>
<script src=" https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<script src="./dist/data.js"></script>
<script src="./dist/main.js"></script>
</body>
</html>

3
index.html
View File

@@ -1021,11 +1021,10 @@
</div>
</div>
</body>
<script src=" https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<script src="./dist/data.js"></script>
<script src="./dist/main.js"></script>
</body>
</html>

68
package-lock.json generated Normal file
View File

@@ -0,0 +1,68 @@
{
"name": "muahangtheonhom",
"version": "1.0.0",
"lockfileVersion": 2,
"requires": true,
"packages": {
"": {
"name": "muahangtheonhom",
"version": "1.0.0",
"license": "ISC",
"devDependencies": {
"@types/node": "^20.10.5",
"typescript": "^5.3.3"
}
},
"node_modules/@types/node": {
"version": "20.10.5",
"resolved": "https://registry.npmjs.org/@types/node/-/node-20.10.5.tgz",
"integrity": "sha512-nNPsNE65wjMxEKI93yOP+NPGGBJz/PoN3kZsVLee0XMiJolxSekEVD8wRwBUBqkwc7UWop0edW50yrCQW4CyRw==",
"dev": true,
"dependencies": {
"undici-types": "~5.26.4"
}
},
"node_modules/typescript": {
"version": "5.3.3",
"resolved": "https://registry.npmjs.org/typescript/-/typescript-5.3.3.tgz",
"integrity": "sha512-pXWcraxM0uxAS+tN0AG/BF2TyqmHO014Z070UsJ+pFvYuRSq8KH8DmWpnbXe0pEPDHXZV3FcAbJkijJ5oNEnWw==",
"dev": true,
"bin": {
"tsc": "bin/tsc",
"tsserver": "bin/tsserver"
},
"engines": {
"node": ">=14.17"
}
},
"node_modules/undici-types": {
"version": "5.26.5",
"resolved": "https://registry.npmjs.org/undici-types/-/undici-types-5.26.5.tgz",
"integrity": "sha512-JlCMO+ehdEIKqlFxk6IfVoAUVmgz7cU7zD/h9XZ0qzeosSHmUJVOzSQvvYSYWXkFXC+IfLKSIffhv0sVZup6pA==",
"dev": true
}
},
"dependencies": {
"@types/node": {
"version": "20.10.5",
"resolved": "https://registry.npmjs.org/@types/node/-/node-20.10.5.tgz",
"integrity": "sha512-nNPsNE65wjMxEKI93yOP+NPGGBJz/PoN3kZsVLee0XMiJolxSekEVD8wRwBUBqkwc7UWop0edW50yrCQW4CyRw==",
"dev": true,
"requires": {
"undici-types": "~5.26.4"
}
},
"typescript": {
"version": "5.3.3",
"resolved": "https://registry.npmjs.org/typescript/-/typescript-5.3.3.tgz",
"integrity": "sha512-pXWcraxM0uxAS+tN0AG/BF2TyqmHO014Z070UsJ+pFvYuRSq8KH8DmWpnbXe0pEPDHXZV3FcAbJkijJ5oNEnWw==",
"dev": true
},
"undici-types": {
"version": "5.26.5",
"resolved": "https://registry.npmjs.org/undici-types/-/undici-types-5.26.5.tgz",
"integrity": "sha512-JlCMO+ehdEIKqlFxk6IfVoAUVmgz7cU7zD/h9XZ0qzeosSHmUJVOzSQvvYSYWXkFXC+IfLKSIffhv0sVZup6pA==",
"dev": true
}
}
}

16
package.json Normal file
View File

@@ -0,0 +1,16 @@
{
"name": "muahangtheonhom",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"@types/node": "^20.10.5",
"typescript": "^5.3.3"
}
}

30
src/data.ts
View File

@@ -56,7 +56,7 @@ type infoMember = {
const List_product: ProductInfo[] = [
{
productId: 1,
productId: 22,
product_name: 'Combo Bàn phím và Chuột không dây MOFII CANDY Milk Tea',
productUrl: '/',
image: 'https://mygear.vn/media/product/589-1.jpg',
@@ -143,7 +143,7 @@ const List_product: ProductInfo[] = [
quantity: 30,
sale_quantity: 10,
quantity_member: 5,
from_time: 1703696400000,
from_time: 1703782800000,
to_time: 1703955600000,
status: 'coming',
category_info: [
@@ -205,7 +205,7 @@ const User: UserInfo[] = [
{
group_id: 1,
name_group: 'Hura săn sale',
product_id: 1,
product_id: 33,
productUrl: '/',
product_image: 'https://mygear.vn/media/product/589-1.jpg',
product_name: 'Combo Bàn phím và Chuột không dây MOFII CANDY Milk Tea',
@@ -214,7 +214,7 @@ const User: UserInfo[] = [
quantity: 20,
sale_quantity: 10,
quantity_member: 5,
to_time: 1703955600000,
to_time: 1703955500000,
list_member: [
{
id_member: 1,
@@ -310,9 +310,6 @@ function formatName(name: string) {
}
const AddGroupTemplate = `
<a href="javascript:void(0)" class="btn-close"
onclick="$('.global-popup').removeClass('active');closeBackground()">
@@ -379,13 +376,12 @@ const ShareGroupTemplate = `
</a>
</div>
<a href="javascript:void(0)" class="btn-add-member" onclick="showContentPopup('waiting_join')">
<a href="javascript:void(0)" class="btn-add-member" onclick="ShowPopupGlobal('waiting_join')">
Gửi email thông báo
</a>
</div>
`;
const JoinProductTemplate = `
<a href="javascript:void(0)" class="btn-close" onclick="closeBackground()">
<i class="fa fa-times"></i>
@@ -510,3 +506,19 @@ const InfoPayProductTemplate = `
</a>
</div>
`;
const OutTimeJoinTpl = `
<a href="javascript:void(0)" class="btn-close"
onclick="$('.global-popup').removeClass('active');closeBackground()">
<i class="fa fa-times"></i>
</a>
<div class="content">
<h2 class="title">Thời gian tham gia nhóm Hurasoft săn sale Noel đã hết hạn!</h2>
<div class="note">Bạn vui lòng tham gia nhóm khác hoặc tự tạo nhóm để mua sản phẩm chuột máy tính ABC với giá ưu đãi nha</div>
</div>
`;
function XayHtmlPopup() {
}

67
src/main.ts
View File

@@ -13,7 +13,6 @@ async function goi_sp_user_tu_api(): Promise<UserInfo[]> {
async function hienthi_nhomsp() {
const lay_sp_user_tu_api: UserInfo[] = await goi_sp_user_tu_api();
console.log(lay_sp_user_tu_api);
DisplayListProductGroup(lay_sp_user_tu_api, 'js-holder-product-group')
}
@@ -21,7 +20,6 @@ async function hienthi_sp() {
const lay_sp_tu_api: ProductInfo[] = await goi_sp_tu_api();
// code hien thi danh sach dang dien ra
console.log(lay_sp_tu_api)
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');
@@ -70,7 +68,6 @@ function xayhtml(product: ProductInfo): string {
item.list_member.forEach((user: infoMember, index) => {
var more_qnt_member = product.quantity_member - index - 1;
const isLastMember = index > product.quantity_member;
console.log(isLastMember)
HtmlListMember += `
<a href="javascript:void(0)" class="item${isLastMember ? 'add' : ''}">
@@ -78,9 +75,9 @@ function xayhtml(product: ProductInfo): string {
</a>
`;
addMember = isLastMember ? `<a href="javascript:void(0)" class="item add">+</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` : '';
noteMember = isLastMember ? '' : `Cần thêm <b style="color: var(--color-global);">${more_qnt_member}</b> thành viên`;
});
});
@@ -211,6 +208,10 @@ function DisplayListProductGroup(ProductUser: UserInfo[], holderId: string) {
html.push(
xayhtmlProductGroup(product)
);
product.list_group.forEach((Item: infoGroup) => {
countDown(`js-deal-time-${Item.product_id}`, Item.to_time);
})
})
if (holder) {
@@ -234,30 +235,18 @@ function xayhtmlProductGroup(product: UserInfo) {
}
Item.list_member.forEach((user: infoMember, index) => {
if (index > Item.quantity_member) {
HtmlListMember += `
<a href="javascript:void(0)" class="item">
${formatName(user.name_member)}
</a>
`;
addMember = ``;
noteMember = ``;
} else {
var more_qnt_member = Item.quantity_member - index - 1;
const isLastMember = index > Item.quantity_member;
HtmlListMember += `
<a href="javascript:void(0)" class="item">
<a href="javascript:void(0)" class="item${isLastMember ? 'add' : ''}">
${formatName(user.name_member)}
</a>
`;
addMember = `
<a href="javascript:void(0)" class="item add">
+
</a>
`;
noteMember = `
Cần thêm <b style="color: var(--color-global);">${more_qnt_member}</b> thành viên
`;
}
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 += `
@@ -295,7 +284,7 @@ function xayhtmlProductGroup(product: UserInfo) {
<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">
<a href="javascript:void(0)" class="add-member" onclick="ShowPopupGlobal('AddMember')">
<i class="fa fa-plus"></i>
Mời thêm bạn
</a>
@@ -409,6 +398,32 @@ function ShowPopupGlobal(key: string) {
holderPupop!.innerHTML = AddGroupTemplate;
} else if (key == 'AddMember') {
holderPupop!.innerHTML = ShareGroupTemplate;
} else if (key == 'waiting_join') {
holderPupop!.innerHTML = JoinProductTemplate;
CountdownJoin();
}
}
function changeTab(contentId: string): void {
// 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 as HTMLElement).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');
}
}
@@ -416,7 +431,7 @@ function ShowPopupGlobal(key: string) {
// run function
hienthi_sp();
hienthi_nhomsp();
CountdownJoin();

11
tsconfig.json Normal file
View File

@@ -0,0 +1,11 @@
{
"compilerOptions": {
"target": "es6",
"module": "commonjs",
"outDir": "./dist",
"rootDir": "./src",
"strict": true
},
"include": ["src/**/*.ts"],
"exclude": ["node_modules"]
}