congzc před 1 rokem
rodič
revize
2905ea7644
5 změnil soubory, kde provedl 94 přidání a 15 odebrání
  1. +12
    -0
      src/api/downloadVideo.js
  2. +20
    -0
      src/components/common/head.vue
  3. +23
    -1
      src/store/modules/user.js
  4. +1
    -1
      src/views/model/editModel.vue
  5. +38
    -13
      src/views/videoDownload/videoDownload.vue

+ 12
- 0
src/api/downloadVideo.js Zobrazit soubor

@@ -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',
})
}

+ 20
- 0
src/components/common/head.vue Zobrazit soubor

@@ -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);
}
}
}
};
</script>


+ 23
- 1
src/store/modules/user.js Zobrazit soubor

@@ -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: {
}


+ 1
- 1
src/views/model/editModel.vue Zobrazit soubor

@@ -27,7 +27,7 @@
第一步:添加文案
</div>
<div class="desalinate">
<span>已录入{{ textareaContent.length }}字</span>
<span>已录入{{ textareaContent.length }}/300字</span>
&nbsp;&nbsp;
<!-- <span>视频时长:&nbsp;00:16</span> -->
</div>


+ 38
- 13
src/views/videoDownload/videoDownload.vue Zobrazit soubor

@@ -11,9 +11,9 @@
<!-- <a :href="videoSrc" download class="videoBox-download">
<img src="../../assets/icon/icon-download.png" alt="" />
</a> -->
<!-- <a class="videoBox-download" :href="videoSrc" download
><img src="../../assets/icon/icon-download.png" alt=""
/></a> -->
<!-- <a class="videoBox-download" :href="baseUrl + `/api/userVideo/exportVideo?id=${id}`">
<img src="../../assets/icon/icon-download.png" alt="" />
</a> -->
<div class="videoBox-download" @click="downloadVideo">
<img src="../../assets/icon/icon-download.png" alt="" />
</div>
@@ -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;


Načítá se…
Zrušit
Uložit