落地页详情

src/api/member.js

@@ -22,3 +22,12 @@ export function getLandingDetailApi(data) {
         data: data,
     });
 }
+
+// 导出落地页活动列表
+export function exportLandingDetailApi(data) {
+    return request({
+        url: `${API_BASE_URL}/admin/exportLandingDetail`,
+        method: "post",
+        data: data,
+    });
+}

src/main.js

@@ -3,10 +3,13 @@ import App from './App.vue'
 import router from './router'
 import ElementPlus from 'element-plus'
 import 'element-plus/dist/index.css'
+import zhCn from 'element-plus/es/locale/lang/zh-cn'
 
 const app = createApp(App)
 
 app.use(router)
-app.use(ElementPlus)
+app.use(ElementPlus, {
+  locale: zhCn
+})
 
 app.mount('#app')

src/router/index.js

@@ -18,7 +18,7 @@ const router = createRouter({
     },
     // 落地页活动详情
     {
-      path: '/admin/landingDetail',
+      path: '/admin/landingDetail/:id',
       name: 'landingDetail', 
       component: () => import('../views/admin/landingDetail.vue'),
       meta: { 

src/views/admin/landingDetail.vue

@@ -0,0 +1,338 @@
+<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="default" plain @click="goBack">返回上一级页面</el-button>
+        </div>
+
+        <!-- 筛选区域 -->
+        <div class="filter-section">
+          <el-form inline :model="filterForm" class="filter-form">
+            <el-form-item label="打开网页时间">
+              <el-date-picker
+                v-model="filterForm.startTime"
+                type="datetime"
+                placeholder="请选择开始时间"
+                style="width: 180px;"
+              />
+              <span class="time-separator">至</span>
+              <el-date-picker
+                v-model="filterForm.endTime"
+                type="datetime"
+                placeholder="请选择结束时间"
+                style="width: 180px;"
+              />
+            </el-form-item>
+            <el-form-item label="收下状态">
+              <el-select v-model="filterForm.status" placeholder="请选择状态" style="width: 150px;">
+                <el-option label="是" value="1"></el-option>
+                <el-option label="否" value="0"></el-option>
+              </el-select>
+            </el-form-item>
+            <el-form-item>
+              <el-button type="primary" @click="handleQuery">查询</el-button>
+            </el-form-item>
+            <el-form-item>
+              <el-button type="primary" plain @click="handleExport">导出</el-button>
+            </el-form-item>
+          </el-form>
+        </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="userInfo" 
+            label="用户信息" 
+            min-width="180"
+            align="center"
+          ></el-table-column>
+          <el-table-column 
+            prop="openTime" 
+            label="打开网页时间" 
+            min-width="180"
+            align="center"
+          ></el-table-column>
+          <el-table-column 
+                label="收下状态" 
+                min-width="120"
+                align="center"
+            >
+                <template v-slot:default="scope">
+                    {{ scope.row.status === 1 ? '是' : '否' }}
+                </template>
+            </el-table-column>
+        </el-table>
+
+        <!-- 分页区域 -->
+        <div class="pagination-container">
+          <el-pagination
+            @size-change="handleSizeChange"
+            @current-change="handleCurrentChange"
+            :current-page="currentPage"
+            :page-sizes="[20, 50, 100]"
+            :page-size="pageSize"
+            layout="total, sizes, prev, pager, next, jumper"
+            :total="totalCount"
+          ></el-pagination>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { getLandingListApi, exportLandingDetailApi } from '../../api/member.js';
+import { ElMessage } from 'element-plus';
+
+export default {
+  name: 'LandingDetail',
+  data() {
+    return {
+      // 活动详情数据
+      detailData: '详情',
+      // 筛选表单数据
+      filterForm: {
+        startTime: '',
+        endTime: '',
+        status: ''
+      },
+      // 表格数据
+      tableData: [
+         {
+            userInfo: '张三（13800138000）',
+            openTime: '2025-10-20 09:15:30',
+            status: 1  // 对应“是”
+        },
+        {
+            userInfo: '李四（13900139000）',
+            openTime: '2025-10-20 10:22:15',
+            status: 0  // 对应“否”
+        },
+        {
+            userInfo: '王五（13700137000）',
+            openTime: '2025-10-20 14:05:40',
+            status: 1  // 对应“是”
+        },
+        {
+            userInfo: '赵六（13600136000）',
+            openTime: '2025-10-21 08:40:22',
+            status: 0  // 对应“否”
+        },
+        {
+            userInfo: '孙七（13500135000）',
+            openTime: '2025-10-21 11:30:10',
+            status: 1  // 对应“是”
+        },
+      ],
+      // 分页参数
+      currentPage: 1,
+      pageSize: 20,
+      totalCount: 0,
+      // 加载状态
+      loading: false
+    }
+  },
+  mounted() {
+    // 获取路由参数中的活动ID
+    const activityId = this.$route.params.id;
+    if (activityId) {
+      // 调用接口获取活动详情及相关数据
+      this.getActivityDetail(activityId);
+    } else {
+      ElMessage.error('未获取到活动ID，无法加载详情');
+    }
+  },
+  methods: {
+    // 返回上一级页面
+    goBack() {
+      this.$router.back();
+    },
+
+    // 获取活动详情及表格数据
+    async getActivityDetail(id) {
+      this.loading = true;
+      try {
+        const res = await getLandingListApi({
+          id: id, // 活动ID
+          page: this.currentPage,
+          pageSize: this.pageSize,
+          ...this.filterForm 
+        });
+
+        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;
+      }
+    },
+
+    // 执行查询操作
+    handleQuery() {
+      this.currentPage = 1;
+      this.getActivityDetail(this.$route.params.id);
+    },
+
+    // 执行导出操作
+    handleExport() {
+      this.loading = true;
+      try {
+        // 调用导出接口（携带活动ID和筛选条件）
+        exportLandingDetailApi({
+          id: this.$route.params.id,
+          ...this.filterForm
+        }).then(res => {
+          if (res.code === 200) {
+            ElMessage.success('导出成功');
+            // 处理文件下载逻辑（如创建a标签下载）
+            const blob = new Blob([res.data], { type: 'application/vnd.ms-excel' });
+            const url = URL.createObjectURL(blob);
+            const a = document.createElement('a');
+            a.href = url;
+            a.download = `${this.detailData?.name || '活动数据'}.xlsx`;
+            a.click();
+            URL.revokeObjectURL(url);
+          } else {
+            ElMessage.error(res.msg || '导出失败');
+          }
+        });
+      } catch (error) {
+        ElMessage.error('导出失败，请重试');
+      } finally {
+        this.loading = false;
+      }
+    },
+
+    // 分页条数变更
+    handleSizeChange(val) {
+      this.pageSize = val;
+      this.currentPage = 1;
+      this.getActivityDetail(this.$route.params.id);
+    },
+
+    // 分页页码变更
+    handleCurrentChange(val) {
+      this.currentPage = val;
+      this.getActivityDetail(this.$route.params.id);
+    }
+  }
+}
+</script>
+
+<style scoped>
+.activity-title {
+  margin: 0 0 0 20px;
+  font-size: 18px;
+  color: #333;
+  font-weight: 500;
+}
+
+.content-header {
+   display: flex;
+    justify-content: flex-end;
+    margin-bottom: 15px;
+    padding-bottom: 10px;
+    border-bottom: 1px solid #e8e8e8;
+}
+
+.page-container {
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+}
+
+.top-bar {
+  height: 60px;
+  background-color: #fff;
+  color: #333;
+  padding: 0 20px;
+  display: flex;
+  align-items: center;
+  font-size: 18px;
+  font-weight: 600;
+  border-bottom: 1px solid #eee;
+}
+
+.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;
+}
+
+.filter-section {
+  margin-bottom: 20px;
+}
+
+.filter-form {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+}
+
+.time-separator {
+  margin: 0 10px;
+}
+
+.pagination-container {
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+  margin-top: 10px;
+}
+</style>