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