@@ -365,7 +376,8 @@ import {
systemBGIListApi,
myBGIListApi,
systemScListApi,
- myScListApi
+ myScListApi,
+ delImgApi
} from '@/api/editModel'
import { getModelDetailById } from '../../api/getPaper.js'
@@ -384,17 +396,12 @@ export default {
audioUrl: null, // 声音试听
inPage: false,
imgUrl: false, // 背景图
- materialList: {}, // 传给组件的素材,背景,数字人数据
- sclist: [
- {
- text: '小div1',
- url: 'img/BG@2x.b0cf224b.png',
- x: 300, // 相对左上角XY坐标
- y: 300,
- scale: 1, //缩放
- zIndex: 3 //层级
- }
- ], //该作品的素材列表
+ materialList: {
+ BGI: {},
+ scList: [],
+ virtual: {}
+ }, // 传给组件的素材,背景,数字人数据
+
personMouldId: null, //选择数字人id
mouldSmId: null,
saveID: null, // 作品id
@@ -481,17 +488,39 @@ export default {
submit() {
// 组装参数
console.log(this.soundChoose.id)
+ // 素材列表处理
+ const scList = this.materialList.scList.map((item) => {
+ return {
+ id: item.id,
+ type: 5,
+ material: item.material,
+ x: item.x,
+ y: item.y,
+ z: item.z,
+ w: item.w,
+ h: item.h
+ }
+ })
+ // 数字人处理
+ const shuziren = {
+ id: this.materialList.virtual.id,
+ type: 1,
+ material: this.materialList.virtual.material,
+ x: this.materialList.virtual.x,
+ y: this.materialList.virtual.y,
+ z: this.materialList.virtual.z,
+ w: this.materialList.virtual.w,
+ h: this.materialList.virtual.h
+ }
const data = {
- backgroundMouldId: '', // 背景id
- backgroundMouldSmId: '', //背景标识
- id: this.saveID, //作品id
- paperwork: this.textareaContent, //文本框内容
- personMouldId: this.personMouldId, //模版id
- personMouldSmId: this.mouldSmId, //模版标识
- title: this.inputTitle, //文案标题
- type: 1, //写死type
- voiceMouldId: this.soundChoose.id, //声音id
- voiceMouldSmId: this.soundChoose.mouldSmId //声音标识
+ id: this.$route.query.id,
+ videoType: this.videoType, //横屏竖屏
+ personMouldId: this.materialList.virtual.id, //数字人id
+ voiceMouldIds: [this.soundChoose.id], //声音id
+ title: this.inputTitle, //标题
+ paperwork: this.textareaContent, //语音内容
+ backgroundId: this.materialList.BGI.id, //背景id
+ materialAllJson: JSON.stringify([...scList, shuziren])
}
console.log(data, '最终提交的参数')
@@ -519,7 +548,8 @@ export default {
try {
const res = await saveOrUpdateUserVideo(data)
console.log(res, '保存或修改用户作品')
- this.createVideo({ id: this.saveID })
+ // this.createVideo({ id: this.saveID })
+ this.createVideo({ id: this.$route.query.id })
} catch (error) {
console.log(error, 'error')
Toast.fail(error.message)
@@ -529,6 +559,7 @@ export default {
* @description:生成视频
*/
async createVideo(data) {
+ let that = this
try {
const res = await doCreateVideo(data)
console.log(res, '生成视频')
@@ -539,7 +570,7 @@ export default {
}, 2000)
const timer = setInterval(() => {
// 重复调取此接口直到videoStatus == 2 || 3
- this.getVideo(this.saveID)
+ this.getVideo(that.$route.query.id)
if (this.timerOver) {
clearInterval(timer)
this.isShowCover = false
@@ -589,6 +620,17 @@ export default {
try {
const res = await getModelDetailById(id)
console.log(JSON.parse(res.data.personMouldSm))
+ this.materialList.virtual = JSON.parse(res.data.personMouldSm)
+ if (!this.materialList.virtual.w) {
+ this.materialList.virtual = {
+ ...this.materialList.virtual,
+ x: 100,
+ y: 0,
+ z: 0,
+ w: 1,
+ h: 1
+ }
+ }
// console.log(JSON.parse(res.data.backgroundSm))
// console.log(JSON.parse(res.data.materialAllJson))
this.videoType = res.data.videoType
@@ -645,21 +687,77 @@ export default {
},
// 点击对钩确定背景或者素材图
sureImg() {
- Dialog.confirm({
- // title: '退出登录',
- message: '您确定要用这张背景图吗?'
- })
- .then(() => {
- console.log('true')
- this.showTabSheet = false
+ let that = this
+ // 背景
+ if (this.bottomTabActive == 2 && this.bjImgAction != -1) {
+ Dialog.confirm({
+ // title: '退出登录',
+ message: '您确定要用这张背景图吗?'
})
- .catch(() => {
- console.log('false')
- this.showTabSheet = false
- return
+ .then(() => {
+ if (that.bjAction == 0) {
+ that.materialList.BGI = that.systemBGIList.find((item, index) => {
+ return index == that.bjImgAction
+ })
+ } else if (that.bjAction == 1) {
+ that.materialList.BGI = that.myBGIList.find((item, index) => {
+ return index == that.bjImgAction
+ })
+ }
+ this.showTabSheet = false
+ })
+ .catch(() => {
+ console.log('false')
+ this.showTabSheet = false
+ return
+ })
+ }
+ // 素材
+ else if (this.bottomTabActive == 3 && this.scImgAction != -1) {
+ Dialog.confirm({
+ // title: '退出登录',
+ message: '您确定要用这张素材图吗?'
})
+ .then(() => {
+ if (that.scAction == 0) {
+ let scItem = that.systemScList.find((item, index) => {
+ return index == that.scImgAction
+ })
+ that.materialList.scList.push({
+ ...scItem,
+ x: 0,
+ y: 0,
+ z: 0,
+ w: 1,
+ h: 1
+ })
+ } else if (that.scAction == 1) {
+ let scItem = that.myScList.find((item, index) => {
+ return index == that.scImgAction
+ })
+ that.materialList.scList.push({
+ ...scItem,
+ x: 0,
+ y: 0,
+ z: 0,
+ w: 1,
+ h: 1
+ })
+ }
+ this.showTabSheet = false
+ })
+ .catch(() => {
+ console.log('false')
+ this.showTabSheet = false
+ return
+ })
+ }
+ // 啥没选
+ else {
+ this.showTabSheet = false
+ }
},
- // 切换背景图的展示列表
+ // 切换背景图/素材图的展示列表
changeShowBGIList(type) {
if (type == 0) {
this.bjAction = 0
@@ -669,11 +767,11 @@ export default {
this.bjAction = 1
this.showBGIList = this.myBGIList
}
- if (type == 3) {
+ if (type == 2) {
this.scAction = 0
this.showScList = this.systemScList
}
- if (type == 4) {
+ if (type == 3) {
this.scAction = 1
this.showScList = this.myScList
}
@@ -702,6 +800,7 @@ export default {
)
this.myBGIList = res.data.list
},
+
/**
* @description:获取系统素材
*/
@@ -710,6 +809,7 @@ export default {
this.systemScList = res.data.list
this.showScList = this.systemScList
},
+
/**
* @description:获取我上传的素材
*/
@@ -717,6 +817,28 @@ export default {
const res = await myScListApi(this.pageNum, this.pageSize)
this.myScList = res.data.list
},
+
+ /**
+ * @description:删除上传的背景或素材
+ */
+ async delImg(id) {
+ Dialog.confirm({
+ message: '确认删除吗?'
+ })
+ .then(async () => {
+ const res = await delImgApi(id)
+ if (this.bottomTabActive == 2) {
+ this.getMyBGIListApi()
+ this.changeShowBGIList(0)
+ }
+ if (this.bottomTabActive == 3) {
+ this.getMyScListApi()
+ this.changeShowBGIList(2)
+ }
+ })
+ .catch(() => {})
+ },
+
go(url) {
this.$router.push(url)
}
diff --git a/src/views/myPage/myPage.vue b/src/views/myPage/myPage.vue
index 539f1d2..0f1926e 100644
--- a/src/views/myPage/myPage.vue
+++ b/src/views/myPage/myPage.vue
@@ -746,14 +746,12 @@ export default {
// 瀑布流
.waterFall {
- // display: flex;
- // flex-wrap: wrap;
- // justify-content: space-between;
- // width: 100%;
width: 350px;
+ ::v-deep .vue-waterfall-column {
+ width: 50% !important;
+ margin: 0 !important;
+ }
&-item {
- // max-width: 150px;
- // max-height: 270px;
padding: 5px;
border-radius: 12px;
overflow: hidden;
@@ -761,16 +759,11 @@ export default {
position: relative;
border-radius: 12px;
overflow: hidden;
- // width: 160px;
- max-width: 162px;
- max-height: 288px;
- // padding: 5px;
}
img {
max-width: 100%;
max-height: 100%;
object-fit: cover;
- // background-color: red;
}
&-mask {
position: absolute;