345 lines
9.3 KiB
JavaScript
345 lines
9.3 KiB
JavaScript
|
// 浏览器环境下的优惠券中心页面逻辑
|
||
|
|
|
||
|
|
// API配置
|
||
|
|
const API_CONFIG = {
|
||
|
|
// 生产环境
|
||
|
|
production: 'https://tral.cc/api/v1',
|
||
|
|
// 开发环境
|
||
|
|
development: 'http://localhost:8080/api/v1'
|
||
|
|
};
|
||
|
|
|
||
|
|
// 当前环境 - 根据域名自动判断
|
||
|
|
const CURRENT_ENV = window.location.hostname === 'localhost' || window.location.hostname === '127.0.0.1'
|
||
|
|
? 'development'
|
||
|
|
: 'production';
|
||
|
|
|
||
|
|
const config = {
|
||
|
|
apiBase: API_CONFIG[CURRENT_ENV]
|
||
|
|
};
|
||
|
|
|
||
|
|
// 模拟请求函数
|
||
|
|
async function request(options) {
|
||
|
|
const { url, method = 'GET', data } = options;
|
||
|
|
const fullUrl = config.apiBase + url;
|
||
|
|
|
||
|
|
try {
|
||
|
|
const response = await fetch(fullUrl, {
|
||
|
|
method,
|
||
|
|
headers: {
|
||
|
|
'Content-Type': 'application/json',
|
||
|
|
'Authorization': localStorage.getItem('token') || ''
|
||
|
|
},
|
||
|
|
body: data ? JSON.stringify(data) : undefined
|
||
|
|
});
|
||
|
|
|
||
|
|
if (!response.ok) {
|
||
|
|
throw new Error(`HTTP ${response.status}: ${response.statusText}`);
|
||
|
|
}
|
||
|
|
|
||
|
|
const result = await response.json();
|
||
|
|
return result;
|
||
|
|
} catch (error) {
|
||
|
|
console.error('请求失败:', error);
|
||
|
|
throw error;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
// 页面数据
|
||
|
|
let pageData = {
|
||
|
|
availableCoupons: [],
|
||
|
|
loading: false
|
||
|
|
};
|
||
|
|
|
||
|
|
// 页面初始化
|
||
|
|
document.addEventListener('DOMContentLoaded', function() {
|
||
|
|
// 设置测试用的JWT token
|
||
|
|
const testToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VyX2lkIjoxLCJleHAiOjE3NjEwMzE0ODQsImlhdCI6MTc2MDk0NTA4NH0.JAi7VnVTsA-qPegR9DCINr1nISrxakaQxf6aY4EZykU';
|
||
|
|
localStorage.setItem('token', testToken);
|
||
|
|
|
||
|
|
fetchAvailableCoupons();
|
||
|
|
});
|
||
|
|
|
||
|
|
// 获取可领取优惠券列表
|
||
|
|
async function fetchAvailableCoupons() {
|
||
|
|
try {
|
||
|
|
setLoading(true);
|
||
|
|
|
||
|
|
// 调用真实API获取优惠券数据
|
||
|
|
const response = await request({
|
||
|
|
url: '/coupons',
|
||
|
|
method: 'GET'
|
||
|
|
});
|
||
|
|
|
||
|
|
const coupons = response.data || [];
|
||
|
|
const formattedCoupons = formatCoupons(coupons);
|
||
|
|
pageData.availableCoupons = formattedCoupons;
|
||
|
|
|
||
|
|
renderCouponList(formattedCoupons);
|
||
|
|
setLoading(false);
|
||
|
|
} catch (error) {
|
||
|
|
console.error('获取可领取优惠券失败:', error);
|
||
|
|
setLoading(false);
|
||
|
|
showToast('获取优惠券失败，请稍后重试');
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
// 格式化优惠券数据
|
||
|
|
function formatCoupons(coupons) {
|
||
|
|
return coupons.map(coupon => {
|
||
|
|
const remainingCount = coupon.total_count > 0 ? coupon.total_count - coupon.used_count : -1;
|
||
|
|
|
||
|
|
return {
|
||
|
|
id: coupon.id,
|
||
|
|
name: coupon.name,
|
||
|
|
type: coupon.type,
|
||
|
|
value: coupon.value,
|
||
|
|
minAmount: coupon.min_amount,
|
||
|
|
desc: getCouponDesc(coupon),
|
||
|
|
timeLimit: formatTimeLimit(coupon.start_time, coupon.end_time),
|
||
|
|
status: 'default',
|
||
|
|
totalCount: coupon.total_count,
|
||
|
|
usedCount: coupon.used_count,
|
||
|
|
remainingCount: remainingCount
|
||
|
|
};
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
// 获取优惠券描述
|
||
|
|
function getCouponDesc(coupon) {
|
||
|
|
if (coupon.type === 1) { // 满减券
|
||
|
|
if (coupon.min_amount > 0) {
|
||
|
|
return `满${(coupon.min_amount / 100).toFixed(0)}元减${(coupon.value / 100).toFixed(0)}元`;
|
||
|
|
}
|
||
|
|
return `立减${(coupon.value / 100).toFixed(0)}元`;
|
||
|
|
} else if (coupon.type === 2) { // 折扣券
|
||
|
|
return `${coupon.value / 10}折`;
|
||
|
|
} else if (coupon.type === 3) { // 免邮券
|
||
|
|
return '免运费';
|
||
|
|
}
|
||
|
|
return coupon.description || '优惠券';
|
||
|
|
}
|
||
|
|
|
||
|
|
// 格式化时间限制
|
||
|
|
function formatTimeLimit(startTime, endTime) {
|
||
|
|
return `${startTime} - ${endTime}`;
|
||
|
|
}
|
||
|
|
|
||
|
|
// 渲染优惠券列表
|
||
|
|
function renderCouponList(coupons) {
|
||
|
|
const couponListElement = document.getElementById('couponList');
|
||
|
|
const emptyStateElement = document.getElementById('emptyState');
|
||
|
|
|
||
|
|
if (!coupons || coupons.length === 0) {
|
||
|
|
couponListElement.innerHTML = '';
|
||
|
|
emptyStateElement.style.display = 'flex';
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
|
||
|
|
emptyStateElement.style.display = 'none';
|
||
|
|
|
||
|
|
const couponHTML = coupons.map(coupon => {
|
||
|
|
const valueDisplay = coupon.type === 1
|
||
|
|
? `<span class="value-number">${coupon.value / 100}</span><span class="value-unit">元</span>`
|
||
|
|
: coupon.type === 2
|
||
|
|
? `<span class="value-number">${coupon.value / 10}</span><span class="value-unit">折</span>`
|
||
|
|
: `<span class="value-text">免邮</span>`;
|
||
|
|
|
||
|
|
const stockText = coupon.remainingCount > 0
|
||
|
|
? `剩余 ${coupon.remainingCount} 张`
|
||
|
|
: '已抢完';
|
||
|
|
|
||
|
|
const isDisabled = coupon.remainingCount === 0;
|
||
|
|
|
||
|
|
return `
|
||
|
|
<div class="coupon-item">
|
||
|
|
<div class="coupon-card">
|
||
|
|
<div class="coupon-main">
|
||
|
|
<div class="coupon-left">
|
||
|
|
<div class="coupon-value">
|
||
|
|
${valueDisplay}
|
||
|
|
</div>
|
||
|
|
<div class="coupon-desc">${coupon.desc}</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="coupon-right">
|
||
|
|
<div class="coupon-name">${coupon.name}</div>
|
||
|
|
<div class="coupon-time">${coupon.timeLimit}</div>
|
||
|
|
<div class="coupon-stock">${stockText}</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="coupon-action">
|
||
|
|
<button class="receive-btn ${isDisabled ? 'disabled' : ''}"
|
||
|
|
data-coupon-id="${coupon.id}"
|
||
|
|
${isDisabled ? 'disabled' : ''}>
|
||
|
|
${isDisabled ? '已抢完' : '立即领取'}
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
`;
|
||
|
|
}).join('');
|
||
|
|
|
||
|
|
couponListElement.innerHTML = couponHTML;
|
||
|
|
|
||
|
|
// 添加事件委托处理按钮点击
|
||
|
|
couponListElement.removeEventListener('click', handleCouponListClick);
|
||
|
|
couponListElement.addEventListener('click', handleCouponListClick);
|
||
|
|
}
|
||
|
|
|
||
|
|
// 处理优惠券列表点击事件
|
||
|
|
function handleCouponListClick(event) {
|
||
|
|
const target = event.target;
|
||
|
|
|
||
|
|
// 检查是否点击了领取按钮
|
||
|
|
if (target.classList.contains('receive-btn') && !target.disabled) {
|
||
|
|
const couponId = target.getAttribute('data-coupon-id');
|
||
|
|
if (couponId) {
|
||
|
|
receiveCoupon(event, parseInt(couponId));
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
// 领取优惠券
|
||
|
|
async function receiveCoupon(event, couponId) {
|
||
|
|
// 阻止事件冒泡和默认行为
|
||
|
|
if (event) {
|
||
|
|
event.stopPropagation();
|
||
|
|
event.preventDefault();
|
||
|
|
event.stopImmediatePropagation();
|
||
|
|
}
|
||
|
|
|
||
|
|
if (!couponId) return;
|
||
|
|
|
||
|
|
// 检查优惠券是否还有库存
|
||
|
|
const coupon = pageData.availableCoupons.find(c => c.id == couponId);
|
||
|
|
if (!coupon || coupon.remainingCount === 0) {
|
||
|
|
showToast('优惠券已抢完', 'error');
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
|
||
|
|
// 防止重复点击
|
||
|
|
const button = event.target;
|
||
|
|
if (button.disabled) return;
|
||
|
|
|
||
|
|
button.disabled = true;
|
||
|
|
button.textContent = '领取中...';
|
||
|
|
|
||
|
|
try {
|
||
|
|
showLoading('正在领取优惠券...');
|
||
|
|
|
||
|
|
const response = await request({
|
||
|
|
url: `/coupons/${couponId}/receive`,
|
||
|
|
method: 'POST'
|
||
|
|
});
|
||
|
|
console.log('优惠券领取成功:', response);
|
||
|
|
|
||
|
|
hideLoading();
|
||
|
|
|
||
|
|
// 显示成功提示
|
||
|
|
showToast(`🎉 ${coupon.name} 领取成功！`, 'success');
|
||
|
|
|
||
|
|
// 重新获取优惠券列表以确保数据同步
|
||
|
|
await fetchAvailableCoupons();
|
||
|
|
|
||
|
|
} catch (error) {
|
||
|
|
hideLoading();
|
||
|
|
console.error('领取优惠券失败:', error);
|
||
|
|
showToast(error.message || '领取失败，请重试', 'error');
|
||
|
|
|
||
|
|
// 重新获取列表以确保状态正确
|
||
|
|
await fetchAvailableCoupons();
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
// 查看优惠券详情
|
||
|
|
function viewCouponDetail(couponId) {
|
||
|
|
showToast(`查看优惠券详情: ${couponId}`);
|
||
|
|
}
|
||
|
|
|
||
|
|
// 返回
|
||
|
|
function goBack() {
|
||
|
|
if (window.history.length > 1) {
|
||
|
|
window.history.back();
|
||
|
|
} else {
|
||
|
|
showToast('返回上一页');
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
// 设置加载状态
|
||
|
|
function setLoading(loading) {
|
||
|
|
pageData.loading = loading;
|
||
|
|
const loadingElement = document.getElementById('loadingState');
|
||
|
|
const couponListElement = document.getElementById('couponList');
|
||
|
|
|
||
|
|
if (loading) {
|
||
|
|
loadingElement.style.display = 'flex';
|
||
|
|
couponListElement.style.display = 'none';
|
||
|
|
} else {
|
||
|
|
loadingElement.style.display = 'none';
|
||
|
|
couponListElement.style.display = 'block';
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
// 显示提示
|
||
|
|
function showToast(message, type = 'info') {
|
||
|
|
// 创建toast元素
|
||
|
|
const toast = document.createElement('div');
|
||
|
|
toast.style.cssText = `
|
||
|
|
position: fixed;
|
||
|
|
top: 50%;
|
||
|
|
left: 50%;
|
||
|
|
transform: translate(-50%, -50%);
|
||
|
|
background: ${type === 'success' ? '#4CAF50' : type === 'error' ? '#f44336' : '#333'};
|
||
|
|
color: white;
|
||
|
|
padding: 12px 24px;
|
||
|
|
border-radius: 4px;
|
||
|
|
z-index: 10000;
|
||
|
|
font-size: 14px;
|
||
|
|
max-width: 80%;
|
||
|
|
text-align: center;
|
||
|
|
`;
|
||
|
|
toast.textContent = message;
|
||
|
|
|
||
|
|
document.body.appendChild(toast);
|
||
|
|
|
||
|
|
setTimeout(() => {
|
||
|
|
document.body.removeChild(toast);
|
||
|
|
}, 2000);
|
||
|
|
}
|
||
|
|
|
||
|
|
// 显示加载中
|
||
|
|
function showLoading(message = '加载中...') {
|
||
|
|
const loading = document.createElement('div');
|
||
|
|
loading.id = 'globalLoading';
|
||
|
|
loading.style.cssText = `
|
||
|
|
position: fixed;
|
||
|
|
top: 0;
|
||
|
|
left: 0;
|
||
|
|
width: 100%;
|
||
|
|
height: 100%;
|
||
|
|
background: rgba(0, 0, 0, 0.5);
|
||
|
|
display: flex;
|
||
|
|
flex-direction: column;
|
||
|
|
align-items: center;
|
||
|
|
justify-content: center;
|
||
|
|
z-index: 10001;
|
||
|
|
color: white;
|
||
|
|
font-size: 16px;
|
||
|
|
`;
|
||
|
|
|
||
|
|
loading.innerHTML = `
|
||
|
|
<div style="width: 40px; height: 40px; border: 3px solid #f3f3f3; border-top: 3px solid #fff; border-radius: 50%; animation: spin 1s linear infinite; margin-bottom: 16px;"></div>
|
||
|
|
<div>${message}</div>
|
||
|
|
`;
|
||
|
|
|
||
|
|
document.body.appendChild(loading);
|
||
|
|
}
|
||
|
|
|
||
|
|
// 隐藏加载中
|
||
|
|
function hideLoading() {
|
||
|
|
const loading = document.getElementById('globalLoading');
|
||
|
|
if (loading) {
|
||
|
|
document.body.removeChild(loading);
|
||
|
|
}
|
||
|
|
}
|