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; }
        .page-header { padding: 24px 20px; color: #fff; background: linear-gradient(135deg, #ee0a24 0%, #ff976a 100%); }
        .page-header h2 { font-size: 24px; font-weight: 600; margin-bottom: 8px; }
        .back-btn { color: #fff; background: none; border: none; font-size: 24px; margin-bottom: 12px; }
        .content { padding: 16px; }
        .stats-row { display: flex; justify-content: space-around; padding: 20px; background: #fff; border-radius: 12px; margin-bottom: 12px; }
        .stats-item { text-align: center; }
        .stats-num { font-size: 28px; font-weight: 600; }
        .stats-num.orange { color: #ff976a; }
        .stats-num.green { color: #07c160; }
        .stats-num.red { color: #ee0a24; }
        .stats-label { font-size: 12px; color: #999; margin-top: 4px; }
        .tab-bar { display: flex; background: #fff; padding: 12px; gap: 8px; margin-bottom: 12px; border-radius: 8px; }
        .tab { flex: 1; text-align: center; padding: 10px; font-size: 14px; color: #666; background: #f5f5f5; border-radius: 20px; }
        .tab.active { background: #ee0a24; color: #fff; }
        .task-card { background: #fff; border-radius: 12px; padding: 16px; margin-bottom: 12px; }
        .task-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
        .task-no { font-size: 14px; font-weight: 500; }
        .status-tag { padding: 4px 10px; border-radius: 4px; font-size: 12px; }
        .status-tag.warning { background: #fff7e6; color: #ff976a; }
        .status-tag.info { background: #e6f7ff; color: #1989fa; }
        .task-info { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; }
        .task-row { display: flex; align-items: flex-start; font-size: 14px; color: #666; }
        .task-row .icon { margin-right: 8px; }
        .task-footer { display: flex; gap: 12px; }
        .action-btn { flex: 1; padding: 10px; border-radius: 20px; font-size: 14px; text-align: center; }
        .action-btn.primary { background: #ee0a24; color: #fff; border: none; }
        .action-btn.default { background: #fff; color: #666; border: 1px solid #ddd; }
    </style>
</head>
<body>
    <div class="phone-container">
        <div class="page-header">
            <button class="back-btn" onclick="history.back()">&#8249;</button>
            <h2>配送任务</h2>
        </div>
        <div class="content">
            <div class="stats-row">
                <div class="stats-item">
                    <div class="stats-num orange">2</div>
                    <div class="stats-label">待取货</div>
                </div>
                <div class="stats-item">
                    <div class="stats-num red">3</div>
                    <div class="stats-label">配送中</div>
                </div>
                <div class="stats-item">
                    <div class="stats-num green">45</div>
                    <div class="stats-label">已完成</div>
                </div>
            </div>
            <div class="tab-bar">
                <div class="tab active">待取货</div>
                <div class="tab">配送中</div>
                <div class="tab">已完成</div>
            </div>
            <div class="task-card">
                <div class="task-header">
                    <span class="task-no">DLV202603190001</span>
                    <span class="status-tag warning">待取货</span>
                </div>
                <div class="task-info">
                    <div class="task-row"><span class="icon">&#127984;</span><span>XX餐厅 | 13800138001</span></div>
                    <div class="task-row"><span class="icon">&#128205;</span><span>城东区XX路XX号</span></div>
                    <div class="task-row"><span class="icon">&#128722;</span><span>新鲜猪肉10斤、新鲜蔬菜20斤...</span></div>
                </div>
                <div class="task-footer">
                    <button class="action-btn default">查看详情</button>
                    <button class="action-btn primary">确认取货</button>
                </div>
            </div>
            <div class="task-card">
                <div class="task-header">
                    <span class="task-no">DLV202603190002</span>
                    <span class="status-tag warning">待取货</span>
                </div>
                <div class="task-info">
                    <div class="task-row"><span class="icon">&#127984;</span><span>YY超市 | 13900009999</span></div>
                    <div class="task-row"><span class="icon">&#128205;</span><span>城西区YY路YY号</span></div>
                    <div class="task-row"><span class="icon">&#128722;</span><span>新鲜水果15斤、大米20斤...</span></div>
                </div>
                <div class="task-footer">
                    <button class="action-btn default">查看详情</button>
                    <button class="action-btn primary">确认取货</button>
                </div>
            </div>
        </div>
    </div>
</body>
</html>