management/src/views/admin/landingDetail.vue

<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>