关于我们-图片

src/views/webSiteManagement/aboutUs/index.vue

@@ -71,6 +71,76 @@
                 <kind-editor id="editor_id" :content.sync="form.intro" :afterChange="afterChange()" :loadStyleMode="false"@on-content-change="onContentChange"></kind-editor>
             </el-col>
         </el-form-item>
+        <el-form-item label="图片">
+          <div class="flex-aic">
+            <el-upload
+              class="avatar-uploader1"
+              action="https://jsonplaceholder.typicode.com/posts/"
+              list-type="picture-card"
+              :show-file-list="false"
+              :action="BASE_API+'/api/universal/file/app/unauth/admin/upload'"
+              :on-success="handleSuccess1">
+              <img v-if="form.image1" :src="form.image1" style="width:475px;height: 370px;object-fit: cover;">
+              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
+            </el-upload>
+            <div class="flex-fdc">
+              <div class="flex-aic">
+                <el-upload
+                  class="avatar-uploader2"
+                  action="https://jsonplaceholder.typicode.com/posts/"
+                  list-type="picture-card"
+                  :show-file-list="false"
+                  :action="BASE_API+'/api/universal/file/app/unauth/admin/upload'"
+                  :on-success="handleSuccess2">
+                  <img v-if="form.image2" :src="form.image2" class="avatar">
+                  <i v-else class="el-icon-plus avatar-uploader-icon"></i>
+                </el-upload>
+                <el-upload
+                  class="avatar-uploader2"
+                  action="https://jsonplaceholder.typicode.com/posts/"
+                  list-type="picture-card"
+                  :show-file-list="false"
+                  :action="BASE_API+'/api/universal/file/app/unauth/admin/upload'"
+                  :on-success="handleSuccess3">
+                  <img v-if="form.image3" :src="form.image3" class="avatar">
+                  <i v-else class="el-icon-plus avatar-uploader-icon"></i>
+                </el-upload>
+                <el-upload
+                  class="avatar-uploader2"
+                  action="https://jsonplaceholder.typicode.com/posts/"
+                  list-type="picture-card"
+                  :show-file-list="false"
+                  :action="BASE_API+'/api/universal/file/app/unauth/admin/upload'"
+                  :on-success="handleSuccess4">
+                  <img v-if="form.image4" :src="form.image4" class="avatar">
+                  <i v-else class="el-icon-plus avatar-uploader-icon"></i>
+                </el-upload>
+              </div>
+              <div class="flex-aic">
+                <el-upload
+                  class="avatar-uploader3"
+                  action="https://jsonplaceholder.typicode.com/posts/"
+                  list-type="picture-card"
+                  :show-file-list="false"
+                  :action="BASE_API+'/api/universal/file/app/unauth/admin/upload'"
+                  :on-success="handleSuccess5">
+                  <img v-if="form.image5" :src="form.image5" class="avatar">
+                  <i v-else class="el-icon-plus avatar-uploader-icon"></i>
+                </el-upload>
+                <el-upload
+                  class="avatar-uploader4"
+                  action="https://jsonplaceholder.typicode.com/posts/"
+                  list-type="picture-card"
+                  :show-file-list="false"
+                  :action="BASE_API+'/api/universal/file/app/unauth/admin/upload'"
+                  :on-success="handleSuccess6">
+                  <img v-if="form.image6" :src="form.image6" class="avatar">
+                  <i v-else class="el-icon-plus avatar-uploader-icon"></i>
+                </el-upload>
+              </div>
+            </div>
+          </div>
+        </el-form-item>
         <el-form-item>
           <el-button>取消</el-button>
           <el-button type="primary" @click="onSubmit">确定</el-button>
@@ -80,14 +150,11 @@
   </div>
 </template>
 
-<script>
-import {
-  getCompanyInfo,
-  setCompanyInfo,
-} from "@/api/website/aboutUs/index";
+<script type="javascript">
 import KindEditor from "@/components/Kindeditor";
 import loadBMap from '@/utils/loadBMap.js'
 import { addUpdate, companyInfo } from "api/website/aboutUs"
