207 lines
9.4 KiB
HTML
207 lines
9.4 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="zh-CN">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>订单管理 - Crypto World Mall</title>
|
||
<link rel="stylesheet" href="/css/style.css">
|
||
<link rel="stylesheet" href="/css/admin.css">
|
||
</head>
|
||
<body>
|
||
<div class="container">
|
||
<header>
|
||
<h1>订单管理系统</h1>
|
||
<p>管理所有订单信息和发货状态</p>
|
||
</header>
|
||
|
||
<div class="stats-section">
|
||
<div class="stat-card">
|
||
<h3>总订单数</h3>
|
||
<span id="totalOrders">0</span>
|
||
</div>
|
||
<div class="stat-card">
|
||
<h3>已支付未发货</h3>
|
||
<span id="pendingOrders">0</span>
|
||
</div>
|
||
<div class="stat-card">
|
||
<h3>已发货</h3>
|
||
<span id="shippedOrders">0</span>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 导航选项卡 -->
|
||
<div class="tabs-section">
|
||
<div class="tabs-nav">
|
||
<button class="tab-btn active" onclick="showTab('orders')">订单管理</button>
|
||
<button class="tab-btn" onclick="showTab('coupons')">优惠码管理</button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 订单管理标签页 -->
|
||
<div id="ordersTab" class="tab-content active">
|
||
<div class="orders-section">
|
||
<div class="section-header">
|
||
<h2>订单列表</h2>
|
||
<div class="header-controls">
|
||
<div class="search-box">
|
||
<input type="text" id="searchOrder" placeholder="搜索订单号或客户姓名">
|
||
<button onclick="searchOrders()" class="search-btn">搜索</button>
|
||
</div>
|
||
<select id="statusFilter" onchange="filterOrders()">
|
||
<option value="">所有状态</option>
|
||
<option value="pending">未支付</option>
|
||
<option value="finished">已支付未发货</option>
|
||
<option value="shipped">已发货</option>
|
||
<option value="failed">支付失败</option>
|
||
</select>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="orders-table-container">
|
||
<table class="orders-table" id="ordersTable">
|
||
<thead>
|
||
<tr>
|
||
<th>订单号</th>
|
||
<th>客户信息</th>
|
||
<th>产品</th>
|
||
<th>金额</th>
|
||
<th>支付状态</th>
|
||
<th>发货状态</th>
|
||
<th>创建时间</th>
|
||
<th>操作</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody id="ordersTableBody">
|
||
<tr>
|
||
<td colspan="8" class="loading">加载中...</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 优惠码管理标签页 -->
|
||
<div id="couponsTab" class="tab-content">
|
||
<div class="coupons-section">
|
||
<div class="section-header">
|
||
<h2>优惠码管理</h2>
|
||
<button onclick="showCreateCouponModal()" class="btn-primary">+ 创建优惠码</button>
|
||
</div>
|
||
|
||
<div class="coupons-table-container">
|
||
<table class="coupons-table" id="couponsTable">
|
||
<thead>
|
||
<tr>
|
||
<th>优惠码</th>
|
||
<th>名称</th>
|
||
<th>折扣</th>
|
||
<th>类型</th>
|
||
<th>使用情况</th>
|
||
<th>状态</th>
|
||
<th>创建时间</th>
|
||
<th>操作</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody id="couponsTableBody">
|
||
<tr>
|
||
<td colspan="8" class="loading">加载中...</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 创建优惠码模态框 -->
|
||
<div id="createCouponModal" class="modal" style="display: none;">
|
||
<div class="modal-content">
|
||
<div class="modal-header">
|
||
<h3>创建优惠码</h3>
|
||
<span class="close" onclick="closeCreateCouponModal()">×</span>
|
||
</div>
|
||
<div class="modal-body">
|
||
<div class="coupon-form">
|
||
<div class="form-group">
|
||
<label for="couponCode">优惠码：*</label>
|
||
<input type="text" id="couponCode" placeholder="请输入优惠码（建议大写字母+数字）" required>
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="couponName">名称：*</label>
|
||
<input type="text" id="couponName" placeholder="请输入优惠码名称" required>
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="discountType">折扣类型：*</label>
|
||
<select id="discountType" onchange="onDiscountTypeChange()" required>
|
||
<option value="percentage">百分比折扣</option>
|
||
<option value="fixed">固定金额</option>
|
||
</select>
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="discountValue">折扣值：*</label>
|
||
<input type="number" id="discountValue" min="0" step="0.01" placeholder="请输入折扣值" required>
|
||
<small id="discountHint" class="form-hint">输入百分比数值，如：10 表示10%折扣</small>
|
||
</div>
|
||
<div class="form-group">
|
||
<label>
|
||
<input type="checkbox" id="isReusable" onchange="onReusableChange()">
|
||
可重复使用
|
||
</label>
|
||
</div>
|
||
<div class="form-group" id="maxUsesGroup" style="display: none;">
|
||
<label for="maxUses">最大使用次数：</label>
|
||
<input type="number" id="maxUses" min="1" value="1" placeholder="请输入最大使用次数">
|
||
</div>
|
||
<div class="form-actions">
|
||
<button onclick="createCoupon()" class="btn-primary">创建优惠码</button>
|
||
<button onclick="closeCreateCouponModal()" class="btn-secondary">取消</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 发货模态框 -->
|
||
<div id="shippingModal" class="modal" style="display: none;">
|
||
<div class="modal-content">
|
||
<div class="modal-header">
|
||
<h3>订单发货</h3>
|
||
<span class="close" onclick="closeShippingModal()">×</span>
|
||
</div>
|
||
<div class="modal-body">
|
||
<div class="shipping-form">
|
||
<div class="form-group">
|
||
<label for="trackingNumber">运单号：*</label>
|
||
<input type="text" id="trackingNumber" placeholder="请输入快递运单号" required>
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="shippingNotes">发货备注：</label>
|
||
<textarea id="shippingNotes" rows="3" placeholder="选填：发货备注信息"></textarea>
|
||
</div>
|
||
<div class="form-actions">
|
||
<button onclick="confirmShipping()" class="btn-primary">确认发货</button>
|
||
<button onclick="closeShippingModal()" class="btn-secondary">取消</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 订单详情模态框 -->
|
||
<div id="orderDetailModal" class="modal" style="display: none;">
|
||
<div class="modal-content">
|
||
<div class="modal-header">
|
||
<h3>订单详情</h3>
|
||
<span class="close" onclick="closeOrderDetail()">×</span>
|
||
</div>
|
||
<div class="modal-body">
|
||
<div class="order-detail-content" id="orderDetailContent">
|
||
<!-- 订单详情将在这里动态加载 -->
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<script src="/js/admin.js"></script>
|
||
</body>
|
||
</html> |