1995 lines
71 KiB
HTML
1995 lines
71 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="zh-CN">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>用户福利中心</title>
|
||
<style>
|
||
* {
|
||
margin: 0;
|
||
padding: 0;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
body {
|
||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', sans-serif;
|
||
background: linear-gradient(180deg, #ff6b35 0%, #f7931e 50%, #f5f5f5 50%);
|
||
min-height: 100vh;
|
||
}
|
||
|
||
/* 状态栏 */
|
||
.status-bar {
|
||
background: #ff6b35;
|
||
color: white;
|
||
padding: 8px 20px;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
font-size: 16px;
|
||
font-weight: bold;
|
||
}
|
||
|
||
.status-icons {
|
||
display: flex;
|
||
gap: 8px;
|
||
font-size: 14px;
|
||
}
|
||
|
||
/* 头部区域 */
|
||
.header {
|
||
background: linear-gradient(180deg, #ff6b35 0%, #f7931e 100%);
|
||
padding: 15px 20px 25px;
|
||
}
|
||
|
||
.page-title {
|
||
color: white;
|
||
font-size: 20px;
|
||
font-weight: bold;
|
||
text-align: center;
|
||
margin-bottom: 15px;
|
||
}
|
||
|
||
.back-btn {
|
||
position: absolute;
|
||
left: 20px;
|
||
top: 45px;
|
||
color: white;
|
||
font-size: 18px;
|
||
cursor: pointer;
|
||
}
|
||
|
||
/* 积分余额 */
|
||
.points-balance {
|
||
background: rgba(255, 255, 255, 0.2);
|
||
border-radius: 15px;
|
||
padding: 15px 20px;
|
||
margin-bottom: 20px;
|
||
color: white;
|
||
text-align: center;
|
||
}
|
||
|
||
.points-amount {
|
||
font-size: 28px;
|
||
font-weight: bold;
|
||
margin-bottom: 5px;
|
||
}
|
||
|
||
.points-label {
|
||
font-size: 14px;
|
||
opacity: 0.9;
|
||
}
|
||
|
||
/* 主要内容区域 */
|
||
.main-content {
|
||
background: #f5f5f5;
|
||
border-radius: 20px 20px 0 0;
|
||
margin-top: -15px;
|
||
padding: 20px;
|
||
min-height: calc(100vh - 200px);
|
||
}
|
||
|
||
/* 专区标签 */
|
||
.section-tabs {
|
||
display: flex;
|
||
justify-content: center;
|
||
gap: 20px;
|
||
margin-bottom: 20px;
|
||
background: white;
|
||
border-radius: 15px;
|
||
padding: 5px;
|
||
}
|
||
|
||
.section-tab {
|
||
flex: 1;
|
||
text-align: center;
|
||
padding: 12px 0;
|
||
border-radius: 10px;
|
||
font-size: 14px;
|
||
font-weight: 500;
|
||
cursor: pointer;
|
||
transition: all 0.3s ease;
|
||
}
|
||
|
||
.section-tab.active {
|
||
background: #ff6b35;
|
||
color: white;
|
||
}
|
||
|
||
.section-tab:not(.active) {
|
||
color: #666;
|
||
}
|
||
|
||
/* 专区内容 */
|
||
.section-content {
|
||
display: none;
|
||
}
|
||
|
||
.section-content.active {
|
||
display: block;
|
||
}
|
||
|
||
/* 积分专区tabs */
|
||
.points-tabs {
|
||
display: flex;
|
||
justify-content: center;
|
||
gap: 20px;
|
||
margin-bottom: 20px;
|
||
background: white;
|
||
border-radius: 15px;
|
||
padding: 5px;
|
||
}
|
||
|
||
.points-tab {
|
||
flex: 1;
|
||
text-align: center;
|
||
padding: 12px 0;
|
||
border-radius: 10px;
|
||
font-size: 14px;
|
||
font-weight: 500;
|
||
cursor: pointer;
|
||
transition: all 0.3s ease;
|
||
}
|
||
|
||
.points-tab.active {
|
||
background: #ff6b35;
|
||
color: white;
|
||
}
|
||
|
||
.points-tab:not(.active) {
|
||
color: #666;
|
||
}
|
||
|
||
/* 积分内容区域 */
|
||
.points-content {
|
||
display: none;
|
||
}
|
||
|
||
.points-content.active {
|
||
display: block;
|
||
}
|
||
|
||
/* 下拉提示 */
|
||
.load-more-tip {
|
||
text-align: center;
|
||
color: #999;
|
||
font-size: 12px;
|
||
margin-top: 20px;
|
||
padding: 10px;
|
||
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;
|
||
border-radius: 15px;
|
||
padding: 20px;
|
||
margin-bottom: 15px;
|
||
}
|
||
|
||
.points-header {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
margin-bottom: 15px;
|
||
}
|
||
|
||
.points-title {
|
||
font-size: 16px;
|
||
font-weight: bold;
|
||
color: #333;
|
||
}
|
||
|
||
.points-more {
|
||
font-size: 12px;
|
||
color: #ff6b35;
|
||
cursor: pointer;
|
||
}
|
||
|
||
/* 积分商品网格 */
|
||
.points-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(2, 1fr);
|
||
gap: 15px;
|
||
}
|
||
|
||
.points-item {
|
||
background: #f8f9fa;
|
||
border-radius: 12px;
|
||
padding: 15px;
|
||
text-align: center;
|
||
position: relative;
|
||
}
|
||
|
||
.points-item-image {
|
||
width: 60px;
|
||
height: 60px;
|
||
border-radius: 50%;
|
||
margin: 0 auto 10px;
|
||
background: linear-gradient(135deg, #ff6b35, #f7931e);
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-size: 24px;
|
||
}
|
||
|
||
.points-item-name {
|
||
font-size: 13px;
|
||
color: #333;
|
||
margin-bottom: 8px;
|
||
line-height: 1.3;
|
||
}
|
||
|
||
.points-item-points {
|
||
font-size: 14px;
|
||
color: #ff6b35;
|
||
font-weight: bold;
|
||
margin-bottom: 5px;
|
||
}
|
||
|
||
.points-item-original {
|
||
font-size: 12px;
|
||
color: #999;
|
||
text-decoration: line-through;
|
||
}
|
||
|
||
.points-item-store {
|
||
font-size: 11px;
|
||
color: #666;
|
||
margin-bottom: 10px;
|
||
}
|
||
|
||
.exchange-btn {
|
||
background: #ff6b35;
|
||
color: white;
|
||
border: none;
|
||
border-radius: 15px;
|
||
padding: 6px 12px;
|
||
font-size: 12px;
|
||
cursor: pointer;
|
||
}
|
||
|
||
/* 秒杀专区样式 */
|
||
.seckill-section {
|
||
background: white;
|
||
border-radius: 15px;
|
||
padding: 20px;
|
||
margin-bottom: 15px;
|
||
}
|
||
|
||
.seckill-header {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
margin-bottom: 15px;
|
||
}
|
||
|
||
.seckill-title {
|
||
font-size: 16px;
|
||
font-weight: bold;
|
||
color: #333;
|
||
}
|
||
|
||
.seckill-timer {
|
||
background: #ff4444;
|
||
color: white;
|
||
padding: 4px 8px;
|
||
border-radius: 8px;
|
||
font-size: 12px;
|
||
}
|
||
|
||
/* 秒杀时间段tabs容器 */
|
||
.seckill-tabs-container {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 15px;
|
||
margin-bottom: 20px;
|
||
}
|
||
|
||
/* 刷新按钮样式 */
|
||
.refresh-btn {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
background: #ff4444;
|
||
color: white;
|
||
border: none;
|
||
border-radius: 12px;
|
||
padding: 10px;
|
||
font-size: 10px;
|
||
cursor: pointer;
|
||
transition: all 0.3s ease;
|
||
min-width: 50px;
|
||
box-shadow: 0 2px 4px rgba(255, 68, 68, 0.3);
|
||
}
|
||
|
||
.refresh-btn:hover {
|
||
background: #e63939;
|
||
transform: translateY(-1px);
|
||
box-shadow: 0 4px 8px rgba(255, 68, 68, 0.4);
|
||
}
|
||
|
||
.refresh-btn:active {
|
||
transform: translateY(0);
|
||
}
|
||
|
||
.refresh-btn span:first-child {
|
||
font-size: 18px;
|
||
margin-bottom: 2px;
|
||
}
|
||
|
||
/* 秒杀时间段tabs */
|
||
.seckill-tabs {
|
||
display: flex;
|
||
justify-content: center;
|
||
flex: 1;
|
||
gap: 20px;
|
||
background: white;
|
||
border-radius: 15px;
|
||
padding: 5px;
|
||
}
|
||
|
||
.seckill-tab {
|
||
flex: 1;
|
||
text-align: center;
|
||
padding: 12px 0;
|
||
border-radius: 10px;
|
||
font-size: 14px;
|
||
font-weight: 500;
|
||
cursor: pointer;
|
||
transition: all 0.3s ease;
|
||
position: relative;
|
||
}
|
||
|
||
.seckill-tab.active {
|
||
background: #ff4444;
|
||
color: white;
|
||
}
|
||
|
||
.seckill-tab:not(.active) {
|
||
color: #999;
|
||
}
|
||
|
||
/* 秒杀时间段内容 */
|
||
.seckill-content {
|
||
display: none;
|
||
}
|
||
|
||
.seckill-content.active {
|
||
display: block;
|
||
}
|
||
|
||
/* 秒杀商品 */
|
||
.seckill-item {
|
||
background: #fff5f5;
|
||
border: 1px solid #ffcccc;
|
||
border-radius: 12px;
|
||
padding: 15px;
|
||
margin-bottom: 15px;
|
||
position: relative;
|
||
}
|
||
|
||
.seckill-badge {
|
||
position: absolute;
|
||
top: 10px;
|
||
right: 10px;
|
||
background: #ff4444;
|
||
color: white;
|
||
padding: 2px 8px;
|
||
border-radius: 10px;
|
||
font-size: 10px;
|
||
font-weight: bold;
|
||
}
|
||
|
||
.seckill-item-header {
|
||
display: flex;
|
||
gap: 15px;
|
||
margin-bottom: 15px;
|
||
}
|
||
|
||
.seckill-item-image {
|
||
width: 80px;
|
||
height: 80px;
|
||
border-radius: 8px;
|
||
background: linear-gradient(135deg, #ff6b35, #f7931e);
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-size: 30px;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.seckill-item-info {
|
||
flex: 1;
|
||
}
|
||
|
||
.seckill-item-name {
|
||
font-size: 14px;
|
||
color: #333;
|
||
margin-bottom: 5px;
|
||
font-weight: 500;
|
||
}
|
||
|
||
.seckill-item-spec {
|
||
font-size: 12px;
|
||
color: #666;
|
||
margin-bottom: 5px;
|
||
}
|
||
|
||
.seckill-item-store {
|
||
font-size: 11px;
|
||
color: #999;
|
||
margin-bottom: 8px;
|
||
}
|
||
|
||
.seckill-price-section {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
margin-bottom: 10px;
|
||
}
|
||
|
||
.seckill-price {
|
||
color: #ff4444;
|
||
font-size: 16px;
|
||
font-weight: bold;
|
||
}
|
||
|
||
.seckill-original-price {
|
||
font-size: 12px;
|
||
color: #999;
|
||
text-decoration: line-through;
|
||
}
|
||
|
||
.seckill-progress {
|
||
background: #f0f0f0;
|
||
border-radius: 10px;
|
||
height: 8px;
|
||
overflow: hidden;
|
||
margin-bottom: 5px;
|
||
}
|
||
|
||
.seckill-progress-bar {
|
||
background: #ff4444;
|
||
height: 100%;
|
||
border-radius: 10px;
|
||
}
|
||
|
||
.seckill-stock {
|
||
font-size: 11px;
|
||
color: #666;
|
||
margin-bottom: 10px;
|
||
}
|
||
|
||
.seckill-timing {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
font-size: 11px;
|
||
color: #666;
|
||
margin-bottom: 10px;
|
||
}
|
||
|
||
.seckill-btn {
|
||
background: #ff4444;
|
||
color: white;
|
||
border: none;
|
||
border-radius: 15px;
|
||
padding: 8px 20px;
|
||
font-size: 12px;
|
||
cursor: pointer;
|
||
width: 100%;
|
||
}
|
||
|
||
/* 预定专区样式 */
|
||
.reservation-section {
|
||
background: white;
|
||
border-radius: 15px;
|
||
padding: 20px;
|
||
margin-bottom: 15px;
|
||
}
|
||
|
||
.reservation-header {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
margin-bottom: 15px;
|
||
}
|
||
|
||
.reservation-title {
|
||
font-size: 16px;
|
||
font-weight: bold;
|
||
color: #333;
|
||
}
|
||
|
||
.reservation-explain {
|
||
background: #e8f4fd;
|
||
border-radius: 10px;
|
||
padding: 15px;
|
||
margin-bottom: 20px;
|
||
font-size: 13px;
|
||
color: #333;
|
||
line-height: 1.5;
|
||
}
|
||
|
||
.reservation-explain-title {
|
||
font-weight: bold;
|
||
margin-bottom: 5px;
|
||
color: #2196f3;
|
||
}
|
||
|
||
/* 预定商品 */
|
||
.reservation-item {
|
||
background: #f0f8ff;
|
||
border: 1px solid #b3d9ff;
|
||
border-radius: 12px;
|
||
padding: 15px;
|
||
margin-bottom: 15px;
|
||
position: relative;
|
||
}
|
||
|
||
.reservation-badge {
|
||
position: absolute;
|
||
top: 10px;
|
||
right: 10px;
|
||
background: #2196f3;
|
||
color: white;
|
||
padding: 2px 8px;
|
||
border-radius: 10px;
|
||
font-size: 10px;
|
||
font-weight: bold;
|
||
}
|
||
|
||
.reservation-item-header {
|
||
display: flex;
|
||
gap: 15px;
|
||
margin-bottom: 15px;
|
||
}
|
||
|
||
.reservation-item-image {
|
||
width: 80px;
|
||
height: 80px;
|
||
border-radius: 8px;
|
||
background: linear-gradient(135deg, #2196f3, #64b5f6);
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-size: 30px;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.reservation-item-info {
|
||
flex: 1;
|
||
}
|
||
|
||
.reservation-item-name {
|
||
font-size: 14px;
|
||
color: #333;
|
||
margin-bottom: 5px;
|
||
font-weight: 500;
|
||
}
|
||
|
||
.reservation-item-spec {
|
||
font-size: 12px;
|
||
color: #666;
|
||
margin-bottom: 5px;
|
||
}
|
||
|
||
.reservation-item-store {
|
||
font-size: 11px;
|
||
color: #999;
|
||
margin-bottom: 8px;
|
||
}
|
||
|
||
.reservation-pricing {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
margin-bottom: 10px;
|
||
}
|
||
|
||
.reservation-price-section {
|
||
flex: 1;
|
||
}
|
||
|
||
.reservation-price {
|
||
color: #2196f3;
|
||
font-size: 16px;
|
||
font-weight: bold;
|
||
}
|
||
|
||
.reservation-original-price {
|
||
font-size: 12px;
|
||
color: #999;
|
||
text-decoration: line-through;
|
||
}
|
||
|
||
.reservation-discount {
|
||
background: #e3f2fd;
|
||
color: #1976d2;
|
||
padding: 2px 6px;
|
||
border-radius: 6px;
|
||
font-size: 11px;
|
||
font-weight: bold;
|
||
}
|
||
|
||
.reservation-schedule {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
font-size: 11px;
|
||
color: #666;
|
||
margin-bottom: 10px;
|
||
}
|
||
|
||
.reservation-schedule-item {
|
||
text-align: center;
|
||
flex: 1;
|
||
}
|
||
|
||
.reservation-schedule-label {
|
||
font-weight: bold;
|
||
margin-bottom: 2px;
|
||
}
|
||
|
||
.reservation-btn {
|
||
background: #2196f3;
|
||
color: white;
|
||
border: none;
|
||
border-radius: 15px;
|
||
padding: 8px 20px;
|
||
font-size: 12px;
|
||
cursor: pointer;
|
||
width: 100%;
|
||
}
|
||
|
||
/* 底部导航 */
|
||
.bottom-nav {
|
||
background: white;
|
||
display: flex;
|
||
justify-content: space-around;
|
||
padding: 10px 0 25px;
|
||
border-top: 1px solid #eee;
|
||
margin-top: 20px;
|
||
}
|
||
|
||
.nav-item {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
color: #999;
|
||
font-size: 12px;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.nav-item.active {
|
||
color: #ff6b35;
|
||
}
|
||
|
||
.nav-icon {
|
||
width: 25px;
|
||
height: 25px;
|
||
margin-bottom: 5px;
|
||
border-radius: 50%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-size: 18px;
|
||
}
|
||
|
||
/* 悬浮购物车图标 */
|
||
.floating-cart {
|
||
position: fixed;
|
||
bottom: 20px;
|
||
right: 20px;
|
||
width: 60px;
|
||
height: 60px;
|
||
background: #ff6b35;
|
||
border-radius: 50%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-size: 28px;
|
||
color: white;
|
||
box-shadow: 0 4px 12px rgba(255, 107, 53, 0.4);
|
||
cursor: pointer;
|
||
z-index: 1000;
|
||
transition: all 0.3s ease;
|
||
}
|
||
|
||
.floating-cart:hover {
|
||
transform: scale(1.1);
|
||
box-shadow: 0 6px 20px rgba(255, 107, 53, 0.6);
|
||
}
|
||
|
||
.floating-cart.bounce {
|
||
animation: bounce 0.6s ease;
|
||
}
|
||
|
||
.cart-badge {
|
||
position: absolute;
|
||
top: -5px;
|
||
right: -5px;
|
||
background: #ff4444;
|
||
color: white;
|
||
width: 24px;
|
||
height: 24px;
|
||
border-radius: 50%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-size: 12px;
|
||
font-weight: bold;
|
||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
|
||
}
|
||
|
||
.cart-badge.hidden {
|
||
display: none;
|
||
}
|
||
|
||
@keyframes bounce {
|
||
0%, 20%, 50%, 80%, 100% {
|
||
transform: translateY(0);
|
||
}
|
||
40% {
|
||
transform: translateY(-10px);
|
||
}
|
||
60% {
|
||
transform: translateY(-5px);
|
||
}
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<!-- 状态栏 -->
|
||
<div class="status-bar">
|
||
<div>09:15</div>
|
||
<div class="status-icons">
|
||
<span>🔵</span>
|
||
<span>📶</span>
|
||
<span>📶</span>
|
||
<span>🔋 52%</span>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 头部区域 -->
|
||
<div class="header">
|
||
<div class="back-btn">←</div>
|
||
<div class="page-title">福利专区</div>
|
||
|
||
</div>
|
||
|
||
<!-- 主要内容区域 -->
|
||
<div class="main-content">
|
||
<!-- 专区标签 -->
|
||
<div class="section-tabs">
|
||
<div class="section-tab active" onclick="switchTab('points')">积分专区</div>
|
||
<div class="section-tab" onclick="switchTab('seckill')">秒杀专区</div>
|
||
<div class="section-tab" onclick="switchTab('reservation')">预定专区</div>
|
||
</div>
|
||
|
||
<!-- 积分专区 -->
|
||
<div id="points" class="section-content active">
|
||
<!-- 积分专区tabs -->
|
||
<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>
|
||
|
||
<!-- 积分换购内容 -->
|
||
<div id="exchange" class="points-content active">
|
||
<div class="points-grid">
|
||
<div class="points-item">
|
||
<div class="points-item-image">🥛</div>
|
||
<div class="points-item-name">有机纯牛奶 250ml</div>
|
||
<div class="points-item-points">500积分</div>
|
||
<div class="points-item-original">原价 ¥8</div>
|
||
<div class="points-item-store">华清市场/华清超市</div>
|
||
<button class="exchange-btn" onclick="addToPointsCart(this)">添加到积分购物车</button>
|
||
</div>
|
||
<div class="points-item">
|
||
<div class="points-item-image">🍎</div>
|
||
<div class="points-item-name">红富士苹果 约500g</div>
|
||
<div class="points-item-points">800积分</div>
|
||
<div class="points-item-original">原价 ¥12</div>
|
||
<div class="points-item-store">新鲜市场/新鲜果园</div>
|
||
<button class="exchange-btn" onclick="addToPointsCart(this)">添加到积分购物车</button>
|
||
</div>
|
||
<div class="points-item">
|
||
<div class="points-item-image">🥖</div>
|
||
<div class="points-item-name">法式面包 300g</div>
|
||
<div class="points-item-points">600积分</div>
|
||
<div class="points-item-original">原价 ¥10</div>
|
||
<div class="points-item-store">烘焙市场/烘焙坊</div>
|
||
<button class="exchange-btn" onclick="addToPointsCart(this)">添加到积分购物车</button>
|
||
</div>
|
||
<div class="points-item">
|
||
<div class="points-item-image">🍵</div>
|
||
<div class="points-item-name">龙井茶 50g</div>
|
||
<div class="points-item-points">1200积分</div>
|
||
<div class="points-item-original">原价 ¥25</div>
|
||
<div class="points-item-store">茶叶市场/茶叶专营店</div>
|
||
<button class="exchange-btn" onclick="addToPointsCart(this)">添加到积分购物车</button>
|
||
</div>
|
||
</div>
|
||
<div class="load-more-tip">下滑展示更多</div>
|
||
</div>
|
||
|
||
<!-- 积分优惠购内容 -->
|
||
<div id="discount" class="points-content">
|
||
<div class="points-grid">
|
||
<div class="points-item">
|
||
<div class="points-item-image">🥩</div>
|
||
<div class="points-item-name">优质牛肉 500g</div>
|
||
<div class="points-item-points">300积分+¥45</div>
|
||
<div class="points-item-original">原价 ¥68</div>
|
||
<div class="points-item-store">华清市场/华清肉店</div>
|
||
<button class="exchange-btn" onclick="addToPointsCart(this)">添加到积分购物车</button>
|
||
</div>
|
||
<div class="points-item">
|
||
<div class="points-item-image">🍯</div>
|
||
<div class="points-item-name">纯天然蜂蜜 500g</div>
|
||
<div class="points-item-points">200积分+¥35</div>
|
||
<div class="points-item-original">原价 ¥48</div>
|
||
<div class="points-item-store">农家市场/农家特产</div>
|
||
<button class="exchange-btn" onclick="addToPointsCart(this)">添加到积分购物车</button>
|
||
</div>
|
||
<div class="points-item">
|
||
<div class="points-item-image">🧀</div>
|
||
<div class="points-item-name">进口奶酪 200g</div>
|
||
<div class="points-item-points">500积分+¥25</div>
|
||
<div class="points-item-original">原价 ¥45</div>
|
||
<div class="points-item-store">进口市场/进口食品店</div>
|
||
<button class="exchange-btn" onclick="addToPointsCart(this)">添加到积分购物车</button>
|
||
</div>
|
||
<div class="points-item">
|
||
<div class="points-item-image">🍫</div>
|
||
<div class="points-item-name">比利时巧克力 100g</div>
|
||
<div class="points-item-points">400积分+¥18</div>
|
||
<div class="points-item-original">原价 ¥32</div>
|
||
<div class="points-item-store">甜品市场/甜品屋</div>
|
||
<button class="exchange-btn" onclick="addToPointsCart(this)">添加到积分购物车</button>
|
||
</div>
|
||
</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>
|
||
|
||
<!-- 秒杀专区 -->
|
||
<div id="seckill" class="section-content">
|
||
<!-- 秒杀时间段tabs -->
|
||
<div class="seckill-tabs-container">
|
||
<button class="refresh-btn" onclick="refreshSeckill()">
|
||
<span>🔄</span>
|
||
<span>刷新</span>
|
||
</button>
|
||
<div class="seckill-tabs">
|
||
<div class="seckill-tab active" onclick="switchSeckillTab('10-12')">10:00-12:00</div>
|
||
<div class="seckill-tab" onclick="switchSeckillTab('14-16')">14:00-16:00</div>
|
||
<div class="seckill-tab" onclick="switchSeckillTab('16-18')">16:00-18:00</div>
|
||
<div class="seckill-tab" onclick="switchSeckillTab('20-22')">20:00-22:00</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 10:00-12:00时间段 -->
|
||
<div id="10-12" class="seckill-content active">
|
||
<div class="seckill-section">
|
||
<div class="seckill-header">
|
||
<div class="seckill-title">10:00-12:00 秒杀专场</div>
|
||
<div class="seckill-timer">距离结束 01:25:30</div>
|
||
</div>
|
||
|
||
<!-- 秒杀商品1 -->
|
||
<div class="seckill-item">
|
||
<div class="seckill-badge">正在秒杀</div>
|
||
<div class="seckill-item-header">
|
||
<div class="seckill-item-image">🍓</div>
|
||
<div class="seckill-item-info">
|
||
<div class="seckill-item-name">新鲜草莓 约500g</div>
|
||
<div class="seckill-item-spec">规格：500g/份</div>
|
||
<div class="seckill-item-store">四季水果店(春申菜市场)</div>
|
||
<div class="seckill-price-section">
|
||
<div>
|
||
<div class="seckill-price">¥9.9</div>
|
||
<div class="seckill-original-price">原价 ¥28</div>
|
||
</div>
|
||
<div class="seckill-discount">3.5折</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="seckill-progress">
|
||
<div class="seckill-progress-bar" style="width: 75%;"></div>
|
||
</div>
|
||
<div class="seckill-stock">已抢75件 剩余25件</div>
|
||
<div class="seckill-timing">
|
||
<div>开始时间：10:00</div>
|
||
<div>结束时间：12:00</div>
|
||
<div>总数量：100件</div>
|
||
</div>
|
||
<button class="seckill-btn">立即秒杀</button>
|
||
</div>
|
||
|
||
<!-- 秒杀商品2 -->
|
||
<div class="seckill-item">
|
||
<div class="seckill-badge">正在秒杀</div>
|
||
<div class="seckill-item-header">
|
||
<div class="seckill-item-image">🥑</div>
|
||
<div class="seckill-item-info">
|
||
<div class="seckill-item-name">新鲜牛油果 2个装</div>
|
||
<div class="seckill-item-spec">规格：2个/份</div>
|
||
<div class="seckill-item-store">精品果园(华径菜场)</div>
|
||
<div class="seckill-price-section">
|
||
<div>
|
||
<div class="seckill-price">¥12.9</div>
|
||
<div class="seckill-original-price">原价 ¥32</div>
|
||
</div>
|
||
<div class="seckill-discount">4.0折</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="seckill-progress">
|
||
<div class="seckill-progress-bar" style="width: 60%;"></div>
|
||
</div>
|
||
<div class="seckill-stock">已抢30件 剩余20件</div>
|
||
<div class="seckill-timing">
|
||
<div>开始时间：10:00</div>
|
||
<div>结束时间：12:00</div>
|
||
<div>总数量：50件</div>
|
||
</div>
|
||
<button class="seckill-btn">立即秒杀</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 14:00-16:00时间段 -->
|
||
<div id="14-16" class="seckill-content">
|
||
<div class="seckill-section">
|
||
<div class="seckill-header">
|
||
<div class="seckill-title">14:00-16:00 秒杀专场</div>
|
||
<div class="seckill-timer">即将开始 03:25:30</div>
|
||
</div>
|
||
|
||
<!-- 秒杀商品1 -->
|
||
<div class="seckill-item">
|
||
<div class="seckill-badge">即将开抢</div>
|
||
<div class="seckill-item-header">
|
||
<div class="seckill-item-image">🥩</div>
|
||
<div class="seckill-item-info">
|
||
<div class="seckill-item-name">精品牛排 200g</div>
|
||
<div class="seckill-item-spec">规格：200g/份</div>
|
||
<div class="seckill-item-store">华清肉店(全季菜市场)</div>
|
||
<div class="seckill-price-section">
|
||
<div>
|
||
<div class="seckill-price">¥29.9</div>
|
||
<div class="seckill-original-price">原价 ¥68</div>
|
||
</div>
|
||
<div class="seckill-discount">4.4折</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="seckill-progress">
|
||
<div class="seckill-progress-bar" style="width: 0%;"></div>
|
||
</div>
|
||
<div class="seckill-stock">总数量：50件</div>
|
||
<div class="seckill-timing">
|
||
<div>开始时间：14:00</div>
|
||
<div>结束时间：16:00</div>
|
||
<div>总数量：50件</div>
|
||
</div>
|
||
<button class="seckill-btn" disabled style="background: #ccc; cursor: not-allowed;">即将开抢</button>
|
||
</div>
|
||
|
||
<!-- 秒杀商品2 -->
|
||
<div class="seckill-item">
|
||
<div class="seckill-badge">即将开抢</div>
|
||
<div class="seckill-item-header">
|
||
<div class="seckill-item-image">🐟</div>
|
||
<div class="seckill-item-info">
|
||
<div class="seckill-item-name">挪威三文鱼 300g</div>
|
||
<div class="seckill-item-spec">规格：300g/份</div>
|
||
<div class="seckill-item-store">海鲜专营店(华径菜场)</div>
|
||
<div class="seckill-price-section">
|
||
<div>
|
||
<div class="seckill-price">¥39.9</div>
|
||
<div class="seckill-original-price">原价 ¥89</div>
|
||
</div>
|
||
<div class="seckill-discount">4.5折</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="seckill-progress">
|
||
<div class="seckill-progress-bar" style="width: 0%;"></div>
|
||
</div>
|
||
<div class="seckill-stock">总数量：30件</div>
|
||
<div class="seckill-timing">
|
||
<div>开始时间：14:00</div>
|
||
<div>结束时间：16:00</div>
|
||
<div>总数量：30件</div>
|
||
</div>
|
||
<button class="seckill-btn" disabled style="background: #ccc; cursor: not-allowed;">即将开抢</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 16:00-18:00时间段 -->
|
||
<div id="16-18" class="seckill-content">
|
||
<div class="seckill-section">
|
||
<div class="seckill-header">
|
||
<div class="seckill-title">16:00-18:00 秒杀专场</div>
|
||
<div class="seckill-timer">即将开始 05:25:30</div>
|
||
</div>
|
||
|
||
<!-- 秒杀商品1 -->
|
||
<div class="seckill-item">
|
||
<div class="seckill-badge">即将开抢</div>
|
||
<div class="seckill-item-header">
|
||
<div class="seckill-item-image">🍯</div>
|
||
<div class="seckill-item-info">
|
||
<div class="seckill-item-name">天然百花蜜 500g</div>
|
||
<div class="seckill-item-spec">规格：500g/瓶</div>
|
||
<div class="seckill-item-store">农家特产店(华径菜场)</div>
|
||
<div class="seckill-price-section">
|
||
<div>
|
||
<div class="seckill-price">¥19.9</div>
|
||
<div class="seckill-original-price">原价 ¥48</div>
|
||
</div>
|
||
<div class="seckill-discount">4.1折</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="seckill-progress">
|
||
<div class="seckill-progress-bar" style="width: 0%;"></div>
|
||
</div>
|
||
<div class="seckill-stock">总数量：40件</div>
|
||
<div class="seckill-timing">
|
||
<div>开始时间：16:00</div>
|
||
<div>结束时间：18:00</div>
|
||
<div>总数量：40件</div>
|
||
</div>
|
||
<button class="seckill-btn" style="background: #ccc; cursor: not-allowed;">即将开抢</button>
|
||
</div>
|
||
|
||
<!-- 秒杀商品2 -->
|
||
<div class="seckill-item">
|
||
<div class="seckill-badge">即将开抢</div>
|
||
<div class="seckill-item-header">
|
||
<div class="seckill-item-image">🥜</div>
|
||
<div class="seckill-item-info">
|
||
<div class="seckill-item-name">精选芹菜 500g</div>
|
||
<div class="seckill-item-spec">规格：500g/份</div>
|
||
<div class="seckill-item-store">新鲜蔬菜店(春申菜市场)</div>
|
||
<div class="seckill-price-section">
|
||
<div>
|
||
<div class="seckill-price">¥5.9</div>
|
||
<div class="seckill-original-price">原价 ¥12</div>
|
||
</div>
|
||
<div class="seckill-discount">4.9折</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="seckill-progress">
|
||
<div class="seckill-progress-bar" style="width: 0%;"></div>
|
||
</div>
|
||
<div class="seckill-stock">总数量：80件</div>
|
||
<div class="seckill-timing">
|
||
<div>开始时间：16:00</div>
|
||
<div>结束时间：18:00</div>
|
||
<div>总数量：80件</div>
|
||
</div>
|
||
<button class="seckill-btn" style="background: #ccc; cursor: not-allowed;">即将开抢</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 20:00-22:00时间段 -->
|
||
<div id="20-22" class="seckill-content">
|
||
<div class="seckill-section">
|
||
<div class="seckill-header">
|
||
<div class="seckill-title">20:00-22:00 秒杀专场</div>
|
||
<div class="seckill-timer">即将开始 09:25:30</div>
|
||
</div>
|
||
|
||
<!-- 秒杀商品1 -->
|
||
<div class="seckill-item">
|
||
<div class="seckill-badge">即将开抢</div>
|
||
<div class="seckill-item-header">
|
||
<div class="seckill-item-image">🧈</div>
|
||
<div class="seckill-item-info">
|
||
<div class="seckill-item-name">进口黄油 200g</div>
|
||
<div class="seckill-item-spec">规格：200g/块</div>
|
||
<div class="seckill-item-store">进口食品店(全季菜市场)</div>
|
||
<div class="seckill-price-section">
|
||
<div>
|
||
<div class="seckill-price">¥15.9</div>
|
||
<div class="seckill-original-price">原价 ¥35</div>
|
||
</div>
|
||
<div class="seckill-discount">4.5折</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="seckill-progress">
|
||
<div class="seckill-progress-bar" style="width: 0%;"></div>
|
||
</div>
|
||
<div class="seckill-stock">总数量：60件</div>
|
||
<div class="seckill-timing">
|
||
<div>开始时间：20:00</div>
|
||
<div>结束时间：22:00</div>
|
||
<div>总数量：60件</div>
|
||
</div>
|
||
<button class="seckill-btn" style="background: #ccc; cursor: not-allowed;">即将开抢</button>
|
||
</div>
|
||
|
||
<!-- 秒杀商品2 -->
|
||
<div class="seckill-item">
|
||
<div class="seckill-badge">即将开抢</div>
|
||
<div class="seckill-item-header">
|
||
<div class="seckill-item-image">🍇</div>
|
||
<div class="seckill-item-info">
|
||
<div class="seckill-item-name">新疆葡萄 1kg</div>
|
||
<div class="seckill-item-spec">规格：1kg/份</div>
|
||
<div class="seckill-item-store">精品果园(华径菜场)</div>
|
||
<div class="seckill-price-section">
|
||
<div>
|
||
<div class="seckill-price">¥22.9</div>
|
||
<div class="seckill-original-price">原价 ¥45</div>
|
||
</div>
|
||
<div class="seckill-discount">5.1折</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="seckill-progress">
|
||
<div class="seckill-progress-bar" style="width: 0%;"></div>
|
||
</div>
|
||
<div class="seckill-stock">总数量：70件</div>
|
||
<div class="seckill-timing">
|
||
<div>开始时间：20:00</div>
|
||
<div>结束时间：22:00</div>
|
||
<div>总数量：70件</div>
|
||
</div>
|
||
<button class="seckill-btn" style="background: #ccc; cursor: not-allowed;">即将开抢</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 预定专区 -->
|
||
<div id="reservation" class="section-content">
|
||
<div class="reservation-section">
|
||
<div class="reservation-header">
|
||
<div class="reservation-title">新品预定</div>
|
||
<div class="points-more">查看更多 ></div>
|
||
</div>
|
||
|
||
<!-- 预定说明 -->
|
||
<div class="reservation-explain">
|
||
<div class="reservation-explain-title">预定说明</div>
|
||
<div>商品预计某日开始上架销售，此时提前预定，可以享受折扣价格。预定成功后，商品上架时将优先发货。</div>
|
||
</div>
|
||
|
||
<!-- 预定商品1 -->
|
||
<div class="reservation-item">
|
||
<div class="reservation-badge">新品预定</div>
|
||
<div class="reservation-item-header">
|
||
<div class="reservation-item-image">🦀</div>
|
||
<div class="reservation-item-info">
|
||
<div class="reservation-item-name">阳澄湖大闸蟹 公4两 母3两</div>
|
||
<div class="reservation-item-spec">规格：公4两母3两/对</div>
|
||
<div class="reservation-item-store">水产专营店(春申菜市场)</div>
|
||
<div class="reservation-pricing">
|
||
<div class="reservation-price-section">
|
||
<div class="reservation-price">预定价 ¥168</div>
|
||
<div class="reservation-original-price">上架价 ¥258</div>
|
||
</div>
|
||
<div class="reservation-discount">6.5折</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="reservation-schedule">
|
||
<div class="reservation-schedule-item">
|
||
<div class="reservation-schedule-label">开始上架价格</div>
|
||
<div>¥258</div>
|
||
</div>
|
||
<div class="reservation-schedule-item">
|
||
<div class="reservation-schedule-label">预定上架时间</div>
|
||
<div>9月15日</div>
|
||
</div>
|
||
<div class="reservation-schedule-item">
|
||
<div class="reservation-schedule-label">上架销售价格</div>
|
||
<div>¥258</div>
|
||
</div>
|
||
<div class="reservation-schedule-item">
|
||
<div class="reservation-schedule-label">预定销售价格</div>
|
||
<div>¥168</div>
|
||
</div>
|
||
</div>
|
||
<button class="reservation-btn">立即预定</button>
|
||
</div>
|
||
|
||
<!-- 预定商品2 -->
|
||
<div class="reservation-item">
|
||
<div class="reservation-badge">新品预定</div>
|
||
<div class="reservation-item-header">
|
||
<div class="reservation-item-image">🍐</div>
|
||
<div class="reservation-item-info">
|
||
<div class="reservation-item-name">新疆香梨 约2kg</div>
|
||
<div class="reservation-item-spec">规格：2kg/箱</div>
|
||
<div class="reservation-item-store">新鲜果园(华径菜场)</div>
|
||
<div class="reservation-pricing">
|
||
<div class="reservation-price-section">
|
||
<div class="reservation-price">预定价 ¥29.9</div>
|
||
<div class="reservation-original-price">上架价 ¥45</div>
|
||
</div>
|
||
<div class="reservation-discount">6.6折</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="reservation-schedule">
|
||
<div class="reservation-schedule-item">
|
||
<div class="reservation-schedule-label">开始上架价格</div>
|
||
<div>¥45</div>
|
||
</div>
|
||
<div class="reservation-schedule-item">
|
||
<div class="reservation-schedule-label">预定上架时间</div>
|
||
<div>9月10日</div>
|
||
</div>
|
||
<div class="reservation-schedule-item">
|
||
<div class="reservation-schedule-label">上架销售价格</div>
|
||
<div>¥45</div>
|
||
</div>
|
||
<div class="reservation-schedule-item">
|
||
<div class="reservation-schedule-label">预定销售价格</div>
|
||
<div>¥29.9</div>
|
||
</div>
|
||
</div>
|
||
<button class="reservation-btn">立即预定</button>
|
||
</div>
|
||
|
||
<!-- 预定商品3 -->
|
||
<div class="reservation-item">
|
||
<div class="reservation-badge">新品预定</div>
|
||
<div class="reservation-item-header">
|
||
<div class="reservation-item-image">🧈</div>
|
||
<div class="reservation-item-info">
|
||
<div class="reservation-item-name">进口黄油 200g</div>
|
||
<div class="reservation-item-spec">规格：200g/块</div>
|
||
<div class="reservation-item-store">进口食品店(全季菜市场)</div>
|
||
<div class="reservation-pricing">
|
||
<div class="reservation-price-section">
|
||
<div class="reservation-price">预定价 ¥18.8</div>
|
||
<div class="reservation-original-price">上架价 ¥32</div>
|
||
</div>
|
||
<div class="reservation-discount">5.9折</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="reservation-schedule">
|
||
<div class="reservation-schedule-item">
|
||
<div class="reservation-schedule-label">开始上架价格</div>
|
||
<div>¥32</div>
|
||
</div>
|
||
<div class="reservation-schedule-item">
|
||
<div class="reservation-schedule-label">预定上架时间</div>
|
||
<div>9月8日</div>
|
||
</div>
|
||
<div class="reservation-schedule-item">
|
||
<div class="reservation-schedule-label">上架销售价格</div>
|
||
<div>¥32</div>
|
||
</div>
|
||
<div class="reservation-schedule-item">
|
||
<div class="reservation-schedule-label">预定销售价格</div>
|
||
<div>¥18.8</div>
|
||
</div>
|
||
</div>
|
||
<button class="reservation-btn">立即预定</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 底部导航 -->
|
||
<div class="bottom-nav">
|
||
<div class="nav-item" onclick="goToPage('home')">
|
||
<div class="nav-icon">🏠</div>
|
||
<span>首页</span>
|
||
</div>
|
||
<div class="nav-item" onclick="goToPage('message')">
|
||
<div class="nav-icon">💬</div>
|
||
<span>消息</span>
|
||
</div>
|
||
<div class="nav-item" onclick="goToPage('cart')">
|
||
<div class="nav-icon">🛒</div>
|
||
<span>购物车</span>
|
||
</div>
|
||
<div class="nav-item active" onclick="goToPage('profile')">
|
||
<div class="nav-icon">👤</div>
|
||
<span>我的</span>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 悬浮购物车图标 -->
|
||
<div class="floating-cart" id="floatingCart" onclick="goToPointsCart()">
|
||
<div class="cart-badge hidden" id="cartBadge">0</div>
|
||
🛒
|
||
</div>
|
||
|
||
<script>
|
||
// 积分购物车功能
|
||
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) {
|
||
// 隐藏所有内容
|
||
const contents = document.querySelectorAll('.section-content');
|
||
contents.forEach(content => {
|
||
content.classList.remove('active');
|
||
});
|
||
|
||
// 移除所有标签的激活状态
|
||
const tabs = document.querySelectorAll('.section-tab');
|
||
tabs.forEach(tab => {
|
||
tab.classList.remove('active');
|
||
});
|
||
|
||
// 显示选中的内容
|
||
document.getElementById(tabName).classList.add('active');
|
||
|
||
// 激活选中的标签
|
||
event.target.classList.add('active');
|
||
|
||
// 只在积分专区显示购物车
|
||
const floatingCart = document.getElementById('floatingCart');
|
||
if (tabName === 'points') {
|
||
floatingCart.style.display = 'flex';
|
||
} else {
|
||
floatingCart.style.display = 'none';
|
||
}
|
||
}
|
||
|
||
// 积分专区tab切换功能
|
||
function switchPointsTab(tabName) {
|
||
// 隐藏所有积分内容
|
||
const contents = document.querySelectorAll('.points-content');
|
||
contents.forEach(content => {
|
||
content.classList.remove('active');
|
||
});
|
||
|
||
// 移除所有积分标签的激活状态
|
||
const tabs = document.querySelectorAll('.points-tab');
|
||
tabs.forEach(tab => {
|
||
tab.classList.remove('active');
|
||
});
|
||
|
||
// 显示选中的积分内容
|
||
document.getElementById(tabName).classList.add('active');
|
||
|
||
// 激活选中的积分标签
|
||
event.target.classList.add('active');
|
||
|
||
// 如果切换到积分订单tab，渲染订单数据
|
||
if (tabName === 'orders') {
|
||
renderPointsOrders();
|
||
}
|
||
|
||
// 积分订单tab不显示购物车按钮
|
||
const floatingCart = document.getElementById('floatingCart');
|
||
if (tabName === 'orders') {
|
||
floatingCart.style.display = 'none';
|
||
} else {
|
||
floatingCart.style.display = 'flex';
|
||
}
|
||
}
|
||
|
||
// 渲染积分订单数据
|
||
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切换功能
|
||
function switchSeckillTab(tabName) {
|
||
// 隐藏所有秒杀内容
|
||
const contents = document.querySelectorAll('.seckill-content');
|
||
contents.forEach(content => {
|
||
content.classList.remove('active');
|
||
});
|
||
|
||
// 移除所有秒杀标签的激活状态
|
||
const tabs = document.querySelectorAll('.seckill-tab');
|
||
tabs.forEach(tab => {
|
||
tab.classList.remove('active');
|
||
});
|
||
|
||
// 显示选中的秒杀内容
|
||
document.getElementById(tabName).classList.add('active');
|
||
|
||
// 激活选中的秒杀标签
|
||
event.target.classList.add('active');
|
||
}
|
||
|
||
// 页面跳转功能
|
||
function goToPage(page) {
|
||
switch(page) {
|
||
case 'home':
|
||
window.location.href = '电商首页.html';
|
||
break;
|
||
case 'message':
|
||
// 跳转到消息页面
|
||
break;
|
||
case 'cart':
|
||
// 跳转到购物车页面
|
||
break;
|
||
case 'profile':
|
||
// 跳转到个人中心页面
|
||
break;
|
||
}
|
||
}
|
||
|
||
// 返回按钮
|
||
document.querySelector('.back-btn').addEventListener('click', function() {
|
||
window.location.href = '电商首页.html';
|
||
});
|
||
|
||
// 页面加载时初始化积分购物车显示状态
|
||
document.addEventListener('DOMContentLoaded', function() {
|
||
// 页面加载时默认在积分专区，显示购物车
|
||
const floatingCart = document.getElementById('floatingCart');
|
||
floatingCart.style.display = 'flex';
|
||
});
|
||
|
||
function addToPointsCart(button) {
|
||
// 获取商品名称
|
||
const itemElement = button.closest('.points-item');
|
||
const itemName = itemElement.querySelector('.points-item-name').textContent;
|
||
|
||
// 增加购物车数量
|
||
pointsCartCount++;
|
||
|
||
// 更新购物车徽章
|
||
updateCartBadge();
|
||
|
||
// 触发购物车动效
|
||
const cartIcon = document.getElementById('floatingCart');
|
||
cartIcon.classList.add('bounce');
|
||
|
||
// 移除动效类
|
||
setTimeout(() => {
|
||
cartIcon.classList.remove('bounce');
|
||
}, 600);
|
||
|
||
// 显示添加成功提示
|
||
showAddToCartSuccess(itemName);
|
||
}
|
||
|
||
function updateCartBadge() {
|
||
const badge = document.getElementById('cartBadge');
|
||
badge.textContent = pointsCartCount;
|
||
|
||
if (pointsCartCount > 0) {
|
||
badge.classList.remove('hidden');
|
||
} else {
|
||
badge.classList.add('hidden');
|
||
}
|
||
}
|
||
|
||
function showAddToCartSuccess(itemName) {
|
||
// 创建临时提示元素
|
||
const toast = document.createElement('div');
|
||
toast.style.cssText = `
|
||
position: fixed;
|
||
top: 50%;
|
||
left: 50%;
|
||
transform: translate(-50%, -50%);
|
||
background: rgba(0, 0, 0, 0.8);
|
||
color: white;
|
||
padding: 12px 24px;
|
||
border-radius: 25px;
|
||
font-size: 14px;
|
||
z-index: 2000;
|
||
opacity: 0;
|
||
transition: opacity 0.3s ease;
|
||
`;
|
||
toast.textContent = `${itemName} 已添加到积分购物车`;
|
||
|
||
document.body.appendChild(toast);
|
||
|
||
// 显示提示
|
||
setTimeout(() => {
|
||
toast.style.opacity = '1';
|
||
}, 100);
|
||
|
||
// 3秒后移除提示
|
||
setTimeout(() => {
|
||
toast.style.opacity = '0';
|
||
setTimeout(() => {
|
||
document.body.removeChild(toast);
|
||
}, 300);
|
||
}, 3000);
|
||
}
|
||
|
||
function goToPointsCart() {
|
||
alert('跳转到积分购物车页面');
|
||
}
|
||
|
||
// 秒杀按钮
|
||
document.querySelectorAll('.seckill-btn').forEach(btn => {
|
||
btn.addEventListener('click', function() {
|
||
alert('跳转到秒杀确认页');
|
||
});
|
||
});
|
||
|
||
// 秒杀刷新功能
|
||
function refreshSeckill() {
|
||
const refreshBtn = document.querySelector('.refresh-btn');
|
||
const refreshIcon = refreshBtn.querySelector('span:first-child');
|
||
|
||
// 添加旋转动画
|
||
refreshIcon.style.transition = 'transform 1s ease-in-out';
|
||
refreshIcon.style.transform = 'rotate(360deg)';
|
||
|
||
// 模拟刷新数据
|
||
refreshBtn.disabled = true;
|
||
refreshBtn.style.opacity = '0.7';
|
||
|
||
setTimeout(() => {
|
||
// 重置按钮状态
|
||
refreshBtn.disabled = false;
|
||
refreshBtn.style.opacity = '1';
|
||
refreshIcon.style.transform = 'rotate(0deg)';
|
||
|
||
// 显示刷新完成提示
|
||
showRefreshSuccess();
|
||
}, 1000);
|
||
}
|
||
|
||
function showRefreshSuccess() {
|
||
// 创建临时提示元素
|
||
const toast = document.createElement('div');
|
||
toast.style.cssText = `
|
||
position: fixed;
|
||
top: 50%;
|
||
left: 50%;
|
||
transform: translate(-50%, -50%);
|
||
background: rgba(0, 0, 0, 0.8);
|
||
color: white;
|
||
padding: 12px 24px;
|
||
border-radius: 25px;
|
||
font-size: 14px;
|
||
z-index: 2000;
|
||
opacity: 0;
|
||
transition: opacity 0.3s ease;
|
||
`;
|
||
toast.textContent = '秒杀数据已刷新';
|
||
|
||
document.body.appendChild(toast);
|
||
|
||
// 显示提示
|
||
setTimeout(() => {
|
||
toast.style.opacity = '1';
|
||
}, 100);
|
||
|
||
// 2秒后移除提示
|
||
setTimeout(() => {
|
||
toast.style.opacity = '0';
|
||
setTimeout(() => {
|
||
document.body.removeChild(toast);
|
||
}, 300);
|
||
}, 2000);
|
||
}
|
||
</script>
|
||
</body>
|
||
</html>
|