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