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