添加页面图片管理

master
liuyx 2 years ago
parent 9aaa3d75ab
commit d4872b4697

@ -1,7 +1,95 @@
<template>
<div></div>
<el-card>
<el-row :gutter="12">
<el-col v-for="page of pageList" :key="page.id" :md="8">
<div class="page-item">
<!-- 对图片的操作 -->
<div class="page-opreation">
<el-dropdown trigger="click">
<el-icon color="#eee"><More /></el-icon>
<template #dropdown>
<el-dropdown-menu>
<el-dropdown-item @click="showDialog(page.id)"> </el-dropdown-item>
</el-dropdown-menu>
</template>
</el-dropdown>
</div>
<el-image
:src="page.pageCover"
class="page-cover"
placeholder="别急,图片马上出来~"
></el-image>
<div class="page-name">{{ page.pageName }}</div>
</div>
</el-col>
</el-row>
<el-dialog v-model="dialogVisible" width="40%" style="z-index: 9999">
<el-form :model="pageForm" label-width="150px" label-position="left">
<el-form-item label="上传页面图片">
<Upload :url="pageForm.url" :width="360" :height="180" />
</el-form-item>
</el-form>
<template #footer>
<span class="dialog-footer">
<el-button @click="dialogVisible = false"> 取消 </el-button>
<el-button type="primary" @click="updatePage"> </el-button>
</span>
</template></el-dialog
>
</el-card>
</template>
<script setup></script>
<script setup>
import { ref, onMounted } from 'vue'
import Upload from '@/components/Upload.vue'
import axios from 'axios'
<style lang="scss" scoped></style>
const pageList = ref([])
const pageForm = ref({
url: ''
})
const dialogVisible = ref(false)
onMounted(() => {
axios.get('/api/pages').then((res) => {
console.log(res.data)
pageList.value = res.data
})
})
const showDialog = (id) => {
dialogVisible.value = true
pageForm.value.url = 'http://rlr92qkze.hn-bkt.clouddn.com/blog1669209793366.png'
console.log(id)
}
const updatePage = () => {
dialogVisible.value = false
}
</script>
<style lang="scss" scoped>
.page-item {
margin: 0 10px 20px 0;
cursor: pointer;
position: relative;
.page-opreation {
position: absolute;
right: 1.4em;
top: 1em;
z-index: 999;
}
.page-cover {
position: relative;
width: 100%;
height: 256px;
border-radius: 5px;
}
.page-name {
text-align: center;
}
}
.el-icon {
font-size: 22px;
}
</style>

Loading…
Cancel
Save