linbin
/
dm-design
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

综述: 新增积分订单功能模块 

- 在福利专区页面新增积分订单tab页面，支持查看积分换购和积分优惠购订单详情
- 新增积分订单样式设计，包含订单状态标签、费用明细、商品详情等展示组件
- 实现订单详情展开收起功能，支持查看订单下店铺及商品的详细信息
- 添加模拟订单数据，包含已完成、待备货、待取货等不同状态的订单示例
- 优化积分专区tab切换逻辑，支持积分订单页面的渲染和交互
This commit is contained in:
linbin 2025-09-02 14:58:18 +08:00
parent 1390fd21a0
commit acaea8fd8d
1 changed files with 408 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

408
用户端APP/福利专区.html
View File

@ -179,6 +179,217 @@
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 {
background: white;
@ -795,6 +1006,7 @@
<div class="points-tabs">
<div class="points-tab active" onclick="switchPointsTab('exchange')">积分换购</div>
<div class="points-tab" onclick="switchPointsTab('discount')">积分优惠购</div>
<div class="points-tab" onclick="switchPointsTab('orders')">积分订单</div>
</div>
<!-- 积分换购内容 -->
@ -874,6 +1086,17 @@
</div>
<div class="load-more-tip">下滑展示更多</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>
<!-- 秒杀专区 -->
@ -1337,6 +1560,97 @@
// 积分购物车功能
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) {
// 隐藏所有内容
@ -1385,6 +1699,100 @@
// 激活选中的积分标签
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切换功能