+import {objDeepCopy} from "../../../utils";
 export default {
   name: "AboutUs",
   components: {
@@ -97,6 +164,8 @@ export default {
     return {
       zoom: 15,　 //地图展示级别
       showMap: false,
+      BASE_API: process.env.BASE_API,
+      fileList2: [],//图片
       form: {
         id: undefined,
         phone: undefined, // 联系电话
@@ -104,6 +173,13 @@ export default {
         address: undefined, // 地址
         lat: 23.12005,
         lng: 113.30765,
+        image1: '',// 图片1
+        image2: '',// 图片2
+        image3: '',// 图片3
+        image4: '',// 图片4
+        image5: '',// 图片5
+        image6: '',// 图片6
+        bottomImgArr: [], // 关于我们图片
         intro: undefined // 简介
       },
       rule: {
@@ -138,6 +214,8 @@ export default {
           trigger: "blur"
         },
       },
+      dialogImageUrl: '',
+      dialogVisible: false,
       map: '', //地图实例
       mk: '' //Marker实例
     };
@@ -235,6 +313,42 @@ export default {
     },
     afterChange () {
 
+    },
+    /**
+     * banner上传
+     * */
+    handleSuccess1(res, file){
+      this.form.image1 = res.data;
+    },
+    /**
+     * banner上传
+     * */
+    handleSuccess2(res, file){
+      this.form.image2 = res.data;
+    },
+    /**
+     * banner上传
+     * */
+    handleSuccess3(res, file){
+      this.form.image3 = res.data;
+    },
+    /**
+     * banner上传
+     * */
+    handleSuccess4(res, file){
+      this.form.image4 = res.data;
+    },
+    /**
+     * banner上传
+     * */
+    handleSuccess5(res, file){
+      this.form.image5 = res.data;
+    },
+    /**
+     * banner上传
+     * */
+    handleSuccess6(res, file){
+      this.form.image6 = res.data;
     },
     /**
      * 关于我们-信息
@@ -249,7 +363,22 @@ export default {
             address: res.data.address, // 地址
             lng: parseFloat(res.data.lng), // 经纬度
             lat: parseFloat(res.data.lat), // 经纬度
-            intro: res.data.intro // 简介
+            intro: res.data.intro, // 简介
+            bottomImgArr: res.data.bottomImgs?res.data.bottomImgs.split(','): [],
+            image1: '',// 图片1
+            image2: '',// 图片2
+            image3: '',// 图片3
+            image4: '',// 图片4
+            image5: '',// 图片5
+            image6: '' // 图片6
+          }
+          if(this.form.bottomImgArr.length>=6){
+            this.form.image1 = this.form.bottomImgArr[0]
+            this.form.image2 = this.form.bottomImgArr[1]
+            this.form.image3 = this.form.bottomImgArr[2]
+            this.form.image4 = this.form.bottomImgArr[3]
+            this.form.image5 = this.form.bottomImgArr[4]
+            this.form.image6 = this.form.bottomImgArr[5]
           }
           this.showMap = true
         } else {
@@ -266,9 +395,22 @@ export default {
      * 关于我们-数据保存
      */
     onSubmit() {
+      let params = objDeepCopy(this.form)
+      let bottomImgArr = []
+      bottomImgArr.push(this.form.image1)
+      bottomImgArr.push(this.form.image2)
+      bottomImgArr.push(this.form.image3)
+      bottomImgArr.push(this.form.image4)
+      bottomImgArr.push(this.form.image5)
+      bottomImgArr.push(this.form.image6)
+      if(bottomImgArr.length != 6){
+        this.$message.warning('请上传6张图片！')
+        return
+      }
+      params.bottomImgs = bottomImgArr.join(',')
       this.$refs["form"].validate(valid => {
         if (valid) {
-          addUpdate(this.form).then((res) => {
+          addUpdate(params).then((res) => {
             if(res.status == 200){
               this.$notify({
                 title: "成功",
@@ -297,8 +439,6 @@ export default {
 
 <style rel="stylesheet/scss" lang="scss" scoped>
 #AboutUs {
-  margin: 0 1% 0 1%;
-  width: 98%;
   height: auto;
   .top {
     width: 100%;
@@ -323,8 +463,33 @@ export default {
   .content {
     margin: 1% 1% 0 1%;
     width: 98%;
+    padding-bottom: 10px;
     height: calc(99% - 68px);
   }
+
+  .avatar-uploader1 /deep/.el-upload--picture-card{
+    width: 475px;
+    height: 370px;
+    line-height: 370px;
+    margin-right: 13px;
+  }
+  .avatar-uploader2 /deep/.el-upload--picture-card{
+    width: 229px;
+    height: 165px;
+    line-height: 165px;
+    margin-bottom: 12px;
+    margin-right: 12px;
+  }
+  .avatar-uploader3 /deep/.el-upload--picture-card{
+    width: 400px;
+    height: 193px;
+    line-height: 193px;margin-right: 12px;
+  }
+  .avatar-uploader4 /deep/.el-upload--picture-card{
+    width: 299px;
+    height: 193px;
+    line-height: 193px;margin-right: 12px;
+  }
   #map-container{
     width: 45%;
     height: 250px;