Merge branch 'master' of http://git.ycjcjy.com/zhiyuxing/pc-admin

src/views/carouselFigure/edit.vue

@@ -0,0 +1,420 @@
+<template>
+    <div class="edit-carousel">
+      <el-form ref="form" :model="building" label-width="180px">
+        <el-form-item label="所属项目：">
+          <el-select v-model="buildingProperty" multiple placeholder="请选择">
+            <el-option v-for="(t,i) in propertyType" :key="i" :label="t.name" :value="t.id"></el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="主图：">
+          <el-upload
+            :action="upFileUrl"
+            name='file'
+            list-type="picture-card"
+            :headers="uploadHeaders"
+            :file-list="imgList"
+            :show-file-list="true"
+            :before-upload="beforeImgUpload"
+            :on-success="handleAvatarSuccess"
+            :on-remove="handleRemove">
+            <i class="el-icon-plus"></i>
+          </el-upload>
+          <el-dialog :visible.sync="dialogVisible">
+            <img width="100%" :src="dialogImageUrl" alt="">
+          </el-dialog>
+        </el-form-item>
+        <el-form-item label="标题：">
+          <el-input v-model="building.tel"></el-input>
+        </el-form-item>
+        <el-form-item label="发布位置：">
+          <el-select v-model="buildingProperty" multiple placeholder="请选择">
+            <el-option v-for="(t,i) in propertyType" :key="i" :label="t.name" :value="t.id"></el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="类型：">
+          <el-select v-model="buildingProperty" multiple placeholder="请选择">
+            <el-option v-for="(t,i) in propertyType" :key="i" :label="t.name" :value="t.id"></el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="发布内容：">
+          <div id="websiteEditorElem" style="height: 400px"></div>
+        </el-form-item>
+        <el-form-item label="发布内容：" class="publish">
+          <p>活动名称展示处 <span class="choose">请选择</span></p>
+        </el-form-item>
+        <el-form-item label="状态：">
+          <el-select v-model="buildingProperty" multiple placeholder="请选择">
+            <el-option v-for="(t,i) in propertyType" :key="i" :label="t.name" :value="t.id"></el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item>
+          <el-button type="primary" @click="onSubmit">保存</el-button>
+          <el-button @click="onCancel">取消</el-button>
+        </el-form-item>
+      </el-form>
+    </div>    
+</template>
+
+<script>
+import { createNamespacedHelpers } from "vuex";
+import apis from "../../config/api";
+import { mapState } from "vuex";
+import E from "wangeditor";
+
+const {
+  mapState: mapBuildingState,
+  mapActions: mapBuildingActions,
+  mapMutations: mapBuildingMutations
+} = createNamespacedHelpers("building");
+
+const { mapActions: mapApartmentActions } = createNamespacedHelpers(
+  "apartment"
+);
+
+const { mapActions: mapImgActions } = createNamespacedHelpers("img");
+
+export default {
+  data() {
+    var _self = this;
+    return {
+      upFileUrl: apis.file.upload.url,
+      commPrefix: "",
+      imgurl: "",
+      loadingZm: false,
+      activeName: "detail",
+      dialogImageUrl: "",
+      dialogVisible: false,
+      dialogApartImageUrl: "",
+      dialogApartVisible: false,
+      showHx: false,
+      imgList: [],
+      tags: [],
+      buildingProperty: [],
+      aparments: [],
+      aparmentInfo: {},
+      aparmentImg: [],
+      saleType: [
+        {
+          id: 1,
+          name: "待定"
+        },
+        {
+          id: 2,
+          name: "售罄"
+        },
+        {
+          id: 3,
+          name: "在售"
+        }
+      ]
+    };
+  },
+  computed: {
+    ...mapBuildingState({
+      detail: x => x.detail
+    }),
+    ...mapState({
+      dicts: x => x.dicts
+    }),
+    building: {
+      get() {
+        return this.detail;
+      },
+      set(val) {
+        return this.updateDetail(val);
+      }
+    },
+    propertyType() {
+      return (this.dicts || []).filter(x => x.type === "propertyType");
+    },
+    uploadHeaders() {
+      const token = localStorage.getItem("x-token") || "";
+      return {
+        Authorization: `Bearer ${token}`
+      };
+    }
+  },
+  methods: {
+    ...mapBuildingMutations(["updateDetail"]),
+    ...mapBuildingActions(["getDetail", "addBuilding", "editBuilding"]),
+    ...mapApartmentActions([
+      "getApartments",
+      "getApartmentDetail",
+      "addApartment",
+      "editApartment",
+      "deleteApartment"
+    ]),
+    ...mapImgActions(["uploadImg"]),
+    getSaleTypeName(id) {
+      return (this.saleType.filter(x => x.id == id)[0] || {}).name;
+    },
+    onCancel() {
+      this.$router.push({ name: "buildinglist" });
+    },
+    handleRemove(file, fileList) {
+      this.imgList = fileList;
+    },
+    handleAparmentRemove(file, fileList) {
+      this.aparmentImg = fileList;
+    },
+
+    beforeImgUpload(file) {
+      if (file.type !== "image/jpeg" && file.type !== "image/png") {
+        this.$message.error("上传图片只能是 JPG 或 PNG 格式!");
+        return false;
+      }
+      // if (file.size / 1024 > 300) {
+      //   this.$message.error('图片大小不允许超过300k!')
+      //   return false
+      // }
+      this.loading = this.$loading({
+        lock: true,
+        text: "上传中...",
+        spinner: "el-icon-loading",
+        background: "rgba(0, 0, 0, 0.7)"
+      });
+
+      return true;
+    },
+    handleAvatarSuccess(res) {
+      this.imgList = [
+        ...this.imgList,
+        {
+          url: res.data
+        }
+      ];
+      this.loading.close();
+    },
+    handleMapImgSuccess(res) {
+      this.building = { ...this.building, mapImg: res.data };
+      this.loading.close();
+    },
+    handlePosterSuccess(res) {
+      this.building = { ...this.building, poster: res.data };
+      this.loading.close();
+    },
+    handleAparmentSuccess(res) {
+      this.aparmentImg = [
+        ...this.aparmentImg,
+        {
+          url: res.data
+        }
+      ];
+      this.loading.close();
+    },
+    onSubmit() {
+      const imgs = this.imgList.map((x, i) => {
+        return {
+          imgType: "banner",
+          url: x.url,
+          orderNo: i + 1
+        };
+      });
+      const tag = this.tags.map(x => {
+        return {
+          tagName: x
+        };
+      });
+      const building = {
+        ...this.building,
+        img: imgs,
+        propertyType: this.buildingProperty.join(","),
+        tag
+      };
+      if (!building.buildingId) {
+        // 新增
+        this.addBuilding({
+          onSuccess: this.onCancel,
+          detail: JSON.stringify(building)
+        });
+      } else {
+        // 修改
+        this.editBuilding({
+          onSuccess: this.onCancel,
+          detail: JSON.stringify(building)
+        });
+      }
+    },
+    FormatDate(date) {
+      return (date || "").split("T")[0] === "0001-01-01"
+        ? ""
+        : (date || "").split("T")[0];
+    },
+    saveAparment() {
+      const imgs = this.aparmentImg.map((x, i) => {
+        return {
+          imgType: "aparment",
+          url: x.url,
+          orderNo: i + 1
+        };
+      });
+      if (!this.aparmentInfo.apartmentId) {
+        this.addApartment(
+          JSON.stringify({
+            ...this.aparmentInfo,
+            img: imgs
+          })
+        ).then(() => {
+          this.getAparmentList();
+          this.showHx = false;
+        });
+      } else {
+        this.editApartment(
+          JSON.stringify({
+            ...this.aparmentInfo,
+            img: imgs
+          })
+        ).then(() => {
+          this.getAparmentList();
+          this.showHx = false;
+        });
+      }
+    },
+    addHx() {
+      this.aparmentImg = [];
+      this.aparmentInfo = { buildingId: this.building.buildingId };
+      this.showHx = true;
+    },
+    getAparmentList() {
+      this.getApartments({ buildingId: this.$route.query.id }).then(data => {
+        this.aparments = data;
+      });
+    },
+    handleEdit(row) {
+      this.aparmentImg = [];
+      this.getApartmentDetail({
+        id: row.apartmentId
+      }).then(data => {
+        console.log("...", data);
+        this.aparmentImg = data.buildingImgList.map(x => {
+          return {
+            name: x.imgId,
+            url: x.url
+          };
+        });
+        this.aparmentInfo = data;
+        this.showHx = true;
+      });
+    },
+    handleDel(row) {
+      this.$confirm("确认删除此数据?", "提示", {
+        confirmButtonText: "确定",
+        cancelButtonText: "取消",
+        type: "warning"
+      }).then(() => {
+        if (this.building.status === 1) {
+          this.$message.error("当前楼盘处于发布状态，不允许删除！");
+          return false;
+        }
+        this.deleteApartment({
+          id: row.apartmentId
+        }).then(() => {
+          this.getAparmentList();
+        });
+      });
+    }
+  },
+  mounted() {
+    const _that = this;
+    const phoneEditor = new E("#websiteEditorElem");
+    phoneEditor.customConfig.onchange = function(html) {
+      _that.building = { ..._that.building, remark: html };
+    };
+    phoneEditor.customConfig.customUploadImg = function(files, insert) {
+      _that.uploadImg(files[0]).then(data => {
+        insert(data[0]);
+      });
+    };
+    phoneEditor.customConfig.menus = [
+      "head", // 标题
+      "bold", // 粗体
+      "fontSize", // 字号
+      "fontName", // 字体
+      "italic", // 斜体
+      "underline", // 下划线
+      "strikeThrough", // 删除线
+      "foreColor", // 文字颜色
+      "backColor", // 背景颜色
+      "justify", // 对齐方式
+      "image" // 插入图片
+    ];
+    phoneEditor.create();
+    if ((this.$route.query.id || "") !== "") {
+      this.getAparmentList();
+      window.console.log(this.getDetail);
+      this.getDetail({ id: this.$route.query.id }).then(data => {
+        this.buildingProperty = data.propertyType.split(",");
+        phoneEditor.txt.html(data.remark);
+        this.imgList = data.buildingImg.map(x => {
+          return {
+            name: x.imgId,
+            url: x.url
+          };
+        });
+        this.tags = data.buildingTag.map(x => x.tagName);
+      });
+    } else {
+      phoneEditor.txt.html("");
+    }
+  }
+};
+</script>
+
+<style lang="scss">
+.header {
+  width: 50px;
+  height: 50px;
+  img {
+    width: 100%;
+    height: 100%;
+  }
+}
+.avatar-uploader .el-upload {
+  border: 1px dashed #d9d9d9;
+  border-radius: 6px;
+  cursor: pointer;
+  position: relative;
+  overflow: hidden;
+}
+.avatar-uploader .el-upload:hover {
+  border-color: #409eff;
+}
+.avatar-uploader-icon {
+  font-size: 28px;
+  color: #8c939d;
+  width: 178px;
+  height: 178px;
+  line-height: 178px;
+  text-align: center;
+}
+.avatar {
+  width: 178px;
+  height: 178px;
+  display: block;
+}
+.edit-carousel {
+  .el-select {
+    max-width: 300px !important;
+  }
+  .el-input {
+    max-width: 400px;
+  }
+  .publish{
+    p{
+      margin: 0;
+      font-size: 15.4px;
+      .choose{
+        color: blue;
+      }
+    }
+  }
+}
+
+.el-select-dropdown {
+  z-index: 10003 !important;
+}
+
+.el-date-picker {
+  z-index: 10002 !important;
+}
+</style>

