From 2905ea764419a84fd56b4a978e3597fa05754ee0 Mon Sep 17 00:00:00 2001 From: congzc Date: Fri, 5 May 2023 17:03:07 +0800 Subject: [PATCH] 1 --- src/api/downloadVideo.js | 12 ++++++ src/components/common/head.vue | 20 +++++++++ src/store/modules/user.js | 24 ++++++++++- src/views/model/editModel.vue | 2 +- src/views/videoDownload/videoDownload.vue | 51 +++++++++++++++++------ 5 files changed, 94 insertions(+), 15 deletions(-) diff --git a/src/api/downloadVideo.js b/src/api/downloadVideo.js index 9be367d..d733af5 100644 --- a/src/api/downloadVideo.js +++ b/src/api/downloadVideo.js @@ -10,4 +10,16 @@ export function doGetVideoDetialById(id) { url: `/api/userVideo/videoDetial?videoId=${id}`, method: 'get', }) +} + +/** + * @description 下载视频 + * @param id + * @returns data + */ +export function exportVideoApi(id) { + return request({ + url: `/api/userVideo/exportVideo?id=${id}`, + method: 'get', + }) } \ No newline at end of file diff --git a/src/components/common/head.vue b/src/components/common/head.vue index c0349e2..4ea2467 100644 --- a/src/components/common/head.vue +++ b/src/components/common/head.vue @@ -28,6 +28,7 @@ import Vue from 'vue'; import { mapState, mapActions } from 'vuex'; import { Toast, Dialog } from 'vant'; import { doLoginOut } from '../../api/login'; +import { getDeviceType } from '../../utils'; Vue.use(Toast); export default { @@ -71,6 +72,8 @@ export default { // this.$forceUpdate(); } localStorage.removeItem('AccessToken'); + this.$store.commit('user/removeToken'); + this.$store.commit('user/removeUserInfo'); } catch (error) { console.log(error, 'error'); Toast.fail(error.message); @@ -79,6 +82,23 @@ export default { }, created() { this.hasToken = localStorage.getItem('AccessToken'); + + // 判断设备 + const deviceType = getDeviceType(); + if (!deviceType) { + // 设备类型为pc + isAndroid = false; + this.isAndroid = false; + this.$store.commit('user/setIsAndroid', false); + } else { + if (deviceType[0] == 'Android') { + // 设备类型为安卓 + this.$store.commit('user/setIsAndroid', true); + } else { + // 其他设备 + this.$store.commit('user/setIsAndroid', false); + } + } } }; diff --git a/src/store/modules/user.js b/src/store/modules/user.js index 6ca704c..8e99bbd 100644 --- a/src/store/modules/user.js +++ b/src/store/modules/user.js @@ -1,16 +1,38 @@ let user = { + namespaced: true, state: { - token: null + // token对象 + token: localStorage.getItem('AccessToken') || '', + // 用户信息对象 + userInfo: JSON.parse(localStorage.getItem('userinfo') || '{}'), + isAndroid:localStorage.getItem('isAndroid') || '', }, mutations: { // 设置token setToken(state, newToken) { + localStorage.setItem('token', newToken) state.token = newToken }, // 删除token removeToken(state) { + localStorage.removeItem('AccessToken'); state.token = null // 删除vuex的token }, + // 设置token + setUserInfo(state, newUserInfo) { + localStorage.setItem('userinfo', newUserInfo) + state.userInfo = newUserInfo + }, + // 删除token + removeUserInfo(state) { + localStorage.removeItem('userinfo') + state.userInfo = null // 删除vuex的UserInfo + }, + // 设置token + setIsAndroid(state, newIsAndroid) { + localStorage.setItem('isAndroid', newIsAndroid) + state.isAndroid = newIsAndroid + }, }, actions: { } diff --git a/src/views/model/editModel.vue b/src/views/model/editModel.vue index 15d6f41..e3c9ef1 100644 --- a/src/views/model/editModel.vue +++ b/src/views/model/editModel.vue @@ -27,7 +27,7 @@ 第一步:添加文案
- 已录入{{ textareaContent.length }}字 + 已录入{{ textareaContent.length }}/300字   
diff --git a/src/views/videoDownload/videoDownload.vue b/src/views/videoDownload/videoDownload.vue index 659a633..10c3a08 100644 --- a/src/views/videoDownload/videoDownload.vue +++ b/src/views/videoDownload/videoDownload.vue @@ -11,9 +11,9 @@ - +
@@ -33,7 +33,7 @@ import { saveAs } from 'file-saver'; // 接口 import { getModelDetailById } from '../../api/getPaper'; -import { doGetVideoDetialById } from '../../api/downloadVideo'; +import { doGetVideoDetialById, exportVideoApi } from '../../api/downloadVideo'; Vue.use(Toast); export default { @@ -43,9 +43,13 @@ export default { data() { return { inPage: false, + id: null, + isAndroid: true, + baseUrl: null, // videoSrc: // 'https://wenlian.wenzhou.gov.cn:8001//upload/video/%E3%80%8A%E7%93%AF%E8%B6%8A%E4%B9%8B%E5%8D%8E%E3%80%8B%E7%89%87%E8%8A%B11.mp4', videoSrc: null, //播放地址路径 + videoId: null, //视频ID title: null, // 视频名称 coverUrl: null, //封面图 height: null @@ -56,7 +60,10 @@ export default { characters: state => state.publicObj.characters }) }, - created() {}, + created() { + this.id = this.$route.query.id; + this.baseUrl = process.env.VUE_APP_API_ROOT; + }, async mounted() { this.inPage = true; scrollToID('top'); @@ -74,13 +81,16 @@ export default { if (!deviceType) { // 设备类型为pc isAndroid = false; + this.isAndroid = false; } else { if (deviceType[0] == 'Android') { // 设备类型为安卓 isAndroid = true; + this.isAndroid = true; } else { // 其他设备 isAndroid = false; + this.isAndroid = false; } } @@ -135,12 +145,26 @@ export default { } if (!isAndroid) { console.log('ios'); - // await this.downloadFun( - // this.videoSrc + '?response-content-type=application/octet-stream', - // this.title + '.mp4' - // ) - // await this.downloadFile1(this.videoSrc) - window.open(this.videoSrc, '_self'); + // let videoData = await exportVideoApi(this.id); + const AccessToken = localStorage.getItem('AccessToken'); + that + .$axios({ + method: 'get', + url: process.env.VUE_APP_API_ROOT + `/api/userVideo/exportVideo?id=${that.id}`, + headers: { + 'content-type': 'application/octet-stream;charset=UTF-8', + token: AccessToken, + 'Access-Control-Allow-Origin': '*', + 'Access-Control-Allow-Credentials': 'true' + } + }) + .then(async res => { + console.log(res, 'AccessTokenAccessToken'); + }); + // console.log(videoData); + + // await this.downloadFun(this.id); + // await this.downloadFile1(this.id); } else { // 下载视频 saveAs(videoUrl, this.title + '.mp4'); @@ -151,10 +175,10 @@ export default { return filename.replace(/[/\\:?*"<>|]/g, '').trim(); }, // ios下载处理 - downloadFile1(url) { + downloadFile1(id) { return new Promise((resolve, reject) => { const xhr = new XMLHttpRequest(); - xhr.open('GET', url, true); + xhr.open('GET', process.env.VUE_APP_API_ROOT + `/api/userVideo/exportVideo?id=${id}`, true); xhr.responseType = 'arraybuffer'; xhr.onload = () => { if (xhr.status === 200) { @@ -224,6 +248,7 @@ export default { async getVideoInfo() { const { data: res } = await getModelDetailById(this.$route.query.id); if (res.videoId) { + this.videoId = res.videoId; const { data: res2 } = await doGetVideoDetialById(res.videoId); this.videoSrc = res2.videoUrl; this.title = res2.title;