添加 商家列表

src/layouts/BasicLayout.vue

@@ -42,6 +42,16 @@
             <router-link to="/community/station">驿站列表</router-link>
           </a-menu-item>
         </a-sub-menu>
+
+        <a-sub-menu key="merchant">
+          <template #icon>
+            <shop-outlined />
+          </template>
+          <template #title>商家管理</template>
+          <a-menu-item key="merchant-list">
+            <router-link to="/merchant/list">商家列表</router-link>
+          </a-menu-item>
+        </a-sub-menu>
       </a-menu>
     </a-layout-sider>
     <a-layout>
@@ -92,6 +102,7 @@ import {
   DownOutlined,
   LogoutOutlined,
   DashboardOutlined,
+  ShopOutlined,
 } from '@ant-design/icons-vue'
 import { useRouter } from 'vue-router'
 
@@ -105,12 +116,13 @@ export default defineComponent({
     DownOutlined,
     LogoutOutlined,
     DashboardOutlined,
+    ShopOutlined,
   },
   setup() {
     const router = useRouter()
     const collapsed = ref(false)
     const selectedKeys = ref(['dashboard'])
-    const openKeys = ref(['user', 'community'])
+    const openKeys = ref(['user', 'community', 'merchant'])
     
     const userInfo = ref(JSON.parse(localStorage.getItem('userInfo') || '{}'))
 

src/router/index.js

@@ -46,6 +46,17 @@ const routes = [
     path: '/login',
     name: 'login',
     component: () => import('../views/login/Login.vue')
+  },
+  {
+    path: '/merchant',
+    component: BasicLayout,
+    children: [
+      {
+        path: 'list',
+        component: () => import('@/views/merchant/List.vue'),
+        meta: { title: '商家列表' }
+      }
+    ]
   }
 ]
 

src/views/merchant/List.vue

@@ -0,0 +1,257 @@
+<template>
+  <page-container>
+    <div class="merchant-list">
+      <div class="table-header">
+        <h1>商家列表</h1>
+      </div>
+      
+      <a-table 
+        :columns="columns" 
+        :data-source="tableData" 
+        :pagination="pagination"
+        :loading="loading"
+        @change="handleTableChange"
+        row-key="id"
+      >
+        <template #bodyCell="{ column, record }">
+          <template v-if="column.key === 'location'">
+            <a @click="showMap(record)">查看位置</a>
+          </template>
+          <template v-if="column.key === 'create_time'">
+            {{ formatDateTime(record.create_time) }}
+          </template>
+          <template v-if="column.key === 'action'">
+            <a @click="handleManageImages(record)">管理图片</a>
+          </template>
+        </template>
+      </a-table>
+
+      <!-- 地图弹窗 -->
+      <a-modal
+        v-model:visible="mapVisible"
+        title="商家位置"
+        :footer="null"
+        width="800px"
+        @cancel="closeMap"
+      >
+        <div id="map-container" style="height: 500px;"></div>
+      </a-modal>
+
+      <!-- 图片管理弹窗 -->
+      <a-modal
+        v-model:visible="imageModalVisible"
+        title="图片管理"
+        :footer="null"
+        width="800px"
+      >
+        <!-- 这里添加图片管理的具体实现 -->
+      </a-modal>
+    </div>
+  </page-container>
+</template>
+
+<script>
+import { defineComponent, ref, onMounted, nextTick } from 'vue'
+import { message } from 'ant-design-vue'
+import dayjs from 'dayjs'
+import PageContainer from '@/components/PageContainer.vue'
+import { initAMap } from '@/utils/amap'
+
+export default defineComponent({
+  components: {
+    PageContainer
+  },
+  setup() {
+    const loading = ref(false)
+    const tableData = ref([])
+    const mapVisible = ref(false)
+    const imageModalVisible = ref(false)
+    const currentMap = ref(null)
+    const currentMarker = ref(null)
+    
+    const pagination = ref({
+      current: 1,
+      pageSize: 10,
+      total: 0,
+      showSizeChanger: true,
+      showTotal: (total) => `共 ${total} 条记录`
+    })
+
+    const columns = [
+      {
+        title: 'ID',
+        dataIndex: 'id',
+        key: 'id',
+        width: 80,
+        align: 'center',
+      },
+      {
+        title: '商家名称',
+        dataIndex: 'name',
+        key: 'name',
+        width: 150,
+      },
+      {
+        title: '营业时间',
+        dataIndex: 'business_hours',
+        key: 'business_hours',
+        width: 150,
+      },
+      {
+        title: '地址',
+        dataIndex: 'address',
+        key: 'address',
+        width: 200,
+      },
+      {
+        title: '位置',
+        key: 'location',
+        width: 100,
+        align: 'center',
+      },
+      {
+        title: '联系电话',
+        dataIndex: 'phone',
+        key: 'phone',
+        width: 120,
+      },
+      {
+        title: '创建时间',
+        dataIndex: 'create_time',
+        key: 'create_time',
+        width: 180,
+      },
+      {
+        title: '操作',
+        key: 'action',
+        width: 100,
+        align: 'center',
+      }
+    ]
+
+    // 格式化日期时间
+    const formatDateTime = (value) => {
+      if (!value) return ''
+      return dayjs(value).format('YYYY-MM-DD HH:mm:ss')
+    }
+
+    // 获取商家列表数据
+    const fetchData = async () => {
+      try {
+        loading.value = true
+        const params = {
+          skip: (pagination.value.current - 1) * pagination.value.pageSize,
+          limit: pagination.value.pageSize
+        }
+        
+        const res = await fetch('/api/merchant?' + new URLSearchParams(params))
+        const result = await res.json()
+        
+        if (result.code === 200) {
+          tableData.value = result.data
+          pagination.value.total = result.total || result.data.length
+        } else {
+          message.error(result.message || '获取数据失败')
+        }
+      } catch (error) {
+        console.error('获取商家列表失败:', error)
+        message.error('获取数据失败')
+      } finally {
+        loading.value = false
+      }
+    }
+
+    // 表格变化处理
+    const handleTableChange = (pag) => {
+      pagination.value.current = pag.current
+      pagination.value.pageSize = pag.pageSize
+      fetchData()
+    }
+
+    // 显示地图
+    const showMap = async (record) => {
+      mapVisible.value = true
+      
+      await nextTick()
+      
+      try {
+        const AMap = await initAMap()
+        
+        if (!currentMap.value) {
+          currentMap.value = new AMap.Map('map-container', {
+            zoom: 15,
+            viewMode: '3D'
+          })
+        }
+        
+        const position = [record.longitude, record.latitude]
+        currentMap.value.setCenter(position)
+        
+        if (currentMarker.value) {
+          currentMap.value.remove(currentMarker.value)
+        }
+        
+        currentMarker.value = new AMap.Marker({
+          position,
+          title: record.name
+        })
+        currentMap.value.add(currentMarker.value)
+        
+      } catch (error) {
+        console.error('加载地图失败:', error)
+        message.error('加载地图失败')
+      }
+    }
+
+    // 关闭地图
+    const closeMap = () => {
+      mapVisible.value = false
+    }
+
+    // 管理图片
+    const handleManageImages = (record) => {
+      imageModalVisible.value = true
+      // 这里添加图片管理的具体实现
+    }
+
+    onMounted(() => {
+      fetchData()
+    })
+
+    return {
+      loading,
+      columns,
+      tableData,
+      pagination,
+      mapVisible,
+      imageModalVisible,
+      handleTableChange,
+      showMap,
+      closeMap,
+      formatDateTime,
+      handleManageImages
+    }
+  }
+})
+</script>
+
+<style scoped>
+.merchant-list {
+  padding: 24px;
+}
+
+.table-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 16px;
+}
+
+.table-header h1 {
+  margin: 0;
+}
+
+:deep(.ant-table-content) {
+  overflow-x: auto;
+}
+</style>