src/views/carouselFigure/list.vue

@@ -0,0 +1,232 @@
+<template>
+  <div>
+    <div class="system-table-search">
+      <div class="flex-h">
+        <div class="flex-item flex-h">
+          <el-button size="mini" type="success" @click='addDynamic'>新增</el-button>
+        </div>
+      </div>
+      <div class="moreFilter"></div>
+    </div>
+    <el-table
+      :data="dynamics.list || []"
+      >
+      <el-table-column
+        type="index">
+        <template slot-scope="scope">
+          <span>{{ GetIndex(scope.$index) }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column
+        label="主图">
+        <template slot-scope="scope">
+          <div class="header">
+            <img :src="scope.row.imgUrl" alt="" />
+          </div>
+        </template>
+      </el-table-column>
+      <el-table-column
+        prop="title"
+        label="类型">
+      </el-table-column>
+      <el-table-column
+        prop="desc"
+        label="发布位置2">
+      </el-table-column>
+      <el-table-column
+        prop="createDate"
+        label="发布时间">
+      </el-table-column>
+      <el-table-column
+        label="状态"
+        >
+        <template slot-scope="scope">
+          <span>{{scope.row.status == 1 ? '启用' : '停用'}}</span>
+        </template>
+      </el-table-column>
+      <el-table-column
+        fixed="right"
+        label="操作"
+        width="180">
+        <template slot-scope="scope">
+          <el-button type="text" @click="handleEdit(scope.row)" v-if="scope.row.status === 0" size="small">编辑</el-button>
+          <el-button type="text" @click="handlePulic(scope.row)" size="small" v-if="scope.row.status === 0">启用</el-button>
+          <el-button type="text" @click="handleUnPulic(scope.row)" size="small" v-if="scope.row.status === 1">禁用</el-button>
+
+        </template>
+      </el-table-column>
+    </el-table>
+    <el-pagination
+      small
+      style="margin-top:10px;"
+      layout="prev, pager, next"
+      :current-page.sync="currentPage"
+      :pageSize="pageSize"
+      :total="dynamics.total || 0"
+      @current-change="getList"
+    >
+    </el-pagination>
+  </div>
+</template>
+
+<script>
+import { createNamespacedHelpers } from 'vuex';
+
+const {mapState: mapDynamicState, mapActions: mapDynamicActions} = createNamespacedHelpers('dynamic')
+const {mapState: mapBuildingState, mapActions: mapBuildingActions} = createNamespacedHelpers('building')
+
+export default {
+  data() {
+    return {
+      pageSize: 20,
+      currentPage: 1,
+      name: '',
+      buildingId: '',
+    }
+  },
+  computed: {
+    ...mapDynamicState({
+      dynamics: x => x.dynamics
+    }),
+    ...mapBuildingState({
+      buildings: x => x.buildings
+    })
+  },
+  methods: {
+    ...mapDynamicActions([
+      'getDynamics',
+      'setDetailNull',
+      'deleteDynamics',
+      'publicDynamic',
+      'cancelDynamic'
+    ]),
+    ...mapBuildingActions([
+      'getBuildings',
+    ]),
+    GetIndex (inx) {
+      return (this.currentPage - 1) * this.pageSize + inx + 1
+    },
+    FormatDate (date) {
+      if (date) {
+        return dayjs(date).formate('yyyy-MM-DD HH:mm:ss')
+      } else {
+        return ''
+      }
+    },
+    getList () {
+      this.getDynamics({
+        pageNum: this.currentPage,
+        pageSize: this.pageSize,
+        name: this.name,
+        buildingId: this.buildingId
+      })
+    },
+    getBuildingName (id) {
+      return ((this.buildings.list || []).filter(x => x.buildingId === id)[0] || {}).buildingName || ''
+    },
+    search () {
+      this.currentPage = 1
+      this.getList()
+    },
+    handleEdit (row) {
+      this.setDetailNull()
+      this.$router.push({name: 'editCarousel', query: {id: row.dynamicId}})
+    },
+    handlePulic (row) {
+      this.$confirm('确认发布此数据?', '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(() => {
+        this.publicDynamic({
+          id: row.dynamicId
+        }).then(() => {
+          this.getList()
+        })
+      })
+    },
+    handleUnPulic (row) {
+      this.$confirm('确认取消发布此数据?', '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(() => {
+        this.cancelDynamic({
+          id: row.dynamicId}).then(() => {
+          this.getList()
+        })
+      })
+    },
+    handleDel (row) {
+      this.$confirm('确认删除此数据?', '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(() => {
+        if (row.status === 1) {
+          this.$message.error('当前活动处于发布状态，不允许删除！')
+          return false
+        }
+        this.deleteDynamics({
+          id: row.dynamicId
+        }).then(() => {
+          this.getList()
+        })
+      })
+    },
+    addDynamic () {
+      this.setDetailNull()
+      this.$router.push({name: 'editCarousel'})
+    }
+  },
+  created () {
+    this.getBuildings({
+      pageNum: 1,
+      pageSize: 100,
+    }).then(() => {
+      this.getList()
+    })
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.header{
+  width: 50px;
+  height: 50px;
+  img{
+    width: 100%;
+    height: 100%;
+  }
+}
+
+.system-table-search{
+  width: calc(100% - 40px);
+  margin: 20px auto 0;
+}
+
+.system-table-search li{
+  margin-right: 20px;
+}
+
+.system-table-search ul{
+  font-size: 0;
+  white-space: nowrap;
+}
+
+.system-table-search ul>li{
+  display: inline-block;
+}
+
+.flex-h {
+  display: flex;
+  display: -webkit-flex;
+}
+
+.flex-item {
+  flex: 1;
+  -webkit-flex: 1;
+  position: relative;
+  overflow: hidden;
+}
+</style>

src/views/index.js

@@ -131,6 +131,35 @@ const pages = [
           menuShow: true,
           title: '客户列表',
         },
+      },
+    ]
+  },
+  {
+    path: 'carouselFigure',
+    name: 'carouselFigure',
+    component: () => import('./index.vue'),
+    meta: {
+      menuShow: true,
+      title: '轮播图管理',
+    },
+    children: [
+      {
+        path: 'carouselList',
+        name: 'carouselList',
+        component: () => import('./carouselFigure/list.vue'),
+        meta: {
+          menuShow: true,
+          title: '轮播图列表',
+        },
+      },
+      {
+        path: 'editCarousel',
+        name: 'editCarousel',
+        component: () => import('./carouselFigure/edit.vue'),
+        meta: {
+          menuShow: false,
+          title: '编辑轮播图',
+        },
       }
     ]
   },

