From 546f1f4ea1997c5567b3d5e8edd2542aabdb58f0 Mon Sep 17 00:00:00 2001
From: BianLzhaoMin <11485688+bianliangzhaomin123@user.noreply.gitee.com>
Date: Wed, 15 Jan 2025 13:16:34 +0800
Subject: [PATCH] =?UTF-8?q?=E5=A2=9E=E5=8A=A0=E8=BD=AE=E6=92=AD=E5=9B=BE?=
 =?UTF-8?q?=E9=85=8D=E7=BD=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/swiper-manage/index.js    |  23 +++++
 src/views/swiper-manage/index.vue | 134 +++++++++++++++++++++---------
 2 files changed, 118 insertions(+), 39 deletions(-)
 create mode 100644 src/api/swiper-manage/index.js

diff --git a/src/api/swiper-manage/index.js b/src/api/swiper-manage/index.js
new file mode 100644
index 00000000..4b934254
--- /dev/null
+++ b/src/api/swiper-manage/index.js
@@ -0,0 +1,23 @@
+import request from "@/utils/request";
+
+// 新增上传首页轮播图
+export const addHomeSwiperApi = () => {
+  return request({
+    url: "/auth/getConfig",
+    method: "get",
+  });
+};
+// 修改轮播图状态
+export const editHomeSwiperTypeApi = () => {
+  return request({
+    url: "/auth/getConfig",
+    method: "get",
+  });
+};
+// 删除轮播图
+export const deleteHomeSwiperApi = () => {
+  return request({
+    url: "/auth/getConfig",
+    method: "get",
+  });
+};
diff --git a/src/views/swiper-manage/index.vue b/src/views/swiper-manage/index.vue
index 1a146f3a..e552b58a 100644
--- a/src/views/swiper-manage/index.vue
+++ b/src/views/swiper-manage/index.vue
@@ -18,18 +18,29 @@
       <el-table-column label="序号" align="center" width="100" type="index" />
       <el-table-column prop="imgSrc" label="图片链接" align="center" />
       <el-table-column prop="isShow" label="是否禁用" align="center">
-        <template>
-          <el-switch active-text="激活" inactive-text="禁用" v-model="value2" />
+        <template slot-scope="{ row }">
+          <el-switch
+            active-text="激活"
+            inactive-text="禁用"
+            v-model="row.isShow"
+          />
         </template>
       </el-table-column>
       <el-table-column prop="outLink" label="外部链接" align="center" />
+      <el-table-column label="操作" align="center">
+        <template>
+          <el-button size="mini" type="danger" @click="onClickDelete">
+            删除
+          </el-button>
+        </template>
+      </el-table-column>
     </el-table>
 
     <el-dialog
+      width="50%"
+      append-to-body
       title="新增轮播图"
       :visible.sync="addSwiperVisible"
-      width="40%"
-      append-to-body
     >
       <el-form
         ref="addSwiperFormRef"
@@ -56,16 +67,16 @@
             <el-form-item label="轮播图上传：">
               <el-upload
                 :limit="1"
+                :headers="headers"
+                :show-file-list="true"
                 :action="uploadFileUrl"
                 list-type="picture-card"
-                :file-list="addOrEditForm.fileList"
-                :headers="headers"
+                :on-exceed="handleExceed"
                 :on-remove="handleRemove"
                 :on-preview="handlePreview"
                 :on-success="handleSuccess"
                 :before-upload="handleBeforeUpload"
-                :show-file-list="true"
-                :on-exceed="handleExceed"
+                :file-list="addSwiperForm.fileList"
               >
                 <i class="el-icon-plus"></i>
               </el-upload>
@@ -77,19 +88,50 @@
         <el-button type="primary" @click="submitForm">确 定</el-button>
         <el-button @click="cancel">取 消</el-button>
       </div>
+
+      <el-dialog
+        width="30%"
+        append-to-body
+        :before-close="
+          () => {
+            dialogInnerVisible = false;
+          }
+        "
+        :visible.sync="dialogInnerVisible"
+      >
+        <img
+          :src="previewUrl"
+          style="display: block; max-width: 100%; margin: 0 auto"
+        />
+      </el-dialog>
     </el-dialog>
   </div>
 </template>
 
 <script>
