This commit is contained in:
2024-10-18 09:55:04 +07:00
parent 7ee138d8f3
commit cc6e2d7419
12 changed files with 594 additions and 203 deletions

View File

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

View File

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

View File

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

View File

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

View File

@@ -2227,6 +2227,7 @@ table {
}
.content {
color: #1e1e1e;
text-align: center;
}
}

View File

@@ -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
View 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}`);
});

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>

View File

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

View File

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