src/views/project/edit.vue

@@ -68,17 +68,22 @@
 
   <el-tab-pane label="交通及周边设施">
     <el-form ref="form" :model="building" label-width="160px">
-     <el-form-item label="项目地图图片">
+     <el-form-item label="项目地图图片：">
         <el-upload
-          class="avatar-uploader"
-          :action="upFileUrl"
-          name='file'
-          :show-file-list="false"
-          :before-upload="beforeImgUpload"
-          :on-success="handleAvatarSuccess">
-          <img v-if="building.imgUrl" :src="building.imgUrl" class="avatar">
-          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
-        </el-upload>
+            :action="upFileUrl"
+            name='file'
+            list-type="picture-card"
+            :headers="uploadHeaders"
+            :file-list="imgList1"
+            :show-file-list="true"
+            :before-upload="beforeImgUpload"
+            :on-success="handleAvatarSuccess1"
+            :on-remove="handleRemove">
+            <i class="el-icon-plus"></i>
+          </el-upload>
+          <el-dialog :visible.sync="dialogVisible">
+            <img width="100%" :src="dialogImageUrl1" alt="">
+          </el-dialog>
       </el-form-item>
       <el-form-item label="项目地址：">
         <el-input v-model="building.desc" ></el-input>
@@ -109,18 +114,24 @@
   </el-tab-pane>
   <el-tab-pane label="户型相册">
     <el-form ref="form" :model="building" label-width="150px">
