t

package.json

@@ -24,6 +24,7 @@
     "path-to-regexp": "2.4.0",
     "vue": "2.6.10",
     "vue-amap": "^0.5.10",
+    "vue-cropper": "^0.5.6",
     "vue-router": "3.0.6",
     "vuex": "3.1.0"
   },

src/components/Common/BaseForm.vue

@@ -173,6 +173,29 @@
           <i v-else class="el-icon-plus icon" @click="focusHandle(item.key)" />
         </el-upload>
       </el-form-item>
+      <el-form-item
+        v-else-if="item.type === 'cuImg'"
+        :key="index"
+        :class="item.class"
+        :prop="item.key"
+        :label="isInline && noLabel ? '' : item.label"
+        :rules="item.rules === 1 ? [{ required: true, message: '请选择'+ item.label, trigger: 'blur' }] : item.rules"
+      >
+        <el-upload
+          class="img-upload"
+          :action="`${requireUrl}/adm/upload/cloudpub`"
+          :data="{logic_type: 'estate', token}"
+          name="upload"
+          ref="cui"
+          :auto-upload="false"
+          :show-file-list="false"
+          :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)" />
+        </el-upload>
+      </el-form-item>
       <el-form-item
         v-else-if="item.type === 'uploads'"
         :key="index"
@@ -331,12 +354,19 @@
     <el-form-item>
       <slot name="footer" />
     </el-form-item>
+    <cropper-img
+      :isShow="isCIShow"
+      :curObj="uploadObj"
+      @close="cuImgClose"
+    />
   </el-form>
 </template>
 <script>
 import { strTrim } from '@/utils'
