liruiqiang
3 months ago
4 changed files with 352 additions and 2 deletions
@ -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> |
|||
Write
Preview
Loading…
Cancel
Save
Reference in new issue