+      <p class="title">户型:</p>
       <div v-for="(item,index) in 2" :key="index" class="apartment-box">
-        <el-form-item label="户型：">
+        <el-form-item label="户型图：">
           <el-upload
-            class="avatar-uploader"
             :action="upFileUrl"
             name='file'
-            :show-file-list="false"
+            list-type="picture-card"
+            :headers="uploadHeaders"
+            :file-list="imgList2"
+            :show-file-list="true"
             :before-upload="beforeImgUpload"
-            :on-success="handleAvatarSuccess">
-            <img v-if="building.imgUrl" :src="building.imgUrl" class="avatar">
-            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
+            :on-success="handleAvatarSuccess2"
+            :on-remove="handleRemove">
+            <i class="el-icon-plus"></i>
           </el-upload>
+          <el-dialog :visible.sync="dialogVisible">
+            <img width="100%" :src="dialogImageUrl2" alt="">
+          </el-dialog>
         </el-form-item>
         <el-form-item label="标题：">
           <el-input v-model="building.desc" ></el-input>
@@ -147,23 +158,62 @@
     <el-form-item>
       <el-button type="primary" @click="onSubmit">添加户型</el-button>
     </el-form-item>
-    <el-form-item label="项目主图">
+    <p class="title">项目相册:</p>
+      <el-form-item label="效果图">
           <el-upload
             :action="upFileUrl"
             name='file'
             list-type="picture-card"
             :headers="uploadHeaders"
