83 lines
2.0 KiB
Vue
83 lines
2.0 KiB
Vue
|
<template>
|
||
|
|
<div class="banner-management">
|
||
|
|
<div class="action-bar">
|
||
|
|
<el-button type="primary" @click="showCreateDialog">+ 新增Banner</el-button>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<el-table :data="banners" style="width: 100%">
|
||
|
|
<el-table-column label="预览" width="200">
|
||
|
|
<template #default="{ row }">
|
||
|
|
<img :src="row.image" class="banner-preview" />
|
||
|
|
</template>
|
||
|
|
</el-table-column>
|
||
|
|
<el-table-column prop="title" label="标题" min-width="150" />
|
||
|
|
<el-table-column prop="linkUrl" label="链接地址" min-width="200" />
|
||
|
|
<el-table-column prop="sort" label="排序" width="80" />
|
||
|
|
<el-table-column prop="status" label="状态" width="100">
|
||
|
|
<template #default="{ row }">
|
||
|
|
<el-switch
|
||
|
|
v-model="row.status"
|
||
|
|
@change="toggleStatus(row)"
|
||
|
|
/>
|
||
|
|
</template>
|
||
|
|
</el-table-column>
|
||
|
|
<el-table-column label="操作" width="180" fixed="right">
|
||
|
|
<template #default="{ row }">
|
||
|
|
<el-button size="small" @click="editBanner(row)">编辑</el-button>
|
||
|
|
<el-button size="small" type="danger" @click="deleteBanner(row)">删除</el-button>
|
||
|
|
</template>
|
||
|
|
</el-table-column>
|
||
|
|
</el-table>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script setup lang="ts">
|
||
|
|
import { ref, onMounted } from 'vue';
|
||
|
|
import { ElButton, ElTable, ElTableColumn, ElSwitch, ElMessage } from 'element-plus';
|
||
|
|
|
||
|
|
const banners = ref<any[]>([]);
|
||
|
|
|
||
|
|
onMounted(() => {
|
||
|
|
loadBanners();
|
||
|
|
});
|
||
|
|
|
||
|
|
function loadBanners() {
|
||
|
|
// TODO: 加载Banner数据
|
||
|
|
}
|
||
|
|
|
||
|
|
function showCreateDialog() {
|
||
|
|
// TODO: 显示创建Banner对话框
|
||
|
|
}
|
||
|
|
|
||
|
|
function editBanner(row: any) {
|
||
|
|
// TODO: 编辑Banner
|
||
|
|
}
|
||
|
|
|
||
|
|
function deleteBanner(row: any) {
|
||
|
|
// TODO: 删除Banner
|
||
|
|
ElMessage.success('删除成功');
|
||
|
|
}
|
||
|
|
|
||
|
|
function toggleStatus(row: any) {
|
||
|
|
// TODO: 切换Banner状态
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style lang="scss" scoped>
|
||
|
|
.banner-management {
|
||
|
|
padding: 20px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.action-bar {
|
||
|
|
margin-bottom: 20px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.banner-preview {
|
||
|
|
width: 100%;
|
||
|
|
height: 80px;
|
||
|
|
object-fit: cover;
|
||
|
|
border-radius: 4px;
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
|