From 4747e467e885c5e10fa0e8709600dff70ee47862 Mon Sep 17 00:00:00 2001
From: BianLzhaoMin <11485688+bianliangzhaomin123@user.noreply.gitee.com>
Date: Thu, 16 Jan 2025 13:17:31 +0800
Subject: [PATCH] =?UTF-8?q?=E8=BD=AE=E6=92=AD=E5=9B=BE=E8=A3=85=E4=BF=AE?=
 =?UTF-8?q?=E9=97=AE=E9=A2=98=E4=BF=AE=E5=A4=8D?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/swiper-manage/index.js       |  49 ++-
 src/components/ThemePicker/index.vue | 306 +++++++++-------
 src/views/swiper-manage/index.vue    | 529 +++++++++++++--------------
 3 files changed, 457 insertions(+), 427 deletions(-)

diff --git a/src/api/swiper-manage/index.js b/src/api/swiper-manage/index.js
index c12d6586..b29327cd 100644
--- a/src/api/swiper-manage/index.js
+++ b/src/api/swiper-manage/index.js
@@ -1,34 +1,33 @@
-import request from "@/utils/request";
+import request from '@/utils/request'
 
 // 新增上传首页轮播图
 export const addHomeSwiperApi = (data) => {
-  return request({
-    url: "/material-mall/bm_slide_show",
-    method: "post",
-    data,
-  });
-};
+    return request({
+        url: '/material-mall/bm_slide_show',
+        method: 'post',
+        data,
+    })
+}
 // 轮播图列表
 export const getSwiperListApi = (data) => {
-  return request({
-    url: "/material-mall/bm_slide_show/list",
-    method: "get",
-    params: data,
-  });
-};
+    return request({
+        url: '/material-mall/bm_slide_show/list',
+        method: 'get',
+        params: data,
+    })
+}
 // 修改轮播图状态
 export const editHomeSwiperTypeApi = (data) => {
-  return request({
-    url: "/material-mall/bm_slide_show/edit",
-    method: "post",
-    data,
-  });
-};
+    return request({
+        url: '/material-mall/bm_slide_show/edit',
+        method: 'post',
+        data,
+    })
+}
 // 删除轮播图
 export const deleteHomeSwiperApi = (id) => {
-  return request({
-    url: `/material-mall/bm_slide_show/del/${id}`,
-    method: "post",
-    data,
-  });
-};
+    return request({
+        url: `/material-mall/bm_slide_show/del/${id}`,
+        method: 'post',
+    })
+}
diff --git a/src/components/ThemePicker/index.vue b/src/components/ThemePicker/index.vue
index 1714e1f3..d2223bfa 100644
--- a/src/components/ThemePicker/index.vue
+++ b/src/components/ThemePicker/index.vue
@@ -1,10 +1,19 @@
 <template>
-  <el-color-picker
-    v-model="theme"
-    :predefine="['#409EFF', '#1890ff', '#304156','#212121','#11a983', '#13c2c2', '#6959CD', '#f5222d', ]"
-    class="theme-picker"
-    popper-class="theme-picker-dropdown"
-  />
+    <el-color-picker
+        v-model="theme"
+        :predefine="[
+            '#409EFF',
+            '#1890ff',
+            '#304156',
+            '#212121',
+            '#11a983',
+            '#13c2c2',
+            '#6959CD',
+            '#f5222d',
+        ]"
+        class="theme-picker"
+        popper-class="theme-picker-dropdown"
+    />
 </template>
 
 <script>
