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 @@