t

src/views/school/components/popup/IndexEdit.vue

@@ -11,7 +11,25 @@
       custom-class="xl-dialog"
       center
     >
-      <base-form ref="ruleForm" class="lib-edit" :data="formData" :is-inline="false" label-width="110px" :insertSlotArr="[10]">
+      <base-form ref="ruleForm" class="lib-edit" :data="formData" :is-inline="false" label-width="110px" :insertSlotArr="[7, 10]">
+        <div slot="OI7" class="scoped-img-area">
+          <div class="sia-title">更多图片</div>
+          <div class="sia-op" v-for="(imgsrc,index) in imagesArr" :key="index">
+            <img class="img" :src="imgsrc + '_adm0'" alt="img" @click="openbigImg(imgsrc + '_adm0')">
+            <span class="close" @click="imgDel(index)"></span>
+          </div>
+          <el-upload
+            class="sia-img"
+            :action="`${domainUrl}/adm/upload/cloud`"
+            :data="{logic_type: 'estate', token}"
+            name="upload"
+            :show-file-list="false"
+            :on-success="roomAreaUploadSuccess"
+            :before-upload="roomAreaUploadBefore"
+            >
+            <i class="el-icon-plus icon" />
+          </el-upload>
+        </div>
         <div slot="OI10" class="scoped-other-form">
           <el-form-item label="点位坐标" class="scoped-item-two item">
             纬度N<el-input v-model="cObj.latitude" disabled />
@@ -26,20 +44,27 @@
       </base-form>
     </el-dialog>
     <handle-map :is-show="isShowMap" @close="closeMap" />
+    <popup-big-img :is-show="bigImgShow" :src="`${bigImgSrc}`" @close="closebigImg" />
   </div>
 </template>
 <script>
 import handleMap from '@/components/Common/Map'
+import bigImgPopup from '_m/bigImgPopup.js'
 export default {
   components: { handleMap },
-  mixins,
+  mixins: [...mixins, bigImgPopup],
   props: {
     isShow: Boolean,
     curObj: Object
   },
   inject: ['parentData'],
   data() {
+    let domainUrl = process.env.VUE_APP_BASE_API
+    const token = window.sessionStorage.getItem('fp_token')
     return {
+      imagesArr: [],
+      domainUrl,
+      token,
       formData: [],
       loading: true,
       cObj: {},
@@ -54,6 +79,7 @@ export default {
             this.$api.school.admschooldetail({id: this.curObj.id}).then(res => {
               let curData = res || {}
               this.cObj = curData || {}
+              if (curData.images && curData.images.length > 0) this.imagesArr = curData.images.split(',')
               this.getDef()
             })
           } else {
@@ -65,6 +91,28 @@ export default {
     },
   },
   methods: {
+    imgDel (index) {
+      this.imagesArr.splice(index, 1)
+      this.imagesArr = [...this.imagesArr]
+    },
+    roomAreaUploadSuccess(res, file) {
+      const data = res.data || {}
+      let urls = this.imagesArr || []
+      urls.push(`${data.url}`)
+      this.imagesArr = urls
+      this.imagesArr = [...this.imagesArr]
+    },
+    roomAreaUploadBefore(file) {
+      const isJPGPNG = file.type === 'image/jpeg' || file.type === 'image/png'
+      const isLt2M = file.size / 1024 / 1024 < 2
+      if (!isJPGPNG) {
+        this.$message.error('上传图片只能是 JPG PNG 格式!')
+      }
+      if (!isLt2M) {
+        this.$message.error('上传图片大小不能超过 2M!')
+      }
+      return isJPGPNG && isLt2M
+    },
     getDef (str) {
       let params = { ...this.cObj }
       if (str === 'school_type') {
@@ -131,6 +179,13 @@ export default {
             }, class: 'c-2' },
           { label: '学区范围图', key: 'district_img', type: 'upload', class: 'c-2' },
           { label: '学区范围', key: 'district',type: 'textarea' },
+          { label: '当前航拍key', key: 'vr_key', class: 'c-2'},
+          { label: '航拍背景图', key: 'vr_image', class: 'c-2', type: 'cuImg',
+            options: {
+              w: 375,
+              h: 250,
+            }
+          },
           { label: '对口楼盘', key: 'estate_dk_list', multiple: true, type: 'selectRemote',
             remoteParams: { skey: 'estate_name', api: `house.admestatelist`, opKey: 'estate_name', opVal: 'id' },
             remoteOptions: remoteOptionsHouse
@@ -168,6 +223,9 @@ export default {
             } else {
               newForm.estate_gh_list = ''
             }
+            if (this.imagesArr && this.imagesArr.length > 0) {
+              newForm.images = this.imagesArr.join(',')
+            }
             newForm.longitude = this.cObj.longitude
             newForm.latitude = this.cObj.latitude
             newForm.pri_image = this.IMdel(newForm.pri_image)
@@ -234,4 +292,72 @@ export default {
 .map-btn{
   height: 36px;
 }
+
+
+
+
+
+
+.scoped-img-area {
+  padding-left: 40px;
+  margin-bottom: 20px;
+  .sia-title {
+    font-size: 14px;
+    padding-bottom: 10px;
+    color: #666;
+    font-weight: bold;
+  }
+  .sia-op {
+    display: inline-block;
+    vertical-align: middle;
+    margin-right: 10px;
+    margin-bottom: 10px;
+    border: 1px solid #f2f2f2;
+    width: 80px;
+    height: 80px;
+    position: relative;
+    &:hover {
+      .img-big {
+        display: block;
+      }
+    }
+    .img {
+      width: 80px;
+      height: 80px;
+    }
+    .close {
+      position: absolute;
+      width: 20px;
+      height: 20px;
+      top: -10px;
+      right: -10px;
+      background: url(../../../../assets/icon_g_close.png) no-repeat;
+      background-size: 20px;
+      cursor: pointer;
+    }
+    .img-big {
+      position: absolute;
+      bottom: 0;
+      left: 0;
+      width: 400px;
+      height: auto;
+      display: none;
+      box-shadow: 10px 10px 10px #ccc;
+      z-index: 99;
+    }
+  }
+  .sia-img {
+    display: inline-block;
+    vertical-align: middle;
+    width: 80px;
+    height: 80px;
+    overflow: hidden;
+    border: 1px dashed #999;
+    margin-bottom: 10px;
+    .el-icon-plus {
+      color: #999;
+      padding: 30px;
+    }
+  }
+}
 </style>