From b04cd4630e5a32d7b01414332a3de4aa8cf05b3f Mon Sep 17 00:00:00 2001
From: zsk <710162063@qq.com>
Date: Wed, 19 Feb 2025 14:36:37 +0800
Subject: [PATCH] 3

---
 src/api/contentConfig.js              |   9 ++
 src/layout/m-aside.vue                |   3 +
 src/router/index.js                   |   8 ++
 src/utils/mock.js                     |  27 ++++++
 src/views/message/content.vue         | 157 ++++++++++++++++++++++++----------
 src/views/message/gameManagement.vue  |  20 ++---
 src/views/message/importantPoints.vue | 103 ++++++++++++++++++++++
 7 files changed, 271 insertions(+), 56 deletions(-)
 create mode 100644 src/views/message/importantPoints.vue

diff --git a/src/api/contentConfig.js b/src/api/contentConfig.js
index f949789..9264477 100644
--- a/src/api/contentConfig.js
+++ b/src/api/contentConfig.js
@@ -17,6 +17,15 @@ export function saveContentApi(data) {
   });
 }
 
+// 新增内容
+export function getHzd(data) {
+  return request({
+    url: `/admin/cms/get/61`,
+    method: "get",
+    data
+  });
+}
+
 // 更新内容
 export function updateContentApi(data) {
   return request({
diff --git a/src/layout/m-aside.vue b/src/layout/m-aside.vue
index 5af9907..3bdefd1 100644
--- a/src/layout/m-aside.vue
+++ b/src/layout/m-aside.vue
@@ -125,6 +125,9 @@ onMounted(() => {
           case "winningInformation":
 					items.push(getItem(item.title, item.id, item.component, () => h(AuditOutlined)));
 					break;
+          case "importantPoints":
+					items.push(getItem(item.title, item.id, item.component, () => h(MailOutlined)));
+					break;
 				case "ServiceMarket":
 					items.push(getItem(item.title, item.id, item.component, () => h(SketchOutlined)));
 					break;
diff --git a/src/router/index.js b/src/router/index.js
index bbf8598..655a3a9 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -56,6 +56,14 @@ const router = createRouter({
           },
           component: () => import("../views/message/index.vue")
         },
+        {
+          path: "/merchantManagement/importantPoints",
+          name: "importantPoints",
+          meta: {
+            title: '划重点',
+          },
+          component: () => import("../views/message/importantPoints.vue")
+        },
         {
           path: "/merchantManagement/content",
           name: "content",
diff --git a/src/utils/mock.js b/src/utils/mock.js
index e54b6f0..909e8cd 100644
--- a/src/utils/mock.js
+++ b/src/utils/mock.js
@@ -164,6 +164,33 @@ export let mockMenuList = {
       "exportTag": 0,
       "childrenList": []
     },
+    {
+      "id": 111,
+      "creator": "",
+      "updator": "",
+      "createTime": "",
+      "updateTime": "",
+      "deleted": 0,
+      "title": "划重点",
+      "menuName": "importantPoints",
+      "parentName": "",
+      "path": "importantPoints",
+      "component": "/merchantManagement/importantPoints.vue",
+      "visible": 0,
+      "perms": "",
+      "icon": "icon-houtaishouye",
+      "remark": "",
+      "parentId": "",
+      "tagNames": "queryTag,addTag,updateTag,deleteTag",
+      "idx": 10,
+      "queryTag": 0,
+      "addTag": 0,
+      "deleteTag": 0,
+      "updateTag": 0,
+      "importTag": 0,
+      "exportTag": 0,
+      "childrenList": []
+    },
     {
       "id": 1,
       "creator": "",
diff --git a/src/views/message/content.vue b/src/views/message/content.vue
index a2009f9..174dc81 100644
--- a/src/views/message/content.vue
+++ b/src/views/message/content.vue
@@ -4,6 +4,7 @@
       <a-tab-pane key="recommendations" tab="今日推荐"></a-tab-pane>
       <a-tab-pane key="stores" tab="门店"></a-tab-pane>
       <a-tab-pane key="events" tab="赛事分析"></a-tab-pane>
+      <!-- <a-tab-pane key="highlights" tab="划重点"></a-tab-pane> -->
       <template #rightExtra>
         <a-button type="primary" @click="showAddModal">新增</a-button>
       </template>
@@ -11,7 +12,7 @@
 
     <a-table :columns="columns" :data-source="filteredData" :rowKey="record => record.id">
       <template #bodyCell="{ column, record }">
-        <template v-if="column.key === 'content'">
+        <template v-if="column.key === 'content' && activeTab !== 'highlights'">
           <div v-if="record.classify === 1">
             <a-image
               :src="record.img"
@@ -22,7 +23,10 @@
           </div>
           <span v-else v-text="record.content1"></span>
         </template>
-        <template v-if="column.key === 'status'">
+        <template v-if="column.key === 'relatedOption' && activeTab === 'highlights'">
+          <span>{{ getRelatedOptionLabel(record.relatedOption) }}</span>
+        </template>
+        <template v-if="column.key === 'status' && activeTab !== 'highlights'">
           <a-tag :color="record.status === 1 ? 'green' : 'orange'">
             {{ record.status === 1 ? '已发布' : '未发布' }}
           </a-tag>
@@ -30,7 +34,7 @@
         <template v-if="column.key === 'action'">
           <a-space>
             <a-button type="link" @click="editItem(record)">编辑</a-button>
-            <a-button type="link" @click="deleteItem(record)" v-if="activeTab != 'recommendations'">删除</a-button>
+            <a-button v-if="activeTab !== 'recommendations'" type="link" @click="deleteItem(record)">删除</a-button>
           </a-space>
         </template>
       </template>
@@ -44,7 +48,7 @@
       width="800px"
     >
       <a-form :model="formState" :label-col="{ span: 4 }" :wrapper-col="{ span: 20 }">
-        <a-form-item label="类型">
+        <a-form-item label="类型" v-if="activeTab !== 'highlights'">
           <a-select v-model:value="formState.classify" :disabled="modalMode === 'edit'">
             <a-select-option :value="1">今日推荐</a-select-option>
             <a-select-option :value="0">门店</a-select-option>
@@ -54,26 +58,35 @@
         <a-form-item label="标题">
           <a-input v-model:value="formState.title" placeholder="输入标题"/>
         </a-form-item>
-        <a-form-item label="主图">
-          <a-upload
-            v-model:fileList="formState.images"
-            list-type="picture-card"
-            :max-count="1"
-            @preview="handlePreview"
-            @change="handleImageChange"
-            :customRequest="customRequest"
-          >
-            <div v-if="formState.images.length < 1">
-              <plus-outlined />
-              <div style="margin-top: 8px">上传图片</div>
-            </div>
-          </a-upload>
-        </a-form-item>
-        <a-form-item label="内容" v-if="formState.classify !== 1">
-          <wysiwyg-editor v-model="formState.content" @image-upload="handleEditorImageUpload" />
-        </a-form-item>
-        <a-form-item label="状态">
-          <a-switch v-model:checked="formState.status" :checked-value="1" :unchecked-value="0" />
+        <template v-if="activeTab !== 'highlights'">
+          <a-form-item label="主图">
+            <a-upload
+              v-model:fileList="formState.images"
+              list-type="picture-card"
+              :max-count="1"
+              @preview="handlePreview"
+              @change="handleImageChange"
+              :customRequest="customRequest"
+            >
+              <div v-if="formState.images.length < 1">
+                <plus-outlined />
+                <div style="margin-top: 8px">上传图片</div>
+              </div>
+            </a-upload>
+          </a-form-item>
+          <a-form-item label="内容" v-if="formState.classify !== 1">
+            <wysiwyg-editor v-model="formState.content" @image-upload="handleEditorImageUpload" />
+          </a-form-item>
+          <a-form-item label="状态">
+            <a-switch v-model:checked="formState.status" :checked-value="1" :unchecked-value="0" />
+          </a-form-item>
+        </template>
+        <a-form-item label="关联选项" v-if="activeTab === 'highlights'">
+          <a-select v-model:value="formState.relatedOption">
+            <a-select-option v-for="option in relatedOptions" :key="option.key" :value="option.key">
+              {{ option.label }}
+            </a-select-option>
+          </a-select>
         </a-form-item>
       </a-form>
     </a-modal>
@@ -89,7 +102,7 @@ import { ref, reactive, computed, onMounted } from 'vue';
 import { message } from 'ant-design-vue';
 import { PlusOutlined } from '@ant-design/icons-vue';
 import WysiwygEditor from './WysiwygEditor.vue';
-import { saveContentApi, updateContentApi, getContentListApi, deleteContentApi, uploadImageApi } from "../../api/contentConfig";
+import { saveContentApi,getHzd, updateContentApi, getContentListApi, deleteContentApi, uploadImageApi } from "../../api/contentConfig";
 
 const activeTab = ref('recommendations');
 const modalVisible = ref(false);
@@ -98,13 +111,24 @@ const previewVisible = ref(false);
 const previewImage = ref('');
 const previewTitle = ref('');
 
-const columns = [
-  { title: '类型', dataIndex: 'classify', key: 'classify' },
-  { title: '标题', dataIndex: 'title', key: 'title' },
-  { title: '内容', dataIndex: 'content', key: 'content' },
-  { title: '状态', dataIndex: 'status', key: 'status' },
-  { title: '操作', key: 'action' },
-];
+const columns = computed(() => {
+  if (activeTab.value === 'highlights') {
+    return [
+      { title: '类型', dataIndex: 'classify', key: 'classify' },
+      { title: '标题', dataIndex: 'title', key: 'title' },
+      { title: '关联', dataIndex: 'relatedOption', key: 'relatedOption' },
+      { title: '操作', key: 'action' },
+    ];
+  } else {
+    return [
+      { title: '类型', dataIndex: 'classify', key: 'classify' },
+      { title: '标题', dataIndex: 'title', key: 'title' },
+      { title: '内容', dataIndex: 'content', key: 'content' },
+      { title: '状态', dataIndex: 'status', key: 'status' },
+      { title: '操作', key: 'action' },
+    ];
+  }
+});
 
 const data = reactive([]);
 const classify = ref(1);
@@ -117,13 +141,27 @@ const formState = reactive({
   img: '',
   images: [],
   status: 0,
+  relatedOption: null,
 });
 
+const relatedOptions = [
+  { key: 1, label: '足球总进球' },
+  { key: 2, label: '足球2.0' },
+  { key: 3, label: '足球3.0' },
+  { key: 4, label: '足球中高倍' },
+  { key: 5, label: '足球高倍' },
+  { key: 6, label: '足球8.0' },
+  { key: 7, label: '篮球' },
+  { key: 8, label: '排列三' },
+  { key: 9, label: '快乐八' },
+];
+
 const filteredData = computed(() => {
   const tabToClassify = {
     'recommendations': 1,
     'stores': 0,
-    'events': 2
+    'events': 2,
+    'highlights': 61,
   };
   return data.filter(item => item.classify === tabToClassify[activeTab.value]);
 });
@@ -133,9 +171,19 @@ const showAddModal = () => {
   const tabToClassify = {
     'recommendations': 1,
     'stores': 0,
-    'events': 2
+    'events': 2,
+    'highlights': 61,
   };
-  Object.assign(formState, { id: null, classify: tabToClassify[activeTab.value], title: '', content: '', img: '', images: [], status: 0 });
+  Object.assign(formState, { 
+    id: null, 
+    classify: tabToClassify[activeTab.value], 
+    title: '', 
+    content: '', 
+    img: '', 
+    images: [], 
+    status: activeTab.value === 'highlights' ? 1 : 0, 
+    relatedOption: null
+  });
   modalVisible.value = true;
 };
 
@@ -148,7 +196,8 @@ const editItem = (record) => {
       name: 'image.jpg',
       status: 'done',
       url: record.img,
-    }] : []
+    }] : [],
+    relatedOption: record.relatedOption,
   });
   modalVisible.value = true;
 };
@@ -163,22 +212,21 @@ const deleteItem = async (record) => {
   }
 };
 
