@@ -9,6 +9,7 @@ | |||||
"dependencies": { | "dependencies": { | ||||
"axios": "0.18.1", | "axios": "0.18.1", | ||||
"element-ui": "^2.15.12", | "element-ui": "^2.15.12", | ||||
"file-saver": "^2.0.5", | |||||
"franc": "^6.1.0", | "franc": "^6.1.0", | ||||
"install": "^0.13.0", | "install": "^0.13.0", | ||||
"lib-flexible": "^0.3.2", | "lib-flexible": "^0.3.2", | ||||
@@ -3,7 +3,7 @@ import request from '@/utils/request' | |||||
// https://smapitest.malls.iformall.com/C/api/ | // https://smapitest.malls.iformall.com/C/api/ | ||||
/** | /** | ||||
* @description 获取语音列表 | |||||
* @description 获取语音列表1级 | |||||
* @returns personMouldId,paperwork | * @returns personMouldId,paperwork | ||||
*/ | */ | ||||
export function voiceList(data) { | export function voiceList(data) { | ||||
@@ -13,6 +13,19 @@ export function voiceList(data) { | |||||
data | data | ||||
}) | }) | ||||
} | } | ||||
/** | |||||
* @description 获取语音列表2级 | |||||
* @returns personMouldId,paperwork | |||||
*/ | |||||
export function voiceList2Api(id) { | |||||
return request({ | |||||
url: `/api/voiceMould/findById?id=${id}`, | |||||
method: 'GET', | |||||
}) | |||||
} | |||||
/** | /** | ||||
* @description 试听MP3 | * @description 试听MP3 | ||||
* @returns id | * @returns id | ||||
@@ -5,9 +5,9 @@ import request from '@/utils/request' | |||||
* @param {number} pageParams (pageNum, pageSize) | * @param {number} pageParams (pageNum, pageSize) | ||||
* @returns data | * @returns data | ||||
*/ | */ | ||||
export function getVideoList(pageNum, pageSize,videoType) { | |||||
export function getVideoList(pageNum, pageSize,videoType,videoStatuss) { | |||||
return request({ | return request({ | ||||
url: `/api/userVideo/list?pageNum=${pageNum}&pageSize=${pageSize}&videoType=${videoType}`, | |||||
url: `/api/userVideo/list?pageNum=${pageNum}&pageSize=${pageSize}&videoType=${videoType}&videoStatuss=${videoStatuss}`, | |||||
method: 'get' | method: 'get' | ||||
}) | }) | ||||
} | } | ||||
@@ -19,10 +19,10 @@ | |||||
class="material" | class="material" | ||||
:style="{ | :style="{ | ||||
transformOrigin: 'top left', | transformOrigin: 'top left', | ||||
transform: 'scale(' + item.w + ') ', | |||||
transform: 'scale(' + item.w / proportion + ') ', | |||||
zIndex: item.z, | zIndex: item.z, | ||||
top: item.y + 'px', | |||||
left: item.x + 'px' | |||||
top: item.y / proportion + 'px', | |||||
left: item.x / proportion + 'px' | |||||
}" | }" | ||||
> | > | ||||
<div>{{ item.text }}</div> | <div>{{ item.text }}</div> | ||||
@@ -166,8 +166,8 @@ export default { | |||||
const deltaX = event.touches[0].clientX - this.startX | const deltaX = event.touches[0].clientX - this.startX | ||||
const deltaY = event.touches[0].clientY - this.startY | const deltaY = event.touches[0].clientY - this.startY | ||||
// console.log(deltaX) | // console.log(deltaX) | ||||
this.materialList.scList[index].x += deltaX | |||||
this.materialList.scList[index].y += deltaY | |||||
this.materialList.scList[index].x += deltaX.toFixed(0) * this.proportion | |||||
this.materialList.scList[index].y += deltaY.toFixed(0) * this.proportion | |||||
this.startX = event.touches[0].clientX | this.startX = event.touches[0].clientX | ||||
this.startY = event.touches[0].clientY | this.startY = event.touches[0].clientY | ||||
@@ -219,6 +219,7 @@ export default { | |||||
// 鼠标抬起 | // 鼠标抬起 | ||||
onMouseUp1() { | onMouseUp1() { | ||||
this.dragging = false | this.dragging = false | ||||
this.startDistance = 0 | |||||
}, | }, | ||||
// 鼠标在父盒子移动时,判断是否按下,然后再走逻辑 | // 鼠标在父盒子移动时,判断是否按下,然后再走逻辑 | ||||
onMouseMove1() { | onMouseMove1() { | ||||
@@ -1,5 +1,5 @@ | |||||
.floatRight { | .floatRight { | ||||
float: right; | |||||
// float: right; | |||||
} | } | ||||
// 淡化文字 | // 淡化文字 | ||||
.desalinate { | .desalinate { | ||||
@@ -29,4 +29,13 @@ p { | |||||
} | } | ||||
.relative { | .relative { | ||||
position: relative; | position: relative; | ||||
} | |||||
.wordColor { | |||||
color: #51d9ca; | |||||
} | |||||
.displayFlex { | |||||
display: flex; | |||||
justify-content: space-between; | |||||
align-items: center; | |||||
} | } |
@@ -17,7 +17,7 @@ | |||||
</van-tabs> | </van-tabs> | ||||
<!-- 模板列表 --> | <!-- 模板列表 --> | ||||
<div class="choose"> | |||||
<div class="choose" v-if="showModeList"> | |||||
<waterfall class="modeList" :col="2" :data="modeList"> | <waterfall class="modeList" :col="2" :data="modeList"> | ||||
<div | <div | ||||
class="model" | class="model" | ||||
@@ -65,7 +65,8 @@ export default { | |||||
type: 0, | type: 0, | ||||
currentId: '', | currentId: '', | ||||
modeList: [], // 模板列表 | modeList: [], // 模板列表 | ||||
tabList: ['全部', '男性', '女性'] | |||||
tabList: ['全部', '男性', '女性'], | |||||
showModeList: true | |||||
} | } | ||||
}, | }, | ||||
computed: { | computed: { | ||||
@@ -107,7 +108,9 @@ export default { | |||||
try { | try { | ||||
sex = sex == 0 ? '' : sex | sex = sex == 0 ? '' : sex | ||||
// const res = await getModeList(sex) | // const res = await getModeList(sex) | ||||
this.showModeList = false | |||||
const res = await getModeList1(sex) | const res = await getModeList1(sex) | ||||
this.showModeList = true | |||||
console.log(res, '获取模板列表') | console.log(res, '获取模板列表') | ||||
this.modeList = res.data.list | this.modeList = res.data.list | ||||
} catch (error) { | } catch (error) { | ||||
@@ -59,7 +59,7 @@ | |||||
<div class="addText-title"> | <div class="addText-title"> | ||||
播报声音<span class="redWord">(必选)</span> | 播报声音<span class="redWord">(必选)</span> | ||||
</div> | </div> | ||||
<div>英语_女性_安娜</div> | |||||
<div>{{ soundChoose.subTitle }}</div> | |||||
</div> | </div> | ||||
<!-- 合成按钮 --> | <!-- 合成按钮 --> | ||||
<div class="makeVideo" @click="submit">立即制作</div> | <div class="makeVideo" @click="submit">立即制作</div> | ||||
@@ -170,6 +170,13 @@ | |||||
<!-- 展示页 --> | <!-- 展示页 --> | ||||
<div class="list"> | <div class="list"> | ||||
<div v-if="textareaContent.length == 0">请输入文案</div> | <div v-if="textareaContent.length == 0">请输入文案</div> | ||||
<div | |||||
v-if=" | |||||
soundItemList.length == 0 && textareaContent.length != 0 | |||||
" | |||||
> | |||||
文字过少,难以识别 | |||||
</div> | |||||
<template v-if="soundItemList.length != 0"> | <template v-if="soundItemList.length != 0"> | ||||
<div | <div | ||||
@click="clickSoundItem(index, item)" | @click="clickSoundItem(index, item)" | ||||
@@ -189,6 +196,30 @@ | |||||
</div> | </div> | ||||
</van-tab> | </van-tab> | ||||
</van-tabs> | </van-tabs> | ||||
<!-- 二级列表显示 --> | |||||
<van-popup | |||||
class="SoundList2" | |||||
v-model="showSoundList2" | |||||
position="bottom" | |||||
:style="{ width: '100%' }" | |||||
> | |||||
<div class="list"> | |||||
<div v-if="soundItemList2.length == 0">暂无数据</div> | |||||
<template v-if="soundItemList.length != 0"> | |||||
<div | |||||
@click="clickSoundItem2(index, item)" | |||||
class="listItem" | |||||
:class="{ active: soundItemListAction2 == index }" | |||||
v-for="(item, index) in soundItemList2" | |||||
:key="index" | |||||
> | |||||
<img src="../../assets/icon/icon-earphone.png" alt="" /> | |||||
<div>{{ item.title }}-{{ item.speakTypeStr }}</div> | |||||
</div> | |||||
</template> | |||||
</div></van-popup | |||||
> | |||||
</div> | </div> | ||||
</div> | </div> | ||||
@@ -376,6 +407,7 @@ import { | |||||
import { | import { | ||||
videoDetial, | videoDetial, | ||||
voiceList, | voiceList, | ||||
voiceList2Api, | |||||
systemBGIListApi, | systemBGIListApi, | ||||
myBGIListApi, | myBGIListApi, | ||||
systemScListApi, | systemScListApi, | ||||
@@ -411,15 +443,20 @@ export default { | |||||
saveID: null, // 作品id | saveID: null, // 作品id | ||||
inputTitle: '', // 作品标题 | inputTitle: '', // 作品标题 | ||||
textareaContent: '', // 输入框内容 | textareaContent: '', // 输入框内容 | ||||
//底部 | |||||
bottomTabActive: 2, // 底部导航高亮 | bottomTabActive: 2, // 底部导航高亮 | ||||
showSubtitle: false, // 是否展示字幕 | showSubtitle: false, // 是否展示字幕 | ||||
showSynthesisDialog: false, //合成进度条窗口显示隐藏 | showSynthesisDialog: false, //合成进度条窗口显示隐藏 | ||||
showTabSheet: false, //tab栏弹出框显隐 | showTabSheet: false, //tab栏弹出框显隐 | ||||
showSoundList2: false, //声音的二级显隐 | |||||
soundTabList: ['全部'], // 声音tab栏标题 | soundTabList: ['全部'], // 声音tab栏标题 | ||||
soundListAction: -1, //声音tab栏标题高亮 | soundListAction: -1, //声音tab栏标题高亮 | ||||
soundItemList: [], // 声音展示列表 | |||||
soundItemList: [], // 声音展示一级列表 | |||||
soundItemList2: [], // 声音展示二级列表 | |||||
soundItemListAction: -1, // 声音展示列表高亮 | soundItemListAction: -1, // 声音展示列表高亮 | ||||
soundItemListAction2: -1, // 声音展示列表高亮二级 | |||||
soundChoose: {}, //选中的音频 | soundChoose: {}, //选中的音频 | ||||
//编辑 | |||||
bjAction: 0, // 背景:素材库和上传高亮 | bjAction: 0, // 背景:素材库和上传高亮 | ||||
bjImgAction: -1, // 选中背景图高亮 | bjImgAction: -1, // 选中背景图高亮 | ||||
scAction: 0, // 素材:素材库和上传高亮 | scAction: 0, // 素材:素材库和上传高亮 | ||||
@@ -446,6 +483,7 @@ export default { | |||||
this.bottomTabActive = index | this.bottomTabActive = index | ||||
if (this.textareaContent.length == 0) { | if (this.textareaContent.length == 0) { | ||||
this.soundItemList = [] //清空处理 | this.soundItemList = [] //清空处理 | ||||
this.soundItemList2 = [] //清空处理 | |||||
} | } | ||||
console.log(this.bottomTabActive) | console.log(this.bottomTabActive) | ||||
this.showTabSheet = !this.showTabSheet | this.showTabSheet = !this.showTabSheet | ||||
@@ -478,16 +516,44 @@ export default { | |||||
// 点击声音列表中的某一项 | // 点击声音列表中的某一项 | ||||
async clickSoundItem(index, item) { | async clickSoundItem(index, item) { | ||||
if (this.soundItemListAction != index) { | if (this.soundItemListAction != index) { | ||||
this.soundItemListAction = index | |||||
this.soundItemListAction = index //高亮 | |||||
this.soundChoose = item | |||||
this.showSoundList2 = true | |||||
const res = await voiceList2Api(item.id) | |||||
let list = res.data.subVoiceMould ? res.data.subVoiceMould : [] | |||||
console.log(list) | |||||
let obj = JSON.parse(JSON.stringify(res)) | |||||
delete obj.data.subVoiceMould | |||||
let list2 = [{ ...obj.data }, ...list] | |||||
console.log(list2) | |||||
this.soundItemList2 = list2 || [] | |||||
// console.log(this.soundItemList2) | |||||
// this.audioUrl = res.data.videoUrl | |||||
} else { | |||||
this.soundItemListAction = -1 | |||||
this.soundChoose = {} | |||||
} | |||||
}, | |||||
// 点击声音列表中的某一项2级 | |||||
async clickSoundItem2(index, item) { | |||||
if (this.soundItemListAction2 != index) { | |||||
this.soundItemListAction2 = index //高亮 | |||||
this.soundChoose = item | this.soundChoose = item | ||||
// 得到试听文件 | // 得到试听文件 | ||||
const res = await videoDetial(item.exampleVideoId) | const res = await videoDetial(item.exampleVideoId) | ||||
this.audioUrl = res.data.videoUrl | this.audioUrl = res.data.videoUrl | ||||
} else { | } else { | ||||
this.soundItemListAction = -1 | |||||
this.soundItemListAction2 = -1 | |||||
this.soundChoose = {} | this.soundChoose = {} | ||||
} | } | ||||
}, | }, | ||||
// 提交合成视频 | // 提交合成视频 | ||||
submit() { | submit() { | ||||
// 组装参数 | // 组装参数 | ||||
@@ -600,8 +666,10 @@ export default { | |||||
const url = res.data.videoPathUri + res.data.videoPath | const url = res.data.videoPathUri + res.data.videoPath | ||||
console.log(url, 'url') | console.log(url, 'url') | ||||
this.$router.push({ | this.$router.push({ | ||||
path: '/downloadVideo', | |||||
// path: '/downloadVideo', | |||||
path: '/videoDownload', | |||||
query: { | query: { | ||||
id: this.$route.query.id, | |||||
videoId: res.data.videoId, | videoId: res.data.videoId, | ||||
videoUrl: url | videoUrl: url | ||||
} | } | ||||
@@ -640,8 +708,7 @@ export default { | |||||
h: 1 | h: 1 | ||||
} | } | ||||
} | } | ||||
// console.log(JSON.parse(res.data.backgroundSm)) | |||||
// console.log(JSON.parse(res.data.materialAllJson)) | |||||
this.videoType = res.data.videoType | this.videoType = res.data.videoType | ||||
// this.imgUrl = res.data.personMould.coverImg | // this.imgUrl = res.data.personMould.coverImg | ||||
this.personMouldId = res.data.personMouldId | this.personMouldId = res.data.personMouldId | ||||
@@ -651,20 +718,6 @@ export default { | |||||
this.soundChoose.id = res.data.voiceMouldId | this.soundChoose.id = res.data.voiceMouldId | ||||
this.soundChoose.mouldSmId = res.data.voiceMouldSmId | this.soundChoose.mouldSmId = res.data.voiceMouldSmId | ||||
// { | |||||
// "videoType": 1:竖版2:横版 | |||||
// "personMouldId":选择数字人id | |||||
// "personMouldSm":数字人json(title-数字人标题,mouldSmId-数字人模板编码,material-数字人图片,backgroundId-默认背景id,backgroundMaterial-默认背景图片), | |||||
// "voiceMouldId":声音模板id | |||||
// "voiceMouldSm":声音模板json(title-声音标题,mouldSmId-声音模板编码,personId-声音风格id,speakId-声音性格ID), | |||||
// "backgroundId":背景ID | |||||
// "backgroundSm":背景json(material-背景图片) | |||||
// "materialIds":素材ids | |||||
// "materialAllJson":素材+数字人层级关系json() | |||||
// "paperwork":文案 | |||||
// "title":标题 | |||||
// } | |||||
await this.loadVoice() // 获取音频列表 | await this.loadVoice() // 获取音频列表 | ||||
this.soundItemListAction = this.soundItemList.findIndex((item) => { | this.soundItemListAction = this.soundItemList.findIndex((item) => { | ||||
return item.id == this.soundChoose.id | return item.id == this.soundChoose.id | ||||
@@ -865,11 +918,12 @@ export default { | |||||
const elementWidth = document.getElementById('editPosition').clientWidth | const elementWidth = document.getElementById('editPosition').clientWidth | ||||
console.log(elementWidth) | console.log(elementWidth) | ||||
// 根据横竖屏来确定比例 1竖2横 | |||||
if (this.videoType == 1) { | if (this.videoType == 1) { | ||||
this.proportion = 1920 / elementWidth | |||||
this.proportion = 1080 / elementWidth | |||||
console.log(this.proportion) | console.log(this.proportion) | ||||
} else if (this.videoType == 2) { | } else if (this.videoType == 2) { | ||||
this.proportion = 1080 / elementWidth | |||||
this.proportion = 1920 / elementWidth | |||||
console.log(this.proportion) | console.log(this.proportion) | ||||
} | } | ||||
} | } | ||||
@@ -1209,6 +1263,22 @@ export default { | |||||
} | } | ||||
} | } | ||||
.SoundList2 { | |||||
height: 280px; | |||||
padding: 10px 10px 10px; | |||||
.list { | |||||
height: 280px; | |||||
margin-top: 0px; | |||||
} | |||||
.list::-webkit-scrollbar { | |||||
width: 0; | |||||
display: none; | |||||
} | |||||
} | |||||
.SoundList2::-webkit-scrollbar { | |||||
width: 0; | |||||
display: none; | |||||
} | |||||
.myTab { | .myTab { | ||||
display: flex; | display: flex; | ||||
margin: 10px 0; | margin: 10px 0; | ||||
@@ -7,9 +7,11 @@ | |||||
<!-- 展示列表 --> | <!-- 展示列表 --> | ||||
<div class="item"> | <div class="item"> | ||||
<div class="title"> | <div class="title"> | ||||
<img src="../../assets/img/myVideo.png" alt="" /> | |||||
我的视频作品 | |||||
<span | |||||
<div> | |||||
<img src="../../assets/img/myVideo.png" alt="" /> | |||||
我的视频作品 | |||||
</div> | |||||
<!-- <span | |||||
v-show="listActive == 1" | v-show="listActive == 1" | ||||
class="floatRight" | class="floatRight" | ||||
@click="listActive = 2" | @click="listActive = 2" | ||||
@@ -19,54 +21,88 @@ | |||||
v-show="listActive == 2" | v-show="listActive == 2" | ||||
class="floatRight" | class="floatRight" | ||||
><img src="../../assets/icon/icon-list1.png" alt="" | ><img src="../../assets/icon/icon-list1.png" alt="" | ||||
/></span> | |||||
<span class="floatRight" @click="getNewList(1)">只看竖屏</span> | |||||
<span class="floatRight" @click="getNewList(2)">只看横屏</span> | |||||
/></span> --> | |||||
<div class="title-change"> | |||||
<div class="displayFlex"> | |||||
<span | |||||
v-show="listActive == 1" | |||||
class="floatRight" | |||||
:class="videoType == 1 ? 'wordColor' : ''" | |||||
@click="getNewList(1)" | |||||
>只看竖屏</span | |||||
> | |||||
<span | |||||
v-show="listActive == 1" | |||||
class="floatRight" | |||||
:class="videoType == 2 ? 'wordColor' : ''" | |||||
@click="getNewList(2)" | |||||
>只看横屏</span | |||||
> | |||||
<span | |||||
v-show="listActive == 1" | |||||
class="floatRight" | |||||
@click="draftChange(2)" | |||||
>草稿箱</span | |||||
><span | |||||
@click="draftChange(1)" | |||||
v-show="listActive == 2" | |||||
class="floatRight" | |||||
>已完成</span | |||||
> | |||||
</div> | |||||
</div> | |||||
</div> | </div> | ||||
<!-- 具体内容 --> | <!-- 具体内容 --> | ||||
<!-- 列表样式--大图 --> | <!-- 列表样式--大图 --> | ||||
<div v-if="videoList.length == 0">暂无数据123</div> | |||||
<div v-if="videoList.length == 0">暂无数据</div> | |||||
<!-- 新 修改v-if--> | <!-- 新 修改v-if--> | ||||
<waterfall | |||||
v-if="videoList.length != 0" | |||||
v-show="listActive == 1" | |||||
class="waterFall" | |||||
:col="2" | |||||
:data="videoList" | |||||
> | |||||
<div | |||||
v-for="(item, index) in videoList" | |||||
class="waterFall-item" | |||||
:key="item.id ? item.id : index" | |||||
@click="goDetail(item)" | |||||
<div v-if="waterfallBug"> | |||||
<waterfall | |||||
v-if="videoList.length != 0" | |||||
v-show="listActive == 1" | |||||
class="waterFall" | |||||
:col="2" | |||||
:data="videoList" | |||||
> | > | ||||
<div class="waterFall-item-paddding"> | |||||
<img :src="index == 1 ? defaultImg : defaultImg1" alt="" /> | |||||
<!-- 渐变遮罩层 --> | |||||
<div class="waterFall-item-mask"> | |||||
<div>{{ item.title || '暂无' }}</div> | |||||
<div>视频时长:{{ formatSeconds(item.videoTime) }}</div> | |||||
<div>视频容量:{{ bytesToSize(item.videoSize) }}</div> | |||||
<div> | |||||
创建时间:{{ | |||||
changeTime(item.createDate, 'YYYY-MM-DD hh:mm:ss') | |||||
}} | |||||
<div | |||||
v-for="(item, index) in videoList" | |||||
class="waterFall-item" | |||||
:key="item.id ? item.id : index" | |||||
@click="goDetail(item)" | |||||
> | |||||
<div class="waterFall-item-paddding"> | |||||
<img | |||||
:src="item.videoType == 2 ? defaultImg : defaultImg1" | |||||
alt="" | |||||
/> | |||||
<!-- 渐变遮罩层 --> | |||||
<div class="waterFall-item-mask"> | |||||
<div>{{ item.title || '暂无' }}</div> | |||||
<div>视频时长:{{ formatSeconds(item.videoTime) }}</div> | |||||
<div>视频容量:{{ bytesToSize(item.videoSize) }}</div> | |||||
<div> | |||||
创建时间:{{ | |||||
changeTime(item.createDate, 'YYYY-MM-DD hh:mm:ss') | |||||
}} | |||||
</div> | |||||
</div> | |||||
<!-- 视频状态 草稿还是未完成还是失败 --> | |||||
<div class="waterFall-item-state" v-if="item.videoStatus == 2"> | |||||
<div v-if="item.videoStatus == 0" class="cover">草稿</div> | |||||
<div v-if="item.videoStatus == 1" class="cover">视频生成中</div> | |||||
<div v-if="item.videoStatus == 3" class="cover"> | |||||
视频生成失败 | |||||
</div> | |||||
</div> | |||||
<!-- 删除 --> | |||||
<div class="waterFall-item-del" @click.stop="goDelete(item.id)"> | |||||
<img src="../../assets/icon/icon-trash.png" alt="" /> | |||||
</div> | </div> | ||||
</div> | |||||
<!-- 视频状态 草稿还是未完成还是失败 --> | |||||
<div class="waterFall-item-state"> | |||||
<div v-if="item.videoStatus == 0" class="cover">草稿</div> | |||||
<div v-if="item.videoStatus == 1" class="cover">视频生成中</div> | |||||
<div v-if="item.videoStatus == 3" class="cover">视频生成失败</div> | |||||
</div> | |||||
<!-- 删除 --> | |||||
<div class="waterFall-item-del" @click.stop="goDelete(item.id)"> | |||||
<img src="../../assets/icon/icon-trash.png" alt="" /> | |||||
</div> | </div> | ||||
</div> | </div> | ||||
</div> | |||||
</waterfall> | |||||
</waterfall> | |||||
</div> | |||||
<!-- 列表样式--小图 --> | <!-- 列表样式--小图 --> | ||||
<van-swipe-cell | <van-swipe-cell | ||||
@@ -184,6 +220,7 @@ export default { | |||||
}, | }, | ||||
data() { | data() { | ||||
return { | return { | ||||
waterfallBug: true, // 解决瀑布流不显示bug | |||||
videoType: 1, //1竖屏2横屏 | videoType: 1, //1竖屏2横屏 | ||||
showPopup: false, // 编辑和删除显示隐藏 | showPopup: false, // 编辑和删除显示隐藏 | ||||
clickItem: -1, // 弹出层显示隐藏 | clickItem: -1, // 弹出层显示隐藏 | ||||
@@ -209,6 +246,12 @@ export default { | |||||
methods: { | methods: { | ||||
...mapActions(['setCharacters']), | ...mapActions(['setCharacters']), | ||||
// 草稿箱切换 | |||||
draftChange(type) { | |||||
this.listActive = type | |||||
this.videoType = 1 | |||||
this.loadVideoList(1, this.pageSize, this.videoType) | |||||
}, | |||||
// 横屏竖屏列表 | // 横屏竖屏列表 | ||||
getNewList(videoType) { | getNewList(videoType) { | ||||
this.videoType = videoType | this.videoType = videoType | ||||
@@ -269,13 +312,7 @@ export default { | |||||
this.$router.push({ | this.$router.push({ | ||||
path: '/editModel', | path: '/editModel', | ||||
query: { | query: { | ||||
// videoType: item.videoType, | |||||
// saveID: item.id, | |||||
id: item.id | id: item.id | ||||
// imgUrl: item.id, | |||||
// modelId: item.id, | |||||
// mouldSmId: item.id, | |||||
// modify: true | |||||
} | } | ||||
}) | }) | ||||
} | } | ||||
@@ -285,14 +322,15 @@ export default { | |||||
return | return | ||||
} | } | ||||
// 成功 | // 成功 | ||||
else if (status == 2) { | |||||
else if ([2, 4, 5, 6].includes(status)) { | |||||
const url = item.videoPathUri + item.videoPath | const url = item.videoPathUri + item.videoPath | ||||
this.$router.push({ | this.$router.push({ | ||||
// path: '/downloadVideo', | // path: '/downloadVideo', | ||||
path: '/videoDownload', | path: '/videoDownload', | ||||
query: { | query: { | ||||
videoId: item.videoId, | videoId: item.videoId, | ||||
videoUrl: url | |||||
videoUrl: url, | |||||
id: item.id | |||||
} | } | ||||
}) | }) | ||||
} | } | ||||
@@ -334,10 +372,19 @@ export default { | |||||
*/ | */ | ||||
async loadVideoList(pageNum, pageSize, videoType) { | async loadVideoList(pageNum, pageSize, videoType) { | ||||
try { | try { | ||||
const res = await getVideoList(pageNum, pageSize, videoType) | |||||
this.waterfallBug = false | |||||
// 根据listActive判断是不是看的草稿箱 | |||||
let videoStatuss = this.listActive == 1 ? [2, 4, 5, 6] : [0, 1, 3] | |||||
const res = await getVideoList( | |||||
pageNum, | |||||
pageSize, | |||||
videoType, | |||||
videoStatuss | |||||
) | |||||
console.log(res, '获取作品列表') | console.log(res, '获取作品列表') | ||||
this.videoList = res.data.list | this.videoList = res.data.list | ||||
this.waterfallBug = true | |||||
this.total = res.data.total | this.total = res.data.total | ||||
} catch (error) { | } catch (error) { | ||||
console.log(error, 'error') | console.log(error, 'error') | ||||
@@ -420,7 +467,7 @@ export default { | |||||
} | } | ||||
} | } | ||||
.page { | .page { | ||||
transform: translateX(30%); | |||||
// transform: translateX(30%); | |||||
opacity: 0; | opacity: 0; | ||||
transition: all 0.5s; // global-transition | transition: all 0.5s; // global-transition | ||||
padding-bottom: 25px; | padding-bottom: 25px; | ||||
@@ -465,6 +512,9 @@ export default { | |||||
width: 100%; | width: 100%; | ||||
padding: 15px 10px; | padding: 15px 10px; | ||||
.title { | .title { | ||||
display: flex; | |||||
justify-content: space-between; | |||||
width: 100%; | |||||
font-size: 16px; | font-size: 16px; | ||||
font-weight: 500; | font-weight: 500; | ||||
// margin-left: 15px; | // margin-left: 15px; | ||||
@@ -476,6 +526,10 @@ export default { | |||||
height: 18px; | height: 18px; | ||||
background-size: 100% 100%; | background-size: 100% 100%; | ||||
} | } | ||||
&-change { | |||||
display: inline-block; | |||||
font-size: 12px; | |||||
} | |||||
} | } | ||||
.itemList { | .itemList { | ||||
.videoModel { | .videoModel { | ||||
@@ -548,8 +602,8 @@ export default { | |||||
flex-wrap: wrap; | flex-wrap: wrap; | ||||
align-items: center; | align-items: center; | ||||
justify-content: center; | justify-content: center; | ||||
top: 70%; | |||||
left: 290px; | |||||
top: 50%; | |||||
left: 80%; | |||||
width: 80px; | width: 80px; | ||||
height: 30px; | height: 30px; | ||||
border-radius: 12px; | border-radius: 12px; | ||||
@@ -4,9 +4,8 @@ | |||||
<HeadTop /> | <HeadTop /> | ||||
<div class="content"> | <div class="content"> | ||||
<!-- 视频 --> | <!-- 视频 --> | ||||
<div class="videoBox"> | |||||
<div class="videoBox" v-if="videoSrc"> | |||||
<video | <video | ||||
loop | |||||
download | download | ||||
ref="video" | ref="video" | ||||
:src="videoSrc" | :src="videoSrc" | ||||
@@ -49,9 +48,12 @@ | |||||
</div> | </div> | ||||
</div> | </div> | ||||
<!-- 下载按钮 --> | <!-- 下载按钮 --> | ||||
<a :href="videoSrc" download class="videoBox-download"> | |||||
<!-- <a :href="videoSrc" download class="videoBox-download"> | |||||
<img src="../../assets/icon/icon-download.png" alt="" /> | <img src="../../assets/icon/icon-download.png" alt="" /> | ||||
</a> | |||||
</a> --> | |||||
<div class="videoBox-download" @click="downloadVideo"> | |||||
<img src="../../assets/icon/icon-download.png" alt="" /> | |||||
</div> | |||||
</div> | </div> | ||||
</div> | </div> | ||||
</div> | </div> | ||||
@@ -64,6 +66,11 @@ import { mapState, mapActions } from 'vuex' | |||||
import HeadTop from './../../components/common/head.vue' | import HeadTop from './../../components/common/head.vue' | ||||
// 工具 | // 工具 | ||||
import { scrollToID } from '../../utils' | import { scrollToID } from '../../utils' | ||||
import { saveAs } from 'file-saver' | |||||
// 接口 | |||||
import { getModelDetailById } from '../../api/getPaper' | |||||
import { doGetVideoDetialById } from '../../api/downloadVideo' | |||||
Vue.use(Toast) | Vue.use(Toast) | ||||
export default { | export default { | ||||
components: { | components: { | ||||
@@ -72,15 +79,17 @@ export default { | |||||
data() { | data() { | ||||
return { | return { | ||||
inPage: false, | inPage: false, | ||||
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: | |||||
// '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, | |||||
showControls: false, // 控制台显示隐藏 | showControls: false, // 控制台显示隐藏 | ||||
playing: false, // 播放 | playing: false, // 播放 | ||||
isLandscape: false, | isLandscape: false, | ||||
progress: 0, | progress: 0, | ||||
currentTime: 0, | currentTime: 0, | ||||
totalTime: 0, | totalTime: 0, | ||||
progressChanging: false | |||||
progressChanging: false, | |||||
title: null | |||||
} | } | ||||
}, | }, | ||||
computed: { | computed: { | ||||
@@ -88,9 +97,16 @@ export default { | |||||
characters: (state) => state.publicObj.characters | characters: (state) => state.publicObj.characters | ||||
}) | }) | ||||
}, | }, | ||||
created() { | |||||
// console.log(this.$route) | |||||
// this.videoSrc = this.$route.query.videoUrl | |||||
}, | |||||
mounted() { | mounted() { | ||||
this.inPage = true | this.inPage = true | ||||
scrollToID('top') | scrollToID('top') | ||||
//初始化数据 | |||||
this.getVideoInfo() | |||||
this.$refs.video.addEventListener('timeupdate', this.onTimeUpdate) | this.$refs.video.addEventListener('timeupdate', this.onTimeUpdate) | ||||
this.$refs.video.addEventListener('ended', this.onVideoEnded) | this.$refs.video.addEventListener('ended', this.onVideoEnded) | ||||
screen.orientation.addEventListener('change', this.onOrientationChange) | screen.orientation.addEventListener('change', this.onOrientationChange) | ||||
@@ -101,15 +117,28 @@ export default { | |||||
screen.orientation.removeEventListener('change', this.onOrientationChange) | screen.orientation.removeEventListener('change', this.onOrientationChange) | ||||
}, | }, | ||||
methods: { | methods: { | ||||
// 下载视频 | |||||
downloadVideo() { | |||||
// 视频地址 | |||||
const videoUrl = this.videoSrc | |||||
// 下载视频 | |||||
saveAs(videoUrl, this.title) | |||||
}, | |||||
// 获取视频信息 | |||||
async getVideoInfo() { | |||||
const { data: res } = await getModelDetailById(this.$route.query.id) | |||||
if (res.videoId) { | |||||
const { data: res2 } = await doGetVideoDetialById(res.videoId) | |||||
this.videoSrc = res2.videoUrl | |||||
this.title = res2.title | |||||
return | |||||
} | |||||
this.videoSrc = res.videoPathUri + res.videoPath | |||||
this.title = res.title | |||||
}, | |||||
onVideoLoaded() { | onVideoLoaded() { | ||||
this.totalTime = this.$refs.video.duration | this.totalTime = this.$refs.video.duration | ||||
}, | }, | ||||
// onTimeUpdate() { | |||||
// if (!this.progressChanging) { | |||||
// this.currentTime = this.$refs.video.currentTime | |||||
// this.progress = this.currentTime | |||||
// } | |||||
// }, | |||||
onVideoEnded() { | onVideoEnded() { | ||||
this.playing = false | this.playing = false | ||||
}, | }, | ||||
@@ -170,8 +199,8 @@ export default { | |||||
<style lang="scss" scoped> | <style lang="scss" scoped> | ||||
.page { | .page { | ||||
width: 375px; | |||||
height: 100vh; | |||||
// width: 375px; | |||||
// height: 100vh; | |||||
overflow-y: hidden; | overflow-y: hidden; | ||||
} | } | ||||
.content { | .content { | ||||
@@ -233,7 +262,7 @@ export default { | |||||
} | } | ||||
&-download { | &-download { | ||||
position: absolute; | position: absolute; | ||||
right: 10px; | |||||
right: 15px; | |||||
top: 15px; | top: 15px; | ||||
display: inline-block; | display: inline-block; | ||||
width: 24px; | width: 24px; | ||||