综述: 新增积分订单功能模块
- 在福利专区页面新增积分订单tab页面，支持查看积分换购和积分优惠购订单详情 - 新增积分订单样式设计，包含订单状态标签、费用明细、商品详情等展示组件 - 实现订单详情展开收起功能，支持查看订单下店铺及商品的详细信息 - 添加模拟订单数据，包含已完成、待备货、待取货等不同状态的订单示例 - 优化积分专区tab切换逻辑，支持积分订单页面的渲染和交互
This commit is contained in:
parent
1390fd21a0
commit
acaea8fd8d
408
用户端APP/福利专区.html
408
用户端APP/福利专区.html
|
|
@ -179,6 +179,217 @@
|
||||||
opacity: 0.7;
|
opacity: 0.7;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* 积分订单样式 */
|
||||||
|
.points-orders-container {
|
||||||
|
background: white;
|
||||||
|
border-radius: 15px;
|
||||||
|
padding: 20px;
|
||||||
|
margin-bottom: 15px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.points-order-item {
|
||||||
|
background: #f8f9fa;
|
||||||
|
border-radius: 12px;
|
||||||
|
padding: 15px;
|
||||||
|
margin-bottom: 15px;
|
||||||
|
border: 1px solid #e9ecef;
|
||||||
|
}
|
||||||
|
|
||||||
|
.points-order-header {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
margin-bottom: 15px;
|
||||||
|
padding-bottom: 10px;
|
||||||
|
border-bottom: 1px solid #e9ecef;
|
||||||
|
}
|
||||||
|
|
||||||
|
.points-order-no {
|
||||||
|
font-size: 14px;
|
||||||
|
font-weight: bold;
|
||||||
|
color: #333;
|
||||||
|
}
|
||||||
|
|
||||||
|
.points-order-status {
|
||||||
|
font-size: 12px;
|
||||||
|
padding: 4px 8px;
|
||||||
|
border-radius: 12px;
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
|
||||||
|
.points-order-status.completed {
|
||||||
|
background: #f6ffed;
|
||||||
|
color: #52c41a;
|
||||||
|
}
|
||||||
|
|
||||||
|
.points-order-status.pending {
|
||||||
|
background: #fff7e6;
|
||||||
|
color: #fa8c16;
|
||||||
|
}
|
||||||
|
|
||||||
|
.points-order-status.processing {
|
||||||
|
background: #e6f7ff;
|
||||||
|
color: #1890ff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.points-order-info {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.points-order-detail {
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.points-order-time {
|
||||||
|
font-size: 12px;
|
||||||
|
color: #666;
|
||||||
|
margin-bottom: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.points-order-fees {
|
||||||
|
font-size: 12px;
|
||||||
|
color: #666;
|
||||||
|
}
|
||||||
|
|
||||||
|
.points-order-total {
|
||||||
|
text-align: right;
|
||||||
|
color: #ff6b35;
|
||||||
|
font-size: 16px;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
.points-order-expand {
|
||||||
|
text-align: center;
|
||||||
|
margin-top: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.expand-toggle {
|
||||||
|
background: none;
|
||||||
|
border: 1px solid #ff6b35;
|
||||||
|
color: #ff6b35;
|
||||||
|
padding: 5px 15px;
|
||||||
|
border-radius: 15px;
|
||||||
|
font-size: 12px;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: all 0.3s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.expand-toggle:hover {
|
||||||
|
background: #ff6b35;
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.points-order-stores {
|
||||||
|
display: none;
|
||||||
|
margin-top: 15px;
|
||||||
|
padding-top: 15px;
|
||||||
|
border-top: 1px solid #e9ecef;
|
||||||
|
}
|
||||||
|
|
||||||
|
.points-order-stores.expanded {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.points-store-item {
|
||||||
|
background: white;
|
||||||
|
border-radius: 8px;
|
||||||
|
padding: 12px;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
border: 1px solid #e9ecef;
|
||||||
|
}
|
||||||
|
|
||||||
|
.points-store-header {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
font-size: 13px;
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
|
||||||
|
.points-store-name {
|
||||||
|
color: #333;
|
||||||
|
}
|
||||||
|
|
||||||
|
.points-product-list {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.points-product-list.expanded {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.points-product-item {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
padding: 8px 0;
|
||||||
|
border-bottom: 1px solid #f0f0f0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.points-product-item:last-child {
|
||||||
|
border-bottom: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.points-product-image {
|
||||||
|
width: 40px;
|
||||||
|
height: 40px;
|
||||||
|
border-radius: 6px;
|
||||||
|
background: linear-gradient(135deg, #ff6b35, #f7931e);
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
font-size: 18px;
|
||||||
|
margin-right: 10px;
|
||||||
|
flex-shrink: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.points-product-info {
|
||||||
|
flex: 1;
|
||||||
|
min-width: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.points-product-name {
|
||||||
|
font-size: 12px;
|
||||||
|
color: #333;
|
||||||
|
margin-bottom: 2px;
|
||||||
|
white-space: nowrap;
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
}
|
||||||
|
|
||||||
|
.points-product-specs {
|
||||||
|
font-size: 11px;
|
||||||
|
color: #666;
|
||||||
|
display: flex;
|
||||||
|
gap: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.points-product-price {
|
||||||
|
text-align: right;
|
||||||
|
font-size: 12px;
|
||||||
|
color: #ff6b35;
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
|
||||||
|
.points-product-points {
|
||||||
|
font-size: 11px;
|
||||||
|
color: #666;
|
||||||
|
margin-top: 2px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.store-expand-btn {
|
||||||
|
background: none;
|
||||||
|
border: 1px solid #ddd;
|
||||||
|
color: #666;
|
||||||
|
padding: 2px 8px;
|
||||||
|
border-radius: 10px;
|
||||||
|
font-size: 11px;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
/* 积分专区样式 */
|
/* 积分专区样式 */
|
||||||
.points-section {
|
.points-section {
|
||||||
background: white;
|
background: white;
|
||||||
|
|
@ -795,6 +1006,7 @@
|
||||||
<div class="points-tabs">
|
<div class="points-tabs">
|
||||||
<div class="points-tab active" onclick="switchPointsTab('exchange')">积分换购</div>
|
<div class="points-tab active" onclick="switchPointsTab('exchange')">积分换购</div>
|
||||||
<div class="points-tab" onclick="switchPointsTab('discount')">积分优惠购</div>
|
<div class="points-tab" onclick="switchPointsTab('discount')">积分优惠购</div>
|
||||||
|
<div class="points-tab" onclick="switchPointsTab('orders')">积分订单</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- 积分换购内容 -->
|
<!-- 积分换购内容 -->
|
||||||
|
|
@ -874,6 +1086,17 @@
|
||||||
</div>
|
</div>
|
||||||
<div class="load-more-tip">下滑展示更多</div>
|
<div class="load-more-tip">下滑展示更多</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<!-- 积分订单内容 -->
|
||||||
|
<div id="orders" class="points-content">
|
||||||
|
<div class="points-orders-container">
|
||||||
|
<!-- 积分订单列表 -->
|
||||||
|
<div class="points-orders-list" id="pointsOrdersList">
|
||||||
|
<!-- 订单数据将通过JavaScript动态生成 -->
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="load-more-tip">下滑展示更多</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- 秒杀专区 -->
|
<!-- 秒杀专区 -->
|
||||||
|
|
@ -1337,6 +1560,97 @@
|
||||||
// 积分购物车功能
|
// 积分购物车功能
|
||||||
let pointsCartCount = 0;
|
let pointsCartCount = 0;
|
||||||
|
|
||||||
|
// 模拟积分订单数据
|
||||||
|
const pointsOrdersData = [
|
||||||
|
{
|
||||||
|
settlementOrderNo: 'SU2024010001',
|
||||||
|
status: '已完成',
|
||||||
|
statusClass: 'completed',
|
||||||
|
deliveryFee: 8.00,
|
||||||
|
packageFee: 2.00,
|
||||||
|
dispatchFee: 3.00,
|
||||||
|
totalFee: 13.00,
|
||||||
|
paymentTime: '2024-01-15 14:30:22',
|
||||||
|
storeOrders: [
|
||||||
|
{
|
||||||
|
storeOrderNo: 'SO2024010001',
|
||||||
|
storeName: '华清超市',
|
||||||
|
items: [
|
||||||
|
{
|
||||||
|
productOrderNo: 'PO2024010001',
|
||||||
|
productName: '有机纯牛奶 250ml',
|
||||||
|
productEmoji: '🥛',
|
||||||
|
originalPrice: 8.00,
|
||||||
|
productQuantity: 1,
|
||||||
|
pointsUsed: 500,
|
||||||
|
customerPayment: 0.00,
|
||||||
|
pointsType: '积分换购',
|
||||||
|
status: '已完成'
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
settlementOrderNo: 'SU2024010002',
|
||||||
|
status: '待备货',
|
||||||
|
statusClass: 'pending',
|
||||||
|
deliveryFee: 6.00,
|
||||||
|
packageFee: 1.50,
|
||||||
|
dispatchFee: 2.00,
|
||||||
|
totalFee: 9.50,
|
||||||
|
paymentTime: '2024-01-15 15:45:10',
|
||||||
|
storeOrders: [
|
||||||
|
{
|
||||||
|
storeOrderNo: 'SO2024010002',
|
||||||
|
storeName: '新鲜果园',
|
||||||
|
items: [
|
||||||
|
{
|
||||||
|
productOrderNo: 'PO2024010002',
|
||||||
|
productName: '红富士苹果 约500g',
|
||||||
|
productEmoji: '🍎',
|
||||||
|
originalPrice: 12.00,
|
||||||
|
productQuantity: 1,
|
||||||
|
pointsUsed: 800,
|
||||||
|
customerPayment: 0.00,
|
||||||
|
pointsType: '积分换购',
|
||||||
|
status: '待备货'
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
settlementOrderNo: 'SU2024010003',
|
||||||
|
status: '待取货',
|
||||||
|
statusClass: 'processing',
|
||||||
|
deliveryFee: 10.00,
|
||||||
|
packageFee: 3.00,
|
||||||
|
dispatchFee: 4.00,
|
||||||
|
totalFee: 17.00,
|
||||||
|
paymentTime: '2024-01-15 16:20:35',
|
||||||
|
storeOrders: [
|
||||||
|
{
|
||||||
|
storeOrderNo: 'SO2024010003',
|
||||||
|
storeName: '农家特产',
|
||||||
|
items: [
|
||||||
|
{
|
||||||
|
productOrderNo: 'PO2024010003',
|
||||||
|
productName: '纯天然蜂蜜 500g',
|
||||||
|
productEmoji: '🍯',
|
||||||
|
originalPrice: 48.00,
|
||||||
|
productQuantity: 1,
|
||||||
|
pointsUsed: 200,
|
||||||
|
customerPayment: 35.00,
|
||||||
|
pointsType: '积分优惠购',
|
||||||
|
status: '待取货'
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
];
|
||||||
|
|
||||||
// 页面切换功能
|
// 页面切换功能
|
||||||
function switchTab(tabName) {
|
function switchTab(tabName) {
|
||||||
// 隐藏所有内容
|
// 隐藏所有内容
|
||||||
|
|
@ -1385,6 +1699,100 @@
|
||||||
|
|
||||||
// 激活选中的积分标签
|
// 激活选中的积分标签
|
||||||
event.target.classList.add('active');
|
event.target.classList.add('active');
|
||||||
|
|
||||||
|
// 如果切换到积分订单tab，渲染订单数据
|
||||||
|
if (tabName === 'orders') {
|
||||||
|
renderPointsOrders();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 渲染积分订单数据
|
||||||
|
function renderPointsOrders() {
|
||||||
|
const ordersList = document.getElementById('pointsOrdersList');
|
||||||
|
|
||||||
|
if (pointsOrdersData.length === 0) {
|
||||||
|
ordersList.innerHTML = '<div style="text-align: center; padding: 40px; color: #999;">暂无积分订单</div>';
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
ordersList.innerHTML = pointsOrdersData.map(order => `
|
||||||
|
<div class="points-order-item">
|
||||||
|
<div class="points-order-header">
|
||||||
|
<div class="points-order-no">订单号：${order.settlementOrderNo}</div>
|
||||||
|
<div class="points-order-status ${order.statusClass}">${order.status}</div>
|
||||||
|
</div>
|
||||||
|
<div class="points-order-info">
|
||||||
|
<div class="points-order-detail">
|
||||||
|
<div class="points-order-time">${order.paymentTime}</div>
|
||||||
|
<div class="points-order-fees">配送费 ¥${order.deliveryFee.toFixed(2)} | 打包费 ¥${order.packageFee.toFixed(2)} | 调度费 ¥${order.dispatchFee.toFixed(2)}</div>
|
||||||
|
</div>
|
||||||
|
<div class="points-order-total">¥${order.totalFee.toFixed(2)}</div>
|
||||||
|
</div>
|
||||||
|
<div class="points-order-expand">
|
||||||
|
<button class="expand-toggle" onclick="toggleOrderDetails('${order.settlementOrderNo}')">
|
||||||
|
查看详情
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<div class="points-order-stores" id="stores-${order.settlementOrderNo}">
|
||||||
|
${order.storeOrders.map(store => `
|
||||||
|
<div class="points-store-item">
|
||||||
|
<div class="points-store-header">
|
||||||
|
<div class="points-store-name">${store.storeName}</div>
|
||||||
|
<button class="store-expand-btn" onclick="toggleStoreProducts('${order.settlementOrderNo}', '${store.storeOrderNo}')">
|
||||||
|
商品详情
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<div class="points-product-list" id="products-${order.settlementOrderNo}-${store.storeOrderNo}">
|
||||||
|
${store.items.map(item => `
|
||||||
|
<div class="points-product-item">
|
||||||
|
<div class="points-product-image">${item.productEmoji}</div>
|
||||||
|
<div class="points-product-info">
|
||||||
|
<div class="points-product-name">${item.productName}</div>
|
||||||
|
<div class="points-product-specs">
|
||||||
|
<span>数量: ${item.productQuantity}</span>
|
||||||
|
<span>${item.pointsType}</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="points-product-price">
|
||||||
|
${item.customerPayment > 0 ? '¥' + item.customerPayment.toFixed(2) : ''}
|
||||||
|
<div class="points-product-points">${item.pointsUsed}积分</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
`).join('')}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
`).join('')}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
`).join('');
|
||||||
|
}
|
||||||
|
|
||||||
|
// 切换订单详情显示
|
||||||
|
function toggleOrderDetails(orderNo) {
|
||||||
|
const storesContainer = document.getElementById(`stores-${orderNo}`);
|
||||||
|
const button = event.target;
|
||||||
|
|
||||||
|
if (storesContainer.classList.contains('expanded')) {
|
||||||
|
storesContainer.classList.remove('expanded');
|
||||||
|
button.textContent = '查看详情';
|
||||||
|
} else {
|
||||||
|
storesContainer.classList.add('expanded');
|
||||||
|
button.textContent = '收起详情';
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 切换店铺商品详情显示
|
||||||
|
function toggleStoreProducts(orderNo, storeOrderNo) {
|
||||||
|
const productsList = document.getElementById(`products-${orderNo}-${storeOrderNo}`);
|
||||||
|
const button = event.target;
|
||||||
|
|
||||||
|
if (productsList.classList.contains('expanded')) {
|
||||||
|
productsList.classList.remove('expanded');
|
||||||
|
button.textContent = '商品详情';
|
||||||
|
} else {
|
||||||
|
productsList.classList.add('expanded');
|
||||||
|
button.textContent = '收起详情';
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// 秒杀时间段tab切换功能
|
// 秒杀时间段tab切换功能
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue