diff --git a/用户端APP/福利专区.html b/用户端APP/福利专区.html index 170a0fb..b1551bc 100644 --- a/用户端APP/福利专区.html +++ b/用户端APP/福利专区.html @@ -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 @@
积分换购
积分优惠购
+
积分订单
@@ -874,6 +1086,17 @@
下滑展示更多
+ + +
+
+ +
+ +
+
+
下滑展示更多
+
@@ -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 = '
暂无积分订单
'; + return; + } + + ordersList.innerHTML = pointsOrdersData.map(order => ` +
+
+
订单号:${order.settlementOrderNo}
+
${order.status}
+
+
+
+
${order.paymentTime}
+
配送费 ¥${order.deliveryFee.toFixed(2)} | 打包费 ¥${order.packageFee.toFixed(2)} | 调度费 ¥${order.dispatchFee.toFixed(2)}
+
+
¥${order.totalFee.toFixed(2)}
+
+
+ +
+
+ ${order.storeOrders.map(store => ` +
+
+
${store.storeName}
+ +
+
+ ${store.items.map(item => ` +
+
${item.productEmoji}
+
+
${item.productName}
+
+ 数量: ${item.productQuantity} + ${item.pointsType} +
+
+
+ ${item.customerPayment > 0 ? '¥' + item.customerPayment.toFixed(2) : ''} +
${item.pointsUsed}积分
+
+
+ `).join('')} +
+
+ `).join('')} +
+
+ `).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切换功能