+import CropperImg from './CropperImg'
 export default {
   name: 'BaseForm',
+  components: { CropperImg },
   props: {
     data: Array,
     labelWidth: {
@@ -381,7 +411,10 @@ export default {
       uploadHeaders: {
         'Content-Type': 'multipart/form-data'
       },
-      remoteOptionsPrev: {}
+      remoteOptionsPrev: {},
+      isCIShow: false,
+      uploadObj: {},
+      isCanUpload: false,
     }
   },
   watch: {
@@ -461,6 +494,7 @@ export default {
       this.$message.warning(`当前限制选择 1 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`)
     },
     uploadSuccess(res, file) {
+      console.log(res)
       const data = res.data || {}
       const uploadItem = this.curData[this.curFormIndex]
       // this.baseForm[uploadItem.key] = `${data.domain}${data.url}?url=${data.url}&id=${data.file_id}`
@@ -558,6 +592,37 @@ export default {
         }
       }
     },
+    cuImgOpen(file, fileList) {
+      // if (!this.isCanUpload) {
+        const isLt10M = file.size / 1024 / 1024 < 10
+        if (!isLt10M) {
+          this.$msgw('上传文件大小不能超过 10MB!')
+          return false
+        }
+        // this.fileinfo = file
+        this.$nextTick(() => {
+          this.uploadObj = {url: URL.createObjectURL(file.raw)}
+          this.isCIShow = true
+          // this.isCanUpload = true
+        })
+      // }
+    },
+    cuImgClose (obj) {
+      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)
+      // }
+    },
     remoteChange(val) {
       if (val) {
         const remoteParams = this.curData[this.curFormIndex].remoteParams
@@ -697,5 +762,6 @@ export default {
     align-items: center;
     height: 100%;
   }
+
   </style>
 

src/components/Common/CropperImg.vue

@@ -0,0 +1,125 @@
+<template>
+  <div>
+    <el-dialog
+      v-loading="loading"
+      :show-close="false"
+      :close-on-click-modal="false"
+      :visible.sync="isShow"
+      :title="'图片裁剪'"
+      :modal-append-to-body="false"
+      :append-to-body="true"
+      :fullscreen="false"
+      width="700px"
+      custom-class="xl-dialog"
+      center
+    >
+      <div class="scoped-upload">
+        <div class="cropper">
+          <vueCropper
+            ref="cropper"
+            :img="option.img"
+            :outputSize="option.size"
+            :outputType="option.outputType"
+            :info="true"
+            :full="option.full"
+            :canMove="option.canMove"
+            :canMoveBox="option.canMoveBox"
+            :original="option.original"
+            :autoCrop="option.autoCrop"
+            :fixed="option.fixed"
+            :fixedNumber="option.fixedNumber"
+            :centerBox="option.centerBox"
+            :infoTrue="option.infoTrue"
+            :fixedBox="option.fixedBox">
+          </vueCropper>
+        </div>
+      </div>
+      <div class="xl-form">
+        <div class="xl-form-footer">
+          <el-button class="xl-form-btn t2" @click="close">关 闭</el-button>
+          <el-button class="xl-form-btn t1" @click="close('confirm')">确 定</el-button>
+        </div>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+<script>
+import axios from 'axios'
+export default {
+  name: 'CropperImg',
+  props: {
+    isShow: Boolean,
+    curObj: Object,
+  },
+  data() {
+    return {
+      loading: true,
+      option: {
+        img: '', //裁剪图片的地址
+        outputSize: 1, // 裁剪生成图片的质量
+        outputType: 'png', // 裁剪生成图片的格式
+        full: false, // 是否输出原图比例的截图
+        info: true, // 图片大小信息
+        canScale: true, // 图片是否允许滚轮缩放
+        autoCrop: true, // 是否默认生成截图框
+        autoCropWidth: 375, // 默认生成截图框宽度
+        autoCropHeight: 300, // 默认生成截图框高度
+        canMove: true, // 上传图片是否可以移动
+        fixedBox: true, // 固定截图框大小 不允许改变
+        fixed: false, // 是否开启截图框宽高固定比例
+        canMoveBox: true, // 截图框能否拖动
+        original: false, // 上传图片按照原始比例渲染
+        centerBox: false, // 截图框是否被限制在图片里面
+        height: true,
+        infoTrue: false, // true 为展示真实输出图片宽高 false 展示看到的截图框宽高
+        enlarge: 2, // 图片根据截图框输出比例倍数
+        mode: 'cover', // 图片默认渲染方式
+        maxImgSize: 750 // 限制图片最大宽度和高度
+      },
+    }
+  },
+  watch: {
+    isShow: function(val) {
+      if (val) {
+        this.option.img = this.curObj.url
+      }
+    },
+  },
+  methods: {
+    close(str) {
+      if (str === 'confirm') {
+        this.$refs.cropper.getCropBlob((data) => {
+          let newData = new FormData()
+          newData.append('token', 'B4mtpOy9yz0c72Y2+FqmkzjrBb2tKqB8j2HHe9zwh9Y80BpvEj2FANMdq5yFCc+cvFSJM3V9m5bq')
+          newData.append('upload', data, 'honglou.jpg')
+          axios({
+            method: 'post',
+            url: process.env.VUE_APP_BASE_API + '/adm/upload/cloudpub',
+            data: newData
+          }).then(res => {
+            const cData = res.data
+            if (cData.errno === 0) {
+              const cObj = cData.data || {}
+              this.$emit('close', cObj.url)
+            } else {
+              this.$msgw(cData.errmsg)
+            }
+            // console.log(cData)
+          })
+        })
+      } else {
+        this.$emit('close')
+      }
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+.scoped-upload {
+  text-align: center;
+  .cropper {
+    width: auto;
+    height: 500px;
+  }
+}
+</style>

src/main.js

@@ -35,6 +35,9 @@ Vue.component(PopupBigImg.name, PopupBigImg)
 import storage from '@/utils/storage'
 Vue.use(storage)
 
+import VueCropper from 'vue-cropper'
+Vue.use(VueCropper)
+
 import imgMark from '@/utils/imgMark'
 Vue.use(imgMark)
 

src/views/house/components/popup/OldEdit.vue

@@ -126,7 +126,7 @@ 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: 'upload' }, 
+        { label: '房源主图', key: 'pri_image', class: 'c-3', type: 'cuImg' }, 
         { label: '房源简介', key: 'remarked', class: 'c-3s', type: 'textarea' },
         { label: '房源地址', key: 'address' },
       ]