From 5a4db13682a67e96dccedc885146d13db31e5ba9 Mon Sep 17 00:00:00 2001
From: liruiqiang <3151805288@qq.com>
Date: Tue, 21 Oct 2025 15:59:03 +0800
Subject: [PATCH] =?UTF-8?q?=E8=90=BD=E5=9C=B0=E9=A1=B5=E7=AE=A1=E7=90=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/admin/landingList.vue | 286 ++++++++++++++++++++++++++++++++++++++++
 1 file changed, 286 insertions(+)
 create mode 100644 src/views/admin/landingList.vue

diff --git a/src/views/admin/landingList.vue b/src/views/admin/landingList.vue
new file mode 100644
index 0000000..571b514
--- /dev/null
+++ b/src/views/admin/landingList.vue
@@ -0,0 +1,286 @@
+<template>
+  <div class="page-container">
+    <!-- 顶栏容器 -->
+    <div class="top-bar">
+      <span>落地页管理</span>
+    </div>
+
+    <!-- 主体容器（包含侧边栏和主内容） -->
+    <div class="main-container">
+      <!-- 侧边栏容器（目录） -->
+      <div class="sidebar">
+        <el-menu 
+          default-active="1" 
+          class="sidebar-menu"
+          background-color="#f5f7fa"
+          text-color="#333"
+          active-text-color="#1890ff"
+        >
+          <el-menu-item index="1">
+            <i class="el-icon-document"></i>
+            <span slot="title">落地页管理</span>
+          </el-menu-item>
+        </el-menu>
+      </div>
+
+      <!-- 主要区域容器（表格内容） -->
+      <div class="content-area">
+        <!-- 内容头部 -->
+        <div class="content-header">
+          <el-button type="primary" icon="el-icon-plus">+新增落地页</el-button>
+        </div>
+
+        <!-- 表格区域 -->
+        <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="序号" 
+                width="80" 
+                align="center"
+            ></el-table-column>
+            <el-table-column 
+                prop="name" 
+                label="活动名称" 
+                min-width="100"
+                align="center"
+            ></el-table-column>
+            <el-table-column 
+                prop="template" 
+                label="活动简介" 
+                min-width="220"
+                align="center"
+            ></el-table-column>
+            <el-table-column 
+                prop="activityTime" 
+                label="活动时间" 
+                min-width="220"
+                align="center"
+            ></el-table-column>
+            <el-table-column 
+                prop="editTime" 
+                label="编辑时间" 
+                min-width="180"
+                align="center"
+            ></el-table-column>
+            <el-table-column 
+                label="操作" 
+                width="280" 
+                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="View" @click="detail(scope.row.id)">详情</el-button>
+                </template>
+            </el-table-column>
+        </el-table>
+
+        <!-- 分页区域 -->
+        <div class="pagination-container">
+          <el-pagination
+            @size-change="handleSizeChange"
+            @current-change="handleCurrentChange"
+            :current-page="currentPage"
+            :page-sizes="[10, 20, 50]"
+            :page-size="pageSize"
+            layout="total, sizes, prev, pager, next, jumper"
+            :total="totalCount"
+          ></el-pagination>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { getLandingListApi } from '../../api/member.js';
+import { ElMessage } from 'element-plus';
+
+export default {
+  name: 'LandingList',
+  data() {
+    return {
+      // 表格数据
+      tableData: [
+        {
+            id: 1,
+            name: '春节年货促销活动',
+            template: '全场商品8折起，满200减50，叠加运费险',
+            activityTime: '2025-01-10 00:00:00 - 2025-01-25 23:59:59', // 活动时间：15天
+            editTime: '2025-01-08 14:20:00'
+        },
+        {
+            id: 2,
+            name: '情人节限定礼盒推广',
+            template: '定制礼盒买一送一，限量500份，赠手写贺卡',
+            activityTime: '2025-02-08 00:00:00 - 2025-02-14 23:59:59', // 活动时间：7天
+            editTime: '2025-02-05 16:45:00'
+        },
+        {
+            id: 3,
+            name: '3.8女神节特惠',
+            template: '女性用户专属满减券，最高减300元，美妆品类折上折',
+            activityTime: '2025-03-01 00:00:00 - 2025-03-08 23:59:59', // 活动时间：8天
+            editTime: '2025-02-28 10:10:00'
+        },
+        {
+            id: 4,
+            name: '618年中大促',
+            template: '跨店满300减50，叠加店铺优惠券，每日前100名免单',
+            activityTime: '2025-06-01 00:00:00 - 2025-06-20 23:59:59', // 活动时间：20天
+            editTime: '2025-05-28 20:30:00'
+        },
+        {
+            id: 5,
+            name: '国庆新品首发',
+            template: '新品首发享7折，前100名送赠品，满500元包邮',
+            activityTime: '2025-09-28 00:00:00 - 2025-10-07 23:59:59', // 活动时间：10天
+            editTime: '2025-09-25 11:50:00'
+        },
+        {
+            id: 6,
+            name: '双11预售活动',
+            template: '预售商品定金翻倍，满1000减200，叠加平台补贴',
+            activityTime: '2025-10-20 00:00:00 - 2025-11-11 23:59:59', // 活动时间：23天
+            editTime: '2025-10-18 13:10:00'
+        }
+      ],
+      // 分页参数
+      currentPage: 1,
+      pageSize: 10,
+      // 总数据量
+      totalCount: 0,
+      // 加载状态
+      loading: false
+    }
+  },
+  mounted() {
+    this.getLandingList();
+  },
+  methods: {
+    // 获取落地页管理列表数据
+    async getLandingList() {
+      // 显示加载状态
+      this.loading = true;
+      try {
+        // 调用接口，传递分页参数（当前页、每页条数）
+        const res = await getLandingListApi({
+          page: this.currentPage,
+          pageSize: this.pageSize
+        });
+
+        if (res.code === 200) {
+          // 更新表格数据
+          this.tableData = res.data.list;
+          // 更新总条数
+          this.totalCount = res.data.total;
+        } else {
+          // 接口返回错误信息
+          ElMessage.error('获取数据失败');
+        }
+      } catch (error) {
+        // 捕获网络错误
+        ElMessage.error('网络异常，请稍后重试');
+      } finally {
+        // 无论成功失败，都关闭加载状态
+        this.loading = false;
+      }
+    },
+
+    // 分页大小改变时重新获取数据
+    handleSizeChange(val) {
+      this.pageSize = val;
+      this.currentPage = 1;
+      this.getLandingList(); 
+    },
+
+    // 当前页改变时重新获取数据
+    handleCurrentChange(val) {
+      this.currentPage = val;
+      this.getLandingList();
+    },
+
+    // 详情按钮
+    detail(id){
+        this.$router.push({
+            path: `/admin/landingDetail/${id}`,
+        });
+    }
+  }
+}
+</script>
+
+<style scoped>
+.page-container {
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+}
+
+/* 顶栏样式 */
+.top-bar {
+  height: 60px;
+  background-color: #1890ff;
+  color: #fff;
+  padding: 0 20px;
+  display: flex;
+  align-items: center;
+  font-size: 18px;
+  font-weight: 500;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+  z-index: 10;
+}
+
+/* 主体容器样式 */
+.main-container {
+  display: flex;
+  flex: 1;
+  overflow: hidden;
+}
+
+/* 侧边栏样式 */
+.sidebar {
+  width: 220px;
+  background-color: #f5f7fa;
+  border-right: 1px solid #e8e8e8;
+  overflow-y: auto;
+}
+
+.sidebar-menu {
+  border-right: none;
+  height: 100%;
+}
+
+/* 主内容区域样式 */
+.content-area {
+  flex: 1;
+  padding: 20px;
+  overflow-y: auto;
+  background-color: #fff;
+}
+
+/* 内容头部样式 */
+.content-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 20px;
+  padding-bottom: 10px;
+  border-bottom: 1px solid #e8e8e8;
+}
+
+.content-header h2 {
+  margin: 0;
+  font-size: 18px;
+  color: #333;
+}
+
+/* 分页容器样式 */
+.pagination-container {
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+  margin-top: 10px;
+}
+</style>
\ No newline at end of file