1
This commit is contained in:
305
static/js/static.js
Normal file
305
static/js/static.js
Normal file
@ -0,0 +1,305 @@
|
||||
$(function () {
|
||||
const $days = $('.package_list p');
|
||||
const $priceTables = $('.country_lists');
|
||||
const $showPriceDiv = $('.show_price');
|
||||
const $totalPriceSpan = $('.totalPrices');
|
||||
let result = [];
|
||||
let submitFlag = false;
|
||||
|
||||
|
||||
// tab click
|
||||
$days.on('click', function () {
|
||||
const targetDay = $(this).data('day');
|
||||
$days.removeClass('active');
|
||||
$(this).addClass('active');
|
||||
$priceTables.hide().filter(`[data-day="${targetDay}"]`).show();
|
||||
});
|
||||
|
||||
// country_lists_detail click
|
||||
$priceTables.on('click', '.country_lists_detail', function () {
|
||||
const number = $(this).data('num');
|
||||
// if(number <1) return messageFn(tipsQuantity);
|
||||
$(this).toggleClass('active');
|
||||
updateUI();
|
||||
});
|
||||
|
||||
// buy click
|
||||
$('.buyNow').on('click', function () {
|
||||
const session = localStorage.getItem("session");
|
||||
const user = localStorage.getItem("user");
|
||||
const selectedItems = getSelectedItems();
|
||||
|
||||
let lang = $('#language').val();
|
||||
var currentUrl = window.location.href;
|
||||
var match = currentUrl.match(/\.com(.*)/);
|
||||
|
||||
if (!session || !user || user == undefined || user == "undefined") {
|
||||
let url = "/sign-up/" ;
|
||||
if (lang == "zh"){
|
||||
url = `/${lang}/sign-up/`
|
||||
}
|
||||
let r = "";
|
||||
if (match && match.length > 1) {
|
||||
var contentAfterCom = match[1];
|
||||
r = contentAfterCom;
|
||||
}
|
||||
window.location.href = url +"?r=" + r
|
||||
return;
|
||||
}
|
||||
|
||||
|
||||
|
||||
if (selectedItems.length === 0) {
|
||||
messageFn('Please select the purchase quantity');
|
||||
return;
|
||||
}
|
||||
|
||||
const transformedData = [];
|
||||
selectedItems.forEach(dayObj => {
|
||||
const day = dayObj.day;
|
||||
dayObj.items.forEach(item => {
|
||||
const code = item.code;
|
||||
const num = item.count;
|
||||
transformedData.push({ day, code, num,lang });
|
||||
});
|
||||
});
|
||||
borderFn(transformedData)
|
||||
|
||||
});
|
||||
|
||||
const borderFn = async(orderList) => {
|
||||
if(submitFlag) return;
|
||||
submitFlag = true;
|
||||
$('.loading-mask').show();
|
||||
const res = await $POST("/v1/orderStatic", { data: JSON.stringify(orderList) });
|
||||
submitFlag = false;
|
||||
$('.loading-mask').hide();
|
||||
|
||||
if(res.code!=0)return messageFn(res.msg);
|
||||
window.open(res.data.url);
|
||||
}
|
||||
|
||||
// update info
|
||||
const updateUI = () => {
|
||||
result = getSelectedItems();
|
||||
renderShowPrice(result);
|
||||
updateTotalPrice();
|
||||
};
|
||||
|
||||
// 获取选中的项目
|
||||
const getSelectedItems = () => {
|
||||
return $priceTables.map((_, table) => {
|
||||
const day = $(table).data('day');
|
||||
const unit = $(table).data('unit');
|
||||
const items = $(table).find('div.active').map((_, p) => {
|
||||
const code = $(p).data('code');
|
||||
const price = $(p).data('price');
|
||||
const imgUrl = $(p).data('url');
|
||||
const unit = $(p).data('unit');
|
||||
const existingItem = findExistingItem(day, code);
|
||||
const count = existingItem ? existingItem.count : 1;
|
||||
return { code, price, count,imgUrl,unit };
|
||||
}).get();
|
||||
return items.length ? { day, unit, items } : null;
|
||||
}).get().filter(Boolean);
|
||||
};
|
||||
|
||||
// 查找之前存储的项目
|
||||
const findExistingItem = (day, code) => {
|
||||
return result.find(item => item.day === day)?.items.find(subItem => subItem.code === code);
|
||||
};
|
||||
|
||||
// 渲染选中的项目到页面
|
||||
const renderShowPrice = (result) => {
|
||||
let PRICE_HTML = "";
|
||||
if(result.length >0){
|
||||
result.forEach((i) => {
|
||||
PRICE_HTML += `
|
||||
<div>
|
||||
<div class="show_price_header">
|
||||
<p>${i.day}${i.unit}</p>
|
||||
<p class="clearDay" data-day="${i.day}">
|
||||
<i></i>
|
||||
</p>
|
||||
</div>
|
||||
<div class="countrys_cont">`;
|
||||
i.items.forEach((item) => {
|
||||
PRICE_HTML += `
|
||||
<div class="detaile_country" data-price="${item.price}" data-code="${item.code}" data-day="${i.day}" data-count="${item.count}">
|
||||
<img src="${item.imgUrl}" alt="" />
|
||||
<p class="code">${item.code}</p>
|
||||
<p class="unit">$${item.price}/IP</p>
|
||||
<div>
|
||||
<p class="reduce">-</p>
|
||||
<input type="text" value="${item.count}" class="inputCount" oninput="validateInput(this)">
|
||||
<p class="add">+</p>
|
||||
</div>
|
||||
</div>`;
|
||||
});
|
||||
|
||||
PRICE_HTML += `
|
||||
</div>
|
||||
</div>`;
|
||||
});
|
||||
}else{
|
||||
PRICE_HTML+=`
|
||||
<div class="no-message">
|
||||
<img src="/static/common/price/img/noData.png" alt="">
|
||||
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
|
||||
$(".show_price").html(PRICE_HTML);
|
||||
};
|
||||
|
||||
// input
|
||||
window.validateInput = function(input) {
|
||||
const $input = $(input);
|
||||
let v = $input.val();
|
||||
if (v.startsWith('-')) {
|
||||
v = v.replace(/-/g, '');
|
||||
$input.val(v);
|
||||
}
|
||||
v = v === '' ? 0 : parseInt(v);
|
||||
$input.val(v > 9999 ? 9999 : v);
|
||||
|
||||
const quantity = parseInt($input.val());
|
||||
const $parentDiv = $input.parents('.detaile_country');
|
||||
const { day, code } = $parentDiv.data();
|
||||
const dayEntry = result.find(entry => entry.day === day);
|
||||
|
||||
if (dayEntry) {
|
||||
const itemEntry = dayEntry.items.find(item => item.code === code);
|
||||
if (itemEntry) {
|
||||
itemEntry.count = quantity;
|
||||
}
|
||||
}
|
||||
|
||||
updateTotalPrice();
|
||||
};
|
||||
|
||||
|
||||
// updata total price
|
||||
const updateTotalPrice = () => {
|
||||
const total = $showPriceDiv.find('div[data-price]').get().reduce((sum, div) => {
|
||||
const quantity = parseInt($(div).find('input').val());
|
||||
const unitPrice = parseFloat($(div).data('price'));
|
||||
return sum + quantity * unitPrice;
|
||||
}, 0);
|
||||
$totalPriceSpan.text(`${total.toFixed(2)}`);
|
||||
};
|
||||
|
||||
// add reduce event listener to inputCount
|
||||
$showPriceDiv.on('click', '.reduce, .add', function () {
|
||||
const $input = $(this).siblings('input');
|
||||
let quantity = parseInt($input.val());
|
||||
const $parentDiv = $(this).parents('.detaile_country');
|
||||
const isAdd = $(this).hasClass('add');
|
||||
|
||||
if (isAdd) {
|
||||
quantity++;
|
||||
} else if (quantity > 1) {
|
||||
quantity--;
|
||||
} else {
|
||||
const { day, code } = $parentDiv.data();
|
||||
$(`.country_lists[data-day="${day}"]>div[data-code="${code}"]`).removeClass('active');
|
||||
return updateUI();
|
||||
}
|
||||
|
||||
$input.val(quantity);
|
||||
$parentDiv.data('count', quantity);
|
||||
|
||||
// 更新 result 数组里的 count 字段
|
||||
const { day, code } = $parentDiv.data();
|
||||
const dayEntry = result.find(entry => entry.day === day);
|
||||
if (dayEntry) {
|
||||
const itemEntry = dayEntry.items.find(item => item.code === code);
|
||||
if (itemEntry) {
|
||||
itemEntry.count = quantity;
|
||||
}
|
||||
}
|
||||
|
||||
updateTotalPrice();
|
||||
});
|
||||
|
||||
// clear day country
|
||||
$showPriceDiv.on('click', '.clearDay', function () {
|
||||
const day = $(this).data('day');
|
||||
$(`.country_lists[data-day="${day}"] .country_lists_detail`).removeClass('active');
|
||||
result = result.filter(item => item.day!== day);
|
||||
updateUI();
|
||||
});
|
||||
|
||||
updateUI();
|
||||
|
||||
|
||||
couponCuttime();
|
||||
$('.c_close').on('click', function(){
|
||||
$('.coupon-model').hide();
|
||||
})
|
||||
});
|
||||
|
||||
const couponCuttime = async () => {
|
||||
|
||||
const res = await $POST("/v1/coupons");
|
||||
if(res.code!=0)return;
|
||||
const coupons = res.data.coupons;
|
||||
let HTML = ''
|
||||
if(coupons.length > 0){
|
||||
coupons.forEach(coupon => {
|
||||
HTML += `
|
||||
<div>
|
||||
<p>
|
||||
<span>${coupon.value}</span>
|
||||
<span>${coupon.value_tip}</span>
|
||||
</p>
|
||||
<div>
|
||||
<p>${coupon.title}</p>
|
||||
<p>${expiredTxt}: <span>${coupon.expired}</span></p>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
});
|
||||
|
||||
$('.counpin-list').html(HTML)
|
||||
|
||||
|
||||
$('.coupon-pop').show();
|
||||
const countdown = createCountdown(res.data.surplus_time, '.coupon_countdown');
|
||||
countdown.start();
|
||||
|
||||
$('.coupon-pop').on('click', function(e){
|
||||
console.log(444);
|
||||
|
||||
$(".coupon-model").show();
|
||||
})
|
||||
|
||||
}
|
||||
};
|
||||
|
||||
function createCountdown(totalSeconds, targetSelector) {
|
||||
const $target = $(targetSelector);
|
||||
let timer;
|
||||
|
||||
const formatTime = (time) => String(time).padStart(2, '0');
|
||||
const update = () => {
|
||||
const h = formatTime(Math.floor(totalSeconds / 3600));
|
||||
const m = formatTime(Math.floor((totalSeconds % 3600) / 60));
|
||||
const s = formatTime(totalSeconds % 60);
|
||||
$target.text(`${h}:${m}:${s}`);
|
||||
};
|
||||
|
||||
const start = () => {
|
||||
update();
|
||||
timer = setInterval(() => {
|
||||
totalSeconds > 0 ? (totalSeconds--, update()) : (clearInterval(timer), $target.hide());
|
||||
}, 1000);
|
||||
};
|
||||
|
||||
const stop = () => clearInterval(timer);
|
||||
|
||||
return { start, stop };
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user