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; }
        .status-bar { display: flex; justify-content: space-between; align-items: center; padding: 16px; background: linear-gradient(135deg, #ee0a24 0%, #ff4444 100%); color: #fff; border-radius: 12px; margin-bottom: 16px; }
        .status-text { font-size: 18px; font-weight: 600; }
        .status-time { font-size: 14px; opacity: 0.9; }
        .info-card { background: #fff; border-radius: 12px; padding: 16px; margin-bottom: 12px; }
        .info-title { font-size: 14px; color: #999; margin-bottom: 12px; }
        .info-row { display: flex; justify-content: space-between; padding: 8px 0; font-size: 14px; }
        .info-label { color: #666; }
        .info-value { color: #333; font-weight: 500; }
        .divider { height: 1px; background: #f5f5f5; margin: 12px 0; }
        .section-title { font-size: 15px; font-weight: 600; margin-bottom: 12px; padding-left: 8px; border-left: 3px solid #ee0a24; }
        .product-item { display: flex; justify-content: space-between; padding: 10px 0; border-bottom: 1px solid #f5f5f5; font-size: 14px; }
        .product-item:last-child { border-bottom: none; }
        .product-name { color: #333; }
        .product-qty { color: #999; }
        .action-bar { position: fixed; bottom: 0; left: 50%; transform: translateX(-50%); width: 100%; max-width: 414px; padding: 16px; background: #fff; box-shadow: 0 -2px 12px rgba(0,0,0,0.1); display: flex; gap: 12px; }
        .action-btn { flex: 1; height: 44px; border-radius: 22px; font-size: 15px; text-align: center; border: none; }
        .action-btn.primary { background: #ee0a24; color: #fff; }
        .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" style="padding-bottom:80px;">
            <div class="status-bar">
                <div>
                    <div class="status-text">配送中</div>
                    <div class="status-time">预计 14:30 送达</div>
                </div>
                <div style="font-size:40px;">&#127954;</div>
            </div>
            <div class="info-card">
                <div class="info-title">配送信息</div>
                <div class="info-row"><span class="info-label">配送单号</span><span class="info-value">DLV202603190001</span></div>
                <div class="info-row"><span class="info-label">订单编号</span><span class="info-value">ORD202603190001</span></div>
                <div class="divider"></div>
                <div class="info-title" style="margin-top:12px;">取货地址</div>
                <div class="info-row"><span class="info-label">供应商</span><span class="info-value">XX供应商</span></div>
                <div class="info-row"><span class="info-label">联系电话</span><span class="info-value">13800138001</span></div>
                <div class="info-row"><span class="info-label">取货地址</span><span class="info-value">城东区XX路XX号</span></div>
                <div class="divider"></div>
                <div class="info-title" style="margin-top:12px;">收货地址</div>
                <div class="info-row"><span class="info-label">客户名称</span><span class="info-value">AA餐厅</span></div>
                <div class="info-row"><span class="info-label">联系电话</span><span class="info-value">13900009999</span></div>
                <div class="info-row"><span class="info-label">收货地址</span><span class="info-value">城东区YY路YY号</span></div>
            </div>
            <div class="info-card">
                <div class="section-title">商品清单</div>
                <div class="product-item"><span class="product-name">新鲜猪肉</span><span class="product-qty">x10斤</span></div>
                <div class="product-item"><span class="product-name">新鲜蔬菜</span><span class="product-qty">x5斤</span></div>
                <div class="product-item"><span class="product-name">新鲜鸡肉</span><span class="product-qty">x3斤</span></div>
                <div class="product-item"><span class="product-name">新鲜水果</span><span class="product-qty">x8斤</span></div>
            </div>
            <div class="info-card">
                <div class="section-title">配送凭证</div>
                <div style="display:flex;gap:8px;">
                    <div style="width:80px;height:80px;background:#f5f5f5;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:32px;">&#128247;</div>
                    <div style="width:80px;height:80px;background:#f5f5f5;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:32px;">&#128247;</div>
                </div>
            </div>
        </div>
        <div class="action-bar">
            <button class="action-btn default">联系客户</button>
            <button class="action-btn primary">确认送达</button>
        </div>
    </div>
</body>
</html>