181 lines
7.5 KiB
JavaScript
181 lines
7.5 KiB
JavaScript
"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 get_sp_tu_api() {
|
|
return __awaiter(this, void 0, void 0, function* () {
|
|
return new Promise((resolve, reject) => {
|
|
return resolve(listproduct_mau);
|
|
});
|
|
});
|
|
}
|
|
function show_info_product() {
|
|
return __awaiter(this, void 0, void 0, function* () {
|
|
const lay_thongtin_sp = yield get_sp_tu_api();
|
|
// code hien thi danh sach dang dien ra
|
|
show_product_detail(lay_thongtin_sp);
|
|
});
|
|
}
|
|
function GetURLParameter(sParam, url) {
|
|
var url_decode = decodeURIComponent(url);
|
|
var sPageURL = url_decode;
|
|
var sURLVariables = sPageURL.split('?');
|
|
for (var i = 0; i < sURLVariables.length; i++) {
|
|
var sParameterName = sURLVariables[i].split('=');
|
|
if (sParameterName[0] == sParam) {
|
|
return sParameterName[1];
|
|
}
|
|
}
|
|
}
|
|
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">
|
|
<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>
|
|
${HtmlButtonBid}
|
|
`;
|
|
let html_dien_bien_dau_gia = '';
|
|
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}
|
|
`;
|
|
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) {
|
|
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.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, highestBidName };
|
|
}
|
|
function getList() {
|
|
}
|
|
show_info_product();
|