增加轮播图配置

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",
+  });
+};

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>
+        <template slot-scope="{ row }">
-          <el-switch active-text="激活" inactive-text="禁用" v-model="value2" />
+          <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"
+                :on-exceed="handleExceed"
-                :headers="headers"
                 :on-remove="handleRemove"
                 :on-preview="handlePreview"
                 :on-success="handleSuccess"
                 :before-upload="handleBeforeUpload"
-                :show-file-list="true"
+                :file-list="addSwiperForm.fileList"
-                :on-exceed="handleExceed"
               >
                 <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: "",
+      addSwiperFormRules: {},
-      headers: {},
+      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));
+      const isSvg = this.fileType.some((e) => file.type.includes(e));
-      // if (!isSvg) {
+      if (!isSvg) {
-      //   this.$modal.msgError(
+        this.$modal.msgError(
-      //     `文件格式不正确, 请上传${this.fileType.join("、")}格式的文件!`
+          `文件格式不正确, 请上传${this.fileType.join("、")}格式的文件!`
-      //   );
+        );
-      //   return false;
+        return false;
-      // }
+      }
-      // const isLt = file.size / 1024 / 1024 < 3;
+      const isLt = file.size / 1024 / 1024 < 10;
-      // if (!isLt) {
+      if (!isLt) {
-      //   this.$modal.msgError(`LOGO大小不能超过 3 MB`);
+        this.$modal.msgError(`图片大小不能超过 10 MB`);
-      //   return false;
+        return false;
-      // }
+      }
-      // this.$modal.loading("图片正在上传，请稍候...");
+      this.$modal.loading("图片正在上传，请稍候...");
     },
     // 移除
     handleRemove(file) {
-      // this.addOrEditForm.fileList = this.addOrEditForm.fileList.filter(
+      this.addSwiperFormRules.fileList =
-      //   (item) => item.uid !== file.uid
+        this.addSwiperFormRules.fileList.filter(
-      // );
+          (item) => item.uid !== file.uid
-      // this.addOrEditForm.logo = "";
+        );
+      this.addSwiperFormRules.logo = "";
     },
-    // 预览 LOGO
+    // 预览 图片
     handlePreview(file) {
-      // this.dialogInnerVisible = true;
+      this.dialogInnerVisible = true;
-      // this.previewUrl = file.url;
+      this.previewUrl = file.url;
+    },
+
+    // 文件个数超出限制
+    handleExceed() {
+      this.$modal.msgError(`上传的图片数量不能超过 1 个`);
     },
     // 上传成功
     handleSuccess(res) {
-      // if (res.code === 200) {
+      if (res.code === 200) {
-      //   this.addOrEditForm.logo = res.data.url;
+        this.addSwiperFormRules.logo = res.data.url;
-      // } else {
+      } else {
-      //   this.addOrEditForm.fileList = [];
+        this.addSwiperFormRules.fileList = [];
-      //   this.addOrEditForm.logo = "";
+        this.addSwiperFormRules.logo = "";
-      // }
+      }
-      // this.$modal.closeLoading();
+      this.$modal.closeLoading();
+    },
+
+    onClickDelete() {
+      this.$confirm("确定删除该轮播图吗？", "提示", {
+        confirmButtonText: "确定",
+        cancelButtonText: "取消",
+        type: "warning",
+      })
+        .then(() => {})
+        .catch(() => {});
     },
   },
 };
 </script>
-
-<style></style>