Skip to content

phsl / admin

Go to a project
Commit ed5990f2 by wuxiran
Options

1、微信组件更新vue3.視頻組件更新使用video.js 6.0.0版本。 

2、目前mp中視頻組件可以簡單的使用了。
parent 72ddb0c0
Showing with 713 additions and 716 deletions
package.json
...@@ -29,6 +29,7 @@ ...@@ -29,6 +29,7 @@
"@form-create/designer": "^3.1.0", "@form-create/designer": "^3.1.0",
"@form-create/element-ui": "^3.1.17", "@form-create/element-ui": "^3.1.17",
"@iconify/iconify": "^3.1.0", "@iconify/iconify": "^3.1.0",
"@videojs-player/vue": "^1.0.0",
"@vueuse/core": "^9.13.0", "@vueuse/core": "^9.13.0",
"@wangeditor/editor": "^5.1.23", "@wangeditor/editor": "^5.1.23",
"@wangeditor/editor-for-vue": "^5.1.10", "@wangeditor/editor-for-vue": "^5.1.10",
...@@ -58,6 +59,7 @@ ...@@ -58,6 +59,7 @@
"qs": "^6.11.1", "qs": "^6.11.1",
"steady-xml": "^0.1.0", "steady-xml": "^0.1.0",
"url": "^0.11.0", "url": "^0.11.0",
"video.js": "^8.0.4",
"vue": "3.2.47", "vue": "3.2.47",
"vue-i18n": "9.2.2", "vue-i18n": "9.2.2",
"vue-router": "^4.1.6", "vue-router": "^4.1.6",
......
src/views/mp/components/wx-reply/main.vue
<!--&lt;!&ndash;--> <!--
<!-- - Copyright (C) 2018-2019--> - Copyright (C) 2018-2019
<!-- - All rights reserved, Designed By www.joolun.com--> - All rights reserved, Designed By www.joolun.com
<!-- 芋道源码：--> 芋道源码：
<!-- ① 移除多余的 rep 为前缀的变量，让 message 消息更简单--> ① 移除多余的 rep 为前缀的变量，让 message 消息更简单
<!-- ② 代码优化，补充注释，提升阅读性--> ② 代码优化，补充注释，提升阅读性
<!-- ③ 优化消息的临时缓存策略，发送消息时，只清理被发送消息的 tab，不会强制切回到 text 输入--> ③ 优化消息的临时缓存策略，发送消息时，只清理被发送消息的 tab，不会强制切回到 text 输入
<!-- ④ 支持发送【视频】消息时，支持新建视频--> ④ 支持发送【视频】消息时，支持新建视频
<!--&ndash;&gt;--> -->
<!--<template>--> <template>
<!-- <el-tabs type="border-card" v-model="objData.type" @tab-click="handleClick">--> <el-tabs type="border-card" v-model="objData.type" @tab-click="handleClick">
<!-- &lt;!&ndash; 类型 1：文本 &ndash;&gt;--> <!-- 类型 1：文本 -->
<!-- <el-tab-pane name="text">--> <el-tab-pane name="text">
<!-- <span slot="label"><i class="el-icon-document"></i> 文本</span>--> <span slot="label"><i class="el-icon-document"></i> 文本</span>
<!-- <el-input--> <el-input
<!-- type="textarea"--> type="textarea"
<!-- :rows="5"--> :rows="5"
<!-- placeholder="请输入内容"--> placeholder="请输入内容"
<!-- v-model="objData.content"--> v-model="objData.content"
<!-- @input="inputContent"--> @input="inputContent"
<!-- />--> />
<!-- </el-tab-pane>--> </el-tab-pane>
<!-- &lt;!&ndash; 类型 2：图片 &ndash;&gt;--> <!-- 类型 2：图片 -->
<!-- <el-tab-pane name="image">--> <el-tab-pane name="image">
<!-- <span slot="label"><i class="el-icon-picture"></i> 图片</span>--> <span slot="label"><i class="el-icon-picture"></i> 图片</span>
<!-- <el-row>--> <el-row>
<!-- &lt;!&ndash; 情况一：已经选择好素材、或者上传好图片 &ndash;&gt;--> <!-- 情况一：已经选择好素材、或者上传好图片 -->
<!-- <div class="select-item" v-if="objData.url">--> <div class="select-item" v-if="objData.url">
<!-- <img class="material-img" :src="objData.url" />--> <img class="material-img" :src="objData.url" />
<!-- <p class="item-name" v-if="objData.name">{{ objData.name }}</p>--> <p class="item-name" v-if="objData.name">{{ objData.name }}</p>
<!-- <el-row class="ope-row">--> <el-row class="ope-row">
<!-- <el-button type="danger" icon="el-icon-delete" circle @click="deleteObj" />--> <el-button type="danger" icon="el-icon-delete" circle @click="deleteObj" />
<!-- </el-row>--> </el-row>
<!-- </div>--> </div>
<!-- &lt;!&ndash; 情况二：未做完上述操作 &ndash;&gt;--> <!-- 情况二：未做完上述操作 -->
<!-- <div v-else>--> <div v-else>
<!-- <el-row style="text-align: center">--> <el-row style="text-align: center">
<!-- &lt;!&ndash; 选择素材 &ndash;&gt;--> <!-- 选择素材 -->
<!-- <el-col :span="12" class="col-select">--> <el-col :span="12" class="col-select">
<!-- <el-button type="success" @click="openMaterial">--> <el-button type="success" @click="openMaterial">
<!-- 素材库选择<i class="el-icon-circle-check el-icon&#45;&#45;right"></i>--> 素材库选择<i class="el-icon-circle-check el-icon--right"></i>
<!-- </el-button>--> </el-button>
<!-- <el-dialog--> <el-dialog
<!-- title="选择图片"--> title="选择图片"
<!-- v-model:visible="dialogImageVisible"--> v-model:visible="dialogImageVisible"
<!-- width="90%"--> width="90%"
<!-- append-to-body--> append-to-body
<!-- >--> >
<!-- <wx-material-select :obj-data="objData" @selectMaterial="selectMaterial" />--> <wx-material-select :obj-data="objData" @selectMaterial="selectMaterial" />
<!-- </el-dialog>--> </el-dialog>
<!-- </el-col>--> </el-col>
<!-- &lt;!&ndash; 文件上传 &ndash;&gt;--> <!-- 文件上传 -->
<!-- <el-col :span="12" class="col-add">--> <el-col :span="12" class="col-add">
<!-- <el-upload--> <el-upload
<!-- :action="actionUrl"--> :action="actionUrl"
<!-- :headers="headers"--> :headers="headers"
<!-- multiple--> multiple
<!-- :limit="1"--> :limit="1"
<!-- :file-list="fileList"--> :file-list="fileList"
<!-- :data="uploadData"--> :data="uploadData"
<!-- :before-upload="beforeImageUpload"--> :before-upload="beforeImageUpload"
<!-- :on-success="handleUploadSuccess"--> :on-success="handleUploadSuccess"
<!-- >--> >
<!-- <el-button type="primary">上传图片</el-button>--> <el-button type="primary">上传图片</el-button>
<!-- <div slot="tip" class="el-upload__tip"--> <div slot="tip" class="el-upload__tip"
<!-- >支持 bmp/png/jpeg/jpg/gif 格式，大小不超过 2M</div--> >支持 bmp/png/jpeg/jpg/gif 格式，大小不超过 2M</div
<!-- >--> >
<!-- </el-upload>--> </el-upload>
<!-- </el-col>--> </el-col>
<!-- </el-row>--> </el-row>
<!-- </div>--> </div>
<!-- </el-row>--> </el-row>
<!-- </el-tab-pane>--> </el-tab-pane>
<!-- &lt;!&ndash; 类型 3：语音 &ndash;&gt;--> <!-- 类型 3：语音 -->
<!-- <el-tab-pane name="voice">--> <el-tab-pane name="voice">
<!-- <span slot="label"><i class="el-icon-phone"></i> 语音</span>--> <span slot="label"><i class="el-icon-phone"></i> 语音</span>
<!-- <el-row>--> <el-row>
<!-- <div class="select-item2" v-if="objData.url">--> <div class="select-item2" v-if="objData.url">
<!-- <p class="item-name">{{ objData.name }}</p>--> <p class="item-name">{{ objData.name }}</p>
<!-- <div class="item-infos">--> <div class="item-infos">
<!-- <wx-voice-player :url="objData.url" />--> <wx-voice-player :url="objData.url" />
<!-- </div>--> </div>
<!-- <el-row class="ope-row">--> <el-row class="ope-row">
<!-- <el-button type="danger" icon="el-icon-delete" circle @click="deleteObj" />--> <el-button type="danger" icon="el-icon-delete" circle @click="deleteObj" />
<!-- </el-row>--> </el-row>
<!-- </div>--> </div>
<!-- <div v-else>--> <div v-else>
<!-- <el-row style="text-align: center">--> <el-row style="text-align: center">
<!-- &lt;!&ndash; 选择素材 &ndash;&gt;--> <!-- 选择素材 -->
<!-- <el-col :span="12" class="col-select">--> <el-col :span="12" class="col-select">
<!-- <el-button type="success" @click="openMaterial">--> <el-button type="success" @click="openMaterial">
<!-- 素材库选择<i class="el-icon-circle-check el-icon&#45;&#45;right"></i>--> 素材库选择<i class="el-icon-circle-check el-icon--right"></i>
<!-- </el-button>--> </el-button>
<!-- <el-dialog--> <el-dialog
<!-- title="选择语音"--> title="选择语音"
<!-- v-model:visible="dialogVoiceVisible"--> v-model:visible="dialogVoiceVisible"
<!-- width="90%"--> width="90%"
<!-- append-to-body--> append-to-body
<!-- >--> >
<!-- <WxMaterialSelect :objData="objData" @selectMaterial="selectMaterial" />--> <WxMaterialSelect :objData="objData" @selectMaterial="selectMaterial" />
<!-- </el-dialog>--> </el-dialog>
<!-- </el-col>--> </el-col>
<!-- &lt;!&ndash; 文件上传 &ndash;&gt;--> <!-- 文件上传 -->
<!-- <el-col :span="12" class="col-add">--> <el-col :span="12" class="col-add">
<!-- <el-upload--> <el-upload
<!-- :action="actionUrl"--> :action="actionUrl"
<!-- :headers="headers"--> :headers="headers"
<!-- multiple--> multiple
<!-- :limit="1"--> :limit="1"
<!-- :file-list="fileList"--> :file-list="fileList"
<!-- :data="uploadData"--> :data="uploadData"
<!-- :before-upload="beforeVoiceUpload"--> :before-upload="beforeVoiceUpload"
<!-- :on-success="handleUploadSuccess"--> :on-success="handleUploadSuccess"
<!-- >--> >
<!-- <el-button type="primary">点击上传</el-button>--> <el-button type="primary">点击上传</el-button>
<!-- <div slot="tip" class="el-upload__tip"--> <div slot="tip" class="el-upload__tip"
<!-- >格式支持 mp3/wma/wav/amr，文件大小不超过 2M，播放长度不超过 60s</div--> >格式支持 mp3/wma/wav/amr，文件大小不超过 2M，播放长度不超过 60s</div
<!-- >--> >
<!-- </el-upload>--> </el-upload>
<!-- </el-col>--> </el-col>
<!-- </el-row>--> </el-row>
<!-- </div>--> </div>
<!-- </el-row>--> </el-row>
<!-- </el-tab-pane>--> </el-tab-pane>
<!-- &lt;!&ndash; 类型 4：视频 &ndash;&gt;--> <!-- 类型 4：视频 -->
<!-- <el-tab-pane name="video">--> <el-tab-pane name="video">
<!-- <span slot="label"><i class="el-icon-share"></i> 视频</span>--> <span slot="label"><i class="el-icon-share"></i> 视频</span>
<!-- <el-row>--> <el-row>
<!-- <el-input v-model="objData.title" placeholder="请输入标题" @input="inputContent" />--> <el-input v-model="objData.title" placeholder="请输入标题" @input="inputContent" />
<!-- <div style="margin: 20px 0"></div>--> <div style="margin: 20px 0"></div>
<!-- <el-input v-model="objData.description" placeholder="请输入描述" @input="inputContent" />--> <el-input v-model="objData.description" placeholder="请输入描述" @input="inputContent" />
<!-- <div style="margin: 20px 0"></div>--> <div style="margin: 20px 0"></div>
<!-- <div style="text-align: center">--> <div style="text-align: center">
<!-- <wx-video-player v-if="objData.url" :url="objData.url" />--> <wx-video-player v-if="objData.url" :url="objData.url" />
<!-- </div>--> </div>
<!-- <div style="margin: 20px 0"></div>--> <div style="margin: 20px 0"></div>
<!-- <el-row style="text-align: center">--> <el-row style="text-align: center">
<!-- &lt;!&ndash; 选择素材 &ndash;&gt;--> <!-- 选择素材 -->
<!-- <el-col :span="12">--> <el-col :span="12">
<!-- <el-button type="success" @click="openMaterial">--> <el-button type="success" @click="openMaterial">
<!-- 素材库选择<i class="el-icon-circle-check el-icon&#45;&#45;right"></i>--> 素材库选择<i class="el-icon-circle-check el-icon--right"></i>
<!-- </el-button>--> </el-button>
<!-- <el-dialog--> <el-dialog
<!-- title="选择视频"--> title="选择视频"
<!-- v-model:visible="dialogVideoVisible"--> v-model:visible="dialogVideoVisible"
<!-- width="90%"--> width="90%"
<!-- append-to-body--> append-to-body
<!-- >--> >
<!-- <wx-material-select :objData="objData" @selectMaterial="selectMaterial" />--> <wx-material-select :objData="objData" @selectMaterial="selectMaterial" />
<!-- </el-dialog>--> </el-dialog>
<!-- </el-col>--> </el-col>
<!-- &lt;!&ndash; 文件上传 &ndash;&gt;--> <!-- 文件上传 -->
<!-- <el-col :span="12">--> <el-col :span="12">
<!-- <el-upload--> <el-upload
<!-- :action="actionUrl"--> :action="actionUrl"
<!-- :headers="headers"--> :headers="headers"
<!-- multiple--> multiple
<!-- :limit="1"--> :limit="1"
<!-- :file-list="fileList"--> :file-list="fileList"
<!-- :data="uploadData"--> :data="uploadData"
<!-- :before-upload="beforeVideoUpload"--> :before-upload="beforeVideoUpload"
<!-- :on-success="handleUploadSuccess"--> :on-success="handleUploadSuccess"
<!-- >--> >
<!-- <el-button type="primary"--> <el-button type="primary"
<!-- >新建视频<i class="el-icon-upload el-icon&#45;&#45;right"></i--> >新建视频<i class="el-icon-upload el-icon--right"></i
<!-- ></el-button>--> ></el-button>
<!-- </el-upload>--> </el-upload>
<!-- </el-col>--> </el-col>
<!-- </el-row>--> </el-row>
<!-- </el-row>--> </el-row>
<!-- </el-tab-pane>--> </el-tab-pane>
<!-- &lt;!&ndash; 类型 5：图文 &ndash;&gt;--> <!-- 类型 5：图文 -->
<!-- <el-tab-pane name="news">--> <el-tab-pane name="news">
<!-- <span slot="label"><i class="el-icon-news"></i> 图文</span>--> <span slot="label"><i class="el-icon-news"></i> 图文</span>
<!-- <el-row>--> <el-row>
<!-- <div class="select-item" v-if="objData.articles">--> <div class="select-item" v-if="objData.articles">
<!-- <wx-news :articles="objData.articles" />--> <wx-news :articles="objData.articles" />
<!-- <el-row class="ope-row">--> <el-row class="ope-row">
<!-- <el-button type="danger" icon="el-icon-delete" circle @click="deleteObj" />--> <el-button type="danger" icon="el-icon-delete" circle @click="deleteObj" />
<!-- </el-row>--> </el-row>
<!-- </div>--> </div>
<!-- &lt;!&ndash; 选择素材 &ndash;&gt;--> <!-- 选择素材 -->
<!-- <div v-if="!objData.content">--> <div v-if="!objData.content">
<!-- <el-row style="text-align: center">--> <el-row style="text-align: center">
<!-- <el-col :span="24">--> <el-col :span="24">
<!-- <el-button type="success" @click="openMaterial"--> <el-button type="success" @click="openMaterial"
<!-- >{{ newsType === '1' ? '选择已发布图文' : '选择草稿箱图文'--> >{{ newsType === '1' ? '选择已发布图文' : '选择草稿箱图文'
<!-- }}<i class="el-icon-circle-check el-icon&#45;&#45;right"></i--> }}<i class="el-icon-circle-check el-icon--right"></i
<!-- ></el-button>--> ></el-button>
<!-- </el-col>--> </el-col>
<!-- </el-row>--> </el-row>
<!-- </div>--> </div>
<!-- <el-dialog title="选择图文" v-model:visible="dialogNewsVisible" width="90%" append-to-body>--> <el-dialog title="选择图文" v-model:visible="dialogNewsVisible" width="90%" append-to-body>
<!-- <wx-material-select--> <wx-material-select
<!-- :objData="objData"--> :objData="objData"
<!-- @selectMaterial="selectMaterial"--> @selectMaterial="selectMaterial"
<!-- :newsType="newsType"--> :newsType="newsType"
<!-- />--> />
<!-- </el-dialog>--> </el-dialog>
<!-- </el-row>--> </el-row>
<!-- </el-tab-pane>--> </el-tab-pane>
<!-- &lt;!&ndash; 类型 6：音乐 &ndash;&gt;--> <!-- 类型 6：音乐 -->
<!-- <el-tab-pane name="music">--> <el-tab-pane name="music">
<!-- <span slot="label"><i class="el-icon-service"></i> 音乐</span>--> <span slot="label"><i class="el-icon-service"></i> 音乐</span>
<!-- <el-row>--> <el-row>
<!-- <el-col :span="6">--> <el-col :span="6">
<!-- <div class="thumb-div">--> <div class="thumb-div">
<!-- <img style="width: 100px" v-if="objData.thumbMediaUrl" :src="objData.thumbMediaUrl" />--> <img style="width: 100px" v-if="objData.thumbMediaUrl" :src="objData.thumbMediaUrl" />
<!-- <i v-else class="el-icon-plus avatar-uploader-icon"></i>--> <i v-else class="el-icon-plus avatar-uploader-icon"></i>
<!-- <div class="thumb-but">--> <div class="thumb-but">
<!-- <el-upload--> <el-upload
<!-- :action="actionUrl"--> :action="actionUrl"
<!-- :headers="headers"--> :headers="headers"
<!-- multiple--> multiple
<!-- :limit="1"--> :limit="1"
<!-- :file-list="fileList"--> :file-list="fileList"
<!-- :data="uploadData"--> :data="uploadData"
<!-- :before-upload="beforeThumbImageUpload"--> :before-upload="beforeThumbImageUpload"
<!-- :on-success="handleUploadSuccess"--> :on-success="handleUploadSuccess"
<!-- >--> >
<!-- <el-button slot="trigger" size="mini" type="text">本地上传</el-button>--> <el-button slot="trigger" size="mini" type="text">本地上传</el-button>
<!-- <el-button size="mini" type="text" @click="openMaterial" style="margin-left: 5px"--> <el-button size="mini" type="text" @click="openMaterial" style="margin-left: 5px"
<!-- >素材库选择</el-button--> >素材库选择</el-button
<!-- >--> >
<!-- </el-upload>--> </el-upload>
<!-- </div>--> </div>
<!-- </div>--> </div>
<!-- <el-dialog--> <el-dialog
<!-- title="选择图片"--> title="选择图片"
<!-- v-model:visible="dialogThumbVisible"--> v-model:visible="dialogThumbVisible"
<!-- width="80%"--> width="80%"
<!-- append-to-body--> append-to-body
<!-- >--> >
<!-- <wx-material-select--> <wx-material-select
<!-- :objData="{ type: 'image', accountId: objData.accountId }"--> :objData="{ type: 'image', accountId: objData.accountId }"
<!-- @selectMaterial="selectMaterial"--> @selectMaterial="selectMaterial"
<!-- />--> />
<!-- </el-dialog>--> </el-dialog>
<!-- </el-col>--> </el-col>
<!-- <el-col :span="18">--> <el-col :span="18">
<!-- <el-input v-model="objData.title" placeholder="请输入标题" @input="inputContent" />--> <el-input v-model="objData.title" placeholder="请输入标题" @input="inputContent" />
<!-- <div style="margin: 20px 0"></div>--> <div style="margin: 20px 0"></div>
<!-- <el-input v-model="objData.description" placeholder="请输入描述" @input="inputContent" />--> <el-input v-model="objData.description" placeholder="请输入描述" @input="inputContent" />
<!-- </el-col>--> </el-col>
<!-- </el-row>--> </el-row>
<!-- <div style="margin: 20px 0"></div>--> <div style="margin: 20px 0"></div>
<!-- <el-input v-model="objData.musicUrl" placeholder="请输入音乐链接" @input="inputContent" />--> <el-input v-model="objData.musicUrl" placeholder="请输入音乐链接" @input="inputContent" />
<!-- <div style="margin: 20px 0"></div>--> <div style="margin: 20px 0"></div>
<!-- <el-input--> <el-input
<!-- v-model="objData.hqMusicUrl"--> v-model="objData.hqMusicUrl"
<!-- placeholder="请输入高质量音乐链接"--> placeholder="请输入高质量音乐链接"
<!-- @input="inputContent"--> @input="inputContent"
<!-- />--> />
<!-- </el-tab-pane>--> </el-tab-pane>
<!-- </el-tabs>--> </el-tabs>
<!--</template>--> </template>
<!--<script>--> <script>
<!--import WxNews from '@/views/mp/components/wx-news/main.vue'--> import WxNews from '@/views/mp/components/wx-news/main.vue'
<!--import WxMaterialSelect from '@/views/mp/components/wx-material-select/main.vue'--> import WxMaterialSelect from '@/views/mp/components/wx-material-select/main.vue'
<!--import WxVoicePlayer from '@/views/mp/components/wx-voice-play/main.vue'--> import WxVoicePlayer from '@/views/mp/components/wx-voice-play/main.vue'
<!--import WxVideoPlayer from '@/views/mp/components/wx-video-play/main.vue'--> import WxVideoPlayer from '@/views/mp/components/wx-video-play/main.vue'
<!--import { getAccessToken } from '@/utils/auth'--> import { getAccessToken } from '@/utils/auth'
<!--export default {--> export default {
<!-- name: 'WxReplySelect',--> name: 'WxReplySelect',
<!-- components: {--> components: {
<!-- WxNews,--> WxNews,
<!-- WxMaterialSelect,--> WxMaterialSelect,
<!-- WxVoicePlayer,--> WxVoicePlayer,
<!-- WxVideoPlayer--> WxVideoPlayer
<!-- },--> },
<!-- props: {--> props: {
<!-- objData: {--> objData: {
<!-- // 消息对象。--> // 消息对象。
<!-- type: Object, // 设置为 Object 的原因，方便属性的传递--> type: Object, // 设置为 Object 的原因，方便属性的传递
<!-- required: true--> required: true
<!-- },--> },
<!-- newsType: {--> newsType: {
<!-- // 图文类型：1、已发布图文；2、草稿箱图文--> // 图文类型：1、已发布图文；2、草稿箱图文
<!-- type: String,--> type: String,
<!-- default: '1'--> default: '1'
<!-- }--> }
<!-- },--> },
<!-- data() {--> data() {
<!-- return {--> return {
<!-- tempPlayerObj: {--> tempPlayerObj: {
<!-- type: '2'--> type: '2'
<!-- },--> },
<!-- tempObj: new Map().set(--> tempObj: new Map().set(
<!-- // 临时缓存，切换消息类型的 tab 的时候，可以保存对应的数据；--> // 临时缓存，切换消息类型的 tab 的时候，可以保存对应的数据；
<!-- this.objData.type, // 消息类型--> this.objData.type, // 消息类型
<!-- Object.assign({}, this.objData)--> Object.assign({}, this.objData)
<!-- ), // 消息内容--> ), // 消息内容
<!-- // ========== 素材选择的弹窗，是否可见 ==========--> // ========== 素材选择的弹窗，是否可见 ==========
<!-- dialogNewsVisible: false, // 图文--> dialogNewsVisible: false, // 图文
<!-- dialogImageVisible: false, // 图片--> dialogImageVisible: false, // 图片
<!-- dialogVoiceVisible: false, // 语音--> dialogVoiceVisible: false, // 语音
<!-- dialogVideoVisible: false, // 视频--> dialogVideoVisible: false, // 视频
<!-- dialogThumbVisible: false, // 缩略图--> dialogThumbVisible: false, // 缩略图
<!-- // ========== 文件上传（图片、语音、视频） ==========--> // ========== 文件上传（图片、语音、视频） ==========
<!-- fileList: [], // 文件列表--> fileList: [], // 文件列表
<!-- uploadData: {--> uploadData: {
<!-- accountId: undefined,--> accountId: undefined,
<!-- type: this.objData.type,--> type: this.objData.type,
<!-- title: '',--> title: '',
<!-- introduction: ''--> introduction: ''
<!-- },--> },
<!-- actionUrl: process.env.VUE_APP_BASE_API + '/admin-api/mp/material/upload-temporary',--> actionUrl: process.env.VUE_APP_BASE_API + '/admin-api/mp/material/upload-temporary',
<!-- headers: { Authorization: 'Bearer ' + getAccessToken() } // 设置上传的请求头部--> headers: { Authorization: 'Bearer ' + getAccessToken() } // 设置上传的请求头部
<!-- }--> }
<!-- },--> },
<!-- methods: {--> methods: {
<!-- beforeThumbImageUpload(file) {--> beforeThumbImageUpload(file) {
<!-- const isType =--> const isType =
<!-- file.type === 'image/jpeg' ||--> file.type === 'image/jpeg' ||
<!-- file.type === 'image/png' ||--> file.type === 'image/png' ||
<!-- file.type === 'image/gif' ||--> file.type === 'image/gif' ||
<!-- file.type === 'image/bmp' ||--> file.type === 'image/bmp' ||
<!-- file.type === 'image/jpg'--> file.type === 'image/jpg'
<!-- if (!isType) {--> if (!isType) {
<!-- this.$message.error('上传图片格式不对!')--> this.$message.error('上传图片格式不对!')
<!-- return false--> return false
<!-- }--> }
<!-- const isLt = file.size / 1024 / 1024 < 2--> const isLt = file.size / 1024 / 1024 < 2
<!-- if (!isLt) {--> if (!isLt) {
<!-- this.$message.error('上传图片大小不能超过 2M!')--> this.$message.error('上传图片大小不能超过 2M!')
<!-- return false--> return false
<!-- }--> }
<!-- this.uploadData.accountId = this.objData.accountId--> this.uploadData.accountId = this.objData.accountId
<!-- return true--> return true
<!-- },--> },
<!-- beforeVoiceUpload(file) {--> beforeVoiceUpload(file) {
<!-- // 校验格式--> // 校验格式
<!-- const isType =--> const isType =
<!-- file.type === 'audio/mp3' ||--> file.type === 'audio/mp3' ||
<!-- file.type === 'audio/mpeg' ||--> file.type === 'audio/mpeg' ||
<!-- file.type === 'audio/wma' ||--> file.type === 'audio/wma' ||
<!-- file.type === 'audio/wav' ||--> file.type === 'audio/wav' ||
<!-- file.type === 'audio/amr'--> file.type === 'audio/amr'
<!-- if (!isType) {--> if (!isType) {
<!-- this.$message.error('上传语音格式不对!' + file.type)--> this.$message.error('上传语音格式不对!' + file.type)
<!-- return false--> return false
<!-- }--> }
<!-- // 校验大小--> // 校验大小
<!-- const isLt = file.size / 1024 / 1024 < 2--> const isLt = file.size / 1024 / 1024 < 2
<!-- if (!isLt) {--> if (!isLt) {
<!-- this.$message.error('上传语音大小不能超过 2M!')--> this.$message.error('上传语音大小不能超过 2M!')
<!-- return false--> return false
<!-- }--> }
<!-- this.uploadData.accountId = this.objData.accountId--> this.uploadData.accountId = this.objData.accountId
<!-- return true--> return true
<!-- },--> },
<!-- beforeImageUpload(file) {--> beforeImageUpload(file) {
<!-- // 校验格式--> // 校验格式
<!-- const isType =--> const isType =
<!-- file.type === 'image/jpeg' ||--> file.type === 'image/jpeg' ||
<!-- file.type === 'image/png' ||--> file.type === 'image/png' ||
<!-- file.type === 'image/gif' ||--> file.type === 'image/gif' ||
<!-- file.type === 'image/bmp' ||--> file.type === 'image/bmp' ||
<!-- file.type === 'image/jpg'--> file.type === 'image/jpg'
<!-- if (!isType) {--> if (!isType) {
<!-- this.$message.error('上传图片格式不对!')--> this.$message.error('上传图片格式不对!')
<!-- return false--> return false
<!-- }--> }
<!-- // 校验大小--> // 校验大小
<!-- const isLt = file.size / 1024 / 1024 < 2--> const isLt = file.size / 1024 / 1024 < 2
<!-- if (!isLt) {--> if (!isLt) {
<!-- this.$message.error('上传图片大小不能超过 2M!')--> this.$message.error('上传图片大小不能超过 2M!')
<!-- return false--> return false
<!-- }--> }
<!-- this.uploadData.accountId = this.objData.accountId--> this.uploadData.accountId = this.objData.accountId
<!-- return true--> return true
<!-- },--> },
<!-- beforeVideoUpload(file) {--> beforeVideoUpload(file) {
<!-- // 校验格式--> // 校验格式
<!-- const isType = file.type === 'video/mp4'--> const isType = file.type === 'video/mp4'
<!-- if (!isType) {--> if (!isType) {
<!-- this.$message.error('上传视频格式不对!')--> this.$message.error('上传视频格式不对!')
<!-- return false--> return false
<!-- }--> }
<!-- // 校验大小--> // 校验大小
<!-- const isLt = file.size / 1024 / 1024 < 10--> const isLt = file.size / 1024 / 1024 < 10
<!-- if (!isLt) {--> if (!isLt) {
<!-- this.$message.error('上传视频大小不能超过 10M!')--> this.$message.error('上传视频大小不能超过 10M!')
<!-- return false--> return false
<!-- }--> }
<!-- this.uploadData.accountId = this.objData.accountId--> this.uploadData.accountId = this.objData.accountId
<!-- return true--> return true
<!-- },--> },
<!-- handleUploadSuccess(response, file, fileList) {--> handleUploadSuccess(response, file, fileList) {
<!-- if (response.code !== 0) {--> if (response.code !== 0) {
<!-- this.$message.error('上传出错：' + response.msg)--> this.$message.error('上传出错：' + response.msg)
<!-- return false--> return false
<!-- }--> }
<!-- // 清空上传时的各种数据--> // 清空上传时的各种数据
<!-- this.fileList = []--> this.fileList = []
<!-- this.uploadData.title = ''--> this.uploadData.title = ''
<!-- this.uploadData.introduction = ''--> this.uploadData.introduction = ''
<!-- // 上传好的文件，本质是个素材，所以可以进行选中--> // 上传好的文件，本质是个素材，所以可以进行选中
<!-- let item = response.data--> let item = response.data
<!-- this.selectMaterial(item)--> this.selectMaterial(item)
<!-- },--> },
<!-- /**--> /**
<!-- * 切换消息类型的 tab--> * 切换消息类型的 tab
<!-- *--> *
<!-- * @param tab tab--> * @param tab tab
<!-- */--> */
<!-- handleClick(tab) {--> handleClick(tab) {
<!-- // 设置后续文件上传的文件类型--> // 设置后续文件上传的文件类型
<!-- this.uploadData.type = this.objData.type--> this.uploadData.type = this.objData.type
<!-- if (this.uploadData.type === 'music') {--> if (this.uploadData.type === 'music') {
<!-- // 【音乐】上传的是缩略图--> // 【音乐】上传的是缩略图
<!-- this.uploadData.type = 'thumb'--> this.uploadData.type = 'thumb'
<!-- }--> }
<!-- // 从 tempObj 临时缓存中，获取对应的数据，并设置回 objData--> // 从 tempObj 临时缓存中，获取对应的数据，并设置回 objData
<!-- let tempObjItem = this.tempObj.get(this.objData.type)--> let tempObjItem = this.tempObj.get(this.objData.type)
<!-- if (tempObjItem) {--> if (tempObjItem) {
<!-- this.objData.content = tempObjItem.content ? tempObjItem.content : null--> this.objData.content = tempObjItem.content ? tempObjItem.content : null
<!-- this.objData.mediaId = tempObjItem.mediaId ? tempObjItem.mediaId : null--> this.objData.mediaId = tempObjItem.mediaId ? tempObjItem.mediaId : null
<!-- this.objData.url = tempObjItem.url ? tempObjItem.url : null--> this.objData.url = tempObjItem.url ? tempObjItem.url : null
<!-- this.objData.name = tempObjItem.url ? tempObjItem.name : null--> this.objData.name = tempObjItem.url ? tempObjItem.name : null
<!-- this.objData.title = tempObjItem.title ? tempObjItem.title : null--> this.objData.title = tempObjItem.title ? tempObjItem.title : null
<!-- this.objData.description = tempObjItem.description ? tempObjItem.description : null--> this.objData.description = tempObjItem.description ? tempObjItem.description : null
<!-- return--> return
<!-- }--> }
<!-- // 如果获取不到，需要把 objData 复原--> // 如果获取不到，需要把 objData 复原
<!-- // 必须使用 $set 赋值，不然 input 无法输入内容--> // 必须使用 $set 赋值，不然 input 无法输入内容
<!-- this.$set(this.objData, 'content', '')--> this.$set(this.objData, 'content', '')
<!-- this.$delete(this.objData, 'mediaId')--> this.$delete(this.objData, 'mediaId')
<!-- this.$delete(this.objData, 'url')--> this.$delete(this.objData, 'url')
<!-- this.$set(this.objData, 'title', '')--> this.$set(this.objData, 'title', '')
<!-- this.$set(this.objData, 'description', '')--> this.$set(this.objData, 'description', '')
<!-- },--> },
<!-- /**--> /**
<!-- * 选择素材，将设置设置到 objData 变量--> * 选择素材，将设置设置到 objData 变量
<!-- *--> *
<!-- * @param item 素材--> * @param item 素材
<!-- */--> */
<!-- selectMaterial(item) {--> selectMaterial(item) {
<!-- // 选择好素材，所以隐藏弹窗--> // 选择好素材，所以隐藏弹窗
<!-- this.closeMaterial()--> this.closeMaterial()
<!-- // 创建 tempObjItem 对象，并设置对应的值--> // 创建 tempObjItem 对象，并设置对应的值
<!-- let tempObjItem = {}--> let tempObjItem = {}
<!-- tempObjItem.type = this.objData.type--> tempObjItem.type = this.objData.type
<!-- if (this.objData.type === 'news') {--> if (this.objData.type === 'news') {
<!-- tempObjItem.articles = item.content.newsItem--> tempObjItem.articles = item.content.newsItem
<!-- this.objData.articles = item.content.newsItem--> this.objData.articles = item.content.newsItem
<!-- } else if (this.objData.type === 'music') {--> } else if (this.objData.type === 'music') {
<!-- // 音乐需要特殊处理，因为选择的是图片的缩略图--> // 音乐需要特殊处理，因为选择的是图片的缩略图
<!-- tempObjItem.thumbMediaId = item.mediaId--> tempObjItem.thumbMediaId = item.mediaId
<!-- this.objData.thumbMediaId = item.mediaId--> this.objData.thumbMediaId = item.mediaId
<!-- tempObjItem.thumbMediaUrl = item.url--> tempObjItem.thumbMediaUrl = item.url
<!-- this.objData.thumbMediaUrl = item.url--> this.objData.thumbMediaUrl = item.url
<!-- // title、introduction、musicUrl、hqMusicUrl：从 objData 到 tempObjItem，避免上传素材后，被覆盖掉--> // title、introduction、musicUrl、hqMusicUrl：从 objData 到 tempObjItem，避免上传素材后，被覆盖掉
<!-- tempObjItem.title = this.objData.title || ''--> tempObjItem.title = this.objData.title || ''
<!-- tempObjItem.introduction = this.objData.introduction || ''--> tempObjItem.introduction = this.objData.introduction || ''
<!-- tempObjItem.musicUrl = this.objData.musicUrl || ''--> tempObjItem.musicUrl = this.objData.musicUrl || ''
<!-- tempObjItem.hqMusicUrl = this.objData.hqMusicUrl || ''--> tempObjItem.hqMusicUrl = this.objData.hqMusicUrl || ''
<!-- } else if (this.objData.type === 'image' || this.objData.type === 'voice') {--> } else if (this.objData.type === 'image' || this.objData.type === 'voice') {
<!-- tempObjItem.mediaId = item.mediaId--> tempObjItem.mediaId = item.mediaId
<!-- this.objData.mediaId = item.mediaId--> this.objData.mediaId = item.mediaId
<!-- tempObjItem.url = item.url--> tempObjItem.url = item.url
<!-- this.objData.url = item.url--> this.objData.url = item.url
<!-- tempObjItem.name = item.name--> tempObjItem.name = item.name
<!-- this.objData.name = item.name--> this.objData.name = item.name
<!-- } else if (this.objData.type === 'video') {--> } else if (this.objData.type === 'video') {
<!-- tempObjItem.mediaId = item.mediaId--> tempObjItem.mediaId = item.mediaId
<!-- this.objData.mediaId = item.mediaId--> this.objData.mediaId = item.mediaId
<!-- tempObjItem.url = item.url--> tempObjItem.url = item.url
<!-- this.objData.url = item.url--> this.objData.url = item.url
<!-- tempObjItem.name = item.name--> tempObjItem.name = item.name
<!-- this.objData.name = item.name--> this.objData.name = item.name
<!-- // title、introduction：从 item 到 tempObjItem，因为素材里有 title、introduction--> // title、introduction：从 item 到 tempObjItem，因为素材里有 title、introduction
<!-- if (item.title) {--> if (item.title) {
<!-- this.objData.title = item.title || ''--> this.objData.title = item.title || ''
<!-- tempObjItem.title = item.title || ''--> tempObjItem.title = item.title || ''
<!-- }--> }
<!-- if (item.introduction) {--> if (item.introduction) {
<!-- this.objData.description = item.introduction || '' // 消息使用的是 description，素材使用的是 introduction，所以转换下--> this.objData.description = item.introduction || '' // 消息使用的是 description，素材使用的是 introduction，所以转换下
<!-- tempObjItem.description = item.introduction || ''--> tempObjItem.description = item.introduction || ''
<!-- }--> }
<!-- } else if (this.objData.type === 'text') {--> } else if (this.objData.type === 'text') {
<!-- this.objData.content = item.content || ''--> this.objData.content = item.content || ''
<!-- }--> }
<!-- // 最终设置到临时缓存--> // 最终设置到临时缓存
<!-- this.tempObj.set(this.objData.type, tempObjItem)--> this.tempObj.set(this.objData.type, tempObjItem)
<!-- },--> },
<!-- openMaterial() {--> openMaterial() {
<!-- if (this.objData.type === 'news') {--> if (this.objData.type === 'news') {
<!-- this.dialogNewsVisible = true--> this.dialogNewsVisible = true
<!-- } else if (this.objData.type === 'image') {--> } else if (this.objData.type === 'image') {
<!-- this.dialogImageVisible = true--> this.dialogImageVisible = true
<!-- } else if (this.objData.type === 'voice') {--> } else if (this.objData.type === 'voice') {
<!-- this.dialogVoiceVisible = true--> this.dialogVoiceVisible = true
<!-- } else if (this.objData.type === 'video') {--> } else if (this.objData.type === 'video') {
<!-- this.dialogVideoVisible = true--> this.dialogVideoVisible = true
<!-- } else if (this.objData.type === 'music') {--> } else if (this.objData.type === 'music') {
<!-- this.dialogThumbVisible = true--> this.dialogThumbVisible = true
<!-- }--> }
<!-- },--> },
<!-- closeMaterial() {--> closeMaterial() {
<!-- this.dialogNewsVisible = false--> this.dialogNewsVisible = false
<!-- this.dialogImageVisible = false--> this.dialogImageVisible = false
<!-- this.dialogVoiceVisible = false--> this.dialogVoiceVisible = false
<!-- this.dialogVideoVisible = false--> this.dialogVideoVisible = false
<!-- this.dialogThumbVisible = false--> this.dialogThumbVisible = false
<!-- },--> },
<!-- deleteObj() {--> deleteObj() {
<!-- if (this.objData.type === 'news') {--> if (this.objData.type === 'news') {
<!-- this.$delete(this.objData, 'articles')--> this.$delete(this.objData, 'articles')
<!-- } else if (this.objData.type === 'image') {--> } else if (this.objData.type === 'image') {
<!-- this.objData.mediaId = null--> this.objData.mediaId = null
<!-- this.$delete(this.objData, 'url')--> this.$delete(this.objData, 'url')
<!-- this.objData.name = null--> this.objData.name = null
<!-- } else if (this.objData.type === 'voice') {--> } else if (this.objData.type === 'voice') {
<!-- this.objData.mediaId = null--> this.objData.mediaId = null
<!-- this.$delete(this.objData, 'url')--> this.$delete(this.objData, 'url')
<!-- this.objData.name = null--> this.objData.name = null
<!-- } else if (this.objData.type === 'video') {--> } else if (this.objData.type === 'video') {
<!-- this.objData.mediaId = null--> this.objData.mediaId = null
<!-- this.$delete(this.objData, 'url')--> this.$delete(this.objData, 'url')
<!-- this.objData.name = null--> this.objData.name = null
<!-- this.objData.title = null--> this.objData.title = null
<!-- this.objData.description = null--> this.objData.description = null
<!-- } else if (this.objData.type === 'music') {--> } else if (this.objData.type === 'music') {
<!-- this.objData.thumbMediaId = null--> this.objData.thumbMediaId = null
<!-- this.objData.thumbMediaUrl = null--> this.objData.thumbMediaUrl = null
<!-- this.objData.title = null--> this.objData.title = null
<!-- this.objData.description = null--> this.objData.description = null
<!-- this.objData.musicUrl = null--> this.objData.musicUrl = null
<!-- this.objData.hqMusicUrl = null--> this.objData.hqMusicUrl = null
<!-- } else if (this.objData.type === 'text') {--> } else if (this.objData.type === 'text') {
<!-- this.objData.content = null--> this.objData.content = null
<!-- }--> }
<!-- // 覆盖缓存--> // 覆盖缓存
<!-- this.tempObj.set(this.objData.type, Object.assign({}, this.objData))--> this.tempObj.set(this.objData.type, Object.assign({}, this.objData))
<!-- },--> },
<!-- /**--> /**
<!-- * 输入时，缓存每次 objData 到 tempObj 中--> * 输入时，缓存每次 objData 到 tempObj 中
<!-- *--> *
<!-- * why？不确定为什么 v-model="objData.content" 不能自动缓存，所以通过这样的方式--> * why？不确定为什么 v-model="objData.content" 不能自动缓存，所以通过这样的方式
<!-- */--> */
<!-- inputContent(str) {--> inputContent(str) {
<!-- // 覆盖缓存--> // 覆盖缓存
<!-- this.tempObj.set(this.objData.type, Object.assign({}, this.objData))--> this.tempObj.set(this.objData.type, Object.assign({}, this.objData))
<!-- }--> }
<!-- }--> }
<!--}--> }
<!--</script>--> </script>
<!--<style lang="scss" scoped>--> <style lang="scss" scoped>
<!--.public-account-management {--> .public-account-management {
<!-- .el-input {--> .el-input {
<!-- width: 70%;--> width: 70%;
<!-- margin-right: 2%;--> margin-right: 2%;
<!-- }--> }
<!--}--> }
<!--.pagination {--> .pagination {
<!-- text-align: right;--> text-align: right;
<!-- margin-right: 25px;--> margin-right: 25px;
<!--}--> }
<!--.select-item {--> .select-item {
<!-- width: 280px;--> width: 280px;
<!-- padding: 10px;--> padding: 10px;
<!-- margin: 0 auto 10px auto;--> margin: 0 auto 10px auto;
<!-- border: 1px solid #eaeaea;--> border: 1px solid #eaeaea;
<!--}--> }
<!--.select-item2 {--> .select-item2 {
<!-- padding: 10px;--> padding: 10px;
<!-- margin: 0 auto 10px auto;--> margin: 0 auto 10px auto;
<!-- border: 1px solid #eaeaea;--> border: 1px solid #eaeaea;
<!--}--> }
<!--.ope-row {--> .ope-row {
<!-- padding-top: 10px;--> padding-top: 10px;
<!-- text-align: center;--> text-align: center;
<!--}--> }
<!--.item-name {--> .item-name {
<!-- font-size: 12px;--> font-size: 12px;
<!-- overflow: hidden;--> overflow: hidden;
<!-- text-overflow: ellipsis;--> text-overflow: ellipsis;
<!-- white-space: nowrap;--> white-space: nowrap;
<!-- text-align: center;--> text-align: center;
<!--}--> }
<!--.el-form-item__content {--> .el-form-item__content {
<!-- line-height: unset !important;--> line-height: unset !important;
<!--}--> }
<!--.col-select {--> .col-select {
<!-- border: 1px solid rgb(234, 234, 234);--> border: 1px solid rgb(234, 234, 234);
<!-- padding: 50px 0px;--> padding: 50px 0px;
<!-- height: 160px;--> height: 160px;
<!-- width: 49.5%;--> width: 49.5%;
<!--}--> }
<!--.col-select2 {--> .col-select2 {
<!-- border: 1px solid rgb(234, 234, 234);--> border: 1px solid rgb(234, 234, 234);
<!-- padding: 50px 0px;--> padding: 50px 0px;
<!-- height: 160px;--> height: 160px;
<!--}--> }
<!--.col-add {--> .col-add {
<!-- border: 1px solid rgb(234, 234, 234);--> border: 1px solid rgb(234, 234, 234);
<!-- padding: 50px 0px;--> padding: 50px 0px;
<!-- height: 160px;--> height: 160px;
<!-- width: 49.5%;--> width: 49.5%;
<!-- float: right;--> float: right;
<!--}--> }
<!--.avatar-uploader-icon {--> .avatar-uploader-icon {
<!-- border: 1px solid #d9d9d9;--> border: 1px solid #d9d9d9;
<!-- font-size: 28px;--> font-size: 28px;
<!-- color: #8c939d;--> color: #8c939d;
<!-- width: 100px !important;--> width: 100px !important;
<!-- height: 100px !important;--> height: 100px !important;
<!-- line-height: 100px !important;--> line-height: 100px !important;
<!-- text-align: center;--> text-align: center;
<!--}--> }
<!--.material-img {--> .material-img {
<!-- width: 100%;--> width: 100%;
<!--}--> }
<!--.thumb-div {--> .thumb-div {
<!-- display: inline-block;--> display: inline-block;
<!-- text-align: center;--> text-align: center;
<!--}--> }
<!--.item-infos {--> .item-infos {
<!-- width: 30%;--> width: 30%;
<!-- margin: auto;--> margin: auto;
<!--}--> }
<!--</style>--> </style>
src/views/mp/components/wx-video-play/main.vue
...@@ -8,110 +8,84 @@ ...@@ -8,110 +8,84 @@
存在的问题：mediaId 有效期是 3 天，超过时间后无法播放 存在的问题：mediaId 有效期是 3 天，超过时间后无法播放
2）重构后的做法：后端接收到微信公众号的视频消息后，将视频消息的 media_id 的文件内容保存到文件服务器中，这样前端可以直接使用 URL 播放。 2）重构后的做法：后端接收到微信公众号的视频消息后，将视频消息的 media_id 的文件内容保存到文件服务器中，这样前端可以直接使用 URL 播放。
② 体验优化：弹窗关闭后，自动暂停视频的播放 ② 体验优化：弹窗关闭后，自动暂停视频的播放
--> -->
<template> <template>
<div>
<!-- 提示 -->
<div @click="playVideo()"> <div @click="playVideo()">
<el-icon> <!-- 提示 -->
<VideoPlay /> <div>
</el-icon> <Icon icon="ep:video-play" class="mr-5px" />
<p>点击播放视频</p> <p>点击播放视频</p>
</div> </div>
<!-- 弹窗播放 --> <!-- 弹窗播放 -->
<el-dialog <el-dialog
v-model="dialogVideo"
title="视频播放" title="视频播放"
v-model:visible="dialogVideo"
width="40%" width="40%"
append-to-body append-to-body
@close="closeDialog" @close="closeDialog"
> >
<template #footer>
<video-player <video-player
v-if="playerOptions.sources[0].src" v-if="dialogVideo"
class="video-player vjs-custom-skin" class="video-player vjs-big-play-centered"
ref="videoPlayerRef" :src="url"
:playsinline="true" poster=""
:options="playerOptions" crossorigin="anonymous"
@play="onPlayerPlay($event)" playsinline
@pause="onPlayerPause($event)" controls
:volume="0.6"
:height="320"
:playback-rates="[0.7, 1.0, 1.5, 2.0]"
/> />
</template>
<!-- 事件，暫時沒用
@mounted="handleMounted"-->
<!-- @ready="handleEvent($event)"-->
<!-- @play="handleEvent($event)"-->
<!-- @pause="handleEvent($event)"-->
<!-- @ended="handleEvent($event)"-->
<!-- @loadeddata="handleEvent($event)"-->
<!-- @waiting="handleEvent($event)"-->
<!-- @playing="handleEvent($event)"-->
<!-- @canplay="handleEvent($event)"-->
<!-- @canplaythrough="handleEvent($event)"-->
<!-- @timeupdate="handleEvent(player?.currentTime())"-->
</el-dialog> </el-dialog>
</div> </div>
</template> </template>
<script setup lang="ts" name="WxVideoPlayer"> <script lang="ts" name="WxVideoPlayer">
// 引入 videoPlayer 相关组件。教程：https://juejin.cn/post/6923056942281654285 //升级videojs6.0版本,重寫6.0版本
import { videoPlayer } from 'vue-video-player' import 'video.js/dist/video-js.css'
import { defineComponent } from 'vue'
import { VideoPlayer } from '@videojs-player/vue'
import 'video.js/dist/video-js.css' import 'video.js/dist/video-js.css'
import 'vue-video-player/src/custom-theme.css'
import { VideoPlay } from '@element-plus/icons-vue'
const props = defineProps({ export default defineComponent({
components: {
VideoPlayer
},
props: {
url: { url: {
// 视频地址，例如说：https://www.iocoder.cn/xxx.mp4 // 视频地址，例如说：https://vjs.zencdn.net/v/oceans.mp4
type: String, type: String,
required: true required: true
} }
}) },
const videoPlayerRef = ref() setup() {
const dialogVideo = ref(false) // const videoPlayerRef = ref(null)
const playerOptions = reactive({ const dialogVideo = ref(false)
playbackRates: [0.5, 1.0, 1.5, 2.0], // 播放速度
autoplay: false, // 如果 true,浏览器准备好时开始回放。
muted: false, // 默认情况下将会消除任何音频。
loop: false, // 导致视频一结束就重新开始。
preload: 'auto', // 建议浏览器在 <video> 加载元素后是否应该开始下载视频数据。auto 浏览器选择最佳行为,立即开始加载视频（如果浏览器支持）
language: 'zh-CN',
aspectRatio: '16:9', // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
fluid: true, // 当true时，Video.js player 将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
sources: [
{
type: 'video/mp4',
src: '' // 你的视频地址（必填）【重要】
}
],
poster: '', // 你的封面地址
width: document.documentElement.clientWidth,
notSupportedMessage: '此视频暂无法播放，请稍后再试', //允许覆盖 Video.js 无法播放媒体源时显示的默认信息。
controlBar: {
timeDivider: true,
durationDisplay: true,
remainingTimeDisplay: false,
fullscreenToggle: true //全屏按钮
}
})
const playVideo = () => { const handleEvent = (log) => {
console.log('Basic player event', log)
}
const playVideo = () => {
dialogVideo.value = true dialogVideo.value = true
playerOptions.sources[0].src = props.url }
}
const closeDialog = () => {
// 暂停播放
// videoPlayerRef.player.pause()
}
// onPlayerPlay(player) {},
// // // eslint-disable-next-line @typescript-eslint/no-unused-vars
// // eslint-disable-next-line @typescript-eslint/no-unused-vars,no-unused-vars
// onPlayerPause(player) {}
// methods: { return { handleEvent, playVideo, dialogVideo }
// playVideo() { }
// this.dialogVideo = true })
// // 设置地址
// this.playerOptions.sources[0]['src'] = this.url
// },
// closeDialog() {
// // 暂停播放
// this.$refs.videoPlayer.player.pause()
// },
//
// //todo player组件引入可能有问题
//
// // eslint-disable-next-line @typescript-eslint/no-unused-vars,no-unused-vars
// onPlayerPlay(player) {},
// // // eslint-disable-next-line @typescript-eslint/no-unused-vars
// // eslint-disable-next-line @typescript-eslint/no-unused-vars,no-unused-vars
// onPlayerPause(player) {}
// }
</script> </script>
src/views/mp/components/wx-voice-play/main.vue
...@@ -25,6 +25,7 @@ ...@@ -25,6 +25,7 @@
<script setup lang="ts" name="WxVoicePlayer"> <script setup lang="ts" name="WxVoicePlayer">
// 因为微信语音是 amr 格式，所以需要用到 amr 解码器：https://www.npmjs.com/package/benz-amr-recorder // 因为微信语音是 amr 格式，所以需要用到 amr 解码器：https://www.npmjs.com/package/benz-amr-recorder
import BenzAMRRecorder from 'benz-amr-recorder' import BenzAMRRecorder from 'benz-amr-recorder'
const props = defineProps({ const props = defineProps({
......
src/views/mp/freePublish/index.vue
...@@ -19,8 +19,14 @@ ...@@ -19,8 +19,14 @@
</el-select> </el-select>
</el-form-item> </el-form-item>
<el-form-item> <el-form-item>
<el-button @click="handleQuery"><Icon icon="ep:search" class="mr-5px" /> 搜索</el-button> <el-button @click="handleQuery">
<el-button @click="resetQuery"><Icon icon="ep:refresh" class="mr-5px" /> 重置</el-button> <Icon icon="ep:search" class="mr-5px" />
搜索
</el-button>
<el-button @click="resetQuery">
<Icon icon="ep:refresh" class="mr-5px" />
重置
</el-button>
</el-form-item> </el-form-item>
</el-form> </el-form>
</content-wrap> </content-wrap>
...@@ -63,12 +69,19 @@ ...@@ -63,12 +69,19 @@
import { getFreePublishPage, deleteFreePublish } from '@/api/mp/freePublish' import { getFreePublishPage, deleteFreePublish } from '@/api/mp/freePublish'
import * as MpAccountApi from '@/api/mp/account' import * as MpAccountApi from '@/api/mp/account'
import WxNews from '@/views/mp/components/wx-news/main.vue' import WxNews from '@/views/mp/components/wx-news/main.vue'
const message = useMessage() // 消息弹窗 const message = useMessage() // 消息弹窗
const loading = ref(true) // 列表的加载中 const loading = ref(true) // 列表的加载中
const total = ref(0) // 列表的总页数 const total = ref(0) // 列表的总页数
const list = ref([]) // 列表的数据 const list = ref([]) // 列表的数据
const queryParams = reactive({ interface QueryParams {
currentPage: number | undefined | string
pageNo: number | undefined | string
accountId: number | undefined | string
}
const queryParams: QueryParams = reactive({
currentPage: 1, // 当前页数 currentPage: 1, // 当前页数
pageNo: 1, // 当前页数 pageNo: 1, // 当前页数
accountId: undefined // 当前页数 accountId: undefined // 当前页数
...@@ -115,7 +128,6 @@ const resetQuery = () => { ...@@ -115,7 +128,6 @@ const resetQuery = () => {
queryFormRef.value.resetFields() queryFormRef.value.resetFields()
// 默认选中第一个 // 默认选中第一个
if (accountList.value.length > 0) { if (accountList.value.length > 0) {
// @ts-ignore
queryParams.accountId = accountList.value[0].id queryParams.accountId = accountList.value[0].id
} }
handleQuery() handleQuery()
...@@ -144,7 +156,6 @@ onMounted(async () => { ...@@ -144,7 +156,6 @@ onMounted(async () => {
accountList.value = await MpAccountApi.getSimpleAccountList() accountList.value = await MpAccountApi.getSimpleAccountList()
// 选中第一个 // 选中第一个
if (accountList.value.length > 0) { if (accountList.value.length > 0) {
// @ts-ignore
queryParams.accountId = accountList.value[0].id queryParams.accountId = accountList.value[0].id
} }
await getList() await getList()
......
src/views/mp/message/index.vue
...@@ -181,17 +181,17 @@ ...@@ -181,17 +181,17 @@
</ContentWrap> </ContentWrap>
</template> </template>
<script setup lang="ts" name="MpMessage"> <script setup lang="ts" name="MpMessage">
import { DICT_TYPE, getStrDictOptions } from '@/utils/dict' import WxVideoPlayer from '@/views/mp/components/wx-video-play/main.vue'
import { dateFormatter } from '@/utils/formatTime'
// import WxVideoPlayer from '@/views/mp/components/wx-video-play/main.vue'
import WxVoicePlayer from '@/views/mp/components/wx-voice-play/main.vue' import WxVoicePlayer from '@/views/mp/components/wx-voice-play/main.vue'
// import WxMsg from '@/views/mp/components/wx-msg/main.vue' import WxMsg from '@/views/mp/components/wx-msg/main.vue'
import WxLocation from '@/views/mp/components/wx-location/main.vue' import WxLocation from '@/views/mp/components/wx-location/main.vue'
// import WxMusic from '@/views/mp/components/wx-music/main.vue' import WxMusic from '@/views/mp/components/wx-music/main.vue'
// import WxNews from '@/views/mp/components/wx-news/main.vue' import WxNews from '@/views/mp/components/wx-news/main.vue'
import * as MpAccountApi from '@/api/mp/account' import * as MpAccountApi from '@/api/mp/account'
import * as MpMessageApi from '@/api/mp/message' import * as MpMessageApi from '@/api/mp/message'
const message = useMessage() // 消息弹窗 const message = useMessage() // 消息弹窗
import { DICT_TYPE, getStrDictOptions } from '@/utils/dict'
import { dateFormatter } from '@/utils/formatTime'
const loading = ref(true) // 列表的加载中 const loading = ref(true) // 列表的加载中
const total = ref(0) // 列表的总页数 const total = ref(0) // 列表的总页数
......
src/views/mp/tag/index.vue
...@@ -28,13 +28,21 @@ ...@@ -28,13 +28,21 @@
/> />
</el-form-item> </el-form-item>
<el-form-item> <el-form-item>
<el-button @click="handleQuery"><Icon icon="ep:search" class="mr-5px" /> 搜索</el-button> <el-button @click="handleQuery">
<el-button @click="resetQuery"><Icon icon="ep:refresh" class="mr-5px" /> 重置</el-button> <Icon icon="ep:search" class="mr-5px" />
搜索
</el-button>
<el-button @click="resetQuery">
<Icon icon="ep:refresh" class="mr-5px" />
重置
</el-button>
<el-button type="primary" plain @click="openForm('create')" v-hasPermi="['mp:tag:create']"> <el-button type="primary" plain @click="openForm('create')" v-hasPermi="['mp:tag:create']">
<Icon icon="ep:plus" class="mr-5px" /> 新增 <Icon icon="ep:plus" class="mr-5px" />
新增
</el-button> </el-button>
<el-button type="success" plain @click="handleSync" v-hasPermi="['mp:tag:sync']"> <el-button type="success" plain @click="handleSync" v-hasPermi="['mp:tag:sync']">
<Icon icon="ep:refresh" class="mr-5px" /> 同步 <Icon icon="ep:refresh" class="mr-5px" />
同步
</el-button> </el-button>
</el-form-item> </el-form-item>
</el-form> </el-form>
...@@ -91,6 +99,7 @@ import { dateFormatter } from '@/utils/formatTime' ...@@ -91,6 +99,7 @@ import { dateFormatter } from '@/utils/formatTime'
import * as MpTagApi from '@/api/mp/tag' import * as MpTagApi from '@/api/mp/tag'
import * as MpAccountApi from '@/api/mp/account' import * as MpAccountApi from '@/api/mp/account'
import TagForm from './TagForm.vue' import TagForm from './TagForm.vue'
const message = useMessage() // 消息弹窗 const message = useMessage() // 消息弹窗
const { t } = useI18n() // 国际化 const { t } = useI18n() // 国际化
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or sign in to comment