diff --git a/pages/admin/tag/post/_tag_id.vue b/pages/admin/tag/post/_tag_id.vue index f0a688e..e8b9df2 100644 --- a/pages/admin/tag/post/_tag_id.vue +++ b/pages/admin/tag/post/_tag_id.vue @@ -17,74 +17,9 @@ - - - - - - - - - -
- -
- - - - - - -

{{ tag.tagTitle }}

- - - -
{{ tag.tagDescription }}
- - - -
- - - - - -
- 上传 -
- - 重置 - 裁剪 - - * - 上传图片调整至最佳效果后,请点击裁剪按钮截取 - + @@ -114,6 +49,7 @@ + @@ -122,14 +58,15 @@ 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: "PostTag", middleware: 'auth', components: { - VueCropper + VueCropper, ImgCropper }, - validate({params, store}) { + validate({params}) { if (typeof params.tag_id === 'undefined') { return true; } @@ -145,7 +82,8 @@ export default { ...mapState({ uploadHeaders: state => { return {'X-Upload-Token': state.uploadHeaders} - } + }, + tagInfo: state => state.tag.detail.data }) }, data() { @@ -155,15 +93,23 @@ export default { linkToImageURL: '', token: '' }, + tag: {}, tagIconPath: '', loading: false, isEdit: false, - tag: {}, autoCrop: true, + cropperVisible: false, notificationFlag: true } }, methods: { + updateTagIcon(data) { + this.tag.tagIconPath = data + this.tagIconPath = data + this.tag.tagImageType = '1' + this.cropperVisible = false + + }, _initEditor(data) { let _ts = this; @@ -255,52 +201,15 @@ export default { placeholder: data.placeholder, }) }, - handleAvatarSuccess(res) { - let _ts = this; - if (res && res.data && res.data.url) { - let tag = _ts.tag; - tag.tagIconPath = res.data.url; - _ts.$set(_ts, 'tag', tag); - _ts.$set(_ts, 'tagIconPath', 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, 'tagIconPath', this.result); - _ts.$refs.cropper.replace(this.result); - } - }, async updateTag() { let _ts = this; _ts.$set(_ts, 'loading', true); let tag = _ts.tag; let id = tag.idTag; - let tagContent = _ts.contentEditor.getValue(); - let tagContentHtml = await _ts.contentEditor.getHTML(); - tag.tagDescription = tagContent; - tag.tagDescriptionHtml = tagContentHtml; + let tagDescription = _ts.contentEditor.getValue(); + let tagDescriptionHtml = await _ts.contentEditor.getHTML(); + tag.tagDescription = tagDescription; + tag.tagDescriptionHtml = tagDescriptionHtml; let title = id ? '更新' : '添加'; _ts.$axios[id ? '$put' : '$post']('/api/admin/tag/post', tag).then(function (res) { if (res && res.message) { @@ -318,21 +227,6 @@ export default { }, reset() { this.$refs.cropper.reset(); - }, - // get image data for post processing, e.g. upload or setting image src - cropImage() { - let _ts = this; - try { - _ts.cropImg = _ts.$refs.cropper.getCroppedCanvas().toDataURL(); - let tag = _ts.tag; - tag.tagIconPath = _ts.cropImg; - _ts.$set(_ts, 'tag', tag); - _ts.$set(_ts, 'tagIconPath', _ts.cropImg); - _ts.$message.success('已裁剪 !'); - } catch (e) { - _ts.$message.error('图片获取失败 !'); - return; - } } }, beforeRouteLeave(to, from, next) { @@ -354,7 +248,7 @@ export default { beforeDestroy() { window.onbeforeunload = null; }, - mounted() { + async mounted() { window.addEventListener('beforeunload', e => { e = e || window.event; @@ -367,23 +261,21 @@ export default { return '关闭提示'; }); let _ts = this; - _ts.$axios.$get('/api/upload/simple/token').then(function (res) { - if (res) { - _ts.$store.commit('setUploadHeaders', res.uploadToken); - _ts.$set(_ts, 'tokenURL', { - token: res.uploadToken || '', - URL: res.uploadURL || '', - linkToImageURL: res.linkToImageURL || '' - }) - } - }); - - let tag = _ts.$store.state.tag.detail.data; - _ts.$set(_ts, 'tag', JSON.parse(JSON.stringify(tag))); + const responseData = await _ts.$axios.$get('/api/upload/simple/token'); + if (responseData) { + _ts.$store.commit('setUploadHeaders', responseData.uploadToken); + _ts.$set(_ts, 'tokenURL', { + token: responseData.uploadToken || '', + URL: responseData.uploadURL || '', + linkToImageURL: responseData.linkToImageURL || '' + }) + } Vue.nextTick(() => { let tagDescription = ''; if (_ts.$route.params.tag_id) { + let tag = _ts.tagInfo + _ts.$set(_ts, 'tag', JSON.parse(JSON.stringify(tag))); _ts.$set(_ts, 'isEdit', true); tagDescription = _ts.tag.tagDescription } else { @@ -404,5 +296,5 @@ export default { diff --git a/pages/admin/topic/post/_topic_id.vue b/pages/admin/topic/post/_topic_id.vue index 5987774..305e5b3 100644 --- a/pages/admin/topic/post/_topic_id.vue +++ b/pages/admin/topic/post/_topic_id.vue @@ -23,38 +23,13 @@ - + -
+
- - - - - - - - - - - - - - - - - - - - - - - - - - + @@ -103,11 +78,24 @@ export default { components: { VueCropper, ImgCropper }, + validate({params}) { + if (typeof params.topic_id === 'undefined') { + return true; + } + return params.topic_id && !isNaN(Number(params.topic_id)) + }, + asyncData({store, params, error}) { + return Promise.all([ + store.dispatch('topic/fetchPostDetail', params) + .catch(err => error({statusCode: 404})) + ]) + }, computed: { ...mapState({ uploadHeaders: state => { return {'X-Upload-Token': state.uploadHeaders} - } + }, + topicInfo: state => state.topic.detail.data }) }, data() { @@ -140,24 +128,15 @@ export default { autoCrop: true, notificationFlag: true, cropperVisible: false, - contentEditor:{} + contentEditor: {} } }, methods: { - blurData(){ - - console.log(this.contentEditor) - if(this.contentEditor!={}){ - console.log(this.contentEditor.getValue()) - - this.topic.topicDescription=this.contentEditor.getValue(); - } - - }, - updateUser(data) { + updateTopicIcon(data) { this.topic.topicIconPath = data this.topicIconPath = data + this.topic.topicImageType = '1' this.cropperVisible = false }, @@ -264,6 +243,7 @@ export default { _ts.$axios[id ? '$put' : '$post']('/api/admin/topic/post', data).then(function (res) { if (res && res.message) { _ts.$message.error(res.message); + _ts.$set(_ts, 'loading', false); } else { _ts.$message({ type: 'success', @@ -271,30 +251,11 @@ export default { }); _ts.$set(_ts, 'loading', false); _ts.$set(_ts, 'notificationFlag', false); - _ts.contentEditor.setValue(''); - _ts.$router.push({ - path: `/admin/topic/${data.topicUri}` - }) } }) }, reset() { this.$refs.cropper.reset(); - }, - // get image data for post processing, e.g. upload or setting image src - cropImage() { - let _ts = this; - try { - _ts.cropImg = _ts.$refs.cropper.getCroppedCanvas().toDataURL(); - let topic = _ts.topic; - topic.topicIconPath = _ts.cropImg; - _ts.$set(_ts, 'topic', topic); - _ts.$set(_ts, 'topicIconPath', _ts.cropImg); - _ts.$message.success('已裁剪 !'); - } catch (e) { - _ts.$message.error('图片获取失败 !'); - return; - } } }, beforeRouteLeave(to, from, next) { @@ -316,7 +277,7 @@ export default { beforeDestroy() { window.onbeforeunload = null; }, - async mounted() { + mounted() { window.addEventListener('beforeunload', e => { e = e || window.event; @@ -339,32 +300,24 @@ export default { } }); - - if (_ts.$route.params.topic_id) { - _ts.$set(_ts, 'isEdit', true); - const responseData = await _ts.$axios.$get('/api/admin/topic/detail/' + _ts.$route.params.topic_id); - _ts.$set(_ts, 'topic', responseData); - if (responseData.topicIconPath) { - _ts.$set(_ts, 'topicIconPath', responseData.topicIconPath); + Vue.nextTick(() => { + let topicDescription = ''; + if (_ts.$route.params.topic_id) { + let topic = _ts.topicInfo + _ts.$set(_ts, 'topic', JSON.parse(JSON.stringify(topic))); + _ts.$set(_ts, 'isEdit', true); + topicDescription = _ts.topic.topicDescription; + } else { + _ts.$set(_ts, 'isEdit', false); } - } else { - _ts.$set(_ts, 'isEdit', false); - } - - let articleContent = ''; - if (_ts.topic.topicDescription) { - articleContent = _ts.topic.topicDescription; - } - _ts.contentEditor = _ts._initEditor({ - id: 'contentEditor', - mode: 'both', - height: 300, - placeholder: '', //this.$t('inputContent', this.$store.state.locale) - resize: false, - value: articleContent, - }); - setTimeout(()=>{ - _ts.contentEditor.blur() + _ts.contentEditor = _ts._initEditor({ + id: 'contentEditor', + mode: 'both', + height: 300, + placeholder: '', //this.$t('inputContent', this.$store.state.locale) + resize: false, + value: topicDescription, + }); }) }, @@ -372,7 +325,7 @@ export default {