up
This commit is contained in:
50
account.html
50
account.html
@@ -128,7 +128,7 @@
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>Laptop Acer Aspire 7 A715-76-53PJ NH.QGESV.007</td>
|
||||
<td>2.200.000 VNĐ</td>
|
||||
<td><b>2.200.000 VNĐ</b></td>
|
||||
<td>14:30:40 12/09/2024</td>
|
||||
<td>1</td>
|
||||
<td>
|
||||
@@ -139,7 +139,7 @@
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Laptop Acer Aspire 7 A715-76-53PJ NH.QGESV.007</td>
|
||||
<td>2.200.000 VNĐ</td>
|
||||
<td><b>2.200.000 VNĐ</b></td>
|
||||
<td>14:30:40 12/09/2024</td>
|
||||
<td>1</td>
|
||||
<td>
|
||||
@@ -150,7 +150,7 @@
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Laptop Acer Aspire 7 A715-76-53PJ NH.QGESV.007</td>
|
||||
<td>2.200.000 VNĐ</td>
|
||||
<td><b>2.200.000 VNĐ</b></td>
|
||||
<td>14:30:40 12/09/2024</td>
|
||||
<td>1</td>
|
||||
<td>
|
||||
@@ -161,7 +161,7 @@
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Laptop Acer Aspire 7 A715-76-53PJ NH.QGESV.007</td>
|
||||
<td>2.200.000 VNĐ</td>
|
||||
<td><b>2.200.000 VNĐ</b></td>
|
||||
<td>14:30:40 12/09/2024</td>
|
||||
<td>1</td>
|
||||
<td>
|
||||
@@ -172,7 +172,7 @@
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Laptop Acer Aspire 7 A715-76-53PJ NH.QGESV.007</td>
|
||||
<td>2.200.000 VNĐ</td>
|
||||
<td><b>2.200.000 VNĐ</b></td>
|
||||
<td>14:30:40 12/09/2024</td>
|
||||
<td>1</td>
|
||||
<td>
|
||||
@@ -183,7 +183,7 @@
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Laptop Acer Aspire 7 A715-76-53PJ NH.QGESV.007</td>
|
||||
<td>2.200.000 VNĐ</td>
|
||||
<td><b>2.200.000 VNĐ</b></td>
|
||||
<td>14:30:40 12/09/2024</td>
|
||||
<td>1</td>
|
||||
<td>
|
||||
@@ -194,7 +194,7 @@
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Laptop Acer Aspire 7 A715-76-53PJ NH.QGESV.007</td>
|
||||
<td>2.200.000 VNĐ</td>
|
||||
<td><b>2.200.000 VNĐ</b></td>
|
||||
<td>14:30:40 12/09/2024</td>
|
||||
<td>1</td>
|
||||
<td>
|
||||
@@ -354,40 +354,6 @@
|
||||
|
||||
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
|
||||
|
||||
|
||||
<script>
|
||||
|
||||
function checkOTP() {
|
||||
$('.box-popup').removeClass('active');
|
||||
$('.overlay').addClass('active')
|
||||
$('.popup-thongbao').addClass('active')
|
||||
}
|
||||
|
||||
function SendcheckOTP() {
|
||||
$('.box-popup').removeClass('active');
|
||||
$('.overlay').addClass('active')
|
||||
$('.popup-input-opt').addClass('active')
|
||||
}
|
||||
|
||||
|
||||
function closePopop() {
|
||||
$('.box-popup').removeClass('active');
|
||||
$('.overlay').removeClass('active')
|
||||
}
|
||||
|
||||
|
||||
|
||||
Tab();
|
||||
function Tab() {
|
||||
$(".tab .item-tab").click(function () {
|
||||
var datatab = $(this).attr("data-id");
|
||||
$(".tab .item-tab").removeClass("active");
|
||||
$('.content-tab').removeClass("active");
|
||||
$(this).addClass("active");
|
||||
$(datatab).addClass("active");
|
||||
});
|
||||
}
|
||||
</script>
|
||||
<script src="./assets/js/main.js"></script>
|
||||
|
||||
</html>
|
||||
@@ -1078,9 +1078,10 @@ table {
|
||||
}
|
||||
.page-detail .list-user-auction {
|
||||
background: #fff5e5;
|
||||
padding: 15px;
|
||||
padding: 10px;
|
||||
border-radius: 15px;
|
||||
overflow: hidden;
|
||||
height: 330px;
|
||||
}
|
||||
.page-detail .list-user-auction .item {
|
||||
background: #fff;
|
||||
@@ -1111,6 +1112,12 @@ table {
|
||||
.page-detail .list-user-auction .item .name-user {
|
||||
color: #1355f0;
|
||||
padding-right: 5px;
|
||||
width: 80px;
|
||||
white-space: normal;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 1;
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
}
|
||||
.page-detail .list-user-auction .item .price {
|
||||
color: #f00000;
|
||||
@@ -1123,11 +1130,15 @@ table {
|
||||
.page-detail .list-user-auction .content-user {
|
||||
overflow-x: hidden;
|
||||
overflow-y: scroll;
|
||||
max-height: 103px;
|
||||
max-height: 300px;
|
||||
padding-right: 10px;
|
||||
}
|
||||
.page-detail .form-input-price {
|
||||
margin-top: 20px;
|
||||
position: absolute;
|
||||
left: 9px;
|
||||
bottom: 23%;
|
||||
width: 96%;
|
||||
}
|
||||
.page-detail .form-input-price .p-title {
|
||||
text-align: center;
|
||||
|
||||
File diff suppressed because one or more lines are too long
@@ -1095,9 +1095,10 @@ table {
|
||||
}
|
||||
.list-user-auction {
|
||||
background: #fff5e5;
|
||||
padding: 15px;
|
||||
padding: 10px;
|
||||
border-radius: 15px;
|
||||
overflow: hidden;
|
||||
height: 330px;
|
||||
.item {
|
||||
background: #fff;
|
||||
box-shadow: 0px 2px 2px 0px #00000026;
|
||||
@@ -1126,6 +1127,12 @@ table {
|
||||
.name-user {
|
||||
color: #1355f0;
|
||||
padding-right: 5px;
|
||||
width: 80px;
|
||||
white-space: normal;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 1;
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
}
|
||||
.price {
|
||||
color: #f00000;
|
||||
@@ -1139,12 +1146,16 @@ table {
|
||||
.content-user {
|
||||
overflow-x: hidden;
|
||||
overflow-y: scroll;
|
||||
max-height: 103px;
|
||||
max-height: 300px;
|
||||
padding-right: 10px;
|
||||
}
|
||||
}
|
||||
.form-input-price {
|
||||
margin-top: 20px;
|
||||
position: absolute;
|
||||
left: 9px;
|
||||
bottom: 23%;
|
||||
width: 96%;
|
||||
.p-title {
|
||||
text-align: center;
|
||||
font-size: 20px;
|
||||
|
||||
@@ -2190,6 +2190,7 @@ table {
|
||||
}
|
||||
.popup-error .content {
|
||||
color: #1e1e1e;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.popup-input-opt .title {
|
||||
|
||||
File diff suppressed because one or more lines are too long
@@ -2227,6 +2227,7 @@ table {
|
||||
}
|
||||
.content {
|
||||
color: #1e1e1e;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -0,0 +1,196 @@
|
||||
$(document).ready(function () {
|
||||
$('.faqlink').click(function () {
|
||||
$(this).parents('.item').toggleClass('active');
|
||||
});
|
||||
});
|
||||
|
||||
|
||||
var swiper_thumb = new Swiper(".thumbImage", {
|
||||
spaceBetween: 10,
|
||||
slidesPerView: 4,
|
||||
direction: "vertical",
|
||||
loop: true,
|
||||
on: {
|
||||
init: (swiper) => {
|
||||
let totalGap = swiper.passedParams.spaceBetween * (swiper.passedParams.slidesPerView - 1);
|
||||
let containerHeight = swiper.passedParams.slidesPerView * swiper.slides[0].clientHeight + totalGap;
|
||||
swiper.el.style.height = containerHeight + 'px';
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
var swiper_big = new Swiper(".BigImage", {
|
||||
spaceBetween: 10,
|
||||
watchSlidesProgress: true,
|
||||
noSwiping: true,
|
||||
navigation: {
|
||||
nextEl: "#js-image-next",
|
||||
prevEl: "#js-image-prev",
|
||||
},
|
||||
thumbs: {
|
||||
swiper: swiper_thumb,
|
||||
},
|
||||
});
|
||||
|
||||
|
||||
const showButton = document.getElementById('click-show');
|
||||
const priceList = document.getElementById('price-list');
|
||||
let currentIndex = 4; // Ban đầu hiển thị 4 item
|
||||
|
||||
showButton.addEventListener('click', () => {
|
||||
const itemWidth = document.querySelector('.item').offsetWidth;
|
||||
priceList.scrollBy({ left: itemWidth, behavior: 'smooth' });
|
||||
currentIndex++;
|
||||
|
||||
// Nếu đã scroll qua hết các item thì ẩn nút
|
||||
if (currentIndex >= document.querySelectorAll('.item').length) {
|
||||
showButton.style.display = 'none';
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
function formatCurrency(a) {
|
||||
var b = parseFloat(a).toFixed(2).replace(/(\d)(?=(\d{3})+\.)/g, "$1.").toString();
|
||||
var len = b.length;
|
||||
b = b.substring(0, len - 3);
|
||||
return b;
|
||||
}
|
||||
|
||||
$('#price-list .item').on('click', function () {
|
||||
var price = $(this).attr('data-price');
|
||||
$('#js-input-price').val(formatCurrency(price));
|
||||
})
|
||||
|
||||
|
||||
|
||||
productDetailTab()
|
||||
function productDetailTab() {
|
||||
$(".tab .item-tab").click(function () {
|
||||
var datatab = $(this).attr("data-id");
|
||||
$(".tab .item-tab").removeClass("active");
|
||||
$('.content-tab').removeClass("active");
|
||||
$(this).addClass("active");
|
||||
$(datatab).addClass("active");
|
||||
});
|
||||
}
|
||||
|
||||
TabHistory();
|
||||
function TabHistory() {
|
||||
$(".tab-history .item-tab").click(function () {
|
||||
var datatab = $(this).attr("data-id");
|
||||
$(".tab-history .item-tab").removeClass("active");
|
||||
$('.table-tab').removeClass("active");
|
||||
$(this).addClass("active");
|
||||
$(datatab).addClass("active");
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
|
||||
checkRules();
|
||||
function checkRules() {
|
||||
$('#submit_rules').on('click', function () {
|
||||
if ($('#check_rules').is(':checked')) {
|
||||
$('.box-popup').removeClass('active');
|
||||
$('.popup-login').addClass('active')
|
||||
} else {
|
||||
alert('Quý khách cần đồng ý với thể lệ của chương trình')
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
function closePopop() {
|
||||
$('.box-popup').removeClass('active');
|
||||
$('.overlay').removeClass('active')
|
||||
}
|
||||
|
||||
|
||||
|
||||
function checkAucton() {
|
||||
$('.overlay').addClass('active')
|
||||
$('.popup-rules').addClass('active')
|
||||
}
|
||||
|
||||
|
||||
function checklogin() {
|
||||
$('.box-popup').removeClass('active');
|
||||
$('.popup-yeucau').addClass('active')
|
||||
}
|
||||
|
||||
function showInfoPay() {
|
||||
$('.box-popup').removeClass('active');
|
||||
$('.popup-info-pay').addClass('active')
|
||||
}
|
||||
|
||||
formatPrice();
|
||||
function formatPrice() {
|
||||
$('#js-input-price').on('input', function () {
|
||||
let inputValue = $(this).val().replace(/\D/g, '');
|
||||
let formattedValue = new Intl.NumberFormat().format(inputValue);
|
||||
|
||||
$(this).val(formattedValue);
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
function checkSendAuction() {
|
||||
$('.box-popup').removeClass('active');
|
||||
|
||||
const price_present = _strToNumber($('#js-price-present').html());
|
||||
const price_auction = _strToNumber($('#js-input-price').val());
|
||||
|
||||
const price_min = price_present + 300000;
|
||||
|
||||
if (price_auction > price_present) {
|
||||
$('.overlay').addClass('active')
|
||||
$('.popup-success').addClass('active')
|
||||
} else {
|
||||
$('.overlay').addClass('active')
|
||||
$('.popup-error').addClass('active')
|
||||
$('#js-price-min').html(formatCurrency(price_min))
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
function _strToNumber(str) {
|
||||
str += '';
|
||||
while (str.indexOf(".") > 0) {
|
||||
str = str.replace('.', '');
|
||||
}
|
||||
var result = parseFloat(str);
|
||||
return isNaN(result) ? 0 : result;
|
||||
}
|
||||
|
||||
|
||||
|
||||
function checkOTP() {
|
||||
$('.box-popup').removeClass('active');
|
||||
$('.overlay').addClass('active')
|
||||
$('.popup-thongbao').addClass('active')
|
||||
}
|
||||
|
||||
function SendcheckOTP() {
|
||||
$('.box-popup').removeClass('active');
|
||||
$('.overlay').addClass('active')
|
||||
$('.popup-input-opt').addClass('active')
|
||||
}
|
||||
|
||||
|
||||
function closePopop() {
|
||||
$('.box-popup').removeClass('active');
|
||||
$('.overlay').removeClass('active')
|
||||
}
|
||||
|
||||
|
||||
|
||||
Tab();
|
||||
function Tab() {
|
||||
$(".tab .item-tab").click(function () {
|
||||
var datatab = $(this).attr("data-id");
|
||||
$(".tab .item-tab").removeClass("active");
|
||||
$('.content-tab').removeClass("active");
|
||||
$(this).addClass("active");
|
||||
$(datatab).addClass("active");
|
||||
});
|
||||
}
|
||||
21
assets/js/server.js
Normal file
21
assets/js/server.js
Normal file
@@ -0,0 +1,21 @@
|
||||
// server.js
|
||||
const express = require('express');
|
||||
const bodyParser = require('body-parser');
|
||||
const cors = require('cors');
|
||||
const app = express();
|
||||
const port = 5500;
|
||||
|
||||
app.use(cors()); // Cho phép CORS
|
||||
app.use(bodyParser.json()); // Middleware để phân tích JSON
|
||||
|
||||
// Endpoint để nhận yêu cầu POST
|
||||
app.post('/submit-bid', (req, res) => {
|
||||
console.log(req.body); // In ra thông tin đã gửi
|
||||
// Xử lý thông tin ở đây (lưu vào DB hoặc làm gì đó)
|
||||
res.status(200).json({ message: 'Bid received', data: req.body });
|
||||
});
|
||||
|
||||
// Khởi động server
|
||||
app.listen(port, () => {
|
||||
console.log(`Server is running at 192.168.1.71:${port}`);
|
||||
});
|
||||
@@ -3,7 +3,7 @@
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1,user-scalable=0">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1">
|
||||
<title>Đấu giá</title>
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css">
|
||||
<link rel="stylesheet" href="./assets/css/style-mb.css">
|
||||
@@ -11,7 +11,7 @@
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.5.7/jquery.fancybox.min.css" />
|
||||
</head>
|
||||
|
||||
<body class="page-detail">
|
||||
<body class="page-detail" style="overflow: hidden;">
|
||||
<div class="container-mb">
|
||||
<div class="header">
|
||||
<div class="container">
|
||||
@@ -146,21 +146,20 @@
|
||||
<a href="javascript:void(0)" class="btn-auction" onclick="checkAucton()">Tham gia đấu
|
||||
giá</a>
|
||||
</div>
|
||||
<div class="box-live-auction">
|
||||
<div class="box-live-auction active">
|
||||
<div class="main-title-live">
|
||||
<a href="javascript:void(0)" class="close" onclick="closeLiveAction()">
|
||||
<i class="fas fa-chevron-left"></i>
|
||||
</a>
|
||||
<p>Tham gia đấu giá</p>
|
||||
</div>
|
||||
|
||||
<div class="box-price-live d-flex">
|
||||
<i class="fas fa-caret-up"></i>
|
||||
<div class="current-price">125.000.000</div>
|
||||
<div class="current-price" id="js-price-present">125.000.000</div>
|
||||
<div class="unit-price">VNĐ</div>
|
||||
</div>
|
||||
<div class="list-user-auction">
|
||||
<div class="content-user">
|
||||
<div class="content-user" id="user-list">
|
||||
<div class="item d-flex align-items space-between">
|
||||
<div class="info-left d-flex align-items">
|
||||
<i class="fas fa-caret-up"></i>
|
||||
@@ -254,9 +253,9 @@
|
||||
<div class="form-input">
|
||||
<input type="text" value="126.000.000" id="js-input-price" inputmode="numeric"
|
||||
pattern="[0-9]*" placeholder="Nhập giá" class="input-price">
|
||||
<button class="btn-send" onclick="checkSendAuction(true)">
|
||||
<a href="javascript:void(0)" class="btn-send" onclick="handleBid()">
|
||||
<i class="fas fa-paper-plane"></i>
|
||||
</button>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -1140,9 +1139,23 @@
|
||||
$('.popup-info-pay').addClass('active')
|
||||
}
|
||||
|
||||
function checkSendAuction(check) {
|
||||
formatPrice();
|
||||
function formatPrice() {
|
||||
$('#js-input-price').on('input', function () {
|
||||
let inputValue = $(this).val().replace(/\D/g, '');
|
||||
let formattedValue = new Intl.NumberFormat().format(inputValue);
|
||||
|
||||
$(this).val(formattedValue);
|
||||
});
|
||||
}
|
||||
|
||||
function checkSendAuction() {
|
||||
$('.box-popup').removeClass('active');
|
||||
if (check == true) {
|
||||
|
||||
const price_present = _strToNumber($('#js-price-present').html());
|
||||
const price_auction = _strToNumber($('#js-input-price').val());
|
||||
|
||||
if (price_auction > price_present) {
|
||||
$('.overlay').addClass('active')
|
||||
$('.popup-success').addClass('active')
|
||||
} else {
|
||||
@@ -1151,6 +1164,187 @@
|
||||
}
|
||||
}
|
||||
|
||||
function _strToNumber(str) {
|
||||
str += '';
|
||||
while (str.indexOf(".") > 0) {
|
||||
str = str.replace('.', '');
|
||||
}
|
||||
var result = parseFloat(str);
|
||||
return isNaN(result) ? 0 : result;
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
|
||||
<script>
|
||||
async function handleBid() {
|
||||
const inputPrice = document.querySelector('#js-input-price');
|
||||
const currentPriceElement = document.getElementById('js-price-present');
|
||||
let currentPrice = parseInt(currentPriceElement.innerText.replace(/\./g, ''));
|
||||
|
||||
// Lấy giá trị từ input và kiểm tra
|
||||
let priceValue = parseInt(inputPrice.value.replace(/\./g, ''));
|
||||
|
||||
// Nếu giá trị input rỗng hoặc nhỏ hơn giá hiện tại, tự động đặt giá trị bằng giá hiện tại + 300000
|
||||
if (!priceValue || priceValue <= currentPrice) {
|
||||
priceValue = currentPrice + 300000;
|
||||
}
|
||||
|
||||
const userList = document.getElementById('user-list');
|
||||
const currentTime = new Date().toLocaleTimeString();
|
||||
const newUserIndex = userList.children.length + 1;
|
||||
|
||||
// Tạo thông tin người dùng mới
|
||||
const newUser = {
|
||||
name: `User ${newUserIndex}`,
|
||||
price: priceValue,
|
||||
time: currentTime
|
||||
};
|
||||
|
||||
// Gửi request với thông tin người dùng mới
|
||||
try {
|
||||
const response = await fetch('https://jsonplaceholder.typicode.com/posts', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
},
|
||||
body: JSON.stringify(newUser),
|
||||
});
|
||||
|
||||
if (!response.ok) {
|
||||
throw new Error('Request failed');
|
||||
}
|
||||
|
||||
// Xử lý khi request thành công
|
||||
console.log('Bid submitted successfully:', await response.json());
|
||||
|
||||
// Thêm người dùng vào danh sách sau khi gửi request thành công
|
||||
const newUserElement = `
|
||||
<div class="item d-flex align-items space-between">
|
||||
<div class="info-left d-flex align-items">
|
||||
<i class="fas fa-caret-up"></i>
|
||||
<div class="number">1</div>
|
||||
<div class="info-user d-flex align-items">
|
||||
<a href="" class="name-user">${newUser.name}</a>
|
||||
<span>trả</span>
|
||||
<div class="price">${priceValue.toLocaleString()} đ</div>
|
||||
</div>
|
||||
</div>
|
||||
<p class="time">${newUser.time}</p>
|
||||
</div>
|
||||
`;
|
||||
userList.insertAdjacentHTML('afterbegin', newUserElement);
|
||||
|
||||
// Cập nhật thứ hạng cho các người dùng khác (bắt đầu từ 2)
|
||||
Array.from(userList.children).forEach((child, index) => {
|
||||
child.querySelector('.number').innerText = index + 1;
|
||||
const iconElement = child.querySelector('.fas');
|
||||
if (index === 0) {
|
||||
iconElement.className = 'fas fa-caret-up';
|
||||
} else {
|
||||
iconElement.className = 'fas fa-caret-down';
|
||||
}
|
||||
});
|
||||
|
||||
// Cập nhật giá mới vào `js-price-present` và tăng giá cho lần gửi tiếp theo
|
||||
currentPriceElement.innerText = priceValue.toLocaleString();
|
||||
|
||||
// Cập nhật giá cho lần tiếp theo
|
||||
inputPrice.value = (priceValue + 300000).toLocaleString();
|
||||
} catch (error) {
|
||||
console.error('Error submitting bid:', error);
|
||||
alert('Gửi giá thất bại, vui lòng thử lại!');
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<script>
|
||||
document.addEventListener("DOMContentLoaded", function () {
|
||||
const listUserAuction = document.querySelector(".list-user-auction .content-user");
|
||||
|
||||
function getHighestPrice() {
|
||||
const prices = listUserAuction.querySelectorAll(".price");
|
||||
let maxPrice = 0;
|
||||
prices.forEach(priceElement => {
|
||||
const priceText = priceElement.textContent.replace(/\D/g, ''); // Lấy giá trị số
|
||||
const price = parseInt(priceText, 10);
|
||||
if (price > maxPrice) {
|
||||
maxPrice = price;
|
||||
}
|
||||
});
|
||||
return maxPrice;
|
||||
}
|
||||
|
||||
async function addNewUser(count) {
|
||||
const highestPrice = getHighestPrice();
|
||||
const newItems = [];
|
||||
|
||||
for (let i = 0; i < count; i++) {
|
||||
const newPrice = highestPrice + 300000 * (i + 1);
|
||||
|
||||
const newItem = document.createElement("div");
|
||||
newItem.classList.add("item", "d-flex", "align-items", "space-between");
|
||||
|
||||
let timeInSeconds = new Date().toLocaleTimeString();
|
||||
|
||||
|
||||
// Tạo thông tin người dùng mới
|
||||
const newUser = {
|
||||
name: `User ${listUserAuction.children.length + 1}`,
|
||||
price: newPrice,
|
||||
time: timeInSeconds
|
||||
};
|
||||
|
||||
const response = await fetch('https://jsonplaceholder.typicode.com/posts', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
},
|
||||
body: JSON.stringify(newUser),
|
||||
});
|
||||
|
||||
|
||||
console.log('Bid submitted successfully:', await response.json());
|
||||
|
||||
|
||||
newItem.innerHTML = `
|
||||
<div class="info-left d-flex align-items">
|
||||
<i class="fas fa-caret-up"></i>
|
||||
<div class="number"></div>
|
||||
<div class="info-user d-flex align-items">
|
||||
<a href="" class="name-user">User ${listUserAuction.children.length + 1}</a>
|
||||
<span>trả</span>
|
||||
<div class="price">${newPrice.toLocaleString('vi-VN')} đ</div>
|
||||
</div>
|
||||
</div>
|
||||
<p class="time">${timeInSeconds}</p>
|
||||
`;
|
||||
|
||||
listUserAuction.prepend(newItem);
|
||||
|
||||
const timeElement = newItem.querySelector(".time");
|
||||
|
||||
|
||||
// Cập nhật thứ hạng cho các người dùng khác (bắt đầu từ 2)
|
||||
Array.from(listUserAuction.children).forEach((child, index) => {
|
||||
child.querySelector('.number').innerText = index + 1;
|
||||
const iconElement = child.querySelector('.fas');
|
||||
if (index === 0) {
|
||||
iconElement.className = 'fas fa-caret-up';
|
||||
} else {
|
||||
iconElement.className = 'fas fa-caret-down';
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
$('#js-price-present').html(newPrice.toLocaleString('vi-VN'));
|
||||
// $('#js-input-price').val(newPrice.toLocaleString('vi-VN'));
|
||||
}
|
||||
}
|
||||
|
||||
// setInterval(() => addNewUser(10000), 1000); // Mỗi 1 giây thêm người dùng mới
|
||||
});
|
||||
|
||||
</script>
|
||||
|
||||
</html>
|
||||
272
detail.html
272
detail.html
@@ -12,6 +12,28 @@
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="header">
|
||||
<div class="container">
|
||||
<div class="header-main d-flex align-items space-between">
|
||||
<div class="header-left">
|
||||
<a href="/home.html" class="logo">
|
||||
<img src="./assets/images/logo.png" alt="logo">
|
||||
</a>
|
||||
</div>
|
||||
<div class="header-right d-flex align-items">
|
||||
<a href="" class="item">
|
||||
<img src="./assets/images/icon-clipboard.png" alt="">
|
||||
<span>Thể lệ đấu giá</span>
|
||||
</a>
|
||||
<a href="./account.html" class="item">
|
||||
<img src="./assets/images/icon-user.png" alt="">
|
||||
<span>Tài khoản</span>
|
||||
<i class="fa-solid fa-caret-down"></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="page-detail">
|
||||
<div class="container">
|
||||
<div class="breadcrumb">
|
||||
@@ -148,7 +170,7 @@
|
||||
<div class="box-live-auction">
|
||||
<div class="box-price-live d-flex">
|
||||
<i class="fas fa-caret-up"></i>
|
||||
<div class="current-price">125.000.000</div>
|
||||
<div class="current-price" id="js-price-present">125.000.000</div>
|
||||
<div class="unit-price">VNĐ</div>
|
||||
</div>
|
||||
<div class="list-user-auction">
|
||||
@@ -249,7 +271,7 @@
|
||||
<div class="form-input">
|
||||
<input type="text" value="126.000.000" id="js-input-price" placeholder="Nhập giá"
|
||||
class="input-price">
|
||||
<button class="btn-send" onclick="checkSendAuction(true)">
|
||||
<button class="btn-send" onclick="checkSendAuction()">
|
||||
<i class="fas fa-paper-plane"></i>
|
||||
</button>
|
||||
</div>
|
||||
@@ -882,153 +904,127 @@
|
||||
<i class="fa fa-times"></i>
|
||||
</a>
|
||||
<div class="content">
|
||||
Giá đấu của bạn chưa hợp lệ. Vui lòng nhập giá cao hơn giá cao nhất ít nhất X VND
|
||||
Giá đấu của bạn chưa hợp lệ. Vui lòng nhập giá cao hơn giá cao nhất ít nhất <span id="js-price-min"></span>
|
||||
VND
|
||||
</div>
|
||||
<a class="btn-submit" href="javascript:void(0)" onclick="closePopop()">Thử lại</a>
|
||||
</div>
|
||||
|
||||
<div class="footer">
|
||||
<div class="box-faq">
|
||||
<div class="container">
|
||||
<div class="background-faq">
|
||||
<h2 class="title">Câu hỏi thường gặp</h2>
|
||||
<div class="content-faq">
|
||||
<div class="item">
|
||||
<a href="javascript:void(0)" class="faqlink">
|
||||
<span>Đấu giá trực tuyến có phức tạp không?</span>
|
||||
<i class="fas fa-chevron-right"></i>
|
||||
</a>
|
||||
<div class="content">Rất dễ dàng, tham gia mọi lúc mọi nơi chỉ cần có smartphone và internet
|
||||
</div>
|
||||
</div>
|
||||
<div class="item">
|
||||
<a href="javascript:void(0)" class="faqlink">
|
||||
<span>Làm thế nào để xác thực tài khoản đấu giá thành công?</span>
|
||||
<i class="fas fa-chevron-right"></i>
|
||||
</a>
|
||||
<div class="content">Rất dễ dàng, tham gia mọi lúc mọi nơi chỉ cần có smartphone và internet
|
||||
</div>
|
||||
</div>
|
||||
<div class="item">
|
||||
<a href="javascript:void(0)" class="faqlink">
|
||||
<span>Tại sao nên chọn đấu giá trực tuyến tại Anphatpc?</span>
|
||||
<i class="fas fa-chevron-right"></i>
|
||||
</a>
|
||||
<div class="content">Rất dễ dàng, tham gia mọi lúc mọi nơi chỉ cần có smartphone và internet
|
||||
</div>
|
||||
</div>
|
||||
<div class="item">
|
||||
<a href="javascript:void(0)" class="faqlink">
|
||||
<span>Quy trình đấu giá sản phẩm của Anphatpc như thế nào?</span>
|
||||
<i class="fas fa-chevron-right"></i>
|
||||
</a>
|
||||
<div class="content">Rất dễ dàng, tham gia mọi lúc mọi nơi chỉ cần có smartphone và internet
|
||||
</div>
|
||||
</div>
|
||||
<div class="item">
|
||||
<a href="javascript:void(0)" class="faqlink">
|
||||
<span>Điều kiện để chiến thắng đấu giá là gì?</span>
|
||||
<i class="fas fa-chevron-right"></i>
|
||||
</a>
|
||||
<div class="content">Rất dễ dàng, tham gia mọi lúc mọi nơi chỉ cần có smartphone và internet
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="clearfix"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="main-footer">
|
||||
<div class="container">
|
||||
<div class="footer-policies d-flex align-items space-between">
|
||||
<div class="item-policies">
|
||||
<div class="icons">
|
||||
<img src="./assets/images/icon-ship.png" width="100%" height="100%" alt="ship">
|
||||
</div>
|
||||
<div class="txt">
|
||||
<b>Chính sách giao hàng</b>
|
||||
<p>Nhận hàng & thanh toán tại nhà</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item-policies">
|
||||
<div class="icons">
|
||||
<img src="./assets/images/icon-return.png" width="100%" height="100%" alt="ship">
|
||||
</div>
|
||||
<div class="txt">
|
||||
<b>Đổi mới 15 ngày đầu</b>
|
||||
<p>Áp dụng với sản phẩm laptop</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item-policies">
|
||||
<div class="icons">
|
||||
<img src="./assets/images/icon-pay.png" width="100%" height="100%" alt="ship">
|
||||
</div>
|
||||
<div class="txt">
|
||||
<b>Thanh toán tiện lợi</b>
|
||||
<p>Trả tiền mặt, CK, trả góp 0%</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item-policies">
|
||||
<div class="icons">
|
||||
<img src="./assets/images/icon-chat.png" width="100%" height="100%" alt="ship">
|
||||
</div>
|
||||
<div class="txt">
|
||||
<b>Hỗ trợ nhiệt tình</b>
|
||||
<p>Tư vấn, giải pháp mọi thắc mắc</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="contact-footer">
|
||||
<div class="info-contact text-center">
|
||||
<b>Công ty cổ phần thương mại máy tính an phát</b>
|
||||
<p>Giấy chứng nhận ĐKDN số 0108940873 do Sở kế hoạch và Đầu tư Thành phố Hà Nội cấp ngày
|
||||
11/10/2019</p>
|
||||
<p>Trụ sở: Tầng 5, Số 49 phố Thái Hà, Phương Trung Liệt, Quận Đống Đa, Thành phố Hà nội, Việt
|
||||
Nam</p>
|
||||
<p>Điện thoại: 19000323 Email: Giang@anphat.com.vn</p>
|
||||
</div>
|
||||
<a href="tel:19000323" class="btn-phone">
|
||||
<img src="./assets/images/btn-phone.png" alt="">
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</body>
|
||||
<script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
|
||||
|
||||
<script>
|
||||
|
||||
var swiper_thumb = new Swiper(".thumbImage", {
|
||||
spaceBetween: 10,
|
||||
slidesPerView: 4,
|
||||
direction: "vertical",
|
||||
loop: true,
|
||||
on: {
|
||||
init: (swiper) => {
|
||||
let totalGap = swiper.passedParams.spaceBetween * (swiper.passedParams.slidesPerView - 1);
|
||||
let containerHeight = swiper.passedParams.slidesPerView * swiper.slides[0].clientHeight + totalGap;
|
||||
swiper.el.style.height = containerHeight + 'px';
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
var swiper_big = new Swiper(".BigImage", {
|
||||
spaceBetween: 10,
|
||||
watchSlidesProgress: true,
|
||||
noSwiping: true,
|
||||
navigation: {
|
||||
nextEl: "#js-image-next",
|
||||
prevEl: "#js-image-prev",
|
||||
},
|
||||
thumbs: {
|
||||
swiper: swiper_thumb,
|
||||
},
|
||||
});
|
||||
</script>
|
||||
<script src="./assets//js/main.js"></script>
|
||||
|
||||
|
||||
<script>
|
||||
const showButton = document.getElementById('click-show');
|
||||
const priceList = document.getElementById('price-list');
|
||||
let currentIndex = 4; // Ban đầu hiển thị 4 item
|
||||
|
||||
showButton.addEventListener('click', () => {
|
||||
const itemWidth = document.querySelector('.item').offsetWidth;
|
||||
priceList.scrollBy({ left: itemWidth, behavior: 'smooth' });
|
||||
currentIndex++;
|
||||
|
||||
// Nếu đã scroll qua hết các item thì ẩn nút
|
||||
if (currentIndex >= document.querySelectorAll('.item').length) {
|
||||
showButton.style.display = 'none';
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
function formatCurrency(a) {
|
||||
var b = parseFloat(a).toFixed(2).replace(/(\d)(?=(\d{3})+\.)/g, "$1.").toString();
|
||||
var len = b.length;
|
||||
b = b.substring(0, len - 3);
|
||||
return b;
|
||||
}
|
||||
|
||||
$('#price-list .item').on('click', function () {
|
||||
var price = $(this).attr('data-price');
|
||||
$('#js-input-price').val(formatCurrency(price));
|
||||
})
|
||||
</script>
|
||||
|
||||
|
||||
<script>
|
||||
productDetailTab()
|
||||
function productDetailTab() {
|
||||
$(".tab .item-tab").click(function () {
|
||||
var datatab = $(this).attr("data-id");
|
||||
$(".tab .item-tab").removeClass("active");
|
||||
$('.content-tab').removeClass("active");
|
||||
$(this).addClass("active");
|
||||
$(datatab).addClass("active");
|
||||
});
|
||||
}
|
||||
|
||||
TabHistory();
|
||||
function TabHistory() {
|
||||
$(".tab-history .item-tab").click(function () {
|
||||
var datatab = $(this).attr("data-id");
|
||||
$(".tab-history .item-tab").removeClass("active");
|
||||
$('.table-tab').removeClass("active");
|
||||
$(this).addClass("active");
|
||||
$(datatab).addClass("active");
|
||||
});
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
<script>
|
||||
checkRules();
|
||||
function checkRules() {
|
||||
$('#submit_rules').on('click', function () {
|
||||
if ($('#check_rules').is(':checked')) {
|
||||
$('.box-popup').removeClass('active');
|
||||
$('.popup-login').addClass('active')
|
||||
} else {
|
||||
alert('Quý khách cần đồng ý với thể lệ của chương trình')
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
function closePopop() {
|
||||
$('.box-popup').removeClass('active');
|
||||
$('.overlay').removeClass('active')
|
||||
}
|
||||
|
||||
|
||||
|
||||
function checkAucton() {
|
||||
$('.overlay').addClass('active')
|
||||
$('.popup-rules').addClass('active')
|
||||
}
|
||||
|
||||
|
||||
function checklogin() {
|
||||
$('.box-popup').removeClass('active');
|
||||
$('.popup-yeucau').addClass('active')
|
||||
}
|
||||
|
||||
function showInfoPay() {
|
||||
$('.box-popup').removeClass('active');
|
||||
$('.popup-info-pay').addClass('active')
|
||||
}
|
||||
|
||||
|
||||
function checkSendAuction(check) {
|
||||
$('.box-popup').removeClass('active');
|
||||
if (check == true) {
|
||||
$('.overlay').addClass('active')
|
||||
$('.popup-success').addClass('active')
|
||||
} else {
|
||||
$('.overlay').addClass('active')
|
||||
$('.popup-error').addClass('active')
|
||||
}
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
</html>
|
||||
@@ -530,12 +530,6 @@
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
|
||||
<script src="./assets/js/main.js"></script>
|
||||
|
||||
<script>
|
||||
$(document).ready(function () {
|
||||
$('.faqlink').click(function () {
|
||||
$(this).parents('.item').toggleClass('active');
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
|
||||
</html>
|
||||
Reference in New Issue
Block a user