liujq 4 years ago
parent
commit
03f4e9eab2

+ 28 - 30
src/components/Common/BaseForm.vue

@@ -192,8 +192,14 @@
           :on-change='cuImgOpen'
           :on-success="uploadSuccess"
         >
-          <img v-if="baseForm[item.key]" :src="baseForm[item.key]" class="img" @click="focusHandle(item.key)">
-          <i v-else class="el-icon-plus icon" @click="focusHandle(item.key)" />
+          <template v-if="item.options && item.options.SY === 1">
+            <img v-if="baseForm[item.key]" :src="baseForm[item.key].indexOf('_adm0') > -1 ? baseForm[item.key] : baseForm[item.key] + '_adm0'" class="img" @click="focusHandle(item.key)">
+            <i v-else class="el-icon-plus icon" @click="focusHandle(item.key)" />
+          </template>
+          <template v-else>
+            <img v-if="baseForm[item.key]" :src="baseForm[item.key]" class="img" @click="focusHandle(item.key)">
+            <i v-else class="el-icon-plus icon" @click="focusHandle(item.key)" />
+          </template>
         </el-upload>
       </el-form-item>
       <el-form-item
@@ -414,7 +420,6 @@ export default {
       remoteOptionsPrev: {},
       isCIShow: false,
       uploadObj: {},
-      isCanUpload: false,
     }
   },
   watch: {
@@ -593,35 +598,28 @@ export default {
       }
     },
     cuImgOpen(file, fileList) {
-      // if (!this.isCanUpload) {
-        const isLt10M = file.size / 1024 / 1024 < 10
-        if (!isLt10M) {
-          this.$msgw('上传文件大小不能超过 10MB!')
-          return false
+      const isLt10M = file.size / 1024 / 1024 < 10
+      if (!isLt10M) {
+        this.$msgw('上传文件大小不能超过 10MB!')
+        return false
+      }
+      this.$nextTick(() => {
+        let cObj = this.curData[this.curFormIndex]
+        console.log(this.curFormIndex)
+        console.log(cObj)
+        this.uploadObj = {
+          url: URL.createObjectURL(file.raw),
+          file,
+          options: cObj.options,
         }
-        // this.fileinfo = file
-        this.$nextTick(() => {
-          this.uploadObj = {url: URL.createObjectURL(file.raw)}
-          this.isCIShow = true
-          // this.isCanUpload = true
-        })
-      // }
+        this.isCIShow = true
+      })
     },
-    cuImgClose (obj) {
+    cuImgClose (url) {
       this.isCIShow = false
-      console.log(obj)
-      this.baseForm[this.curFormKey] = obj
-      // console.log(this.curFormKey)
-      // if (obj && obj.url && this.curFormKey) {
-      //   console.log(this.$refs.cui)
-      //   window.setTimeout(() => {
-      //     // this.isCIShow = false
-      //     this.$refs.cui[0].submit()
-      //   }, 1000)
-      //   // window.setTimeout(() => {
-      //   //   this.isCIShow = false
-      //   // }, 3000)
-      // }
+      if (url) {
+        this.baseForm[this.curFormKey] = url
+      }
     },
     remoteChange(val) {
       if (val) {
@@ -636,7 +634,7 @@ export default {
       //   lock: true,
       //   spinner: 'none',
       //   background: 'rgba(0, 0, 0, 0.7)'
-      // })
+      // })ss
       let curIndex = this.curFormIndex
       if (Number(curI) > -1) curIndex = curI
       this.formLoading = true

+ 18 - 5
src/components/Common/CropperImg.vue

@@ -20,6 +20,10 @@
             :img="option.img"
             :outputSize="option.size"
             :outputType="option.outputType"
+            :autoCropWidth="option.autoCropWidth"
+            :autoCropHeight="option.autoCropHeight"
+            :enlarge="option.enlarge"
+            :mode="option.mode"
             :info="true"
             :full="option.full"
             :canMove="option.canMove"
@@ -57,7 +61,7 @@ export default {
       option: {
         img: '', //裁剪图片的地址
         outputSize: 1, // 裁剪生成图片的质量
-        outputType: 'png', // 裁剪生成图片的格式
+        outputType: 'jpg', // 裁剪生成图片的格式
         full: false, // 是否输出原图比例的截图
         info: true, // 图片大小信息
         canScale: true, // 图片是否允许滚轮缩放
@@ -69,11 +73,11 @@ export default {
         fixed: false, // 是否开启截图框宽高固定比例
         canMoveBox: true, // 截图框能否拖动
         original: false, // 上传图片按照原始比例渲染
-        centerBox: false, // 截图框是否被限制在图片里面
-        height: true,
+        centerBox: true, // 截图框是否被限制在图片里面
+        // height: true,
         infoTrue: false, // true 为展示真实输出图片宽高 false 展示看到的截图框宽高
         enlarge: 2, // 图片根据截图框输出比例倍数
-        mode: 'cover', // 图片默认渲染方式
+        // mode: 'cover', // 图片默认渲染方式
         maxImgSize: 750 // 限制图片最大宽度和高度
       },
     }
@@ -82,6 +86,9 @@ export default {
     isShow: function(val) {
       if (val) {
         this.option.img = this.curObj.url
+        const options = this.curObj.options || {}
+        if (options.w) this.option.autoCropWidth = options.w
+        if (options.h) this.option.autoCropHeight = options.h
       }
     },
   },
@@ -92,9 +99,15 @@ export default {
           let newData = new FormData()
           newData.append('token', 'B4mtpOy9yz0c72Y2+FqmkzjrBb2tKqB8j2HHe9zwh9Y80BpvEj2FANMdq5yFCc+cvFSJM3V9m5bq')
           newData.append('upload', data, 'honglou.jpg')
+          const options = this.curObj.options || {}
+          const SY = options.SY
+          let apiUrl = process.env.VUE_APP_BASE_API + '/adm/upload/cloudpub'
+          if (SY === 1) {
+            apiUrl = process.env.VUE_APP_BASE_API + '/adm/upload/cloud'
+          }
           axios({
             method: 'post',
-            url: process.env.VUE_APP_BASE_API + '/adm/upload/cloudpub',
+            url: apiUrl,
             data: newData
           }).then(res => {
             const cData = res.data

+ 7 - 1
src/views/house/components/popup/OldEdit.vue

@@ -126,7 +126,13 @@ export default {
         { label: '所属楼盘', key: 'estate_id', class: 'c-3', type: 'selectRemote',
           remoteParams: { skey: 'estate_name', api: `house.admestatelist`, opKey: 'estate_name', opVal: 'id' },
         },
-        { label: '房源主图', key: 'pri_image', class: 'c-3', type: 'cuImg' }, 
+        { label: '房源主图', key: 'pri_image', class: 'c-3', type: 'cuImg',
+          options: {
+            w: 375,
+            h: 300,
+            SY: 1,
+          }
+        }, 
         { label: '房源简介', key: 'remarked', class: 'c-3s', type: 'textarea' },
         { label: '房源地址', key: 'address' },
       ]