You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
338 lines
8.6 KiB
338 lines
8.6 KiB
<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>
|