2023-12-13 修改背景图

src/api/index.js

@@ -1,7 +1,10 @@
 /*
  * @Author: 阿小凉
  * @Date: 2023-11-25 09:01:46
- * @LastEditTime: 2023-12-11 17:51:50
+ * @LastEditTime: 2023-12-13 14:50:24
  */
 import request from '@/utils/request'
 
+// 模块分类
+export const companyCategory = params => request({ url: '/company/category', method: 'get', params })
+

src/api/module.js

@@ -1,7 +1,7 @@
 /*
  * @Author: 阿小凉
  * @Date: 2023-11-29 09:39:46
- * @LastEditTime: 2023-12-11 15:52:35
+ * @LastEditTime: 2023-12-13 14:51:52
  */
 // 招商企业
 import request from '@/utils/request'
@@ -37,6 +37,12 @@ export const researchModule = params => request({
   method: 'get',
   params
 })
+// 获取首页背景图
+export const backgroundModule = params => request({
+  url: '/module/background',
+  method: 'get',
+  params
+})
 // 产业园区
 export const introductionModule = params => request({
   url: '/module/introduction',

src/views/dashboard/index.vue

@@ -1,121 +1,185 @@
 <template>
-  <div class="home">
+  <div v-loading="fullLoading" class="content">
     <!-- 首页 -->
+    <div style="font-size: 18px; font-weight: bold; margin-bottom: 24px;">
+      大屏背景设置
+    </div>
+    <div style="margin-bottom:24px;">
+      <el-button v-if="!isEdit" @click="edit">修改</el-button>
+      <el-button @click="save">保存</el-button>
+    </div>
+    <div v-if="!isEdit" class="box">
+      <div v-if="isVideo" class="video_box">
+        <video :src="videoUrl" style="width: 500px;height: 300px;" controls />
+      </div>
+      <div v-else class="img_box">
+        <el-image v-for="(item, i) in params.content" :key="i" :src="item" class="img_item" />
+      </div>
+    </div>
+    <el-tabs v-else v-model="activeName" type="card" @tab-click="handleClick">
+      <el-tab-pane label="上传图片" name="first">
+        <el-upload class="upload-demo" drag multiple action="" :http-request="handleUploadImage" :show-file-list="false">
+          <i class="el-icon-upload" />
+          <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
+          <!-- <div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过500kb</div> -->
+        </el-upload>
+        <div v-if="params.content.length > 0" class="img_box">
+          <div v-for="(item, i) in params.content" :key="i">
+            <el-image :src="item" style="width: 320px;height: 180px;" class="img_item" />
+            <i class="el-icon-delete" @click="deleteImg(i)" /></span>
+          </div>
+
+        </div>
+      </el-tab-pane>
+      <el-tab-pane label="上传视频" name="second">
+        <video :src="params.content" controls v-if="params.content.length > 0" style="width: 300px;height:150px;" />
+        <el-upload class="upload-demo" drag action="" :http-request="handleUploadVideo" v-else :show-file-list="false">
+          <i class="el-icon-upload"></i>
+          <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
+          <!-- <div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过500kb</div> -->
+        </el-upload>
+      </el-tab-pane>
+    </el-tabs>
+
   </div>
 </template>
 
 <script>
-import { mapGetters } from 'vuex'
-import { format } from '@/filters/common'
+import { mapGetters } from "vuex";
+import { backgroundModule, editModule } from "@/api/module";
+import { uploadFile } from "@/api/upload";
 
 export default {
   name: 'Dashboard',
 
-  components: {
-  },
+  components: {},
   data() {
     return {
-
+      params: {
+        title: '',
+        id: '',
+        content: []
+      },
+      isEdit: false,
+      isVideo: false,
+      videoUrl: '',
+      activeName: 'first',
+      fullLoading: false
     }
   },
+  methods: {
+    // 删除某一个轮播图
+    deleteImg(i) {
+      this.params.content.splice(i, 1)
+    },
+    edit() {
+      this.params.content = []
+      this.isEdit = true
+    },
+    handleUploadImage(params) {
+      this.handleUpload(params, 0)
+    },
+    handleUploadVideo(params) {
+      this.handleUpload(params, 1)
+    },
+    handleClick(tab, event) {
+      this.params.content = []
+    },
+    // 保存
+    save() {
+      editModule(this.params).then((res) => {
+        const { code, msg } = res
+        if (code === 200) {
+          this.$message.success("保存成功！")
+          this.getBg()
+          this.isEdit = false
+        } else {
+          this.$message.error(msg)
+        }
+      })
+    },
+    // 获取当前背景
+    getBg() {
+      backgroundModule().then((res) => {
+        const { code, msg, data } = res
+        if (code === 200) {
+          if (data.content) {
+            data.content = JSON.parse(data.content)
+            const result = data.content[0].split('.').pop()
+            if (result === 'mp4') {
+              this.isVideo = true
+              this.videoUrl = data.content[0]
+            } else {
+              this.isVideo = false
+            }
+          }
+          this.params = data
+        } else {
+          this.$message.error(msg)
+        }
+      })
+    },
+    // 背景上传
+    handleUpload(params, type) {
+      const file = params.file
+      if (type === 0) {
+        const imgType = ['image/png', 'image/jpg', 'image/jpeg']
+        if (imgType.indexOf(file.type) === -1) {
+          this.$message.warning('上传图片格式必须为: png或jpg格式')
+          return false
+        }
+      } else {
+        const videoType = ['video/mp4']
+        if (videoType.indexOf(file.type) === -1) {
+          this.$message.warning('上传视屏格式必须为: mp4格式')
+          return false
+        }
+      }
+      const formData = new FormData()
+      formData.append('file', file)
+      formData.append('dir', 'image/background')
+      this.fullLoading = true
+      uploadFile(formData)
+        .then((res) => {
+          try {
+            const { message, code, data } = res
+            if (code === 200) {
+              this.fullLoading = false
+              // 域名/storage/ 拼接
+              this.params.content.push('http://api.xysyszhd.dev.xmnk.cn/storage/' + data)
+            } else {
+              this.$message.error(message)
+              this.fullLoading = false
+            }
+          } catch (e) {
+            this.fullLoading = false
+            console.log(`上传失败: ${e}`)
+          }
+        })
+        .catch(() => {
+          this.thumbLoad = false;
+        });
+    },
+  },
   computed: {
-    ...mapGetters(['name'])
+    ...mapGetters(["name"]),
   },
   created() {
-
+    this.getBg();
   },
-  destroyed() {
-
-  },
-  methods: {
-  }
-}
+};
 </script>
 
 <style lang="scss" scoped>
-.home {
+.content {
   width: 100%;
   height: 100%;
-  background: rgb(240, 242, 245);
   position: relative;
 
-  .nav {
-    position: fixed;
-    top: 230px;
-    right: 5px;
-    padding: 10px 0;
-    text-align: center;
-    background: #fff;
-    z-index: 9999;
-    box-shadow: 0 0 9px 3px #ddd;
-    border-radius: 8px;
-
-    div {
-      width: 100%;
-      height: 40px;
-      line-height: 40px;
-      padding: 0 10px;
-      cursor: pointer;
-    }
-
-    .active {
-      background: #f2f2f2;
-    }
-  }
-
-  .table_con {
-    height: 580px;
-  }
-
-  .home_data {
-    width: 95%;
-    margin: 0 auto;
-
-    .el-row {
-      .el-col {
-        border-radius: 4px;
-
-        .grid-content {
-          margin-top: 20px;
-          background: #fff;
-          border-radius: 4px;
-          min-height: 36px;
-          font-weight: bold;
-          padding: 0 15px;
-          display: flex;
-          justify-content: space-between;
-          align-items: center;
-
-          .name {
-            color: rgba(0, 0, 0, 0.45);
-          }
-
-          .num {
-            margin-top: 15px;
-            font-size: 22px;
-          }
-
-          .custom-class {
-            width: 135px;
-            height: 135px;
-          }
-        }
-      }
-    }
-  }
-
-  .echarts {
-    .el-row {
-      background: #fff;
-      width: 95%;
-      margin: 20px auto 0;
-      padding: 15px;
-      border-radius: 4px;
-
-      &:last-child {
-        margin-bottom: 0px;
-      }
-    }
+  .img_item {
+    width: 320px;
+    height: 180px;
+    margin-right: 24px;
   }
 }
 </style>