13:51 25/12/2023

dist/data.js

@@ -86,7 +86,7 @@ const listproduct_mau = [
         price: 27390000,
         starting_price: 2550000,
         price_step: 300000,
-        from_time: 1703350800000,
+        from_time: 1703523600000,
         to_time: 1703955600000,
         status: 'coming',
         user_online: 0,
@@ -213,7 +213,7 @@ const listproduct_mau = [
         price: 26390000,
         starting_price: 16390000,
         price_step: 300000,
-        from_time: 1703350800000,
+        from_time: 1703523600000,
         to_time: 1703955600000,
         status: 'coming',
         user_online: 0,
@@ -269,6 +269,7 @@ function countDown(iid, endTime) {
     const updateCountdown = () => {
         const now = Date.now();
         const distance = endTime - now;
+        console.log(distance);
         if (distance > 0) {
             const [days, hours, minutes, seconds] = getTimeComponents(distance);
             displayCountdown(iid, days, hours, minutes, seconds);
@@ -299,6 +300,7 @@ function displayCountdown(iid, days, hours, minutes, seconds) {
             <div class='item-time'><b>${formatTimeComponent(seconds)}</b></div>`;
         }
         else {
+            console.log('aaaa');
             element.innerHTML = `
             <div class='item-time'><b>${formatTimeComponent(hours)}</b></div>
             <div class='item-time'><b>${formatTimeComponent(minutes)}</b></div>

dist/detail.js

@@ -34,12 +34,68 @@ function GetURLParameter(sParam, url) {
     }
 }
 function XayhtmlProductDeail(product) {
+    // lay gia cao nhat
     const highestBid = getHighestBid(product.list_user);
+    // xay html hien thi anh san pham
     const htmlImage = `
         <a href="${product.image}">
             <img src="${product.image}" alt="${product.product_name}">
         </a>
     `;
+    // xay html hien thi thong tin san pham
+    var HtmlButtonBid = '';
+    if (product.from_time > Date.now()) {
+        HtmlButtonBid = `
+        <div class="qt-view">Số người đang xem: <b>${product.user_online} người</b></div>
+             <a href="javascript:void(0)" class="btn-add-auction coming">
+                <img src="./assets/images/icon_time.png" alt="">
+                <div class="d-flex align-items">
+                     <span>Diễn ra vào lúc:</span>
+                      <div class="js-deal-time-${product.productId} d-flex align-items" data-time="${product.from_time}">
+                </div>
+                </div>
+            </a>
+        `;
+    }
+    else if (product.to_time > Date.now()) {
+        HtmlButtonBid = `
+            <div class="current-highest-price d-flex align-items">
+                <div class="name-price">Giá cao nhất hiện tại:</div>
+                <b>${formatPrice(highestBid.highestBid)}<u>đ</u></b>
+            </div>
+            <div class="qt-view">Số người đang tham gia: <b>${product.user_online} người</b></div>
+            <div class="box-time d-flex align-items">
+                <span>Thời gian còn lại:</span>
+                <div class="product-time-holder js-deal-time-${product.productId} d-flex align-items" data-time="${product.to_time}">
+                </div>
+            </div>
+            <div class="box-input-price d-flex align-items">
+                <span>Nhập giá đấu của bạn</span>
+                <input type="text" class="input-price" value="${formatPrice(highestBid.highestBid)}">
+                <a href="javascript:;" class="minus-price"><i class="fa fa-minus"></i></a>
+                <a href="javascript:;" class="plus-price"><i class="fa fa-plus"></i></a>
+            </div>
+            <a href="javascript:void(0)" class="btn-add-auction">
+                Đấu giá ngay
+            </a>
+        `;
+    }
+    else {
+        HtmlButtonBid = `
+             <div class="price-win d-flex align-items">
+                <div class="name-price">Giá thắng cuộc:</div>
+                <b>${formatPrice(highestBid.highestBid)}<u>đ</u></b>
+            </div>
+            <div class="user-win d-flex align-items">
+                <div class="name">
+                <img src="./assets/images/icon_paint.png" width="14px" height="20px" alt=""> Người chiến thắng:</div>
+                <span>${highestBid.highestBidName}</span>
+            </div>
+             <a href="javascript:void(0)" class="btn-add-auction ending">
+                Phiên đấu giá đã kết thúc
+            </a>
+        `;
+    }
     const htmlInfo = `
         <h1 class="name">${product.product_name}</h1>
         <div class="d-flex align-items space-between box-price-normal">
@@ -52,44 +108,35 @@ function XayhtmlProductDeail(product) {
                 <b>${formatPrice(product.price_step)}<u>đ</u></b>
             </div>
         </div>
-        <div class="current-highest-price d-flex align-items">
-            <div class="name-price">Giá cao nhất hiện tại:</div>
-            <b>${formatPrice(highestBid)}<u>đ</u></b>
-        </div>
-        <div class="qt-view">Số người đang tham gia: <b>${product.user_online} người</b></div>
-        <div class="box-time d-flex align-items">
-            <span>Thời gian còn lại:</span>
-            <div class="product-time-holder js-deal-time-${product.productId} d-flex align-items" data-time="${product.to_time}">
-            </div>
-        </div>
-        <div class="box-input-price d-flex align-items">
-            <span>Nhập giá đấu của bạn</span>
-            <input type="text" class="input-price" value="${formatPrice(highestBid)}">
-            <a href="javascript:;" class="minus-price"><i class="fa fa-minus"></i></a>
-            <a href="javascript:;" class="plus-price"><i class="fa fa-plus"></i></a>
-        </div>
+        ${HtmlButtonBid}
     `;
     let html_dien_bien_dau_gia = '';
-    product.list_user.forEach((user) => {
-        html_dien_bien_dau_gia += `
-            <tr>
-                <td>
-                ${highestBid == user.price ? `
-                    <div class="d-flex align-items">
-                        <img src="./assets/images/icon_paint.png" width="14px" height="20px" alt="">
-                        <span>${user.userName}</span>
-                    </div>
-                    ` : `<span>${user.userName}</span>`}
-                </td>
-                <td>
-                    ${formatPrice(user.price)}<u>đ</u>
-                </td>
-                <td>
-                    ${formatTime(user.time)}
-                </td>
-            </tr>
-        `;
-    });
+    if (product.from_time < Date.now()) {
+        const boxParticipant = document.getElementById('box-participant-list');
+        if (boxParticipant) {
+            boxParticipant.classList.remove('d-none');
+        }
+        product.list_user.forEach((user) => {
+            html_dien_bien_dau_gia += `
+                <tr>
+                    <td>
+                    ${highestBid.highestBid == user.price ? `
+                        <div class="d-flex align-items">
+                            <img src="./assets/images/icon_paint.png" width="14px" height="20px" alt="">
+                            <span>${user.userName}</span>
+                        </div>
+                        ` : `<span>${user.userName}</span>`}
+                    </td>
+                    <td>
+                        ${formatPrice(user.price)}<u>đ</u>
+                    </td>
+                    <td>
+                        ${formatTime(user.time)}
+                    </td>
+                </tr>
+            `;
+        });
+    }
     const htmlSpec = `
         ${product.specifications}
     `;
@@ -109,19 +156,24 @@ function show_product_detail(lay_thongtin_sp) {
         holderInfo.innerHTML = htmlInfo;
         holderAuctionDetails.innerHTML = html_dien_bien_dau_gia;
         holderSpec.innerHTML = htmlSpec;
-        if (product.to_time > Date.now()) {
+        if (product.from_time > Date.now()) {
+            countDown(`js-deal-time-${product.productId}`, product.from_time);
+        }
+        else if (product.to_time > Date.now()) {
             countDown(`js-deal-time-${product.productId}`, product.to_time);
         }
     });
 }
 function getHighestBid(list_user) {
     let highestBid = 0;
+    let highestBidName = '';
     list_user.forEach(user => {
         if (user.price > highestBid) {
             highestBid = user.price;
+            highestBidName = user.userName;
         }
     });
-    return highestBid;
+    return { highestBid, highestBidName };
 }
 function getList() {
 }

dist/main-mb.js

@@ -0,0 +1,91 @@
+"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(listproduct_mau);
+        });
+    });
+}
+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
+        // Usage example:
+        showListProductHome(lay_sp_tu_api, 'started', 'js-holder-list-started');
+        showListProductHome(lay_sp_tu_api, 'coming', 'js-holder-list-coming');
+        showListProductHome(lay_sp_tu_api, 'ended', 'js-holder-list-ended');
+    });
+}
+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 != 'ended' || 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) {
+    var Htmlcheckstatus = '';
+    if (product.status == 'started') {
+        Htmlcheckstatus = `
+                <div class="starting-price">
+                    Giá Khởi điểm: ${formatPrice(product.starting_price)}đ
+                </div>
+                <div class="deal-time-holder d-flex align-items space-center">
+                    <div class="txt">Còn lại:</div>
+                    <div class="product-time-holder js-deal-time-${product.productId}" data-time="${product.to_time}">
+                    </div>
+                </div>
+                <a href="/auction_program/product-detail-mb.html?id=${product.productId}" class="btn-auction">Đấu giá ngay</a>`;
+    }
+    else if (product.status == 'coming') {
+        Htmlcheckstatus = `
+                    <div class="starting-price">
+                        Giá Khởi điểm: ${formatPrice(product.starting_price)}đ
+                    </div>
+                    <div class="deal-time-holder d-flex align-items space-center">
+                        <div class="txt">Bắt đầu sau:</div>
+                        <div class="product-time-holder js-deal-time-${product.productId}" data-time="${product.from_time}">
+                        </div>
+                    </div>
+                    <a href="/auction_program/product-detail-mb.html?id=${product.productId}" class="btn-auction">Xem chi tiết</a>`;
+    }
+    else if (product.to_time < Date.now()) {
+        Htmlcheckstatus = `<div class="starting-price">Thắng cuộc ${formatPrice(product.starting_price)}<u>đ</u></div>
+<div class="deal-time-holder d-flex align-items space-center end">
+    <div class="txt">Đã kết thúc</div>
+</div>
+<a href="/auction_program/product-detail.html?id=${product.productId}" class="btn-auction">Xem chi tiết</a>`;
+    }
+    return `<div class="product-item">
+                <a href="/product-detail.html?id=${product.productId}" class="product-image">
+                    <img src="${product.image}" alt="${product.product_name}">
+                </a>
+                <div class="info-product">
+                    <a href="" class="product-name line-clamp-2">${product.product_name}</a>
+                    <div class="product-cost">
+                        Giá gốc: ${formatPrice(product.price)}đ
+                    </div>
+                    ${Htmlcheckstatus}
+                </div>
+            </div>
+        `;
+}
+hienthi_sp();