-
- 
-
 const handleModalOk = async () => {
   try {
     const data = {
-      classify: formState.classify,
+      classify: activeTab.value === 'highlights' ? 61 : formState.classify,
       title: formState.title,
-      content: formState.classify === 1 ? '' : formState.content,
-      img: processImagePath(formState.img),
-      status: formState.status ? 1 : 0,
+      content: activeTab.value === 'highlights' ? '' : (formState.classify === 1 ? '' : formState.content),
+      img: activeTab.value === 'highlights' ? '' : processImagePath(formState.img),
+      status: activeTab.value === 'highlights' ? 1 : formState.status,
+      relatedOption: activeTab.value === 'highlights' ? formState.relatedOption : undefined,
+      remark: activeTab.value === 'highlights' ? formState.relatedOption : undefined,
     };
     if (modalMode.value === 'add') {
       await saveContentApi(data);
     } else {
-      await updateContentApi({ ...data, recordId: formState.id });
+      await updateContentApi({ ...data, recordId: activeTab.value === 'highlights' ? 61 : formState.id });
     }
     message.success(modalMode.value === 'add' ? '添加成功' : '编辑成功');
     modalVisible.value = false;
@@ -191,6 +239,7 @@ const handleModalOk = async () => {
 const handleModalCancel = () => {
   modalVisible.value = false;
 };
+
 const processImagePath = (imgPath) => {
   const urlPrefix = 'http://123.249.121.26:8801/images/';
   if (imgPath.startsWith(urlPrefix)) {
@@ -200,7 +249,7 @@ const processImagePath = (imgPath) => {
 };
 
 const tabChange = (activeKey) => {
-  classify.value = activeKey === 'recommendations' ? 1 : activeKey === 'stores' ? 0 : 2;
+  classify.value = activeKey === 'recommendations' ? 1 : activeKey === 'stores' ? 0 : activeKey === 'events' ? 2 : 61;
   fetchData();
 };
 
@@ -227,7 +276,6 @@ const handleImageChange = ({ fileList }) => {
   formState.images = fileList;
 };
 
-
 const handleEditorImageUpload = async (file) => {
   try {
     const response = await uploadImageApi(file);
@@ -250,6 +298,16 @@ const getBase64 = (file) => {
 
 const fetchData = async () => {
   try {
+    console.log(activeTab.value);
+    if (activeTab.value == 'highlights') {
+      const response = await getHzd();
+      const records = response.data;
+      console.log(records);
+      //对象转数组
+
+      data.splice(0, data.length, ...records);
+  
+    } else {
     const response = await getContentListApi(1, 10, classify.value);
     const records = response.data.records.map(record => {
       if (record.img) {
@@ -260,11 +318,18 @@ const fetchData = async () => {
       return record;
     });
     data.splice(0, data.length, ...records);
+  }
+
   } catch (error) {
     message.error('获取数据失败');
   }
 };
 
+const getRelatedOptionLabel = (optionKey) => {
+  const option = relatedOptions.find(option => option.key === optionKey);
+  return option ? option.label : '';
+};
+
 onMounted(() => {
   fetchData();
 });
diff --git a/src/views/message/gameManagement.vue b/src/views/message/gameManagement.vue
index c1aa62e..f52ef44 100644
--- a/src/views/message/gameManagement.vue
+++ b/src/views/message/gameManagement.vue
@@ -48,15 +48,15 @@
           <a-form-item label="比赛" name="match" :rules="[{ required: true, message: '请输入比赛' }]">
             <a-input v-model:value="formState.match" />
           </a-form-item>
-          <a-form-item label="球队1" name="team1" :rules="[{ required: true, message: '请输入球队1' }]">
+          <a-form-item label="结果1" name="team1" :rules="[{ required: true, message: '请输入结果1' }]">
             <a-input v-model:value="formState.team1" />
           </a-form-item>
-          <a-form-item label="球队2" name="team2" :rules="[{ required: true, message: '请输入球队2' }]">
+          <!-- <a-form-item label="结果2" name="team2" :rules="[{ required: false, message: '请输入结果2' }]">
             <a-input v-model:value="formState.team2" />
-          </a-form-item>
-          <a-form-item label="比分结果" name="result" :rules="[{ required: true, message: '请输入结果' }]">
+          </a-form-item> -->
+          <!-- <a-form-item label="比分结果" name="result" :rules="[{ required: true, message: '请输入结果' }]">
             <a-input v-model:value="formState.result" />
-          </a-form-item>
+          </a-form-item> -->
         </template>
         <a-form-item label="赔率" name="odds">
           <a-input v-model:value="formState.odds" />
@@ -82,11 +82,11 @@ import dayjs from 'dayjs';
 import { getScheduleListApi, deleteScheduleApi, saveScheduleApi, updateScheduleApi } from '../../api/scheduleConfig';
 
 const noteTypes = [
-  { key: 1, label: '足球总进球' },
+  { key: 1, label: '总进球' },
   { key: 2, label: '足球2.0' },
   { key: 3, label: '足球3.0' },
-  { key: 4, label: '足球中高倍' },
-  { key: 5, label: '足球高倍' },
+  { key: 4, label: '中高倍' },
+  { key: 5, label: '高倍' },
   { key: 6, label: '足球8.0' },
   { key: 7, label: '篮球' },
   { key: 8, label: '排列三' },
@@ -116,7 +116,7 @@ const formState = reactive({
 const filteredData = computed(() => {
   return data.map(item => ({
     ...item,
-    today: dayjs(item.todayStr).format('YYYY-MM-DD')
+    today: dayjs(item.createTime).format('YYYY-MM-DD')
   })).filter(item => item.classify === activeTab.value);
 });
 
@@ -131,7 +131,7 @@ const currentNoteTypeLabel = computed(() => {
 const formatScheduleJson = (scheduleJson) => {
   try {
     const parsed = JSON.parse(scheduleJson);
-    return `${parsed.match} ${parsed.team1} vs ${parsed.team2} ${parsed.result}`;
+    return `${parsed.match} ${parsed.team1}`;
   } catch (error) {
     return scheduleJson;
   }
diff --git a/src/views/message/importantPoints.vue b/src/views/message/importantPoints.vue
new file mode 100644
index 0000000..191db67
--- /dev/null
+++ b/src/views/message/importantPoints.vue
@@ -0,0 +1,103 @@
+<template>
+  <div class="important-points">
+    <a-form :model="formState" :label-col="{ span: 4 }" :wrapper-col="{ span: 16 }">
+      <a-form-item label="标题">
+        <a-input v-model:value="formState.title" />
+      </a-form-item>
+      <a-form-item label="关联项">
+        <a-select v-model:value="formState.remark" style="width: 100%">
+          <a-select-option v-for="type in noteTypes" :key="type.key" :value="type.key">
+            {{ type.label }}
+          </a-select-option>
+        </a-select>
+      </a-form-item>
+    </a-form>
+    <a-row>
+    <a-col :span="6" :offset="4">    <a-button type="primary" @click="handleSave">保存</a-button>
+    </a-col>
+  </a-row>
+    <a-divider />
+    <!-- <div class="content-preview">
+      <h2>内容预览</h2>
+      <p>标题: {{ formState.title }}</p>
+      <p>关联项: {{ getRemarkLabel(formState.remark) }}</p>
+    </div> -->
+  </div>
+</template>
+
+<script setup>
+import { ref, reactive, onMounted } from 'vue';
+import { message } from 'ant-design-vue';
+import { saveContentApi,getHzd, updateContentApi, getContentListApi, deleteContentApi, uploadImageApi } from "../../api/contentConfig";
+
+
+const noteTypes = [
+  { key: 1, label: '总进球' },
+  { key: 2, label: '足球2.0' },
+  { key: 3, label: '足球3.0' },
+  { key: 4, label: '中高倍' },
+  { key: 5, label: '高倍' },
+  { key: 6, label: '足球8.0' },
+  { key: 7, label: '篮球' },
+  { key: 8, label: '排列三' },
+  { key: 9, label: '快乐八' },
+];
+
+const formState = reactive({
+  recordId: 61,
+  title: '',
+  remark: null,
+});
+
+const getRemarkLabel = (key) => {
+  const type = noteTypes.find(t => t.key === key);
+  return type ? type.label : '未选择';
+};
+
+const fetchData = async () => {
+  try {
+    const response = await getHzd();
+    formState.title = response.data.title;
+    formState.remark = response.data.remark !== null ? parseInt(response.data.remark) : null;
+  } catch (error) {
+    message.error('获取数据失败');
+  }
+};
+
+const handleSave = async () => {
+  try {
+    await updateContentApi({
+      recordId: formState.recordId,
+      title: formState.title,
+      content: formState.remark,
+    });
+    message.success('保存成功');
+  } catch (error) {
+    message.error('保存失败');
+  }
+};
+
+const handleTitleChange = (e) => {
+  formState.title = e.target.value;
+};
+
+const handleRemarkChange = (value) => {
+  formState.remark = value;
+};
+
+onMounted(() => {
+  fetchData();
+});
+</script>
+
+<style scoped>
+.important-points {
+  padding: 24px;
+}
+.content-preview {
+  background-color: #f0f2f5;
+  padding: 16px;
+  border-radius: 4px;
+}
+</style>
+