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, #07c160 0%, #1989fa 100%); }
        .page-header h2 { font-size: 24px; font-weight: 600; margin-bottom: 4px; }
        .page-header p { font-size: 14px; opacity: 0.9; }
        .content { padding: 16px; }
        .stats-row { display: flex; justify-content: space-around; padding: 20px; background: #fff; border-radius: 12px; margin-bottom: 16px; box-shadow: 0 2px 12px rgba(0,0,0,0.05); }
        .stats-item { text-align: center; }
        .stats-num { font-size: 28px; font-weight: 600; }
        .stats-num.green { color: #07c160; }
        .stats-num.orange { color: #ff976a; }
        .stats-num.blue { color: #1989fa; }
        .stats-num.red { color: #ee0a24; }
        .stats-label { font-size: 12px; color: #999; margin-top: 4px; }
        .price-banner { background: linear-gradient(135deg, #07c160 0%, #1989fa 100%); color: #fff; border-radius: 12px; padding: 16px; margin-bottom: 16px; }
        .price-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
        .price-title { font-size: 16px; font-weight: 600; }
        .price-tag { padding: 2px 10px; background: rgba(255,255,255,0.2); border-radius: 10px; font-size: 12px; }
        .price-info { font-size: 13px; opacity: 0.9; }
        .todo-card { background: #fff; border-radius: 12px; padding: 16px; margin-bottom: 12px; box-shadow: 0 2px 8px rgba(0,0,0,0.05); }
        .todo-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
        .todo-title { font-size: 15px; font-weight: 600; color: #333; }
        .todo-badge { padding: 2px 10px; background: #fff7e6; color: #ff976a; border-radius: 10px; font-size: 12px; font-weight: 600; }
        .todo-badge.danger { background: #fff1f0; color: #ee0a24; }
        .todo-badge.blue { background: #e6f7ff; color: #1989fa; }
        .order-item { display: flex; justify-content: space-between; align-items: center; padding: 12px 0; border-bottom: 1px solid #f5f5f5; }
        .order-item:last-child { border-bottom: none; }
        .order-content { flex: 1; }
        .order-no { font-size: 13px; color: #666; }
        .order-status { font-size: 12px; margin-top: 4px; }
        .order-amount { font-size: 16px; font-weight: 600; color: #ee0a24; margin-right: 12px; }
        .order-action { padding: 6px 14px; border-radius: 16px; font-size: 13px; border: none; cursor: pointer; }
        .order-action.warning { background: #fff7e6; color: #ff976a; }
        .order-action.primary { background: #07c160; color: #fff; }
        .order-action.default { background: #f5f5f5; color: #666; }
        .menu-grid { display: flex; flex-wrap: wrap; margin-bottom: 16px; }
        .menu-card { width: 44%; background: #fff; border-radius: 12px; padding: 20px 16px; margin: 1%; display: flex; flex-direction: column; align-items: center; box-shadow: 0 2px 8px rgba(0,0,0,0.05); cursor: pointer; }
        .menu-icon { font-size: 32px; margin-bottom: 8px; }
        .menu-text { font-size: 13px; color: #333; }
        .logout-btn { width: 200px; height: 44px; background: #fff; color: #666; border: none; border-radius: 22px; font-size: 15px; box-shadow: 0 4px 12px rgba(0,0,0,0.1); cursor: pointer; display: block; margin: 20px auto 0; }
    </style>
</head>
<body>
    <div class="phone-container">
        <div class="page-header">
            <h2>客户工作台</h2>
            <p>欢迎，王小明（城东区域）</p>
        </div>
        <div class="content">
            <!-- 统计概览 -->
            <div class="stats-row">
                <div class="stats-item">
                    <div class="stats-num orange">1</div>
                    <div class="stats-label">待支付</div>
                </div>
                <div class="stats-item">
                    <div class="stats-num blue">2</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 class="stats-item">
                    <div class="stats-num red">¥2,560</div>
                    <div class="stats-label">待结算</div>
                </div>
            </div>
            
            <!-- 当前价格 -->
            <div class="price-banner" onclick="location.href='客户价格列表.html'">
                <div class="price-header">
                    <span class="price-title">今日价格清单</span>
                    <span class="price-tag">V3 最新</span>
                </div>
                <div class="price-info">生效日期：2026-03-17 | 共15种商品</div>
                <div style="margin-top:8px;font-size:12px;opacity:0.8;">点击查看商品详情 &#8250;</div>
            </div>
            
            <!-- 待办事项 -->
            <div class="todo-card">
                <div class="todo-header">
                    <span class="todo-title">&#9888; 待处理订单</span>
                    <span class="todo-badge">3</span>
                </div>
                <div class="order-item">
                    <div class="order-content">
                        <div class="order-no">ORD202603190001 | 新鲜猪肉10斤...</div>
                        <div class="order-status" style="color:#ff976a;">待支付</div>
                    </div>
                    <span class="order-amount">¥380</span>
                    <button class="order-action warning">去支付</button>
                </div>
                <div class="order-item">
                    <div class="order-content">
                        <div class="order-no">ORD202603180023 | 新鲜水果8斤...</div>
                        <div class="order-status" style="color:#1989fa;">配送中</div>
                    </div>
                    <span class="order-amount">¥256</span>
                    <button class="order-action default">查看</button>
                </div>
            </div>
            
            <!-- 快捷操作 -->
            <div class="todo-card">
                <div class="todo-header">
                    <span class="todo-title">&#128179; 快捷操作</span>
                </div>
                <div class="order-item" onclick="location.href='客户取消申请.html'">
                    <div class="order-content">
                        <div class="order-no">申请取消订单</div>
                    </div>
                    <span class="order-action default" style="padding:6px 12px;">操作 &#8250;</span>
                </div>
            </div>
            
            <!-- 功能菜单 -->
            <div class="menu-grid">
                <div class="menu-card" onclick="location.href='客户价格列表.html'">
                    <span class="menu-icon">&#128722;</span>
                    <span class="menu-text">商品列表</span>
                </div>
                <div class="menu-card" onclick="location.href='客户我的订单.html'">
                    <span class="menu-icon">&#128196;</span>
                    <span class="menu-text">我的订单</span>
                </div>
                <div class="menu-card" onclick="location.href='客户地址管理.html'">
                    <span class="menu-icon">&#128205;</span>
                    <span class="menu-text">地址管理</span>
                </div>
                <div class="menu-card" onclick="location.href='客户基本信息.html'">
                    <span class="menu-icon">&#128100;</span>
                    <span class="menu-text">基本信息</span>
                </div>
            </div>
            
            <button class="logout-btn" onclick="location.href='../index.html'">退出登录</button>
        </div>
    </div>
</body>
</html>