11:40 29/12/2023

2023-12-29 11:40:36 +07:00
parent 6c8d6d98c0
commit 1a4abf2dda
14 changed files with 3689 additions and 83 deletions
--- a/src/data.ts
+++ b/src/data.ts
@@ -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>
@@ -509,4 +505,20 @@ const InfoPayProductTemplate = `
            ok
        </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() {
+
+}
--- a/src/main.ts
+++ b/src/main.ts
@@ -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;
-                    HtmlListMember += `
-                            <a href="javascript:void(0)" class="item">
-                                ${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
-                        `;
-                }
+                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 += `
@@ -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();
+