sqxp/docs/原型图/小程序/配送员历史任务.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>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vant@3/lib/index.css" />
    <style>
        * { margin: 0; padding: 0; box-sizing: border-box; }
        body { font-family: -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Helvetica Neue', Arial, sans-serif; background: #f5f5f5; color: #333; }
        .phone-container { max-width: 414px; margin: 20px auto; background: #fff; border-radius: 40px; overflow: hidden; box-shadow: 0 10px 40px rgba(0,0,0,0.15); min-height: 850px; }
        
        /* 顶部导航 */
        .header { padding: 16px 20px; background: linear-gradient(135deg, #ee0a24 0%, #ff976a 100%); display: flex; align-items: center; justify-content: space-between; }
        .header-back { color: #fff; font-size: 20px; background: none; border: none; }
        .header-title { color: #fff; font-size: 18px; font-weight: 600; }
        
        /* Tab切换 */
        .tab-bar { display: flex; background: #fff; padding: 0 16px; border-bottom: 1px solid #eee; }
        .tab-item { flex: 1; padding: 14px 0; text-align: center; font-size: 14px; color: #666; position: relative; }
        .tab-item.active { color: #ee0a24; font-weight: 600; }
        .tab-item.active::after { content: ''; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: 40px; height: 3px; background: #ee0a24; border-radius: 2px; }
        
        /* 统计卡片 */
        .stat-card { background: #fff; margin: 12px; border-radius: 12px; padding: 20px; display: flex; justify-content: space-around; text-align: center; }
        .stat-item { }
        .stat-num { font-size: 28px; font-weight: 700; color: #ee0a24; }
        .stat-num.success { color: #07c160; }
        .stat-num.info { color: #1989fa; }
        .stat-label { font-size: 12px; color: #999; margin-top: 4px; }
        
        /* 日期分组 */
        .date-group { margin-bottom: 12px; }
        .date-header { padding: 8px 16px; font-size: 13px; color: #999; background: #f5f5f5; }
        
        /* 任务卡片 */
        .task-card { background: #fff; margin: 0 12px 12px 12px; border-radius: 12px; padding: 16px; }
        .task-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
        .task-no { font-size: 14px; font-weight: 600; }
        .status-tag { padding: 4px 10px; border-radius: 4px; font-size: 12px; }
        .status-tag.success { background: #f0f9eb; color: #07c160; }
        .status-tag.cancelled { background: #f4f4f5; color: #999; }
        
        .task-info { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; }
        .task-row { display: flex; align-items: flex-start; font-size: 13px; color: #666; gap: 8px; }
        .task-row .icon { min-width: 18px; }
        
        .task-items { background: #f8f9fa; border-radius: 8px; padding: 12px; margin-bottom: 12px; }
        .task-items-title { font-size: 12px; color: #999; margin-bottom: 8px; }
        .task-items-list { font-size: 13px; color: #333; line-height: 1.6; }
        
        .task-footer { display: flex; justify-content: space-between; align-items: center; padding-top: 12px; border-top: 1px solid #f5f5f5; }
        .task-time { font-size: 12px; color: #999; }
        .task-amount { font-size: 16px; font-weight: 600; color: #ee0a24; }
        
        /* 空状态 */
        .empty-state { text-align: center; padding: 80px 20px; }
        .empty-icon { font-size: 64px; color: #ddd; margin-bottom: 16px; }
        .empty-text { font-size: 14px; color: #999; margin-bottom: 16px; }
        .empty-btn { background: linear-gradient(135deg, #ee0a24 0%, #ff976a 100%); color: #fff; padding: 12px 32px; border-radius: 24px; border: none; font-size: 14px; }
        
        /* 原型导航 */
        .prototype-nav { position: fixed; top: 20px; right: 20px; background: #fff; border-radius: 12px; padding: 16px; box-shadow: 0 4px 16px rgba(0,0,0,0.1); z-index: 100; }
        .prototype-nav h4 { font-size: 13px; color: #999; margin-bottom: 12px; }
        .prototype-nav a { display: block; padding: 8px 12px; color: #333; text-decoration: none; font-size: 13px; border-radius: 6px; margin-bottom: 4px; }
        .prototype-nav a:hover, .prototype-nav a.active { background: #fef0f0; color: #ee0a24; }
    </style>
</head>
<body>
    <!-- 原型导航 -->
    <div class="prototype-nav">
        <h4>页面导航</h4>
        <a href="#" class="active">配送员-历史任务</a>
    </div>

    <div class="phone-container">
        <!-- 顶部导航 -->
        <div class="header">
            <button class="header-back">&#8249;</button>
            <span class="header-title">历史任务</span>
            <span style="width:40px;"></span>
        </div>
        
        <!-- Tab切换 -->
        <div class="tab-bar">
            <div class="tab-item active">已完成</div>
            <div class="tab-item">已取消</div>
        </div>
        
        <!-- 统计卡片 -->
        <div class="stat-card">
            <div class="stat-item">
                <div class="stat-num success">156</div>
                <div class="stat-label">本月完成</div>
            </div>
            <div class="stat-item">
                <div class="stat-num">12</div>
                <div class="stat-label">本月取消</div>
            </div>
            <div class="stat-item">
                <div class="stat-num info">¥8,560</div>
                <div class="stat-label">配送收入</div>
            </div>
        </div>
        
        <!-- 已完成任务列表 -->
        <div class="date-group">
            <div class="date-header">2026年03月19日</div>
            
            <div class="task-card">
                <div class="task-header">
                    <span class="task-no">DLV20260319003</span>
                    <span class="status-tag success">已完成</span>
                </div>
                <div class="task-info">
                    <div class="task-row">
                        <span class="icon">&#127981;</span>
                        <span>XX供应商 → XX餐厅</span>
                    </div>
                    <div class="task-row">
                        <span class="icon">&#128205;</span>
                        <span>城东区XX路XX号</span>
                    </div>
                    <div class="task-row">
                        <span class="icon">&#128241;</span>
                        <span>李女士 138****8002</span>
                    </div>
                </div>
                <div class="task-items">
                    <div class="task-items-title">配送商品</div>
                    <div class="task-items-list">
                        新鲜猪肉 x10斤、新鲜蔬菜 x20斤
                    </div>
                </div>
                <div class="task-footer">
                    <span class="task-time">完成时间 14:30</span>
                    <span class="task-amount">配送费 ¥15.00</span>
                </div>
            </div>
            
            <div class="task-card">
                <div class="task-header">
                    <span class="task-no">DLV20260319002</span>
                    <span class="status-tag success">已完成</span>
                </div>
                <div class="task-info">
                    <div class="task-row">
                        <span class="icon">&#127981;</span>
                        <span>YY供应商 → YY超市</span>
                    </div>
                    <div class="task-row">
                        <span class="icon">&#128205;</span>
                        <span>城东区YY路YY号</span>
                    </div>
                    <div class="task-row">
                        <span class="icon">&#128241;</span>
                        <span>王先生 139****2233</span>
                    </div>
                </div>
                <div class="task-items">
                    <div class="task-items-title">配送商品</div>
                    <div class="task-items-list">
                        新鲜猪肉 x15斤、新鲜鸡肉 x8斤、大米 x5袋
                    </div>
                </div>
                <div class="task-footer">
                    <span class="task-time">完成时间 11:45</span>
                    <span class="task-amount">配送费 ¥20.00</span>
                </div>
            </div>
        </div>
        
        <div class="date-group">
            <div class="date-header">2026年03月18日</div>
            
            <div class="task-card">
                <div class="task-header">
                    <span class="task-no">DLV20260318008</span>
                    <span class="status-tag success">已完成</span>
                </div>
                <div class="task-info">
                    <div class="task-row">
                        <span class="icon">&#127981;</span>
                        <span>ZZ供应商 → ZZ食堂</span>
                    </div>
                    <div class="task-row">
                        <span class="icon">&#128205;</span>
                        <span>城东区ZZ路ZZ号</span>
                    </div>
                    <div class="task-row">
                        <span class="icon">&#128241;</span>
                        <span>赵女士 136****4455</span>
                    </div>
                </div>
                <div class="task-items">
                    <div class="task-items-title">配送商品</div>
                    <div class="task-items-list">
                        新鲜蔬菜 x30斤、新鲜水果 x12斤
                    </div>
                </div>
                <div class="task-footer">
                    <span class="task-time">完成时间 18:20</span>
                    <span class="task-amount">配送费 ¥18.00</span>
                </div>
            </div>
            
            <div class="task-card">
                <div class="task-header">
                    <span class="task-no">DLV20260318007</span>
                    <span class="status-tag cancelled">已取消</span>
                </div>
                <div class="task-info">
                    <div class="task-row">
                        <span class="icon">&#127981;</span>
                        <span>AA供应商 → AA商行</span>
                    </div>
                    <div class="task-row">
                        <span class="icon">&#128205;</span>
                        <span>城东区AA路AA号</span>
                    </div>
                </div>
                <div class="task-items">
                    <div class="task-items-title">取消原因</div>
                    <div class="task-items-list">
                        客户临时取消订单
                    </div>
                </div>
                <div class="task-footer">
                    <span class="task-time">取消时间 09:30</span>
                    <span class="task-amount">-</span>
                </div>
            </div>
        </div>
        
        <div class="date-group">
            <div class="date-header">2026年03月17日</div>
            
            <div class="task-card">
                <div class="task-header">
                    <span class="task-no">DLV20260317005</span>
                    <span class="status-tag success">已完成</span>
                </div>
                <div class="task-info">
                    <div class="task-row">
                        <span class="icon">&#127981;</span>
                        <span>BB供应商 → BB饭店</span>
                    </div>
                    <div class="task-row">
                        <span class="icon">&#128205;</span>
                        <span>城东区BB路BB号</span>
                    </div>
                </div>
                <div class="task-items">
                    <div class="task-items-title">配送商品</div>
                    <div class="task-items-list">
                        大米 x10袋、食用油 x5桶
                    </div>
                </div>
                <div class="task-footer">
                    <span class="task-time">完成时间 16:45</span>
                    <span class="task-amount">配送费 ¥25.00</span>
                </div>
            </div>
        </div>
    </div>
</body>
</html>