25/12/2023

dist/detail.js

@@ -33,12 +33,96 @@ function GetURLParameter(sParam, url) {
         }
     }
 }
+function XayhtmlProductDeail(product) {
+    const highestBid = getHighestBid(product.list_user);
+    const htmlImage = `
+        <a href="${product.image}">
+            <img src="${product.image}" alt="${product.product_name}">
+        </a>
+    `;
+    const htmlInfo = `
+        <h1 class="name">${product.product_name}</h1>
+        <div class="d-flex align-items space-between box-price-normal">
+            <div class="price d-flex align-items">
+                <div class="name-price">Khởi điểm:</div>
+                <b>${formatPrice(product.price)}<u>đ</u></b>
+            </div>
+            <div class="price-step d-flex align-items">
+                <div class="name-price">Bước giá:</div>
+                <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>
+    `;
+    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>
+        `;
+    });
+    const htmlSpec = `
+        ${product.specifications}
+    `;
+    return { htmlImage, htmlInfo, html_dien_bien_dau_gia, htmlSpec };
+}
 function show_product_detail(lay_thongtin_sp) {
     const IdProduct = Number(GetURLParameter('id', window.location.href));
+    const holderImage = document.getElementById('js-holder-image');
+    const holderInfo = document.getElementById('js-holder-info');
+    const holderAuctionDetails = document.getElementById('js-holder-auction-details');
+    const holderSpec = document.getElementById('js-holder-specifications');
     lay_thongtin_sp
         .filter((product) => product.productId == IdProduct)
         .forEach(function (product, keyIndex) {
-        console.log(product);
+        const { htmlImage, htmlInfo, html_dien_bien_dau_gia, htmlSpec } = XayhtmlProductDeail(product);
+        holderImage.innerHTML = htmlImage;
+        holderInfo.innerHTML = htmlInfo;
+        holderAuctionDetails.innerHTML = html_dien_bien_dau_gia;
+        holderSpec.innerHTML = htmlSpec;
+        if (product.to_time > Date.now()) {
+            countDown(`js-deal-time-${product.productId}`, product.to_time);
+        }
     });
 }
+function getHighestBid(list_user) {
+    let highestBid = 0;
+    list_user.forEach(user => {
+        if (user.price > highestBid) {
+            highestBid = user.price;
+        }
+    });
+    return highestBid;
+}
+function getList() {
+}
 show_info_product();