399 lines
14 KiB
JavaScript
399 lines
14 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 = '/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(3); // 显示 3 条
|
||
initCountdown();
|
||
}
|
||
|
||
function obfuscateUserId(userId) {
|
||
if (userId.length < 4) {
|
||
if (userId.length <= 1) {
|
||
return userId;
|
||
}
|
||
const first = userId.charAt(0);
|
||
const last = userId.charAt(userId.length - 1);
|
||
const middle = '*'.repeat(userId.length - 2);
|
||
return first + middle + last;
|
||
} else {
|
||
const start = userId.slice(0, 2);
|
||
const end = userId.slice(-1);
|
||
const middle = '*'.repeat(userId.length - 4);
|
||
return start + middle + end;
|
||
}
|
||
}
|
||
|
||
// 把 teamId / activityId 写到 user-info 的 dataset 上，便于点击时读取
|
||
function makeItem(team, price) {
|
||
const { userId, targetCount, lockCount, validTimeCountdown } = team;
|
||
|
||
// ① 先对 userId 脱敏
|
||
const maskedId = obfuscateUserId(userId);
|
||
|
||
// ② 继续原本逻辑
|
||
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">
|
||
<div class="user-name">${maskedId}</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(visibleCount = 3, interval = 3000, duration = 500) {
|
||
const box = document.querySelector('.group-users');
|
||
const listEl = userList;
|
||
let originals = Array.from(listEl.children);
|
||
const total = originals.length;
|
||
|
||
if (total === 0) return;
|
||
// 如果原本就 <= 可见数，直接定高，不滚
|
||
if (total <= visibleCount) {
|
||
const h0 = originals[0].offsetHeight;
|
||
box.style.height = (h0 * visibleCount) + 'px';
|
||
return;
|
||
}
|
||
|
||
// 1. 复制整份加入末尾
|
||
originals.forEach(item => listEl.appendChild(item.cloneNode(true)));
|
||
|
||
// 2. 重新测量单条高度（此时 DOM 完整）
|
||
const itemH = listEl.children[0].offsetHeight;
|
||
|
||
// 3. 设定窗口高度
|
||
box.style.height = (itemH * visibleCount) + 'px';
|
||
|
||
// 4. 状态
|
||
let index = 0;
|
||
let ticking = false;
|
||
|
||
function step() {
|
||
index++;
|
||
listEl.style.transition = `transform ${duration}ms ease`;
|
||
listEl.style.transform = `translateY(-${index * itemH}px)`;
|
||
}
|
||
|
||
listEl.addEventListener('transitionend', () => {
|
||
ticking = false;
|
||
// 5. 到达复制段的“第一帧”（index === total）就无缝重置
|
||
if (index === total) {
|
||
listEl.style.transition = 'none';
|
||
listEl.style.transform = 'translateY(0)';
|
||
index = 0;
|
||
// 强制 reflow 再恢复 transition
|
||
void listEl.offsetHeight;
|
||
listEl.style.transition = `transform ${duration}ms ease`;
|
||
}
|
||
});
|
||
|
||
const timer = setInterval(() => {
|
||
if (!ticking) {
|
||
ticking = true;
|
||
step();
|
||
}
|
||
}, interval);
|
||
|
||
// 可选：鼠标悬停暂停
|
||
listEl.addEventListener('mouseenter', () => clearInterval(timer));
|
||
}
|
||
|
||
/* =====================================================
|
||
* 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 CREATE_PAY_API = `/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();
|
||
}
|
||
});
|