3944 lines
240 KiB
HTML
3944 lines
240 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>订单管理中心 - 产品原型</title>
|
||
<script src="https://cdn.tailwindcss.com"></script>
|
||
<link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
|
||
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.8/dist/chart.umd.min.js"></script>
|
||
<script>
|
||
tailwind.config = {
|
||
theme: {
|
||
extend: {
|
||
colors: {
|
||
primary: '#165DFF',
|
||
secondary: '#6B7280',
|
||
success: '#10B981',
|
||
warning: '#F59E0B',
|
||
danger: '#EF4444',
|
||
info: '#3B82F6',
|
||
light: '#F3F4F6',
|
||
dark: '#1F2937'
|
||
},
|
||
fontFamily: {
|
||
sans: ['Inter', 'system-ui', 'sans-serif']
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
<style type="text/tailwindcss">
|
||
@layer utilities {
|
||
.content-auto {
|
||
content-visibility: auto;
|
||
}
|
||
.scrollbar-hide {
|
||
-ms-overflow-style: none;
|
||
scrollbar-width: none;
|
||
}
|
||
.scrollbar-hide::-webkit-scrollbar {
|
||
display: none;
|
||
}
|
||
.transition-all-300 {
|
||
transition: all 0.3s ease;
|
||
}
|
||
.animate-fadeIn {
|
||
animation: fadeIn 0.3s ease-in-out;
|
||
}
|
||
.animate-slideIn {
|
||
animation: slideIn 0.3s ease-out;
|
||
}
|
||
.animate-slideOut {
|
||
animation: slideOut 0.3s ease-in;
|
||
}
|
||
.animate-spin {
|
||
animation: spin 1s linear infinite;
|
||
}
|
||
@keyframes fadeIn {
|
||
from {
|
||
opacity: 0;
|
||
transform: translateY(-10px);
|
||
}
|
||
to {
|
||
opacity: 1;
|
||
transform: translateY(0);
|
||
}
|
||
}
|
||
@keyframes slideIn {
|
||
from {
|
||
opacity: 0;
|
||
transform: translateX(100%);
|
||
}
|
||
to {
|
||
opacity: 1;
|
||
transform: translateX(0);
|
||
}
|
||
}
|
||
@keyframes slideOut {
|
||
from {
|
||
opacity: 1;
|
||
transform: translateX(0);
|
||
}
|
||
to {
|
||
opacity: 0;
|
||
transform: translateX(100%);
|
||
}
|
||
}
|
||
@keyframes spin {
|
||
from {
|
||
transform: rotate(0deg);
|
||
}
|
||
to {
|
||
transform: rotate(360deg);
|
||
}
|
||
}
|
||
}
|
||
</style>
|
||
</head>
|
||
<body class="bg-gray-50 font-sans">
|
||
<!-- 顶部导航栏 -->
|
||
<nav class="bg-white shadow-md fixed top-0 left-0 right-0 z-50">
|
||
<div class="container mx-auto px-4 py-3 flex justify-between items-center">
|
||
<div class="flex items-center space-x-2">
|
||
<i class="fa fa-shopping-cart text-primary text-2xl"></i>
|
||
<h1 class="text-xl font-bold text-gray-800">订单管理中心</h1>
|
||
</div>
|
||
<div class="flex items-center space-x-6">
|
||
<div class="relative">
|
||
<button class="flex items-center space-x-1 text-gray-600 hover:text-primary transition-all-300">
|
||
<i class="fa fa-bell"></i>
|
||
<span class="absolute -top-1 -right-1 bg-danger text-white text-xs rounded-full w-4 h-4 flex items-center justify-center">3</span>
|
||
</button>
|
||
</div>
|
||
<div class="flex items-center space-x-2">
|
||
<img src="https://randomuser.me/api/portraits/men/32.jpg" alt="用户头像" class="w-8 h-8 rounded-full object-cover">
|
||
<span class="text-gray-700 font-medium">张三</span>
|
||
<i class="fa fa-chevron-down text-gray-400 text-xs"></i>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</nav>
|
||
|
||
<!-- 广告横幅 -->
|
||
<div class="bg-gradient-to-r from-blue-600 to-blue-800 text-white py-3 shadow-md mt-16">
|
||
<div class="container mx-auto px-4 flex flex-col md:flex-row items-center justify-between">
|
||
<div class="flex items-center mb-2 md:mb-0">
|
||
<div class="text-xl font-bold mr-4">TooEpress</div>
|
||
<div class="text-sm md:text-base">
|
||
<span class="font-medium">专业小包派送商 | </span>
|
||
<span>24小时上网最快当日妥投 | </span>
|
||
<span>提供专业换单服务 自研设备</span>
|
||
</div>
|
||
</div>
|
||
<div class="text-sm font-medium">详情请咨询 <span class="font-bold">400-888-8888</span></div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 主容器 -->
|
||
<div class="container mx-auto px-4 pt-16 pb-10">
|
||
<!-- 页面标题 -->
|
||
<div class="mb-8">
|
||
<h2 class="text-2xl font-bold text-gray-800">产品原型演示</h2>
|
||
<p class="text-gray-600 mt-2">客户角度的订单管理系统功能演示</p>
|
||
</div>
|
||
|
||
<!-- 模块选择器 -->
|
||
<div class="mb-8 bg-white rounded-lg shadow-sm p-4">
|
||
<div class="flex flex-wrap gap-2">
|
||
<button class="module-btn active px-4 py-2 rounded-md bg-primary text-white font-medium flex items-center space-x-2" data-module="order-center">
|
||
<i class="fa fa-shopping-cart"></i>
|
||
<span>订单中心</span>
|
||
</button>
|
||
<button class="module-btn px-4 py-2 rounded-md bg-gray-200 text-gray-700 font-medium flex items-center space-x-2" data-module="customer-center">
|
||
<i class="fa fa-user"></i>
|
||
<span>客户中心</span>
|
||
</button>
|
||
<button class="module-btn px-4 py-2 rounded-md bg-gray-200 text-gray-700 font-medium flex items-center space-x-2" data-module="finance-center">
|
||
<i class="fa fa-money"></i>
|
||
<span>财务中心</span>
|
||
</button>
|
||
<button class="module-btn px-4 py-2 rounded-md bg-gray-200 text-gray-700 font-medium flex items-center space-x-2" data-module="analytics-center">
|
||
<i class="fa fa-bar-chart"></i>
|
||
<span>数据看板</span>
|
||
</button>
|
||
<button class="module-btn px-4 py-2 rounded-md bg-gray-200 text-gray-700 font-medium flex items-center space-x-2" data-module="support-center">
|
||
<i class="fa fa-headphones"></i>
|
||
<span>服务支持中心</span>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 模块内容区域 -->
|
||
<div class="module-content">
|
||
<!-- 订单中心 -->
|
||
<div id="order-center" class="module-panel active">
|
||
<!-- 订单统计卡片 -->
|
||
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 mb-6">
|
||
<div class="bg-white rounded-lg shadow-sm p-4 border-l-4 border-primary hover:shadow-md transition-all-300 cursor-pointer">
|
||
<div class="flex justify-between items-center">
|
||
<div>
|
||
<p class="text-gray-500 text-sm">总订单数</p>
|
||
<h3 class="text-2xl font-bold text-gray-800">248</h3>
|
||
<p class="text-xs text-green-600 mt-1"><i class="fa fa-arrow-up mr-1"></i> 5.2% 较上周</p>
|
||
</div>
|
||
<div class="w-10 h-10 rounded-full bg-blue-100 flex items-center justify-center text-primary">
|
||
<i class="fa fa-file-text-o"></i>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="bg-white rounded-lg shadow-sm p-4 border-l-4 border-success hover:shadow-md transition-all-300 cursor-pointer">
|
||
<div class="flex justify-between items-center">
|
||
<div>
|
||
<p class="text-gray-500 text-sm">已完成订单</p>
|
||
<h3 class="text-2xl font-bold text-gray-800">196</h3>
|
||
<p class="text-xs text-green-600 mt-1"><i class="fa fa-arrow-up mr-1"></i> 8.3% 较上周</p>
|
||
</div>
|
||
<div class="w-10 h-10 rounded-full bg-green-100 flex items-center justify-center text-success">
|
||
<i class="fa fa-check-circle-o"></i>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="bg-white rounded-lg shadow-sm p-4 border-l-4 border-warning hover:shadow-md transition-all-300 cursor-pointer">
|
||
<div class="flex justify-between items-center">
|
||
<div>
|
||
<p class="text-gray-500 text-sm">处理中订单</p>
|
||
<h3 class="text-2xl font-bold text-gray-800">32</h3>
|
||
<p class="text-xs text-red-600 mt-1"><i class="fa fa-arrow-down mr-1"></i> 2.1% 较上周</p>
|
||
</div>
|
||
<div class="w-10 h-10 rounded-full bg-yellow-100 flex items-center justify-center text-warning">
|
||
<i class="fa fa-spinner"></i>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="bg-white rounded-lg shadow-sm p-4 border-l-4 border-danger hover:shadow-md transition-all-300 cursor-pointer">
|
||
<div class="flex justify-between items-center">
|
||
<div>
|
||
<p class="text-gray-500 text-sm">异常订单</p>
|
||
<h3 class="text-2xl font-bold text-gray-800">8</h3>
|
||
<p class="text-xs text-yellow-600 mt-1"><i class="fa fa-minus mr-1"></i> 0% 较上周</p>
|
||
</div>
|
||
<div class="w-10 h-10 rounded-full bg-red-100 flex items-center justify-center text-danger">
|
||
<i class="fa fa-exclamation-circle"></i>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 订单筛选和操作 -->
|
||
<div class="bg-white rounded-lg shadow-sm p-4 mb-6">
|
||
<div class="flex flex-wrap gap-4">
|
||
<div class="flex-1 min-w-[200px]">
|
||
<input type="text" placeholder="搜索订单号、商品名称..." class="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent transition-all-300" id="orderSearchInput">
|
||
</div>
|
||
<div class="flex gap-2">
|
||
<select class="px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent transition-all-300" id="orderStatusFilter">
|
||
<option value="">全部状态</option>
|
||
<option value="pending">待支付</option>
|
||
<option value="processing">处理中</option>
|
||
<option value="shipping">配送中</option>
|
||
<option value="completed">已完成</option>
|
||
<option value="cancelled">已取消</option>
|
||
<option value="exception">异常</option>
|
||
</select>
|
||
<select class="px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent transition-all-300" id="orderTypeFilter">
|
||
<option value="">全部类型</option>
|
||
<option value="product">商品订单</option>
|
||
<option value="service">服务订单</option>
|
||
<option value="exchange">换单服务</option>
|
||
</select>
|
||
<select class="px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent transition-all-300" id="orderTimeFilter">
|
||
<option value="">全部时间</option>
|
||
<option value="today">今天</option>
|
||
<option value="week">本周</option>
|
||
<option value="month">本月</option>
|
||
<option value="quarter">本季度</option>
|
||
<option value="year">本年</option>
|
||
</select>
|
||
<button class="px-4 py-2 bg-primary text-white rounded-md hover:bg-primary/90 transition-all-300 flex items-center space-x-1" id="orderFilterBtn">
|
||
<i class="fa fa-search mr-1"></i>
|
||
<span>筛选</span>
|
||
<span class="ml-2 px-2 py-0.5 bg-white bg-opacity-20 rounded text-xs hidden" id="filterCount">0</span>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
<div class="mt-4 flex flex-wrap justify-between items-center gap-4">
|
||
<div class="flex items-center space-x-2 flex-wrap gap-2">
|
||
<button class="px-3 py-1 border border-gray-300 rounded-md text-gray-700 hover:bg-gray-50 transition-all-300 flex items-center space-x-1">
|
||
<i class="fa fa-filter mr-1"></i>
|
||
<span>高级筛选</span>
|
||
</button>
|
||
<button class="px-3 py-1 border border-gray-300 rounded-md text-gray-700 hover:bg-gray-50 transition-all-300 flex items-center space-x-1">
|
||
<i class="fa fa-download mr-1"></i>
|
||
<span>导出</span>
|
||
</button>
|
||
<button class="px-3 py-1 border border-gray-300 rounded-md text-gray-700 hover:bg-gray-50 transition-all-300 flex items-center space-x-1">
|
||
<i class="fa fa-print mr-1"></i>
|
||
<span>打印</span>
|
||
</button>
|
||
</div>
|
||
<div class="flex items-center space-x-2">
|
||
<button class="px-3 py-1 border border-gray-300 rounded-md text-gray-700 hover:bg-gray-50 transition-all-300 flex items-center space-x-1" id="refreshOrdersBtn">
|
||
<i class="fa fa-refresh mr-1"></i>
|
||
<span>刷新</span>
|
||
</button>
|
||
<button class="px-4 py-2 bg-green-500 text-white rounded-md hover:bg-green-600 transition-all-300 flex items-center space-x-1">
|
||
<i class="fa fa-plus"></i>
|
||
<span>创建订单</span>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
<!-- 筛选结果反馈 -->
|
||
<div class="mt-3 p-3 bg-blue-50 border border-blue-100 rounded-md hidden" id="filterFeedback">
|
||
<div class="flex items-start space-x-3">
|
||
<div class="w-6 h-6 rounded-full bg-blue-100 flex items-center justify-center text-blue-600 flex-shrink-0 mt-0.5">
|
||
<i class="fa fa-info-circle text-sm"></i>
|
||
</div>
|
||
<div class="flex-1">
|
||
<div class="font-medium text-blue-800">筛选结果</div>
|
||
<div class="text-sm text-blue-700 mt-1" id="filterMessage">共找到 <span class="font-medium">0</span> 条符合条件的订单</div>
|
||
</div>
|
||
<button class="text-blue-600 hover:text-blue-800 transition-all-300" id="clearFilterBtn">
|
||
<i class="fa fa-times"></i>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 批量操作栏 -->
|
||
<div class="bg-white rounded-lg shadow-sm p-4 mb-6 hidden" id="batchActionsBar">
|
||
<div class="flex items-center space-x-4">
|
||
<div class="flex items-center">
|
||
<input type="checkbox" id="selectAllOrders" class="w-4 h-4 text-primary focus:ring-primary border-gray-300 rounded">
|
||
<label for="selectAllOrders" class="ml-2 text-sm text-gray-700">全选</label>
|
||
<span class="ml-4 text-sm text-gray-500" id="selectedCount">已选择 0 项</span>
|
||
</div>
|
||
<div class="flex space-x-2">
|
||
<button class="px-3 py-1 border border-gray-300 rounded-md text-gray-700 hover:bg-gray-50 transition-all-300">
|
||
<i class="fa fa-edit mr-1"></i> 批量编辑
|
||
</button>
|
||
<button class="px-3 py-1 border border-gray-300 rounded-md text-gray-700 hover:bg-gray-50 transition-all-300">
|
||
<i class="fa fa-trash mr-1"></i> 批量删除
|
||
</button>
|
||
<button class="px-3 py-1 border border-gray-300 rounded-md text-gray-700 hover:bg-gray-50 transition-all-300">
|
||
<i class="fa fa-download mr-1"></i> 批量导出
|
||
</button>
|
||
<button class="px-3 py-1 border border-gray-300 rounded-md text-gray-700 hover:bg-gray-50 transition-all-300" id="cancelBatchActions">
|
||
<i class="fa fa-times mr-1"></i> 取消
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 订单列表 -->
|
||
<div class="bg-white rounded-lg shadow-sm overflow-hidden">
|
||
<div class="overflow-x-auto">
|
||
<table class="w-full">
|
||
<thead class="bg-gray-50 border-b border-gray-200">
|
||
<tr>
|
||
<th class="px-4 py-3 text-left text-sm font-medium text-gray-600 w-12">
|
||
<input type="checkbox" id="headerSelectAll" class="w-4 h-4 text-primary focus:ring-primary border-gray-300 rounded">
|
||
</th>
|
||
<th class="px-4 py-3 text-left text-sm font-medium text-gray-600">订单号</th>
|
||
<th class="px-4 py-3 text-left text-sm font-medium text-gray-600">商品/服务</th>
|
||
<th class="px-4 py-3 text-left text-sm font-medium text-gray-600">订单金额</th>
|
||
<th class="px-4 py-3 text-left text-sm font-medium text-gray-600">订单状态</th>
|
||
<th class="px-4 py-3 text-left text-sm font-medium text-gray-600">创建时间</th>
|
||
<th class="px-4 py-3 text-left text-sm font-medium text-gray-600">操作</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody class="divide-y divide-gray-200">
|
||
<tr class="hover:bg-gray-50 transition-all-300">
|
||
<td class="px-4 py-3">
|
||
<input type="checkbox" class="order-checkbox w-4 h-4 text-primary focus:ring-primary border-gray-300 rounded">
|
||
</td>
|
||
<td class="px-4 py-3 text-sm text-gray-700">ORD20260206001</td>
|
||
<td class="px-4 py-3 text-sm text-gray-700">
|
||
<div>
|
||
<div class="font-medium">iPhone 16 Pro</div>
|
||
<div class="text-xs text-gray-500">颜色: 钛金属色 | 容量: 256GB</div>
|
||
</div>
|
||
</td>
|
||
<td class="px-4 py-3 text-sm text-gray-700 font-medium">¥8,999.00</td>
|
||
<td class="px-4 py-3">
|
||
<span class="px-2 py-1 text-xs rounded-full bg-blue-100 text-blue-800">处理中</span>
|
||
</td>
|
||
<td class="px-4 py-3 text-sm text-gray-600">2026-02-06 10:30</td>
|
||
<td class="px-4 py-3">
|
||
<div class="flex space-x-2">
|
||
<button class="text-primary hover:text-primary/80 transition-all-300 order-detail-btn" data-order-id="ORD20260206001">
|
||
<i class="fa fa-eye"></i>
|
||
</button>
|
||
<button class="text-gray-600 hover:text-gray-800 transition-all-300 order-edit-btn" data-order-id="ORD20260206001">
|
||
<i class="fa fa-edit"></i>
|
||
</button>
|
||
<button class="text-danger hover:text-danger/80 transition-all-300 order-delete-btn" data-order-id="ORD20260206001">
|
||
<i class="fa fa-trash"></i>
|
||
</button>
|
||
<button class="text-gray-600 hover:text-primary transition-all-300 order-pay-btn" data-order-id="ORD20260206001">
|
||
<i class="fa fa-credit-card"></i>
|
||
</button>
|
||
</div>
|
||
</td>
|
||
</tr>
|
||
<tr class="hover:bg-gray-50 transition-all-300">
|
||
<td class="px-4 py-3">
|
||
<input type="checkbox" class="order-checkbox w-4 h-4 text-primary focus:ring-primary border-gray-300 rounded">
|
||
</td>
|
||
<td class="px-4 py-3 text-sm text-gray-700">ORD20260206002</td>
|
||
<td class="px-4 py-3 text-sm text-gray-700">
|
||
<div>
|
||
<div class="font-medium">年度会员服务</div>
|
||
<div class="text-xs text-gray-500">类型: 高级会员</div>
|
||
</div>
|
||
</td>
|
||
<td class="px-4 py-3 text-sm text-gray-700 font-medium">¥1,299.00</td>
|
||
<td class="px-4 py-3">
|
||
<span class="px-2 py-1 text-xs rounded-full bg-green-100 text-green-800">已完成</span>
|
||
</td>
|
||
<td class="px-4 py-3 text-sm text-gray-600">2026-02-06 09:15</td>
|
||
<td class="px-4 py-3">
|
||
<div class="flex space-x-2">
|
||
<button class="text-primary hover:text-primary/80 transition-all-300 order-detail-btn" data-order-id="ORD20260206002">
|
||
<i class="fa fa-eye"></i>
|
||
</button>
|
||
<button class="text-gray-600 hover:text-gray-800 transition-all-300 order-edit-btn" data-order-id="ORD20260206002">
|
||
<i class="fa fa-edit"></i>
|
||
</button>
|
||
<button class="text-danger hover:text-danger/80 transition-all-300 order-delete-btn" data-order-id="ORD20260206002">
|
||
<i class="fa fa-trash"></i>
|
||
</button>
|
||
<button class="text-gray-400 cursor-not-allowed">
|
||
<i class="fa fa-credit-card"></i>
|
||
</button>
|
||
</div>
|
||
</td>
|
||
</tr>
|
||
<tr class="hover:bg-gray-50 transition-all-300">
|
||
<td class="px-4 py-3">
|
||
<input type="checkbox" class="order-checkbox w-4 h-4 text-primary focus:ring-primary border-gray-300 rounded">
|
||
</td>
|
||
<td class="px-4 py-3 text-sm text-gray-700">ORD20260205001</td>
|
||
<td class="px-4 py-3 text-sm text-gray-700">
|
||
<div>
|
||
<div class="font-medium">笔记本电脑</div>
|
||
<div class="text-xs text-gray-500">型号: MacBook Air M3</div>
|
||
</div>
|
||
</td>
|
||
<td class="px-4 py-3 text-sm text-gray-700 font-medium">¥10,499.00</td>
|
||
<td class="px-4 py-3">
|
||
<span class="px-2 py-1 text-xs rounded-full bg-yellow-100 text-yellow-800">配送中</span>
|
||
</td>
|
||
<td class="px-4 py-3 text-sm text-gray-600">2026-02-05 16:45</td>
|
||
<td class="px-4 py-3">
|
||
<div class="flex space-x-2">
|
||
<button class="text-primary hover:text-primary/80 transition-all-300 order-detail-btn" data-order-id="ORD20260205001">
|
||
<i class="fa fa-eye"></i>
|
||
</button>
|
||
<button class="text-gray-600 hover:text-gray-800 transition-all-300 order-edit-btn" data-order-id="ORD20260205001">
|
||
<i class="fa fa-edit"></i>
|
||
</button>
|
||
<button class="text-danger hover:text-danger/80 transition-all-300 order-delete-btn" data-order-id="ORD20260205001">
|
||
<i class="fa fa-trash"></i>
|
||
</button>
|
||
<button class="text-gray-400 cursor-not-allowed">
|
||
<i class="fa fa-credit-card"></i>
|
||
</button>
|
||
</div>
|
||
</td>
|
||
</tr>
|
||
<tr class="hover:bg-gray-50 transition-all-300">
|
||
<td class="px-4 py-3">
|
||
<input type="checkbox" class="order-checkbox w-4 h-4 text-primary focus:ring-primary border-gray-300 rounded">
|
||
</td>
|
||
<td class="px-4 py-3 text-sm text-gray-700">ORD20260205002</td>
|
||
<td class="px-4 py-3 text-sm text-gray-700">
|
||
<div>
|
||
<div class="font-medium">线下服务</div>
|
||
<div class="text-xs text-gray-500">类型: 设备维修</div>
|
||
</div>
|
||
</td>
|
||
<td class="px-4 py-3 text-sm text-gray-700 font-medium">¥299.00</td>
|
||
<td class="px-4 py-3">
|
||
<span class="px-2 py-1 text-xs rounded-full bg-red-100 text-red-800">异常</span>
|
||
</td>
|
||
<td class="px-4 py-3 text-sm text-gray-600">2026-02-05 14:20</td>
|
||
<td class="px-4 py-3">
|
||
<div class="flex space-x-2">
|
||
<button class="text-primary hover:text-primary/80 transition-all-300 order-detail-btn" data-order-id="ORD20260205002">
|
||
<i class="fa fa-eye"></i>
|
||
</button>
|
||
<button class="text-gray-600 hover:text-gray-800 transition-all-300 order-edit-btn" data-order-id="ORD20260205002">
|
||
<i class="fa fa-edit"></i>
|
||
</button>
|
||
<button class="text-danger hover:text-danger/80 transition-all-300 order-delete-btn" data-order-id="ORD20260205002">
|
||
<i class="fa fa-trash"></i>
|
||
</button>
|
||
<button class="text-gray-400 cursor-not-allowed">
|
||
<i class="fa fa-credit-card"></i>
|
||
</button>
|
||
</div>
|
||
</td>
|
||
</tr>
|
||
<tr class="hover:bg-gray-50 transition-all-300">
|
||
<td class="px-4 py-3">
|
||
<input type="checkbox" class="order-checkbox w-4 h-4 text-primary focus:ring-primary border-gray-300 rounded">
|
||
</td>
|
||
<td class="px-4 py-3 text-sm text-gray-700">ORD20260204001</td>
|
||
<td class="px-4 py-3 text-sm text-gray-700">
|
||
<div>
|
||
<div class="font-medium">智能手表</div>
|
||
<div class="text-xs text-gray-500">型号: Apple Watch Ultra 2</div>
|
||
</div>
|
||
</td>
|
||
<td class="px-4 py-3 text-sm text-gray-700 font-medium">¥6,299.00</td>
|
||
<td class="px-4 py-3">
|
||
<span class="px-2 py-1 text-xs rounded-full bg-green-100 text-green-800">已完成</span>
|
||
</td>
|
||
<td class="px-4 py-3 text-sm text-gray-600">2026-02-04 09:10</td>
|
||
<td class="px-4 py-3">
|
||
<div class="flex space-x-2">
|
||
<button class="text-primary hover:text-primary/80 transition-all-300 order-detail-btn" data-order-id="ORD20260204001">
|
||
<i class="fa fa-eye"></i>
|
||
</button>
|
||
<button class="text-gray-600 hover:text-gray-800 transition-all-300 order-edit-btn" data-order-id="ORD20260204001">
|
||
<i class="fa fa-edit"></i>
|
||
</button>
|
||
<button class="text-danger hover:text-danger/80 transition-all-300 order-delete-btn" data-order-id="ORD20260204001">
|
||
<i class="fa fa-trash"></i>
|
||
</button>
|
||
<button class="text-gray-400 cursor-not-allowed">
|
||
<i class="fa fa-credit-card"></i>
|
||
</button>
|
||
</div>
|
||
</td>
|
||
</tr>
|
||
<tr class="hover:bg-gray-50 transition-all-300">
|
||
<td class="px-4 py-3">
|
||
<input type="checkbox" class="order-checkbox w-4 h-4 text-primary focus:ring-primary border-gray-300 rounded">
|
||
</td>
|
||
<td class="px-4 py-3 text-sm text-gray-700">ORD20260206003</td>
|
||
<td class="px-4 py-3 text-sm text-gray-700">
|
||
<div>
|
||
<div class="font-medium">换单服务</div>
|
||
<div class="text-xs text-gray-500">类型: 标准换单服务</div>
|
||
</div>
|
||
</td>
|
||
<td class="px-4 py-3 text-sm text-gray-700 font-medium">¥199.00</td>
|
||
<td class="px-4 py-3">
|
||
<span class="px-2 py-1 text-xs rounded-full bg-blue-100 text-blue-800">处理中</span>
|
||
</td>
|
||
<td class="px-4 py-3 text-sm text-gray-600">2026-02-06 14:20</td>
|
||
<td class="px-4 py-3">
|
||
<div class="flex space-x-2">
|
||
<button class="text-primary hover:text-primary/80 transition-all-300 order-detail-btn" data-order-id="ORD20260206003">
|
||
<i class="fa fa-eye"></i>
|
||
</button>
|
||
<button class="text-gray-600 hover:text-gray-800 transition-all-300 order-edit-btn" data-order-id="ORD20260206003">
|
||
<i class="fa fa-edit"></i>
|
||
</button>
|
||
<button class="text-danger hover:text-danger/80 transition-all-300 order-delete-btn" data-order-id="ORD20260206003">
|
||
<i class="fa fa-trash"></i>
|
||
</button>
|
||
<button class="text-gray-600 hover:text-primary transition-all-300 order-pay-btn" data-order-id="ORD20260206003">
|
||
<i class="fa fa-credit-card"></i>
|
||
</button>
|
||
</div>
|
||
</td>
|
||
</tr>
|
||
<tr class="hover:bg-gray-50 transition-all-300">
|
||
<td class="px-4 py-3">
|
||
<input type="checkbox" class="order-checkbox w-4 h-4 text-primary focus:ring-primary border-gray-300 rounded">
|
||
</td>
|
||
<td class="px-4 py-3 text-sm text-gray-700">ORD20260205003</td>
|
||
<td class="px-4 py-3 text-sm text-gray-700">
|
||
<div>
|
||
<div class="font-medium">换单服务</div>
|
||
<div class="text-xs text-gray-500">类型: 加急换单服务</div>
|
||
</div>
|
||
</td>
|
||
<td class="px-4 py-3 text-sm text-gray-700 font-medium">¥299.00</td>
|
||
<td class="px-4 py-3">
|
||
<span class="px-2 py-1 text-xs rounded-full bg-green-100 text-green-800">已完成</span>
|
||
</td>
|
||
<td class="px-4 py-3 text-sm text-gray-600">2026-02-05 11:15</td>
|
||
<td class="px-4 py-3">
|
||
<div class="flex space-x-2">
|
||
<button class="text-primary hover:text-primary/80 transition-all-300 order-detail-btn" data-order-id="ORD20260205003">
|
||
<i class="fa fa-eye"></i>
|
||
</button>
|
||
<button class="text-gray-600 hover:text-gray-800 transition-all-300 order-edit-btn" data-order-id="ORD20260205003">
|
||
<i class="fa fa-edit"></i>
|
||
</button>
|
||
<button class="text-danger hover:text-danger/80 transition-all-300 order-delete-btn" data-order-id="ORD20260205003">
|
||
<i class="fa fa-trash"></i>
|
||
</button>
|
||
<button class="text-gray-400 cursor-not-allowed">
|
||
<i class="fa fa-credit-card"></i>
|
||
</button>
|
||
</div>
|
||
</td>
|
||
</tr>
|
||
<tr class="hover:bg-gray-50 transition-all-300">
|
||
<td class="px-4 py-3">
|
||
<input type="checkbox" class="order-checkbox w-4 h-4 text-primary focus:ring-primary border-gray-300 rounded">
|
||
</td>
|
||
<td class="px-4 py-3 text-sm text-gray-700">ORD20260204002</td>
|
||
<td class="px-4 py-3 text-sm text-gray-700">
|
||
<div>
|
||
<div class="font-medium">换单服务</div>
|
||
<div class="text-xs text-gray-500">类型: 企业级换单服务</div>
|
||
</div>
|
||
</td>
|
||
<td class="px-4 py-3 text-sm text-gray-700 font-medium">¥399.00</td>
|
||
<td class="px-4 py-3">
|
||
<span class="px-2 py-1 text-xs rounded-full bg-yellow-100 text-yellow-800">配送中</span>
|
||
</td>
|
||
<td class="px-4 py-3 text-sm text-gray-600">2026-02-04 16:30</td>
|
||
<td class="px-4 py-3">
|
||
<div class="flex space-x-2">
|
||
<button class="text-primary hover:text-primary/80 transition-all-300 order-detail-btn" data-order-id="ORD20260204002">
|
||
<i class="fa fa-eye"></i>
|
||
</button>
|
||
<button class="text-gray-600 hover:text-gray-800 transition-all-300 order-edit-btn" data-order-id="ORD20260204002">
|
||
<i class="fa fa-edit"></i>
|
||
</button>
|
||
<button class="text-danger hover:text-danger/80 transition-all-300 order-delete-btn" data-order-id="ORD20260204002">
|
||
<i class="fa fa-trash"></i>
|
||
</button>
|
||
<button class="text-gray-400 cursor-not-allowed">
|
||
<i class="fa fa-credit-card"></i>
|
||
</button>
|
||
</div>
|
||
</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
<!-- 分页 -->
|
||
<div class="px-4 py-3 flex items-center justify-between border-t border-gray-200 sm:px-6">
|
||
<div class="flex-1 flex justify-between sm:hidden">
|
||
<a href="#" class="relative inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50">
|
||
上一页
|
||
</a>
|
||
<a href="#" class="ml-3 relative inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50">
|
||
下一页
|
||
</a>
|
||
</div>
|
||
<div class="hidden sm:flex-1 sm:flex sm:items-center sm:justify-between">
|
||
<div>
|
||
<p class="text-sm text-gray-700">
|
||
显示第 <span class="font-medium">1</span> 到 <span class="font-medium">5</span> 条，共 <span class="font-medium">48</span> 条记录
|
||
</p>
|
||
</div>
|
||
<div>
|
||
<nav class="relative z-0 inline-flex rounded-md shadow-sm -space-x-px" aria-label="Pagination">
|
||
<a href="#" class="relative inline-flex items-center px-2 py-2 rounded-l-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50">
|
||
<span class="sr-only">上一页</span>
|
||
<i class="fa fa-chevron-left"></i>
|
||
</a>
|
||
<a href="#" aria-current="page" class="z-10 bg-primary border-primary text-white relative inline-flex items-center px-4 py-2 border text-sm font-medium">
|
||
1
|
||
</a>
|
||
<a href="#" class="bg-white border-gray-300 text-gray-500 hover:bg-gray-50 relative inline-flex items-center px-4 py-2 border text-sm font-medium">
|
||
2
|
||
</a>
|
||
<a href="#" class="bg-white border-gray-300 text-gray-500 hover:bg-gray-50 relative inline-flex items-center px-4 py-2 border text-sm font-medium">
|
||
3
|
||
</a>
|
||
<span class="relative inline-flex items-center px-4 py-2 border border-gray-300 bg-white text-sm font-medium text-gray-700">
|
||
...
|
||
</span>
|
||
<a href="#" class="bg-white border-gray-300 text-gray-500 hover:bg-gray-50 relative inline-flex items-center px-4 py-2 border text-sm font-medium">
|
||
10
|
||
</a>
|
||
<a href="#" class="relative inline-flex items-center px-2 py-2 rounded-r-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50">
|
||
<span class="sr-only">下一页</span>
|
||
<i class="fa fa-chevron-right"></i>
|
||
</a>
|
||
</nav>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 客户中心 -->
|
||
<div id="customer-center" class="module-panel hidden">
|
||
<div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
|
||
<!-- 个人信息和账号管理 -->
|
||
<div class="lg:col-span-2">
|
||
<!-- 个人信息 -->
|
||
<div class="bg-white rounded-lg shadow-sm p-6 mb-6">
|
||
<h3 class="text-lg font-bold text-gray-800 mb-4">个人信息</h3>
|
||
<form class="space-y-4" id="personalInfoForm">
|
||
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||
<div>
|
||
<label class="block text-sm font-medium text-gray-700 mb-1">姓名</label>
|
||
<input type="text" value="张三" class="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent">
|
||
</div>
|
||
<div>
|
||
<label class="block text-sm font-medium text-gray-700 mb-1">性别</label>
|
||
<select class="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent">
|
||
<option value="male">男</option>
|
||
<option value="female">女</option>
|
||
<option value="other">其他</option>
|
||
</select>
|
||
</div>
|
||
</div>
|
||
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||
<div>
|
||
<label class="block text-sm font-medium text-gray-700 mb-1">手机号</label>
|
||
<div class="relative">
|
||
<input type="tel" value="138****6789" class="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent">
|
||
<button type="button" class="absolute right-2 top-1/2 transform -translate-y-1/2 text-primary text-sm">
|
||
修改
|
||
</button>
|
||
</div>
|
||
</div>
|
||
<div>
|
||
<label class="block text-sm font-medium text-gray-700 mb-1">邮箱</label>
|
||
<div class="relative">
|
||
<input type="email" value="zhangsan@example.com" class="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent">
|
||
<button type="button" class="absolute right-2 top-1/2 transform -translate-y-1/2 text-primary text-sm">
|
||
修改
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div>
|
||
<label class="block text-sm font-medium text-gray-700 mb-1">企业名称</label>
|
||
<input type="text" value="北京科技有限公司" class="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent">
|
||
</div>
|
||
<div>
|
||
<label class="block text-sm font-medium text-gray-700 mb-1">税号</label>
|
||
<input type="text" value="91110000XXXXXXXXXX" class="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent">
|
||
</div>
|
||
<div class="flex justify-end space-x-3">
|
||
<button type="button" class="px-4 py-2 border border-gray-300 rounded-md text-gray-700 hover:bg-gray-50 transition-all-300">取消</button>
|
||
<button type="button" class="px-4 py-2 bg-primary text-white rounded-md hover:bg-primary/90 transition-all-300" id="savePersonalInfo">保存修改</button>
|
||
</div>
|
||
</form>
|
||
</div>
|
||
|
||
<!-- 当前使用的服务 -->
|
||
<div class="bg-white rounded-lg shadow-sm p-6 mb-6">
|
||
<h3 class="text-lg font-bold text-gray-800 mb-4">当前使用的服务</h3>
|
||
<div class="space-y-4">
|
||
<div class="border border-gray-200 rounded-md p-4 hover:shadow-sm transition-all-300">
|
||
<div class="flex justify-between items-start">
|
||
<div>
|
||
<div class="font-medium text-gray-800">EP0017 小包裹物流产品</div>
|
||
<div class="text-sm text-gray-500 mt-1">服务期限: 2026-02-01 至 2027-02-01</div>
|
||
<div class="text-sm text-green-600 mt-1">状态: 活跃</div>
|
||
</div>
|
||
<div class="text-right">
|
||
<div class="font-medium text-gray-800">$1.00/单</div>
|
||
<button class="mt-2 px-3 py-1 bg-primary text-white rounded-md hover:bg-primary/90 transition-all-300 text-sm">查看详情</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="border border-gray-200 rounded-md p-4 hover:shadow-sm transition-all-300">
|
||
<div class="flex justify-between items-start">
|
||
<div>
|
||
<div class="font-medium text-gray-800">企业级换单服务</div>
|
||
<div class="text-sm text-gray-500 mt-1">服务期限: 2026-01-15 至 2027-01-15</div>
|
||
<div class="text-sm text-green-600 mt-1">状态: 活跃</div>
|
||
</div>
|
||
<div class="text-right">
|
||
<div class="font-medium text-gray-800">$2.00/单</div>
|
||
<button class="mt-2 px-3 py-1 bg-primary text-white rounded-md hover:bg-primary/90 transition-all-300 text-sm">查看详情</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 产品列表及报价 -->
|
||
<div class="bg-white rounded-lg shadow-sm p-6">
|
||
<h3 class="text-lg font-bold text-gray-800 mb-4">产品列表及报价</h3>
|
||
<div class="overflow-x-auto">
|
||
<table class="w-full">
|
||
<thead class="bg-gray-50 border-b border-gray-200">
|
||
<tr>
|
||
<th class="px-4 py-3 text-left text-sm font-medium text-gray-600">产品名称</th>
|
||
<th class="px-4 py-3 text-left text-sm font-medium text-gray-600">产品描述</th>
|
||
<th class="px-4 py-3 text-left text-sm font-medium text-gray-600">报价</th>
|
||
<th class="px-4 py-3 text-left text-sm font-medium text-gray-600">操作</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody class="divide-y divide-gray-200">
|
||
<tr class="hover:bg-gray-50 transition-all-300">
|
||
<td class="px-4 py-3 text-sm text-gray-700 font-medium">标准换单服务</td>
|
||
<td class="px-4 py-3 text-sm text-gray-600">48小时上网，3日交付</td>
|
||
<td class="px-4 py-3 text-sm text-gray-700 font-medium">$1.00/单</td>
|
||
<td class="px-4 py-3">
|
||
<button class="px-3 py-1 bg-primary text-white rounded-md hover:bg-primary/90 transition-all-300 text-sm">购买</button>
|
||
</td>
|
||
</tr>
|
||
<tr class="hover:bg-gray-50 transition-all-300">
|
||
<td class="px-4 py-3 text-sm text-gray-700 font-medium">加急换单服务</td>
|
||
<td class="px-4 py-3 text-sm text-gray-600">24小时上网，当天交付</td>
|
||
<td class="px-4 py-3 text-sm text-gray-700 font-medium">$2.00/单</td>
|
||
<td class="px-4 py-3">
|
||
<button class="px-3 py-1 bg-primary text-white rounded-md hover:bg-primary/90 transition-all-300 text-sm">购买</button>
|
||
</td>
|
||
</tr>
|
||
<tr class="hover:bg-gray-50 transition-all-300">
|
||
<td class="px-4 py-3 text-sm text-gray-700 font-medium">企业级换单服务</td>
|
||
<td class="px-4 py-3 text-sm text-gray-600">24小时上网，3日交付</td>
|
||
<td class="px-4 py-3 text-sm text-gray-700 font-medium">$2.00/单</td>
|
||
<td class="px-4 py-3">
|
||
<button class="px-3 py-1 bg-primary text-white rounded-md hover:bg-primary/90 transition-all-300 text-sm">购买</button>
|
||
</td>
|
||
</tr>
|
||
<tr class="hover:bg-gray-50 transition-all-300">
|
||
<td class="px-4 py-3 text-sm text-gray-700 font-medium">定制化换单服务</td>
|
||
<td class="px-4 py-3 text-sm text-gray-600">根据企业需求定制的换单服务解决方案</td>
|
||
<td class="px-4 py-3 text-sm text-gray-700 font-medium">联系销售</td>
|
||
<td class="px-4 py-3">
|
||
<button class="px-3 py-1 bg-primary text-white rounded-md hover:bg-primary/90 transition-all-300 text-sm">咨询</button>
|
||
</td>
|
||
</tr>
|
||
<tr class="hover:bg-gray-50 transition-all-300">
|
||
<td class="px-4 py-3 text-sm text-gray-700 font-medium">EP0017 小包裹物流产品</td>
|
||
<td class="px-4 py-3 text-sm text-gray-600">24小时上网，3日达</td>
|
||
<td class="px-4 py-3 text-sm text-gray-700 font-medium">$1.00/单</td>
|
||
<td class="px-4 py-3">
|
||
<button class="px-3 py-1 bg-primary text-white rounded-md hover:bg-primary/90 transition-all-300 text-sm">购买</button>
|
||
</td>
|
||
</tr>
|
||
<tr class="hover:bg-gray-50 transition-all-300">
|
||
<td class="px-4 py-3 text-sm text-gray-700 font-medium">EP0018 小包裹物流产品</td>
|
||
<td class="px-4 py-3 text-sm text-gray-600">24小时上网 5日达</td>
|
||
<td class="px-4 py-3 text-sm text-gray-700 font-medium">$2.00/单</td>
|
||
<td class="px-4 py-3">
|
||
<button class="px-3 py-1 bg-primary text-white rounded-md hover:bg-primary/90 transition-all-300 text-sm">购买</button>
|
||
</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- API设置 -->
|
||
<div id="apiSettingsPanel" class="bg-white rounded-lg shadow-sm p-6 mt-6 hidden">
|
||
<h3 class="text-lg font-bold text-gray-800 mb-6">API设置</h3>
|
||
|
||
<!-- API-Key管理 -->
|
||
<div class="mb-8">
|
||
<h4 class="text-md font-medium text-gray-700 mb-4 flex items-center">
|
||
<i class="fa fa-key text-primary mr-2"></i>
|
||
API-Key管理
|
||
<button class="ml-auto px-4 py-2 bg-primary text-white rounded-md hover:bg-primary/90 transition-all-300 text-sm flex items-center space-x-1" id="createApiKeyBtn">
|
||
<i class="fa fa-plus"></i>
|
||
<span>创建新API-Key</span>
|
||
</button>
|
||
</h4>
|
||
|
||
<div class="overflow-x-auto">
|
||
<table class="min-w-full divide-y divide-gray-200">
|
||
<thead class="bg-gray-50">
|
||
<tr>
|
||
<th scope="col" class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
|
||
API-Key
|
||
</th>
|
||
<th scope="col" class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
|
||
权限
|
||
</th>
|
||
<th scope="col" class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
|
||
创建时间
|
||
</th>
|
||
<th scope="col" class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
|
||
过期时间
|
||
</th>
|
||
<th scope="col" class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
|
||
状态
|
||
</th>
|
||
<th scope="col" class="px-4 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">
|
||
操作
|
||
</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody class="bg-white divide-y divide-gray-200">
|
||
<tr>
|
||
<td class="px-4 py-3 whitespace-nowrap">
|
||
<div class="font-mono text-sm">sk_live_51J8XQ2E7eZ7eZ7eZ7eZ7eZ7eZ7eZ7eZ7eZ7eZ7eZ7eZ</div>
|
||
</td>
|
||
<td class="px-4 py-3 whitespace-nowrap">
|
||
<span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">
|
||
读写
|
||
</span>
|
||
</td>
|
||
<td class="px-4 py-3 whitespace-nowrap text-sm text-gray-500">
|
||
2026-01-01 10:00
|
||
</td>
|
||
<td class="px-4 py-3 whitespace-nowrap text-sm text-gray-500">
|
||
2027-01-01 10:00
|
||
</td>
|
||
<td class="px-4 py-3 whitespace-nowrap">
|
||
<span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">
|
||
启用
|
||
</span>
|
||
</td>
|
||
<td class="px-4 py-3 whitespace-nowrap text-right text-sm font-medium">
|
||
<div class="flex justify-end space-x-2">
|
||
<button class="text-primary hover:text-primary/80 transition-all-300" title="重新生成">
|
||
<i class="fa fa-refresh"></i>
|
||
</button>
|
||
<button class="text-gray-600 hover:text-gray-800 transition-all-300" title="禁用">
|
||
<i class="fa fa-toggle-on"></i>
|
||
</button>
|
||
<button class="text-danger hover:text-danger/80 transition-all-300" title="删除">
|
||
<i class="fa fa-trash"></i>
|
||
</button>
|
||
</div>
|
||
</td>
|
||
</tr>
|
||
<tr>
|
||
<td class="px-4 py-3 whitespace-nowrap">
|
||
<div class="font-mono text-sm">sk_test_51J8XQ2E7eZ7eZ7eZ7eZ7eZ7eZ7eZ7eZ7eZ7eZ7eZ7eZ</div>
|
||
</td>
|
||
<td class="px-4 py-3 whitespace-nowrap">
|
||
<span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-blue-100 text-blue-800">
|
||
只读
|
||
</span>
|
||
</td>
|
||
<td class="px-4 py-3 whitespace-nowrap text-sm text-gray-500">
|
||
2026-01-15 14:30
|
||
</td>
|
||
<td class="px-4 py-3 whitespace-nowrap text-sm text-gray-500">
|
||
2026-06-15 14:30
|
||
</td>
|
||
<td class="px-4 py-3 whitespace-nowrap">
|
||
<span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-red-100 text-red-800">
|
||
禁用
|
||
</span>
|
||
</td>
|
||
<td class="px-4 py-3 whitespace-nowrap text-right text-sm font-medium">
|
||
<div class="flex justify-end space-x-2">
|
||
<button class="text-primary hover:text-primary/80 transition-all-300" title="重新生成">
|
||
<i class="fa fa-refresh"></i>
|
||
</button>
|
||
<button class="text-gray-600 hover:text-gray-800 transition-all-300" title="启用">
|
||
<i class="fa fa-toggle-off"></i>
|
||
</button>
|
||
<button class="text-danger hover:text-danger/80 transition-all-300" title="删除">
|
||
<i class="fa fa-trash"></i>
|
||
</button>
|
||
</div>
|
||
</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
|
||
<div class="mt-4 text-sm text-gray-500 bg-gray-50 p-3 rounded-md">
|
||
<p>API-Key用于调用我们的API接口，请妥善保管。如果API-Key泄露，请及时重新生成。</p>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 接口文档 -->
|
||
<div class="mb-8">
|
||
<h4 class="text-md font-medium text-gray-700 mb-4 flex items-center">
|
||
<i class="fa fa-book text-primary mr-2"></i>
|
||
接口文档
|
||
</h4>
|
||
|
||
<div class="bg-gray-50 rounded-lg p-4 mb-4">
|
||
<div class="mb-4">
|
||
<div class="text-sm font-medium text-gray-700 mb-2">API版本</div>
|
||
<select class="px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent" id="apiVersionSelect">
|
||
<option value="v1">v1.0</option>
|
||
<option value="v2">v2.0 (推荐)</option>
|
||
</select>
|
||
</div>
|
||
<div class="flex space-x-3">
|
||
<a href="#" class="px-4 py-2 bg-primary text-white rounded-md hover:bg-primary/90 transition-all-300 text-sm flex items-center space-x-1">
|
||
<i class="fa fa-external-link"></i>
|
||
<span>查看接口文档</span>
|
||
</a>
|
||
<a href="#" class="px-4 py-2 bg-gray-200 text-gray-700 rounded-md hover:bg-gray-300 transition-all-300 text-sm flex items-center space-x-1">
|
||
<i class="fa fa-download"></i>
|
||
<span>下载SDK</span>
|
||
</a>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 接口订阅管理 -->
|
||
<div class="mt-6">
|
||
<h5 class="text-sm font-medium text-gray-700 mb-3">接口订阅管理</h5>
|
||
<div class="overflow-x-auto">
|
||
<table class="min-w-full divide-y divide-gray-200">
|
||
<thead class="bg-gray-50">
|
||
<tr>
|
||
<th scope="col" class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
|
||
接口名称
|
||
</th>
|
||
<th scope="col" class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
|
||
路径
|
||
</th>
|
||
<th scope="col" class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
|
||
方法
|
||
</th>
|
||
<th scope="col" class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
|
||
状态
|
||
</th>
|
||
<th scope="col" class="px-4 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">
|
||
操作
|
||
</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody class="bg-white divide-y divide-gray-200">
|
||
<tr>
|
||
<td class="px-4 py-3 whitespace-nowrap text-sm font-medium text-gray-900">
|
||
获取订单列表
|
||
</td>
|
||
<td class="px-4 py-3 whitespace-nowrap text-sm text-gray-500">
|
||
/api/orders
|
||
</td>
|
||
<td class="px-4 py-3 whitespace-nowrap">
|
||
<span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-blue-100 text-blue-800">
|
||
GET
|
||
</span>
|
||
</td>
|
||
<td class="px-4 py-3 whitespace-nowrap">
|
||
<span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">
|
||
已订阅
|
||
</span>
|
||
</td>
|
||
<td class="px-4 py-3 whitespace-nowrap text-right text-sm font-medium">
|
||
<button class="text-primary hover:text-primary/80 transition-all-300">
|
||
查看详情
|
||
</button>
|
||
</td>
|
||
</tr>
|
||
<tr>
|
||
<td class="px-4 py-3 whitespace-nowrap text-sm font-medium text-gray-900">
|
||
创建订单
|
||
</td>
|
||
<td class="px-4 py-3 whitespace-nowrap text-sm text-gray-500">
|
||
/api/orders
|
||
</td>
|
||
<td class="px-4 py-3 whitespace-nowrap">
|
||
<span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">
|
||
POST
|
||
</span>
|
||
</td>
|
||
<td class="px-4 py-3 whitespace-nowrap">
|
||
<span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">
|
||
已订阅
|
||
</span>
|
||
</td>
|
||
<td class="px-4 py-3 whitespace-nowrap text-right text-sm font-medium">
|
||
<button class="text-primary hover:text-primary/80 transition-all-300">
|
||
查看详情
|
||
</button>
|
||
</td>
|
||
</tr>
|
||
<tr>
|
||
<td class="px-4 py-3 whitespace-nowrap text-sm font-medium text-gray-900">
|
||
获取物流信息
|
||
</td>
|
||
<td class="px-4 py-3 whitespace-nowrap text-sm text-gray-500">
|
||
/api/tracking/{orderId}
|
||
</td>
|
||
<td class="px-4 py-3 whitespace-nowrap">
|
||
<span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-blue-100 text-blue-800">
|
||
GET
|
||
</span>
|
||
</td>
|
||
<td class="px-4 py-3 whitespace-nowrap">
|
||
<span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-gray-100 text-gray-800">
|
||
未订阅
|
||
</span>
|
||
</td>
|
||
<td class="px-4 py-3 whitespace-nowrap text-right text-sm font-medium">
|
||
<button class="text-primary hover:text-primary/80 transition-all-300">
|
||
订阅
|
||
</button>
|
||
</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Webhook设置 -->
|
||
<div>
|
||
<h4 class="text-md font-medium text-gray-700 mb-4 flex items-center">
|
||
<i class="fa fa-plug text-primary mr-2"></i>
|
||
Webhook设置
|
||
</h4>
|
||
|
||
<div class="bg-gray-50 rounded-lg p-4 mb-6">
|
||
<div class="mb-4">
|
||
<div class="text-sm font-medium text-gray-700 mb-2">Webhook URL</div>
|
||
<input type="url" value="https://your-server.com/webhook" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent">
|
||
</div>
|
||
|
||
<div class="mb-4">
|
||
<div class="text-sm font-medium text-gray-700 mb-2">订阅事件</div>
|
||
<div class="space-y-2">
|
||
<div class="flex items-center">
|
||
<input type="checkbox" checked class="mr-2">
|
||
<span class="text-sm">订单状态变更</span>
|
||
</div>
|
||
<div class="flex items-center">
|
||
<input type="checkbox" checked class="mr-2">
|
||
<span class="text-sm">物流信息更新</span>
|
||
</div>
|
||
<div class="flex items-center">
|
||
<input type="checkbox" class="mr-2">
|
||
<span class="text-sm">账单生成</span>
|
||
</div>
|
||
<div class="flex items-center">
|
||
<input type="checkbox" class="mr-2">
|
||
<span class="text-sm">库存预警</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="flex space-x-3">
|
||
<button class="px-4 py-2 bg-primary text-white rounded-md hover:bg-primary/90 transition-all-300 text-sm flex items-center space-x-1">
|
||
<i class="fa fa-save"></i>
|
||
<span>保存设置</span>
|
||
</button>
|
||
<button class="px-4 py-2 bg-gray-200 text-gray-700 rounded-md hover:bg-gray-300 transition-all-300 text-sm flex items-center space-x-1">
|
||
<i class="fa fa-paper-plane"></i>
|
||
<span>发送测试事件</span>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Webhook历史记录 -->
|
||
<div>
|
||
<h5 class="text-sm font-medium text-gray-700 mb-3">Webhook历史记录</h5>
|
||
<div class="overflow-x-auto">
|
||
<table class="min-w-full divide-y divide-gray-200">
|
||
<thead class="bg-gray-50">
|
||
<tr>
|
||
<th scope="col" class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
|
||
事件类型
|
||
</th>
|
||
<th scope="col" class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
|
||
时间
|
||
</th>
|
||
<th scope="col" class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
|
||
状态
|
||
</th>
|
||
<th scope="col" class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
|
||
响应码
|
||
</th>
|
||
<th scope="col" class="px-4 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">
|
||
操作
|
||
</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody class="bg-white divide-y divide-gray-200">
|
||
<tr>
|
||
<td class="px-4 py-3 whitespace-nowrap text-sm text-gray-900">
|
||
订单状态变更
|
||
</td>
|
||
<td class="px-4 py-3 whitespace-nowrap text-sm text-gray-500">
|
||
2026-02-06 10:30:00
|
||
</td>
|
||
<td class="px-4 py-3 whitespace-nowrap">
|
||
<span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">
|
||
成功
|
||
</span>
|
||
</td>
|
||
<td class="px-4 py-3 whitespace-nowrap text-sm text-gray-500">
|
||
200
|
||
</td>
|
||
<td class="px-4 py-3 whitespace-nowrap text-right text-sm font-medium">
|
||
<button class="text-primary hover:text-primary/80 transition-all-300" title="查看详情">
|
||
<i class="fa fa-eye"></i>
|
||
</button>
|
||
</td>
|
||
</tr>
|
||
<tr>
|
||
<td class="px-4 py-3 whitespace-nowrap text-sm text-gray-900">
|
||
物流信息更新
|
||
</td>
|
||
<td class="px-4 py-3 whitespace-nowrap text-sm text-gray-500">
|
||
2026-02-06 09:15:00
|
||
</td>
|
||
<td class="px-4 py-3 whitespace-nowrap">
|
||
<span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-red-100 text-red-800">
|
||
失败
|
||
</span>
|
||
</td>
|
||
<td class="px-4 py-3 whitespace-nowrap text-sm text-gray-500">
|
||
500
|
||
</td>
|
||
<td class="px-4 py-3 whitespace-nowrap text-right text-sm font-medium">
|
||
<div class="flex justify-end space-x-2">
|
||
<button class="text-primary hover:text-primary/80 transition-all-300" title="查看详情">
|
||
<i class="fa fa-eye"></i>
|
||
</button>
|
||
<button class="text-gray-600 hover:text-gray-800 transition-all-300" title="重试">
|
||
<i class="fa fa-refresh"></i>
|
||
</button>
|
||
</div>
|
||
</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 账号设置 -->
|
||
<div>
|
||
<!-- 账号管理 -->
|
||
<div class="bg-white rounded-lg shadow-sm p-6 mb-6">
|
||
<h3 class="text-lg font-bold text-gray-800 mb-4">账号管理</h3>
|
||
<div class="space-y-4">
|
||
<div class="flex justify-between items-center p-3 hover:bg-gray-50 rounded-md transition-all-300 cursor-pointer account-setting-item" data-target="changePassword">
|
||
<div>
|
||
<div class="font-medium text-gray-700">修改密码</div>
|
||
<div class="text-sm text-gray-500 mt-1">定期修改密码以保护账号安全</div>
|
||
</div>
|
||
<button class="text-primary hover:text-primary/80 transition-all-300">
|
||
<i class="fa fa-chevron-right"></i>
|
||
</button>
|
||
</div>
|
||
<div class="border-t border-gray-100 pt-4 flex justify-between items-center p-3 hover:bg-gray-50 rounded-md transition-all-300 cursor-pointer account-setting-item" data-target="accountBinding">
|
||
<div>
|
||
<div class="font-medium text-gray-700">账号绑定</div>
|
||
<div class="text-sm text-gray-500 mt-1">绑定手机、邮箱等账号</div>
|
||
</div>
|
||
<button class="text-primary hover:text-primary/80 transition-all-300">
|
||
<i class="fa fa-chevron-right"></i>
|
||
</button>
|
||
</div>
|
||
<div class="border-t border-gray-100 pt-4 flex justify-between items-center p-3 hover:bg-gray-50 rounded-md transition-all-300 cursor-pointer account-setting-item" data-target="deviceManagement">
|
||
<div>
|
||
<div class="font-medium text-gray-700">登录设备管理</div>
|
||
<div class="text-sm text-gray-500 mt-1">查看并管理登录设备</div>
|
||
</div>
|
||
<button class="text-primary hover:text-primary/80 transition-all-300">
|
||
<i class="fa fa-chevron-right"></i>
|
||
</button>
|
||
</div>
|
||
<div class="border-t border-gray-100 pt-4 flex justify-between items-center p-3 hover:bg-gray-50 rounded-md transition-all-300 cursor-pointer account-setting-item" data-target="securitySettings">
|
||
<div>
|
||
<div class="font-medium text-gray-700">安全设置</div>
|
||
<div class="text-sm text-gray-500 mt-1">两步验证等安全设置</div>
|
||
</div>
|
||
<button class="text-primary hover:text-primary/80 transition-all-300">
|
||
<i class="fa fa-chevron-right"></i>
|
||
</button>
|
||
</div>
|
||
<div class="border-t border-gray-100 pt-4 flex justify-between items-center p-3 hover:bg-gray-50 rounded-md transition-all-300 cursor-pointer account-setting-item" data-target="apiSettings">
|
||
<div>
|
||
<div class="font-medium text-gray-700">API设置</div>
|
||
<div class="text-sm text-gray-500 mt-1">查看、获取、删除API-Key，管理接口文档和webhook</div>
|
||
</div>
|
||
<button class="text-primary hover:text-primary/80 transition-all-300">
|
||
<i class="fa fa-chevron-right"></i>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 偏好设置 -->
|
||
<div class="bg-white rounded-lg shadow-sm p-6">
|
||
<h3 class="text-lg font-bold text-gray-800 mb-4">偏好设置</h3>
|
||
<div class="space-y-4">
|
||
<div class="flex justify-between items-center">
|
||
<div class="font-medium text-gray-700">界面语言</div>
|
||
<select class="px-3 py-1 border border-gray-300 rounded-md text-gray-700 focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent" id="languageSelect">
|
||
<option value="zh-CN">简体中文</option>
|
||
<option value="en-US">English</option>
|
||
</select>
|
||
</div>
|
||
<div class="border-t border-gray-100 pt-4">
|
||
<div class="font-medium text-gray-700 mb-2">通知偏好</div>
|
||
<div class="space-y-3">
|
||
<div class="flex items-center justify-between">
|
||
<label for="notify-email" class="block text-sm text-gray-700">邮件通知</label>
|
||
<label class="relative inline-flex items-center cursor-pointer">
|
||
<input type="checkbox" id="notify-email" checked class="sr-only peer">
|
||
<div class="w-11 h-6 bg-gray-200 peer-focus:outline-none rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-primary"></div>
|
||
</label>
|
||
</div>
|
||
<div class="flex items-center justify-between">
|
||
<label for="notify-sms" class="block text-sm text-gray-700">短信通知</label>
|
||
<label class="relative inline-flex items-center cursor-pointer">
|
||
<input type="checkbox" id="notify-sms" checked class="sr-only peer">
|
||
<div class="w-11 h-6 bg-gray-200 peer-focus:outline-none rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-primary"></div>
|
||
</label>
|
||
</div>
|
||
<div class="flex items-center justify-between">
|
||
<label for="notify-inapp" class="block text-sm text-gray-700">站内通知</label>
|
||
<label class="relative inline-flex items-center cursor-pointer">
|
||
<input type="checkbox" id="notify-inapp" checked class="sr-only peer">
|
||
<div class="w-11 h-6 bg-gray-200 peer-focus:outline-none rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-primary"></div>
|
||
</label>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="border-t border-gray-100 pt-4">
|
||
<div class="font-medium text-gray-700 mb-2">默认支付方式</div>
|
||
<select class="w-full px-3 py-2 border border-gray-300 rounded-md text-gray-700 focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent" id="paymentSelect">
|
||
<option value="alipay">支付宝</option>
|
||
<option value="wechat">微信支付</option>
|
||
<option value="creditcard">信用卡</option>
|
||
<option value="balance">账户余额</option>
|
||
</select>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 财务中心 -->
|
||
<div id="finance-center" class="module-panel hidden">
|
||
<!-- 财务概览 -->
|
||
<div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8">
|
||
<div class="bg-white rounded-lg shadow-sm p-4 hover:shadow-md transition-all-300 cursor-pointer">
|
||
<div class="flex justify-between items-center">
|
||
<div>
|
||
<p class="text-gray-500 text-sm">账户余额</p>
|
||
<h3 class="text-2xl font-bold text-gray-800">¥12,580.00</h3>
|
||
<p class="text-xs text-gray-500 mt-1">最后更新: 2026-02-06 10:30</p>
|
||
</div>
|
||
<div class="w-10 h-10 rounded-full bg-green-100 flex items-center justify-center text-green-600">
|
||
<i class="fa fa-balance-scale"></i>
|
||
</div>
|
||
</div>
|
||
<div class="mt-4">
|
||
<button class="w-full px-3 py-1 bg-primary text-white rounded-md hover:bg-primary/90 transition-all-300 text-sm finance-action-btn" data-action="recharge">充值</button>
|
||
</div>
|
||
</div>
|
||
<div class="bg-white rounded-lg shadow-sm p-4 hover:shadow-md transition-all-300 cursor-pointer">
|
||
<div class="flex justify-between items-center">
|
||
<div>
|
||
<p class="text-gray-500 text-sm">信用额度</p>
|
||
<h3 class="text-2xl font-bold text-gray-800">¥50,000.00</h3>
|
||
<p class="text-xs text-gray-500 mt-1">更新时间: 2026-01-01</p>
|
||
</div>
|
||
<div class="w-10 h-10 rounded-full bg-blue-100 flex items-center justify-center text-blue-600">
|
||
<i class="fa fa-credit-card"></i>
|
||
</div>
|
||
</div>
|
||
<div class="mt-4">
|
||
<div class="w-full bg-gray-200 rounded-full h-2.5">
|
||
<div class="bg-blue-500 h-2.5 rounded-full transition-all duration-500" style="width: 20%"></div>
|
||
</div>
|
||
<div class="flex justify-between text-xs text-gray-500 mt-1">
|
||
<span>已使用 ¥10,000.00</span>
|
||
<span>可用 ¥40,000.00</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="bg-white rounded-lg shadow-sm p-4 hover:shadow-md transition-all-300 cursor-pointer">
|
||
<div class="flex justify-between items-center">
|
||
<div>
|
||
<p class="text-gray-500 text-sm">本月支出</p>
|
||
<h3 class="text-2xl font-bold text-gray-800">¥8,999.00</h3>
|
||
<p class="text-xs text-green-600 mt-1"><i class="fa fa-arrow-down mr-1"></i> 12.5% 较上月</p>
|
||
</div>
|
||
<div class="w-10 h-10 rounded-full bg-red-100 flex items-center justify-center text-red-600">
|
||
<i class="fa fa-money"></i>
|
||
</div>
|
||
</div>
|
||
<div class="mt-4">
|
||
<button class="w-full px-3 py-1 border border-gray-300 rounded-md text-gray-700 hover:bg-gray-50 transition-all-300 text-sm finance-action-btn" data-action="expenseDetail">查看明细</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 财务快捷操作 -->
|
||
<div class="bg-white rounded-lg shadow-sm p-4 mb-8">
|
||
<div class="flex flex-wrap gap-4">
|
||
<button class="px-4 py-2 bg-primary text-white rounded-md hover:bg-primary/90 transition-all-300 flex items-center space-x-2 finance-quick-action" data-action="recharge">
|
||
<i class="fa fa-plus-circle"></i>
|
||
<span>账户充值</span>
|
||
</button>
|
||
<button class="px-4 py-2 border border-gray-300 rounded-md text-gray-700 hover:bg-gray-50 transition-all-300 flex items-center space-x-2 finance-quick-action" data-action="invoice">
|
||
<i class="fa fa-file-text-o"></i>
|
||
<span>申请发票</span>
|
||
</button>
|
||
<button class="px-4 py-2 border border-gray-300 rounded-md text-gray-700 hover:bg-gray-50 transition-all-300 flex items-center space-x-2 finance-quick-action" data-action="transfer">
|
||
<i class="fa fa-exchange"></i>
|
||
<span>资金转账</span>
|
||
</button>
|
||
<button class="px-4 py-2 border border-gray-300 rounded-md text-gray-700 hover:bg-gray-50 transition-all-300 flex items-center space-x-2 finance-quick-action" data-action="statement">
|
||
<i class="fa fa-list-alt"></i>
|
||
<span>财务报表</span>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 收支明细 -->
|
||
<div class="bg-white rounded-lg shadow-sm p-6 mb-8">
|
||
<div class="flex flex-wrap justify-between items-center mb-6 gap-4">
|
||
<h3 class="text-lg font-bold text-gray-800">收支明细</h3>
|
||
<div class="flex flex-wrap gap-2">
|
||
<select class="px-3 py-1 border border-gray-300 rounded-md text-gray-700 focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent text-sm" id="transactionTypeSelect">
|
||
<option value="all">全部类型</option>
|
||
<option value="income">收入</option>
|
||
<option value="expense">支出</option>
|
||
</select>
|
||
<select class="px-3 py-1 border border-gray-300 rounded-md text-gray-700 focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent text-sm" id="transactionPeriodSelect">
|
||
<option value="week">本周</option>
|
||
<option value="month">本月</option>
|
||
<option value="quarter">本季度</option>
|
||
<option value="year">本年</option>
|
||
<option value="custom">自定义</option>
|
||
</select>
|
||
<button class="px-3 py-1 bg-primary text-white rounded-md hover:bg-primary/90 transition-all-300 text-sm" id="transactionFilterBtn">
|
||
<i class="fa fa-search mr-1"></i> 筛选
|
||
</button>
|
||
</div>
|
||
</div>
|
||
<div class="space-y-4" id="transactionList">
|
||
<div class="border-b border-gray-100 pb-4 flex justify-between items-center hover:bg-gray-50 p-2 rounded-md transition-all-300 cursor-pointer" data-transaction-id="TRX20260206001">
|
||
<div class="flex items-center space-x-3">
|
||
<div class="w-10 h-10 rounded-full bg-red-100 flex items-center justify-center text-red-600">
|
||
<i class="fa fa-shopping-cart"></i>
|
||
</div>
|
||
<div>
|
||
<div class="font-medium text-gray-800">订单支付</div>
|
||
<div class="text-sm text-gray-500">订单号: ORD20260206001</div>
|
||
</div>
|
||
</div>
|
||
<div class="text-right">
|
||
<div class="font-medium text-red-600">-¥8,999.00</div>
|
||
<div class="text-sm text-gray-500">2026-02-06 10:30</div>
|
||
</div>
|
||
</div>
|
||
<div class="border-b border-gray-100 pb-4 flex justify-between items-center hover:bg-gray-50 p-2 rounded-md transition-all-300 cursor-pointer" data-transaction-id="TRX20260205001">
|
||
<div class="flex items-center space-x-3">
|
||
<div class="w-10 h-10 rounded-full bg-green-100 flex items-center justify-center text-green-600">
|
||
<i class="fa fa-credit-card"></i>
|
||
</div>
|
||
<div>
|
||
<div class="font-medium text-gray-800">账户充值</div>
|
||
<div class="text-sm text-gray-500">充值单号: TOP20260205001</div>
|
||
</div>
|
||
</div>
|
||
<div class="text-right">
|
||
<div class="font-medium text-green-600">+¥5,000.00</div>
|
||
<div class="text-sm text-gray-500">2026-02-05 14:20</div>
|
||
</div>
|
||
</div>
|
||
<div class="border-b border-gray-100 pb-4 flex justify-between items-center hover:bg-gray-50 p-2 rounded-md transition-all-300 cursor-pointer" data-transaction-id="TRX20260205002">
|
||
<div class="flex items-center space-x-3">
|
||
<div class="w-10 h-10 rounded-full bg-red-100 flex items-center justify-center text-red-600">
|
||
<i class="fa fa-shopping-cart"></i>
|
||
</div>
|
||
<div>
|
||
<div class="font-medium text-gray-800">订单支付</div>
|
||
<div class="text-sm text-gray-500">订单号: ORD20260205001</div>
|
||
</div>
|
||
</div>
|
||
<div class="text-right">
|
||
<div class="font-medium text-red-600">-¥10,499.00</div>
|
||
<div class="text-sm text-gray-500">2026-02-05 16:45</div>
|
||
</div>
|
||
</div>
|
||
<div class="flex justify-between items-center hover:bg-gray-50 p-2 rounded-md transition-all-300 cursor-pointer" data-transaction-id="TRX20260204001">
|
||
<div class="flex items-center space-x-3">
|
||
<div class="w-10 h-10 rounded-full bg-green-100 flex items-center justify-center text-green-600">
|
||
<i class="fa fa-refresh"></i>
|
||
</div>
|
||
<div>
|
||
<div class="font-medium text-gray-800">退款</div>
|
||
<div class="text-sm text-gray-500">订单号: ORD20260204002</div>
|
||
</div>
|
||
</div>
|
||
<div class="text-right">
|
||
<div class="font-medium text-green-600">+¥299.00</div>
|
||
<div class="text-sm text-gray-500">2026-02-04 09:10</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="mt-6 flex justify-between items-center">
|
||
<div class="text-sm text-gray-500">
|
||
显示第 1-4 条，共 28 条记录
|
||
</div>
|
||
<button class="text-primary hover:text-primary/80 transition-all-300 text-sm flex items-center" id="loadMoreTransactions">
|
||
查看更多 <i class="fa fa-chevron-down ml-1"></i>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 发票管理 -->
|
||
<div class="bg-white rounded-lg shadow-sm p-6">
|
||
<div class="flex flex-wrap justify-between items-center mb-6 gap-4">
|
||
<h3 class="text-lg font-bold text-gray-800">发票管理</h3>
|
||
<div class="flex items-center space-x-2">
|
||
<select class="px-3 py-1 border border-gray-300 rounded-md text-gray-700 focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent text-sm" id="invoiceStatusSelect">
|
||
<option value="all">全部状态</option>
|
||
<option value="pending">处理中</option>
|
||
<option value="completed">已开具</option>
|
||
<option value="cancelled">已取消</option>
|
||
</select>
|
||
<button class="px-4 py-2 bg-primary text-white rounded-md hover:bg-primary/90 transition-all-300 text-sm flex items-center space-x-1 finance-action-btn" data-action="applyInvoice">
|
||
<i class="fa fa-plus"></i>
|
||
<span>申请发票</span>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
<div class="overflow-x-auto">
|
||
<table class="w-full">
|
||
<thead class="bg-gray-50 border-b border-gray-200">
|
||
<tr>
|
||
<th class="px-4 py-3 text-left text-sm font-medium text-gray-600">发票号</th>
|
||
<th class="px-4 py-3 text-left text-sm font-medium text-gray-600">订单号</th>
|
||
<th class="px-4 py-3 text-left text-sm font-medium text-gray-600">金额</th>
|
||
<th class="px-4 py-3 text-left text-sm font-medium text-gray-600">状态</th>
|
||
<th class="px-4 py-3 text-left text-sm font-medium text-gray-600">申请时间</th>
|
||
<th class="px-4 py-3 text-left text-sm font-medium text-gray-600">操作</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody class="divide-y divide-gray-200">
|
||
<tr class="hover:bg-gray-50 transition-all-300">
|
||
<td class="px-4 py-3 text-sm text-gray-700">INV20260205001</td>
|
||
<td class="px-4 py-3 text-sm text-gray-700">ORD20260204001</td>
|
||
<td class="px-4 py-3 text-sm text-gray-700 font-medium">¥6,299.00</td>
|
||
<td class="px-4 py-3">
|
||
<span class="px-2 py-1 text-xs rounded-full bg-green-100 text-green-800">已开具</span>
|
||
</td>
|
||
<td class="px-4 py-3 text-sm text-gray-600">2026-02-05 09:30</td>
|
||
<td class="px-4 py-3">
|
||
<button class="text-primary hover:text-primary/80 transition-all-300 invoice-action-btn" data-invoice-id="INV20260205001" data-action="download">
|
||
<i class="fa fa-download"></i>
|
||
<span class="ml-1 text-sm">下载</span>
|
||
</button>
|
||
</td>
|
||
</tr>
|
||
<tr class="hover:bg-gray-50 transition-all-300">
|
||
<td class="px-4 py-3 text-sm text-gray-700">INV20260204001</td>
|
||
<td class="px-4 py-3 text-sm text-gray-700">ORD20260203001</td>
|
||
<td class="px-4 py-3 text-sm text-gray-700 font-medium">¥1,299.00</td>
|
||
<td class="px-4 py-3">
|
||
<span class="px-2 py-1 text-xs rounded-full bg-blue-100 text-blue-800">处理中</span>
|
||
</td>
|
||
<td class="px-4 py-3 text-sm text-gray-600">2026-02-04 14:20</td>
|
||
<td class="px-4 py-3">
|
||
<button class="text-gray-400 cursor-not-allowed">
|
||
<i class="fa fa-download"></i>
|
||
<span class="ml-1 text-sm">下载</span>
|
||
</button>
|
||
</td>
|
||
</tr>
|
||
<tr class="hover:bg-gray-50 transition-all-300">
|
||
<td class="px-4 py-3 text-sm text-gray-700">INV20260203001</td>
|
||
<td class="px-4 py-3 text-sm text-gray-700">ORD20260202001</td>
|
||
<td class="px-4 py-3 text-sm text-gray-700 font-medium">¥2,599.00</td>
|
||
<td class="px-4 py-3">
|
||
<span class="px-2 py-1 text-xs rounded-full bg-green-100 text-green-800">已开具</span>
|
||
</td>
|
||
<td class="px-4 py-3 text-sm text-gray-600">2026-02-03 10:15</td>
|
||
<td class="px-4 py-3">
|
||
<button class="text-primary hover:text-primary/80 transition-all-300 invoice-action-btn" data-invoice-id="INV20260203001" data-action="download">
|
||
<i class="fa fa-download"></i>
|
||
<span class="ml-1 text-sm">下载</span>
|
||
</button>
|
||
</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
<div class="mt-6 flex justify-center">
|
||
<nav class="inline-flex rounded-md shadow-sm -space-x-px" aria-label="Pagination">
|
||
<a href="#" class="relative inline-flex items-center px-2 py-2 rounded-l-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50">
|
||
<span class="sr-only">上一页</span>
|
||
<i class="fa fa-chevron-left"></i>
|
||
</a>
|
||
<a href="#" aria-current="page" class="z-10 bg-primary border-primary text-white relative inline-flex items-center px-4 py-2 border text-sm font-medium">
|
||
1
|
||
</a>
|
||
<a href="#" class="bg-white border-gray-300 text-gray-500 hover:bg-gray-50 relative inline-flex items-center px-4 py-2 border text-sm font-medium">
|
||
2
|
||
</a>
|
||
<a href="#" class="bg-white border-gray-300 text-gray-500 hover:bg-gray-50 relative inline-flex items-center px-4 py-2 border text-sm font-medium">
|
||
3
|
||
</a>
|
||
<a href="#" class="relative inline-flex items-center px-2 py-2 rounded-r-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50">
|
||
<span class="sr-only">下一页</span>
|
||
<i class="fa fa-chevron-right"></i>
|
||
</a>
|
||
</nav>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 数据看板 -->
|
||
<div id="analytics-center" class="module-panel hidden">
|
||
<!-- 数据概览 -->
|
||
<div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8">
|
||
<div class="bg-white rounded-lg shadow-sm p-4 card-hover">
|
||
<div class="flex justify-between items-center">
|
||
<div>
|
||
<p class="text-gray-500 text-sm">总订单数</p>
|
||
<h3 class="text-2xl font-bold text-gray-800">248</h3>
|
||
</div>
|
||
<div class="w-10 h-10 rounded-full bg-blue-100 flex items-center justify-center text-blue-600">
|
||
<i class="fa fa-file-text-o"></i>
|
||
</div>
|
||
</div>
|
||
<div class="mt-4 flex items-center text-sm">
|
||
<span class="text-green-600 flex items-center">
|
||
<i class="fa fa-arrow-up mr-1"></i>
|
||
8.2%
|
||
</span>
|
||
<span class="text-gray-500 ml-2">较上月</span>
|
||
</div>
|
||
</div>
|
||
<div class="bg-white rounded-lg shadow-sm p-4 card-hover">
|
||
<div class="flex justify-between items-center">
|
||
<div>
|
||
<p class="text-gray-500 text-sm">总支出</p>
|
||
<h3 class="text-2xl font-bold text-gray-800">$496.00</h3>
|
||
</div>
|
||
<div class="w-10 h-10 rounded-full bg-red-100 flex items-center justify-center text-red-600">
|
||
<i class="fa fa-money"></i>
|
||
</div>
|
||
</div>
|
||
<div class="mt-4 flex items-center text-sm">
|
||
<span class="text-red-600 flex items-center">
|
||
<i class="fa fa-arrow-up mr-1"></i>
|
||
12.5%
|
||
</span>
|
||
<span class="text-gray-500 ml-2">较上月</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="bg-white rounded-lg shadow-sm p-4">
|
||
<div class="flex justify-between items-center">
|
||
<div>
|
||
<p class="text-gray-500 text-sm">订单完成率</p>
|
||
<h3 class="text-2xl font-bold text-gray-800">79.0%</h3>
|
||
</div>
|
||
<div class="w-10 h-10 rounded-full bg-purple-100 flex items-center justify-center text-purple-600">
|
||
<i class="fa fa-check-circle-o"></i>
|
||
</div>
|
||
</div>
|
||
<div class="mt-4 flex items-center text-sm">
|
||
<span class="text-green-600 flex items-center">
|
||
<i class="fa fa-arrow-up mr-1"></i>
|
||
1.8%
|
||
</span>
|
||
<span class="text-gray-500 ml-2">较上月</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 图表区域 -->
|
||
<div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-8">
|
||
<!-- 订单趋势 -->
|
||
<div class="bg-white rounded-lg shadow-sm p-6">
|
||
<div class="flex justify-between items-center mb-6">
|
||
<h3 class="text-lg font-bold text-gray-800">订单趋势</h3>
|
||
<select class="px-3 py-1 border border-gray-300 rounded-md text-gray-700 focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent text-sm">
|
||
<option value="month">近30天</option>
|
||
<option value="quarter">近3个月</option>
|
||
<option value="year">近1年</option>
|
||
</select>
|
||
</div>
|
||
<div class="h-80">
|
||
<canvas id="orderTrendChart"></canvas>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 订单状态分布 -->
|
||
<div class="bg-white rounded-lg shadow-sm p-6">
|
||
<div class="flex justify-between items-center mb-6">
|
||
<h3 class="text-lg font-bold text-gray-800">订单状态分布</h3>
|
||
<select class="px-3 py-1 border border-gray-300 rounded-md text-gray-700 focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent text-sm">
|
||
<option value="month">本月</option>
|
||
<option value="quarter">本季度</option>
|
||
<option value="year">本年</option>
|
||
</select>
|
||
</div>
|
||
<div class="h-80">
|
||
<canvas id="orderStatusChart"></canvas>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 订单时效分析 -->
|
||
<div class="bg-white rounded-lg shadow-sm p-6 mb-8">
|
||
<div class="flex justify-between items-center mb-6">
|
||
<h3 class="text-lg font-bold text-gray-800">订单时效分析</h3>
|
||
<select class="px-3 py-1 border border-gray-300 rounded-md text-gray-700 focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent text-sm">
|
||
<option value="month">本月</option>
|
||
<option value="quarter">本季度</option>
|
||
<option value="year">本年</option>
|
||
</select>
|
||
</div>
|
||
<div class="h-80">
|
||
<canvas id="orderTimeChart"></canvas>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 新增时效看板 -->
|
||
<div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-8">
|
||
<!-- 到货到完成统计 -->
|
||
<div class="bg-white rounded-lg shadow-sm p-6">
|
||
<div class="flex justify-between items-center mb-6">
|
||
<h3 class="text-lg font-bold text-gray-800">到货到完成统计</h3>
|
||
<select class="px-3 py-1 border border-gray-300 rounded-md text-gray-700 focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent text-sm">
|
||
<option value="week">本周</option>
|
||
<option value="month">本月</option>
|
||
<option value="quarter">本季度</option>
|
||
</select>
|
||
</div>
|
||
<div class="h-80">
|
||
<canvas id="deliveryToCompleteChart"></canvas>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 24小时上网率 -->
|
||
<div class="bg-white rounded-lg shadow-sm p-6">
|
||
<div class="flex justify-between items-center mb-6">
|
||
<h3 class="text-lg font-bold text-gray-800">24小时上网率</h3>
|
||
<select class="px-3 py-1 border border-gray-300 rounded-md text-gray-700 focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent text-sm">
|
||
<option value="week">本周</option>
|
||
<option value="month">本月</option>
|
||
<option value="quarter">本季度</option>
|
||
</select>
|
||
</div>
|
||
<div class="h-80">
|
||
<canvas id="onlineRateChart"></canvas>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 客户自定义看板 -->
|
||
<div class="bg-white rounded-lg shadow-sm p-6 mb-8">
|
||
<div class="flex justify-between items-center mb-6">
|
||
<h3 class="text-lg font-bold text-gray-800">客户自定义看板</h3>
|
||
<div class="flex space-x-2">
|
||
<select class="px-3 py-1 border border-gray-300 rounded-md text-gray-700 focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent text-sm">
|
||
<option value="week">本周</option>
|
||
<option value="month">本月</option>
|
||
<option value="quarter">本季度</option>
|
||
</select>
|
||
<button class="px-3 py-1 bg-primary text-white rounded-md hover:bg-primary/90 transition-all-300 text-sm flex items-center space-x-1">
|
||
<i class="fa fa-cog"></i>
|
||
<span>自定义</span>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||
<!-- 自定义时效指标1 -->
|
||
<div>
|
||
<h4 class="text-md font-medium text-gray-700 mb-3">处理时效趋势</h4>
|
||
<div class="h-64">
|
||
<canvas id="customMetric1Chart"></canvas>
|
||
</div>
|
||
</div>
|
||
<!-- 自定义时效指标2 -->
|
||
<div>
|
||
<h4 class="text-md font-medium text-gray-700 mb-3">完成率分析</h4>
|
||
<div class="h-64">
|
||
<canvas id="customMetric2Chart"></canvas>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="mt-6 grid grid-cols-1 md:grid-cols-3 gap-4">
|
||
<!-- 自定义指标卡片1 -->
|
||
<div class="border border-gray-200 rounded-md p-4 hover:shadow-sm transition-all-300">
|
||
<div class="text-sm text-gray-500">平均处理时间</div>
|
||
<div class="text-xl font-bold text-gray-800 mt-1">2.5小时</div>
|
||
<div class="flex items-center text-xs mt-2">
|
||
<span class="text-green-600 flex items-center">
|
||
<i class="fa fa-arrow-down mr-1"></i>
|
||
12.5%
|
||
</span>
|
||
<span class="text-gray-500 ml-2">较上周</span>
|
||
</div>
|
||
</div>
|
||
<!-- 自定义指标卡片2 -->
|
||
<div class="border border-gray-200 rounded-md p-4 hover:shadow-sm transition-all-300">
|
||
<div class="text-sm text-gray-500">按时完成率</div>
|
||
<div class="text-xl font-bold text-gray-800 mt-1">94.2%</div>
|
||
<div class="flex items-center text-xs mt-2">
|
||
<span class="text-green-600 flex items-center">
|
||
<i class="fa fa-arrow-up mr-1"></i>
|
||
2.1%
|
||
</span>
|
||
<span class="text-gray-500 ml-2">较上周</span>
|
||
</div>
|
||
</div>
|
||
<!-- 自定义指标卡片3 -->
|
||
<div class="border border-gray-200 rounded-md p-4 hover:shadow-sm transition-all-300">
|
||
<div class="text-sm text-gray-500">异常处理率</div>
|
||
<div class="text-xl font-bold text-gray-800 mt-1">98.5%</div>
|
||
<div class="flex items-center text-xs mt-2">
|
||
<span class="text-green-600 flex items-center">
|
||
<i class="fa fa-arrow-up mr-1"></i>
|
||
1.8%
|
||
</span>
|
||
<span class="text-gray-500 ml-2">较上周</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 异常订单分析 -->
|
||
<div class="bg-white rounded-lg shadow-sm p-6">
|
||
<div class="flex justify-between items-center mb-6">
|
||
<h3 class="text-lg font-bold text-gray-800">异常订单分析</h3>
|
||
<button class="text-primary hover:text-primary/80 transition-all-300 text-sm">
|
||
查看详情
|
||
</button>
|
||
</div>
|
||
<div class="overflow-x-auto">
|
||
<table class="w-full">
|
||
<thead class="bg-gray-50 border-b border-gray-200">
|
||
<tr>
|
||
<th class="px-4 py-3 text-left text-sm font-medium text-gray-600">订单号</th>
|
||
<th class="px-4 py-3 text-left text-sm font-medium text-gray-600">异常类型</th>
|
||
<th class="px-4 py-3 text-left text-sm font-medium text-gray-600">异常原因</th>
|
||
<th class="px-4 py-3 text-left text-sm font-medium text-gray-600">发生时间</th>
|
||
<th class="px-4 py-3 text-left text-sm font-medium text-gray-600">处理状态</th>
|
||
<th class="px-4 py-3 text-left text-sm font-medium text-gray-600">操作</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody class="divide-y divide-gray-200">
|
||
<tr>
|
||
<td class="px-4 py-3 text-sm text-gray-700">ORD20260205002</td>
|
||
<td class="px-4 py-3 text-sm text-gray-700">服务异常</td>
|
||
<td class="px-4 py-3 text-sm text-gray-700">服务人员未按时到达</td>
|
||
<td class="px-4 py-3 text-sm text-gray-600">2026-02-05 15:30</td>
|
||
<td class="px-4 py-3">
|
||
<span class="px-2 py-1 text-xs rounded-full bg-yellow-100 text-yellow-800">处理中</span>
|
||
</td>
|
||
<td class="px-4 py-3">
|
||
<button class="text-primary hover:text-primary/80 transition-all-300">
|
||
<i class="fa fa-eye"></i>
|
||
</button>
|
||
</td>
|
||
</tr>
|
||
<tr>
|
||
<td class="px-4 py-3 text-sm text-gray-700">ORD20260204002</td>
|
||
<td class="px-4 py-3 text-sm text-gray-700">退款</td>
|
||
<td class="px-4 py-3 text-sm text-gray-700">商品质量问题</td>
|
||
<td class="px-4 py-3 text-sm text-gray-600">2026-02-04 09:10</td>
|
||
<td class="px-4 py-3">
|
||
<span class="px-2 py-1 text-xs rounded-full bg-green-100 text-green-800">已解决</span>
|
||
</td>
|
||
<td class="px-4 py-3">
|
||
<button class="text-primary hover:text-primary/80 transition-all-300">
|
||
<i class="fa fa-eye"></i>
|
||
</button>
|
||
</td>
|
||
</tr>
|
||
<tr>
|
||
<td class="px-4 py-3 text-sm text-gray-700">ORD20260203001</td>
|
||
<td class="px-4 py-3 text-sm text-gray-700">物流异常</td>
|
||
<td class="px-4 py-3 text-sm text-gray-700">包裹丢失</td>
|
||
<td class="px-4 py-3 text-sm text-gray-600">2026-02-03 14:20</td>
|
||
<td class="px-4 py-3">
|
||
<span class="px-2 py-1 text-xs rounded-full bg-green-100 text-green-800">已解决</span>
|
||
</td>
|
||
<td class="px-4 py-3">
|
||
<button class="text-primary hover:text-primary/80 transition-all-300">
|
||
<i class="fa fa-eye"></i>
|
||
</button>
|
||
</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 服务支持中心 -->
|
||
<div id="support-center" class="module-panel hidden">
|
||
<div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
|
||
<!-- 在线客服 -->
|
||
<div class="lg:col-span-2">
|
||
<div class="bg-white rounded-lg shadow-sm overflow-hidden">
|
||
<div class="bg-primary text-white p-4">
|
||
<h3 class="text-lg font-bold">在线客服</h3>
|
||
<p class="text-sm opacity-80">工作时间: 9:00-18:00</p>
|
||
</div>
|
||
<div class="p-4 h-96 flex flex-col">
|
||
<div class="flex-1 overflow-y-auto mb-4 space-y-4">
|
||
<div class="flex justify-start">
|
||
<div class="flex items-start space-x-2">
|
||
<div class="w-8 h-8 rounded-full bg-gray-300 flex items-center justify-center text-gray-600">
|
||
<i class="fa fa-user"></i>
|
||
</div>
|
||
<div class="bg-gray-100 rounded-lg p-3 max-w-[80%]">
|
||
<p class="text-gray-700">您好，有什么可以帮助您的？</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="flex justify-end">
|
||
<div class="flex items-start space-x-2">
|
||
<div class="bg-primary text-white rounded-lg p-3 max-w-[80%]">
|
||
<p>我的订单 ORD20260205002 显示异常，请问是什么原因？</p>
|
||
</div>
|
||
<div class="w-8 h-8 rounded-full bg-primary flex items-center justify-center text-white">
|
||
<i class="fa fa-user"></i>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="flex justify-start">
|
||
<div class="flex items-start space-x-2">
|
||
<div class="w-8 h-8 rounded-full bg-gray-300 flex items-center justify-center text-gray-600">
|
||
<i class="fa fa-user"></i>
|
||
</div>
|
||
<div class="bg-gray-100 rounded-lg p-3 max-w-[80%]">
|
||
<p class="text-gray-700">您好，我查询到该订单是因为服务人员未按时到达导致的异常。我们已经安排了新的服务人员，预计今天下午16:00前会与您联系。</p>
|
||
<p class="text-gray-700 mt-2">请问还有其他问题吗？</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="border-t border-gray-200 pt-4">
|
||
<div class="flex space-x-2">
|
||
<input type="text" placeholder="请输入您的问题..." class="flex-1 px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent">
|
||
<button class="px-4 py-2 bg-primary text-white rounded-md hover:bg-primary/90 transition-all-300">
|
||
<i class="fa fa-paper-plane"></i>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 工单管理和常见问题 -->
|
||
<div class="space-y-6">
|
||
<!-- 工单管理 -->
|
||
<div class="bg-white rounded-lg shadow-sm p-6">
|
||
<div class="flex justify-between items-center mb-4">
|
||
<h3 class="text-lg font-bold text-gray-800">工单管理</h3>
|
||
<button class="px-3 py-1 bg-primary text-white rounded-md hover:bg-primary/90 transition-all-300 text-sm flex items-center space-x-1">
|
||
<i class="fa fa-plus"></i>
|
||
<span>提交工单</span>
|
||
</button>
|
||
</div>
|
||
<div class="space-y-4">
|
||
<div class="border border-gray-200 rounded-md p-4">
|
||
<div class="flex justify-between items-start">
|
||
<div class="font-medium text-gray-800">订单异常问题</div>
|
||
<span class="px-2 py-1 text-xs rounded-full bg-yellow-100 text-yellow-800">处理中</span>
|
||
</div>
|
||
<div class="text-sm text-gray-500 mt-1">订单号: ORD20260205002</div>
|
||
<div class="text-sm text-gray-600 mt-2">服务人员未按时到达</div>
|
||
<div class="flex justify-between items-center mt-3">
|
||
<div class="text-xs text-gray-500">提交时间: 2026-02-05 16:30</div>
|
||
<button class="text-primary hover:text-primary/80 transition-all-300 text-sm">查看详情</button>
|
||
</div>
|
||
</div>
|
||
<div class="border border-gray-200 rounded-md p-4">
|
||
<div class="flex justify-between items-start">
|
||
<div class="font-medium text-gray-800">退款申请</div>
|
||
<span class="px-2 py-1 text-xs rounded-full bg-green-100 text-green-800">已解决</span>
|
||
</div>
|
||
<div class="text-sm text-gray-500 mt-1">订单号: ORD20260204002</div>
|
||
<div class="text-sm text-gray-600 mt-2">商品质量问题</div>
|
||
<div class="flex justify-between items-center mt-3">
|
||
<div class="text-xs text-gray-500">提交时间: 2026-02-04 09:10</div>
|
||
<button class="text-primary hover:text-primary/80 transition-all-300 text-sm">查看详情</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 常见问题 -->
|
||
<div class="bg-white rounded-lg shadow-sm p-6">
|
||
<h3 class="text-lg font-bold text-gray-800 mb-4">常见问题</h3>
|
||
<div class="space-y-4">
|
||
<div class="border-b border-gray-100 pb-4">
|
||
<button class="w-full flex justify-between items-center text-left font-medium text-gray-800">
|
||
<span>如何取消订单？</span>
|
||
<i class="fa fa-chevron-down text-gray-400"></i>
|
||
</button>
|
||
<div class="mt-2 text-sm text-gray-600 hidden">
|
||
<p>您可以在订单详情页面点击"取消订单"按钮，未支付的订单可以直接取消，已支付的订单需要等待客服审核。</p>
|
||
</div>
|
||
</div>
|
||
<div class="border-b border-gray-100 pb-4">
|
||
<button class="w-full flex justify-between items-center text-left font-medium text-gray-800">
|
||
<span>如何申请退款？</span>
|
||
<i class="fa fa-chevron-down text-gray-400"></i>
|
||
</button>
|
||
<div class="mt-2 text-sm text-gray-600 hidden">
|
||
<p>您可以在订单详情页面点击"申请售后"按钮，选择退款原因并提交申请，客服会在1-3个工作日内审核。</p>
|
||
</div>
|
||
</div>
|
||
<div class="border-b border-gray-100 pb-4">
|
||
<button class="w-full flex justify-between items-center text-left font-medium text-gray-800">
|
||
<span>订单物流如何查询？</span>
|
||
<i class="fa fa-chevron-down text-gray-400"></i>
|
||
</button>
|
||
<div class="mt-2 text-sm text-gray-600 hidden">
|
||
<p>您可以在订单详情页面查看物流信息，或者点击"查看物流"按钮跳转到快递公司官网查询。</p>
|
||
</div>
|
||
</div>
|
||
<div class="pb-4">
|
||
<button class="w-full flex justify-between items-center text-left font-medium text-gray-800">
|
||
<span>如何修改收货地址？</span>
|
||
<i class="fa fa-chevron-down text-gray-400"></i>
|
||
</button>
|
||
<div class="mt-2 text-sm text-gray-600 hidden">
|
||
<p>您可以在订单详情页面点击"修改地址"按钮，在订单未发货前可以修改收货地址。</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 订单详情弹窗 -->
|
||
<div id="orderDetailModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden">
|
||
<div class="bg-white rounded-lg shadow-lg w-full max-w-2xl max-h-[90vh] overflow-y-auto">
|
||
<div class="p-6 border-b border-gray-200 flex justify-between items-center">
|
||
<h3 class="text-xl font-bold text-gray-800">订单详情</h3>
|
||
<div class="flex items-center space-x-3">
|
||
<span class="px-2 py-1 text-xs rounded-full bg-blue-100 text-blue-800" id="modalOrderStatus">处理中</span>
|
||
<button id="closeOrderDetailModal" class="text-gray-400 hover:text-gray-600 transition-all-300">
|
||
<i class="fa fa-times text-xl"></i>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
<!-- 加载状态 -->
|
||
<div class="p-20 flex flex-col items-center justify-center hidden" id="orderDetailLoading">
|
||
<div class="w-12 h-12 border-4 border-primary border-t-transparent rounded-full animate-spin mb-4"></div>
|
||
<p class="text-gray-600">加载中...</p>
|
||
</div>
|
||
<!-- 详情内容 -->
|
||
<div class="p-6 space-y-6" id="orderDetailContent">
|
||
<div>
|
||
<h4 class="font-medium text-gray-800 mb-2 flex items-center">
|
||
<i class="fa fa-file-text-o text-primary mr-2"></i>
|
||
订单信息
|
||
</h4>
|
||
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||
<div class="text-sm">
|
||
<span class="text-gray-500">订单号:</span>
|
||
<span class="text-gray-800 ml-1 font-medium" id="modalOrderId">ORD20260206001</span>
|
||
</div>
|
||
<div class="text-sm">
|
||
<span class="text-gray-500">订单状态:</span>
|
||
<span class="text-blue-600 ml-1" id="modalOrderStatusText">处理中</span>
|
||
</div>
|
||
<div class="text-sm">
|
||
<span class="text-gray-500">创建时间:</span>
|
||
<span class="text-gray-800 ml-1" id="modalCreateTime">2026-02-06 10:30</span>
|
||
</div>
|
||
<div class="text-sm">
|
||
<span class="text-gray-500">支付时间:</span>
|
||
<span class="text-gray-800 ml-1" id="modalPayTime">2026-02-06 10:35</span>
|
||
</div>
|
||
<div class="text-sm">
|
||
<span class="text-gray-500">支付方式:</span>
|
||
<span class="text-gray-800 ml-1" id="modalPayMethod">支付宝</span>
|
||
</div>
|
||
<div class="text-sm">
|
||
<span class="text-gray-500">交易编号:</span>
|
||
<span class="text-gray-800 ml-1" id="modalTradeNo">202602061035123456</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div>
|
||
<h4 class="font-medium text-gray-800 mb-2 flex items-center">
|
||
<i class="fa fa-shopping-cart text-primary mr-2"></i>
|
||
商品信息
|
||
</h4>
|
||
<div class="border border-gray-200 rounded-md p-4" id="modalProductInfo">
|
||
<div class="flex items-center space-x-4">
|
||
<div class="w-20 h-20 bg-gray-100 rounded-md flex items-center justify-center">
|
||
<i class="fa fa-mobile text-3xl text-gray-400"></i>
|
||
</div>
|
||
<div class="flex-1">
|
||
<div class="font-medium text-gray-800" id="modalProductName">iPhone 16 Pro</div>
|
||
<div class="text-sm text-gray-500 mt-1" id="modalProductSpec">颜色: 钛金属色 | 容量: 256GB</div>
|
||
<div class="flex justify-between items-center mt-2">
|
||
<div class="text-gray-800 font-medium" id="modalProductPrice">¥8,999.00</div>
|
||
<div class="text-gray-600" id="modalProductQuantity">x1</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div>
|
||
<h4 class="font-medium text-gray-800 mb-2 flex items-center">
|
||
<i class="fa fa-map-marker text-primary mr-2"></i>
|
||
收货信息
|
||
</h4>
|
||
<div class="border border-gray-200 rounded-md p-4" id="modalAddressInfo">
|
||
<div class="text-sm">
|
||
<div class="font-medium text-gray-800" id="modalReceiver">张三 (138****6789)</div>
|
||
<div class="text-gray-600 mt-1" id="modalAddress">北京市海淀区中关村大街1号</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div>
|
||
<h4 class="font-medium text-gray-800 mb-2 flex items-center">
|
||
<i class="fa fa-truck text-primary mr-2"></i>
|
||
物流信息
|
||
</h4>
|
||
<div class="border border-gray-200 rounded-md p-4" id="modalLogisticsInfo">
|
||
<div class="text-sm">
|
||
<div class="text-gray-600" id="modalLogisticsStatus">订单正在处理中，尚未发货</div>
|
||
<div class="mt-3 space-y-2" id="modalLogisticsDetail" class="hidden">
|
||
<div class="flex space-x-3">
|
||
<div class="w-2 h-2 rounded-full bg-primary mt-2"></div>
|
||
<div class="flex-1">
|
||
<div class="text-sm text-gray-800">订单已创建</div>
|
||
<div class="text-xs text-gray-500">2026-02-06 10:30</div>
|
||
</div>
|
||
</div>
|
||
<div class="flex space-x-3">
|
||
<div class="w-2 h-2 rounded-full bg-gray-300 mt-2"></div>
|
||
<div class="flex-1">
|
||
<div class="text-sm text-gray-600">订单已支付</div>
|
||
<div class="text-xs text-gray-500">2026-02-06 10:35</div>
|
||
</div>
|
||
</div>
|
||
<div class="flex space-x-3">
|
||
<div class="w-2 h-2 rounded-full bg-gray-300 mt-2"></div>
|
||
<div class="flex-1">
|
||
<div class="text-sm text-gray-600">订单处理中</div>
|
||
<div class="text-xs text-gray-500">2026-02-06 10:40</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div>
|
||
<h4 class="font-medium text-gray-800 mb-2 flex items-center">
|
||
<i class="fa fa-money text-primary mr-2"></i>
|
||
费用信息
|
||
</h4>
|
||
<div class="border border-gray-200 rounded-md p-4" id="modalPaymentInfo">
|
||
<div class="space-y-2 text-sm">
|
||
<div class="flex justify-between">
|
||
<span class="text-gray-600">商品总额:</span>
|
||
<span class="text-gray-800" id="modalSubtotal">¥8,999.00</span>
|
||
</div>
|
||
<div class="flex justify-between">
|
||
<span class="text-gray-600">运费:</span>
|
||
<span class="text-gray-800" id="modalShippingFee">¥0.00</span>
|
||
</div>
|
||
<div class="flex justify-between">
|
||
<span class="text-gray-600">优惠:</span>
|
||
<span class="text-green-600" id="modalDiscount">-¥0.00</span>
|
||
</div>
|
||
<div class="flex justify-between font-medium border-t border-gray-200 pt-2">
|
||
<span class="text-gray-800">实付金额:</span>
|
||
<span class="text-gray-800 font-bold text-lg" id="modalTotalAmount">¥8,999.00</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div>
|
||
<h4 class="font-medium text-gray-800 mb-2 flex items-center">
|
||
<i class="fa fa-comment text-primary mr-2"></i>
|
||
订单备注
|
||
</h4>
|
||
<div class="border border-gray-200 rounded-md p-4">
|
||
<div class="text-sm text-gray-600" id="modalOrderRemark">无备注</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="p-6 border-t border-gray-200 flex flex-wrap justify-between items-center gap-3">
|
||
<div class="flex space-x-2" id="modalOrderActions">
|
||
<button class="px-4 py-2 border border-gray-300 rounded-md text-gray-700 hover:bg-gray-50 transition-all-300 flex items-center space-x-1">
|
||
<i class="fa fa-print"></i>
|
||
<span>打印订单</span>
|
||
</button>
|
||
<button class="px-4 py-2 border border-gray-300 rounded-md text-gray-700 hover:bg-gray-50 transition-all-300 flex items-center space-x-1">
|
||
<i class="fa fa-download"></i>
|
||
<span>导出订单</span>
|
||
</button>
|
||
</div>
|
||
<div class="flex space-x-3">
|
||
<button class="px-4 py-2 border border-gray-300 rounded-md text-gray-700 hover:bg-gray-50 transition-all-300">
|
||
取消订单
|
||
</button>
|
||
<button class="px-4 py-2 bg-primary text-white rounded-md hover:bg-primary/90 transition-all-300">
|
||
联系客服
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 地址编辑弹窗 -->
|
||
<div id="addressModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden">
|
||
<div class="bg-white rounded-lg shadow-lg w-full max-w-md max-h-[90vh] overflow-y-auto">
|
||
<div class="p-6 border-b border-gray-200 flex justify-between items-center">
|
||
<h3 class="text-xl font-bold text-gray-800" id="addressModalTitle">添加地址</h3>
|
||
<button id="closeAddressModal" class="text-gray-400 hover:text-gray-600 transition-all-300">
|
||
<i class="fa fa-times text-xl"></i>
|
||
</button>
|
||
</div>
|
||
<div class="p-6">
|
||
<form id="addressForm" class="space-y-4">
|
||
<input type="hidden" id="addressId" value="">
|
||
<div>
|
||
<label class="block text-sm font-medium text-gray-700 mb-1">收件人</label>
|
||
<input type="text" id="addressReceiver" class="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent" placeholder="请输入收件人姓名">
|
||
<p class="mt-1 text-sm text-red-600 hidden" id="addressReceiverError">请输入收件人姓名</p>
|
||
</div>
|
||
<div>
|
||
<label class="block text-sm font-medium text-gray-700 mb-1">手机号码</label>
|
||
<input type="tel" id="addressPhone" class="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent" placeholder="请输入手机号码">
|
||
<p class="mt-1 text-sm text-red-600 hidden" id="addressPhoneError">请输入正确的手机号码</p>
|
||
</div>
|
||
<div>
|
||
<label class="block text-sm font-medium text-gray-700 mb-1">详细地址</label>
|
||
<textarea id="addressDetail" rows="3" class="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent" placeholder="请输入详细地址"></textarea>
|
||
<p class="mt-1 text-sm text-red-600 hidden" id="addressDetailError">请输入详细地址</p>
|
||
</div>
|
||
<div>
|
||
<label class="flex items-center">
|
||
<input type="checkbox" id="addressDefault" class="w-4 h-4 text-primary focus:ring-primary border-gray-300 rounded">
|
||
<span class="ml-2 text-sm text-gray-700">设为默认地址</span>
|
||
</label>
|
||
</div>
|
||
</form>
|
||
</div>
|
||
<div class="p-6 border-t border-gray-200 flex justify-end space-x-3">
|
||
<button id="cancelAddressBtn" class="px-4 py-2 border border-gray-300 rounded-md text-gray-700 hover:bg-gray-50 transition-all-300">取消</button>
|
||
<button id="saveAddressBtn" class="px-4 py-2 bg-primary text-white rounded-md hover:bg-primary/90 transition-all-300">保存</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 账号设置弹窗 -->
|
||
<div id="accountSettingModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden">
|
||
<div class="bg-white rounded-lg shadow-lg w-full max-w-md max-h-[90vh] overflow-y-auto">
|
||
<div class="p-6 border-b border-gray-200 flex justify-between items-center">
|
||
<h3 class="text-xl font-bold text-gray-800" id="accountSettingModalTitle">账号设置</h3>
|
||
<button id="closeAccountSettingModal" class="text-gray-400 hover:text-gray-600 transition-all-300">
|
||
<i class="fa fa-times text-xl"></i>
|
||
</button>
|
||
</div>
|
||
<div class="p-6">
|
||
<!-- 修改密码 -->
|
||
<div id="changePasswordContent" class="space-y-4">
|
||
<div>
|
||
<label class="block text-sm font-medium text-gray-700 mb-1">当前密码</label>
|
||
<input type="password" class="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent" placeholder="请输入当前密码">
|
||
</div>
|
||
<div>
|
||
<label class="block text-sm font-medium text-gray-700 mb-1">新密码</label>
|
||
<input type="password" class="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent" placeholder="请输入新密码">
|
||
<p class="mt-1 text-xs text-gray-500">密码长度至少8位，包含字母和数字</p>
|
||
</div>
|
||
<div>
|
||
<label class="block text-sm font-medium text-gray-700 mb-1">确认新密码</label>
|
||
<input type="password" class="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent" placeholder="请确认新密码">
|
||
</div>
|
||
</div>
|
||
<!-- 账号绑定 -->
|
||
<div id="accountBindingContent" class="space-y-4 hidden">
|
||
<div class="flex justify-between items-center p-3 border border-gray-200 rounded-md">
|
||
<div>
|
||
<div class="font-medium text-gray-800">手机号</div>
|
||
<div class="text-sm text-gray-500 mt-1">138****6789</div>
|
||
</div>
|
||
<button class="px-3 py-1 bg-primary text-white rounded-md hover:bg-primary/90 transition-all-300 text-sm">
|
||
已绑定
|
||
</button>
|
||
</div>
|
||
<div class="flex justify-between items-center p-3 border border-gray-200 rounded-md">
|
||
<div>
|
||
<div class="font-medium text-gray-800">邮箱</div>
|
||
<div class="text-sm text-gray-500 mt-1">zhangsan@example.com</div>
|
||
</div>
|
||
<button class="px-3 py-1 bg-primary text-white rounded-md hover:bg-primary/90 transition-all-300 text-sm">
|
||
已绑定
|
||
</button>
|
||
</div>
|
||
<div class="flex justify-between items-center p-3 border border-gray-200 rounded-md">
|
||
<div>
|
||
<div class="font-medium text-gray-800">微信</div>
|
||
<div class="text-sm text-gray-500 mt-1">未绑定</div>
|
||
</div>
|
||
<button class="px-3 py-1 border border-primary text-primary rounded-md hover:bg-primary/10 transition-all-300 text-sm">
|
||
绑定
|
||
</button>
|
||
</div>
|
||
<div class="flex justify-between items-center p-3 border border-gray-200 rounded-md">
|
||
<div>
|
||
<div class="font-medium text-gray-800">支付宝</div>
|
||
<div class="text-sm text-gray-500 mt-1">未绑定</div>
|
||
</div>
|
||
<button class="px-3 py-1 border border-primary text-primary rounded-md hover:bg-primary/10 transition-all-300 text-sm">
|
||
绑定
|
||
</button>
|
||
</div>
|
||
</div>
|
||
<!-- 登录设备管理 -->
|
||
<div id="deviceManagementContent" class="space-y-4 hidden">
|
||
<div class="border border-gray-200 rounded-md overflow-hidden">
|
||
<div class="p-4 bg-gray-50 border-b border-gray-200">
|
||
<div class="font-medium text-gray-800">当前设备</div>
|
||
</div>
|
||
<div class="p-4">
|
||
<div class="flex justify-between items-center">
|
||
<div>
|
||
<div class="font-medium text-gray-800">Windows 10</div>
|
||
<div class="text-sm text-gray-500 mt-1">Chrome 120.0.0.0</div>
|
||
</div>
|
||
<div class="text-sm text-gray-500">2026-02-06 10:30</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="border border-gray-200 rounded-md overflow-hidden">
|
||
<div class="p-4">
|
||
<div class="flex justify-between items-center">
|
||
<div>
|
||
<div class="font-medium text-gray-800">MacOS 14</div>
|
||
<div class="text-sm text-gray-500 mt-1">Safari 17.0</div>
|
||
</div>
|
||
<div class="flex items-center space-x-2">
|
||
<div class="text-sm text-gray-500">2026-02-05 16:45</div>
|
||
<button class="text-danger hover:text-danger/80 transition-all-300">
|
||
<i class="fa fa-trash"></i>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="border border-gray-200 rounded-md overflow-hidden">
|
||
<div class="p-4">
|
||
<div class="flex justify-between items-center">
|
||
<div>
|
||
<div class="font-medium text-gray-800">iOS 17</div>
|
||
<div class="text-sm text-gray-500 mt-1">Safari</div>
|
||
</div>
|
||
<div class="flex items-center space-x-2">
|
||
<div class="text-sm text-gray-500">2026-02-04 09:10</div>
|
||
<button class="text-danger hover:text-danger/80 transition-all-300">
|
||
<i class="fa fa-trash"></i>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- 安全设置 -->
|
||
<div id="securitySettingsContent" class="space-y-4 hidden">
|
||
<div class="flex justify-between items-center">
|
||
<div>
|
||
<div class="font-medium text-gray-800">两步验证</div>
|
||
<div class="text-sm text-gray-500 mt-1">提高账号安全性</div>
|
||
</div>
|
||
<label class="relative inline-flex items-center cursor-pointer">
|
||
<input type="checkbox" class="sr-only peer">
|
||
<div class="w-11 h-6 bg-gray-200 peer-focus:outline-none rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-primary"></div>
|
||
</label>
|
||
</div>
|
||
<div class="flex justify-between items-center">
|
||
<div>
|
||
<div class="font-medium text-gray-800">登录保护</div>
|
||
<div class="text-sm text-gray-500 mt-1">陌生设备登录需验证</div>
|
||
</div>
|
||
<label class="relative inline-flex items-center cursor-pointer">
|
||
<input type="checkbox" checked class="sr-only peer">
|
||
<div class="w-11 h-6 bg-gray-200 peer-focus:outline-none rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-primary"></div>
|
||
</label>
|
||
</div>
|
||
<div class="flex justify-between items-center">
|
||
<div>
|
||
<div class="font-medium text-gray-800">操作保护</div>
|
||
<div class="text-sm text-gray-500 mt-1">敏感操作需验证</div>
|
||
</div>
|
||
<label class="relative inline-flex items-center cursor-pointer">
|
||
<input type="checkbox" checked class="sr-only peer">
|
||
<div class="w-11 h-6 bg-gray-200 peer-focus:outline-none rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-primary"></div>
|
||
</label>
|
||
</div>
|
||
<div class="pt-4 border-t border-gray-200">
|
||
<button class="w-full px-4 py-2 bg-primary text-white rounded-md hover:bg-primary/90 transition-all-300">
|
||
立即验证
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="p-6 border-t border-gray-200 flex justify-end space-x-3">
|
||
<button id="cancelAccountSettingBtn" class="px-4 py-2 border border-gray-300 rounded-md text-gray-700 hover:bg-gray-50 transition-all-300">取消</button>
|
||
<button id="saveAccountSettingBtn" class="px-4 py-2 bg-primary text-white rounded-md hover:bg-primary/90 transition-all-300">保存</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 财务操作弹窗 -->
|
||
<div id="financeActionModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden">
|
||
<div class="bg-white rounded-lg shadow-lg w-full max-w-md max-h-[90vh] overflow-y-auto">
|
||
<div class="p-6 border-b border-gray-200 flex justify-between items-center">
|
||
<h3 class="text-xl font-bold text-gray-800" id="financeActionModalTitle">财务操作</h3>
|
||
<button id="closeFinanceActionModal" class="text-gray-400 hover:text-gray-600 transition-all-300">
|
||
<i class="fa fa-times text-xl"></i>
|
||
</button>
|
||
</div>
|
||
<div class="p-6">
|
||
<div id="rechargeContent" class="space-y-4">
|
||
<div>
|
||
<label class="block text-sm font-medium text-gray-700 mb-1">充值金额</label>
|
||
<input type="number" min="1" class="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent" placeholder="请输入充值金额">
|
||
</div>
|
||
<div>
|
||
<label class="block text-sm font-medium text-gray-700 mb-1">充值方式</label>
|
||
<select class="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent">
|
||
<option value="alipay">支付宝</option>
|
||
<option value="wechat">微信支付</option>
|
||
<option value="bank">银行转账</option>
|
||
</select>
|
||
</div>
|
||
</div>
|
||
|
||
<div id="invoiceContent" class="space-y-4 hidden">
|
||
<div>
|
||
<label class="block text-sm font-medium text-gray-700 mb-1">发票类型</label>
|
||
<select class="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent">
|
||
<option value="normal">增值税普通发票</option>
|
||
<option value="special">增值税专用发票</option>
|
||
</select>
|
||
</div>
|
||
<div>
|
||
<label class="block text-sm font-medium text-gray-700 mb-1">发票金额</label>
|
||
<input type="number" min="1" class="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent" placeholder="请输入发票金额">
|
||
</div>
|
||
<div>
|
||
<label class="block text-sm font-medium text-gray-700 mb-1">发票抬头</label>
|
||
<input type="text" class="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent" placeholder="请输入发票抬头">
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="p-6 border-t border-gray-200 flex justify-end space-x-3">
|
||
<button id="cancelFinanceActionBtn" class="px-4 py-2 border border-gray-300 rounded-md text-gray-700 hover:bg-gray-50 transition-all-300">取消</button>
|
||
<button id="confirmFinanceActionBtn" class="px-4 py-2 bg-primary text-white rounded-md hover:bg-primary/90 transition-all-300">确认</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 全局样式优化 -->
|
||
<style>
|
||
/* 动画效果 */
|
||
.animate-fadeIn {
|
||
animation: fadeIn 0.3s ease-in-out;
|
||
}
|
||
.animate-slideIn {
|
||
animation: slideIn 0.3s ease-in-out;
|
||
}
|
||
.animate-spin {
|
||
animation: spin 1s linear infinite;
|
||
}
|
||
.animate-fadeOut {
|
||
animation: fadeOut 0.3s ease-in-out;
|
||
}
|
||
.animate-pulse {
|
||
animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
|
||
}
|
||
.animate-bounce {
|
||
animation: bounce 1s infinite;
|
||
}
|
||
@keyframes fadeIn {
|
||
from { opacity: 0; }
|
||
to { opacity: 1; }
|
||
}
|
||
@keyframes slideIn {
|
||
from { transform: translateY(-10px); opacity: 0; }
|
||
to { transform: translateY(0); opacity: 1; }
|
||
}
|
||
@keyframes spin {
|
||
from { transform: rotate(0deg); }
|
||
to { transform: rotate(360deg); }
|
||
}
|
||
@keyframes fadeOut {
|
||
from { opacity: 1; }
|
||
to { opacity: 0; }
|
||
}
|
||
@keyframes pulse {
|
||
0%, 100% {
|
||
opacity: 1;
|
||
}
|
||
50% {
|
||
opacity: 0.5;
|
||
}
|
||
}
|
||
@keyframes bounce {
|
||
0%, 100% {
|
||
transform: translateY(-25%);
|
||
animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
|
||
}
|
||
50% {
|
||
transform: translateY(0);
|
||
animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
|
||
}
|
||
}
|
||
|
||
/* 表单元素交互反馈 */
|
||
input:focus,
|
||
select:focus,
|
||
textarea:focus {
|
||
outline: 2px solid rgba(59, 130, 246, 0.5);
|
||
outline-offset: 2px;
|
||
}
|
||
|
||
/* 按钮交互效果增强 */
|
||
button:hover {
|
||
transform: translateY(-1px);
|
||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
||
}
|
||
button:active {
|
||
transform: translateY(0);
|
||
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
|
||
}
|
||
|
||
/* 加载状态按钮 */
|
||
button:disabled {
|
||
cursor: not-allowed;
|
||
opacity: 0.6;
|
||
}
|
||
|
||
/* 卡片悬停效果 */
|
||
.card-hover:hover {
|
||
transform: translateY(-2px);
|
||
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
|
||
}
|
||
|
||
/* 平滑过渡效果 */
|
||
* {
|
||
transition: all 0.2s ease-in-out;
|
||
}
|
||
|
||
/* 表格行悬停效果 */
|
||
table tbody tr:hover {
|
||
background-color: #f9fafb;
|
||
}
|
||
|
||
/* 通知提示样式 */
|
||
.notification {
|
||
position: fixed;
|
||
top: 20px;
|
||
right: 4px;
|
||
z-index: 50;
|
||
animation: slideIn 0.3s ease-in-out;
|
||
}
|
||
</style>
|
||
|
||
<script>
|
||
// 模块切换功能
|
||
document.addEventListener('DOMContentLoaded', function() {
|
||
const moduleBtns = document.querySelectorAll('.module-btn');
|
||
const modulePanels = document.querySelectorAll('.module-panel');
|
||
|
||
moduleBtns.forEach(btn => {
|
||
btn.addEventListener('click', function() {
|
||
const targetModule = this.getAttribute('data-module');
|
||
|
||
// 更新按钮状态
|
||
moduleBtns.forEach(b => {
|
||
b.classList.remove('active', 'bg-primary', 'text-white');
|
||
b.classList.add('bg-gray-200', 'text-gray-700');
|
||
});
|
||
this.classList.add('active', 'bg-primary', 'text-white');
|
||
this.classList.remove('bg-gray-200', 'text-gray-700');
|
||
|
||
// 显示对应模块
|
||
modulePanels.forEach(panel => {
|
||
panel.classList.add('hidden');
|
||
panel.classList.remove('active');
|
||
});
|
||
document.getElementById(targetModule).classList.remove('hidden');
|
||
document.getElementById(targetModule).classList.add('active');
|
||
|
||
// 初始化图表
|
||
if (targetModule === 'analytics-center') {
|
||
initCharts();
|
||
}
|
||
});
|
||
});
|
||
|
||
// 订单详情弹窗
|
||
const orderDetailBtns = document.querySelectorAll('.order-detail-btn');
|
||
const orderDetailModal = document.getElementById('orderDetailModal');
|
||
const closeOrderDetailModal = document.getElementById('closeOrderDetailModal');
|
||
const orderDetailLoading = document.getElementById('orderDetailLoading');
|
||
const orderDetailContent = document.getElementById('orderDetailContent');
|
||
|
||
// 订单数据模拟
|
||
const orderDataMap = {
|
||
'ORD20260206001': {
|
||
orderId: 'ORD20260206001',
|
||
status: 'processing',
|
||
statusText: '处理中',
|
||
createTime: '2026-02-06 10:30',
|
||
payTime: '2026-02-06 10:35',
|
||
payMethod: '支付宝',
|
||
tradeNo: '202602061035123456',
|
||
productName: 'iPhone 16 Pro',
|
||
productSpec: '颜色: 钛金属色 | 容量: 256GB',
|
||
productPrice: '¥8,999.00',
|
||
productQuantity: 'x1',
|
||
receiver: '张三 (138****6789)',
|
||
address: '北京市海淀区中关村大街1号',
|
||
logisticsStatus: '订单正在处理中，尚未发货',
|
||
subtotal: '¥8,999.00',
|
||
shippingFee: '¥0.00',
|
||
discount: '-¥0.00',
|
||
totalAmount: '¥8,999.00',
|
||
remark: '无备注'
|
||
},
|
||
'ORD20260206002': {
|
||
orderId: 'ORD20260206002',
|
||
status: 'completed',
|
||
statusText: '已完成',
|
||
createTime: '2026-02-06 09:15',
|
||
payTime: '2026-02-06 09:20',
|
||
payMethod: '微信支付',
|
||
tradeNo: '202602060920654321',
|
||
productName: '年度会员服务',
|
||
productSpec: '类型: 高级会员',
|
||
productPrice: '¥1,299.00',
|
||
productQuantity: 'x1',
|
||
receiver: '张三 (138****6789)',
|
||
address: '北京市海淀区中关村大街1号',
|
||
logisticsStatus: '服务已开通',
|
||
subtotal: '¥1,299.00',
|
||
shippingFee: '¥0.00',
|
||
discount: '-¥100.00',
|
||
totalAmount: '¥1,199.00',
|
||
remark: '无备注'
|
||
},
|
||
'ORD20260205001': {
|
||
orderId: 'ORD20260205001',
|
||
status: 'shipping',
|
||
statusText: '配送中',
|
||
createTime: '2026-02-05 16:45',
|
||
payTime: '2026-02-05 16:50',
|
||
payMethod: '支付宝',
|
||
tradeNo: '202602051650112233',
|
||
productName: '笔记本电脑',
|
||
productSpec: '型号: MacBook Air M3',
|
||
productPrice: '¥10,499.00',
|
||
productQuantity: 'x1',
|
||
receiver: '张三 (138****6789)',
|
||
address: '上海市浦东新区张江高科技园区',
|
||
logisticsStatus: '商品已发货，正在配送中',
|
||
subtotal: '¥10,499.00',
|
||
shippingFee: '¥0.00',
|
||
discount: '-¥500.00',
|
||
totalAmount: '¥9,999.00',
|
||
remark: '请尽快发货'
|
||
}
|
||
};
|
||
|
||
orderDetailBtns.forEach(btn => {
|
||
btn.addEventListener('click', function() {
|
||
const orderId = this.getAttribute('data-order-id');
|
||
|
||
// 显示加载状态
|
||
orderDetailModal.classList.remove('hidden');
|
||
orderDetailLoading.classList.remove('hidden');
|
||
orderDetailContent.classList.add('hidden');
|
||
|
||
// 模拟加载延迟
|
||
setTimeout(() => {
|
||
// 隐藏加载状态
|
||
orderDetailLoading.classList.add('hidden');
|
||
orderDetailContent.classList.remove('hidden');
|
||
|
||
// 加载订单数据
|
||
loadOrderDetail(orderId);
|
||
}, 1000);
|
||
});
|
||
});
|
||
|
||
function loadOrderDetail(orderId) {
|
||
// 获取订单数据
|
||
const orderData = orderDataMap[orderId] || orderDataMap['ORD20260206001'];
|
||
|
||
// 更新订单状态
|
||
const modalOrderStatus = document.getElementById('modalOrderStatus');
|
||
const modalOrderStatusText = document.getElementById('modalOrderStatusText');
|
||
if (modalOrderStatus && modalOrderStatusText) {
|
||
modalOrderStatusText.textContent = orderData.statusText;
|
||
modalOrderStatus.textContent = orderData.statusText;
|
||
|
||
// 根据状态更新样式
|
||
modalOrderStatus.className = 'px-2 py-1 text-xs rounded-full';
|
||
switch(orderData.status) {
|
||
case 'pending':
|
||
modalOrderStatus.classList.add('bg-yellow-100', 'text-yellow-800');
|
||
break;
|
||
case 'processing':
|
||
modalOrderStatus.classList.add('bg-blue-100', 'text-blue-800');
|
||
break;
|
||
case 'shipping':
|
||
modalOrderStatus.classList.add('bg-purple-100', 'text-purple-800');
|
||
break;
|
||
case 'completed':
|
||
modalOrderStatus.classList.add('bg-green-100', 'text-green-800');
|
||
break;
|
||
case 'cancelled':
|
||
modalOrderStatus.classList.add('bg-gray-100', 'text-gray-800');
|
||
break;
|
||
case 'exception':
|
||
modalOrderStatus.classList.add('bg-red-100', 'text-red-800');
|
||
break;
|
||
default:
|
||
modalOrderStatus.classList.add('bg-blue-100', 'text-blue-800');
|
||
}
|
||
}
|
||
|
||
// 更新订单信息
|
||
document.getElementById('modalOrderId').textContent = orderData.orderId;
|
||
document.getElementById('modalCreateTime').textContent = orderData.createTime;
|
||
document.getElementById('modalPayTime').textContent = orderData.payTime;
|
||
document.getElementById('modalPayMethod').textContent = orderData.payMethod;
|
||
document.getElementById('modalTradeNo').textContent = orderData.tradeNo;
|
||
|
||
// 更新商品信息
|
||
document.getElementById('modalProductName').textContent = orderData.productName;
|
||
document.getElementById('modalProductSpec').textContent = orderData.productSpec;
|
||
document.getElementById('modalProductPrice').textContent = orderData.productPrice;
|
||
document.getElementById('modalProductQuantity').textContent = orderData.productQuantity;
|
||
|
||
// 更新收货信息
|
||
document.getElementById('modalReceiver').textContent = orderData.receiver;
|
||
document.getElementById('modalAddress').textContent = orderData.address;
|
||
|
||
// 更新物流信息
|
||
document.getElementById('modalLogisticsStatus').textContent = orderData.logisticsStatus;
|
||
|
||
// 更新费用信息
|
||
document.getElementById('modalSubtotal').textContent = orderData.subtotal;
|
||
document.getElementById('modalShippingFee').textContent = orderData.shippingFee;
|
||
document.getElementById('modalDiscount').textContent = orderData.discount;
|
||
document.getElementById('modalTotalAmount').textContent = orderData.totalAmount;
|
||
|
||
// 更新备注
|
||
document.getElementById('modalOrderRemark').textContent = orderData.remark;
|
||
|
||
console.log('加载订单详情:', orderId, orderData);
|
||
}
|
||
|
||
closeOrderDetailModal.addEventListener('click', function() {
|
||
orderDetailModal.classList.add('hidden');
|
||
});
|
||
|
||
// 点击弹窗外部关闭
|
||
orderDetailModal.addEventListener('click', function(e) {
|
||
if (e.target === orderDetailModal) {
|
||
orderDetailModal.classList.add('hidden');
|
||
}
|
||
});
|
||
|
||
// 全局通知函数
|
||
function showNotification(message, type = 'info') {
|
||
// 创建通知元素
|
||
const notification = document.createElement('div');
|
||
notification.className = 'fixed top-20 right-4 px-4 py-3 rounded-md shadow-lg z-50 animate-slideIn flex items-center space-x-3';
|
||
|
||
// 根据类型设置样式
|
||
switch(type) {
|
||
case 'success':
|
||
notification.classList.add('bg-success', 'text-white');
|
||
notification.innerHTML = `<i class="fa fa-check-circle"></i><span>${message}</span>`;
|
||
break;
|
||
case 'error':
|
||
notification.classList.add('bg-danger', 'text-white');
|
||
notification.innerHTML = `<i class="fa fa-exclamation-circle"></i><span>${message}</span>`;
|
||
break;
|
||
case 'warning':
|
||
notification.classList.add('bg-warning', 'text-white');
|
||
notification.innerHTML = `<i class="fa fa-exclamation-triangle"></i><span>${message}</span>`;
|
||
break;
|
||
default:
|
||
notification.classList.add('bg-info', 'text-white');
|
||
notification.innerHTML = `<i class="fa fa-info-circle"></i><span>${message}</span>`;
|
||
}
|
||
|
||
// 添加到页面
|
||
document.body.appendChild(notification);
|
||
|
||
// 3秒后移除
|
||
setTimeout(() => {
|
||
notification.classList.add('animate-slideOut');
|
||
setTimeout(() => {
|
||
document.body.removeChild(notification);
|
||
}, 300);
|
||
}, 3000);
|
||
}
|
||
|
||
// 订单编辑按钮
|
||
const orderEditBtns = document.querySelectorAll('.order-edit-btn');
|
||
orderEditBtns.forEach(btn => {
|
||
btn.addEventListener('click', function() {
|
||
const orderId = this.getAttribute('data-order-id');
|
||
console.log('编辑订单:', orderId);
|
||
alert(`编辑订单: ${orderId}`);
|
||
});
|
||
});
|
||
|
||
// 订单删除按钮
|
||
const orderDeleteBtns = document.querySelectorAll('.order-delete-btn');
|
||
orderDeleteBtns.forEach(btn => {
|
||
btn.addEventListener('click', function() {
|
||
const orderId = this.getAttribute('data-order-id');
|
||
if (confirm(`确定要删除订单 ${orderId} 吗？`)) {
|
||
console.log('删除订单:', orderId);
|
||
alert(`订单 ${orderId} 已删除`);
|
||
}
|
||
});
|
||
});
|
||
|
||
// 订单支付按钮
|
||
const orderPayBtns = document.querySelectorAll('.order-pay-btn');
|
||
orderPayBtns.forEach(btn => {
|
||
btn.addEventListener('click', function() {
|
||
const orderId = this.getAttribute('data-order-id');
|
||
console.log('支付订单:', orderId);
|
||
alert(`跳转到支付页面: ${orderId}`);
|
||
});
|
||
});
|
||
|
||
// 订单筛选功能
|
||
const orderFilterBtn = document.getElementById('orderFilterBtn');
|
||
const orderSearchInput = document.getElementById('orderSearchInput');
|
||
const orderStatusFilter = document.getElementById('orderStatusFilter');
|
||
const orderTypeFilter = document.getElementById('orderTypeFilter');
|
||
const orderTimeFilter = document.getElementById('orderTimeFilter');
|
||
const filterFeedback = document.getElementById('filterFeedback');
|
||
const filterMessage = document.getElementById('filterMessage');
|
||
const filterCount = document.getElementById('filterCount');
|
||
const clearFilterBtn = document.getElementById('clearFilterBtn');
|
||
const refreshOrdersBtn = document.getElementById('refreshOrdersBtn');
|
||
|
||
if (orderFilterBtn) {
|
||
orderFilterBtn.addEventListener('click', function() {
|
||
const searchTerm = orderSearchInput.value.trim();
|
||
const status = orderStatusFilter.value;
|
||
const type = orderTypeFilter.value;
|
||
const time = orderTimeFilter.value;
|
||
|
||
console.log('筛选订单:', { searchTerm, status, type, time });
|
||
|
||
// 模拟筛选结果
|
||
const filteredCount = Math.floor(Math.random() * 8) + 1;
|
||
|
||
// 更新筛选反馈
|
||
filterMessage.innerHTML = `共找到 <span class="font-medium">${filteredCount}</span> 条符合条件的订单`;
|
||
filterFeedback.classList.remove('hidden');
|
||
filterFeedback.classList.add('animate-fadeIn');
|
||
|
||
// 更新筛选计数
|
||
if (filteredCount > 0) {
|
||
filterCount.textContent = filteredCount;
|
||
filterCount.classList.remove('hidden');
|
||
} else {
|
||
filterCount.classList.add('hidden');
|
||
}
|
||
|
||
// 模拟订单列表刷新动画
|
||
const orderTable = document.querySelector('#order-center table');
|
||
if (orderTable) {
|
||
orderTable.classList.add('opacity-50');
|
||
setTimeout(() => {
|
||
orderTable.classList.remove('opacity-50');
|
||
}, 500);
|
||
}
|
||
});
|
||
}
|
||
|
||
if (clearFilterBtn) {
|
||
clearFilterBtn.addEventListener('click', function() {
|
||
orderSearchInput.value = '';
|
||
orderStatusFilter.value = '';
|
||
orderTypeFilter.value = '';
|
||
orderTimeFilter.value = '';
|
||
filterFeedback.classList.add('hidden');
|
||
filterCount.classList.add('hidden');
|
||
|
||
console.log('清除筛选条件');
|
||
});
|
||
}
|
||
|
||
if (refreshOrdersBtn) {
|
||
refreshOrdersBtn.addEventListener('click', function() {
|
||
console.log('刷新订单列表');
|
||
|
||
// 添加刷新动画
|
||
this.classList.add('animate-spin');
|
||
|
||
// 模拟刷新过程
|
||
setTimeout(() => {
|
||
this.classList.remove('animate-spin');
|
||
|
||
// 显示刷新成功提示
|
||
const refreshAlert = document.createElement('div');
|
||
refreshAlert.className = 'fixed top-20 right-4 bg-success text-white px-4 py-2 rounded-md shadow-lg z-50 animate-slideIn';
|
||
refreshAlert.innerHTML = '<i class="fa fa-check-circle mr-2"></i> 订单列表已刷新';
|
||
document.body.appendChild(refreshAlert);
|
||
|
||
// 3秒后移除提示
|
||
setTimeout(() => {
|
||
refreshAlert.classList.add('animate-slideOut');
|
||
setTimeout(() => {
|
||
document.body.removeChild(refreshAlert);
|
||
}, 300);
|
||
}, 3000);
|
||
}, 1000);
|
||
});
|
||
}
|
||
|
||
// 订单选择和批量操作
|
||
const orderCheckboxes = document.querySelectorAll('.order-checkbox');
|
||
const selectAllOrders = document.getElementById('selectAllOrders');
|
||
const headerSelectAll = document.getElementById('headerSelectAll');
|
||
const batchActionsBar = document.getElementById('batchActionsBar');
|
||
const selectedCount = document.getElementById('selectedCount');
|
||
const cancelBatchActions = document.getElementById('cancelBatchActions');
|
||
|
||
function updateBatchActions() {
|
||
const checkedBoxes = document.querySelectorAll('.order-checkbox:checked');
|
||
const count = checkedBoxes.length;
|
||
selectedCount.textContent = `已选择 ${count} 项`;
|
||
|
||
if (count > 0) {
|
||
batchActionsBar.classList.remove('hidden');
|
||
} else {
|
||
batchActionsBar.classList.add('hidden');
|
||
}
|
||
}
|
||
|
||
orderCheckboxes.forEach(checkbox => {
|
||
checkbox.addEventListener('change', updateBatchActions);
|
||
});
|
||
|
||
if (headerSelectAll) {
|
||
headerSelectAll.addEventListener('change', function() {
|
||
const isChecked = this.checked;
|
||
orderCheckboxes.forEach(checkbox => {
|
||
checkbox.checked = isChecked;
|
||
});
|
||
updateBatchActions();
|
||
});
|
||
}
|
||
|
||
if (selectAllOrders) {
|
||
selectAllOrders.addEventListener('change', function() {
|
||
const isChecked = this.checked;
|
||
orderCheckboxes.forEach(checkbox => {
|
||
checkbox.checked = isChecked;
|
||
});
|
||
updateBatchActions();
|
||
});
|
||
}
|
||
|
||
if (cancelBatchActions) {
|
||
cancelBatchActions.addEventListener('click', function() {
|
||
orderCheckboxes.forEach(checkbox => {
|
||
checkbox.checked = false;
|
||
});
|
||
if (headerSelectAll) headerSelectAll.checked = false;
|
||
if (selectAllOrders) selectAllOrders.checked = false;
|
||
updateBatchActions();
|
||
});
|
||
}
|
||
|
||
// 客户中心交互
|
||
// 保存个人信息
|
||
const savePersonalInfo = document.getElementById('savePersonalInfo');
|
||
if (savePersonalInfo) {
|
||
savePersonalInfo.addEventListener('click', function() {
|
||
// 表单验证
|
||
const nameInput = document.querySelector('#personalInfoForm input[type="text"]');
|
||
const phoneInput = document.querySelector('#personalInfoForm input[type="tel"]');
|
||
const emailInput = document.querySelector('#personalInfoForm input[type="email"]');
|
||
|
||
let isValid = true;
|
||
|
||
// 验证姓名
|
||
if (!nameInput.value.trim()) {
|
||
isValid = false;
|
||
// 可以添加错误提示
|
||
}
|
||
|
||
// 验证手机号
|
||
if (!/^1[3-9]\d{9}$/.test(phoneInput.value.trim())) {
|
||
isValid = false;
|
||
// 可以添加错误提示
|
||
}
|
||
|
||
// 验证邮箱
|
||
if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(emailInput.value.trim())) {
|
||
isValid = false;
|
||
// 可以添加错误提示
|
||
}
|
||
|
||
if (isValid) {
|
||
console.log('保存个人信息');
|
||
// 显示保存成功提示
|
||
showNotification('个人信息已保存', 'success');
|
||
} else {
|
||
showNotification('请检查表单信息', 'error');
|
||
}
|
||
});
|
||
}
|
||
|
||
// 地址管理
|
||
const addAddressBtn = document.getElementById('addAddressBtn');
|
||
const addressDefaultToggles = document.querySelectorAll('.address-default-toggle');
|
||
const addressEditBtns = document.querySelectorAll('.address-edit-btn');
|
||
const addressDeleteBtns = document.querySelectorAll('.address-delete-btn');
|
||
|
||
// 地址弹窗元素
|
||
const addressModal = document.getElementById('addressModal');
|
||
const closeAddressModal = document.getElementById('closeAddressModal');
|
||
const cancelAddressBtn = document.getElementById('cancelAddressBtn');
|
||
const saveAddressBtn = document.getElementById('saveAddressBtn');
|
||
const addressModalTitle = document.getElementById('addressModalTitle');
|
||
const addressForm = document.getElementById('addressForm');
|
||
const addressId = document.getElementById('addressId');
|
||
const addressReceiver = document.getElementById('addressReceiver');
|
||
const addressPhone = document.getElementById('addressPhone');
|
||
const addressDetail = document.getElementById('addressDetail');
|
||
const addressDefault = document.getElementById('addressDefault');
|
||
|
||
// 地址错误提示
|
||
const addressReceiverError = document.getElementById('addressReceiverError');
|
||
const addressPhoneError = document.getElementById('addressPhoneError');
|
||
const addressDetailError = document.getElementById('addressDetailError');
|
||
|
||
if (addAddressBtn) {
|
||
addAddressBtn.addEventListener('click', function() {
|
||
console.log('添加新地址');
|
||
openAddressModal();
|
||
});
|
||
}
|
||
|
||
addressDefaultToggles.forEach(toggle => {
|
||
toggle.addEventListener('click', function() {
|
||
const addressId = this.getAttribute('data-address-id');
|
||
console.log('设置默认地址:', addressId);
|
||
// 重置所有默认标记
|
||
addressDefaultToggles.forEach(t => {
|
||
t.classList.remove('bg-primary');
|
||
t.classList.add('border', 'border-gray-300');
|
||
t.innerHTML = '';
|
||
});
|
||
// 设置当前为默认
|
||
this.classList.remove('border', 'border-gray-300');
|
||
this.classList.add('bg-primary');
|
||
this.innerHTML = '<i class="fa fa-check"></i>';
|
||
showNotification('默认地址已设置', 'success');
|
||
});
|
||
});
|
||
|
||
addressEditBtns.forEach(btn => {
|
||
btn.addEventListener('click', function() {
|
||
const addressId = this.getAttribute('data-address-id');
|
||
console.log('编辑地址:', addressId);
|
||
openAddressModal(addressId);
|
||
});
|
||
});
|
||
|
||
addressDeleteBtns.forEach(btn => {
|
||
btn.addEventListener('click', function() {
|
||
const addressId = this.getAttribute('data-address-id');
|
||
if (confirm(`确定要删除地址 ${addressId} 吗？`)) {
|
||
console.log('删除地址:', addressId);
|
||
// 模拟删除操作
|
||
const addressItem = this.closest('.border');
|
||
if (addressItem) {
|
||
addressItem.classList.add('animate-fadeOut');
|
||
setTimeout(() => {
|
||
addressItem.remove();
|
||
showNotification(`地址 ${addressId} 已删除`, 'success');
|
||
}, 300);
|
||
}
|
||
}
|
||
});
|
||
});
|
||
|
||
// 打开地址弹窗
|
||
function openAddressModal(addressId = '') {
|
||
if (addressId) {
|
||
addressModalTitle.textContent = '编辑地址';
|
||
document.getElementById('addressId').value = addressId;
|
||
// 模拟加载地址数据
|
||
setTimeout(() => {
|
||
addressReceiver.value = '张三';
|
||
addressPhone.value = '13800138000';
|
||
addressDetail.value = '北京市海淀区中关村大街1号';
|
||
addressDefault.checked = false;
|
||
}, 100);
|
||
} else {
|
||
addressModalTitle.textContent = '添加地址';
|
||
document.getElementById('addressId').value = '';
|
||
addressReceiver.value = '';
|
||
addressPhone.value = '';
|
||
addressDetail.value = '';
|
||
addressDefault.checked = false;
|
||
}
|
||
addressModal.classList.remove('hidden');
|
||
}
|
||
|
||
// 关闭地址弹窗
|
||
if (closeAddressModal) {
|
||
closeAddressModal.addEventListener('click', function() {
|
||
addressModal.classList.add('hidden');
|
||
resetAddressForm();
|
||
});
|
||
}
|
||
|
||
if (cancelAddressBtn) {
|
||
cancelAddressBtn.addEventListener('click', function() {
|
||
addressModal.classList.add('hidden');
|
||
resetAddressForm();
|
||
});
|
||
}
|
||
|
||
// 保存地址
|
||
if (saveAddressBtn) {
|
||
saveAddressBtn.addEventListener('click', function() {
|
||
if (validateAddressForm()) {
|
||
const addrId = addressId.value;
|
||
console.log('保存地址:', addrId);
|
||
|
||
addressModal.classList.add('hidden');
|
||
resetAddressForm();
|
||
|
||
if (addrId) {
|
||
showNotification('地址已更新', 'success');
|
||
} else {
|
||
showNotification('地址已添加', 'success');
|
||
}
|
||
}
|
||
});
|
||
}
|
||
|
||
// 验证地址表单
|
||
function validateAddressForm() {
|
||
let isValid = true;
|
||
|
||
// 验证收件人
|
||
if (!addressReceiver.value.trim()) {
|
||
isValid = false;
|
||
addressReceiverError.classList.remove('hidden');
|
||
} else {
|
||
addressReceiverError.classList.add('hidden');
|
||
}
|
||
|
||
// 验证手机号
|
||
if (!/^1[3-9]\d{9}$/.test(addressPhone.value.trim())) {
|
||
isValid = false;
|
||
addressPhoneError.classList.remove('hidden');
|
||
} else {
|
||
addressPhoneError.classList.add('hidden');
|
||
}
|
||
|
||
// 验证详细地址
|
||
if (!addressDetail.value.trim()) {
|
||
isValid = false;
|
||
addressDetailError.classList.remove('hidden');
|
||
} else {
|
||
addressDetailError.classList.add('hidden');
|
||
}
|
||
|
||
return isValid;
|
||
}
|
||
|
||
// 重置地址表单
|
||
function resetAddressForm() {
|
||
addressReceiver.value = '';
|
||
addressPhone.value = '';
|
||
addressDetail.value = '';
|
||
addressDefault.checked = false;
|
||
addressReceiverError.classList.add('hidden');
|
||
addressPhoneError.classList.add('hidden');
|
||
addressDetailError.classList.add('hidden');
|
||
}
|
||
|
||
// 点击弹窗外部关闭
|
||
if (addressModal) {
|
||
addressModal.addEventListener('click', function(e) {
|
||
if (e.target === addressModal) {
|
||
addressModal.classList.add('hidden');
|
||
resetAddressForm();
|
||
}
|
||
});
|
||
}
|
||
|
||
// 账号设置项点击
|
||
const accountSettingItems = document.querySelectorAll('.account-setting-item');
|
||
const accountSettingModal = document.getElementById('accountSettingModal');
|
||
const accountSettingModalTitle = document.getElementById('accountSettingModalTitle');
|
||
const closeAccountSettingModal = document.getElementById('closeAccountSettingModal');
|
||
const cancelAccountSettingBtn = document.getElementById('cancelAccountSettingBtn');
|
||
const saveAccountSettingBtn = document.getElementById('saveAccountSettingBtn');
|
||
|
||
// 账号设置内容
|
||
const changePasswordContent = document.getElementById('changePasswordContent');
|
||
const accountBindingContent = document.getElementById('accountBindingContent');
|
||
const deviceManagementContent = document.getElementById('deviceManagementContent');
|
||
const securitySettingsContent = document.getElementById('securitySettingsContent');
|
||
const apiSettingsContent = document.getElementById('apiSettingsPanel');
|
||
|
||
accountSettingItems.forEach(item => {
|
||
item.addEventListener('click', function() {
|
||
const target = this.getAttribute('data-target');
|
||
console.log('打开账号设置:', target);
|
||
openAccountSettingModal(target);
|
||
});
|
||
});
|
||
|
||
// 打开账号设置弹窗
|
||
function openAccountSettingModal(target) {
|
||
// 隐藏所有内容
|
||
changePasswordContent.classList.add('hidden');
|
||
accountBindingContent.classList.add('hidden');
|
||
deviceManagementContent.classList.add('hidden');
|
||
securitySettingsContent.classList.add('hidden');
|
||
apiSettingsContent.classList.add('hidden');
|
||
|
||
// 显示对应内容
|
||
switch(target) {
|
||
case 'password':
|
||
accountSettingModalTitle.textContent = '修改密码';
|
||
changePasswordContent.classList.remove('hidden');
|
||
break;
|
||
case 'binding':
|
||
accountSettingModalTitle.textContent = '账号绑定';
|
||
accountBindingContent.classList.remove('hidden');
|
||
break;
|
||
case 'device':
|
||
accountSettingModalTitle.textContent = '登录设备管理';
|
||
deviceManagementContent.classList.remove('hidden');
|
||
break;
|
||
case 'security':
|
||
accountSettingModalTitle.textContent = '安全设置';
|
||
securitySettingsContent.classList.remove('hidden');
|
||
break;
|
||
case 'apiSettings':
|
||
// 对于API设置，我们在主页面显示，而不是在弹窗中
|
||
accountSettingModal.classList.add('hidden');
|
||
apiSettingsContent.classList.remove('hidden');
|
||
return;
|
||
default:
|
||
accountSettingModalTitle.textContent = '账号设置';
|
||
changePasswordContent.classList.remove('hidden');
|
||
}
|
||
|
||
accountSettingModal.classList.remove('hidden');
|
||
}
|
||
|
||
// API设置交互
|
||
function initApiSettings() {
|
||
// 创建新API-Key按钮
|
||
const createApiKeyBtn = document.getElementById('createApiKeyBtn');
|
||
if (createApiKeyBtn) {
|
||
createApiKeyBtn.addEventListener('click', function() {
|
||
// 创建弹窗
|
||
const modal = document.createElement('div');
|
||
modal.className = 'fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50';
|
||
modal.innerHTML = `
|
||
<div class="bg-white rounded-lg shadow-lg p-6 max-w-md w-full">
|
||
<h3 class="text-lg font-bold text-gray-800 mb-4">创建新API-Key</h3>
|
||
<div class="space-y-4">
|
||
<div>
|
||
<label class="block text-sm font-medium text-gray-700 mb-1">密钥名称</label>
|
||
<input type="text" placeholder="例如：生产环境密钥" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent">
|
||
</div>
|
||
<div>
|
||
<label class="block text-sm font-medium text-gray-700 mb-1">权限</label>
|
||
<select class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent">
|
||
<option value="read_write">读写</option>
|
||
<option value="read_only">只读</option>
|
||
</select>
|
||
</div>
|
||
<div>
|
||
<label class="block text-sm font-medium text-gray-700 mb-1">过期时间</label>
|
||
<select class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent">
|
||
<option value="30_days">30天</option>
|
||
<option value="90_days">90天</option>
|
||
<option value="1_year">1年</option>
|
||
<option value="never">永不过期</option>
|
||
</select>
|
||
</div>
|
||
</div>
|
||
<div class="mt-6 flex justify-end space-x-3">
|
||
<button class="px-4 py-2 bg-gray-200 text-gray-700 rounded-md hover:bg-gray-300 transition-all-300" id="cancelCreateApiKey">取消</button>
|
||
<button class="px-4 py-2 bg-primary text-white rounded-md hover:bg-primary/90 transition-all-300" id="confirmCreateApiKey">创建</button>
|
||
</div>
|
||
</div>
|
||
`;
|
||
document.body.appendChild(modal);
|
||
|
||
// 取消按钮
|
||
modal.querySelector('#cancelCreateApiKey').addEventListener('click', function() {
|
||
document.body.removeChild(modal);
|
||
});
|
||
|
||
// 确认按钮
|
||
modal.querySelector('#confirmCreateApiKey').addEventListener('click', function() {
|
||
// 模拟创建API-Key
|
||
alert('API-Key创建成功！');
|
||
document.body.removeChild(modal);
|
||
});
|
||
});
|
||
}
|
||
|
||
// API-Key操作按钮
|
||
const apiKeyActions = document.querySelectorAll('#apiSettingsPanel [title="重新生成"], #apiSettingsPanel [title="禁用"], #apiSettingsPanel [title="启用"], #apiSettingsPanel [title="删除"]');
|
||
apiKeyActions.forEach(button => {
|
||
button.addEventListener('click', function() {
|
||
const action = this.getAttribute('title');
|
||
if (action === '删除') {
|
||
if (confirm('确定要删除这个API-Key吗？')) {
|
||
alert('API-Key已删除');
|
||
}
|
||
} else if (action === '重新生成') {
|
||
if (confirm('确定要重新生成这个API-Key吗？')) {
|
||
alert('API-Key已重新生成');
|
||
}
|
||
} else if (action === '禁用' || action === '启用') {
|
||
alert(`API-Key已${action}`);
|
||
}
|
||
});
|
||
});
|
||
|
||
// 接口订阅管理
|
||
const subscribeButtons = document.querySelectorAll('#apiSettingsPanel button:contains("订阅"), #apiSettingsPanel button:contains("查看详情")');
|
||
subscribeButtons.forEach(button => {
|
||
button.addEventListener('click', function() {
|
||
const text = this.textContent.trim();
|
||
if (text === '订阅') {
|
||
if (confirm('确定要订阅这个接口吗？')) {
|
||
alert('接口订阅成功！');
|
||
this.textContent = '查看详情';
|
||
}
|
||
} else if (text === '查看详情') {
|
||
alert('查看接口详情');
|
||
}
|
||
});
|
||
});
|
||
|
||
// Webhook历史记录操作
|
||
const webhookActions = document.querySelectorAll('#apiSettingsPanel [title="查看详情"], #apiSettingsPanel [title="重试"]');
|
||
webhookActions.forEach(button => {
|
||
button.addEventListener('click', function() {
|
||
const action = this.getAttribute('title');
|
||
if (action === '查看详情') {
|
||
alert('查看Webhook详情');
|
||
} else if (action === '重试') {
|
||
if (confirm('确定要重试这个Webhook吗？')) {
|
||
alert('Webhook重试中...');
|
||
}
|
||
}
|
||
});
|
||
});
|
||
|
||
// API版本选择
|
||
const apiVersionSelect = document.getElementById('apiVersionSelect');
|
||
if (apiVersionSelect) {
|
||
apiVersionSelect.addEventListener('change', function() {
|
||
const version = this.value;
|
||
alert(`已切换到API版本 ${version}`);
|
||
});
|
||
}
|
||
}
|
||
|
||
// 初始化API设置
|
||
initApiSettings();
|
||
|
||
// 关闭账号设置弹窗
|
||
if (closeAccountSettingModal) {
|
||
closeAccountSettingModal.addEventListener('click', function() {
|
||
accountSettingModal.classList.add('hidden');
|
||
});
|
||
}
|
||
|
||
if (cancelAccountSettingBtn) {
|
||
cancelAccountSettingBtn.addEventListener('click', function() {
|
||
accountSettingModal.classList.add('hidden');
|
||
});
|
||
}
|
||
|
||
// 保存账号设置
|
||
if (saveAccountSettingBtn) {
|
||
saveAccountSettingBtn.addEventListener('click', function() {
|
||
const title = accountSettingModalTitle.textContent;
|
||
console.log('保存账号设置:', title);
|
||
showNotification(`${title}已保存`, 'success');
|
||
accountSettingModal.classList.add('hidden');
|
||
});
|
||
}
|
||
|
||
// 点击弹窗外部关闭
|
||
if (accountSettingModal) {
|
||
accountSettingModal.addEventListener('click', function(e) {
|
||
if (e.target === accountSettingModal) {
|
||
accountSettingModal.classList.add('hidden');
|
||
}
|
||
});
|
||
}
|
||
|
||
// 偏好设置
|
||
const languageSelect = document.getElementById('languageSelect');
|
||
const paymentSelect = document.getElementById('paymentSelect');
|
||
const themeBtns = document.querySelectorAll('.theme-btn');
|
||
|
||
if (languageSelect) {
|
||
languageSelect.addEventListener('change', function() {
|
||
const language = this.value;
|
||
console.log('切换语言:', language);
|
||
showNotification(`语言已切换为: ${language === 'zh-CN' ? '简体中文' : 'English'}`, 'success');
|
||
});
|
||
}
|
||
|
||
if (paymentSelect) {
|
||
paymentSelect.addEventListener('change', function() {
|
||
const payment = this.value;
|
||
console.log('设置默认支付方式:', payment);
|
||
showNotification(`默认支付方式已设置为: ${this.options[this.selectedIndex].text}`, 'success');
|
||
});
|
||
}
|
||
|
||
themeBtns.forEach(btn => {
|
||
btn.addEventListener('click', function() {
|
||
const theme = this.getAttribute('data-theme');
|
||
console.log('切换主题:', theme);
|
||
// 重置所有主题按钮
|
||
themeBtns.forEach(b => {
|
||
b.classList.remove('border-2', 'border-primary');
|
||
b.classList.add('border-2', 'border-transparent');
|
||
});
|
||
// 设置当前主题按钮为选中状态
|
||
this.classList.remove('border-2', 'border-transparent');
|
||
this.classList.add('border-2', 'border-primary');
|
||
|
||
// 模拟主题切换效果
|
||
document.body.style.transition = 'all 0.3s ease';
|
||
if (theme === 'dark') {
|
||
document.body.classList.add('bg-gray-900', 'text-white');
|
||
document.body.classList.remove('bg-gray-50');
|
||
} else {
|
||
document.body.classList.remove('bg-gray-900', 'text-white');
|
||
document.body.classList.add('bg-gray-50');
|
||
}
|
||
|
||
showNotification(`主题已切换为: ${theme === 'light' ? '浅色' : theme === 'dark' ? '深色' : '自动'}`, 'success');
|
||
});
|
||
});
|
||
|
||
// 财务中心交互
|
||
// 财务操作按钮
|
||
const financeActionBtns = document.querySelectorAll('.finance-action-btn');
|
||
const financeQuickActions = document.querySelectorAll('.finance-quick-action');
|
||
const financeActionModal = document.getElementById('financeActionModal');
|
||
const financeActionModalTitle = document.getElementById('financeActionModalTitle');
|
||
const closeFinanceActionModal = document.getElementById('closeFinanceActionModal');
|
||
const cancelFinanceActionBtn = document.getElementById('cancelFinanceActionBtn');
|
||
const confirmFinanceActionBtn = document.getElementById('confirmFinanceActionBtn');
|
||
|
||
// 财务操作内容
|
||
const rechargeContent = document.getElementById('rechargeContent');
|
||
const invoiceContent = document.getElementById('invoiceContent');
|
||
|
||
financeActionBtns.forEach(btn => {
|
||
btn.addEventListener('click', function() {
|
||
const action = this.getAttribute('data-action');
|
||
console.log('财务操作:', action);
|
||
|
||
switch(action) {
|
||
case 'recharge':
|
||
openFinanceActionModal('recharge');
|
||
break;
|
||
case 'expenseDetail':
|
||
showNotification('查看支出明细', 'info');
|
||
break;
|
||
case 'applyInvoice':
|
||
openFinanceActionModal('invoice');
|
||
break;
|
||
default:
|
||
showNotification(`执行财务操作: ${action}`, 'info');
|
||
}
|
||
});
|
||
});
|
||
|
||
financeQuickActions.forEach(btn => {
|
||
btn.addEventListener('click', function() {
|
||
const action = this.getAttribute('data-action');
|
||
console.log('财务快捷操作:', action);
|
||
|
||
switch(action) {
|
||
case 'recharge':
|
||
openFinanceActionModal('recharge');
|
||
break;
|
||
case 'invoice':
|
||
openFinanceActionModal('invoice');
|
||
break;
|
||
case 'transfer':
|
||
showNotification('跳转到资金转账页面', 'info');
|
||
break;
|
||
case 'statement':
|
||
showNotification('跳转到财务报表页面', 'info');
|
||
break;
|
||
default:
|
||
showNotification(`执行财务快捷操作: ${action}`, 'info');
|
||
}
|
||
});
|
||
});
|
||
|
||
// 打开财务操作弹窗
|
||
function openFinanceActionModal(action) {
|
||
// 隐藏所有内容
|
||
rechargeContent.classList.add('hidden');
|
||
invoiceContent.classList.add('hidden');
|
||
|
||
// 显示对应内容
|
||
switch(action) {
|
||
case 'recharge':
|
||
financeActionModalTitle.textContent = '账户充值';
|
||
rechargeContent.classList.remove('hidden');
|
||
break;
|
||
case 'invoice':
|
||
financeActionModalTitle.textContent = '发票申请';
|
||
invoiceContent.classList.remove('hidden');
|
||
break;
|
||
default:
|
||
financeActionModalTitle.textContent = '财务操作';
|
||
rechargeContent.classList.remove('hidden');
|
||
}
|
||
|
||
financeActionModal.classList.remove('hidden');
|
||
}
|
||
|
||
// 关闭财务操作弹窗
|
||
if (closeFinanceActionModal) {
|
||
closeFinanceActionModal.addEventListener('click', function() {
|
||
financeActionModal.classList.add('hidden');
|
||
});
|
||
}
|
||
|
||
if (cancelFinanceActionBtn) {
|
||
cancelFinanceActionBtn.addEventListener('click', function() {
|
||
financeActionModal.classList.add('hidden');
|
||
});
|
||
}
|
||
|
||
// 确认财务操作
|
||
if (confirmFinanceActionBtn) {
|
||
confirmFinanceActionBtn.addEventListener('click', function() {
|
||
const title = financeActionModalTitle.textContent;
|
||
console.log('确认财务操作:', title);
|
||
showNotification(`${title}操作已提交`, 'success');
|
||
financeActionModal.classList.add('hidden');
|
||
});
|
||
}
|
||
|
||
// 点击弹窗外部关闭
|
||
if (financeActionModal) {
|
||
financeActionModal.addEventListener('click', function(e) {
|
||
if (e.target === financeActionModal) {
|
||
financeActionModal.classList.add('hidden');
|
||
}
|
||
});
|
||
}
|
||
|
||
// 交易记录筛选
|
||
const transactionFilterBtn = document.getElementById('transactionFilterBtn');
|
||
const loadMoreTransactions = document.getElementById('loadMoreTransactions');
|
||
const transactionTypeSelect = document.getElementById('transactionTypeSelect');
|
||
const transactionPeriodSelect = document.getElementById('transactionPeriodSelect');
|
||
const transactionSortSelect = document.getElementById('transactionSortSelect');
|
||
|
||
if (transactionFilterBtn) {
|
||
transactionFilterBtn.addEventListener('click', function() {
|
||
const type = transactionTypeSelect.value;
|
||
const period = transactionPeriodSelect.value;
|
||
const sort = transactionSortSelect.value;
|
||
console.log('筛选交易记录:', type, period, sort);
|
||
|
||
// 添加加载状态
|
||
transactionFilterBtn.disabled = true;
|
||
transactionFilterBtn.innerHTML = '<i class="fa fa-spinner fa-spin mr-2"></i>筛选中...';
|
||
|
||
// 模拟筛选延迟
|
||
setTimeout(() => {
|
||
// 恢复按钮状态
|
||
transactionFilterBtn.disabled = false;
|
||
transactionFilterBtn.innerHTML = '筛选';
|
||
|
||
// 显示筛选结果反馈
|
||
showNotification(`筛选条件: 类型=${type}, 周期=${period}, 排序=${sort}`, 'success');
|
||
|
||
// 模拟筛选动画
|
||
const transactionTable = document.querySelector('#financial-center table');
|
||
if (transactionTable) {
|
||
transactionTable.classList.add('opacity-50');
|
||
setTimeout(() => {
|
||
transactionTable.classList.remove('opacity-50');
|
||
}, 300);
|
||
}
|
||
}, 800);
|
||
});
|
||
}
|
||
|
||
if (loadMoreTransactions) {
|
||
loadMoreTransactions.addEventListener('click', function() {
|
||
console.log('加载更多交易记录');
|
||
|
||
// 添加加载状态
|
||
loadMoreTransactions.disabled = true;
|
||
loadMoreTransactions.innerHTML = '<i class="fa fa-spinner fa-spin mr-2"></i>加载中...';
|
||
|
||
// 模拟加载延迟
|
||
setTimeout(() => {
|
||
// 恢复按钮状态
|
||
loadMoreTransactions.disabled = false;
|
||
loadMoreTransactions.innerHTML = '加载更多';
|
||
|
||
// 显示加载结果反馈
|
||
showNotification('已加载更多交易记录', 'success');
|
||
}, 1000);
|
||
});
|
||
}
|
||
|
||
// 交易记录点击查看详情
|
||
const transactionItems = document.querySelectorAll('[data-transaction-id]');
|
||
transactionItems.forEach(item => {
|
||
item.addEventListener('click', function(e) {
|
||
// 避免点击按钮时触发
|
||
if (e.target.tagName === 'BUTTON' || e.target.tagName === 'I') {
|
||
return;
|
||
}
|
||
|
||
const transactionId = this.getAttribute('data-transaction-id');
|
||
if (transactionId) {
|
||
console.log('查看交易详情:', transactionId);
|
||
showTransactionDetail(transactionId);
|
||
}
|
||
});
|
||
});
|
||
|
||
// 显示交易详情
|
||
function showTransactionDetail(transactionId) {
|
||
// 这里可以添加交易详情弹窗
|
||
showNotification(`查看交易 ${transactionId} 的详细信息`, 'info');
|
||
// 实际项目中可以打开一个弹窗显示详细信息
|
||
}
|
||
|
||
// 发票操作
|
||
const invoiceActionBtns = document.querySelectorAll('.invoice-action-btn');
|
||
|
||
invoiceActionBtns.forEach(btn => {
|
||
btn.addEventListener('click', function() {
|
||
const invoiceId = this.getAttribute('data-invoice-id');
|
||
const action = this.getAttribute('data-action');
|
||
console.log('发票操作:', action, invoiceId);
|
||
|
||
if (action === 'download') {
|
||
alert(`下载发票: ${invoiceId}`);
|
||
}
|
||
});
|
||
});
|
||
|
||
// 常见问题折叠功能
|
||
const faqBtns = document.querySelectorAll('.space-y-4 button');
|
||
faqBtns.forEach(btn => {
|
||
btn.addEventListener('click', function() {
|
||
const content = this.nextElementSibling;
|
||
const icon = this.querySelector('i');
|
||
|
||
if (content.classList.contains('hidden')) {
|
||
content.classList.remove('hidden');
|
||
icon.classList.remove('fa-chevron-down');
|
||
icon.classList.add('fa-chevron-up');
|
||
} else {
|
||
content.classList.add('hidden');
|
||
icon.classList.remove('fa-chevron-up');
|
||
icon.classList.add('fa-chevron-down');
|
||
}
|
||
});
|
||
});
|
||
|
||
// 初始化图表
|
||
function initCharts() {
|
||
// 订单趋势图表
|
||
const orderTrendCtx = document.getElementById('orderTrendChart');
|
||
if (orderTrendCtx) {
|
||
new Chart(orderTrendCtx, {
|
||
type: 'line',
|
||
data: {
|
||
labels: ['1/7', '1/14', '1/21', '1/28', '2/4', '2/11', '2/18', '2/25'],
|
||
datasets: [
|
||
{
|
||
label: '订单数',
|
||
data: [12, 19, 15, 20, 18, 25, 22, 28],
|
||
borderColor: '#165DFF',
|
||
backgroundColor: 'rgba(22, 93, 255, 0.1)',
|
||
tension: 0.3,
|
||
fill: true
|
||
},
|
||
{
|
||
label: '支出',
|
||
data: [24, 38, 30, 40, 36, 50, 44, 56],
|
||
borderColor: '#EF4444',
|
||
backgroundColor: 'rgba(239, 68, 68, 0.1)',
|
||
tension: 0.3,
|
||
fill: true,
|
||
yAxisID: 'y1'
|
||
}
|
||
]
|
||
},
|
||
options: {
|
||
responsive: true,
|
||
maintainAspectRatio: false,
|
||
scales: {
|
||
y: {
|
||
beginAtZero: true,
|
||
title: {
|
||
display: true,
|
||
text: '订单数'
|
||
}
|
||
},
|
||
y1: {
|
||
beginAtZero: true,
|
||
position: 'right',
|
||
title: {
|
||
display: true,
|
||
text: '支出 (美金)'
|
||
},
|
||
grid: {
|
||
drawOnChartArea: false
|
||
}
|
||
}
|
||
}
|
||
}
|
||
});
|
||
}
|
||
|
||
// 订单状态分布图表
|
||
const orderStatusCtx = document.getElementById('orderStatusChart');
|
||
if (orderStatusCtx) {
|
||
new Chart(orderStatusCtx, {
|
||
type: 'doughnut',
|
||
data: {
|
||
labels: ['已完成', '处理中', '配送中', '待支付', '已取消', '异常'],
|
||
datasets: [{
|
||
data: [196, 32, 10, 2, 6, 8],
|
||
backgroundColor: [
|
||
'#10B981',
|
||
'#3B82F6',
|
||
'#F59E0B',
|
||
'#6B7280',
|
||
'#9CA3AF',
|
||
'#EF4444'
|
||
],
|
||
borderWidth: 1
|
||
}]
|
||
},
|
||
options: {
|
||
responsive: true,
|
||
maintainAspectRatio: false,
|
||
plugins: {
|
||
legend: {
|
||
position: 'bottom'
|
||
}
|
||
}
|
||
}
|
||
});
|
||
}
|
||
|
||
// 订单时效分析图表
|
||
const orderTimeCtx = document.getElementById('orderTimeChart');
|
||
if (orderTimeCtx) {
|
||
new Chart(orderTimeCtx, {
|
||
type: 'bar',
|
||
data: {
|
||
labels: ['1月', '2月', '3月', '4月', '5月', '6月'],
|
||
datasets: [
|
||
{
|
||
label: '支付时效 (小时)',
|
||
data: [0.5, 0.4, 0.6, 0.4, 0.5, 0.3],
|
||
backgroundColor: '#3B82F6'
|
||
},
|
||
{
|
||
label: '发货时效 (天)',
|
||
data: [1.2, 1.0, 1.1, 0.9, 1.0, 0.8],
|
||
backgroundColor: '#F59E0B'
|
||
},
|
||
{
|
||
label: '配送时效 (天)',
|
||
data: [2.5, 2.3, 2.4, 2.2, 2.3, 2.0],
|
||
backgroundColor: '#10B981'
|
||
}
|
||
]
|
||
},
|
||
options: {
|
||
responsive: true,
|
||
maintainAspectRatio: false,
|
||
scales: {
|
||
y: {
|
||
beginAtZero: true,
|
||
title: {
|
||
display: true,
|
||
text: '时效'
|
||
}
|
||
}
|
||
}
|
||
}
|
||
});
|
||
}
|
||
|
||
// 到货到完成统计图表
|
||
const deliveryToCompleteCtx = document.getElementById('deliveryToCompleteChart');
|
||
if (deliveryToCompleteCtx) {
|
||
new Chart(deliveryToCompleteCtx, {
|
||
type: 'line',
|
||
data: {
|
||
labels: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
|
||
datasets: [
|
||
{
|
||
label: '到货到完成时间 (小时)',
|
||
data: [48, 42, 45, 38, 40, 36, 44],
|
||
borderColor: '#165DFF',
|
||
backgroundColor: 'rgba(22, 93, 255, 0.1)',
|
||
tension: 0.3,
|
||
fill: true
|
||
}
|
||
]
|
||
},
|
||
options: {
|
||
responsive: true,
|
||
maintainAspectRatio: false,
|
||
scales: {
|
||
y: {
|
||
beginAtZero: true,
|
||
title: {
|
||
display: true,
|
||
text: '时间 (小时)'
|
||
}
|
||
}
|
||
}
|
||
}
|
||
});
|
||
}
|
||
|
||
// 24小时上网率图表
|
||
const onlineRateCtx = document.getElementById('onlineRateChart');
|
||
if (onlineRateCtx) {
|
||
new Chart(onlineRateCtx, {
|
||
type: 'bar',
|
||
data: {
|
||
labels: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
|
||
datasets: [
|
||
{
|
||
label: '24小时上网率 (%)',
|
||
data: [92, 95, 93, 96, 94, 91, 93],
|
||
backgroundColor: '#10B981'
|
||
}
|
||
]
|
||
},
|
||
options: {
|
||
responsive: true,
|
||
maintainAspectRatio: false,
|
||
scales: {
|
||
y: {
|
||
beginAtZero: true,
|
||
max: 100,
|
||
title: {
|
||
display: true,
|
||
text: '上网率 (%)'
|
||
}
|
||
}
|
||
}
|
||
}
|
||
});
|
||
}
|
||
|
||
// 客户自定义看板图表
|
||
// 处理时效趋势图表
|
||
const customMetric1Ctx = document.getElementById('customMetric1Chart');
|
||
if (customMetric1Ctx) {
|
||
new Chart(customMetric1Ctx, {
|
||
type: 'line',
|
||
data: {
|
||
labels: ['1日', '2日', '3日', '4日', '5日', '6日', '7日'],
|
||
datasets: [
|
||
{
|
||
label: '处理时间 (小时)',
|
||
data: [3.2, 2.8, 2.5, 2.3, 2.1, 2.0, 1.8],
|
||
borderColor: '#165DFF',
|
||
backgroundColor: 'rgba(22, 93, 255, 0.1)',
|
||
tension: 0.3,
|
||
fill: true
|
||
}
|
||
]
|
||
},
|
||
options: {
|
||
responsive: true,
|
||
maintainAspectRatio: false,
|
||
scales: {
|
||
y: {
|
||
beginAtZero: true,
|
||
title: {
|
||
display: true,
|
||
text: '时间 (小时)'
|
||
}
|
||
}
|
||
}
|
||
}
|
||
});
|
||
}
|
||
|
||
// 完成率分析图表
|
||
const customMetric2Ctx = document.getElementById('customMetric2Chart');
|
||
if (customMetric2Ctx) {
|
||
new Chart(customMetric2Ctx, {
|
||
type: 'bar',
|
||
data: {
|
||
labels: ['1日', '2日', '3日', '4日', '5日', '6日', '7日'],
|
||
datasets: [
|
||
{
|
||
label: '完成率 (%)',
|
||
data: [92, 94, 93, 95, 96, 97, 98],
|
||
backgroundColor: '#10B981'
|
||
}
|
||
]
|
||
},
|
||
options: {
|
||
responsive: true,
|
||
maintainAspectRatio: false,
|
||
scales: {
|
||
y: {
|
||
beginAtZero: true,
|
||
max: 100,
|
||
title: {
|
||
display: true,
|
||
text: '完成率 (%)'
|
||
}
|
||
}
|
||
}
|
||
}
|
||
});
|
||
}
|
||
}
|
||
|
||
// 初始化第一个模块的图表
|
||
initCharts();
|
||
});
|
||
</script>
|
||
</body>
|
||
</html> |