@@ -23,6 +23,7 @@ | |||
"vue-cropper": "^0.5.11", | |||
"vue-masonry": "^0.16.0", | |||
"vue-router": "^3.2.0", | |||
"vue-waterfall2": "^1.10.6", | |||
"vuex": "^3.4.0" | |||
}, | |||
"devDependencies": { | |||
@@ -17150,6 +17151,15 @@ | |||
"dev": true, | |||
"license": "MIT" | |||
}, | |||
"node_modules/vue-waterfall2": { | |||
"version": "1.10.6", | |||
"resolved": "https://registry.npmmirror.com/vue-waterfall2/-/vue-waterfall2-1.10.6.tgz", | |||
"integrity": "sha512-roL8gYdFkWcpqeUqci8+RPj4rCDMrdmiSaZ2V7MZSy1vkYmfLpBPxHn1OshWPefBYGyilasnBqdQPUeL3ddrbw==", | |||
"dependencies": { | |||
"babel-runtime": "^6.26.0", | |||
"regenerator-runtime": "^0.13.1" | |||
} | |||
}, | |||
"node_modules/vuex": { | |||
"version": "3.6.2", | |||
"resolved": "https://registry.npmmirror.com/vuex/-/vuex-3.6.2.tgz", | |||
@@ -30665,6 +30675,15 @@ | |||
"integrity": "sha512-4gDntzrifFnCEvyoO8PqyJDmguXgVPxKiIxrBKjIowvL9l+N66196+72XVYR8BBf1Uv1Fgt3bGevJ+sEmxfZzw==", | |||
"dev": true | |||
}, | |||
"vue-waterfall2": { | |||
"version": "1.10.6", | |||
"resolved": "https://registry.npmmirror.com/vue-waterfall2/-/vue-waterfall2-1.10.6.tgz", | |||
"integrity": "sha512-roL8gYdFkWcpqeUqci8+RPj4rCDMrdmiSaZ2V7MZSy1vkYmfLpBPxHn1OshWPefBYGyilasnBqdQPUeL3ddrbw==", | |||
"requires": { | |||
"babel-runtime": "^6.26.0", | |||
"regenerator-runtime": "^0.13.1" | |||
} | |||
}, | |||
"vuex": { | |||
"version": "3.6.2", | |||
"resolved": "https://registry.npmmirror.com/vuex/-/vuex-3.6.2.tgz", | |||
@@ -22,6 +22,7 @@ | |||
"vue-cropper": "^0.5.11", | |||
"vue-masonry": "^0.16.0", | |||
"vue-router": "^3.2.0", | |||
"vue-waterfall2": "^1.10.6", | |||
"vuex": "^3.4.0" | |||
}, | |||
"devDependencies": { | |||
@@ -1,6 +1,18 @@ | |||
import request from '@/utils/request' | |||
// https://smapitest.malls.iformall.com/C/api/upload/awsImgUpload | |||
// https://smapitest.malls.iformall.com/C/api/ | |||
/** | |||
* @description 获取语音列表 | |||
* @returns personMouldId,paperwork | |||
*/ | |||
export function voiceList(data) { | |||
return request({ | |||
url: `/api/voiceMould/voiceList?pageNum=1&pageSize=20`, | |||
method: 'POST', | |||
data | |||
}) | |||
} | |||
/** | |||
* @description 试听MP3 | |||
* @returns id | |||
@@ -11,6 +23,50 @@ export function videoDetial(id) { | |||
method: 'get', | |||
}) | |||
} | |||
/** | |||
* @description 查询系统背景 | |||
* @returns pageNum,pageSize,videoType | |||
*/ | |||
export function systemBGIListApi(pageNum,pageSize,videoType) { | |||
return request({ | |||
url: `/api/materialMould/list?type=4&pageNum=${pageNum}&pageSize=${pageSize}&videoType=${videoType}`, | |||
method: 'get', | |||
}) | |||
} | |||
/** | |||
* @description 查询我上传的背景 | |||
* @returns pageNum,pageSize,videoType | |||
*/ | |||
export function myBGIListApi(pageNum,pageSize,videoType) { | |||
return request({ | |||
url: `/api/materialMould/userList?type=4&pageNum=${pageNum}&pageSize=${pageSize}&videoType=${videoType}`, | |||
method: 'get', | |||
}) | |||
} | |||
/** | |||
* @description 查询系统素材 | |||
* @returns pageNum,pageSize,videoType | |||
*/ | |||
export function systemScListApi(pageNum,pageSize) { | |||
return request({ | |||
url: `/api/materialMould/list?type=5&pageNum=${pageNum}&pageSize=${pageSize}`, | |||
method: 'get', | |||
}) | |||
} | |||
/** | |||
* @description 查询我上传的素材 | |||
* @returns pageNum,pageSize,videoType | |||
*/ | |||
export function myScListApi(pageNum,pageSize) { | |||
return request({ | |||
url: `/api/materialMould/userList?type=5&pageNum=${pageNum}&pageSize=${pageSize}`, | |||
method: 'get', | |||
}) | |||
} | |||
/** | |||
* @description 上传背景图 | |||
* @returns data | |||
@@ -5,9 +5,9 @@ import request from '@/utils/request' | |||
* @param {number} pageParams (pageNum, pageSize) | |||
* @returns data | |||
*/ | |||
export function getVideoList(pageNum, pageSize) { | |||
export function getVideoList(pageNum, pageSize,videoType) { | |||
return request({ | |||
url: `/api/userVideo/list?pageNum=${pageNum}&pageSize=${pageSize}`, | |||
url: `/api/userVideo/list?pageNum=${pageNum}&pageSize=${pageSize}&videoType=${videoType}`, | |||
method: 'get' | |||
}) | |||
} | |||
@@ -1,9 +1,15 @@ | |||
<template> | |||
<div class="uploder"> | |||
<div class="change-photo-setter"> | |||
<van-uploader class="sett-item" :before-read="beforeRead"> | |||
<div style="height: 100%"><img :src="ImgUrl" alt="" /></div> | |||
<img src="https://img01.yzcdn.cn/vant/leaf.jpg" alt="" /> | |||
<div class="change-photo-setter" style="height: 240px; width: 160px"> | |||
<van-uploader | |||
ref="uploader" | |||
class="sett-item" | |||
:before-read="beforeRead" | |||
style="height: 240px; width: 160px" | |||
> | |||
<div style="height: 240px; width: 160px"> | |||
<!-- <img :src="ImgUrl" alt="" /> --> | |||
</div> | |||
</van-uploader> | |||
</div> | |||
<div class="uploadava"> | |||
@@ -47,11 +47,11 @@ export default { | |||
imgUrl: { | |||
default: false | |||
// type: String | |||
}, | |||
materialList: { | |||
default: false, | |||
type: Object | |||
} | |||
// scList: { | |||
// default: false, | |||
// type: Array | |||
// } | |||
}, | |||
data() { | |||
return { | |||
@@ -63,49 +63,49 @@ export default { | |||
windowWidth: 0, | |||
windowHeight: 0, | |||
scale: 1, | |||
domIndex: -1, //当前点击的图片 | |||
materialList: [ | |||
{ | |||
text: '小div1', | |||
url: 'img/BG@2x.b0cf224b.png', | |||
x: 10, // 相对左上角XY坐标 | |||
y: 190, | |||
scale: 1, //缩放 | |||
zIndex: 1 //层级 | |||
}, | |||
{ | |||
text: '小div2', | |||
url: 'img/BG@2x.b0cf224b.png', | |||
x: 100, | |||
y: 0, | |||
scale: 1, | |||
zIndex: 2 | |||
}, | |||
{ | |||
text: '小div3', | |||
url: require('../assets/img/bg.png'), | |||
x: 0, | |||
y: 100, | |||
scale: 1, | |||
zIndex: 3 | |||
}, | |||
{ | |||
text: '小div4', | |||
url: require('../assets/img/cn.jpeg'), | |||
x: 100, | |||
y: 100, | |||
scale: 1, | |||
zIndex: 4 | |||
}, | |||
{ | |||
text: '小div5', | |||
url: require('../assets/img/ft.png'), | |||
x: 100, | |||
y: 280, | |||
scale: 1, | |||
zIndex: 5 | |||
} | |||
] | |||
domIndex: -1 //当前点击的图片 | |||
// materialList: [ | |||
// { | |||
// text: '小div1', | |||
// url: 'img/BG@2x.b0cf224b.png', | |||
// x: 10, // 相对左上角XY坐标 | |||
// y: 190, | |||
// scale: 1, //缩放 | |||
// zIndex: 1 //层级 | |||
// }, | |||
// { | |||
// text: '小div2', | |||
// url: 'img/BG@2x.b0cf224b.png', | |||
// x: 100, | |||
// y: 0, | |||
// scale: 1, | |||
// zIndex: 2 | |||
// }, | |||
// { | |||
// text: '小div3', | |||
// url: require('../assets/img/bg.png'), | |||
// x: 0, | |||
// y: 100, | |||
// scale: 1, | |||
// zIndex: 3 | |||
// }, | |||
// { | |||
// text: '小div4', | |||
// url: require('../assets/img/cn.jpeg'), | |||
// x: 100, | |||
// y: 100, | |||
// scale: 1, | |||
// zIndex: 4 | |||
// }, | |||
// { | |||
// text: '小div5', | |||
// url: require('../assets/img/ft.png'), | |||
// x: 100, | |||
// y: 280, | |||
// scale: 1, | |||
// zIndex: 5 | |||
// } | |||
// ] | |||
} | |||
}, | |||
@@ -14,6 +14,9 @@ import "@/styles/reset.scss"; // 引入清除默认样式 | |||
import "@/styles/index.scss"; // 引入全局样式 | |||
import { VueMasonryPlugin } from 'vue-masonry'; | |||
import waterfall from 'vue-waterfall2' | |||
Vue.use(waterfall) | |||
Vue.use(VueMasonryPlugin); // 瀑布流插件 | |||
Vue.use(ElementUI); | |||
Vue.use(Vant) | |||
@@ -35,7 +35,6 @@ request.interceptors.response.use( | |||
let code = response.data.code | |||
// 当token过期或损坏时 | |||
if (code == 1052) { | |||
// if (1==1) { | |||
router.push("/login"); | |||
Toast.fail("登录过期,请重新登录!"); | |||
return | |||
@@ -150,12 +150,7 @@ export default { | |||
this.$router.push({ | |||
path: '/previewModel', | |||
query: { | |||
saveID: res.data.id, | |||
id: res.data.id, | |||
imgUrl: modelDetail.coverImg, //模版图片路径 | |||
mouldSmId: modelDetail.mouldSmId, //模版标识 | |||
modelId: modelDetail.id, //模版id | |||
modelDetail: JSON.stringify(modelDetail) | |||
id: res.data.id | |||
} | |||
}) | |||
} catch (error) { | |||
@@ -279,13 +274,14 @@ export default { | |||
// padding: 0 23px; | |||
padding-left: 15px; | |||
width: 100%; | |||
margin-right: -20px; | |||
// margin-right: -20px; | |||
.model { | |||
position: relative; | |||
text-align: left; | |||
margin-bottom: 15px; | |||
max-width: 170px; | |||
max-width: 154px; | |||
max-height: 273px; | |||
opacity: 0.9; | |||
padding: 5px; | |||
&-padding { | |||
@@ -5,9 +5,16 @@ | |||
<!-- 中间内容区 --> | |||
<div class="content"> | |||
<!-- 展示图片 --> | |||
<div v-if="imgUrl" class="shouModelImg"> | |||
<div class="editPosition"> | |||
<EditPosition ref="EditPosition" :imgUrl="imgUrl"></EditPosition> | |||
<div class="shouModelImg"> | |||
<div | |||
class="editPosition" | |||
:class="videoType == 2 ? 'verticalmodel' : ''" | |||
> | |||
<EditPosition | |||
ref="EditPosition" | |||
:imgUrl="imgUrl" | |||
:materialList="materialList" | |||
></EditPosition> | |||
</div> | |||
<!-- <img :src="imgUrl" alt="" /> --> | |||
<!-- 字幕 --> | |||
@@ -55,7 +62,7 @@ | |||
<div class="makeVideo" @click="submit">立即制作</div> | |||
<!-- 上移下移 --> | |||
<div class="upAndBottomBtn"> | |||
<div class="moveLayer"> | |||
<div class="moveLayer" :class="videoType == 2 ? 'moveLayer1' : ''"> | |||
<div class="btnContent" @click="$refs.EditPosition.controlImg(3)"> | |||
<img | |||
src="https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPngf9bff6080bf29c6886ad614d479aebfb5fc41429c11c0bea78ca695a0f0e7388" | |||
@@ -64,11 +71,8 @@ | |||
上移一层 | |||
</div> | |||
</div> | |||
<div class="moveLayer below"> | |||
<div | |||
class="btnContent active" | |||
@click="$refs.EditPosition.controlImg(4)" | |||
> | |||
<div class="moveLayer below" :class="videoType == 2 ? 'below1' : ''"> | |||
<div class="btnContent" @click="$refs.EditPosition.controlImg(4)"> | |||
<img | |||
src="https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPngde1a7c84fc47b26095186ff9ee7ec07d7fe7bcd2cde90f3178f4edb8cdb08bcd" | |||
alt="" | |||
@@ -172,7 +176,11 @@ | |||
:key="index" | |||
> | |||
<img src="../../assets/icon/icon-earphone.png" alt="" /> | |||
<div>{{ item.title }}</div> | |||
<div> | |||
{{ item.subTitle }}-{{ item.title }} | |||
<br /> | |||
{{ item.ageTypeStr }} | |||
</div> | |||
</div> | |||
</template> | |||
</div> | |||
@@ -180,6 +188,7 @@ | |||
</van-tabs> | |||
</div> | |||
</div> | |||
<!-- 背景 --> | |||
<div v-show="bottomTabActive == 2"> | |||
<!-- 顶部文字 --> | |||
@@ -192,7 +201,7 @@ | |||
/> | |||
更换背景 | |||
</div> | |||
<div @click="showTabSheet = !showTabSheet"> | |||
<div @click="sureImg"> | |||
<img class="yesImg" src="../../assets/icon/icon-yes.png" alt="" /> | |||
</div> | |||
</div> | |||
@@ -201,14 +210,14 @@ | |||
<!-- tab栏 --> | |||
<div class="myTab"> | |||
<div | |||
@click="bjAction = 0" | |||
@click="changeShowBGIList(0)" | |||
class="myTab-item" | |||
:class="{ active: bjAction == 0 }" | |||
> | |||
<img src="../../assets/icon/icon-folder@2x.png" alt="" /> 背景库 | |||
</div> | |||
<div | |||
@click="bjAction = 1" | |||
@click="changeShowBGIList(1)" | |||
class="myTab-item" | |||
:class="{ active: bjAction == 1 }" | |||
> | |||
@@ -216,8 +225,8 @@ | |||
</div> | |||
</div> | |||
<!-- 展示 --> | |||
<div v-if="!bjLibrary.length == 0">暂无数据</div> | |||
<div v-if="!bjLibrary.length != 0" class="myTab-show"> | |||
<!-- <div v-if="systemBGIList.length == 0">暂无数据</div> --> | |||
<div class="myTab-show"> | |||
<div class="myTab-show-title">图片<i></i></div> | |||
<div class="myTab-show-list"> | |||
<!-- 上传 --> | |||
@@ -228,9 +237,9 @@ | |||
</div> | |||
<!-- 图片列表 --> | |||
<div | |||
@click="bjImgAction = index" | |||
@click="chooseImg(index, 'bj')" | |||
class="myTab-show-list-item" | |||
v-for="(item, index) in 7" | |||
v-for="(item, index) in showBGIList" | |||
:key="index" | |||
> | |||
<div | |||
@@ -246,12 +255,13 @@ | |||
× | |||
</div> | |||
<!-- 中间图片 --> | |||
<img src="" alt="" /> | |||
<img :src="item.material" alt="" /> | |||
</div> | |||
</div> | |||
</div> | |||
</div> | |||
</div> | |||
<!-- 素材 --> | |||
<div v-show="bottomTabActive == 3"> | |||
<!-- 顶部文字 --> | |||
@@ -269,14 +279,14 @@ | |||
<!-- tab栏 --> | |||
<div class="myTab"> | |||
<div | |||
@click="scAction = 0" | |||
@click="changeShowBGIList(3)" | |||
class="myTab-item" | |||
:class="{ active: scAction == 0 }" | |||
> | |||
<img src="../../assets/icon/icon-folder@2x.png" alt="" /> 背景库 | |||
<img src="../../assets/icon/icon-folder@2x.png" alt="" /> 素材库 | |||
</div> | |||
<div | |||
@click="scAction = 1" | |||
@click="changeShowBGIList(4)" | |||
class="myTab-item" | |||
:class="{ active: scAction == 1 }" | |||
> | |||
@@ -284,20 +294,21 @@ | |||
</div> | |||
</div> | |||
<!-- 展示 --> | |||
<div v-if="bjLibrary.length == 0">暂无数据</div> | |||
<div v-if="scLibrary.length != 0" class="myTab-show"> | |||
<!-- <div v-if="showScList.length == 0">暂无数据</div> --> | |||
<div class="myTab-show"> | |||
<div class="myTab-show-title">图片<i></i></div> | |||
<div class="myTab-show-list"> | |||
<!-- 上传 --> | |||
<div v-if="scAction == 1" class="myTab-show-list-upload"> | |||
<img src="../../assets/icon/icon-upload@2x.png" alt="" /> | |||
<input type="file" /> | |||
<!-- 上传背景组件 --> | |||
<CutImg class="CutImg"></CutImg> | |||
</div> | |||
<!-- 图片列表 --> | |||
<div | |||
@click="scImgAction = index" | |||
class="myTab-show-list-item" | |||
v-for="(item, index) in 7" | |||
v-for="(item, index) in showScList" | |||
:key="index" | |||
> | |||
<div | |||
@@ -313,7 +324,7 @@ | |||
× | |||
</div> | |||
<!-- 中间图片 --> | |||
<img src="" alt="" /> | |||
<img :src="item.material" alt="" /> | |||
</div> | |||
</div> | |||
</div> | |||
@@ -329,7 +340,7 @@ | |||
<script> | |||
// 组件 | |||
import Vue from 'vue' | |||
import { Toast } from 'vant' | |||
import { Toast, Dialog } from 'vant' | |||
import { mapState, mapActions } from 'vuex' | |||
import HeadTop from './../../components/common/head.vue' | |||
import CutImg from '../../components/CutImg.vue' | |||
@@ -343,15 +354,22 @@ import { franc } from 'franc' | |||
import { | |||
doCreateVideo, | |||
doFindVideoById, | |||
getVoiceList, | |||
getVoiceList, // 获取声音列表,废弃 | |||
getBackGroundList, | |||
doFindInviteCode, | |||
saveOrUpdateUserVideo | |||
} from '@/api/generateVideo' | |||
import { videoDetial } from '@/api/editModel' | |||
import { | |||
videoDetial, | |||
voiceList, | |||
systemBGIListApi, | |||
myBGIListApi, | |||
systemScListApi, | |||
myScListApi | |||
} from '@/api/editModel' | |||
import { getModelDetailById } from '../../api/getPaper.js' | |||
Vue.use(Toast) | |||
Vue.use(-Toast) | |||
export default { | |||
components: { | |||
HeadTop, | |||
@@ -360,9 +378,13 @@ export default { | |||
}, | |||
data() { | |||
return { | |||
pageNum: 1, | |||
pageSize: 20, | |||
videoType: null, //判断横屏2还是竖屏1 | |||
audioUrl: null, // 声音试听 | |||
inPage: false, | |||
imgUrl: false, | |||
imgUrl: false, // 背景图 | |||
materialList: {}, // 传给组件的素材,背景,数字人数据 | |||
sclist: [ | |||
{ | |||
text: '小div1', | |||
@@ -372,11 +394,11 @@ export default { | |||
scale: 1, //缩放 | |||
zIndex: 3 //层级 | |||
} | |||
], //素材列表 | |||
modelId: null, | |||
], //该作品的素材列表 | |||
personMouldId: null, //选择数字人id | |||
mouldSmId: null, | |||
saveID: null, // 作品id | |||
inputTitle: '', | |||
inputTitle: '', // 作品标题 | |||
textareaContent: '', // 输入框内容 | |||
bottomTabActive: 2, // 底部导航高亮 | |||
showSubtitle: false, // 是否展示字幕 | |||
@@ -391,10 +413,12 @@ export default { | |||
bjImgAction: -1, // 选中背景图高亮 | |||
scAction: 0, // 素材:素材库和上传高亮 | |||
scImgAction: -1, // 选中素材图高亮 | |||
bjLibrary: [], // 背景库列表 | |||
myBjLibrary: [], // 我上传的背景库列表 | |||
scLibrary: [], // 素材库列表 | |||
myScLibrary: [] // 我上传的素材库列表 | |||
showBGIList: [], // 渲染时代替下面2个列表 | |||
systemBGIList: [], // 背景库列表 | |||
myBGIList: [], // 我上传的背景库列表 | |||
showScList: [], // 渲染时代替下面2个列表 | |||
systemScList: [], // 素材库列表 | |||
myScList: [] // 我上传的素材库列表 | |||
} | |||
}, | |||
computed: { | |||
@@ -425,10 +449,11 @@ export default { | |||
const language = franc(this.textareaContent) | |||
console.log(language, '语种') | |||
const data = { | |||
personMouldId: this.personMouldId, | |||
paperwork: this.textareaContent | |||
} | |||
try { | |||
const res = await getVoiceList(data) | |||
const res = await voiceList(data) | |||
console.log(res, '获取声音列表') | |||
this.soundItemList = res.data.list | |||
} catch (error) { | |||
@@ -452,6 +477,7 @@ export default { | |||
this.soundChoose = {} | |||
} | |||
}, | |||
// 提交合成视频 | |||
submit() { | |||
// 组装参数 | |||
console.log(this.soundChoose.id) | |||
@@ -460,7 +486,7 @@ export default { | |||
backgroundMouldSmId: '', //背景标识 | |||
id: this.saveID, //作品id | |||
paperwork: this.textareaContent, //文本框内容 | |||
personMouldId: this.modelId, //模版id | |||
personMouldId: this.personMouldId, //模版id | |||
personMouldSmId: this.mouldSmId, //模版标识 | |||
title: this.inputTitle, //文案标题 | |||
type: 1, //写死type | |||
@@ -562,13 +588,32 @@ export default { | |||
async getDetailById(id) { | |||
try { | |||
const res = await getModelDetailById(id) | |||
this.imgUrl = res.data.personMould.coverImg | |||
this.modelId = res.data.personMouldId | |||
console.log(JSON.parse(res.data.personMouldSm)) | |||
// console.log(JSON.parse(res.data.backgroundSm)) | |||
// console.log(JSON.parse(res.data.materialAllJson)) | |||
this.videoType = res.data.videoType | |||
// this.imgUrl = res.data.personMould.coverImg | |||
this.personMouldId = res.data.personMouldId | |||
this.mouldSmId = res.data.personMouldSmId | |||
this.inputTitle = res.data.title | |||
this.textareaContent = res.data.paperwork || '' | |||
this.soundChoose.id = res.data.voiceMouldId | |||
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() // 获取音频列表 | |||
this.soundItemListAction = this.soundItemList.findIndex((item) => { | |||
return item.id == this.soundChoose.id | |||
@@ -581,24 +626,139 @@ export default { | |||
Toast.fail(error.message) | |||
} | |||
}, | |||
// 点击选中背景图或者素材 | |||
chooseImg(index, type) { | |||
if (type == 'bj') { | |||
if (this.bjImgAction == -1 || this.bjImgAction != index) { | |||
this.bjImgAction = index | |||
} else if (this.bjImgAction == index) { | |||
this.bjImgAction = -1 | |||
} | |||
} | |||
if (type == 'sc') { | |||
if (this.scmgAction == -1) { | |||
this.bjImgAction = index | |||
} else if (this.scImgAction == index) { | |||
this.scImgAction = -1 | |||
} | |||
} | |||
}, | |||
// 点击对钩确定背景或者素材图 | |||
sureImg() { | |||
Dialog.confirm({ | |||
// title: '退出登录', | |||
message: '您确定要用这张背景图吗?' | |||
}) | |||
.then(() => { | |||
console.log('true') | |||
this.showTabSheet = false | |||
}) | |||
.catch(() => { | |||
console.log('false') | |||
this.showTabSheet = false | |||
return | |||
}) | |||
}, | |||
// 切换背景图的展示列表 | |||
changeShowBGIList(type) { | |||
if (type == 0) { | |||
this.bjAction = 0 | |||
this.showBGIList = this.systemBGIList | |||
} | |||
if (type == 1) { | |||
this.bjAction = 1 | |||
this.showBGIList = this.myBGIList | |||
} | |||
if (type == 3) { | |||
this.scAction = 0 | |||
this.showScList = this.systemScList | |||
} | |||
if (type == 4) { | |||
this.scAction = 1 | |||
this.showScList = this.myScList | |||
} | |||
}, | |||
/** | |||
* @description:获取系统背景图 | |||
*/ | |||
async getSystemBGIList() { | |||
const res = await systemBGIListApi( | |||
this.pageNum, | |||
this.pageSize, | |||
this.videoType | |||
) | |||
this.systemBGIList = res.data.list | |||
this.showBGIList = this.systemBGIList | |||
}, | |||
/** | |||
* @description:获取我上传的背景图 | |||
*/ | |||
async getMyBGIListApi() { | |||
const res = await myBGIListApi( | |||
this.pageNum, | |||
this.pageSize, | |||
this.videoType | |||
) | |||
this.myBGIList = res.data.list | |||
}, | |||
/** | |||
* @description:获取系统素材 | |||
*/ | |||
async getSystemScList() { | |||
const res = await systemScListApi(this.pageNum, this.pageSize) | |||
this.systemScList = res.data.list | |||
this.showScList = this.systemScList | |||
}, | |||
/** | |||
* @description:获取我上传的素材 | |||
*/ | |||
async getMyScListApi() { | |||
const res = await myScListApi(this.pageNum, this.pageSize) | |||
this.myScList = res.data.list | |||
}, | |||
go(url) { | |||
this.$router.push(url) | |||
} | |||
}, | |||
async created() { | |||
// 判断是不是草稿或者生成失败的情况 | |||
this.imgUrl = this.$route.query.imgUrl | |||
this.modelId = this.$route.query.modelId | |||
this.mouldSmId = this.$route.query.mouldSmId | |||
this.saveID = this.$route.query.saveID | |||
if (this.$route.query.modify) { | |||
console.log(this.$route.query.id) | |||
await this.getDetailById(this.$route.query.id) | |||
} | |||
await this.getDetailById(this.$route.query.id) | |||
this.getSystemBGIList() | |||
this.getMyBGIListApi() | |||
this.getSystemScList() | |||
this.getMyScListApi() | |||
}, | |||
mounted() { | |||
this.inPage = true | |||
scrollToID('top') | |||
// window.addEventListener( | |||
// 'popstate', | |||
// Dialog.confirm({ | |||
// // title: '退出登录', | |||
// message: '您还未编辑完成,需要保存为草稿吗?' | |||
// }) | |||
// .then(async () => { | |||
// const res = await that.submit() | |||
// next() | |||
// }) | |||
// .catch(() => { | |||
// next() | |||
// }) | |||
// ) | |||
}, | |||
beforeRouteLeave(to, from, next) { | |||
let that = this | |||
Dialog.confirm({ | |||
// title: '退出登录', | |||
message: '您还未编辑完成,需要保存为草稿吗?' | |||
}) | |||
.then(async () => { | |||
const res = await that.submit() | |||
next() | |||
}) | |||
.catch(() => { | |||
next() | |||
}) | |||
} | |||
} | |||
</script> | |||
@@ -606,13 +766,23 @@ export default { | |||
<style lang="scss" scoped> | |||
.editPosition { | |||
position: relative; | |||
width: 200px; | |||
height: 350px; | |||
width: 216px; | |||
height: 384px; | |||
border-radius: 12px; | |||
overflow: hidden; | |||
background-color: pink; | |||
} | |||
.verticalmodel { | |||
width: 384px !important; | |||
height: 216px !important; | |||
margin-bottom: 50px; | |||
} | |||
.CutImg { | |||
position: absolute; | |||
top: 0; | |||
left: 0; | |||
width: 100%; | |||
height: 100%; | |||
} | |||
.page { | |||
// transform会导致其子元素固定定位失效 | |||
@@ -743,9 +913,9 @@ export default { | |||
align-items: center; | |||
justify-content: center; | |||
top: 20%; | |||
left: 290px; | |||
padding-left: 10px; | |||
width: 80px; | |||
right: 5px; | |||
// padding-left: 10px; | |||
width: 70px; | |||
height: 22px; | |||
font-size: 10px; | |||
line-height: 28px; | |||
@@ -754,7 +924,10 @@ export default { | |||
background-color: rgba(255, 255, 255, 1); | |||
border-radius: 11px; | |||
} | |||
.moveLayer1 { | |||
top: 38% !important; | |||
left: 20% !important; | |||
} | |||
img { | |||
vertical-align: middle; | |||
width: 10px; | |||
@@ -765,6 +938,10 @@ export default { | |||
.below { | |||
top: 25%; | |||
} | |||
.below1 { | |||
top: 38% !important; | |||
left: 60% !important; | |||
} | |||
.active { | |||
// opacity: 0.5; | |||
@@ -964,7 +1141,7 @@ export default { | |||
z-index: 9; | |||
img { | |||
background: red; | |||
// background: red; | |||
width: 80px; | |||
height: 120px; | |||
border-radius: 12px; | |||
@@ -18,7 +18,8 @@ import { mapState, mapActions } from 'vuex' | |||
// 工具 | |||
import { scrollToID } from '../../utils' | |||
import HeadTop from './../../components/common/head.vue' | |||
// 请求 | |||
import { getModelDetailById } from '../../api/getPaper.js' | |||
Vue.use(Toast) | |||
export default { | |||
components: { | |||
@@ -26,11 +27,13 @@ export default { | |||
}, | |||
data() { | |||
return { | |||
videoType: null, // 判断模版横屏竖屏 | |||
inPage: false, | |||
imgUrl: null, //模版图片地址 | |||
modelId: null, //模版id | |||
mouldSmId: null, //模版标识 | |||
saveID: null //作品id | |||
saveID: null, //作品id | |||
id: null | |||
} | |||
}, | |||
computed: { | |||
@@ -46,10 +49,12 @@ export default { | |||
this.$router.push({ | |||
path: '/editModel', | |||
query: { | |||
imgUrl: this.imgUrl, | |||
modelId: this.modelId, | |||
mouldSmId: this.mouldSmId, | |||
saveID: this.saveID | |||
// videoType: this.videoType, | |||
// imgUrl: this.imgUrl, | |||
// modelId: this.modelId, | |||
// mouldSmId: this.mouldSmId, | |||
// saveID: this.saveID | |||
id: this.id | |||
} | |||
}) | |||
}, | |||
@@ -58,11 +63,15 @@ export default { | |||
this.$router.push(url) | |||
} | |||
}, | |||
created() { | |||
this.imgUrl = this.$route.query.imgUrl | |||
this.modelId = this.$route.query.modelId | |||
this.mouldSmId = this.$route.query.mouldSmId | |||
this.saveID = this.$route.query.saveID | |||
async created() { | |||
// this.videoType = this.$route.query.videoType | |||
// this.imgUrl = this.$route.query.imgUrl | |||
// this.modelId = this.$route.query.modelId | |||
// this.mouldSmId = this.$route.query.mouldSmId | |||
// this.saveID = this.$route.query.saveID | |||
this.id = this.$route.query.id | |||
const res = await getModelDetailById(this.id) | |||
this.imgUrl = res.data.personMould.imgUrl | |||
}, | |||
mounted() { | |||
this.inPage = true | |||
@@ -20,17 +20,63 @@ | |||
class="floatRight" | |||
><img src="../../assets/icon/icon-list1.png" alt="" | |||
/></span> | |||
<span class="floatRight">只看竖屏</span> | |||
<span class="floatRight">只看横屏</span> | |||
<span class="floatRight" @click="getNewList(1)">只看竖屏</span> | |||
<span class="floatRight" @click="getNewList(2)">只看横屏</span> | |||
</div> | |||
<!-- 具体内容 --> | |||
<!-- 列表样式--大图 --> | |||
<div v-if="videoList.length == 0">暂无数据</div> | |||
<!-- 新 修改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 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> | |||
</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> | |||
</waterfall> | |||
<!-- 旧 修改v-if --> | |||
<div | |||
v-if="videoList.length == 0" | |||
v-show="listActive == 1" | |||
v-masonry | |||
class="waterFall" | |||
item-selector=".waterFall-item" | |||
column-width="170" | |||
:transition-duration="'0.3s'" | |||
> | |||
<div | |||
v-masonry-tile | |||
@@ -181,6 +227,7 @@ export default { | |||
}, | |||
data() { | |||
return { | |||
videoType: 1, //1竖屏2横屏 | |||
showPopup: false, // 编辑和删除显示隐藏 | |||
clickItem: -1, // 弹出层显示隐藏 | |||
showTrue: true, // 弹出层显示隐藏 | |||
@@ -205,6 +252,12 @@ export default { | |||
methods: { | |||
...mapActions(['setCharacters']), | |||
// 横屏竖屏列表 | |||
getNewList(videoType) { | |||
this.videoType = videoType | |||
this.loadVideoList(1, this.pageSize, videoType) | |||
}, | |||
closeDialog() { | |||
Dialog.close | |||
}, | |||
@@ -222,7 +275,7 @@ export default { | |||
}, | |||
pageChange() { | |||
this.loadVideoList(this.currentPage, this.pageSize) | |||
this.loadVideoList(this.currentPage, this.pageSize, this.videoType) | |||
}, | |||
// 点击空白区域退出提示 | |||
@@ -259,12 +312,13 @@ export default { | |||
this.$router.push({ | |||
path: '/editModel', | |||
query: { | |||
saveID: item.id, | |||
id: item.id, | |||
imgUrl: item.id, | |||
modelId: item.id, | |||
mouldSmId: item.id, | |||
modify: true | |||
// videoType: item.videoType, | |||
// saveID: item.id, | |||
id: item.id | |||
// imgUrl: item.id, | |||
// modelId: item.id, | |||
// mouldSmId: item.id, | |||
// modify: true | |||
} | |||
}) | |||
} | |||
@@ -277,7 +331,8 @@ export default { | |||
else if (status == 2) { | |||
const url = item.videoPathUri + item.videoPath | |||
this.$router.push({ | |||
path: '/downloadVideo', | |||
// path: '/downloadVideo', | |||
path: '/videoDownload', | |||
query: { | |||
videoId: item.videoId, | |||
videoUrl: url | |||
@@ -306,7 +361,11 @@ export default { | |||
}) | |||
.then(async () => { | |||
await this.deleteVideoById(id) | |||
this.loadVideoList(this.currentPage, this.pageSize) | |||
await this.loadVideoList( | |||
this.currentPage, | |||
this.pageSize, | |||
this.videoType | |||
) | |||
}) | |||
.catch(() => { | |||
return | |||
@@ -316,9 +375,9 @@ export default { | |||
/** | |||
* @description:获取作品列表 | |||
*/ | |||
async loadVideoList(pageNum, pageSize) { | |||
async loadVideoList(pageNum, pageSize, videoType) { | |||
try { | |||
const res = await getVideoList(pageNum, pageSize) | |||
const res = await getVideoList(pageNum, pageSize, videoType) | |||
console.log(res, '获取作品列表') | |||
this.videoList = res.data.list | |||
this.total = res.data.total | |||
@@ -388,7 +447,7 @@ export default { | |||
}, | |||
created() { | |||
this.loadVideoList(1, this.pageSize) | |||
this.loadVideoList(1, this.pageSize, this.videoType) | |||
} | |||
} | |||
</script> | |||
@@ -403,6 +462,7 @@ export default { | |||
} | |||
} | |||
.page { | |||
width: 100%; | |||
transform: translateX(30%); | |||
opacity: 0; | |||
transition: all 0.5s; // global-transition | |||
@@ -445,6 +505,7 @@ export default { | |||
border-radius: 16px; | |||
} | |||
.item { | |||
width: 100%; | |||
padding: 15px 10px; | |||
.title { | |||
font-size: 16px; | |||
@@ -490,8 +551,15 @@ export default { | |||
.videoInfo { | |||
flex: 1; | |||
margin-left: 12px; | |||
white-space: nowrap; | |||
overflow: hidden; | |||
text-overflow: ellipsis; | |||
.videoName { | |||
width: 100%; | |||
font-size: 16px; | |||
white-space: nowrap; | |||
overflow: hidden; | |||
text-overflow: ellipsis; | |||
font-weight: 600; | |||
} | |||
.createTime { | |||
@@ -678,14 +746,14 @@ export default { | |||
// 瀑布流 | |||
.waterFall { | |||
display: flex; | |||
flex-wrap: wrap; | |||
justify-content: space-between; | |||
width: 100%; | |||
// display: flex; | |||
// flex-wrap: wrap; | |||
// justify-content: space-between; | |||
// width: 100%; | |||
width: 350px; | |||
&-item { | |||
// max-width: 355px; //非瀑布流 | |||
max-width: 170px; | |||
max-height: 300px; | |||
// max-width: 150px; | |||
// max-height: 270px; | |||
padding: 5px; | |||
border-radius: 12px; | |||
overflow: hidden; | |||
@@ -693,7 +761,9 @@ export default { | |||
position: relative; | |||
border-radius: 12px; | |||
overflow: hidden; | |||
width: 160px; | |||
// width: 160px; | |||
max-width: 162px; | |||
max-height: 288px; | |||
// padding: 5px; | |||
} | |||
img { | |||
@@ -7485,7 +7485,7 @@ | |||
"resolved" "https://registry.npmmirror.com/regenerator-runtime/-/regenerator-runtime-0.11.1.tgz" | |||
"version" "0.11.1" | |||
"regenerator-runtime@^0.13.11": | |||
"regenerator-runtime@^0.13.1", "regenerator-runtime@^0.13.11": | |||
"integrity" "sha512-kY1AZVr2Ra+t+piVaJ4gxaFaReZVH40AKNo7UCX6W+dEwBo/2oZJzqfuN1qLq1oL45o56cPaTXELwrTh8Fpggg==" | |||
"resolved" "https://registry.npmmirror.com/regenerator-runtime/-/regenerator-runtime-0.13.11.tgz" | |||
"version" "0.13.11" | |||
@@ -9196,6 +9196,14 @@ | |||
"resolved" "https://registry.npmmirror.com/vue-template-es2015-compiler/-/vue-template-es2015-compiler-1.9.1.tgz" | |||
"version" "1.9.1" | |||
"vue-waterfall2@^1.10.6": | |||
"integrity" "sha512-roL8gYdFkWcpqeUqci8+RPj4rCDMrdmiSaZ2V7MZSy1vkYmfLpBPxHn1OshWPefBYGyilasnBqdQPUeL3ddrbw==" | |||
"resolved" "https://registry.npmmirror.com/vue-waterfall2/-/vue-waterfall2-1.10.6.tgz" | |||
"version" "1.10.6" | |||
dependencies: | |||
"babel-runtime" "^6.26.0" | |||
"regenerator-runtime" "^0.13.1" | |||
"vue@^2.0.0", "vue@^2.0.0 || >=3.0.0", "vue@^2.5.17", "vue@^2.6.11", "vue@^3.0.0-0 || ^2.6.0", "vue@>= 2.6.0": | |||
"integrity" "sha512-b2qkFyOM0kwqWFuQmgd4o+uHGU7T+2z3T+WQp8UBjADfEv2n4FEMffzBmCKNP0IGzOEEfYjvtcC62xaSKeQDrQ==" | |||
"resolved" "https://registry.npmmirror.com/vue/-/vue-2.7.14.tgz" | |||