2

src/views/message/index.vue

@@ -4,6 +4,7 @@
       <a-tab-pane key="stores" tab="门店"></a-tab-pane>
       <a-tab-pane key="recommendations" tab="今日推荐"></a-tab-pane>
       <a-tab-pane key="events" tab="赛事分析"></a-tab-pane>
+      <a-tab-pane key="carousel" tab="轮播"></a-tab-pane>
     </a-tabs>
 
     <div class="table-actions">
@@ -13,7 +14,7 @@
     <a-table :columns="columns" :data-source="filteredData" :rowKey="record => record.id">
       <template #bodyCell="{ column, record }">
         <template v-if="column.key === 'content'">
-          <div v-if="record.type === 'recommendations' && Array.isArray(record.content)">
+          <div v-if="['recommendations', 'carousel'].includes(record.type) && Array.isArray(record.content)">
             <a-image
               v-for="(image, index) in record.content.slice(0, 3)"
               :key="index"
@@ -48,43 +49,29 @@
             <a-select-option value="stores">门店</a-select-option>
             <a-select-option value="recommendations">今日推荐</a-select-option>
             <a-select-option value="events">赛事分析</a-select-option>
+            <a-select-option value="carousel">轮播</a-select-option>
           </a-select>
         </a-form-item>
-        <a-form-item label="标题" v-if="formState.type !== 'recommendations'">
+        <a-form-item label="标题">
           <a-input v-model:value="formState.title" placeholder="输入标题"/>
         </a-form-item>
-        <a-form-item label="主图" v-if="formState.type !== 'recommendations'">
+        <a-form-item label="图片" v-if="['recommendations', 'carousel'].includes(formState.type)">
           <a-upload
             v-model:fileList="formState.images"
             list-type="picture-card"
-            :max-count="1"
+            :max-count="formState.type === 'carousel' ? 1 : 9"
             @preview="handlePreview"
             @change="handleImageChange"
           >
-            <div v-if="formState.images.length < 1">
+            <div v-if="formState.images.length < (formState.type === 'carousel' ? 1 : 9)">
               <plus-outlined />
               <div style="margin-top: 8px">上传图片</div>
             </div>
           </a-upload>
         </a-form-item>
-        <a-form-item label="内容" v-if="formState.type !== 'recommendations'">
+        <a-form-item label="内容" v-if="!['recommendations', 'carousel'].includes(formState.type)">
           <wysiwyg-editor v-model="formState.content" />
         </a-form-item>
-      
-        <a-form-item label="图片" v-if="formState.type === 'recommendations'">
-          <a-upload
-            v-model:fileList="formState.images"
-            list-type="picture-card"
-            :max-count="9"
-            @preview="handlePreview"
-            @change="handleImageChange"
-          >
-            <div v-if="formState.images.length < 9">
-              <plus-outlined />
-              <div style="margin-top: 8px">上传图片</div>
-            </div>
-          </a-upload>
-        </a-form-item>
       </a-form>
     </a-modal>
 
@@ -118,6 +105,7 @@ const data = reactive([
   { id: 1, type: 'stores', title: '门店1', content: '<p>门店1的内容...</p>' },
   { id: 2, type: 'recommendations', title: '推荐1', content: ['https://matripe.oss-cn-beijing.aliyuncs.com/default.png', 'https://matripe.oss-cn-beijing.aliyuncs.com/default.png'] },
   { id: 3, type: 'events', title: '赛事1', content: '<p>赛事1的分析...</p>' },
+  { id: 4, type: 'carousel', title: '轮播1', content: ['https://matripe.oss-cn-beijing.aliyuncs.com/default.png'] },
 ]);
 
 const formState = reactive({
@@ -140,7 +128,7 @@ const showAddModal = () => {
 
 const editItem = (record) => {
   modalMode.value = 'edit';
-  if (record.type === 'recommendations') {
+  if (['recommendations', 'carousel'].includes(record.type)) {
     Object.assign(formState, { 
       ...record, 
       images: record.content.map((url, index) => ({
@@ -170,7 +158,7 @@ const handleModalOk = () => {
       id: Date.now(),
       type: formState.type,
       title: formState.title,
-      content: formState.type === 'recommendations' 
+      content: ['recommendations', 'carousel'].includes(formState.type)
         ? formState.images.map(img => img.url || img.response.url)
         : formState.content,
     });
@@ -181,7 +169,7 @@ const handleModalOk = () => {
       Object.assign(data[index], {
         type: formState.type,
         title: formState.title,
-        content: formState.type === 'recommendations'
+        content: ['recommendations', 'carousel'].includes(formState.type)
           ? formState.images.map(img => img.url || img.response.url)
           : formState.content,
       });
@@ -226,5 +214,4 @@ const getBase64 = (file) => {
   margin-bottom: 16px;
   text-align: right;
 }
-</style>
-
+</style>