348 lines
13 KiB
JavaScript
348 lines
13 KiB
JavaScript
|
|
|||
|
|
document.addEventListener('DOMContentLoaded', () => {
|
|||
|
|
|
|||
|
|
/* ========== 通用工具 ========== */
|
|||
|
|
const getCookie = k =>
|
|||
|
|
document.cookie
|
|||
|
|
.split(';')
|
|||
|
|
.map(c => c.trim())
|
|||
|
|
.find(c => c.startsWith(k + '='))?.split('=')[1] || null;
|
|||
|
|
|
|||
|
|
const $ = id => document.getElementById(id);
|
|||
|
|
|
|||
|
|
/* ----------- 0. DOM 快捷引用 ----------- */
|
|||
|
|
const currentPrice = $('currentPrice');
|
|||
|
|
const originalPrice = $('originalPrice');
|
|||
|
|
const dropPrice = $('dropPrice');
|
|||
|
|
const soldBox = $('soldBox');
|
|||
|
|
const groupTitle = $('groupTitle');
|
|||
|
|
const userList = $('userList');
|
|||
|
|
const singlePriceSpan = $('singlePrice');
|
|||
|
|
const groupPriceSpan = $('groupPrice');
|
|||
|
|
const btnSingle = $('btnSingle');
|
|||
|
|
const btnGroup = $('btnGroup');
|
|||
|
|
|
|||
|
|
/* =====================================================
|
|||
|
|
* 1. 取接口数据并渲染
|
|||
|
|
* =================================================== */
|
|||
|
|
const CFG_API = 'http://127.0.0.1:8091/api/v1/gbm/index/query_group_buy_market_config';
|
|||
|
|
|
|||
|
|
// 登录检查
|
|||
|
|
const loginToken = getCookie('loginToken');
|
|||
|
|
if (!loginToken) { location.href = 'login.html'; return; }
|
|||
|
|
const username = loginToken;
|
|||
|
|
|
|||
|
|
// 保存活动 id（开团 / 参团时要用）
|
|||
|
|
let activityId = null;
|
|||
|
|
|
|||
|
|
const POST_BODY = {
|
|||
|
|
userId : username,
|
|||
|
|
source : 's01',
|
|||
|
|
channel: 'c01',
|
|||
|
|
goodsId: '9890001'
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
fetch(CFG_API, {
|
|||
|
|
method : 'POST',
|
|||
|
|
headers: { 'Content-Type': 'application/json' },
|
|||
|
|
body : JSON.stringify(POST_BODY)
|
|||
|
|
})
|
|||
|
|
.then(r => r.json())
|
|||
|
|
.then(({ code, info, data }) => {
|
|||
|
|
if (code !== '0000' || !data) { console.error(info); return; }
|
|||
|
|
|
|||
|
|
activityId = data.activityId;
|
|||
|
|
renderGoods(data.goods);
|
|||
|
|
renderStatistic(data.teamStatistic);
|
|||
|
|
renderTeams(data.teamList, data.goods?.payPrice);
|
|||
|
|
})
|
|||
|
|
.catch(console.error);
|
|||
|
|
|
|||
|
|
/* ------------- 渲染商品信息 ------------- */
|
|||
|
|
function renderGoods(g = {}) {
|
|||
|
|
const { originalPrice: op = 0, payPrice = 0, deductionPrice = 0 } = g;
|
|||
|
|
currentPrice.textContent = payPrice;
|
|||
|
|
originalPrice.textContent = op;
|
|||
|
|
dropPrice.textContent = `直降 ￥${deductionPrice}`;
|
|||
|
|
|
|||
|
|
singlePriceSpan.textContent = `￥${op}`;
|
|||
|
|
groupPriceSpan.textContent = `￥${payPrice}`;
|
|||
|
|
btnSingle.dataset.price = op;
|
|||
|
|
btnGroup.dataset.price = payPrice;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* ------------- 渲染统计信息 ------------- */
|
|||
|
|
function renderStatistic(stat = {}) {
|
|||
|
|
const { allTeamUserCount = 0 } = stat;
|
|||
|
|
groupTitle.textContent = `${allTeamUserCount}人在抢，参与可立即拼成`;
|
|||
|
|
soldBox.textContent = `${allTeamUserCount}人再抢`;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* ------------- 渲染拼团列表 ------------- */
|
|||
|
|
function renderTeams(list = [], groupPrice = 0) {
|
|||
|
|
if (!list?.length) {
|
|||
|
|
groupTitle.textContent = '小伙伴，赶紧去开团吧，做村里最靓的仔。';
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
userList.innerHTML = '';
|
|||
|
|
list.forEach(t => userList.appendChild(makeItem(t, groupPrice)));
|
|||
|
|
initUserMarquee();
|
|||
|
|
initCountdown();
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 把 teamId / activityId 写到 user-info 的 dataset 上，便于点击时读取
|
|||
|
|
function makeItem(team, price) {
|
|||
|
|
const { userId, targetCount, lockCount,
|
|||
|
|
validTimeCountdown, teamId, activityId: tActId } = team;
|
|||
|
|
const leftNum = Math.max(targetCount - lockCount, 0);
|
|||
|
|
const timeText = validTimeCountdown || '00:00:00';
|
|||
|
|
|
|||
|
|
const div = document.createElement('div');
|
|||
|
|
div.className = 'user-item';
|
|||
|
|
div.innerHTML = `
|
|||
|
|
<div class="user-avatar"><i class="fas fa-user"></i></div>
|
|||
|
|
<div class="user-info"
|
|||
|
|
data-teamid="${teamId}"
|
|||
|
|
data-activityid="${tActId}">
|
|||
|
|
<div class="user-name">${userId}</div>
|
|||
|
|
<div class="user-status">
|
|||
|
|
仅剩${leftNum}人成团
|
|||
|
|
<span class="countdown">${timeText}</span>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<button class="buy-btn" data-price="${price}">参与拼团</button>
|
|||
|
|
`;
|
|||
|
|
return div;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* =====================================================
|
|||
|
|
* 2. 拼单列表纵向轮播
|
|||
|
|
* =================================================== */
|
|||
|
|
function initUserMarquee() {
|
|||
|
|
const items = userList.querySelectorAll('.user-item');
|
|||
|
|
if (items.length <= 1) return;
|
|||
|
|
|
|||
|
|
const itemH = items[0].offsetHeight;
|
|||
|
|
userList.appendChild(items[0].cloneNode(true));
|
|||
|
|
|
|||
|
|
let idx = 0;
|
|||
|
|
userList.addEventListener('transitionend', () => {
|
|||
|
|
if (idx >= items.length) {
|
|||
|
|
userList.style.transition = 'none';
|
|||
|
|
userList.style.transform = 'translateY(0)';
|
|||
|
|
idx = 0;
|
|||
|
|
void userList.offsetWidth;
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
setInterval(() => {
|
|||
|
|
idx++;
|
|||
|
|
userList.style.transition = 'transform .5s ease';
|
|||
|
|
userList.style.transform = `translateY(${-idx * itemH}px)`;
|
|||
|
|
}, 3000);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* =====================================================
|
|||
|
|
* 3. 倒计时
|
|||
|
|
* =================================================== */
|
|||
|
|
let countdownData = [];
|
|||
|
|
|
|||
|
|
function initCountdown() {
|
|||
|
|
const els = document.querySelectorAll('.countdown');
|
|||
|
|
countdownData = Array.from(els).map(el => ({
|
|||
|
|
el,
|
|||
|
|
remain: toSec(el.textContent.trim())
|
|||
|
|
}));
|
|||
|
|
setInterval(tick, 1000);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const toSec = t => {
|
|||
|
|
if (!t.includes(':')) return 0;
|
|||
|
|
const [h='00', m='00', s='00'] = t.split(':');
|
|||
|
|
return +h*3600 + +m*60 + +s;
|
|||
|
|
};
|
|||
|
|
const fmt = n => String(n).padStart(2,'0');
|
|||
|
|
const format = s => `${fmt(s/3600|0)}:${fmt((s%3600)/60|0)}:${fmt(s%60)}`;
|
|||
|
|
|
|||
|
|
function tick() {
|
|||
|
|
countdownData.forEach(c=>{
|
|||
|
|
if (c.remain > 0) {
|
|||
|
|
c.remain--;
|
|||
|
|
c.el.textContent = format(c.remain);
|
|||
|
|
if(!c.remain) expire(c.el);
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
function expire(el){
|
|||
|
|
el.textContent = '00:00:00';
|
|||
|
|
const item = el.closest('.user-item');
|
|||
|
|
item?.classList.add('expired');
|
|||
|
|
item?.querySelector('.buy-btn')?.setAttribute('disabled','disabled');
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* =====================================================
|
|||
|
|
* 4. 支付相关
|
|||
|
|
* =================================================== */
|
|||
|
|
const PAY_MALL_URL = 'http://127.0.0.1:8092';
|
|||
|
|
const CREATE_PAY_API = `${PAY_MALL_URL}/api/v1/alipay/create_pay_order`;
|
|||
|
|
|
|||
|
|
// 4.1 支付确认弹窗
|
|||
|
|
function showPaymentConfirm(price){
|
|||
|
|
if(document.querySelector('.payment-overlay')) return;
|
|||
|
|
|
|||
|
|
const tpl = document.getElementById('tpl-payment');
|
|||
|
|
const overlay = tpl.content.firstElementChild.cloneNode(true);
|
|||
|
|
|
|||
|
|
overlay.querySelector('#priceText').textContent = `￥${price}`;
|
|||
|
|
overlay.querySelector('.copyable').onclick = function(){
|
|||
|
|
navigator.clipboard.writeText(this.dataset.copy)
|
|||
|
|
.then(()=>alert('买家账号已复制到剪贴板'));
|
|||
|
|
};
|
|||
|
|
overlay.querySelector('.cancel-btn').onclick = ()=>{
|
|||
|
|
document.querySelectorAll('form').forEach(f=>f.remove());
|
|||
|
|
overlay.remove();
|
|||
|
|
};
|
|||
|
|
overlay.querySelector('.confirm-btn').onclick = ()=>{
|
|||
|
|
document.querySelector('form')?.submit();
|
|||
|
|
overlay.remove();
|
|||
|
|
};
|
|||
|
|
overlay.addEventListener('click',e=>{
|
|||
|
|
if(e.target===overlay) overlay.querySelector('.cancel-btn').click();
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
document.body.appendChild(overlay);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* ---------- 4.2 单独购买 ---------- */
|
|||
|
|
btnSingle.addEventListener('click', () => {
|
|||
|
|
if (!getCookie('loginToken')) { location.href = 'login.html'; return; }
|
|||
|
|
|
|||
|
|
fetch(CREATE_PAY_API, {
|
|||
|
|
method : 'POST',
|
|||
|
|
headers: { 'Content-Type': 'application/json' },
|
|||
|
|
body : JSON.stringify({
|
|||
|
|
userId : username,
|
|||
|
|
productId : POST_BODY.goodsId,
|
|||
|
|
marketType: 0
|
|||
|
|
})
|
|||
|
|
})
|
|||
|
|
.then(r=>r.json())
|
|||
|
|
.then(json=>{
|
|||
|
|
if (json.code!=='0000') return alert(json.info||'下单失败');
|
|||
|
|
document.querySelectorAll('form').forEach(f=>f.remove());
|
|||
|
|
document.body.insertAdjacentHTML('beforeend', json.data);
|
|||
|
|
showPaymentConfirm(btnSingle.dataset.price);
|
|||
|
|
})
|
|||
|
|
.catch(console.error);
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
/* ---------- 4.3 开团购买 ---------- */
|
|||
|
|
btnGroup.addEventListener('click', () => {
|
|||
|
|
if (!getCookie('loginToken')) { location.href = 'login.html'; return; }
|
|||
|
|
|
|||
|
|
fetch(CREATE_PAY_API, {
|
|||
|
|
method : 'POST',
|
|||
|
|
headers: { 'Content-Type': 'application/json' },
|
|||
|
|
body : JSON.stringify({
|
|||
|
|
userId : username,
|
|||
|
|
productId : POST_BODY.goodsId,
|
|||
|
|
marketType: 1,
|
|||
|
|
activityId: activityId
|
|||
|
|
})
|
|||
|
|
})
|
|||
|
|
.then(r=>r.json())
|
|||
|
|
.then(json=>{
|
|||
|
|
if (json.code!=='0000') return alert(json.info||'下单失败');
|
|||
|
|
document.querySelectorAll('form').forEach(f=>f.remove());
|
|||
|
|
document.body.insertAdjacentHTML('beforeend', json.data);
|
|||
|
|
showPaymentConfirm(btnGroup.dataset.price);
|
|||
|
|
})
|
|||
|
|
.catch(console.error);
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
/* ---------- 4.4 参与拼团（ buy-btn ）---------- */
|
|||
|
|
document.body.addEventListener('click', e => {
|
|||
|
|
const joinBtn = e.target.closest('.buy-btn');
|
|||
|
|
if (!joinBtn) return;
|
|||
|
|
|
|||
|
|
if (!getCookie('loginToken')) { location.href = 'login.html'; return; }
|
|||
|
|
|
|||
|
|
// 获取 teamId、activityId
|
|||
|
|
const userInfo = joinBtn.closest('.user-item')?.querySelector('.user-info');
|
|||
|
|
const teamId = userInfo?.dataset.teamid;
|
|||
|
|
const actId = userInfo?.dataset.activityid || activityId;
|
|||
|
|
|
|||
|
|
if (!teamId) { return alert('拼团信息已失效，请刷新页面'); }
|
|||
|
|
|
|||
|
|
fetch(CREATE_PAY_API, {
|
|||
|
|
method : 'POST',
|
|||
|
|
headers: { 'Content-Type': 'application/json' },
|
|||
|
|
body : JSON.stringify({
|
|||
|
|
userId : username,
|
|||
|
|
productId : POST_BODY.goodsId,
|
|||
|
|
teamId : teamId,
|
|||
|
|
activityId: actId,
|
|||
|
|
marketType: 1 // 参团
|
|||
|
|
})
|
|||
|
|
})
|
|||
|
|
.then(r=>r.json())
|
|||
|
|
.then(json=>{
|
|||
|
|
if (json.code!=='0000') return alert(json.info||'参团失败');
|
|||
|
|
document.querySelectorAll('form').forEach(f=>f.remove());
|
|||
|
|
document.body.insertAdjacentHTML('beforeend', json.data);
|
|||
|
|
showPaymentConfirm(joinBtn.dataset.price);
|
|||
|
|
})
|
|||
|
|
.catch(console.error);
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
/* =====================================================
|
|||
|
|
* 5. 顶部横向轮播（原逻辑保留）
|
|||
|
|
* =================================================== */
|
|||
|
|
const wrapper = document.querySelector('.swiper-wrapper');
|
|||
|
|
const slides = [...wrapper.children];
|
|||
|
|
const pagination = document.querySelector('.swiper-pagination');
|
|||
|
|
const count = slides.length;
|
|||
|
|
|
|||
|
|
let current = 0, startX = 0, dragging = false, timer;
|
|||
|
|
for (let i = 0; i < count; i++) {
|
|||
|
|
const dot = document.createElement('div');
|
|||
|
|
dot.className = 'swiper-dot' + (i===0?' active':'');
|
|||
|
|
dot.onclick = () => goTo(i);
|
|||
|
|
pagination.appendChild(dot);
|
|||
|
|
}
|
|||
|
|
const dots = pagination.children;
|
|||
|
|
|
|||
|
|
const goTo = i => {
|
|||
|
|
current = (i+count)%count;
|
|||
|
|
wrapper.style.transition = 'transform .3s ease';
|
|||
|
|
wrapper.style.transform = `translateX(-${current*100}%)`;
|
|||
|
|
[...dots].forEach((d,j)=>d.classList.toggle('active',j===current));
|
|||
|
|
};
|
|||
|
|
const auto = () => { timer=setInterval(()=>goTo(current+1),3000); };
|
|||
|
|
const stop = () => clearInterval(timer);
|
|||
|
|
auto();
|
|||
|
|
|
|||
|
|
const getX = e => e.touches?e.touches[0].clientX:e.clientX;
|
|||
|
|
wrapper.addEventListener('pointerdown', e=>{
|
|||
|
|
stop(); dragging=true; startX=getX(e); wrapper.style.transition='none';
|
|||
|
|
});
|
|||
|
|
wrapper.addEventListener('pointermove', e=>{
|
|||
|
|
if(!dragging) return;
|
|||
|
|
const diff=getX(e)-startX;
|
|||
|
|
wrapper.style.transform=`translateX(calc(${-current*100}% + ${diff}px))`;
|
|||
|
|
});
|
|||
|
|
wrapper.addEventListener('pointerup',endSwipe);
|
|||
|
|
wrapper.addEventListener('pointercancel',endSwipe);
|
|||
|
|
wrapper.addEventListener('pointerleave',endSwipe);
|
|||
|
|
|
|||
|
|
function endSwipe(e){
|
|||
|
|
if(!dragging) return; dragging=false;
|
|||
|
|
const diff=getX(e)-startX;
|
|||
|
|
const limit=wrapper.offsetWidth*0.15;
|
|||
|
|
if(diff> limit) goTo(current-1);
|
|||
|
|
else if(diff<-limit) goTo(current+1);
|
|||
|
|
else goTo(current);
|
|||
|
|
auto();
|
|||
|
|
}
|
|||
|
|
});
|