dist/main.js

@@ -44,7 +44,11 @@ function showListProductHome(lay_sp_tu_api, status, holderId) {
 function xayhtml(product) {
     var Htmlcheckstatus = '';
     if (product.status == 'started') {
-        Htmlcheckstatus = `<div class="deal-time-holder d-flex align-items space-center">
+        Htmlcheckstatus = `
+                <div class="starting-price">
+                    Giá Khởi điểm: ${formatPrice(product.starting_price)}đ
+                </div>
+                <div class="deal-time-holder d-flex align-items space-center">
                     <div class="txt">Còn lại:</div>
                     <div class="product-time-holder js-deal-time-${product.productId}" data-time="${product.to_time}">
                     </div>
@@ -52,7 +56,11 @@ function xayhtml(product) {
                 <a href="/auction_program/product-detail.html?id=${product.productId}" class="btn-auction">Đấu giá ngay</a>`;
     }
     else if (product.status == 'coming') {
-        Htmlcheckstatus = `<div class="deal-time-holder d-flex align-items space-center">
+        Htmlcheckstatus = `
+                    <div class="starting-price">
+                        Giá Khởi điểm: ${formatPrice(product.starting_price)}đ
+                    </div>
+                    <div class="deal-time-holder d-flex align-items space-center">
                         <div class="txt">Bắt đầu sau:</div>
                         <div class="product-time-holder js-deal-time-${product.productId}" data-time="${product.from_time}">
                         </div>