@@ -209,7 +211,7 @@
Thông tin sản phẩm
-
+
diff --git a/src/data.ts b/src/data.ts
index 93bd67a..bf376b5 100644
--- a/src/data.ts
+++ b/src/data.ts
@@ -7,21 +7,21 @@ type ProductInfo = {
image: string;
price: number;
starting_price: number;
+ price_step: number;
from_time: number;
to_time: number;
status: string;
+ user_online: number,
+ list_user: infoUser[]
specifications: string;
};
type infoUser = {
+ IdUser: number,
userName: string,
price: number,
time: number,
}
-type thongtinkhachhangdaugia = {
- productId: number,
- listUser: infoUser[]
-}
//-----
@@ -33,9 +33,37 @@ const listproduct_mau: ProductInfo[] = [
image: "https://hoanghapccdn.com/media/product/250_3765_pc_anubius_pro_elite_360_v3_black_ha1.jpg",
price: 26390000,
starting_price: 2350000,
+ price_step: 300000,
from_time: 1703213170286,
to_time: 1703955600000,
status: 'started',
+ user_online: 200,
+ list_user: [
+ {
+ IdUser: 1,
+ userName: 'Mai phương',
+ price: 4500000,
+ time: 1703955600000
+ },
+ {
+ IdUser: 2,
+ userName: 'Quang đỗ',
+ price: 3600000,
+ time: 1703955600000
+ },
+ {
+ IdUser: 3,
+ userName: 'Thu Hương',
+ price: 3400000,
+ time: 1703955600000
+ },
+ {
+ IdUser: 3,
+ userName: 'Minh Ngọc',
+ price: 3400000,
+ time: 1703955600000
+ }
+ ],
specifications: '',
}, {
productId: 2,
@@ -43,9 +71,37 @@ const listproduct_mau: ProductInfo[] = [
image: "https://hoanghapccdn.com/media/product/250_3762_pc_anubius_pro_elite_360_v3_black_ha3.jpg",
price: 29890000,
starting_price: 2250000,
+ price_step: 300000,
from_time: 1703213170286,
to_time: 1703869200000,
status: 'started',
+ user_online: 200,
+ list_user: [
+ {
+ IdUser: 1,
+ userName: 'Mai phương',
+ price: 4500000,
+ time: 1703955600000
+ },
+ {
+ IdUser: 2,
+ userName: 'Quang đỗ',
+ price: 3600000,
+ time: 1703955600000
+ },
+ {
+ IdUser: 3,
+ userName: 'Thu Hương',
+ price: 3400000,
+ time: 1703955600000
+ },
+ {
+ IdUser: 3,
+ userName: 'Minh Ngọc',
+ price: 3400000,
+ time: 1703955600000
+ }
+ ],
specifications: '',
}, {
productId: 3,
@@ -53,9 +109,12 @@ const listproduct_mau: ProductInfo[] = [
image: "https://hoanghapccdn.com/media/product/250_3761_pc_anubius_pro_elite_360_v3_black_ha3.jpg",
price: 27390000,
starting_price: 2550000,
+ price_step: 300000,
from_time: 1703350800000,
to_time: 1703955600000,
status: 'coming',
+ user_online: 0,
+ list_user: [],
specifications: '',
}, {
productId: 4,
@@ -63,9 +122,37 @@ const listproduct_mau: ProductInfo[] = [
image: "https://hoanghapccdn.com/media/product/250_3738_hhpc_case_gank_360_ha3.jpg",
price: 91390000,
starting_price: 81390000,
+ price_step: 300000,
from_time: 1703213170286,
to_time: 1703955600000,
status: 'started',
+ user_online: 200,
+ list_user: [
+ {
+ IdUser: 1,
+ userName: 'Mai phương',
+ price: 4500000,
+ time: 1703955600000
+ },
+ {
+ IdUser: 2,
+ userName: 'Quang đỗ',
+ price: 3600000,
+ time: 1703955600000
+ },
+ {
+ IdUser: 3,
+ userName: 'Thu Hương',
+ price: 3400000,
+ time: 1703955600000
+ },
+ {
+ IdUser: 3,
+ userName: 'Minh Ngọc',
+ price: 3400000,
+ time: 1703955600000
+ }
+ ],
specifications: '',
}, {
productId: 5,
@@ -73,9 +160,37 @@ const listproduct_mau: ProductInfo[] = [
image: "https://hoanghapccdn.com/media/product/250_3668_pc_anubius_pro_elite_360_v3_rgb_ha3.jpg",
price: 27850000,
starting_price: 25850000,
+ price_step: 300000,
from_time: 1703213170286,
to_time: 1703955600000,
status: 'started',
+ user_online: 200,
+ list_user: [
+ {
+ IdUser: 1,
+ userName: 'Mai phương',
+ price: 4500000,
+ time: 1703955600000
+ },
+ {
+ IdUser: 2,
+ userName: 'Quang đỗ',
+ price: 3600000,
+ time: 1703955600000
+ },
+ {
+ IdUser: 3,
+ userName: 'Thu Hương',
+ price: 3400000,
+ time: 1703955600000
+ },
+ {
+ IdUser: 3,
+ userName: 'Minh Ngọc',
+ price: 3400000,
+ time: 1703955600000
+ }
+ ],
specifications: '',
}, {
productId: 6,
@@ -83,9 +198,37 @@ const listproduct_mau: ProductInfo[] = [
image: "https://hoanghapccdn.com/media/product/250_3735_hhpc_anubis_pro_4fx_ram_black_ha3.jpg",
price: 32290000,
starting_price: 22290000,
+ price_step: 300000,
from_time: 1703213170286,
to_time: 1703955600000,
status: 'started',
+ user_online: 200,
+ list_user: [
+ {
+ IdUser: 1,
+ userName: 'Mai phương',
+ price: 4500000,
+ time: 1703955600000
+ },
+ {
+ IdUser: 2,
+ userName: 'Quang đỗ',
+ price: 3600000,
+ time: 1703955600000
+ },
+ {
+ IdUser: 3,
+ userName: 'Thu Hương',
+ price: 3400000,
+ time: 1703955600000
+ },
+ {
+ IdUser: 3,
+ userName: 'Minh Ngọc',
+ price: 3400000,
+ time: 1703955600000
+ }
+ ],
specifications: '',
}, {
productId: 7,
@@ -93,9 +236,12 @@ const listproduct_mau: ProductInfo[] = [
image: "https://hoanghapccdn.com/media/product/250_3756_pc_anubius_pro_elite_360_v3_black_ha4.jpg",
price: 26390000,
starting_price: 16390000,
+ price_step: 300000,
from_time: 1703350800000,
to_time: 1703955600000,
status: 'coming',
+ user_online: 0,
+ list_user: [],
specifications: '',
}, {
productId: 8,
@@ -103,29 +249,102 @@ const listproduct_mau: ProductInfo[] = [
image: "https://hoanghapccdn.com/media/product/4807_msi_vigor_gk50_elite_black_ha1.jpg",
price: 1890000,
starting_price: 890000,
+ price_step: 300000,
from_time: 1703264400000,
to_time: 1703215914798,
status: 'ended',
+ user_online: 1000,
+ list_user: [
+ {
+ IdUser: 1,
+ userName: 'Mai phương',
+ price: 4500000,
+ time: 1703955600000
+ },
+ {
+ IdUser: 2,
+ userName: 'Quang đỗ',
+ price: 3600000,
+ time: 1703955600000
+ },
+ {
+ IdUser: 3,
+ userName: 'Thu Hương',
+ price: 3400000,
+ time: 1703955600000
+ },
+ {
+ IdUser: 3,
+ userName: 'Minh Ngọc',
+ price: 3400000,
+ time: 1703955600000
+ }
+ ],
specifications: '',
},
];
-const du_lieu_thongtindaugia: thongtinkhachhangdaugia[] = [
- {
- productId: 1,
- listUser: [
- {
- userName: 'Mai phương',
- price: 450000,
- time: 1703132219576,
- },
- {
- userName: 'Quang Đỗ',
- price: 360000,
- time: 1703132219576,
- },
- ]
+function formatPrice(price: number) {
+ var b = price.toFixed(2).replace(/(\d)(?=(\d{3})+\.)/g, "$1.").toString();
+ var len = b.length;
+ b = b.substring(0, len - 3);
+ return b;
+}
+
+
+function countDown(iid: string, endTime: number): void {
+
+ const updateCountdown = () => {
+ const now: number = Date.now();
+ const distance: number = endTime - now;
+
+ if (distance > 0) {
+ const [days, hours, minutes, seconds] = getTimeComponents(distance);
+ displayCountdown(iid, days, hours, minutes, seconds);
+ } else {
+ clearInterval(timer);
+ }
+ };
+
+ // Initial update to avoid delay
+ updateCountdown();
+
+ const timer: NodeJS.Timeout = setInterval(updateCountdown, 1000);
+}
+
+function getTimeComponents(distance: number): [number, number, number, number] {
+ const days: number = Math.floor(distance / (1000 * 60 * 60 * 24));
+ const hours: number = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
+ const minutes: number = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
+ const seconds: number = Math.floor((distance % (1000 * 60)) / 1000);
+
+ return [days, hours, minutes, seconds];
+}
+
+function displayCountdown(iid: string, days: number, hours: number, minutes: number, seconds: number): void {
+ const element: HTMLElement | null = document.querySelector(`.${iid}`);
+ if (element) {
+ if (days > 0) {
+ element.innerHTML = `
+ ${formatTimeComponent(days)}
+ ${formatTimeComponent(hours)}
+ ${formatTimeComponent(minutes)}
+ ${formatTimeComponent(seconds)} `;
+ } else {
+ element.innerHTML = `
+ ${formatTimeComponent(hours)}
+ ${formatTimeComponent(minutes)}
+ ${formatTimeComponent(seconds)} `;
+ }
}
-]
+}
+function formatTimeComponent(component: number): string {
+ return component <= 9 ? '0' + component : component.toString();
+}
+function formatTime(timestamp: number) {
+ const date = new Date(timestamp);
+ const formattedTime = date.toLocaleString('en-US', { day: 'numeric', month: 'numeric', year: 'numeric', hour: 'numeric', minute: 'numeric', second: 'numeric' });
+ return formattedTime;
+}
diff --git a/src/detail.ts b/src/detail.ts
index 22e0f88..79a5271 100644
--- a/src/detail.ts
+++ b/src/detail.ts
@@ -25,15 +25,115 @@ function GetURLParameter(sParam: string, url: string) {
}
+function XayhtmlProductDeail(product: ProductInfo) {
+
+
+ const highestBid = getHighestBid(product.list_user);
+
+ const htmlImage: string = `
+
+ 
+
+ `;
+ const htmlInfo: string = `
+ ${product.product_name}
+
+
+ Khởi điểm:
+ ${formatPrice(product.price)}đ
+
+
+ Bước giá:
+ ${formatPrice(product.price_step)}đ
+
+
+ Giá cao nhất hiện tại:
+ ${formatPrice(highestBid)}đ
+ Số người đang tham gia: ${product.user_online} người
+
+ Thời gian còn lại:
+
+
+
+
+ ${highestBid == user.price ? `
+
+ 
+ ${user.userName}
+ |
+
+ ${formatPrice(user.price)}đ
+ |
+
+ ${formatTime(user.time)}
+ |
+
+ `;
+ });
+
+
+ const htmlSpec: string = `
+ ${product.specifications}
+ `;
+
+ return { htmlImage, htmlInfo, html_dien_bien_dau_gia, htmlSpec };
+
+}
+
+
function show_product_detail(lay_thongtin_sp: ProductInfo[]) {
const IdProduct: number = 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: ProductInfo) => 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: infoUser[]) {
+ let highestBid = 0;
+
+ list_user.forEach(user => {
+ if (user.price > highestBid) {
+ highestBid = user.price;
+ }
+ });
+
+ return highestBid;
+}
+
+function getList() {
}
diff --git a/src/main.ts b/src/main.ts
index 315dceb..0213d91 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -75,64 +75,6 @@ function xayhtml(product: ProductInfo) {
`;
}
-function formatPrice(price: number) {
- var b = price.toFixed(2).replace(/(\d)(?=(\d{3})+\.)/g, "$1.").toString();
- var len = b.length;
- b = b.substring(0, len - 3);
- return b;
-}
-
-function countDown(iid: string, endTime: number): void {
-
- const updateCountdown = () => {
- const now: number = Date.now();
- const distance: number = endTime - now;
-
- if (distance > 0) {
- const [days, hours, minutes, seconds] = getTimeComponents(distance);
- displayCountdown(iid, days, hours, minutes, seconds);
- } else {
- clearInterval(timer);
- }
- };
-
- // Initial update to avoid delay
- updateCountdown();
-
- const timer: NodeJS.Timeout = setInterval(updateCountdown, 1000);
-}
-
-function getTimeComponents(distance: number): [number, number, number, number] {
- const days: number = Math.floor(distance / (1000 * 60 * 60 * 24));
- const hours: number = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
- const minutes: number = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
- const seconds: number = Math.floor((distance % (1000 * 60)) / 1000);
-
- return [days, hours, minutes, seconds];
-}
-
-function displayCountdown(iid: string, days: number, hours: number, minutes: number, seconds: number): void {
- const element: HTMLElement | null = document.querySelector(`.${iid}`);
- if (element) {
- if (days > 0) {
- element.innerHTML = `
- ${formatTimeComponent(days)}
- ${formatTimeComponent(hours)}
- ${formatTimeComponent(minutes)}
- ${formatTimeComponent(seconds)} `;
- } else {
- element.innerHTML = `
- ${formatTimeComponent(hours)}
- ${formatTimeComponent(minutes)}
- ${formatTimeComponent(seconds)} `;
- }
- }
-}
-
-function formatTimeComponent(component: number): string {
- return component <= 9 ? '0' + component : component.toString();
-}
-
hienthi_sp();
|
