浏览代码

背景图片素材图片接口

master
congzc 2 年前
父节点
当前提交
1a6befe358
共有 13 个文件被更改,包括 498 次插入154 次删除
  1. +19
    -0
      package-lock.json
  2. +1
    -0
      package.json
  3. +56
    -0
      src/api/editModel.js
  4. +2
    -2
      src/api/myPage.js
  5. +10
    -4
      src/components/CutImg.vue
  6. +47
    -47
      src/components/editPosition.vue
  7. +3
    -0
      src/main.js
  8. +0
    -1
      src/utils/request.js
  9. +4
    -8
      src/views/model/chooseModel.vue
  10. +235
    -58
      src/views/model/editModel.vue
  11. +20
    -11
      src/views/model/previewModel.vue
  12. +92
    -22
      src/views/myPage/myPage.vue
  13. +9
    -1
      yarn.lock

+ 19
- 0
package-lock.json 查看文件

@@ -23,6 +23,7 @@
"vue-cropper": "^0.5.11", "vue-cropper": "^0.5.11",
"vue-masonry": "^0.16.0", "vue-masonry": "^0.16.0",
"vue-router": "^3.2.0", "vue-router": "^3.2.0",
"vue-waterfall2": "^1.10.6",
"vuex": "^3.4.0" "vuex": "^3.4.0"
}, },
"devDependencies": { "devDependencies": {
@@ -17150,6 +17151,15 @@
"dev": true, "dev": true,
"license": "MIT" "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": { "node_modules/vuex": {
"version": "3.6.2", "version": "3.6.2",
"resolved": "https://registry.npmmirror.com/vuex/-/vuex-3.6.2.tgz", "resolved": "https://registry.npmmirror.com/vuex/-/vuex-3.6.2.tgz",
@@ -30665,6 +30675,15 @@
"integrity": "sha512-4gDntzrifFnCEvyoO8PqyJDmguXgVPxKiIxrBKjIowvL9l+N66196+72XVYR8BBf1Uv1Fgt3bGevJ+sEmxfZzw==", "integrity": "sha512-4gDntzrifFnCEvyoO8PqyJDmguXgVPxKiIxrBKjIowvL9l+N66196+72XVYR8BBf1Uv1Fgt3bGevJ+sEmxfZzw==",
"dev": true "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": { "vuex": {
"version": "3.6.2", "version": "3.6.2",
"resolved": "https://registry.npmmirror.com/vuex/-/vuex-3.6.2.tgz", "resolved": "https://registry.npmmirror.com/vuex/-/vuex-3.6.2.tgz",


+ 1
- 0
package.json 查看文件

@@ -22,6 +22,7 @@
"vue-cropper": "^0.5.11", "vue-cropper": "^0.5.11",
"vue-masonry": "^0.16.0", "vue-masonry": "^0.16.0",
"vue-router": "^3.2.0", "vue-router": "^3.2.0",
"vue-waterfall2": "^1.10.6",
"vuex": "^3.4.0" "vuex": "^3.4.0"
}, },
"devDependencies": { "devDependencies": {


+ 56
- 0
src/api/editModel.js 查看文件

@@ -1,6 +1,18 @@
import request from '@/utils/request' import request from '@/utils/request'
// https://smapitest.malls.iformall.com/C/api/upload/awsImgUpload // https://smapitest.malls.iformall.com/C/api/upload/awsImgUpload
// https://smapitest.malls.iformall.com/C/api/ // 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 * @description 试听MP3
* @returns id * @returns id
@@ -11,6 +23,50 @@ export function videoDetial(id) {
method: 'get', 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 上传背景图 * @description 上传背景图
* @returns data * @returns data


+ 2
- 2
src/api/myPage.js 查看文件

@@ -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) {
export function getVideoList(pageNum, pageSize,videoType) {
return request({ return request({
url: `/api/userVideo/list?pageNum=${pageNum}&pageSize=${pageSize}`,
url: `/api/userVideo/list?pageNum=${pageNum}&pageSize=${pageSize}&videoType=${videoType}`,
method: 'get' method: 'get'
}) })
} }


+ 10
- 4
src/components/CutImg.vue 查看文件

@@ -1,9 +1,15 @@
<template> <template>
<div class="uploder"> <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> </van-uploader>
</div> </div>
<div class="uploadava"> <div class="uploadava">


+ 47
- 47
src/components/editPosition.vue 查看文件

@@ -47,11 +47,11 @@ export default {
imgUrl: { imgUrl: {
default: false default: false
// type: String // type: String
},
materialList: {
default: false,
type: Object
} }
// scList: {
// default: false,
// type: Array
// }
}, },
data() { data() {
return { return {
@@ -63,49 +63,49 @@ export default {
windowWidth: 0, windowWidth: 0,
windowHeight: 0, windowHeight: 0,
scale: 1, 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
// }
// ]
} }
}, },




+ 3
- 0
src/main.js 查看文件

@@ -14,6 +14,9 @@ import "@/styles/reset.scss"; // 引入清除默认样式
import "@/styles/index.scss"; // 引入全局样式 import "@/styles/index.scss"; // 引入全局样式
import { VueMasonryPlugin } from 'vue-masonry'; import { VueMasonryPlugin } from 'vue-masonry';


import waterfall from 'vue-waterfall2'

Vue.use(waterfall)
Vue.use(VueMasonryPlugin); // 瀑布流插件 Vue.use(VueMasonryPlugin); // 瀑布流插件
Vue.use(ElementUI); Vue.use(ElementUI);
Vue.use(Vant) Vue.use(Vant)


+ 0
- 1
src/utils/request.js 查看文件

@@ -35,7 +35,6 @@ request.interceptors.response.use(
let code = response.data.code let code = response.data.code
// 当token过期或损坏时 // 当token过期或损坏时
if (code == 1052) { if (code == 1052) {
// if (1==1) {
router.push("/login"); router.push("/login");
Toast.fail("登录过期,请重新登录!"); Toast.fail("登录过期,请重新登录!");
return return


+ 4
- 8
src/views/model/chooseModel.vue 查看文件

@@ -150,12 +150,7 @@ export default {
this.$router.push({ this.$router.push({
path: '/previewModel', path: '/previewModel',
query: { 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) { } catch (error) {
@@ -279,13 +274,14 @@ export default {
// padding: 0 23px; // padding: 0 23px;
padding-left: 15px; padding-left: 15px;
width: 100%; width: 100%;
margin-right: -20px;
// margin-right: -20px;


.model { .model {
position: relative; position: relative;
text-align: left; text-align: left;
margin-bottom: 15px; margin-bottom: 15px;
max-width: 170px;
max-width: 154px;
max-height: 273px;
opacity: 0.9; opacity: 0.9;
padding: 5px; padding: 5px;
&-padding { &-padding {


+ 235
- 58
src/views/model/editModel.vue 查看文件

@@ -5,9 +5,16 @@
<!-- 中间内容区 --> <!-- 中间内容区 -->
<div class="content"> <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> </div>
<!-- <img :src="imgUrl" alt="" /> --> <!-- <img :src="imgUrl" alt="" /> -->
<!-- 字幕 --> <!-- 字幕 -->
@@ -55,7 +62,7 @@
<div class="makeVideo" @click="submit">立即制作</div> <div class="makeVideo" @click="submit">立即制作</div>
<!-- 上移下移 --> <!-- 上移下移 -->
<div class="upAndBottomBtn"> <div class="upAndBottomBtn">
<div class="moveLayer">
<div class="moveLayer" :class="videoType == 2 ? 'moveLayer1' : ''">
<div class="btnContent" @click="$refs.EditPosition.controlImg(3)"> <div class="btnContent" @click="$refs.EditPosition.controlImg(3)">
<img <img
src="https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPngf9bff6080bf29c6886ad614d479aebfb5fc41429c11c0bea78ca695a0f0e7388" src="https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPngf9bff6080bf29c6886ad614d479aebfb5fc41429c11c0bea78ca695a0f0e7388"
@@ -64,11 +71,8 @@
上移一层 上移一层
</div> </div>
</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 <img
src="https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPngde1a7c84fc47b26095186ff9ee7ec07d7fe7bcd2cde90f3178f4edb8cdb08bcd" src="https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPngde1a7c84fc47b26095186ff9ee7ec07d7fe7bcd2cde90f3178f4edb8cdb08bcd"
alt="" alt=""
@@ -172,7 +176,11 @@
:key="index" :key="index"
> >
<img src="../../assets/icon/icon-earphone.png" alt="" /> <img src="../../assets/icon/icon-earphone.png" alt="" />
<div>{{ item.title }}</div>
<div>
{{ item.subTitle }}-{{ item.title }}
<br />
{{ item.ageTypeStr }}
</div>
</div> </div>
</template> </template>
</div> </div>
@@ -180,6 +188,7 @@
</van-tabs> </van-tabs>
</div> </div>
</div> </div>

<!-- 背景 --> <!-- 背景 -->
<div v-show="bottomTabActive == 2"> <div v-show="bottomTabActive == 2">
<!-- 顶部文字 --> <!-- 顶部文字 -->
@@ -192,7 +201,7 @@
/> />
更换背景 更换背景
</div> </div>
<div @click="showTabSheet = !showTabSheet">
<div @click="sureImg">
<img class="yesImg" src="../../assets/icon/icon-yes.png" alt="" /> <img class="yesImg" src="../../assets/icon/icon-yes.png" alt="" />
</div> </div>
</div> </div>
@@ -201,14 +210,14 @@
<!-- tab栏 --> <!-- tab栏 -->
<div class="myTab"> <div class="myTab">
<div <div
@click="bjAction = 0"
@click="changeShowBGIList(0)"
class="myTab-item" class="myTab-item"
:class="{ active: bjAction == 0 }" :class="{ active: bjAction == 0 }"
> >
<img src="../../assets/icon/icon-folder@2x.png" alt="" /> 背景库 <img src="../../assets/icon/icon-folder@2x.png" alt="" /> 背景库
</div> </div>
<div <div
@click="bjAction = 1"
@click="changeShowBGIList(1)"
class="myTab-item" class="myTab-item"
:class="{ active: bjAction == 1 }" :class="{ active: bjAction == 1 }"
> >
@@ -216,8 +225,8 @@
</div> </div>
</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-title">图片<i></i></div>
<div class="myTab-show-list"> <div class="myTab-show-list">
<!-- 上传 --> <!-- 上传 -->
@@ -228,9 +237,9 @@
</div> </div>
<!-- 图片列表 --> <!-- 图片列表 -->
<div <div
@click="bjImgAction = index"
@click="chooseImg(index, 'bj')"
class="myTab-show-list-item" class="myTab-show-list-item"
v-for="(item, index) in 7"
v-for="(item, index) in showBGIList"
:key="index" :key="index"
> >
<div <div
@@ -246,12 +255,13 @@
× ×
</div> </div>
<!-- 中间图片 --> <!-- 中间图片 -->
<img src="" alt="" />
<img :src="item.material" alt="" />
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>

<!-- 素材 --> <!-- 素材 -->
<div v-show="bottomTabActive == 3"> <div v-show="bottomTabActive == 3">
<!-- 顶部文字 --> <!-- 顶部文字 -->
@@ -269,14 +279,14 @@
<!-- tab栏 --> <!-- tab栏 -->
<div class="myTab"> <div class="myTab">
<div <div
@click="scAction = 0"
@click="changeShowBGIList(3)"
class="myTab-item" class="myTab-item"
:class="{ active: scAction == 0 }" :class="{ active: scAction == 0 }"
> >
<img src="../../assets/icon/icon-folder@2x.png" alt="" /> 背景
<img src="../../assets/icon/icon-folder@2x.png" alt="" /> 素材
</div> </div>
<div <div
@click="scAction = 1"
@click="changeShowBGIList(4)"
class="myTab-item" class="myTab-item"
:class="{ active: scAction == 1 }" :class="{ active: scAction == 1 }"
> >
@@ -284,20 +294,21 @@
</div> </div>
</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-title">图片<i></i></div>
<div class="myTab-show-list"> <div class="myTab-show-list">
<!-- 上传 --> <!-- 上传 -->
<div v-if="scAction == 1" class="myTab-show-list-upload"> <div v-if="scAction == 1" class="myTab-show-list-upload">
<img src="../../assets/icon/icon-upload@2x.png" alt="" /> <img src="../../assets/icon/icon-upload@2x.png" alt="" />
<input type="file" />
<!-- 上传背景组件 -->
<CutImg class="CutImg"></CutImg>
</div> </div>
<!-- 图片列表 --> <!-- 图片列表 -->
<div <div
@click="scImgAction = index" @click="scImgAction = index"
class="myTab-show-list-item" class="myTab-show-list-item"
v-for="(item, index) in 7"
v-for="(item, index) in showScList"
:key="index" :key="index"
> >
<div <div
@@ -313,7 +324,7 @@
× ×
</div> </div>
<!-- 中间图片 --> <!-- 中间图片 -->
<img src="" alt="" />
<img :src="item.material" alt="" />
</div> </div>
</div> </div>
</div> </div>
@@ -329,7 +340,7 @@
<script> <script>
// 组件 // 组件
import Vue from 'vue' import Vue from 'vue'
import { Toast } from 'vant'
import { Toast, Dialog } from 'vant'
import { mapState, mapActions } from 'vuex' import { mapState, mapActions } from 'vuex'
import HeadTop from './../../components/common/head.vue' import HeadTop from './../../components/common/head.vue'
import CutImg from '../../components/CutImg.vue' import CutImg from '../../components/CutImg.vue'
@@ -343,15 +354,22 @@ import { franc } from 'franc'
import { import {
doCreateVideo, doCreateVideo,
doFindVideoById, doFindVideoById,
getVoiceList,
getVoiceList, // 获取声音列表,废弃
getBackGroundList, getBackGroundList,
doFindInviteCode, doFindInviteCode,
saveOrUpdateUserVideo saveOrUpdateUserVideo
} from '@/api/generateVideo' } from '@/api/generateVideo'
import { videoDetial } from '@/api/editModel'
import {
videoDetial,
voiceList,
systemBGIListApi,
myBGIListApi,
systemScListApi,
myScListApi
} from '@/api/editModel'
import { getModelDetailById } from '../../api/getPaper.js' import { getModelDetailById } from '../../api/getPaper.js'


Vue.use(Toast)
Vue.use(-Toast)
export default { export default {
components: { components: {
HeadTop, HeadTop,
@@ -360,9 +378,13 @@ export default {
}, },
data() { data() {
return { return {
pageNum: 1,
pageSize: 20,
videoType: null, //判断横屏2还是竖屏1
audioUrl: null, // 声音试听 audioUrl: null, // 声音试听
inPage: false, inPage: false,
imgUrl: false,
imgUrl: false, // 背景图
materialList: {}, // 传给组件的素材,背景,数字人数据
sclist: [ sclist: [
{ {
text: '小div1', text: '小div1',
@@ -372,11 +394,11 @@ export default {
scale: 1, //缩放 scale: 1, //缩放
zIndex: 3 //层级 zIndex: 3 //层级
} }
], //素材列表
modelId: null,
], //该作品的素材列表
personMouldId: null, //选择数字人id
mouldSmId: null, mouldSmId: null,
saveID: null, // 作品id saveID: null, // 作品id
inputTitle: '',
inputTitle: '', // 作品标题
textareaContent: '', // 输入框内容 textareaContent: '', // 输入框内容
bottomTabActive: 2, // 底部导航高亮 bottomTabActive: 2, // 底部导航高亮
showSubtitle: false, // 是否展示字幕 showSubtitle: false, // 是否展示字幕
@@ -391,10 +413,12 @@ export default {
bjImgAction: -1, // 选中背景图高亮 bjImgAction: -1, // 选中背景图高亮
scAction: 0, // 素材:素材库和上传高亮 scAction: 0, // 素材:素材库和上传高亮
scImgAction: -1, // 选中素材图高亮 scImgAction: -1, // 选中素材图高亮
bjLibrary: [], // 背景库列表
myBjLibrary: [], // 我上传的背景库列表
scLibrary: [], // 素材库列表
myScLibrary: [] // 我上传的素材库列表
showBGIList: [], // 渲染时代替下面2个列表
systemBGIList: [], // 背景库列表
myBGIList: [], // 我上传的背景库列表
showScList: [], // 渲染时代替下面2个列表
systemScList: [], // 素材库列表
myScList: [] // 我上传的素材库列表
} }
}, },
computed: { computed: {
@@ -425,10 +449,11 @@ export default {
const language = franc(this.textareaContent) const language = franc(this.textareaContent)
console.log(language, '语种') console.log(language, '语种')
const data = { const data = {
personMouldId: this.personMouldId,
paperwork: this.textareaContent paperwork: this.textareaContent
} }
try { try {
const res = await getVoiceList(data)
const res = await voiceList(data)
console.log(res, '获取声音列表') console.log(res, '获取声音列表')
this.soundItemList = res.data.list this.soundItemList = res.data.list
} catch (error) { } catch (error) {
@@ -452,6 +477,7 @@ export default {
this.soundChoose = {} this.soundChoose = {}
} }
}, },
// 提交合成视频
submit() { submit() {
// 组装参数 // 组装参数
console.log(this.soundChoose.id) console.log(this.soundChoose.id)
@@ -460,7 +486,7 @@ export default {
backgroundMouldSmId: '', //背景标识 backgroundMouldSmId: '', //背景标识
id: this.saveID, //作品id id: this.saveID, //作品id
paperwork: this.textareaContent, //文本框内容 paperwork: this.textareaContent, //文本框内容
personMouldId: this.modelId, //模版id
personMouldId: this.personMouldId, //模版id
personMouldSmId: this.mouldSmId, //模版标识 personMouldSmId: this.mouldSmId, //模版标识
title: this.inputTitle, //文案标题 title: this.inputTitle, //文案标题
type: 1, //写死type type: 1, //写死type
@@ -562,13 +588,32 @@ export default {
async getDetailById(id) { async getDetailById(id) {
try { try {
const res = await getModelDetailById(id) 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.mouldSmId = res.data.personMouldSmId
this.inputTitle = res.data.title this.inputTitle = res.data.title
this.textareaContent = res.data.paperwork || '' this.textareaContent = res.data.paperwork || ''
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
@@ -581,24 +626,139 @@ export default {
Toast.fail(error.message) 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) { go(url) {
this.$router.push(url) this.$router.push(url)
} }
}, },
async created() { 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() { mounted() {
this.inPage = true this.inPage = true
scrollToID('top') 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> </script>
@@ -606,13 +766,23 @@ export default {
<style lang="scss" scoped> <style lang="scss" scoped>
.editPosition { .editPosition {
position: relative; position: relative;
width: 200px;
height: 350px;
width: 216px;
height: 384px;
border-radius: 12px; border-radius: 12px;
overflow: hidden; overflow: hidden;
background-color: pink; background-color: pink;
} }
.verticalmodel {
width: 384px !important;
height: 216px !important;
margin-bottom: 50px;
}
.CutImg { .CutImg {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
} }
.page { .page {
// transform会导致其子元素固定定位失效 // transform会导致其子元素固定定位失效
@@ -743,9 +913,9 @@ export default {
align-items: center; align-items: center;
justify-content: center; justify-content: center;
top: 20%; top: 20%;
left: 290px;
padding-left: 10px;
width: 80px;
right: 5px;
// padding-left: 10px;
width: 70px;
height: 22px; height: 22px;
font-size: 10px; font-size: 10px;
line-height: 28px; line-height: 28px;
@@ -754,7 +924,10 @@ export default {
background-color: rgba(255, 255, 255, 1); background-color: rgba(255, 255, 255, 1);
border-radius: 11px; border-radius: 11px;
} }

.moveLayer1 {
top: 38% !important;
left: 20% !important;
}
img { img {
vertical-align: middle; vertical-align: middle;
width: 10px; width: 10px;
@@ -765,6 +938,10 @@ export default {
.below { .below {
top: 25%; top: 25%;
} }
.below1 {
top: 38% !important;
left: 60% !important;
}


.active { .active {
// opacity: 0.5; // opacity: 0.5;
@@ -964,7 +1141,7 @@ export default {
z-index: 9; z-index: 9;


img { img {
background: red;
// background: red;
width: 80px; width: 80px;
height: 120px; height: 120px;
border-radius: 12px; border-radius: 12px;


+ 20
- 11
src/views/model/previewModel.vue 查看文件

@@ -18,7 +18,8 @@ import { mapState, mapActions } from 'vuex'
// 工具 // 工具
import { scrollToID } from '../../utils' import { scrollToID } from '../../utils'
import HeadTop from './../../components/common/head.vue' import HeadTop from './../../components/common/head.vue'

// 请求
import { getModelDetailById } from '../../api/getPaper.js'
Vue.use(Toast) Vue.use(Toast)
export default { export default {
components: { components: {
@@ -26,11 +27,13 @@ export default {
}, },
data() { data() {
return { return {
videoType: null, // 判断模版横屏竖屏
inPage: false, inPage: false,
imgUrl: null, //模版图片地址 imgUrl: null, //模版图片地址
modelId: null, //模版id modelId: null, //模版id
mouldSmId: null, //模版标识 mouldSmId: null, //模版标识
saveID: null //作品id
saveID: null, //作品id
id: null
} }
}, },
computed: { computed: {
@@ -46,10 +49,12 @@ export default {
this.$router.push({ this.$router.push({
path: '/editModel', path: '/editModel',
query: { 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) 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() { mounted() {
this.inPage = true this.inPage = true


+ 92
- 22
src/views/myPage/myPage.vue 查看文件

@@ -20,17 +20,63 @@
class="floatRight" class="floatRight"
><img src="../../assets/icon/icon-list1.png" alt="" ><img src="../../assets/icon/icon-list1.png" alt=""
/></span> /></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>
<!-- 具体内容 --> <!-- 具体内容 -->
<!-- 列表样式--大图 --> <!-- 列表样式--大图 -->
<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 <div
v-if="videoList.length == 0"
v-show="listActive == 1" v-show="listActive == 1"
v-masonry v-masonry
class="waterFall" class="waterFall"
item-selector=".waterFall-item" item-selector=".waterFall-item"
column-width="170" column-width="170"
:transition-duration="'0.3s'"
> >
<div <div
v-masonry-tile v-masonry-tile
@@ -181,6 +227,7 @@ export default {
}, },
data() { data() {
return { return {
videoType: 1, //1竖屏2横屏
showPopup: false, // 编辑和删除显示隐藏 showPopup: false, // 编辑和删除显示隐藏
clickItem: -1, // 弹出层显示隐藏 clickItem: -1, // 弹出层显示隐藏
showTrue: true, // 弹出层显示隐藏 showTrue: true, // 弹出层显示隐藏
@@ -205,6 +252,12 @@ export default {


methods: { methods: {
...mapActions(['setCharacters']), ...mapActions(['setCharacters']),
// 横屏竖屏列表
getNewList(videoType) {
this.videoType = videoType
this.loadVideoList(1, this.pageSize, videoType)
},

closeDialog() { closeDialog() {
Dialog.close Dialog.close
}, },
@@ -222,7 +275,7 @@ export default {
}, },


pageChange() { pageChange() {
this.loadVideoList(this.currentPage, this.pageSize)
this.loadVideoList(this.currentPage, this.pageSize, this.videoType)
}, },


// 点击空白区域退出提示 // 点击空白区域退出提示
@@ -259,12 +312,13 @@ export default {
this.$router.push({ this.$router.push({
path: '/editModel', path: '/editModel',
query: { 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) { else if (status == 2) {
const url = item.videoPathUri + item.videoPath const url = item.videoPathUri + item.videoPath
this.$router.push({ this.$router.push({
path: '/downloadVideo',
// path: '/downloadVideo',
path: '/videoDownload',
query: { query: {
videoId: item.videoId, videoId: item.videoId,
videoUrl: url videoUrl: url
@@ -306,7 +361,11 @@ export default {
}) })
.then(async () => { .then(async () => {
await this.deleteVideoById(id) await this.deleteVideoById(id)
this.loadVideoList(this.currentPage, this.pageSize)
await this.loadVideoList(
this.currentPage,
this.pageSize,
this.videoType
)
}) })
.catch(() => { .catch(() => {
return return
@@ -316,9 +375,9 @@ export default {
/** /**
* @description:获取作品列表 * @description:获取作品列表
*/ */
async loadVideoList(pageNum, pageSize) {
async loadVideoList(pageNum, pageSize, videoType) {
try { try {
const res = await getVideoList(pageNum, pageSize)
const res = await getVideoList(pageNum, pageSize, videoType)
console.log(res, '获取作品列表') console.log(res, '获取作品列表')
this.videoList = res.data.list this.videoList = res.data.list
this.total = res.data.total this.total = res.data.total
@@ -388,7 +447,7 @@ export default {
}, },


created() { created() {
this.loadVideoList(1, this.pageSize)
this.loadVideoList(1, this.pageSize, this.videoType)
} }
} }
</script> </script>
@@ -403,6 +462,7 @@ export default {
} }
} }
.page { .page {
width: 100%;
transform: translateX(30%); transform: translateX(30%);
opacity: 0; opacity: 0;
transition: all 0.5s; // global-transition transition: all 0.5s; // global-transition
@@ -445,6 +505,7 @@ export default {
border-radius: 16px; border-radius: 16px;
} }
.item { .item {
width: 100%;
padding: 15px 10px; padding: 15px 10px;
.title { .title {
font-size: 16px; font-size: 16px;
@@ -490,8 +551,15 @@ export default {
.videoInfo { .videoInfo {
flex: 1; flex: 1;
margin-left: 12px; margin-left: 12px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
.videoName { .videoName {
width: 100%;
font-size: 16px; font-size: 16px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
font-weight: 600; font-weight: 600;
} }
.createTime { .createTime {
@@ -678,14 +746,14 @@ export default {


// 瀑布流 // 瀑布流
.waterFall { .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 { &-item {
// max-width: 355px; //非瀑布流
max-width: 170px;
max-height: 300px;
// max-width: 150px;
// max-height: 270px;
padding: 5px; padding: 5px;
border-radius: 12px; border-radius: 12px;
overflow: hidden; overflow: hidden;
@@ -693,7 +761,9 @@ export default {
position: relative; position: relative;
border-radius: 12px; border-radius: 12px;
overflow: hidden; overflow: hidden;
width: 160px;
// width: 160px;
max-width: 162px;
max-height: 288px;
// padding: 5px; // padding: 5px;
} }
img { img {


+ 9
- 1
yarn.lock 查看文件

@@ -7485,7 +7485,7 @@
"resolved" "https://registry.npmmirror.com/regenerator-runtime/-/regenerator-runtime-0.11.1.tgz" "resolved" "https://registry.npmmirror.com/regenerator-runtime/-/regenerator-runtime-0.11.1.tgz"
"version" "0.11.1" "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==" "integrity" "sha512-kY1AZVr2Ra+t+piVaJ4gxaFaReZVH40AKNo7UCX6W+dEwBo/2oZJzqfuN1qLq1oL45o56cPaTXELwrTh8Fpggg=="
"resolved" "https://registry.npmmirror.com/regenerator-runtime/-/regenerator-runtime-0.13.11.tgz" "resolved" "https://registry.npmmirror.com/regenerator-runtime/-/regenerator-runtime-0.13.11.tgz"
"version" "0.13.11" "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" "resolved" "https://registry.npmmirror.com/vue-template-es2015-compiler/-/vue-template-es2015-compiler-1.9.1.tgz"
"version" "1.9.1" "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": "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==" "integrity" "sha512-b2qkFyOM0kwqWFuQmgd4o+uHGU7T+2z3T+WQp8UBjADfEv2n4FEMffzBmCKNP0IGzOEEfYjvtcC62xaSKeQDrQ=="
"resolved" "https://registry.npmmirror.com/vue/-/vue-2.7.14.tgz" "resolved" "https://registry.npmmirror.com/vue/-/vue-2.7.14.tgz"


正在加载...
取消
保存