diff --git a/src/components/quill/index.vue b/src/components/quill/index.vue index 6a6349c..33a7a17 100644 --- a/src/components/quill/index.vue +++ b/src/components/quill/index.vue @@ -1,6 +1,7 @@ @@ -723,6 +742,8 @@ import Setting from "@/setting"; import quill from "@/components/quill"; import Editor from '@tinymce/tinymce-vue' import editorConfig from '@/utils/editor' +import Cropper from '@/components/img-upload/Cropper' +import Axios from 'axios' export default { data () { return { @@ -832,7 +853,15 @@ export default { updateTime: 0, nameRepeat: false, appletList: [], - isPython: false + isPython: false, + + cropperModel: false, + isUpload: false, + fixedNumber: [1.74, 1], + autoCropWidth: 484, + autoCropHeight: 278, + file: {}, // 当前被选择的图片文件 + picType: 1 }; }, watch: { @@ -879,7 +908,8 @@ export default { }, 1000) }, components: { - Editor + Editor, + Cropper }, methods: { getData () { @@ -1033,11 +1063,11 @@ export default { form.mallPrices.find(e => e.settlementPriceType && e.area === 0).settlementPrice = data.settlementPrice this.getProfessionalClassData(form.mallDisciplines[0]) this.getProfessionalData(form.mallDisciplines[0]) - mall.courseHours = data.expectedCourse - mall.coverDrawing = data.coverUrl - mall.appletIcon = data.miniProgramPictureAddress - mall.productIntroduction = data.briefIntroduction - mall.marketUnitPrice = data.marketPrice + if (data.expectedCourse) mall.courseHours = data.expectedCourse + if (data.coverUrl) mall.coverDrawing = data.coverUrl + if (data.miniProgramPictureAddress) mall.appletIcon = data.miniProgramPictureAddress + if (data.briefIntroduction) mall.productIntroduction = data.briefIntroduction + if (data.marketPrice) mall.marketUnitPrice = data.marketPrice // 判断是否是python系统 const systemIds = data.systemIds.split(',') this.isPython = systemIds.filter(e => e != 12 && e != 13).length @@ -1395,6 +1425,64 @@ export default { uploadSuccess (res) { this.form.mall.coverDrawing = res.data.filesResult.fileUrl }, + + // 图片裁剪上传事件 + customUpload (data) { + const formData = new FormData() + formData.append('file', data, this.file.name) + this.imgUpload(formData) + }, + // 图片上传到服务器 + imgUpload (formData) { + this.isUpload = true + Axios({ + method: 'post', + url: this.api.fileUploadNakadai, + data: formData, + headers: { + 'Content-Type': 'multipart/form-data', + ...this.headers + }, + }).then(({ data }) => { + const url = data.filesResult.fileUrl + if (this.picType == 2) { + this.form.mall.interfaceDiagrams.push(url) + } else { + this.form.mall[this.picType == 1 ? 'coverDrawing' : 'appletIcon'] = url + } + }).catch(res => { }) + this.$refs.cropper.isDisabled = false + this.isUpload = false + this.cropperModel = false + }, + // 图片改变钩子 + changeFile (file, type) { + this.picType = type + if (type === 1 || type === 2) { + this.fixedNumber = [1.74, 1] + this.autoCropWidth = 484 + this.autoCropHeight = 278 + } else { + this.fixedNumber = [1, 1] + this.autoCropWidth = 57 + this.autoCropHeight = 57 + } + const { name } = file + const ext = name.substring(name.lastIndexOf('.') + 1) + if (!Util.isImg(ext)) { + this.$message.error('请上传图片!') + return false + } + this.file = file + this.cropperModel = true + this.$nextTick(() => { + this.$refs.cropper.updateImg({ + url: window.URL.createObjectURL(file.raw), + size: file.size + }) + }) + }, + beforeCoverRemove () { this.form.mall.coverDrawing = '' }, @@ -1438,6 +1526,7 @@ export default { if (!form.classificationIds) return Util.errorMsg('请选择产品分类!') if (!form.typeIds) return Util.errorMsg('请选择产品类型!') if (!form.supplierIds.length) return Util.errorMsg('请选择供应厂商!') + if (this.isPython && !mall.themeId) return Util.errorMsg('请选择主题UI!') if (!mall.coverDrawing) return Util.errorMsg('请上传封面图!') if (!mall.marketUnitPrice) return Util.errorMsg('请输入市场建议单价!') let priceInvalid = 0