tieptk/auction_program
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

up

Browse Source
This commit is contained in:
Tieptk
2024-10-18 09:55:04 +07:00
parent 7ee138d8f3
commit cc6e2d7419
12 changed files with 594 additions and 203 deletions
Download Patch File Download Diff File Expand all files Collapse all files

214
detail-mobile.html
View File

@@ -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>