-            :file-list="imgList"
+            :file-list="imgList3"
             :show-file-list="true"
             :before-upload="beforeImgUpload"
-            :on-success="handleAvatarSuccess"
+            :on-success="handleAvatarSuccess3"
             :on-remove="handleRemove">
             <i class="el-icon-plus"></i>
           </el-upload>
           <el-dialog :visible.sync="dialogVisible">
-            <img width="100%" :src="dialogImageUrl" alt="">
+            <img width="100%" :src="dialogImageUrl3" alt="">
           </el-dialog>
-        </el-form-item>
+      </el-form-item>
+      <el-form-item label="实景图">
+          <el-upload
+            :action="upFileUrl"
+            name='file'
+            list-type="picture-card"
+            :headers="uploadHeaders"
+            :file-list="imgList4"
+            :show-file-list="true"
+            :before-upload="beforeImgUpload"
+            :on-success="handleAvatarSuccess4"
+            :on-remove="handleRemove">
+            <i class="el-icon-plus"></i>
+          </el-upload>
+          <el-dialog :visible.sync="dialogVisible">
+            <img width="100%" :src="dialogImageUrl4" alt="">
+          </el-dialog>
+      </el-form-item>
+      <el-form-item label="样板间">
+          <el-upload
+            :action="upFileUrl"
+            name='file'
+            list-type="picture-card"
+            :headers="uploadHeaders"
+            :file-list="imgList5"
+            :show-file-list="true"
+            :before-upload="beforeImgUpload"
+            :on-success="handleAvatarSuccess5"
+            :on-remove="handleRemove">
+            <i class="el-icon-plus"></i>
+          </el-upload>
+          <el-dialog :visible.sync="dialogVisible">
+            <img width="100%" :src="dialogImageUrl5" alt="">
+          </el-dialog>
+      </el-form-item>
+      <el-form-item>
+        <el-button type="primary" @click="onSubmit">保存</el-button>
+        <el-button @click="onCancel">取消</el-button>
+      </el-form-item>
     </el-form>
   </el-tab-pane>
 
