新增消息中心

shaofan
1 parent a8d4dc32
Showing 3 changed files with 278 additions and 0 deletions
src/api/index.ts
src/router/index.ts
src/views/message/MessageList.vue
@@ -230,3 +230,11 @@ export const locationApi = {
   nearby: (cityId: number, lng: string, lat: string) =>
     request.get('/api/rider/location/nearby', { params: { cityId, lng, lat } }),
 }
+
+// 消息管理
+export const messageApi = {
+  list: (params: any) => request.get('/api/admin/message/list', { params }),
+  send: (data: any) => request.post('/api/admin/message/send', data),
+  broadcast: (data: any) => request.post('/api/admin/message/broadcast', data),
+  templates: () => request.get('/api/admin/message/templates'),
+}
@@ -153,6 +153,12 @@ const router = createRouter({
           component: () => import('@/views/admin/AdminUserList.vue'),
           meta: { title: '平台账号' },
         },
+        {
+          path: 'message',
+          name: 'Message',
+          component: () => import('@/views/message/MessageList.vue'),
+          meta: { title: '消息管理' },
+        },
       ],
     },
     { path: '/:pathMatch(.*)*', redirect: '/' },
+<template>
+  <div>
+    <a-card title="消息管理" :bordered="false">
+      <div class="list-toolbar">
+        <div class="list-toolbar-left">
+          <a-input
+            v-model:value="searchForm.riderId"
+            placeholder="骑手ID"
+            style="width: 150px"
+            allow-clear
+          />
+          <a-select
+            v-model:value="searchForm.type"
+            placeholder="消息类型"
+            style="width: 120px"
+            allow-clear
+          >
+            <a-select-option :value="1">订单消息</a-select-option>
+            <a-select-option :value="2">系统通知</a-select-option>
+          </a-select>
+          <a-button type="primary" @click="loadList">查询</a-button>
+        </div>
+        <div class="list-toolbar-right">
+          <a-button type="primary" @click="openSend">发送消息</a-button>
+          <a-button @click="openBroadcast">群发消息</a-button>
+        </div>
+      </div>
+
+      <a-table
+        :dataSource="list"
+        :columns="columns"
+        :loading="loading"
+        :pagination="pagination"
+        @change="handleTableChange"
+        rowKey="id"
+      >
+        <template #bodyCell="{ column, record }">
+          <template v-if="column.key === 'type'">
+            <a-tag :color="record.type === 1 ? 'blue' : 'orange'">
+              {{ record.type === 1 ? '订单' : '系统' }}
+            </a-tag>
+          </template>
+          <template v-if="column.key === 'isRead'">
+            <a-tag :color="record.isRead === 1 ? 'green' : 'default'">
+              {{ record.isRead === 1 ? '已读' : '未读' }}
+            </a-tag>
+          </template>
+          <template v-if="column.key === 'createTime'">
+            {{ formatTime(record.createTime) }}
+          </template>
+        </template>
+      </a-table>
+    </a-card>
+
+    <!-- 发送消息模态框 -->
+    <a-modal
+      v-model:open="sendVisible"
+      title="发送消息"
+      @ok="handleSend"
+      :confirmLoading="sending"
+    >
+      <a-form :model="sendForm" layout="vertical">
+        <a-form-item label="骑手ID" required>
+          <a-input-number v-model:value="sendForm.riderId" style="width: 100%" placeholder="请输入骑手ID" />
+        </a-form-item>
+        <a-form-item label="消息类型" required>
+          <a-radio-group v-model:value="sendForm.type">
+            <a-radio :value="1">订单消息</a-radio>
+            <a-radio :value="2">系统通知</a-radio>
+          </a-radio-group>
+        </a-form-item>
+        <a-form-item label="标题" required>
+          <a-input v-model:value="sendForm.title" placeholder="请输入消息标题" />
+        </a-form-item>
+        <a-form-item label="内容" required>
+          <a-textarea v-model:value="sendForm.content" :rows="4" placeholder="请输入消息内容" />
+        </a-form-item>
+      </a-form>
+    </a-modal>
+
+    <!-- 群发消息模态框 -->
+    <a-modal
+      v-model:open="broadcastVisible"
+      title="群发消息"
+      @ok="handleBroadcast"
+      :confirmLoading="broadcasting"
+    >
+      <a-alert
+        message="将发送给当前城市所有正常状态的骑手"
+        type="warning"
+        show-icon
+        style="margin-bottom: 16px"
+      />
+      <a-form :model="broadcastForm" layout="vertical">
+        <a-form-item label="消息类型" required>
+          <a-radio-group v-model:value="broadcastForm.type">
+            <a-radio :value="1">订单消息</a-radio>
+            <a-radio :value="2">系统通知</a-radio>
+          </a-radio-group>
+        </a-form-item>
+        <a-form-item label="标题" required>
+          <a-input v-model:value="broadcastForm.title" placeholder="请输入消息标题" />
+        </a-form-item>
+        <a-form-item label="内容" required>
+          <a-textarea v-model:value="broadcastForm.content" :rows="4" placeholder="请输入消息内容" />
+        </a-form-item>
+      </a-form>
+    </a-modal>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { onMounted, reactive, ref, computed } from 'vue'
+import { message } from 'ant-design-vue'
+import { messageApi } from '@/api'
+import type { TablePaginationConfig } from 'ant-design-vue'
+
+const loading = ref(false)
+const sending = ref(false)
+const broadcasting = ref(false)
+const list = ref<any[]>([])
+const sendVisible = ref(false)
+const broadcastVisible = ref(false)
+
+const searchForm = reactive({
+  riderId: undefined as number | undefined,
+  type: undefined as number | undefined,
+})
+
+const sendForm = reactive({
+  riderId: undefined as number | undefined,
+  type: 2,
+  title: '',
+  content: '',
+})
+
+const broadcastForm = reactive({
+  type: 2,
+  title: '',
+  content: '',
+})
+
+const currentPage = ref(1)
+const pageSize = ref(20)
+const total = ref(0)
+
+const pagination = computed<TablePaginationConfig>(() => ({
+  current: currentPage.value,
+  pageSize: pageSize.value,
+  total: total.value,
+  showSizeChanger: false,
+  showTotal: (count) => `共 ${count} 条`,
+}))
+
+const columns = [
+  { title: 'ID', dataIndex: 'id', width: 80 },
+  { title: '骑手ID', dataIndex: 'riderId', width: 100 },
+  { title: '类型', key: 'type', width: 100 },
+  { title: '标题', dataIndex: 'title', width: 150 },
+  { title: '内容', dataIndex: 'content', ellipsis: true },
+  { title: '状态', key: 'isRead', width: 80 },
+  { title: '创建时间', key: 'createTime', width: 180 },
+]
+
+async function loadList() {
+  loading.value = true
+  try {
+    const res: any = await messageApi.list({
+      riderId: searchForm.riderId,
+      type: searchForm.type,
+      page: currentPage.value,
+    })
+    const data = res.data || {}
+    list.value = Array.isArray(data.list) ? data.list : []
+    total.value = Number(data.total || 0)
+    currentPage.value = Number(data.page || currentPage.value)
+    pageSize.value = Number(data.pageSize || 20)
+  } finally {
+    loading.value = false
+  }
+}
+
+function handleTableChange(pag: TablePaginationConfig) {
+  const nextPage = pag.current ?? 1
+  if (nextPage === currentPage.value) return
+  currentPage.value = nextPage
+  loadList()
+}
+
+function openSend() {
+  Object.assign(sendForm, { riderId: undefined, type: 2, title: '', content: '' })
+  sendVisible.value = true
+}
+
+function openBroadcast() {
+  Object.assign(broadcastForm, { type: 2, title: '', content: '' })
+  broadcastVisible.value = true
+}
+
+async function handleSend() {
+  if (!sendForm.riderId || !sendForm.title || !sendForm.content) {
+    message.error('请填写完整信息')
+    return
+  }
+  sending.value = true
+  try {
+    await messageApi.send(sendForm)
+    message.success('发送成功')
+    sendVisible.value = false
+    loadList()
+  } finally {
+    sending.value = false
+  }
+}
+
+async function handleBroadcast() {
+  if (!broadcastForm.title || !broadcastForm.content) {
+    message.error('请填写完整信息')
+    return
+  }
+  broadcasting.value = true
+  try {
+    await messageApi.broadcast(broadcastForm)
+    message.success('群发成功')
+    broadcastVisible.value = false
+    loadList()
+  } finally {
+    broadcasting.value = false
+  }
+}
+
+function formatTime(timestamp: number) {
+  if (!timestamp) return '-'
+  const date = new Date(timestamp)
+  return date.toLocaleString('zh-CN', {
+    year: 'numeric',
+    month: '2-digit',
+    day: '2-digit',
+    hour: '2-digit',
+    minute: '2-digit',
+    second: '2-digit',
+  })
+}
+
+onMounted(loadList)
+</script>
+
+<style scoped>
+.list-toolbar {
+  display: flex;
+  justify-content: space-between;
+  margin-bottom: 16px;
+}
+
+.list-toolbar-left {
+  display: flex;
+  gap: 8px;
+}
+
+.list-toolbar-right {
+  display: flex;
+  gap: 8px;
+}
+</style>