+import { getToken } from "@/utils/auth";
+import {
+  addHomeSwiperApi,
+  deleteHomeSwiperApi,
+  editHomeSwiperTypeApi,
+} from "@/api/swiper-manage/index.js";
 export default {
   data() {
     return {
+      uploadFileUrl: process.env.VUE_APP_BASE_API + "/file/upload",
+      dialogInnerVisible: false,
+      fileType: ["png", "jpg", "jpeg"],
+      previewUrl: "",
       addSwiperVisible: false,
       value1: true,
       value2: true,
-      uploadFileUrl: "",
-      headers: {},
+      addSwiperFormRules: {},
+      addSwiperForm: {
+        fileList: [],
+      },
+      headers: {
+        Authorization: "Bearer " + getToken(),
+      },
       noticeList: [
         {
           imgSrc: "xxxx",
@@ -121,44 +163,58 @@ export default {
     },
     // 上传之前
     handleBeforeUpload(file) {
-      // const isSvg = this.fileType.some((e) => file.type.includes(e));
-      // if (!isSvg) {
-      //   this.$modal.msgError(
-      //     `文件格式不正确, 请上传${this.fileType.join("、")}格式的文件!`
-      //   );
-      //   return false;
-      // }
-      // const isLt = file.size / 1024 / 1024 < 3;
-      // if (!isLt) {
-      //   this.$modal.msgError(`LOGO大小不能超过 3 MB`);
-      //   return false;
-      // }
-      // this.$modal.loading("图片正在上传，请稍候...");
+      const isSvg = this.fileType.some((e) => file.type.includes(e));
+      if (!isSvg) {
+        this.$modal.msgError(
+          `文件格式不正确, 请上传${this.fileType.join("、")}格式的文件!`
+        );
+        return false;
+      }
+      const isLt = file.size / 1024 / 1024 < 10;
+      if (!isLt) {
+        this.$modal.msgError(`图片大小不能超过 10 MB`);
+        return false;
+      }
+      this.$modal.loading("图片正在上传，请稍候...");
     },
     // 移除
     handleRemove(file) {
-      // this.addOrEditForm.fileList = this.addOrEditForm.fileList.filter(
-      //   (item) => item.uid !== file.uid
-      // );
-      // this.addOrEditForm.logo = "";
+      this.addSwiperFormRules.fileList =
+        this.addSwiperFormRules.fileList.filter(
+          (item) => item.uid !== file.uid
+        );
+      this.addSwiperFormRules.logo = "";
     },
-    // 预览 LOGO
+    // 预览 图片
     handlePreview(file) {
-      // this.dialogInnerVisible = true;
-      // this.previewUrl = file.url;
+      this.dialogInnerVisible = true;
+      this.previewUrl = file.url;
+    },
+
+    // 文件个数超出限制
+    handleExceed() {
+      this.$modal.msgError(`上传的图片数量不能超过 1 个`);
     },
     // 上传成功
     handleSuccess(res) {
-      // if (res.code === 200) {
-      //   this.addOrEditForm.logo = res.data.url;
-      // } else {
-      //   this.addOrEditForm.fileList = [];
-      //   this.addOrEditForm.logo = "";
-      // }
-      // this.$modal.closeLoading();
+      if (res.code === 200) {
+        this.addSwiperFormRules.logo = res.data.url;
+      } else {
+        this.addSwiperFormRules.fileList = [];
+        this.addSwiperFormRules.logo = "";
+      }
+      this.$modal.closeLoading();
+    },
+
+    onClickDelete() {
+      this.$confirm("确定删除该轮播图吗？", "提示", {
+        confirmButtonText: "确定",
+        cancelButtonText: "取消",
+        type: "warning",
+      })
+        .then(() => {})
+        .catch(() => {});
     },
   },
 };
 </script>
-
-<style></style>