Initial commit
This commit is contained in:
sjk
345
miniprogram/pages/coupon/coupon-center/index-browser.js
Normal file
345
miniprogram/pages/coupon/coupon-center/index-browser.js
Normal file
@@ -0,0 +1,345 @@
|
||||
// 浏览器环境下的优惠券中心页面逻辑
|
||||
|
||||
// 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);
|
||||
}
|
||||
}
|
||||
377
miniprogram/pages/coupon/coupon-center/index.css
Normal file
377
miniprogram/pages/coupon/coupon-center/index.css
Normal file
@@ -0,0 +1,377 @@
|
||||
/* 基础样式重置 */
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
/* 移动端优化 */
|
||||
html {
|
||||
/* 防止iOS Safari缩放 */
|
||||
-webkit-text-size-adjust: 100%;
|
||||
/* 防止横屏时字体缩放 */
|
||||
text-size-adjust: 100%;
|
||||
/* 平滑滚动 */
|
||||
scroll-behavior: smooth;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
|
||||
background-color: #f5f5f5;
|
||||
line-height: 1.4;
|
||||
/* 支持安全区域 */
|
||||
padding-top: env(safe-area-inset-top);
|
||||
padding-bottom: env(safe-area-inset-bottom);
|
||||
padding-left: env(safe-area-inset-left);
|
||||
padding-right: env(safe-area-inset-right);
|
||||
/* 移动端触摸优化 */
|
||||
-webkit-touch-callout: none;
|
||||
-webkit-user-select: none;
|
||||
user-select: none;
|
||||
/* 防止橡皮筋效果 */
|
||||
overscroll-behavior: contain;
|
||||
}
|
||||
/* 主容器 */
|
||||
.coupon-center-container {
|
||||
min-height: 100vh;
|
||||
background: #f5f5f5;
|
||||
/* 适配移动端安全区域 */
|
||||
min-height: calc(100vh - env(safe-area-inset-top) - env(safe-area-inset-bottom));
|
||||
padding-bottom: max(20px, env(safe-area-inset-bottom));
|
||||
/* 为固定标题栏留出空间 */
|
||||
padding-top: calc(44px + env(safe-area-inset-top));
|
||||
}
|
||||
|
||||
/* 页面头部 */
|
||||
.page-header {
|
||||
background: #ffffff;
|
||||
padding: 0;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
z-index: 100;
|
||||
border-bottom: 1px solid #f0f0f0;
|
||||
/* 状态栏高度适配 - 模拟微信小程序标准导航栏位置 */
|
||||
padding-top: env(safe-area-inset-top);
|
||||
height: calc(44px + env(safe-area-inset-top));
|
||||
}
|
||||
|
||||
.header-content {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 0 16px;
|
||||
height: 44px;
|
||||
margin-top: 0;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.header-back {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 50%;
|
||||
transition: background-color 0.2s ease;
|
||||
position: absolute;
|
||||
left: 16px;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
|
||||
.header-back:hover {
|
||||
background-color: #f5f5f5;
|
||||
}
|
||||
|
||||
.header-back svg {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
}
|
||||
|
||||
.header-back svg path {
|
||||
stroke: #333333;
|
||||
}
|
||||
|
||||
.header-title {
|
||||
font-size: 17px;
|
||||
font-weight: 600;
|
||||
color: #333333;
|
||||
text-align: center;
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
.header-placeholder {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
}
|
||||
|
||||
/* 优惠券列表容器 */
|
||||
.coupon-list-container {
|
||||
padding: 12px;
|
||||
/* 适配移动端安全区域 */
|
||||
padding-left: max(12px, env(safe-area-inset-left));
|
||||
padding-right: max(12px, env(safe-area-inset-right));
|
||||
padding-bottom: max(20px, env(safe-area-inset-bottom));
|
||||
}
|
||||
|
||||
/* 优惠券项 */
|
||||
.coupon-item {
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.coupon-card {
|
||||
background: #fff;
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
transition: transform 0.2s ease, box-shadow 0.2s ease;
|
||||
}
|
||||
|
||||
.coupon-card:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12);
|
||||
}
|
||||
|
||||
/* 优惠券主体 */
|
||||
.coupon-main {
|
||||
display: flex;
|
||||
padding: 16px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.coupon-main::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
width: 1px;
|
||||
height: 30px;
|
||||
background: linear-gradient(to bottom, transparent, #e5e5e5, transparent);
|
||||
}
|
||||
|
||||
.coupon-left {
|
||||
flex: 0 0 100px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: linear-gradient(135deg, #ff6b6b, #ff8e8e);
|
||||
color: #fff;
|
||||
border-radius: 6px;
|
||||
padding: 12px 8px;
|
||||
margin-right: 16px;
|
||||
min-height: 80px;
|
||||
}
|
||||
|
||||
.coupon-value {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.value-number {
|
||||
font-size: 28px;
|
||||
font-weight: 700;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.value-unit {
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
margin-left: 2px;
|
||||
}
|
||||
|
||||
.value-text {
|
||||
font-size: 18px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.coupon-desc {
|
||||
font-size: 11px;
|
||||
opacity: 0.9;
|
||||
text-align: center;
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
.coupon-right {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
padding-left: 8px;
|
||||
}
|
||||
|
||||
.coupon-name {
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
margin-bottom: 6px;
|
||||
line-height: 1.3;
|
||||
}
|
||||
|
||||
.coupon-time {
|
||||
font-size: 12px;
|
||||
color: #999;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.coupon-stock {
|
||||
font-size: 12px;
|
||||
color: #ff6b6b;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
/* 领取按钮区域 */
|
||||
.coupon-action {
|
||||
padding: 12px 16px;
|
||||
background: #f8f9fa;
|
||||
border-top: 1px solid #eee;
|
||||
}
|
||||
|
||||
.receive-btn {
|
||||
width: 100%;
|
||||
height: 40px;
|
||||
background: linear-gradient(135deg, #ff6b6b, #ff8e8e);
|
||||
color: #fff;
|
||||
border: none;
|
||||
border-radius: 20px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.receive-btn:hover {
|
||||
background: linear-gradient(135deg, #ff5252, #ff7979);
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
.receive-btn.disabled {
|
||||
background: #ccc;
|
||||
color: #999;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.receive-btn.disabled:hover {
|
||||
transform: none;
|
||||
background: #ccc;
|
||||
}
|
||||
|
||||
.receive-btn:not(.disabled):active {
|
||||
transform: scale(0.98);
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
/* 加载状态 */
|
||||
.loading-state {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 60px 16px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.loading-spinner {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border: 3px solid #f3f3f3;
|
||||
border-top: 3px solid #ff6b6b;
|
||||
border-radius: 50%;
|
||||
animation: spin 1s linear infinite;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
0% { transform: rotate(0deg); }
|
||||
100% { transform: rotate(360deg); }
|
||||
}
|
||||
|
||||
.loading-text {
|
||||
font-size: 16px;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
/* 空状态 */
|
||||
.empty-state {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 60px 16px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.empty-icon {
|
||||
font-size: 60px;
|
||||
margin-bottom: 16px;
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
.empty-text {
|
||||
font-size: 16px;
|
||||
color: #666;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.empty-desc {
|
||||
font-size: 14px;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
/* 响应式适配 */
|
||||
@media (max-width: 480px) {
|
||||
.coupon-left {
|
||||
flex: 0 0 80px;
|
||||
padding: 8px 6px;
|
||||
margin-right: 12px;
|
||||
}
|
||||
|
||||
.value-number {
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
.coupon-name {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.coupon-main {
|
||||
padding: 12px;
|
||||
}
|
||||
|
||||
.coupon-action {
|
||||
padding: 10px 12px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 360px) {
|
||||
.header-content {
|
||||
padding: 0 12px;
|
||||
}
|
||||
|
||||
.coupon-list-container {
|
||||
padding: 12px 8px;
|
||||
}
|
||||
|
||||
.coupon-left {
|
||||
flex: 0 0 70px;
|
||||
padding: 6px 4px;
|
||||
}
|
||||
|
||||
.value-number {
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.coupon-desc {
|
||||
font-size: 10px;
|
||||
}
|
||||
}
|
||||
49
miniprogram/pages/coupon/coupon-center/index.html
Normal file
49
miniprogram/pages/coupon/coupon-center/index.html
Normal file
@@ -0,0 +1,49 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
|
||||
<meta name="apple-mobile-web-app-capable" content="yes">
|
||||
<meta name="apple-mobile-web-app-status-bar-style" content="light-content">
|
||||
<title>领券中心</title>
|
||||
<link rel="stylesheet" href="index.css">
|
||||
</head>
|
||||
<body>
|
||||
<div class="coupon-center-container">
|
||||
<!-- 页面标题 -->
|
||||
<header class="page-header">
|
||||
<div class="header-content">
|
||||
<div class="header-back" onclick="goBack()">
|
||||
<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M15 18L9 12L15 6" stroke="#333333" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="header-title">领券中心</div>
|
||||
<div class="header-placeholder">
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<!-- 优惠券列表 -->
|
||||
<div class="coupon-list-container" id="couponListContainer">
|
||||
<!-- 加载状态 -->
|
||||
<div class="loading-state" id="loadingState" style="display: none;">
|
||||
<div class="loading-spinner"></div>
|
||||
<div class="loading-text">加载中...</div>
|
||||
</div>
|
||||
|
||||
<!-- 优惠券列表将通过JavaScript动态生成 -->
|
||||
<div id="couponList"></div>
|
||||
|
||||
<!-- 空状态 -->
|
||||
<div class="empty-state" id="emptyState" style="display: none;">
|
||||
<div class="empty-icon">🎫</div>
|
||||
<div class="empty-text">暂无可领取的优惠券</div>
|
||||
<div class="empty-desc">请稍后再来看看吧</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="index-browser.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
173
miniprogram/pages/coupon/coupon-center/index.js
Normal file
173
miniprogram/pages/coupon/coupon-center/index.js
Normal file
@@ -0,0 +1,173 @@
|
||||
import { request } from '../../../services/_utils/request';
|
||||
|
||||
Page({
|
||||
data: {
|
||||
availableCoupons: [], // 可领取的优惠券列表
|
||||
loading: false,
|
||||
refreshing: false,
|
||||
},
|
||||
|
||||
onLoad() {
|
||||
this.fetchAvailableCoupons();
|
||||
},
|
||||
|
||||
onShow() {
|
||||
// 页面显示时刷新数据，以防用户已领取某些优惠券
|
||||
this.fetchAvailableCoupons();
|
||||
},
|
||||
|
||||
// 刷新数据
|
||||
onRefresh() {
|
||||
this.setData({ refreshing: true });
|
||||
this.fetchAvailableCoupons().finally(() => {
|
||||
this.setData({ refreshing: false });
|
||||
});
|
||||
},
|
||||
|
||||
// 获取可领取优惠券列表
|
||||
async fetchAvailableCoupons() {
|
||||
try {
|
||||
this.setData({ loading: true });
|
||||
|
||||
const response = await request({
|
||||
url: '/coupons',
|
||||
method: 'GET'
|
||||
});
|
||||
|
||||
const coupons = response.data || [];
|
||||
const formattedCoupons = this.formatCoupons(coupons);
|
||||
this.setData({
|
||||
availableCoupons: formattedCoupons,
|
||||
loading: false
|
||||
});
|
||||
} catch (error) {
|
||||
console.error('获取可领取优惠券失败:', error);
|
||||
this.setData({ loading: false });
|
||||
wx.showToast({
|
||||
title: '获取优惠券失败',
|
||||
icon: 'none'
|
||||
});
|
||||
}
|
||||
},
|
||||
|
||||
// 格式化优惠券数据
|
||||
formatCoupons(coupons) {
|
||||
return coupons.map(coupon => {
|
||||
return {
|
||||
id: coupon.id,
|
||||
name: coupon.name,
|
||||
type: coupon.type,
|
||||
value: coupon.value,
|
||||
minAmount: coupon.min_amount,
|
||||
desc: this.getCouponDesc(coupon),
|
||||
timeLimit: this.formatTimeLimit(coupon.start_time, coupon.end_time),
|
||||
status: 'default', // 可领取状态
|
||||
totalCount: coupon.total_count,
|
||||
usedCount: coupon.used_count,
|
||||
remainingCount: coupon.total_count > 0 ? coupon.total_count - coupon.used_count : -1,
|
||||
isReceived: coupon.is_received || false // 是否已领取
|
||||
};
|
||||
});
|
||||
},
|
||||
|
||||
// 获取优惠券描述
|
||||
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 || '优惠券';
|
||||
},
|
||||
|
||||
// 格式化时间限制
|
||||
formatTimeLimit(startTime, endTime) {
|
||||
const start = new Date(startTime);
|
||||
const end = new Date(endTime);
|
||||
const formatDate = (date) => {
|
||||
const year = date.getFullYear();
|
||||
const month = String(date.getMonth() + 1).padStart(2, '0');
|
||||
const day = String(date.getDate()).padStart(2, '0');
|
||||
return `${year}.${month}.${day}`;
|
||||
};
|
||||
return `${formatDate(start)} - ${formatDate(end)}`;
|
||||
},
|
||||
|
||||
// 领取优惠券
|
||||
async receiveCoupon(e) {
|
||||
const { couponid } = e.currentTarget.dataset;
|
||||
if (!couponid) return;
|
||||
|
||||
// 检查优惠券是否还有库存
|
||||
const coupon = this.data.availableCoupons.find(c => c.id == couponid);
|
||||
if (!coupon || coupon.remainingCount === 0) {
|
||||
wx.showToast({
|
||||
title: '优惠券已抢完',
|
||||
icon: 'none'
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
// 检查是否已领取
|
||||
if (coupon.isReceived) {
|
||||
wx.showToast({
|
||||
title: '您已领取过该优惠券',
|
||||
icon: 'none'
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
wx.showLoading({ title: '领取中...' });
|
||||
|
||||
const response = await request({
|
||||
url: `/coupons/${couponid}/receive`,
|
||||
method: 'POST'
|
||||
});
|
||||
|
||||
wx.hideLoading();
|
||||
|
||||
wx.showToast({
|
||||
title: '领取成功',
|
||||
icon: 'success'
|
||||
});
|
||||
|
||||
// 设置刷新标识，确保返回其他页面时能刷新优惠券数据
|
||||
wx.setStorageSync('shouldRefreshCoupons', true);
|
||||
|
||||
// 重新获取优惠券列表
|
||||
this.fetchAvailableCoupons();
|
||||
} catch (error) {
|
||||
wx.hideLoading();
|
||||
console.error('领取优惠券失败:', error);
|
||||
wx.showToast({
|
||||
title: error.message || '领取失败，请重试',
|
||||
icon: 'none'
|
||||
});
|
||||
}
|
||||
},
|
||||
|
||||
// 下拉刷新
|
||||
onPullDownRefresh() {
|
||||
this.setData({ refreshing: true });
|
||||
this.fetchAvailableCoupons().finally(() => {
|
||||
this.setData({ refreshing: false });
|
||||
wx.stopPullDownRefresh();
|
||||
});
|
||||
},
|
||||
|
||||
// 查看优惠券详情
|
||||
viewCouponDetail(e) {
|
||||
const { couponid } = e.currentTarget.dataset;
|
||||
wx.navigateTo({
|
||||
url: `/pages/coupon/coupon-detail/index?id=${couponid}`
|
||||
});
|
||||
},
|
||||
|
||||
|
||||
});
|
||||
9
miniprogram/pages/coupon/coupon-center/index.json
Normal file
9
miniprogram/pages/coupon/coupon-center/index.json
Normal file
@@ -0,0 +1,9 @@
|
||||
{
|
||||
"navigationBarTitleText": "领券中心",
|
||||
"enablePullDownRefresh": true,
|
||||
"backgroundColor": "#f5f5f5",
|
||||
"usingComponents": {
|
||||
"t-icon": "tdesign-miniprogram/icon/icon",
|
||||
"t-loading": "tdesign-miniprogram/loading/loading"
|
||||
}
|
||||
}
|
||||
128
miniprogram/pages/coupon/coupon-center/index.wxml
Normal file
128
miniprogram/pages/coupon/coupon-center/index.wxml
Normal file
@@ -0,0 +1,128 @@
|
||||
<view class="coupon-center-container">
|
||||
|
||||
<!-- 优惠券列表 -->
|
||||
<view class="coupon-list-container">
|
||||
<block wx:if="{{!loading && availableCoupons.length > 0}}">
|
||||
<view class="coupon-item" wx:for="{{availableCoupons}}" wx:key="id">
|
||||
<view class="coupon-card {{item.isReceived ? 'received-card' : ''}} {{item.remainingCount === 0 ? 'soldout-card' : ''}}">
|
||||
<!-- 状态标签 - 移除已领取标签 -->
|
||||
<view class="coupon-status-tag soldout" wx:if="{{item.remainingCount === 0}}">
|
||||
<text class="status-icon">!</text>
|
||||
<text class="status-text">已抢完</text>
|
||||
</view>
|
||||
<view class="coupon-status-tag hot" wx:elif="{{item.remainingCount <= 10 && item.remainingCount > 0}}">
|
||||
<text class="status-icon">🔥</text>
|
||||
<text class="status-text">仅剩{{item.remainingCount}}张</text>
|
||||
</view>
|
||||
|
||||
<!-- 优惠券主体 -->
|
||||
<view class="coupon-main">
|
||||
<view class="coupon-left {{item.type === 1 ? 'type-amount' : item.type === 2 ? 'type-discount' : 'type-shipping'}}">
|
||||
<!-- 装饰元素 -->
|
||||
<view class="value-decoration"></view>
|
||||
|
||||
<view class="coupon-value">
|
||||
<block wx:if="{{item.type === 1}}">
|
||||
<text class="value-symbol">¥</text>
|
||||
<text class="value-number">{{item.value / 100}}</text>
|
||||
<text class="value-unit">元</text>
|
||||
</block>
|
||||
<block wx:elif="{{item.type === 2}}">
|
||||
<text class="value-number">{{item.value / 10}}</text>
|
||||
<text class="value-unit">折</text>
|
||||
</block>
|
||||
<block wx:else>
|
||||
<text class="value-text">免邮</text>
|
||||
</block>
|
||||
</view>
|
||||
<view class="coupon-desc">{{item.desc}}</view>
|
||||
</view>
|
||||
|
||||
<view class="coupon-right">
|
||||
<view class="coupon-header">
|
||||
<view class="coupon-name">{{item.name}}</view>
|
||||
<view class="coupon-type-badge" wx:if="{{item.type === 1}}">满减券</view>
|
||||
<view class="coupon-type-badge discount" wx:elif="{{item.type === 2}}">折扣券</view>
|
||||
<view class="coupon-type-badge shipping" wx:else>包邮券</view>
|
||||
</view>
|
||||
|
||||
<view class="coupon-details">
|
||||
<view class="detail-item">
|
||||
<text class="detail-icon">⏰</text>
|
||||
<text class="detail-text">{{item.timeLimit}}</text>
|
||||
</view>
|
||||
<view class="detail-item" wx:if="{{item.totalCount > 0}}">
|
||||
<text class="detail-icon">📦</text>
|
||||
<text class="detail-text">剩余 {{item.remainingCount}} 张</text>
|
||||
</view>
|
||||
<view class="detail-item" wx:if="{{item.minAmount > 0}}">
|
||||
<text class="detail-icon">💰</text>
|
||||
<text class="detail-text">满{{item.minAmount / 100}}元可用</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 领取按钮 -->
|
||||
<view class="coupon-action">
|
||||
<view
|
||||
class="receive-btn {{item.remainingCount === 0 ? 'disabled' : ''}} {{item.isReceived ? 'received' : ''}}"
|
||||
catchtap="{{item.isReceived ? '' : 'receiveCoupon'}}"
|
||||
data-couponid="{{item.id}}"
|
||||
>
|
||||
<view class="btn-content">
|
||||
<block wx:if="{{item.isReceived}}">
|
||||
<text class="btn-icon">✓</text>
|
||||
<text class="btn-text">已领取</text>
|
||||
</block>
|
||||
<block wx:elif="{{item.remainingCount === 0}}">
|
||||
<text class="btn-icon">😔</text>
|
||||
<text class="btn-text">已抢完</text>
|
||||
</block>
|
||||
<block wx:else>
|
||||
<text class="btn-icon">🎁</text>
|
||||
<text class="btn-text">立即领取</text>
|
||||
</block>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</block>
|
||||
|
||||
<!-- 空状态 -->
|
||||
<view class="empty-state" wx:if="{{!loading && availableCoupons.length === 0}}">
|
||||
<view class="empty-animation">
|
||||
<view class="empty-icon">🎫</view>
|
||||
<view class="empty-sparkles">
|
||||
<view class="sparkle sparkle-1">✨</view>
|
||||
<view class="sparkle sparkle-2">⭐</view>
|
||||
<view class="sparkle sparkle-3">💫</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="empty-content">
|
||||
<view class="empty-text">暂无可领取的优惠券</view>
|
||||
<view class="empty-desc">精彩活动即将上线，敬请期待</view>
|
||||
<view class="empty-action">
|
||||
<view class="refresh-btn" bindtap="onRefresh">
|
||||
<text class="refresh-icon">🔄</text>
|
||||
<text class="refresh-text">刷新试试</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 加载状态 -->
|
||||
<view class="loading-state" wx:if="{{loading}}">
|
||||
<view class="loading-animation">
|
||||
<t-loading theme="circular" size="40rpx" />
|
||||
<view class="loading-dots">
|
||||
<view class="dot dot-1"></view>
|
||||
<view class="dot dot-2"></view>
|
||||
<view class="dot dot-3"></view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="loading-text">正在为您寻找最优惠券...</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
817
miniprogram/pages/coupon/coupon-center/index.wxss
Normal file
817
miniprogram/pages/coupon/coupon-center/index.wxss
Normal file
@@ -0,0 +1,817 @@
|
||||
.coupon-center-container {
|
||||
min-height: 100vh;
|
||||
background: #f5f5f5;
|
||||
}
|
||||
|
||||
/* 页面头部 */
|
||||
.page-header {
|
||||
background: linear-gradient(135deg, #ff6b6b 0%, #ff8e8e 50%, #ffa8a8 100%);
|
||||
padding: 20rpx 0 0;
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 100;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
/* 背景装饰 */
|
||||
.header-bg-decoration {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.decoration-circle {
|
||||
position: absolute;
|
||||
border-radius: 50%;
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
animation: float 6s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.circle-1 {
|
||||
width: 120rpx;
|
||||
height: 120rpx;
|
||||
top: -60rpx;
|
||||
right: 50rpx;
|
||||
animation-delay: 0s;
|
||||
}
|
||||
|
||||
.circle-2 {
|
||||
width: 80rpx;
|
||||
height: 80rpx;
|
||||
top: 100rpx;
|
||||
right: -40rpx;
|
||||
animation-delay: 2s;
|
||||
}
|
||||
|
||||
.circle-3 {
|
||||
width: 60rpx;
|
||||
height: 60rpx;
|
||||
top: 50rpx;
|
||||
left: 30rpx;
|
||||
animation-delay: 4s;
|
||||
}
|
||||
|
||||
@keyframes float {
|
||||
0%, 100% { transform: translateY(0px) rotate(0deg); }
|
||||
50% { transform: translateY(-20rpx) rotate(180deg); }
|
||||
}
|
||||
|
||||
.header-content {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 0 32rpx;
|
||||
margin-top: 20rpx;
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.header-title {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.title-main {
|
||||
font-size: 36rpx;
|
||||
font-weight: 700;
|
||||
color: #fff;
|
||||
text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.title-subtitle {
|
||||
font-size: 22rpx;
|
||||
color: rgba(255, 255, 255, 0.8);
|
||||
margin-top: 4rpx;
|
||||
}
|
||||
|
||||
.header-placeholder {
|
||||
width: 48rpx;
|
||||
}
|
||||
|
||||
/* 统计信息 */
|
||||
.header-stats {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 32rpx;
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
animation: slideInUp 0.8s ease-out 0.3s both;
|
||||
}
|
||||
|
||||
.stat-item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
flex: 1;
|
||||
transition: transform 0.3s ease;
|
||||
}
|
||||
|
||||
.stat-item:hover {
|
||||
transform: scale(1.1);
|
||||
}
|
||||
|
||||
.stat-number {
|
||||
font-size: 48rpx;
|
||||
font-weight: 700;
|
||||
color: #fff;
|
||||
text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.2);
|
||||
animation: fadeIn 1s ease-out 0.5s both;
|
||||
}
|
||||
|
||||
.stat-label {
|
||||
font-size: 24rpx;
|
||||
color: rgba(255, 255, 255, 0.8);
|
||||
margin-top: 8rpx;
|
||||
animation: fadeIn 1s ease-out 0.7s both;
|
||||
}
|
||||
|
||||
.stat-divider {
|
||||
width: 2rpx;
|
||||
height: 60rpx;
|
||||
background: rgba(255, 255, 255, 0.3);
|
||||
margin: 0 40rpx;
|
||||
}
|
||||
|
||||
/* 优惠券列表容器 */
|
||||
.coupon-list-container {
|
||||
padding: 24rpx;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 16rpx;
|
||||
}
|
||||
|
||||
/* 优惠券项 */
|
||||
.coupon-item {
|
||||
width: 100%;
|
||||
margin-bottom: 0;
|
||||
animation: slideInUp 0.6s ease-out;
|
||||
}
|
||||
|
||||
@keyframes slideInUp {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(30rpx);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes fadeIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes slideInLeft {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateX(-30rpx);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateX(0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes slideInRight {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateX(30rpx);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateX(0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes glow {
|
||||
0%, 100% {
|
||||
box-shadow: 0 0 20rpx rgba(255, 107, 107, 0.3);
|
||||
}
|
||||
50% {
|
||||
box-shadow: 0 0 40rpx rgba(255, 107, 107, 0.6);
|
||||
}
|
||||
}
|
||||
|
||||
.coupon-card {
|
||||
background: #fff;
|
||||
border-radius: 20rpx;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.12);
|
||||
position: relative;
|
||||
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
border: 1rpx solid rgba(255, 255, 255, 0.8);
|
||||
}
|
||||
|
||||
.coupon-card:active {
|
||||
transform: scale(0.98);
|
||||
box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.08);
|
||||
}
|
||||
|
||||
/* 卡片状态样式 */
|
||||
.coupon-card.received-card {
|
||||
background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
|
||||
border-color: #0ea5e9;
|
||||
}
|
||||
|
||||
.coupon-card.soldout-card {
|
||||
background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
|
||||
border-color: #cbd5e1;
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
/* 状态标签 */
|
||||
.coupon-status-tag {
|
||||
position: absolute;
|
||||
top: 12rpx;
|
||||
right: 12rpx;
|
||||
background: linear-gradient(135deg, #10b981, #059669);
|
||||
color: #fff;
|
||||
padding: 6rpx 12rpx;
|
||||
border-radius: 16rpx;
|
||||
font-size: 18rpx;
|
||||
font-weight: 600;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
z-index: 3;
|
||||
box-shadow: 0 2rpx 8rpx rgba(16, 185, 129, 0.3);
|
||||
}
|
||||
|
||||
.coupon-status-tag.soldout {
|
||||
background: linear-gradient(135deg, #ef4444, #dc2626);
|
||||
box-shadow: 0 2rpx 8rpx rgba(239, 68, 68, 0.3);
|
||||
}
|
||||
|
||||
.coupon-status-tag.hot {
|
||||
background: linear-gradient(135deg, #f59e0b, #d97706);
|
||||
box-shadow: 0 2rpx 8rpx rgba(245, 158, 11, 0.3);
|
||||
animation: pulse 2s infinite;
|
||||
}
|
||||
|
||||
@keyframes pulse {
|
||||
0%, 100% { transform: scale(1); }
|
||||
50% { transform: scale(1.05); }
|
||||
}
|
||||
|
||||
.status-icon {
|
||||
margin-right: 4rpx;
|
||||
font-size: 16rpx;
|
||||
}
|
||||
|
||||
.status-text {
|
||||
font-size: 18rpx;
|
||||
}
|
||||
|
||||
/* 优惠券主体 */
|
||||
.coupon-main {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
padding: 20rpx;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.coupon-left {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: linear-gradient(135deg, #ff6b6b, #ff8e8e);
|
||||
color: #fff;
|
||||
border-radius: 12rpx;
|
||||
padding: 20rpx 16rpx;
|
||||
margin-right: 20rpx;
|
||||
width: 160rpx;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* 不同类型的优惠券背景 */
|
||||
.coupon-left.type-amount {
|
||||
background: linear-gradient(135deg, #ff6b6b 0%, #ff8e8e 50%, #ffa8a8 100%);
|
||||
}
|
||||
|
||||
.coupon-left.type-discount {
|
||||
background: linear-gradient(135deg, #8b5cf6 0%, #a78bfa 50%, #c4b5fd 100%);
|
||||
}
|
||||
|
||||
.coupon-left.type-shipping {
|
||||
background: linear-gradient(135deg, #10b981 0%, #34d399 50%, #6ee7b7 100%);
|
||||
}
|
||||
|
||||
/* 装饰元素 */
|
||||
.value-decoration {
|
||||
position: absolute;
|
||||
top: -20rpx;
|
||||
right: -20rpx;
|
||||
width: 80rpx;
|
||||
height: 80rpx;
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
border-radius: 50%;
|
||||
animation: rotate 10s linear infinite;
|
||||
}
|
||||
|
||||
@keyframes rotate {
|
||||
from { transform: rotate(0deg); }
|
||||
to { transform: rotate(360deg); }
|
||||
}
|
||||
|
||||
.coupon-value {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
margin-bottom: 12rpx;
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.value-symbol {
|
||||
font-size: 22rpx;
|
||||
font-weight: 600;
|
||||
margin-right: 4rpx;
|
||||
}
|
||||
|
||||
.value-number {
|
||||
font-size: 44rpx;
|
||||
font-weight: 800;
|
||||
line-height: 1;
|
||||
text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.value-unit {
|
||||
font-size: 22rpx;
|
||||
font-weight: 600;
|
||||
margin-left: 6rpx;
|
||||
}
|
||||
|
||||
.value-text {
|
||||
font-size: 32rpx;
|
||||
font-weight: 800;
|
||||
text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.coupon-desc {
|
||||
font-size: 22rpx;
|
||||
opacity: 0.9;
|
||||
text-align: center;
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.coupon-right {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12rpx;
|
||||
flex: 1;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.coupon-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.coupon-name {
|
||||
font-size: 28rpx;
|
||||
font-weight: 700;
|
||||
color: #1f2937;
|
||||
flex: 1;
|
||||
margin-right: 12rpx;
|
||||
line-height: 1.3;
|
||||
}
|
||||
|
||||
.coupon-type-badge {
|
||||
background: linear-gradient(135deg, #ff6b6b, #ff8e8e);
|
||||
color: #fff;
|
||||
padding: 4rpx 8rpx;
|
||||
border-radius: 8rpx;
|
||||
font-size: 18rpx;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.coupon-type-badge.discount {
|
||||
background: linear-gradient(135deg, #8b5cf6, #a78bfa);
|
||||
}
|
||||
|
||||
.coupon-type-badge.shipping {
|
||||
background: linear-gradient(135deg, #10b981, #34d399);
|
||||
}
|
||||
|
||||
.coupon-details {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 6rpx;
|
||||
}
|
||||
|
||||
.detail-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 20rpx;
|
||||
color: #6b7280;
|
||||
}
|
||||
|
||||
.detail-icon {
|
||||
margin-right: 6rpx;
|
||||
font-size: 16rpx;
|
||||
}
|
||||
|
||||
.detail-text {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
/* 领取按钮区域 */
|
||||
.coupon-action {
|
||||
padding: 16rpx 20rpx 20rpx;
|
||||
background: linear-gradient(180deg, rgba(248, 249, 250, 0.5) 0%, rgba(248, 249, 250, 0.8) 100%);
|
||||
border-top: 1rpx solid rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
|
||||
.receive-btn {
|
||||
width: 100%;
|
||||
height: 64rpx;
|
||||
background: linear-gradient(135deg, #ff6b6b 0%, #ff8e8e 50%, #ffa8a8 100%);
|
||||
color: #fff;
|
||||
border-radius: 32rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 28rpx;
|
||||
font-weight: 700;
|
||||
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
box-shadow: 0 4rpx 16rpx rgba(255, 107, 107, 0.3);
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.receive-btn::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: -100%;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
|
||||
transition: left 0.6s ease;
|
||||
}
|
||||
|
||||
.receive-btn:active::before {
|
||||
left: 100%;
|
||||
}
|
||||
|
||||
.receive-btn.disabled {
|
||||
background: linear-gradient(135deg, #e5e7eb, #d1d5db);
|
||||
color: #9ca3af;
|
||||
box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.receive-btn.received {
|
||||
background: linear-gradient(135deg, #10b981, #34d399);
|
||||
color: #fff;
|
||||
border: 2rpx solid #059669;
|
||||
box-shadow: 0 4rpx 16rpx rgba(16, 185, 129, 0.3);
|
||||
}
|
||||
|
||||
.receive-btn:not(.disabled):active {
|
||||
transform: scale(0.96);
|
||||
box-shadow: 0 2rpx 8rpx rgba(255, 107, 107, 0.2);
|
||||
}
|
||||
|
||||
.btn-content {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 8rpx;
|
||||
}
|
||||
|
||||
.btn-icon {
|
||||
font-size: 24rpx;
|
||||
animation: bounce 2s infinite;
|
||||
}
|
||||
|
||||
@keyframes bounce {
|
||||
0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
|
||||
40% { transform: translateY(-4rpx); }
|
||||
60% { transform: translateY(-2rpx); }
|
||||
}
|
||||
|
||||
.btn-text {
|
||||
font-size: 24rpx;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
/* 空状态 */
|
||||
.empty-state {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 120rpx 32rpx;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.empty-animation {
|
||||
position: relative;
|
||||
margin-bottom: 40rpx;
|
||||
}
|
||||
|
||||
.empty-icon {
|
||||
font-size: 120rpx;
|
||||
opacity: 0.8;
|
||||
animation: float 3s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.empty-sparkles {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
.sparkle {
|
||||
position: absolute;
|
||||
font-size: 32rpx;
|
||||
animation: sparkle 2s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.sparkle-1 {
|
||||
top: 20rpx;
|
||||
right: 20rpx;
|
||||
animation-delay: 0s;
|
||||
}
|
||||
|
||||
.sparkle-2 {
|
||||
bottom: 30rpx;
|
||||
left: 10rpx;
|
||||
animation-delay: 0.7s;
|
||||
}
|
||||
|
||||
.sparkle-3 {
|
||||
top: 60rpx;
|
||||
left: -10rpx;
|
||||
animation-delay: 1.4s;
|
||||
}
|
||||
|
||||
@keyframes sparkle {
|
||||
0%, 100% {
|
||||
opacity: 0;
|
||||
transform: scale(0.5) rotate(0deg);
|
||||
}
|
||||
50% {
|
||||
opacity: 1;
|
||||
transform: scale(1) rotate(180deg);
|
||||
}
|
||||
}
|
||||
|
||||
.empty-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.empty-text {
|
||||
font-size: 32rpx;
|
||||
color: #374151;
|
||||
margin-bottom: 16rpx;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.empty-desc {
|
||||
font-size: 26rpx;
|
||||
color: #6b7280;
|
||||
margin-bottom: 32rpx;
|
||||
}
|
||||
|
||||
.empty-action {
|
||||
margin-top: 16rpx;
|
||||
}
|
||||
|
||||
.refresh-btn {
|
||||
background: linear-gradient(135deg, #ff6b6b, #ff8e8e);
|
||||
color: #fff;
|
||||
padding: 16rpx 32rpx;
|
||||
border-radius: 32rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8rpx;
|
||||
font-size: 26rpx;
|
||||
font-weight: 600;
|
||||
box-shadow: 0 4rpx 16rpx rgba(255, 107, 107, 0.3);
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.refresh-btn:active {
|
||||
transform: scale(0.95);
|
||||
box-shadow: 0 2rpx 8rpx rgba(255, 107, 107, 0.2);
|
||||
}
|
||||
|
||||
.refresh-icon {
|
||||
font-size: 24rpx;
|
||||
animation: rotate 2s linear infinite;
|
||||
}
|
||||
|
||||
.refresh-text {
|
||||
font-size: 26rpx;
|
||||
}
|
||||
|
||||
/* 加载状态 */
|
||||
.loading-state {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 120rpx 32rpx;
|
||||
}
|
||||
|
||||
.loading-animation {
|
||||
position: relative;
|
||||
margin-bottom: 32rpx;
|
||||
}
|
||||
|
||||
.loading-dots {
|
||||
display: flex;
|
||||
gap: 8rpx;
|
||||
margin-top: 16rpx;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.dot {
|
||||
width: 12rpx;
|
||||
height: 12rpx;
|
||||
border-radius: 50%;
|
||||
background: #ff6b6b;
|
||||
animation: loadingDots 1.4s ease-in-out infinite both;
|
||||
}
|
||||
|
||||
.dot-1 { animation-delay: -0.32s; }
|
||||
.dot-2 { animation-delay: -0.16s; }
|
||||
.dot-3 { animation-delay: 0s; }
|
||||
|
||||
@keyframes loadingDots {
|
||||
0%, 80%, 100% {
|
||||
transform: scale(0.8);
|
||||
opacity: 0.5;
|
||||
}
|
||||
40% {
|
||||
transform: scale(1.2);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.loading-text {
|
||||
font-size: 28rpx;
|
||||
color: #6b7280;
|
||||
font-weight: 500;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
/* 响应式适配 */
|
||||
@media (max-width: 750rpx) {
|
||||
.header {
|
||||
padding: 60rpx 24rpx 40rpx;
|
||||
}
|
||||
|
||||
.header-title {
|
||||
font-size: 40rpx;
|
||||
}
|
||||
|
||||
.header-subtitle {
|
||||
font-size: 24rpx;
|
||||
}
|
||||
|
||||
.stats-section {
|
||||
padding: 0 24rpx;
|
||||
margin-top: 24rpx;
|
||||
}
|
||||
|
||||
.stat-number {
|
||||
font-size: 32rpx;
|
||||
}
|
||||
|
||||
.stat-label {
|
||||
font-size: 22rpx;
|
||||
}
|
||||
|
||||
.coupon-list {
|
||||
padding: 24rpx;
|
||||
}
|
||||
|
||||
.coupon-card {
|
||||
margin-bottom: 24rpx;
|
||||
}
|
||||
|
||||
.coupon-value {
|
||||
font-size: 48rpx;
|
||||
}
|
||||
|
||||
.coupon-unit {
|
||||
font-size: 20rpx;
|
||||
}
|
||||
|
||||
.coupon-name {
|
||||
font-size: 28rpx;
|
||||
}
|
||||
|
||||
.coupon-desc {
|
||||
font-size: 22rpx;
|
||||
}
|
||||
|
||||
.action-btn {
|
||||
font-size: 24rpx;
|
||||
padding: 16rpx 24rpx;
|
||||
}
|
||||
|
||||
.coupon-status-tag {
|
||||
font-size: 20rpx;
|
||||
padding: 6rpx 12rpx;
|
||||
}
|
||||
|
||||
.coupon-type-badge {
|
||||
font-size: 18rpx;
|
||||
padding: 4rpx 8rpx;
|
||||
}
|
||||
}
|
||||
|
||||
/* 超小屏幕适配 */
|
||||
@media (max-width: 600rpx) {
|
||||
.header {
|
||||
padding: 50rpx 20rpx 30rpx;
|
||||
}
|
||||
|
||||
.header-title {
|
||||
font-size: 36rpx;
|
||||
}
|
||||
|
||||
.header-subtitle {
|
||||
font-size: 22rpx;
|
||||
}
|
||||
|
||||
.stats-section {
|
||||
flex-direction: column;
|
||||
gap: 16rpx;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.stat-item {
|
||||
flex-direction: row;
|
||||
gap: 12rpx;
|
||||
}
|
||||
|
||||
.coupon-list {
|
||||
padding: 20rpx;
|
||||
}
|
||||
|
||||
.coupon-card {
|
||||
padding: 24rpx;
|
||||
}
|
||||
|
||||
.coupon-left {
|
||||
min-width: 120rpx;
|
||||
}
|
||||
|
||||
.coupon-value {
|
||||
font-size: 42rpx;
|
||||
}
|
||||
|
||||
.coupon-right {
|
||||
padding-left: 20rpx;
|
||||
}
|
||||
|
||||
.coupon-name {
|
||||
font-size: 26rpx;
|
||||
}
|
||||
|
||||
.coupon-desc {
|
||||
font-size: 20rpx;
|
||||
}
|
||||
|
||||
.action-btn {
|
||||
font-size: 22rpx;
|
||||
padding: 14rpx 20rpx;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 375px) {
|
||||
.coupon-left {
|
||||
flex: 0 0 160rpx;
|
||||
padding: 20rpx 12rpx;
|
||||
}
|
||||
|
||||
.value-number {
|
||||
font-size: 40rpx;
|
||||
}
|
||||
|
||||
.coupon-name {
|
||||
font-size: 28rpx;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user