@@ -12,162 +21,185 @@ const version = require('element-ui/package.json').version // element-ui version
 const ORIGINAL_THEME = '#409EFF' // default color
 
 export default {
-  data() {
-    return {
-      chalk: '', // content of theme-chalk css
-      theme: ''
-    }
-  },
-  computed: {
-    defaultTheme() {
-      return this.$store.state.settings.theme
-    }
-  },
-  watch: {
-    defaultTheme: {
-      handler: function(val, oldVal) {
-        this.theme = val
-      },
-      immediate: true
-    },
-    async theme(val) {
-      await this.setTheme(val)
-    }
-  },
-  created() {
-    if(this.defaultTheme !== ORIGINAL_THEME) {
-      this.setTheme(this.defaultTheme)
-    }
-  },
-
-  methods: {
-    async setTheme(val) {
-      const oldVal = this.chalk ? this.theme : ORIGINAL_THEME
-      if (typeof val !== 'string') return
-      const themeCluster = this.getThemeCluster(val.replace('#', ''))
-      const originalCluster = this.getThemeCluster(oldVal.replace('#', ''))
-
-      const getHandler = (variable, id) => {
-        return () => {
-          const originalCluster = this.getThemeCluster(ORIGINAL_THEME.replace('#', ''))
-          const newStyle = this.updateStyle(this[variable], originalCluster, themeCluster)
-
-          let styleTag = document.getElementById(id)
-          if (!styleTag) {
-            styleTag = document.createElement('style')
-            styleTag.setAttribute('id', id)
-            document.head.appendChild(styleTag)
-          }
-          styleTag.innerText = newStyle
+    data() {
+        return {
+            chalk: '', // content of theme-chalk css
+            theme: '',
         }
-      }
-
-      if (!this.chalk) {
-        const url = `https://unpkg.com/element-ui@${version}/lib/theme-chalk/index.css`
-        await this.getCSSString(url, 'chalk')
-      }
-
-      const chalkHandler = getHandler('chalk', 'chalk-style')
-
-      chalkHandler()
-
-      const styles = [].slice.call(document.querySelectorAll('style'))
-        .filter(style => {
-          const text = style.innerText
-          return new RegExp(oldVal, 'i').test(text) && !/Chalk Variables/.test(text)
-        })
-      styles.forEach(style => {
-        const { innerText } = style
-        if (typeof innerText !== 'string') return
-        style.innerText = this.updateStyle(innerText, originalCluster, themeCluster)
-      })
-
-      this.$emit('change', val)
     },
-
-    updateStyle(style, oldCluster, newCluster) {
-      let newStyle = style
-      oldCluster.forEach((color, index) => {
-        newStyle = newStyle.replace(new RegExp(color, 'ig'), newCluster[index])
-      })
-      return newStyle
+    computed: {
+        defaultTheme() {
+            return this.$store.state.settings.theme
+        },
     },
-
-    getCSSString(url, variable) {
-      return new Promise(resolve => {
-        const xhr = new XMLHttpRequest()
-        xhr.onreadystatechange = () => {
-          if (xhr.readyState === 4 && xhr.status === 200) {
-            this[variable] = xhr.responseText.replace(/@font-face{[^}]+}/, '')
-            resolve()
-          }
+    watch: {
+        defaultTheme: {
+            handler: function (val, oldVal) {
+                this.theme = val
+            },
+            immediate: true,
+        },
+        async theme(val) {
+            await this.setTheme(val)
+        },
+    },
+    created() {
+        if (this.defaultTheme !== ORIGINAL_THEME) {
+            this.setTheme(this.defaultTheme)
         }
-        xhr.open('GET', url)
-        xhr.send()
-      })
     },
 
-    getThemeCluster(theme) {
-      const tintColor = (color, tint) => {
-        let red = parseInt(color.slice(0, 2), 16)
-        let green = parseInt(color.slice(2, 4), 16)
-        let blue = parseInt(color.slice(4, 6), 16)
+    methods: {
+        async setTheme(val) {
+            const oldVal = this.chalk ? this.theme : ORIGINAL_THEME
+            if (typeof val !== 'string') return
+            const themeCluster = this.getThemeCluster(val.replace('#', ''))
+            const originalCluster = this.getThemeCluster(
+                oldVal.replace('#', ''),
+            )
 
-        if (tint === 0) { // when primary color is in its rgb space
-          return [red, green, blue].join(',')
-        } else {
-          red += Math.round(tint * (255 - red))
-          green += Math.round(tint * (255 - green))
-          blue += Math.round(tint * (255 - blue))
+            const getHandler = (variable, id) => {
+                return () => {
+                    const originalCluster = this.getThemeCluster(
+                        ORIGINAL_THEME.replace('#', ''),
+                    )
+                    const newStyle = this.updateStyle(
+                        this[variable],
+                        originalCluster,
+                        themeCluster,
+                    )
 
-          red = red.toString(16)
-          green = green.toString(16)
-          blue = blue.toString(16)
+                    let styleTag = document.getElementById(id)
+                    if (!styleTag) {
+                        styleTag = document.createElement('style')
+                        styleTag.setAttribute('id', id)
+                        document.head.appendChild(styleTag)
+                    }
+                    styleTag.innerText = newStyle
+                }
+            }
 
-          return `#${red}${green}${blue}`
-        }
-      }
+            if (!this.chalk) {
+                const url = `https://unpkg.com/element-ui@${version}/lib/theme-chalk/index.css`
+                await this.getCSSString(url, 'chalk')
+            }
 
-      const shadeColor = (color, shade) => {
-        let red = parseInt(color.slice(0, 2), 16)
-        let green = parseInt(color.slice(2, 4), 16)
-        let blue = parseInt(color.slice(4, 6), 16)
+            const chalkHandler = getHandler('chalk', 'chalk-style')
 
-        red = Math.round((1 - shade) * red)
-        green = Math.round((1 - shade) * green)
-        blue = Math.round((1 - shade) * blue)
+            chalkHandler()
 
-        red = red.toString(16)
-        green = green.toString(16)
-        blue = blue.toString(16)
+            const styles = [].slice
+                .call(document.querySelectorAll('style'))
+                .filter((style) => {
+                    const text = style.innerText
+                    return (
+                        new RegExp(oldVal, 'i').test(text) &&
+                        !/Chalk Variables/.test(text)
+                    )
+                })
+            styles.forEach((style) => {
+                const { innerText } = style
+                if (typeof innerText !== 'string') return
+                style.innerText = this.updateStyle(
+                    innerText,
+                    originalCluster,
+                    themeCluster,
+                )
+            })
 
-        return `#${red}${green}${blue}`
-      }
+            this.$emit('change', val)
+        },
 
-      const clusters = [theme]
-      for (let i = 0; i <= 9; i++) {
-        clusters.push(tintColor(theme, Number((i / 10).toFixed(2))))
-      }
-      clusters.push(shadeColor(theme, 0.1))
-      return clusters
-    }
-  }
+        updateStyle(style, oldCluster, newCluster) {
+            let newStyle = style
+            oldCluster.forEach((color, index) => {
+                newStyle = newStyle.replace(
+                    new RegExp(color, 'ig'),
+                    newCluster[index],
+                )
+            })
+            return newStyle
+        },
+
+        getCSSString(url, variable) {
+            return new Promise((resolve) => {
+                const xhr = new XMLHttpRequest()
+                xhr.onreadystatechange = () => {
+                    if (xhr.readyState === 4 && xhr.status === 200) {
+                        this[variable] = xhr.responseText.replace(
+                            /@font-face{[^}]+}/,
+                            '',
+                        )
+                        resolve()
+                    }
+                }
+                xhr.open('GET', url)
+                xhr.send()
+            })
+        },
+
+        getThemeCluster(theme) {
+            const tintColor = (color, tint) => {
+                let red = parseInt(color.slice(0, 2), 16)
+                let green = parseInt(color.slice(2, 4), 16)
+                let blue = parseInt(color.slice(4, 6), 16)
+
+                if (tint === 0) {
+                    // when primary color is in its rgb space
+                    return [red, green, blue].join(',')
+                } else {
+                    red += Math.round(tint * (255 - red))
+                    green += Math.round(tint * (255 - green))
+                    blue += Math.round(tint * (255 - blue))
+
+                    red = red.toString(16)
+                    green = green.toString(16)
+                    blue = blue.toString(16)
+
+                    return `#${red}${green}${blue}`
+                }
+            }
+
+            const shadeColor = (color, shade) => {
+                let red = parseInt(color.slice(0, 2), 16)
+                let green = parseInt(color.slice(2, 4), 16)
+                let blue = parseInt(color.slice(4, 6), 16)
+
+                red = Math.round((1 - shade) * red)
+                green = Math.round((1 - shade) * green)
+                blue = Math.round((1 - shade) * blue)
+
+                red = red.toString(16)
+                green = green.toString(16)
+                blue = blue.toString(16)
+
+                return `#${red}${green}${blue}`
+            }
+
+            const clusters = [theme]
+            for (let i = 0; i <= 9; i++) {
+                clusters.push(tintColor(theme, Number((i / 10).toFixed(2))))
+            }
+            clusters.push(shadeColor(theme, 0.1))
+            return clusters
+        },
+    },
 }
 </script>
 
 <style>
 .theme-message,
 .theme-picker-dropdown {
-  z-index: 99999 !important;
+    z-index: 99999 !important;
 }
 
 .theme-picker .el-color-picker__trigger {
-  height: 26px !important;
-  width: 26px !important;
-  padding: 2px;
+    height: 26px !important;
+    width: 26px !important;
+    padding: 2px;
 }
 
 .theme-picker-dropdown .el-color-dropdown__link-btn {
-  display: none;
+    display: none;
 }
 </style>
diff --git a/src/views/swiper-manage/index.vue b/src/views/swiper-manage/index.vue
index d86a0f39..ab13146f 100644
--- a/src/views/swiper-manage/index.vue
+++ b/src/views/swiper-manage/index.vue
@@ -1,280 +1,279 @@
 <template>
-  <div class="app-container">
-    <el-row :gutter="10" class="mb8">
-      <el-col :span="1.5">
-        <el-button
-          type="primary"
-          plain
-          icon="el-icon-plus"
-          size="mini"
-          @click="handleAdd"
-        >
-          新增轮播图
-        </el-button>
-      </el-col>
-    </el-row>
-
-    <el-table :data="swiperList" border>
-      <el-table-column label="序号" align="center" width="100" type="index" />
-      <el-table-column
-        prop="slidePicture"
-        label="图片链接"
-        align="center"
-        show-overflow-tooltip
-      />
-      <el-table-column prop="isShow" label="是否禁用" align="center">
-        <template slot-scope="{ row }">
-          <el-switch
-            active-text="激活"
-            inactive-text="禁用"
-            v-model="row.delFlag"
-            @change="onSwitchChange($event, row)"
-          />
-        </template>
-      </el-table-column>
-      <el-table-column
-        prop="slideLink"
-        label="外部链接"
-        align="center"
-        show-overflow-tooltip
-      />
-      <el-table-column label="操作" align="center">
-        <template slot-scope="{ row }">
-          <el-button size="mini" type="danger" @click="onClickDelete(row)">
-            删除
-          </el-button>
-        </template>
-      </el-table-column>
-    </el-table>
-
-    <el-dialog
-      width="50%"
-      append-to-body
-      title="新增轮播图"
-      :visible.sync="addSwiperVisible"
-    >
-      <el-form
-        ref="addSwiperFormRef"
-        :model="addSwiperForm"
-        :rules="addSwiperFormRules"
-        label-width="120px"
-      >
-        <el-row>
-          <el-col :span="24">
-            <el-form-item label="外部链接：" prop="slideLink">
-              <el-input
-                placeholder="请输入外部链接"
-                v-model="addSwiperForm.slideLink"
-              />
-            </el-form-item>
-          </el-col>
-          <el-col :span="24">
-            <el-form-item label="是否激活：" prop="delFlag">
-              <el-switch
-                active-text="激活"
-                inactive-text="禁用"
-                v-model="addSwiperForm.delFlag"
-              ></el-switch>
-            </el-form-item>
-          </el-col>
-          <el-col :span="24">
-            <el-form-item label="轮播图上传：" prop="fileList">
-              <el-upload
-                :limit="1"
-                :headers="headers"
-                :show-file-list="true"
-                :action="uploadFileUrl"
-                list-type="picture-card"
-                :on-exceed="handleExceed"
-                :on-remove="handleRemove"
-                :on-preview="handlePreview"
-                :on-success="handleSuccess"
-                :before-upload="handleBeforeUpload"
-                :file-list="addSwiperForm.fileList"
-              >
-                <i class="el-icon-plus"></i>
-              </el-upload>
-            </el-form-item>
-          </el-col>
+    <div class="app-container">
+        <el-row :gutter="10" class="mb8">
+            <el-col :span="1.5">
+                <el-button
+                    type="primary"
+                    plain
+                    icon="el-icon-plus"
+                    size="mini"
+                    @click="handleAdd"
+                >
+                    新增轮播图
+                </el-button>
+            </el-col>
         </el-row>
-      </el-form>
-      <div slot="footer" class="dialog-footer">
-        <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>
+        <el-table :data="swiperList" border>
+            <el-table-column
+                label="序号"
+                align="center"
+                width="100"
+                type="index"
+            />
+            <el-table-column
+                prop="slidePicture"
+                label="图片链接"
+                align="center"
+                show-overflow-tooltip
+            />
+            <el-table-column prop="isShow" label="是否禁用" align="center">
+                <template slot-scope="{ row }">
+                    <el-switch
+                        active-text="激活"
+                        inactive-text="禁用"
+                        v-model="row.delFlag"
+                        @change="onSwitchChange($event, row)"
+                    />
+                </template>
+            </el-table-column>
+            <el-table-column
+                prop="slideLink"
+                label="外部链接"
+                align="center"
+                show-overflow-tooltip
+            />
+            <el-table-column label="操作" align="center">
+                <template slot-scope="{ row }">
+                    <el-button
+                        size="mini"
+                        type="danger"
+                        @click="onClickDelete(row)"
+                    >
+                        删除
+                    </el-button>
+                </template>
+            </el-table-column>
+        </el-table>
+
+        <el-dialog
+            width="50%"
+            append-to-body
+            title="新增轮播图"
+            :visible.sync="addSwiperVisible"
+        >
+            <el-form
+                ref="addSwiperFormRef"
+                :model="addSwiperForm"
+                :rules="addSwiperFormRules"
+                label-width="120px"
+            >
+                <el-row>
+                    <el-col :span="24">
+                        <el-form-item label="外部链接：" prop="slideLink">
+                            <el-input
+                                placeholder="请输入外部链接"
+                                v-model="addSwiperForm.slideLink"
+                            />
+                        </el-form-item>
+                    </el-col>
+                    <el-col :span="24">
+                        <el-form-item label="是否激活：" prop="delFlag">
+                            <el-switch
+                                active-text="激活"
+                                inactive-text="禁用"
+                                v-model="addSwiperForm.delFlag"
+                            ></el-switch>
+                        </el-form-item>
+                    </el-col>
+                    <el-col :span="24">
+                        <el-form-item label="轮播图上传：" prop="fileList">
+                            <el-upload
+                                :limit="1"
+                                :headers="headers"
+                                :show-file-list="true"
+                                :action="uploadFileUrl"
+                                list-type="picture-card"
+                                :on-exceed="handleExceed"
+                                :on-remove="handleRemove"
+                                :on-preview="handlePreview"
+                                :on-success="handleSuccess"
+                                :before-upload="handleBeforeUpload"
+                                :file-list="addSwiperForm.fileList"
+                            >
+                                <i class="el-icon-plus"></i>
+                            </el-upload>
+                        </el-form-item>
+                    </el-col>
+                </el-row>
+            </el-form>
+            <div slot="footer" class="dialog-footer">
+                <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 { getToken } from '@/utils/auth'
 import {
-  addHomeSwiperApi,
-  getSwiperListApi,
-  deleteHomeSwiperApi,
-  editHomeSwiperTypeApi,
-} from "@/api/swiper-manage/index.js";
+    addHomeSwiperApi,
+    getSwiperListApi,
+    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,
-      addSwiperFormRules: {},
-      addSwiperForm: {
-        fileList: [],
-        slidePicture: "",
-        slideLink: "",
-        delFlag: true,
-      },
-      headers: {
-        Authorization: "Bearer " + getToken(),
-      },
-      swiperList: [
-        {
-          imgSrc: "xxxx",
-          isShow: true,
-          outLink: "xxxx999",
+    data() {
+        return {
+            uploadFileUrl: process.env.VUE_APP_BASE_API + '/file/upload',
+            dialogInnerVisible: false,
+            fileType: ['png', 'jpg', 'jpeg'],
+            previewUrl: '',
+            addSwiperVisible: false,
+            value1: true,
+            value2: true,
+            addSwiperFormRules: {},
+            addSwiperForm: {
+                fileList: [],
+                slidePicture: '',
+                slideLink: '',
+                delFlag: true,
+            },
+            headers: {
+                Authorization: 'Bearer ' + getToken(),
+            },
+            swiperList: [],
+        }
+    },
+    created() {
+        this.getSwiperListData()
+    },
+    methods: {
+        handleAdd() {
+            this.addSwiperVisible = true
         },
-        {
-          imgSrc: "xxxx",
-          isShow: true,
-          outLink: "xxxx999",
+        // 获取列表
+        async getSwiperListData() {
+            const res = await getSwiperListApi()
+            this.swiperList = res.rows
+
+            this.swiperList.forEach((e) => {
+                e.delFlag == 0 ? (e.delFlag = true) : (e.delFlag = false)
+            })
+            // console.log(res, "列表数据--");
         },
-        {
-          imgSrc: "xxxx",
-          isShow: false,
-          outLink: "xxxx999",
+        async submitForm() {
+            // 组装参数
+            const { slidePicture, slideLink, delFlag } = this.addSwiperForm
+            const params = {
+                slidePicture,
+                slideLink,
+                delFlag: delFlag ? 0 : 2,
+            }
+            const res = await addHomeSwiperApi(params)
+            if (res.code === 200) {
+                this.$modal.msgSuccess('新增成功')
+                this.$refs.addSwiperFormRef.resetFields()
+                this.addSwiperVisible = false
+                this.getSwiperListData()
+            }
+            // console.log(res, "上传结果--");
+            // this.addSwiperVisible = false;
+        },
+        cancel() {
+            this.addSwiperVisible = false
+        },
+        // 上传之前
+        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 < 10
+            if (!isLt) {
+                this.$modal.msgError(`图片大小不能超过 10 MB`)
+                return false
+            }
+            this.$modal.loading('图片正在上传，请稍候...')
+        },
+        // 移除
+        handleRemove(file) {
+            this.addSwiperForm.fileList = this.addSwiperForm.fileList.filter(
+                (item) => item.uid !== file.uid,
+            )
+            this.addSwiperForm.slidePicture = ''
+        },
+        // 预览 图片
+        handlePreview(file) {
+            this.dialogInnerVisible = true
+            this.previewUrl = file.url
         },
-      ],
-    };
-  },
-  created() {
-    this.getSwiperListData();
-  },
-  methods: {
-    handleAdd() {
-      this.addSwiperVisible = true;
-    },
-    // 获取列表
-    async getSwiperListData() {
-      const res = await getSwiperListApi();
-      this.swiperList = res.rows;
 
-      this.swiperList.forEach((e) => {
-        e.delFlag == 0 ? (e.delFlag = true) : (e.delFlag = false);
-      });
-      // console.log(res, "列表数据--");
-    },
-    async submitForm() {
-      // 组装参数
-      const { slidePicture, slideLink, delFlag } = this.addSwiperForm;
-      const params = {
-        slidePicture,
-        slideLink,
-        delFlag: delFlag ? 0 : 2,
-      };
-      const res = await addHomeSwiperApi(params);
-      if (res.code === 200) {
-        this.$modal.msgSuccess("新增成功");
-        this.$refs.addSwiperFormRef.resetFields();
-        this.addSwiperVisible = false;
-        this.getSwiperListData();
-      }
-      // console.log(res, "上传结果--");
-      // this.addSwiperVisible = false;
-    },
-    cancel() {
-      this.addSwiperVisible = false;
-    },
-    // 上传之前
-    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 < 10;
-      if (!isLt) {
-        this.$modal.msgError(`图片大小不能超过 10 MB`);
-        return false;
-      }
-      this.$modal.loading("图片正在上传，请稍候...");
-    },
-    // 移除
-    handleRemove(file) {
-      this.addSwiperForm.fileList = this.addSwiperForm.fileList.filter(
-        (item) => item.uid !== file.uid
-      );
-      this.addSwiperForm.slidePicture = "";
-    },
-    // 预览 图片
-    handlePreview(file) {
-      this.dialogInnerVisible = true;
-      this.previewUrl = file.url;
-    },
+        // 文件个数超出限制
+        handleExceed() {
+            this.$modal.msgError(`上传的图片数量不能超过 1 个`)
+        },
+        // 上传成功
+        handleSuccess(res) {
+            if (res.code === 200) {
+                this.addSwiperForm.slidePicture = res.data.url
+            } else {
+                this.$modal.msgError('上传失败')
+                this.addSwiperForm.fileList = []
+                this.addSwiperForm.slidePicture = ''
+            }
+            this.$modal.closeLoading()
+        },
 
-    // 文件个数超出限制
-    handleExceed() {
-      this.$modal.msgError(`上传的图片数量不能超过 1 个`);
+        onClickDelete(row) {
+            this.$confirm('确定删除该轮播图吗？', '提示', {
+                confirmButtonText: '确定',
+                cancelButtonText: '取消',
+                type: 'warning',
+            })
+                .then(async () => {
+                    const res = await deleteHomeSwiperApi(row.id)
+                    if (res.code === 200) {
+                        this.$modal.msgSuccess('删除成功')
+                        this.getSwiperListData()
+                    }
+                })
+                .catch(() => {})
+        },
+        async onSwitchChange(val, row) {
+            const { id } = row
+            const params = {
+                id,
+                delFlag: val ? 0 : 2,
+            }
+            const res = await editHomeSwiperTypeApi(params)
+            if (res.code === 200) {
+                this.$modal.msgSuccess('状态修改成功')
+                this.getSwiperListData()
+            }
+        },
     },
-    // 上传成功
-    handleSuccess(res) {
-      if (res.code === 200) {
-        this.addSwiperForm.slidePicture = res.data.url;
-      } else {
-        this.addSwiperForm.fileList = [];
-        this.addSwiperForm.slidePicture = "";
-      }
-      this.$modal.closeLoading();
-    },
-
-    onClickDelete(row) {
-      this.$confirm("确定删除该轮播图吗？", "提示", {
-        confirmButtonText: "确定",
-        cancelButtonText: "取消",
-        type: "warning",
-      })
-        .then(() => {
-          console.log(row, "row-");
-        })
-        .catch(() => {});
-    },
-    async onSwitchChange(val, row) {
-      console.log(row, "列表消息");
-      const { id } = row;
-      const params = {
-        id,
-        delFlag: val ? 0 : 2,
-      };
-      const res = await editHomeSwiperTypeApi(params);
-      if (res.code === 200) {
-        this.$modal.msgSuccess("状态修改成功");
-        this.getSwiperListData();
-      }
-    },
-  },
-};
+}
 </script>