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