diff --git a/components/ImgCropper.vue b/components/ImgCropper.vue index b127bcd..92854fb 100644 --- a/components/ImgCropper.vue +++ b/components/ImgCropper.vue @@ -75,6 +75,7 @@ export default { methods: { onSubmit() { this.$refs.cropper.getCropData(data => { + console.log(data) this.$emit('onSubmit',data) }); diff --git a/pages/admin/topic/_topic_uri.vue b/pages/admin/topic/_topic_uri.vue index 3bcb61a..99d419f 100644 --- a/pages/admin/topic/_topic_uri.vue +++ b/pages/admin/topic/_topic_uri.vue @@ -12,7 +12,7 @@ - + {{ topic.topicTitle }} {{ topic.topicTagCount }} 引用 @@ -28,9 +28,9 @@ - {{ topic.topicDescription }} + - + diff --git a/pages/admin/topic/post/_topic_id.vue b/pages/admin/topic/post/_topic_id.vue index 7a3a1ac..673054f 100644 --- a/pages/admin/topic/post/_topic_id.vue +++ b/pages/admin/topic/post/_topic_id.vue @@ -23,71 +23,38 @@ - - - - - - - - - - - - {{topicIconPath}} - - - - - - - - - - - - - - - - {{ topic.topicTitle }} - - - - {{ topic.topicDescription }} - - - - - - - - - - - 上传 - - - 重置 - 裁剪 - - * - 上传图片调整至最佳效果后,请点击裁剪按钮截取 - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + - - - + 提交 + + @@ -128,12 +95,13 @@ import Vue from 'vue'; import {mapState} from 'vuex'; import VueCropper from 'vue-cropper'; import apiConfig from '~/config/api.config'; +import ImgCropper from "~/components/ImgCropper.vue"; export default { name: "adminTopicPost", middleware: 'auth', components: { - VueCropper + VueCropper, ImgCropper }, computed: { ...mapState({ @@ -170,13 +138,31 @@ export default { topicIconPath: '', isEdit: false, autoCrop: true, - notificationFlag: true + notificationFlag: true, + cropperVisible: false, + contentEditor:{} + } }, methods: { + blurData(){ + + console.log(this.contentEditor) + if(this.contentEditor!={}){ + console.log(this.contentEditor.getValue()) + + this.topic.topicDescription=this.contentEditor.getValue(); + } + + }, + updateUser(data) { + this.topic.topicIconPath = data + this.topicIconPath = data + this.cropperVisible = false + + }, _initEditor(data) { let _ts = this; - let toolbar = [ 'emoji', 'headings', @@ -265,43 +251,6 @@ export default { placeholder: data.placeholder, }) }, - handleAvatarSuccess(res) { - let _ts = this; - if (res && res.data && res.data.url) { - let topic = _ts.topic; - topic.topicIconPath = res.data.url; - _ts.$set(_ts, 'topic', topic); - _ts.$set(_ts, 'topicIconPath', res.data.url); - } else { - _ts.$message.error('上传失败!'); - } - }, - beforeAvatarUpload(file) { - const isJPG = file.type === 'image/jpeg'; - const isPNG = file.type === 'image/png'; - const isLt2M = file.size / 1024 / 1024 < 2; - - if (!(isJPG || isPNG)) { - this.$message.error('上传图标只能是 JPG 或者 PNG 格式!'); - return false; - } - if (!isLt2M) { - this.$message.error('上传图标大小不能超过 2MB!'); - return false; - } - - this.fileToBase64(file); - return false; - }, - fileToBase64(file) { - let _ts = this; - let reader = new FileReader(); - reader.readAsDataURL(file); - reader.onload = function () { - _ts.$set(_ts, 'topicIconPath', this.result); - _ts.$refs.cropper.replace(this.result); - } - }, async updateTopic() { let _ts = this; _ts.$set(_ts, 'loading', true); @@ -409,12 +358,16 @@ export default { _ts.contentEditor = _ts._initEditor({ id: 'contentEditor', mode: 'both', - height: 480, + height: 300, placeholder: '', //this.$t('inputContent', this.$store.state.locale) resize: false, - value: articleContent + value: articleContent, }); - } + setTimeout(()=>{ + _ts.contentEditor.blur() + }) + }, + } diff --git a/pages/admin/topics.vue b/pages/admin/topics.vue index 8d7631e..c684c60 100644 --- a/pages/admin/topics.vue +++ b/pages/admin/topics.vue @@ -16,24 +16,23 @@ - - + + - + - {{ topic.topicTitle }} + {{ topic.topicTitle }} {{ topic.topicDescription }} - - - + +
{{ topic.topicDescription }}