sqxp/docs/原型图/web/订单管理.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://unpkg.com/element-plus/dist/index.css">
    <style>
        * { margin: 0; padding: 0; box-sizing: border-box; }
        body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; background: #f5f7fa; color: #303133; }
        .topbar { height: 60px; background: linear-gradient(135deg, #1989fa 0%, #07c160 100%); display: flex; align-items: center; justify-content: space-between; padding: 0 24px; color: white; }
        .topbar-logo h1 { font-size: 22px; font-weight: 600; }
        .topbar-logo span { font-size: 13px; opacity: 0.85; }
        .topbar-user { display: flex; align-items: center; gap: 16px; }
        .main-container { display: flex; min-height: calc(100vh - 60px); }
        .sidebar { width: 220px; background: #fff; border-right: 1px solid #e4e7ed; padding: 16px 0; }
        .menu-item { padding: 14px 24px; cursor: pointer; display: flex; align-items: center; gap: 12px; color: #606266; font-size: 14px; }
        .menu-item:hover { background: #f5f7fa; color: #1989fa; }
        .menu-item.active { background: #ecf5ff; color: #1989fa; border-right: 3px solid #1989fa; }
        .content { flex: 1; padding: 24px; }
        .breadcrumb { font-size: 13px; color: #909399; margin-bottom: 8px; }
        .card { background: #fff; border-radius: 12px; padding: 24px; margin-bottom: 20px; box-shadow: 0 2px 12px rgba(0,0,0,0.05); }
        .card-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; padding-bottom: 16px; border-bottom: 1px solid #ebeef5; }
        .card-title { font-size: 16px; font-weight: 600; }
        .status-tag { padding: 4px 12px; border-radius: 4px; font-size: 12px; }
        .status-tag.primary { background: #ecf5ff; color: #1989fa; }
        .status-tag.success { background: #f0f9eb; color: #07c160; }
        .status-tag.warning { background: #fdf6ec; color: #ff976a; }
        .status-tag.danger { background: #fef0f0; color: #ee0a24; }
        .status-tag.info { background: #f4f4f5; color: #909399; }
        .form-section-title { font-size: 15px; font-weight: 600; margin-bottom: 16px; padding-left: 12px; border-left: 4px solid #1989fa; }
        .form-row { display: flex; gap: 12px; flex-wrap: wrap; }
        .page-nav { display: flex; justify-content: center; gap: 8px; margin-top: 24px; }
        .order-header { display: flex; gap: 16px; margin-bottom: 16px; }
        .order-info { flex: 1; background: #f9f9f9; border-radius: 8px; padding: 16px; }
        .order-info h4 { font-size: 14px; color: #909399; margin-bottom: 8px; }
        .order-info p { font-size: 16px; font-weight: 600; color: #303133; }
        .order-items { margin-top: 20px; }
        .order-item { display: flex; align-items: center; padding: 12px 0; border-bottom: 1px solid #eee; }
        .order-item:last-child { border-bottom: none; }
        .item-img { width: 60px; height: 60px; background: #eee; border-radius: 8px; margin-right: 12px; }
        .item-info { flex: 1; }
        .item-info h4 { font-size: 14px; margin-bottom: 4px; }
        .item-info p { font-size: 12px; color: #909399; }
        .item-price { text-align: right; }
        .item-price .price { font-size: 16px; font-weight: 600; color: #ee0a24; }
        .item-price .quantity { font-size: 12px; color: #909399; }
        .order-total { display: flex; justify-content: flex-end; align-items: center; gap: 20px; padding: 16px 0; border-top: 2px solid #1989fa; margin-top: 16px; }
        .order-total .label { color: #606266; }
        .order-total .amount { font-size: 24px; font-weight: 600; color: #ee0a24; }
        .action-bar { display: flex; gap: 12px; justify-content: flex-end; padding-top: 20px; border-top: 1px solid #eee; }
        .timeline { padding: 20px 0; }
        .timeline-item { display: flex; gap: 16px; padding-bottom: 24px; position: relative; }
        .timeline-dot { width: 12px; height: 12px; background: #1989fa; border-radius: 50%; margin-top: 4px; flex-shrink: 0; }
        .timeline-line { position: absolute; left: 5px; top: 16px; bottom: 0; width: 2px; background: #e4e7ed; }
        .timeline-content h4 { font-size: 14px; color: #303133; margin-bottom: 4px; }
        .timeline-content p { font-size: 13px; color: #909399; }
        .tabs { display: flex; gap: 4px; background: #f5f7fa; padding: 4px; border-radius: 8px; margin-bottom: 20px; }
        .tab { padding: 10px 20px; cursor: pointer; border-radius: 6px; font-size: 14px; color: #606266; }
        .tab.active { background: #fff; color: #1989fa; font-weight: 500; }
    </style>
</head>
<body>
    <!-- 顶部导航 -->
    <div class="topbar">
        <div class="topbar-logo">
            <h1>叁强鲜配</h1>
            <span>运营管理后台</span>
        </div>
        <div class="topbar-user">
            <el-avatar :size="32" style="background:#fff;color:#1989fa;">管</el-avatar>
            <span>管理员</span>
        </div>
    </div>

    <div class="main-container">
        <!-- 左侧菜单 -->
        <div class="sidebar">
            <div class="menu-item"><el-icon><DataAnalysis /></el-icon><span>首页</span></div>
            <div class="menu-item"><el-icon><User /></el-icon><span>用户管理</span></div>
            <div class="menu-item"><el-icon><Location /></el-icon><span>区域管理</span></div>
            <div class="menu-item"><el-icon><Goods /></el-icon><span>商品管理</span></div>
            <div class="menu-item"><el-icon><Search /></el-icon><span>询价管理</span></div>
            <div class="menu-item"><el-icon><Ticket /></el-icon><span>报价管理</span></div>
            <div class="menu-item"><el-icon><PriceTag /></el-icon><span>价格管理</span></div>
            <div class="menu-item active"><el-icon><ShoppingCart /></el-icon><span>订单管理</span></div>
            <div class="menu-item"><el-icon><Van /></el-icon><span>配送管理</span></div>
            <div class="menu-item"><el-icon><Wallet /></el-icon><span>结算管理</span></div>
        </div>

        <!-- 内容区 -->
        <div class="content">
            <div class="breadcrumb">订单管理 / 订单列表</div>

            <!-- 搜索筛选 -->
            <div class="card">
                <div class="form-section-title">筛选条件</div>
                <div class="form-row">
                    <el-input placeholder="订单编号" style="width:200px;" />
                    <el-select placeholder="订单状态" style="width:150px;">
                        <el-option label="全部状态" value="" />
                        <el-option label="待支付" value="pending_payment" />
                        <el-option label="待分配配送" value="pending_delivery" />
                        <el-option label="配送中" value="delivering" />
                        <el-option label="部分送达" value="partial_delivered" />
                        <el-option label="待确认收货" value="pending_confirm" />
                        <el-option label="已完成" value="completed" />
                        <el-option label="已取消" value="cancelled" />
                    </el-select>
                    <el-select placeholder="所属区域" style="width:150px;">
                        <el-option label="全部区域" value="" />
                        <el-option label="城东区域" value="CD" />
                        <el-option label="城西区域" value="CX" />
                        <el-option label="城南区域" value="CN" />
                    </el-select>
                    <el-date-picker type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" style="width:240px;" />
                    <el-button type="primary">搜索</el-button>
                    <el-button>重置</el-button>
                </div>
            </div>

            <!-- 订单列表 -->
            <div class="card">
                <div class="card-header">
                    <span class="card-title">订单列表</span>
                    <div style="display:flex;gap:12px;">
                        <el-button type="success">导出待结算</el-button>
                        <el-button type="warning">导出线下结算</el-button>
                    </div>
                </div>

                <div class="tabs">
                    <div class="tab active">全部</div>
                    <div class="tab">待支付</div>
                    <div class="tab">待分配配送</div>
                    <div class="tab">配送中</div>
                    <div class="tab">待确认收货</div>
                    <div class="tab">已完成</div>
                    <div class="tab">已取消</div>
                </div>

                <el-table :data="orderList" style="width:100%">
                    <el-table-column prop="orderNo" label="订单编号" width="180" />
                    <el-table-column prop="clientName" label="客户名称" width="140" />
                    <el-table-column prop="region" label="区域" width="80" />
                    <el-table-column prop="itemCount" label="商品数" width="80" align="center" />
                    <el-table-column prop="totalAmount" label="订单金额" width="110">
                        <template #default="{row}">
                            <span style="color:#ee0a24;font-weight:600;">¥{{row.totalAmount}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="paymentMethod" label="支付方式" width="90">
                        <template #default="{row}">
                            <span :class="'status-tag '+(row.paymentMethod=='wechat'?'primary':'info')">
                                {{row.paymentMethod=='wechat'?'微信支付':'线下结算'}}
                            </span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="status" label="订单状态" width="120">
                        <template #default="{row}">
                            <span :class="'status-tag '+row.statusClass">{{row.statusText}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="createTime" label="下单时间" width="150" />
                    <el-table-column label="操作" width="150" fixed="right">
                        <template #default>
                            <el-button type="primary" link>查看</el-button>
                            <el-button type="success" link>分配</el-button>
                            <el-button type="warning" link>调整</el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <div class="page-nav">
                    <el-pagination background layout="prev, pager, next" :total="100" />
                </div>
            </div>

            <!-- 订单详情弹窗预览 -->
            <div class="card">
                <div class="form-section-title">订单详情预览</div>
                <div class="order-header">
                    <div class="order-info">
                        <h4>订单编号</h4>
                        <p>ORD202603190001</p>
                    </div>
                    <div class="order-info">
                        <h4>订单状态</h4>
                        <p><span class="status-tag primary">待分配配送</span></p>
                    </div>
                    <div class="order-info">
                        <h4>下单客户</h4>
                        <p>XX餐厅</p>
                    </div>
                    <div class="order-info">
                        <h4>所属区域</h4>
                        <p>城东区域</p>
                    </div>
                </div>

                <div class="order-header">
                    <div class="order-info">
                        <h4>联系人</h4>
                        <p>张三</p>
                    </div>
                    <div class="order-info">
                        <h4>联系电话</h4>
                        <p>13800138001</p>
                    </div>
                    <div class="order-info">
                        <h4>配送地址</h4>
                        <p>城东区XX路XX号</p>
                    </div>
                    <div class="order-info">
                        <h4>支付方式</h4>
                        <p>微信支付</p>
                    </div>
                </div>

                <div class="order-items">
                    <div class="form-section-title">商品明细</div>
                    <div class="order-item">
                        <div class="item-img"></div>
                        <div class="item-info">
                            <h4>新鲜猪肉</h4>
                            <p>单位：斤</p>
                        </div>
                        <div class="item-price">
                            <div class="price">¥25.00</div>
                            <div class="quantity">x 10斤</div>
                        </div>
                    </div>
                    <div class="order-item">
                        <div class="item-img"></div>
                        <div class="item-info">
                            <h4>新鲜蔬菜</h4>
                            <p>单位：斤</p>
                        </div>
                        <div class="item-price">
                            <div class="price">¥8.00</div>
                            <div class="quantity">x 20斤</div>
                        </div>
                    </div>
                    <div class="order-item">
                        <div class="item-img"></div>
                        <div class="item-info">
                            <h4>新鲜水果</h4>
                            <p>单位：斤</p>
                        </div>
                        <div class="item-price">
                            <div class="price">¥12.00</div>
                            <div class="quantity">x 15斤</div>
                        </div>
                    </div>
                </div>

                <div class="order-total">
                    <span class="label">订单总金额：</span>
                    <span class="amount">¥710.00</span>
                </div>

                <div class="form-section-title" style="margin-top:24px;">状态变更记录</div>
                <div class="timeline">
                    <div class="timeline-item">
                        <div class="timeline-dot"></div>
                        <div class="timeline-content">
                            <h4>订单已创建</h4>
                            <p>2026-03-19 10:23:45 | 客户 XX餐厅</p>
                        </div>
                    </div>
                    <div class="timeline-item">
                        <div class="timeline-dot"></div>
                        <div class="timeline-content">
                            <h4>订单已支付</h4>
                            <p>2026-03-19 10:25:30 | 微信支付成功</p>
                        </div>
                    </div>
                </div>

                <div class="action-bar">
                    <el-button type="primary">分配配送员</el-button>
                    <el-button type="warning">调整订单</el-button>
                    <el-button type="danger">取消订单</el-button>
                </div>
            </div>
        </div>
    </div>

    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <script src="https://unpkg.com/element-plus"></script>
    <script src="https://unpkg.com/@element-plus/icons-vue"></script>
    <script>
        const { createApp, ref } = Vue;
        const app = createApp({
            setup() {
                const orderList = ref([
                    { orderNo: 'ORD202603190001', clientName: 'XX餐厅', region: '城东', itemCount: 5, totalAmount: '710.00', paymentMethod: 'wechat', statusClass: 'primary', statusText: '待分配配送', createTime: '2026-03-19 10:23' },
                    { orderNo: 'ORD202603190002', clientName: 'YY超市', region: '城西', itemCount: 8, totalAmount: '1,280.00', paymentMethod: 'offline', statusClass: 'warning', statusText: '待支付', createTime: '2026-03-19 09:15' },
                    { orderNo: 'ORD202603190003', clientName: 'ZZ食堂', region: '城南', itemCount: 3, totalAmount: '456.00', paymentMethod: 'wechat', statusClass: 'info', statusText: '配送中', createTime: '2026-03-18 16:45' },
                    { orderNo: 'ORD202603180056', clientName: 'AA饭店', region: '城东', itemCount: 6, totalAmount: '890.00', paymentMethod: 'wechat', statusClass: 'success', statusText: '已完成', createTime: '2026-03-18 14:20' },
                ]);
                return { orderList };
            }
        });
        app.use(ElementPlus);
        for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
            app.component(key, component);
        }
        app.mount('#app');
    </script>
</body>
</html>