From 9a10e1aaff0de7541b5c9b560ac5a34ca66e6881 Mon Sep 17 00:00:00 2001
From: liruiqiang <3151805288@qq.com>
Date: Tue, 21 Oct 2025 17:05:03 +0800
Subject: [PATCH] =?UTF-8?q?=E6=96=B0=E5=A2=9E/=E4=BF=AE=E6=94=B9=E5=BC=B9?=
 =?UTF-8?q?=E7=AA=97?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/member.js               |  20 +++-
 src/views/admin/landingList.vue | 239 +++++++++++++++++++++++++++++++++++++++-
 2 files changed, 253 insertions(+), 6 deletions(-)

diff --git a/src/api/member.js b/src/api/member.js
index 03103a7..4d88647 100644
--- a/src/api/member.js
+++ b/src/api/member.js
@@ -8,7 +8,25 @@ const API_BASE_URL = import.meta.env.VITE_API_BASE_URL;
 // 获取落地页活动列表
 export function getLandingListApi(data) {
     return request({
-        url: `${API_BASE_URL}/admin/getLanding`,
+        url: `${API_BASE_URL}/admin/getLandingList`,
+        method: "post",
+        data: data,
+    });
+}
+
+// 添加落地页活动
+export function addLandingApi(data) {
+    return request({
+        url: `${API_BASE_URL}/admin/addLand`,
+        method: "post",
+        data: data,
+    });
+}
+
+// 修改落地页活动
+export function editLandingtApi(data) {
+    return request({
+        url: `${API_BASE_URL}/admin/editLanding`,
         method: "post",
         data: data,
     });
diff --git a/src/views/admin/landingList.vue b/src/views/admin/landingList.vue
index 571b514..b8502fb 100644
--- a/src/views/admin/landingList.vue
+++ b/src/views/admin/landingList.vue
@@ -27,11 +27,11 @@
       <div class="content-area">
         <!-- 内容头部 -->
         <div class="content-header">
-          <el-button type="primary" icon="el-icon-plus">+新增落地页</el-button>
+          <el-button type="primary" icon="el-icon-plus" @click="openAddDialog">+新增落地页</el-button>
         </div>
 
         <!-- 表格区域 -->
-        <el-table :data="tableData" stripe  v-loading="loading" style="width: 100%; margin-bottom: 20px; border-top: 1px solid #e8e8e8;" >
+        <el-table :data="tableData" stripe v-loading="loading" style="width: 100%; margin-bottom: 20px; border-top: 1px solid #e8e8e8;" >
             <el-table-column 
                 type="index" 
                 label="序号" 
@@ -68,7 +68,7 @@
                 align="center"
             >
                 <template v-slot:default="scope">
-                    <el-button type="text" size="small" :icon="Edit" @click="edit(scope.row.id)">编辑</el-button>
+                    <el-button type="text" size="small" :icon="Edit" @click="openEditDialog(scope.row)">编辑</el-button>
                     <el-button type="text" size="small" :icon="View" @click="detail(scope.row.id)">详情</el-button>
                 </template>
             </el-table-column>
@@ -86,13 +86,97 @@
             :total="totalCount"
           ></el-pagination>
         </div>
+
+        <!-- 新增：添加/编辑活动弹窗 -->
+        <el-dialog v-model="dialogVisible" :title="dialogTitle" width="600px" :before-close="handleDialogClose">
+            <el-form ref="formRef" :model="form" :rules="formRules" label-width="100px">
+                <!-- 活动名称 -->
+                <el-form-item label="活动名称" prop="name">
+                    <el-input v-model="form.name" placeholder="请输入活动名称" />
+                </el-form-item>
+
+                <!-- 活动简介 -->
+                <el-form-item label="活动简介" prop="intro">
+                    <el-input
+                        v-model="form.intro"
+                        type="textarea"
+                        placeholder="请输入活动简介"
+                        :maxlength="80"
+                        show-word-limit
+                    />
+                <div class="intro-tip">活动简介会给分享后客户展示，请注意填写内容</div>
+                </el-form-item>
+
+                <!-- 活动时间 -->
+                <el-form-item label="活动时间" prop="time">
+                    <el-date-picker
+                        v-model="form.startTime"
+                        type="datetime"
+                        placeholder="请选择开始时间"
+                        style="width: 200px"
+                    />
+                    <span class="time-separator">至</span>
+                    <el-date-picker
+                        v-model="form.endTime"
+                        type="datetime"
+                        placeholder="请选择结束时间"
+                        style="width: 200px"
+                    />
+                </el-form-item>
+
+                <!-- 活动落地页（宽度≤375px） -->
+                <el-form-item label="活动落地页" prop="landingPage">
+                    <el-upload
+                        class="upload-demo"
+                        action="#"
+                        :limit="1"
+                        :on-change="handleLandingPageUpload"
+                        list-type="picture"
+                        :file-list="form.landingPageFiles"
+                    >
+                        <el-button type="primary" icon="Plus">上传</el-button>
+                        <template #tip>
+                        <div class="upload-tip">
+                            宽度≤375像素，支持PNG、JPG、GIF格式，图片需小于2M
+                        </div>
+                        </template>
+                    </el-upload>
+                </el-form-item>
+
+                <!-- 落地页弹窗（宽度≤375px） -->
+                <el-form-item label="落地页弹窗" prop="popup">
+                    <el-upload
+                        class="upload-demo"
+                        action="#"
+                        :limit="1"
+                        :on-change="handlePopupUpload"
+                        list-type="picture"
+                        :file-list="form.popupFiles"
+                    >
+                        <el-button type="primary" icon="Plus">上传</el-button>
+                        <template #tip>
+                        <div class="upload-tip">
+                            宽度≤375像素，支持PNG、JPG格式，图片需小于2M
+                        </div>
+                        </template>
+                    </el-upload>
+                </el-form-item>
+            </el-form>
+
+            <template #footer>
+                <div class="dialog-footer">
+                <el-button @click="dialogVisible = false">取消</el-button>
+                <el-button type="primary" @click="submitForm">确定</el-button>
+                </div>
+            </template>
+        </el-dialog>
       </div>
     </div>
   </div>
 </template>
 
 <script>
-import { getLandingListApi } from '../../api/member.js';
+import { getLandingListApi, addLandingApi, editLandingtApi } from '../../api/member.js';
 import { ElMessage } from 'element-plus';
 
 export default {
@@ -150,7 +234,32 @@ export default {
       // 总数据量
       totalCount: 0,
       // 加载状态
-      loading: false
+      loading: false,
+      // 弹窗显示状态
+      dialogVisible: false, 
+      // 弹窗标题
+      dialogTitle: '',
+      // 表单数据
+      form: { 
+        id: '',
+        name: '',
+        intro: '',
+        startTime: '',
+        endTime: '',
+        landingPage: '',
+        popup: '',
+        landingPageFiles: [], // 存储已上传的落地页图片
+        popupFiles: []        // 存储已上传的弹窗图片
+      },
+      // 表单校验规则
+      formRules: { 
+        name: [{ required: true, message: '请输入活动名称', trigger: 'blur' }],
+        intro: [{ required: true, message: '请输入活动简介', trigger: 'blur' }],
+        startTime: [{ required: true, message: '请选择开始时间', trigger: 'change' }],
+        endTime: [{ required: true, message: '请选择结束时间', trigger: 'change' }],
+        landingPage: [{ required: true, message: '请上传活动落地页', trigger: 'change' }],
+        popup: [{ required: true, message: '请上传落地页弹窗', trigger: 'change' }]
+      }
     }
   },
   mounted() {
@@ -204,6 +313,107 @@ export default {
         this.$router.push({
             path: `/admin/landingDetail/${id}`,
         });
+    },
+
+    // 打开新增弹窗
+    openAddDialog() {
+      this.dialogTitle = '添加活动';
+      this.form = {
+        id: '',
+        name: '',
+        intro: '',
+        startTime: '',
+        endTime: '',
+        landingPage: '',
+        popup: '',
+      };
+      this.dialogVisible = true;
+    },
+
+    // 打开编辑弹窗
+    openEditDialog(row) {
+      this.dialogTitle = '编辑活动';
+      this.form = {
+        id: row.id,
+        name: row.name,
+        intro: row.template,
+        startTime: row.activityTime.split(' - ')[0],
+        endTime: row.activityTime.split(' - ')[1],
+        landingPage: '',
+        popup: '',
+      };
+      this.dialogVisible = true;
+    },
+
+    // 处理落地页上传（宽度校验≤375px）
+    handleLandingPageUpload(file) {
+      const reader = new FileReader();
+      reader.onload = (e) => {
+        const img = new Image();
+        img.onload = () => {
+          if (img.width > 375) {
+            ElMessage.error('图片宽度不能超过375px');
+            this.form.landingPageFiles = [];
+          } else {
+            this.form.landingPage = file.raw;
+            this.form.landingPageFiles = [file];
+          }
+        };
+        img.src = e.target.result;
+      };
+      reader.readAsDataURL(file.raw);
+    },
+
+    // 处理弹窗上传（宽度校验≤375px）
+    handlePopupUpload(file) {
+      const reader = new FileReader();
+      reader.onload = (e) => {
+        const img = new Image();
+        img.onload = () => {
+          if (img.width > 375) {
+            ElMessage.error('图片宽度不能超过375px');
+            this.form.popupFiles = [];
+          } else {
+            this.form.popup = file.raw;
+            this.form.popupFiles = [file];
+          }
+        };
+        img.src = e.target.result;
+      };
+      reader.readAsDataURL(file.raw);
+    },
+
+    // 提交表单（新增/编辑）
+    submitForm() {
+      this.$refs.formRef.validate((valid) => {
+        if (valid) {
+          const api = this.form.id ? editLandingtApi : addLandingApi;
+          api({
+            id: this.form.id,
+            name: this.form.name,
+            intro: this.form.intro,
+            startTime: this.form.startTime,
+            endTime: this.form.endTime,
+            landingPage: this.form.landingPage,
+            popup: this.form.popup
+          }).then(res => {
+            if (res.code === 200) {
+              ElMessage.success('操作成功');
+              this.dialogVisible = false;
+              this.getLandingList(); // 刷新列表
+            } else {
+              ElMessage.error(res.msg || '操作失败');
+            }
+          }).catch(err => {
+            ElMessage.error('网络异常');
+          });
+        }
+      });
+    },
+
+    // 关闭弹窗
+    handleDialogClose() {
+      this.dialogVisible = false;
     }
   }
 }
@@ -283,4 +493,23 @@ export default {
   align-items: center;
   margin-top: 10px;
 }
+
+/* 弹窗样式 */
+.intro-tip {
+  font-size: 12px;
+  color: #999;
+  margin-top: 5px;
+}
+.time-separator {
+  margin: 0 10px;
+}
+.upload-tip {
+  font-size: 12px;
+  color: #999;
+  margin-top: 5px;
+}
+.dialog-footer {
+  display: flex;
+  justify-content: flex-end;
+}
 </style>
\ No newline at end of file