@@ -197,8 +247,18 @@ export default {
       upFileUrl: apis.file.upload.url,
       radio: "1",
       showHx: false,
+      dialogVisible: false,
+      dialogImageUrl1: "",
+      dialogImageUrl2: "",
+      dialogImageUrl3: "",
+      dialogImageUrl4: "",
+      dialogImageUrl5: "",
       markers: [],
-      imgList: [],
+      imgList1: [],
+      imgList2: [],
+      imgList3: [],
+      imgList4: [],
+      imgList5: [],
       tags: [],
       buildingProperty: [],
       aparments: [],
@@ -324,9 +384,45 @@ export default {
 
       return true;
     },
-    handleAvatarSuccess(res) {
-      this.imgList = [
-        ...this.imgList,
+    handleAvatarSuccess1(res) {
+      this.imgList1 = [
+        ...this.imgList1,
+        {
+          url: res.data
+        }
+      ];
+      this.loading.close();
+    },
+    handleAvatarSuccess2(res) {
+      this.imgList2 = [
+        ...this.imgList2,
+        {
+          url: res.data
+        }
+      ];
+      this.loading.close();
+    },
+    handleAvatarSuccess3(res) {
+      this.imgList3 = [
+        ...this.imgList3,
+        {
+          url: res.data
+        }
+      ];
+      this.loading.close();
+    },
+    handleAvatarSuccess4(res) {
+      this.imgList4 = [
+        ...this.imgList4,
+        {
+          url: res.data
+        }
+      ];
+      this.loading.close();
+    },
+    handleAvatarSuccess5(res) {
+      this.imgList5 = [
+        ...this.imgList5,
         {
           url: res.data
         }
@@ -561,9 +657,15 @@ export default {
   .el-input {
     max-width: 300px;
   }
-  .el-select{
-    max-width: 250px!important;
+  .el-select {
+    max-width: 250px !important;
     margin-right: 20px;
   }
 }
+.title{
+  font-size: 20px;
+  font-weight: 600;
+  color: #000;
+  margin: 8px 20px;
+}
 </style>