939 lines
32 KiB
HTML
939 lines
32 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>
|
||
|
|
<!-- 引入高德地图API -->
|
||
|
|
<script src="https://webapi.amap.com/maps?v=2.0&key=YOUR_AMAP_KEY"></script>
|
||
|
|
<style>
|
||
|
|
/* 1. 全局样式 */
|
||
|
|
* {
|
||
|
|
margin: 0;
|
||
|
|
padding: 0;
|
||
|
|
box-sizing: border-box;
|
||
|
|
}
|
||
|
|
|
||
|
|
body {
|
||
|
|
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', 'Helvetica Neue', Helvetica, Arial, sans-serif;
|
||
|
|
background-color: #f5f5f5;
|
||
|
|
color: #333;
|
||
|
|
padding: 20px;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* 2. 容器布局 */
|
||
|
|
.container {
|
||
|
|
max-width: 1600px;
|
||
|
|
margin: 0 auto;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* 3. 页面标题区域 */
|
||
|
|
.page-header {
|
||
|
|
background: white;
|
||
|
|
padding: 16px 24px;
|
||
|
|
margin-bottom: 16px;
|
||
|
|
border-radius: 8px;
|
||
|
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
||
|
|
}
|
||
|
|
|
||
|
|
.page-title {
|
||
|
|
font-size: 24px;
|
||
|
|
font-weight: 600;
|
||
|
|
color: #262626;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* 4. 搜索区域 */
|
||
|
|
.search-section {
|
||
|
|
background: white;
|
||
|
|
padding: 24px;
|
||
|
|
margin-bottom: 16px;
|
||
|
|
border-radius: 8px;
|
||
|
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
||
|
|
}
|
||
|
|
|
||
|
|
.search-form {
|
||
|
|
display: grid;
|
||
|
|
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
|
||
|
|
gap: 16px;
|
||
|
|
margin-bottom: 16px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.form-item {
|
||
|
|
display: flex;
|
||
|
|
flex-direction: column;
|
||
|
|
gap: 8px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.form-label {
|
||
|
|
font-size: 14px;
|
||
|
|
color: #666;
|
||
|
|
font-weight: 500;
|
||
|
|
}
|
||
|
|
|
||
|
|
.form-input {
|
||
|
|
height: 40px;
|
||
|
|
padding: 0 12px;
|
||
|
|
border: 1px solid #ddd;
|
||
|
|
border-radius: 6px;
|
||
|
|
font-size: 14px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.form-input:focus {
|
||
|
|
outline: none;
|
||
|
|
border-color: #1890ff;
|
||
|
|
box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2);
|
||
|
|
}
|
||
|
|
|
||
|
|
.form-input::placeholder {
|
||
|
|
color: #999;
|
||
|
|
}
|
||
|
|
|
||
|
|
.button-group {
|
||
|
|
display: flex;
|
||
|
|
gap: 12px;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* 5. 按钮样式 */
|
||
|
|
.btn {
|
||
|
|
height: 40px;
|
||
|
|
padding: 0 16px;
|
||
|
|
border: none;
|
||
|
|
border-radius: 6px;
|
||
|
|
font-size: 14px;
|
||
|
|
cursor: pointer;
|
||
|
|
display: inline-flex;
|
||
|
|
align-items: center;
|
||
|
|
justify-content: center;
|
||
|
|
transition: all 0.3s;
|
||
|
|
}
|
||
|
|
|
||
|
|
.btn-primary {
|
||
|
|
background: #1890ff;
|
||
|
|
color: white;
|
||
|
|
}
|
||
|
|
|
||
|
|
.btn-primary:hover {
|
||
|
|
background: #40a9ff;
|
||
|
|
}
|
||
|
|
|
||
|
|
.btn-default {
|
||
|
|
background: white;
|
||
|
|
color: #666;
|
||
|
|
border: 1px solid #ddd;
|
||
|
|
}
|
||
|
|
|
||
|
|
.btn-default:hover {
|
||
|
|
border-color: #1890ff;
|
||
|
|
color: #1890ff;
|
||
|
|
}
|
||
|
|
|
||
|
|
.btn-success {
|
||
|
|
background: #52c41a;
|
||
|
|
color: white;
|
||
|
|
}
|
||
|
|
|
||
|
|
.btn-success:hover {
|
||
|
|
background: #73d13d;
|
||
|
|
}
|
||
|
|
|
||
|
|
.btn-warning {
|
||
|
|
background: #fa8c16;
|
||
|
|
color: white;
|
||
|
|
}
|
||
|
|
|
||
|
|
.btn-warning:hover {
|
||
|
|
background: #ffa940;
|
||
|
|
}
|
||
|
|
|
||
|
|
.btn-danger {
|
||
|
|
background: #ff4d4f;
|
||
|
|
color: white;
|
||
|
|
}
|
||
|
|
|
||
|
|
.btn-danger:hover {
|
||
|
|
background: #ff7875;
|
||
|
|
}
|
||
|
|
|
||
|
|
.btn-small {
|
||
|
|
height: 32px;
|
||
|
|
padding: 0 12px;
|
||
|
|
font-size: 12px;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* 6. 工具栏 */
|
||
|
|
.toolbar {
|
||
|
|
background: white;
|
||
|
|
padding: 16px 24px;
|
||
|
|
margin-bottom: 16px;
|
||
|
|
border-radius: 8px;
|
||
|
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
||
|
|
display: flex;
|
||
|
|
justify-content: space-between;
|
||
|
|
align-items: center;
|
||
|
|
}
|
||
|
|
|
||
|
|
.toolbar-left {
|
||
|
|
display: flex;
|
||
|
|
gap: 12px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.toolbar-right {
|
||
|
|
font-size: 14px;
|
||
|
|
color: #666;
|
||
|
|
}
|
||
|
|
|
||
|
|
.toolbar-right strong {
|
||
|
|
color: #1890ff;
|
||
|
|
font-weight: 600;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* 7. 表格样式 */
|
||
|
|
.table-section {
|
||
|
|
background: white;
|
||
|
|
border-radius: 8px;
|
||
|
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
||
|
|
overflow: hidden;
|
||
|
|
}
|
||
|
|
|
||
|
|
.table-wrapper {
|
||
|
|
overflow-x: auto;
|
||
|
|
}
|
||
|
|
|
||
|
|
table {
|
||
|
|
width: 100%;
|
||
|
|
border-collapse: collapse;
|
||
|
|
font-size: 14px;
|
||
|
|
}
|
||
|
|
|
||
|
|
thead {
|
||
|
|
background: #fafafa;
|
||
|
|
}
|
||
|
|
|
||
|
|
th {
|
||
|
|
padding: 12px 16px;
|
||
|
|
text-align: left;
|
||
|
|
font-weight: 600;
|
||
|
|
color: #666;
|
||
|
|
border-bottom: 1px solid #f0f0f0;
|
||
|
|
white-space: nowrap;
|
||
|
|
}
|
||
|
|
|
||
|
|
th.center,
|
||
|
|
td.center {
|
||
|
|
text-align: center;
|
||
|
|
}
|
||
|
|
|
||
|
|
td {
|
||
|
|
padding: 12px 16px;
|
||
|
|
border-bottom: 1px solid #f9f9f9;
|
||
|
|
color: #333;
|
||
|
|
}
|
||
|
|
|
||
|
|
tbody tr:hover {
|
||
|
|
background: #f8f9fa;
|
||
|
|
}
|
||
|
|
|
||
|
|
.action-buttons {
|
||
|
|
display: flex;
|
||
|
|
gap: 8px;
|
||
|
|
justify-content: center;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* 8. 分页样式 */
|
||
|
|
.pagination {
|
||
|
|
padding: 20px 24px;
|
||
|
|
display: flex;
|
||
|
|
justify-content: center;
|
||
|
|
align-items: center;
|
||
|
|
gap: 12px;
|
||
|
|
background: white;
|
||
|
|
border-top: 1px solid #f0f0f0;
|
||
|
|
}
|
||
|
|
|
||
|
|
.pagination button {
|
||
|
|
width: 32px;
|
||
|
|
height: 32px;
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
justify-content: center;
|
||
|
|
border: 1px solid #ddd;
|
||
|
|
border-radius: 4px;
|
||
|
|
cursor: pointer;
|
||
|
|
font-size: 14px;
|
||
|
|
background: white;
|
||
|
|
color: #666;
|
||
|
|
transition: all 0.3s;
|
||
|
|
}
|
||
|
|
|
||
|
|
.pagination button:hover:not(:disabled) {
|
||
|
|
border-color: #1890ff;
|
||
|
|
color: #1890ff;
|
||
|
|
}
|
||
|
|
|
||
|
|
.pagination button:disabled {
|
||
|
|
opacity: 0.5;
|
||
|
|
cursor: not-allowed;
|
||
|
|
}
|
||
|
|
|
||
|
|
.pagination .page-number {
|
||
|
|
width: 32px;
|
||
|
|
height: 32px;
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
justify-content: center;
|
||
|
|
border: 1px solid #ddd;
|
||
|
|
border-radius: 4px;
|
||
|
|
cursor: pointer;
|
||
|
|
font-size: 14px;
|
||
|
|
transition: all 0.3s;
|
||
|
|
color: #666;
|
||
|
|
}
|
||
|
|
|
||
|
|
.pagination .page-number:hover {
|
||
|
|
border-color: #1890ff;
|
||
|
|
color: #1890ff;
|
||
|
|
}
|
||
|
|
|
||
|
|
.pagination .page-number.active {
|
||
|
|
background: #1890ff;
|
||
|
|
color: white;
|
||
|
|
border-color: #1890ff;
|
||
|
|
}
|
||
|
|
|
||
|
|
.pagination .page-info {
|
||
|
|
font-size: 14px;
|
||
|
|
color: #666;
|
||
|
|
margin-left: 8px;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* 9. 模态框样式 */
|
||
|
|
.modal {
|
||
|
|
display: none;
|
||
|
|
position: fixed;
|
||
|
|
top: 0;
|
||
|
|
left: 0;
|
||
|
|
width: 100%;
|
||
|
|
height: 100%;
|
||
|
|
background-color: rgba(0, 0, 0, 0.5);
|
||
|
|
z-index: 1000;
|
||
|
|
justify-content: center;
|
||
|
|
align-items: center;
|
||
|
|
}
|
||
|
|
|
||
|
|
.modal.show {
|
||
|
|
display: flex;
|
||
|
|
}
|
||
|
|
|
||
|
|
.modal-content {
|
||
|
|
background: white;
|
||
|
|
border-radius: 8px;
|
||
|
|
width: 90%;
|
||
|
|
max-width: 700px;
|
||
|
|
max-height: 90vh;
|
||
|
|
overflow-y: auto;
|
||
|
|
}
|
||
|
|
|
||
|
|
.modal-header {
|
||
|
|
padding: 20px 24px;
|
||
|
|
border-bottom: 1px solid #f0f0f0;
|
||
|
|
display: flex;
|
||
|
|
justify-content: space-between;
|
||
|
|
align-items: center;
|
||
|
|
}
|
||
|
|
|
||
|
|
.modal-title {
|
||
|
|
font-size: 18px;
|
||
|
|
font-weight: 600;
|
||
|
|
color: #262626;
|
||
|
|
}
|
||
|
|
|
||
|
|
.modal-close {
|
||
|
|
font-size: 24px;
|
||
|
|
color: #999;
|
||
|
|
cursor: pointer;
|
||
|
|
border: none;
|
||
|
|
background: none;
|
||
|
|
padding: 0;
|
||
|
|
width: 30px;
|
||
|
|
height: 30px;
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
justify-content: center;
|
||
|
|
transition: all 0.3s;
|
||
|
|
}
|
||
|
|
|
||
|
|
.modal-close:hover {
|
||
|
|
color: #666;
|
||
|
|
}
|
||
|
|
|
||
|
|
.modal-body {
|
||
|
|
padding: 24px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.modal-footer {
|
||
|
|
padding: 16px 24px;
|
||
|
|
border-top: 1px solid #f0f0f0;
|
||
|
|
display: flex;
|
||
|
|
justify-content: flex-end;
|
||
|
|
gap: 12px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.form-group {
|
||
|
|
margin-bottom: 20px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.form-group:last-child {
|
||
|
|
margin-bottom: 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
.form-group .form-label {
|
||
|
|
display: block;
|
||
|
|
margin-bottom: 8px;
|
||
|
|
font-size: 14px;
|
||
|
|
color: #666;
|
||
|
|
font-weight: 500;
|
||
|
|
}
|
||
|
|
|
||
|
|
.form-group .form-label .required {
|
||
|
|
color: #ff4d4f;
|
||
|
|
margin-right: 4px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.form-group .form-input {
|
||
|
|
width: 100%;
|
||
|
|
height: 40px;
|
||
|
|
padding: 0 12px;
|
||
|
|
border: 1px solid #ddd;
|
||
|
|
border-radius: 6px;
|
||
|
|
font-size: 14px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.form-group .form-input:focus {
|
||
|
|
outline: none;
|
||
|
|
border-color: #1890ff;
|
||
|
|
box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2);
|
||
|
|
}
|
||
|
|
|
||
|
|
.form-group textarea.form-input {
|
||
|
|
height: auto;
|
||
|
|
min-height: 80px;
|
||
|
|
padding: 10px 12px;
|
||
|
|
resize: vertical;
|
||
|
|
font-family: inherit;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* 10. 地图容器样式 */
|
||
|
|
.map-container {
|
||
|
|
width: 100%;
|
||
|
|
height: 400px;
|
||
|
|
border: 1px solid #ddd;
|
||
|
|
border-radius: 6px;
|
||
|
|
overflow: hidden;
|
||
|
|
}
|
||
|
|
|
||
|
|
.gps-info {
|
||
|
|
margin-top: 8px;
|
||
|
|
padding: 12px;
|
||
|
|
background-color: #fafafa;
|
||
|
|
border-radius: 6px;
|
||
|
|
font-size: 13px;
|
||
|
|
color: #666;
|
||
|
|
border: 1px solid #f0f0f0;
|
||
|
|
}
|
||
|
|
|
||
|
|
.gps-info .label {
|
||
|
|
font-weight: 500;
|
||
|
|
color: #333;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* 11. 查看详情样式 */
|
||
|
|
.view-item {
|
||
|
|
padding: 10px 0;
|
||
|
|
color: #333;
|
||
|
|
line-height: 1.6;
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<div class="container">
|
||
|
|
<!-- 页面标题 -->
|
||
|
|
<div class="page-header">
|
||
|
|
<h1 class="page-title">商圈列表管理</h1>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- 搜索区域 -->
|
||
|
|
<div class="search-section">
|
||
|
|
<div class="search-form">
|
||
|
|
<div class="form-item">
|
||
|
|
<label class="form-label">商圈名称</label>
|
||
|
|
<input type="text" class="form-input" id="searchName" placeholder="请输入商圈名称">
|
||
|
|
</div>
|
||
|
|
<div class="form-item">
|
||
|
|
<label class="form-label">商圈地址</label>
|
||
|
|
<input type="text" class="form-input" id="searchAddress" placeholder="请输入商圈地址">
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="button-group">
|
||
|
|
<button class="btn btn-primary" onclick="handleSearch()">搜索</button>
|
||
|
|
<button class="btn btn-default" onclick="handleReset()">重置</button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- 工具栏 -->
|
||
|
|
<div class="toolbar">
|
||
|
|
<div class="toolbar-left">
|
||
|
|
<button class="btn btn-success" onclick="handleAdd()">新增商圈</button>
|
||
|
|
</div>
|
||
|
|
<div class="toolbar-right">
|
||
|
|
共 <strong id="totalCount">10</strong> 条数据
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- 表格区域 -->
|
||
|
|
<div class="table-section">
|
||
|
|
<div class="table-wrapper">
|
||
|
|
<table>
|
||
|
|
<thead>
|
||
|
|
<tr>
|
||
|
|
<th style="width: 60px;" class="center">序号</th>
|
||
|
|
<th style="width: 25%;">商圈名称</th>
|
||
|
|
<th style="width: 35%;">商圈地址</th>
|
||
|
|
<th style="width: 20%;" class="center">添加时间</th>
|
||
|
|
<th style="width: 20%;" class="center">操作</th>
|
||
|
|
</tr>
|
||
|
|
</thead>
|
||
|
|
<tbody id="tableBody">
|
||
|
|
<tr>
|
||
|
|
<td class="center">1</td>
|
||
|
|
<td>莘庄商圈</td>
|
||
|
|
<td>上海市闵行区莘庄镇莘朱路</td>
|
||
|
|
<td class="center">2025-01-15 10:30:25</td>
|
||
|
|
<td class="center">
|
||
|
|
<div class="action-buttons">
|
||
|
|
<button class="btn btn-primary btn-small" onclick="handleView(1)">查看</button>
|
||
|
|
<button class="btn btn-warning btn-small" onclick="handleEdit(1)">编辑</button>
|
||
|
|
<button class="btn btn-danger btn-small" onclick="handleDelete(1)">删除</button>
|
||
|
|
</div>
|
||
|
|
</td>
|
||
|
|
</tr>
|
||
|
|
<tr>
|
||
|
|
<td class="center">2</td>
|
||
|
|
<td>七宝商圈</td>
|
||
|
|
<td>上海市闵行区七宝镇七莘路</td>
|
||
|
|
<td class="center">2025-01-14 14:20:18</td>
|
||
|
|
<td class="center">
|
||
|
|
<div class="action-buttons">
|
||
|
|
<button class="btn btn-primary btn-small" onclick="handleView(2)">查看</button>
|
||
|
|
<button class="btn btn-warning btn-small" onclick="handleEdit(2)">编辑</button>
|
||
|
|
<button class="btn btn-danger btn-small" onclick="handleDelete(2)">删除</button>
|
||
|
|
</div>
|
||
|
|
</td>
|
||
|
|
</tr>
|
||
|
|
<tr>
|
||
|
|
<td class="center">3</td>
|
||
|
|
<td>徐家汇商圈</td>
|
||
|
|
<td>上海市徐汇区徐家汇街道</td>
|
||
|
|
<td class="center">2025-01-13 09:15:42</td>
|
||
|
|
<td class="center">
|
||
|
|
<div class="action-buttons">
|
||
|
|
<button class="btn btn-primary btn-small" onclick="handleView(3)">查看</button>
|
||
|
|
<button class="btn btn-warning btn-small" onclick="handleEdit(3)">编辑</button>
|
||
|
|
<button class="btn btn-danger btn-small" onclick="handleDelete(3)">删除</button>
|
||
|
|
</div>
|
||
|
|
</td>
|
||
|
|
</tr>
|
||
|
|
<tr>
|
||
|
|
<td class="center">4</td>
|
||
|
|
<td>五角场商圈</td>
|
||
|
|
<td>上海市杨浦区五角场街道</td>
|
||
|
|
<td class="center">2025-01-12 16:45:30</td>
|
||
|
|
<td class="center">
|
||
|
|
<div class="action-buttons">
|
||
|
|
<button class="btn btn-primary btn-small" onclick="handleView(4)">查看</button>
|
||
|
|
<button class="btn btn-warning btn-small" onclick="handleEdit(4)">编辑</button>
|
||
|
|
<button class="btn btn-danger btn-small" onclick="handleDelete(4)">删除</button>
|
||
|
|
</div>
|
||
|
|
</td>
|
||
|
|
</tr>
|
||
|
|
<tr>
|
||
|
|
<td class="center">5</td>
|
||
|
|
<td>中山公园商圈</td>
|
||
|
|
<td>上海市长宁区中山公园街道</td>
|
||
|
|
<td class="center">2025-01-11 11:20:05</td>
|
||
|
|
<td class="center">
|
||
|
|
<div class="action-buttons">
|
||
|
|
<button class="btn btn-primary btn-small" onclick="handleView(5)">查看</button>
|
||
|
|
<button class="btn btn-warning btn-small" onclick="handleEdit(5)">编辑</button>
|
||
|
|
<button class="btn btn-danger btn-small" onclick="handleDelete(5)">删除</button>
|
||
|
|
</div>
|
||
|
|
</td>
|
||
|
|
</tr>
|
||
|
|
<tr>
|
||
|
|
<td class="center">6</td>
|
||
|
|
<td>陆家嘴商圈</td>
|
||
|
|
<td>上海市浦东新区陆家嘴街道</td>
|
||
|
|
<td class="center">2025-01-10 13:55:22</td>
|
||
|
|
<td class="center">
|
||
|
|
<div class="action-buttons">
|
||
|
|
<button class="btn btn-primary btn-small" onclick="handleView(6)">查看</button>
|
||
|
|
<button class="btn btn-warning btn-small" onclick="handleEdit(6)">编辑</button>
|
||
|
|
<button class="btn btn-danger btn-small" onclick="handleDelete(6)">删除</button>
|
||
|
|
</div>
|
||
|
|
</td>
|
||
|
|
</tr>
|
||
|
|
<tr>
|
||
|
|
<td class="center">7</td>
|
||
|
|
<td>南京东路商圈</td>
|
||
|
|
<td>上海市黄浦区南京东路街道</td>
|
||
|
|
<td class="center">2025-01-09 10:10:15</td>
|
||
|
|
<td class="center">
|
||
|
|
<div class="action-buttons">
|
||
|
|
<button class="btn btn-primary btn-small" onclick="handleView(7)">查看</button>
|
||
|
|
<button class="btn btn-warning btn-small" onclick="handleEdit(7)">编辑</button>
|
||
|
|
<button class="btn btn-danger btn-small" onclick="handleDelete(7)">删除</button>
|
||
|
|
</div>
|
||
|
|
</td>
|
||
|
|
</tr>
|
||
|
|
<tr>
|
||
|
|
<td class="center">8</td>
|
||
|
|
<td>静安寺商圈</td>
|
||
|
|
<td>上海市静安区静安寺街道</td>
|
||
|
|
<td class="center">2025-01-08 15:30:48</td>
|
||
|
|
<td class="center">
|
||
|
|
<div class="action-buttons">
|
||
|
|
<button class="btn btn-primary btn-small" onclick="handleView(8)">查看</button>
|
||
|
|
<button class="btn btn-warning btn-small" onclick="handleEdit(8)">编辑</button>
|
||
|
|
<button class="btn btn-danger btn-small" onclick="handleDelete(8)">删除</button>
|
||
|
|
</div>
|
||
|
|
</td>
|
||
|
|
</tr>
|
||
|
|
<tr>
|
||
|
|
<td class="center">9</td>
|
||
|
|
<td>人民广场商圈</td>
|
||
|
|
<td>上海市黄浦区人民广场街道</td>
|
||
|
|
<td class="center">2025-01-07 09:25:33</td>
|
||
|
|
<td class="center">
|
||
|
|
<div class="action-buttons">
|
||
|
|
<button class="btn btn-primary btn-small" onclick="handleView(9)">查看</button>
|
||
|
|
<button class="btn btn-warning btn-small" onclick="handleEdit(9)">编辑</button>
|
||
|
|
<button class="btn btn-danger btn-small" onclick="handleDelete(9)">删除</button>
|
||
|
|
</div>
|
||
|
|
</td>
|
||
|
|
</tr>
|
||
|
|
<tr>
|
||
|
|
<td class="center">10</td>
|
||
|
|
<td>虹桥商圈</td>
|
||
|
|
<td>上海市闵行区虹桥镇申虹路</td>
|
||
|
|
<td class="center">2025-01-06 14:40:10</td>
|
||
|
|
<td class="center">
|
||
|
|
<div class="action-buttons">
|
||
|
|
<button class="btn btn-primary btn-small" onclick="handleView(10)">查看</button>
|
||
|
|
<button class="btn btn-warning btn-small" onclick="handleEdit(10)">编辑</button>
|
||
|
|
<button class="btn btn-danger btn-small" onclick="handleDelete(10)">删除</button>
|
||
|
|
</div>
|
||
|
|
</td>
|
||
|
|
</tr>
|
||
|
|
</tbody>
|
||
|
|
</table>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- 分页 -->
|
||
|
|
<div class="pagination">
|
||
|
|
<button onclick="handlePageChange('prev')" id="prevBtn">上一页</button>
|
||
|
|
<span class="page-number active">1</span>
|
||
|
|
<span class="page-number">2</span>
|
||
|
|
<span class="page-number">3</span>
|
||
|
|
<span class="page-number">4</span>
|
||
|
|
<span class="page-number">5</span>
|
||
|
|
<button onclick="handlePageChange('next')" id="nextBtn">下一页</button>
|
||
|
|
<span class="page-info">共 50 条</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- 新增/编辑模态框 -->
|
||
|
|
<div class="modal" id="editModal">
|
||
|
|
<div class="modal-content">
|
||
|
|
<div class="modal-header">
|
||
|
|
<h3 class="modal-title" id="modalTitle">新增商圈</h3>
|
||
|
|
<button class="modal-close" onclick="closeModal()">×</button>
|
||
|
|
</div>
|
||
|
|
<div class="modal-body">
|
||
|
|
<form id="editForm">
|
||
|
|
<div class="form-group">
|
||
|
|
<label class="form-label">
|
||
|
|
<span class="required">*</span>
|
||
|
|
商圈名称
|
||
|
|
</label>
|
||
|
|
<input type="text" class="form-input" id="districtName" placeholder="请输入商圈名称" required>
|
||
|
|
</div>
|
||
|
|
<div class="form-group">
|
||
|
|
<label class="form-label">
|
||
|
|
<span class="required">*</span>
|
||
|
|
商圈地址
|
||
|
|
</label>
|
||
|
|
<textarea class="form-input" id="districtAddress" placeholder="请输入商圈地址" required></textarea>
|
||
|
|
</div>
|
||
|
|
<div class="form-group">
|
||
|
|
<label class="form-label">
|
||
|
|
<span class="required">*</span>
|
||
|
|
商圈位置
|
||
|
|
</label>
|
||
|
|
<div id="mapContainer" class="map-container"></div>
|
||
|
|
<div class="gps-info">
|
||
|
|
<span class="label">经度：</span><span id="longitude">-</span>
|
||
|
|
<span class="label" style="margin-left: 20px;">纬度：</span><span id="latitude">-</span>
|
||
|
|
</div>
|
||
|
|
<input type="hidden" id="gpsLongitude">
|
||
|
|
<input type="hidden" id="gpsLatitude">
|
||
|
|
</div>
|
||
|
|
</form>
|
||
|
|
</div>
|
||
|
|
<div class="modal-footer">
|
||
|
|
<button class="btn btn-default" onclick="closeModal()">取消</button>
|
||
|
|
<button class="btn btn-primary" onclick="handleSubmit()">确定</button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- 查看详情模态框 -->
|
||
|
|
<div class="modal" id="viewModal">
|
||
|
|
<div class="modal-content">
|
||
|
|
<div class="modal-header">
|
||
|
|
<h3 class="modal-title">商圈详情</h3>
|
||
|
|
<button class="modal-close" onclick="closeViewModal()">×</button>
|
||
|
|
</div>
|
||
|
|
<div class="modal-body">
|
||
|
|
<div class="form-group">
|
||
|
|
<label class="form-label">商圈名称</label>
|
||
|
|
<div id="viewName" class="view-item"></div>
|
||
|
|
</div>
|
||
|
|
<div class="form-group">
|
||
|
|
<label class="form-label">商圈地址</label>
|
||
|
|
<div id="viewAddress" class="view-item"></div>
|
||
|
|
</div>
|
||
|
|
<div class="form-group">
|
||
|
|
<label class="form-label">GPS位置</label>
|
||
|
|
<div id="viewGPS" class="view-item">-</div>
|
||
|
|
</div>
|
||
|
|
<div class="form-group">
|
||
|
|
<label class="form-label">添加时间</label>
|
||
|
|
<div id="viewTime" class="view-item"></div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="modal-footer">
|
||
|
|
<button class="btn btn-default" onclick="closeViewModal()">关闭</button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
// 全局变量
|
||
|
|
let map = null;
|
||
|
|
let marker = null;
|
||
|
|
|
||
|
|
// 模拟数据
|
||
|
|
const mockData = [
|
||
|
|
{ id: 1, name: '莘庄商圈', address: '上海市闵行区莘庄镇莘朱路', time: '2025-01-15 10:30:25', lng: 121.381709, lat: 31.113157 },
|
||
|
|
{ id: 2, name: '七宝商圈', address: '上海市闵行区七宝镇七莘路', time: '2025-01-14 14:20:18', lng: 121.356046, lat: 31.149377 },
|
||
|
|
{ id: 3, name: '徐家汇商圈', address: '上海市徐汇区徐家汇街道', time: '2025-01-13 09:15:42', lng: 121.436525, lat: 31.195539 },
|
||
|
|
{ id: 4, name: '五角场商圈', address: '上海市杨浦区五角场街道', time: '2025-01-12 16:45:30', lng: 121.511801, lat: 31.298974 },
|
||
|
|
{ id: 5, name: '中山公园商圈', address: '上海市长宁区中山公园街道', time: '2025-01-11 11:20:05', lng: 121.421302, lat: 31.221461 },
|
||
|
|
{ id: 6, name: '陆家嘴商圈', address: '上海市浦东新区陆家嘴街道', time: '2025-01-10 13:55:22', lng: 121.505058, lat: 31.245339 },
|
||
|
|
{ id: 7, name: '南京东路商圈', address: '上海市黄浦区南京东路街道', time: '2025-01-09 10:10:15', lng: 121.478912, lat: 31.238787 },
|
||
|
|
{ id: 8, name: '静安寺商圈', address: '上海市静安区静安寺街道', time: '2025-01-08 15:30:48', lng: 121.446186, lat: 31.225806 },
|
||
|
|
{ id: 9, name: '人民广场商圈', address: '上海市黄浦区人民广场街道', time: '2025-01-07 09:25:33', lng: 121.474143, lat: 31.231171 },
|
||
|
|
{ id: 10, name: '虹桥商圈', address: '上海市闵行区虹桥镇申虹路', time: '2025-01-06 14:40:10', lng: 121.409935, lat: 31.195499 }
|
||
|
|
];
|
||
|
|
|
||
|
|
// 初始化地图
|
||
|
|
function initMap(lng = 121.473701, lat = 31.230416) {
|
||
|
|
// 创建地图实例
|
||
|
|
map = new AMap.Map('mapContainer', {
|
||
|
|
zoom: 13,
|
||
|
|
center: [lng, lat],
|
||
|
|
viewMode: '2D'
|
||
|
|
});
|
||
|
|
|
||
|
|
// 创建标记
|
||
|
|
marker = new AMap.Marker({
|
||
|
|
position: [lng, lat],
|
||
|
|
draggable: true
|
||
|
|
});
|
||
|
|
|
||
|
|
map.add(marker);
|
||
|
|
|
||
|
|
// 更新GPS信息显示
|
||
|
|
updateGPSDisplay(lng, lat);
|
||
|
|
|
||
|
|
// 地图点击事件
|
||
|
|
map.on('click', function(e) {
|
||
|
|
const lng = e.lnglat.getLng();
|
||
|
|
const lat = e.lnglat.getLat();
|
||
|
|
|
||
|
|
// 移动标记到点击位置
|
||
|
|
marker.setPosition([lng, lat]);
|
||
|
|
|
||
|
|
// 更新GPS信息
|
||
|
|
updateGPSDisplay(lng, lat);
|
||
|
|
});
|
||
|
|
|
||
|
|
// 标记拖拽事件
|
||
|
|
marker.on('dragend', function(e) {
|
||
|
|
const position = marker.getPosition();
|
||
|
|
updateGPSDisplay(position.lng, position.lat);
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
// 更新GPS信息显示
|
||
|
|
function updateGPSDisplay(lng, lat) {
|
||
|
|
document.getElementById('longitude').textContent = lng.toFixed(6);
|
||
|
|
document.getElementById('latitude').textContent = lat.toFixed(6);
|
||
|
|
document.getElementById('gpsLongitude').value = lng;
|
||
|
|
document.getElementById('gpsLatitude').value = lat;
|
||
|
|
}
|
||
|
|
|
||
|
|
// 搜索功能
|
||
|
|
function handleSearch() {
|
||
|
|
const name = document.getElementById('searchName').value;
|
||
|
|
const address = document.getElementById('searchAddress').value;
|
||
|
|
console.log('搜索条件:', { name, address });
|
||
|
|
alert(`搜索功能待实现\n商圈名称: ${name}\n商圈地址: ${address}`);
|
||
|
|
}
|
||
|
|
|
||
|
|
// 重置功能
|
||
|
|
function handleReset() {
|
||
|
|
document.getElementById('searchName').value = '';
|
||
|
|
document.getElementById('searchAddress').value = '';
|
||
|
|
}
|
||
|
|
|
||
|
|
// 新增商圈
|
||
|
|
function handleAdd() {
|
||
|
|
document.getElementById('modalTitle').textContent = '新增商圈';
|
||
|
|
document.getElementById('editForm').reset();
|
||
|
|
document.getElementById('longitude').textContent = '-';
|
||
|
|
document.getElementById('latitude').textContent = '-';
|
||
|
|
document.getElementById('gpsLongitude').value = '';
|
||
|
|
document.getElementById('gpsLatitude').value = '';
|
||
|
|
document.getElementById('editModal').classList.add('show');
|
||
|
|
|
||
|
|
// 延迟初始化地图,确保容器已显示
|
||
|
|
setTimeout(() => {
|
||
|
|
initMap();
|
||
|
|
}, 100);
|
||
|
|
}
|
||
|
|
|
||
|
|
// 查看详情
|
||
|
|
function handleView(id) {
|
||
|
|
const data = mockData.find(item => item.id === id);
|
||
|
|
if (data) {
|
||
|
|
document.getElementById('viewName').textContent = data.name;
|
||
|
|
document.getElementById('viewAddress').textContent = data.address;
|
||
|
|
document.getElementById('viewTime').textContent = data.time;
|
||
|
|
|
||
|
|
// 显示GPS信息
|
||
|
|
if (data.lng && data.lat) {
|
||
|
|
document.getElementById('viewGPS').textContent = `经度: ${data.lng.toFixed(6)}, 纬度: ${data.lat.toFixed(6)}`;
|
||
|
|
} else {
|
||
|
|
document.getElementById('viewGPS').textContent = '-';
|
||
|
|
}
|
||
|
|
|
||
|
|
document.getElementById('viewModal').classList.add('show');
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
// 编辑商圈
|
||
|
|
function handleEdit(id) {
|
||
|
|
const data = mockData.find(item => item.id === id);
|
||
|
|
if (data) {
|
||
|
|
document.getElementById('modalTitle').textContent = '编辑商圈';
|
||
|
|
document.getElementById('districtName').value = data.name;
|
||
|
|
document.getElementById('districtAddress').value = data.address;
|
||
|
|
document.getElementById('editModal').classList.add('show');
|
||
|
|
|
||
|
|
// 延迟初始化地图,确保容器已显示
|
||
|
|
setTimeout(() => {
|
||
|
|
if (data.lng && data.lat) {
|
||
|
|
initMap(data.lng, data.lat);
|
||
|
|
} else {
|
||
|
|
initMap();
|
||
|
|
}
|
||
|
|
}, 100);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
// 删除商圈
|
||
|
|
function handleDelete(id) {
|
||
|
|
if (confirm('确定要删除该商圈吗?')) {
|
||
|
|
console.log('删除商圈ID:', id);
|
||
|
|
alert('删除成功!');
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
// 提交表单
|
||
|
|
function handleSubmit() {
|
||
|
|
const name = document.getElementById('districtName').value;
|
||
|
|
const address = document.getElementById('districtAddress').value;
|
||
|
|
const lng = document.getElementById('gpsLongitude').value;
|
||
|
|
const lat = document.getElementById('gpsLatitude').value;
|
||
|
|
|
||
|
|
if (!name || !address) {
|
||
|
|
alert('请填写完整信息!');
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
|
||
|
|
if (!lng || !lat) {
|
||
|
|
alert('请在地图上选择商圈位置!');
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
|
||
|
|
console.log('提交数据:', { name, address, lng, lat });
|
||
|
|
alert('保存成功!');
|
||
|
|
closeModal();
|
||
|
|
}
|
||
|
|
|
||
|
|
// 关闭编辑模态框
|
||
|
|
function closeModal() {
|
||
|
|
document.getElementById('editModal').classList.remove('show');
|
||
|
|
|
||
|
|
// 销毁地图实例
|
||
|
|
if (map) {
|
||
|
|
map.destroy();
|
||
|
|
map = null;
|
||
|
|
marker = null;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
// 关闭查看模态框
|
||
|
|
function closeViewModal() {
|
||
|
|
document.getElementById('viewModal').classList.remove('show');
|
||
|
|
}
|
||
|
|
|
||
|
|
// 分页功能
|
||
|
|
function handlePageChange(type) {
|
||
|
|
console.log('分页:', type);
|
||
|
|
alert('分页功能待实现');
|
||
|
|
}
|
||
|
|
|
||
|
|
// 点击页码
|
||
|
|
document.querySelectorAll('.page-number').forEach(item => {
|
||
|
|
item.addEventListener('click', function() {
|
||
|
|
document.querySelectorAll('.page-number').forEach(el => el.classList.remove('active'));
|
||
|
|
this.classList.add('active');
|
||
|
|
});
|
||
|
|
});
|
||
|
|
|
||
|
|
// 点击模态框外部关闭
|
||
|
|
document.getElementById('editModal').addEventListener('click', function(e) {
|
||
|
|
if (e.target === this) {
|
||
|
|
closeModal();
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
document.getElementById('viewModal').addEventListener('click', function(e) {
|
||
|
|
if (e.target === this) {
|
||
|
|
closeViewModal();
|
||
|
|
}
|
||
|
|
});
|
||
|
|
</script>
|
||
|
|
</body>
|
||
|
|
</html>
|