From d4872b4697fd69f314748bc2b894931f56651840 Mon Sep 17 00:00:00 2001
From: liuyx <1517482303@qq.com>
Date: Tue, 29 Nov 2022 21:20:08 +0800
Subject: [PATCH] =?UTF-8?q?=E6=B7=BB=E5=8A=A0=E9=A1=B5=E9=9D=A2=E5=9B=BE?=
 =?UTF-8?q?=E7=89=87=E7=AE=A1=E7=90=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 admin/src/views/page/Page.vue | 94 +++++++++++++++++++++++++++++++++--
 1 file changed, 91 insertions(+), 3 deletions(-)

diff --git a/admin/src/views/page/Page.vue b/admin/src/views/page/Page.vue
index 677f24b..d75fd90 100644
--- a/admin/src/views/page/Page.vue
+++ b/admin/src/views/page/Page.vue
@@ -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>