diff --git a/src/api/editModel.js b/src/api/editModel.js index 9cefd7e..9f287c1 100644 --- a/src/api/editModel.js +++ b/src/api/editModel.js @@ -77,4 +77,28 @@ export function awsImgUpload(data) { method: 'post', data }) -} \ No newline at end of file +} + + /** + * @description 上传背景 / 素材之后需要保存 + * @returns type:=4背景=5素材,material:图片url + */ + export function saveImgApi(data) { + return request({ + url: `/api/materialMould/save `, + method: 'post', + data + }) + } + + +/** + * @description 删除上传的背景或素材 + * @returns type:=4背景=5素材,material:图片url + */ +export function delImgApi(id) { + return request({ + url: `/api/materialMould/del?id=${id}`, + method: 'get', + }) +} diff --git a/src/components/CutImg.vue b/src/components/CutImg.vue index 612f68c..af397f2 100644 --- a/src/components/CutImg.vue +++ b/src/components/CutImg.vue @@ -65,6 +65,8 @@ import { awsImgUpload } from '@/api/editModel' import { Toast } from 'vant' import { VueCropper } from 'vue-cropper' + +import { saveImgApi } from '../api/editModel' export default { name: 'uploadAva', components: { @@ -78,6 +80,14 @@ export default { avaUrl: { default: '', type: String + }, + type: { + default: '', + type: Number + }, + videoType: { + default: null, + type: Number } }, data() { @@ -111,7 +121,7 @@ export default { }, methods: { beforeRead(file) { - console.log(file) + // console.log(file) if (file.type !== 'image/jpeg' && file.type !== 'image/png') { this.$toast('请上传 jpg/png 格式图片') return false @@ -141,7 +151,7 @@ export default { // base64结果 that.ImgUrl = base64Data that.loading = false - console.log(that.ImgUrl, 'dasdasd') + // console.log(that.ImgUrl, 'dasdasd') // 发请求 const AccessToken = localStorage.getItem('AccessToken') that @@ -155,8 +165,26 @@ export default { }, data: formData }) - .then((res) => { - console.log(res) + .then(async (res) => { + // console.log(res.data.data.url) + const res1 = await saveImgApi({ + type: that.type, + videoType: that.videoType, + material: res.data.data.url + }) + // 重新获取列表 + await Promise.all([ + that.$emit('getMyBGIListApi'), + that.$emit('getMyScListApi') + ]) + + if (this.type == 4) { + that.$parent.$parent.changeShowBGIList(0) + } + if (this.type == 5) { + that.$parent.$parent.changeShowBGIList(2) + } + that.loadingShow = false that.showCropper = false Toast.success('上传成功') diff --git a/src/components/editPosition.vue b/src/components/editPosition.vue index 993e8ab..920ee7f 100644 --- a/src/components/editPosition.vue +++ b/src/components/editPosition.vue @@ -14,21 +14,41 @@ @touchmove="onMouseMove(index)" @touchstart="onMouseDown(index)" @touchend="onMouseUp(index)" - v-for="(item, index) in materialList" + v-for="(item, index) in materialList.scList" :key="index" class="material" :style="{ - transform: 'scale(' + item.scale + ') ', - zIndex: item.zIndex, + transform: 'scale(' + item.w + ') ', + zIndex: item.z, top: item.y + 'px', left: item.x + 'px' }" >
{{ item.text }}
- +
+ + +
+ + + + +
@@ -43,6 +63,12 @@ import { scrollToID } from '../utils' Vue.use(Toast) export default { + // watch: { + // materialList(newValue, oldValue) { + // console.log(`count变化了,新值为${newValue},旧值为${oldValue}`) + // this.materialList = newValue + // } + // }, props: { imgUrl: { default: false @@ -63,49 +89,8 @@ 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, //当前点击的图片 + domIndex1: -1 //当前点击的数字人 } }, @@ -115,7 +100,7 @@ export default { //动态计算样式 bgStyle() { return { - backgroundImage: `url(${this.imgUrl})`, + backgroundImage: `url(${this.materialList.BGI.material})`, backgroundSize: 'cover', backgroundPosition: 'center' } @@ -168,14 +153,15 @@ export default { // 双指缩放 if (event.touches[1]) { const distance = this.getDistance(event.touches[0], event.touches[1]) - const scale = distance / this.startDistance - this.materialList[index].scale = scale + const scale = (distance / this.startDistance).toFixed(2) + this.materialList.scList[index].w = scale + this.materialList.scList[index].h = scale } const deltaX = event.touches[0].clientX - this.startX const deltaY = event.touches[0].clientY - this.startY // console.log(deltaX) - this.materialList[index].x += deltaX - this.materialList[index].y += deltaY + this.materialList.scList[index].x += deltaX + this.materialList.scList[index].y += deltaY this.startX = event.touches[0].clientX this.startY = event.touches[0].clientY @@ -189,21 +175,90 @@ export default { // 限制X轴 // console.log(fatherRect) // console.log(sonRect) - if (this.materialList[index].x < -sonRect.width) { - this.materialList[index].x = 0 + if (this.materialList.scList[index].x < -sonRect.width) { + this.materialList.scList[index].x = 0 + this.exceed() + } + if (this.materialList.scList[index].x > fatherRect.width) { + this.materialList.scList[index].x = 0 + this.exceed() + } + // 限制Y轴 + if (this.materialList.scList[index].y < -sonRect.height) { + this.materialList.scList[index].y = 0 + this.exceed() + } + if (this.materialList.scList[index].y > fatherRect.height) { + this.materialList.scList[index].y = 0 + this.exceed() + } + }, + + // 数字人的处理 + // 鼠标按下事件 + onMouseDown1() { + this.domIndex = -2 + this.dragging = true + //双指缩放初始化 + if (event.touches[1]) { + this.startDistance = this.getDistance( + event.touches[0], + event.touches[1] + ) + } + // 记录点击瞬间的鼠标坐标 + this.startX = event.touches[0].clientX + this.startY = event.touches[0].clientY + }, + // 鼠标抬起 + onMouseUp1() { + this.dragging = false + }, + // 鼠标在父盒子移动时,判断是否按下,然后再走逻辑 + onMouseMove1() { + // 禁止默认事件--下拉 + event.preventDefault() + if (!this.dragging) return + // console.log(event.touches[0]) + + // 双指缩放 + if (event.touches[1]) { + const distance = this.getDistance(event.touches[0], event.touches[1]) + const scale = (distance / this.startDistance).toFixed(2) + this.materialList.virtual.w = scale + this.materialList.virtual.h = scale + } + const deltaX = event.touches[0].clientX - this.startX + const deltaY = event.touches[0].clientY - this.startY + // console.log(deltaX) + this.materialList.virtual.x += deltaX + this.materialList.virtual.y += deltaY + + this.startX = event.touches[0].clientX + this.startY = event.touches[0].clientY + + // 得到父子盒子信息 + const fatherRect = this.$refs.fatherBox.getBoundingClientRect() + // 子盒子信息 + const sonRect = document.getElementById(`virtual`).getBoundingClientRect() + // 限制X轴 + // console.log(fatherRect) + // console.log(sonRect) + if (this.materialList.virtual.x < -sonRect.width) { + this.materialList.virtual.x = 0 this.exceed() } - if (this.materialList[index].x > fatherRect.width) { - this.materialList[index].x = 0 + if (this.materialList.virtual.x > fatherRect.width) { + this.materialList.virtual.x = 0 this.exceed() } // 限制Y轴 - if (this.materialList[index].y < -sonRect.height) { - this.materialList[index].y = 0 + if (this.materialList.virtual.y < -sonRect.height) { + this.materialList.virtual.y = 0 this.exceed() } - if (this.materialList[index].y > fatherRect.height) { - this.materialList[index].y = 0 + if (this.materialList.virtual.y > fatherRect.height) { + this.materialList.virtual.y = 0 this.exceed() } }, @@ -220,10 +275,34 @@ export default { this.materialList[this.domIndex].scale -= 0.1 } if (type == 3) { - this.materialList[this.domIndex].zIndex += 1 + // 如果是点的数字人 + if (this.domIndex == -2) { + this.materialList.virtual.z += 1 + if (this.materialList.virtual.z >= 10) { + this.materialList.virtual.z = 10 + } + return + } + // 点的素材 + this.materialList.scList[this.domIndex].z += 1 + if (this.materialList.scList[this.domIndex].z >= 10) { + this.materialList.scList[this.domIndex].z = 10 + } } if (type == 4) { - this.materialList[this.domIndex].zIndex -= 1 + // 如果是点的数字人 + if (this.domIndex == -2) { + this.materialList.virtual.z -= 1 + if (this.materialList.virtual.z <= 0) { + this.materialList.virtual.z = 0 + } + return + } + // 点的素材 + this.materialList.scList[this.domIndex].z -= 1 + if (this.materialList.scList[this.domIndex].z <= 0) { + this.materialList.scList[this.domIndex].z = 0 + } } }, // 素材超出显示范围 diff --git a/src/views/model/editModel.vue b/src/views/model/editModel.vue index 429676a..551da4a 100644 --- a/src/views/model/editModel.vue +++ b/src/views/model/editModel.vue @@ -233,7 +233,12 @@
- +
@@ -270,7 +276,7 @@ 更换素材
-
+
@@ -279,14 +285,14 @@
素材库
@@ -301,8 +307,12 @@
- - + +
@@ -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;