From ed5990f22921e06abbe3e146f4566becdb9e663d Mon Sep 17 00:00:00 2001 From: wuxiran Date: Mon, 27 Mar 2023 03:18:25 +0800 Subject: [PATCH 1/2] =?UTF-8?q?1=E3=80=81=E5=BE=AE=E4=BF=A1=E7=BB=84?= =?UTF-8?q?=E4=BB=B6=E6=9B=B4=E6=96=B0vue3.=E8=A6=96=E9=A0=BB=E7=B5=84?= =?UTF-8?q?=E4=BB=B6=E6=9B=B4=E6=96=B0=E4=BD=BF=E7=94=A8video.js=206.0.0?= =?UTF-8?q?=E7=89=88=E6=9C=AC=E3=80=82=202=E3=80=81=E7=9B=AE=E5=89=8Dmp?= =?UTF-8?q?=E4=B8=AD=E8=A6=96=E9=A0=BB=E7=B5=84=E4=BB=B6=E5=8F=AF=E4=BB=A5?= =?UTF-8?q?=E7=B0=A1=E5=96=AE=E7=9A=84=E4=BD=BF=E7=94=A8=E4=BA=86=E3=80=82?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- package.json | 2 + src/views/mp/components/wx-reply/main.vue | 1246 ++++++++--------- .../mp/components/wx-video-play/main.vue | 142 +- .../mp/components/wx-voice-play/main.vue | 1 + src/views/mp/freePublish/index.vue | 21 +- src/views/mp/message/index.vue | 12 +- src/views/mp/tag/index.vue | 17 +- 7 files changed, 719 insertions(+), 722 deletions(-) diff --git a/package.json b/package.json index 8f1d24e7..683d09eb 100644 --- a/package.json +++ b/package.json @@ -29,6 +29,7 @@ "@form-create/designer": "^3.1.0", "@form-create/element-ui": "^3.1.17", "@iconify/iconify": "^3.1.0", + "@videojs-player/vue": "^1.0.0", "@vueuse/core": "^9.13.0", "@wangeditor/editor": "^5.1.23", "@wangeditor/editor-for-vue": "^5.1.10", @@ -58,6 +59,7 @@ "qs": "^6.11.1", "steady-xml": "^0.1.0", "url": "^0.11.0", + "video.js": "^8.0.4", "vue": "3.2.47", "vue-i18n": "9.2.2", "vue-router": "^4.1.6", diff --git a/src/views/mp/components/wx-reply/main.vue b/src/views/mp/components/wx-reply/main.vue index 57a3cd84..a151b252 100644 --- a/src/views/mp/components/wx-reply/main.vue +++ b/src/views/mp/components/wx-reply/main.vue @@ -1,634 +1,634 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + - - - - - +--> + // 创建 tempObjItem 对象，并设置对应的值 + let tempObjItem = {} + tempObjItem.type = this.objData.type + if (this.objData.type === 'news') { + tempObjItem.articles = item.content.newsItem + this.objData.articles = item.content.newsItem + } else if (this.objData.type === 'music') { + // 音乐需要特殊处理，因为选择的是图片的缩略图 + tempObjItem.thumbMediaId = item.mediaId + this.objData.thumbMediaId = item.mediaId + tempObjItem.thumbMediaUrl = item.url + this.objData.thumbMediaUrl = item.url + // title、introduction、musicUrl、hqMusicUrl：从 objData 到 tempObjItem，避免上传素材后，被覆盖掉 + tempObjItem.title = this.objData.title || '' + tempObjItem.introduction = this.objData.introduction || '' + tempObjItem.musicUrl = this.objData.musicUrl || '' + tempObjItem.hqMusicUrl = this.objData.hqMusicUrl || '' + } else if (this.objData.type === 'image' || this.objData.type === 'voice') { + tempObjItem.mediaId = item.mediaId + this.objData.mediaId = item.mediaId + tempObjItem.url = item.url + this.objData.url = item.url + tempObjItem.name = item.name + this.objData.name = item.name + } else if (this.objData.type === 'video') { + tempObjItem.mediaId = item.mediaId + this.objData.mediaId = item.mediaId + tempObjItem.url = item.url + this.objData.url = item.url + tempObjItem.name = item.name + this.objData.name = item.name + // title、introduction：从 item 到 tempObjItem，因为素材里有 title、introduction + if (item.title) { + this.objData.title = item.title || '' + tempObjItem.title = item.title || '' + } + if (item.introduction) { + this.objData.description = item.introduction || '' // 消息使用的是 description，素材使用的是 introduction，所以转换下 + tempObjItem.description = item.introduction || '' + } + } else if (this.objData.type === 'text') { + this.objData.content = item.content || '' + } + // 最终设置到临时缓存 + this.tempObj.set(this.objData.type, tempObjItem) + }, + openMaterial() { + if (this.objData.type === 'news') { + this.dialogNewsVisible = true + } else if (this.objData.type === 'image') { + this.dialogImageVisible = true + } else if (this.objData.type === 'voice') { + this.dialogVoiceVisible = true + } else if (this.objData.type === 'video') { + this.dialogVideoVisible = true + } else if (this.objData.type === 'music') { + this.dialogThumbVisible = true + } + }, + closeMaterial() { + this.dialogNewsVisible = false + this.dialogImageVisible = false + this.dialogVoiceVisible = false + this.dialogVideoVisible = false + this.dialogThumbVisible = false + }, + deleteObj() { + if (this.objData.type === 'news') { + this.$delete(this.objData, 'articles') + } else if (this.objData.type === 'image') { + this.objData.mediaId = null + this.$delete(this.objData, 'url') + this.objData.name = null + } else if (this.objData.type === 'voice') { + this.objData.mediaId = null + this.$delete(this.objData, 'url') + this.objData.name = null + } else if (this.objData.type === 'video') { + this.objData.mediaId = null + this.$delete(this.objData, 'url') + this.objData.name = null + this.objData.title = null + this.objData.description = null + } else if (this.objData.type === 'music') { + this.objData.thumbMediaId = null + this.objData.thumbMediaUrl = null + this.objData.title = null + this.objData.description = null + this.objData.musicUrl = null + this.objData.hqMusicUrl = null + } else if (this.objData.type === 'text') { + this.objData.content = null + } + // 覆盖缓存 + this.tempObj.set(this.objData.type, Object.assign({}, this.objData)) + }, + /** + * 输入时，缓存每次 objData 到 tempObj 中 + * + * why？不确定为什么 v-model="objData.content" 不能自动缓存，所以通过这样的方式 + */ + inputContent(str) { + // 覆盖缓存 + this.tempObj.set(this.objData.type, Object.assign({}, this.objData)) + } + } +} + - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + diff --git a/src/views/mp/components/wx-video-play/main.vue b/src/views/mp/components/wx-video-play/main.vue index 880d10f8..7679a70a 100644 --- a/src/views/mp/components/wx-video-play/main.vue +++ b/src/views/mp/components/wx-video-play/main.vue @@ -8,110 +8,84 @@ 存在的问题：mediaId 有效期是 3 天，超过时间后无法播放 2）重构后的做法：后端接收到微信公众号的视频消息后，将视频消息的 media_id 的文件内容保存到文件服务器中，这样前端可以直接使用 URL 播放。 ② 体验优化：弹窗关闭后，自动暂停视频的播放 + --> - diff --git a/src/views/mp/components/wx-voice-play/main.vue b/src/views/mp/components/wx-voice-play/main.vue index 3260fc05..9ec8e2e9 100644 --- a/src/views/mp/components/wx-voice-play/main.vue +++ b/src/views/mp/components/wx-voice-play/main.vue @@ -25,6 +25,7 @@ + + diff --git a/src/views/mp/components/wx-msg/main.vue b/src/views/mp/components/wx-msg/main.vue index b514a73e..215b4f97 100644 --- a/src/views/mp/components/wx-msg/main.vue +++ b/src/views/mp/components/wx-msg/main.vue @@ -6,7 +6,7 @@ ② 代码优化，补充注释，提升阅读性 --> -