| @@ -77,4 +77,28 @@ export function awsImgUpload(data) { | |||||
| method: 'post', | method: 'post', | ||||
| data | data | ||||
| }) | }) | ||||
| } | |||||
| } | |||||
| /** | |||||
| * @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', | |||||
| }) | |||||
| } | |||||
| @@ -65,6 +65,8 @@ | |||||
| import { awsImgUpload } from '@/api/editModel' | import { awsImgUpload } from '@/api/editModel' | ||||
| import { Toast } from 'vant' | import { Toast } from 'vant' | ||||
| import { VueCropper } from 'vue-cropper' | import { VueCropper } from 'vue-cropper' | ||||
| import { saveImgApi } from '../api/editModel' | |||||
| export default { | export default { | ||||
| name: 'uploadAva', | name: 'uploadAva', | ||||
| components: { | components: { | ||||
| @@ -78,6 +80,14 @@ export default { | |||||
| avaUrl: { | avaUrl: { | ||||
| default: '', | default: '', | ||||
| type: String | type: String | ||||
| }, | |||||
| type: { | |||||
| default: '', | |||||
| type: Number | |||||
| }, | |||||
| videoType: { | |||||
| default: null, | |||||
| type: Number | |||||
| } | } | ||||
| }, | }, | ||||
| data() { | data() { | ||||
| @@ -111,7 +121,7 @@ export default { | |||||
| }, | }, | ||||
| methods: { | methods: { | ||||
| beforeRead(file) { | beforeRead(file) { | ||||
| console.log(file) | |||||
| // console.log(file) | |||||
| if (file.type !== 'image/jpeg' && file.type !== 'image/png') { | if (file.type !== 'image/jpeg' && file.type !== 'image/png') { | ||||
| this.$toast('请上传 jpg/png 格式图片') | this.$toast('请上传 jpg/png 格式图片') | ||||
| return false | return false | ||||
| @@ -141,7 +151,7 @@ export default { | |||||
| // base64结果 | // base64结果 | ||||
| that.ImgUrl = base64Data | that.ImgUrl = base64Data | ||||
| that.loading = false | that.loading = false | ||||
| console.log(that.ImgUrl, 'dasdasd') | |||||
| // console.log(that.ImgUrl, 'dasdasd') | |||||
| // 发请求 | // 发请求 | ||||
| const AccessToken = localStorage.getItem('AccessToken') | const AccessToken = localStorage.getItem('AccessToken') | ||||
| that | that | ||||
| @@ -155,8 +165,26 @@ export default { | |||||
| }, | }, | ||||
| data: formData | 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.loadingShow = false | ||||
| that.showCropper = false | that.showCropper = false | ||||
| Toast.success('上传成功') | Toast.success('上传成功') | ||||
| @@ -14,21 +14,41 @@ | |||||
| @touchmove="onMouseMove(index)" | @touchmove="onMouseMove(index)" | ||||
| @touchstart="onMouseDown(index)" | @touchstart="onMouseDown(index)" | ||||
| @touchend="onMouseUp(index)" | @touchend="onMouseUp(index)" | ||||
| v-for="(item, index) in materialList" | |||||
| v-for="(item, index) in materialList.scList" | |||||
| :key="index" | :key="index" | ||||
| class="material" | class="material" | ||||
| :style="{ | :style="{ | ||||
| transform: 'scale(' + item.scale + ') ', | |||||
| zIndex: item.zIndex, | |||||
| transform: 'scale(' + item.w + ') ', | |||||
| zIndex: item.z, | |||||
| top: item.y + 'px', | top: item.y + 'px', | ||||
| left: item.x + 'px' | left: item.x + 'px' | ||||
| }" | }" | ||||
| > | > | ||||
| <div>{{ item.text }}</div> | <div>{{ item.text }}</div> | ||||
| <img :src="item.url" alt="" /> | |||||
| <img :src="item.material" alt="" /> | |||||
| <!-- 边框 --> | <!-- 边框 --> | ||||
| <div :class="domIndex == index ? 'active' : ''"></div> | <div :class="domIndex == index ? 'active' : ''"></div> | ||||
| </div> | </div> | ||||
| <!-- 数字人 --> | |||||
| <div | |||||
| id="virtual" | |||||
| @touchmove="onMouseMove1()" | |||||
| @touchstart="onMouseDown1()" | |||||
| @touchend="onMouseUp1()" | |||||
| class="material" | |||||
| :style="{ | |||||
| transform: 'scale(' + materialList.virtual.w + ') ', | |||||
| zIndex: materialList.virtual.z, | |||||
| top: materialList.virtual.y + 'px', | |||||
| left: materialList.virtual.x + 'px' | |||||
| }" | |||||
| > | |||||
| <!-- <div>{{ item.text }}</div> --> | |||||
| <img :src="materialList.virtual.material" alt="" /> | |||||
| <!-- 边框 --> | |||||
| <!-- <div :class="domIndex1 == index ? 'active' : ''"></div> --> | |||||
| </div> | |||||
| </div> | </div> | ||||
| </div> | </div> | ||||
| </template> | </template> | ||||
| @@ -43,6 +63,12 @@ import { scrollToID } from '../utils' | |||||
| Vue.use(Toast) | Vue.use(Toast) | ||||
| export default { | export default { | ||||
| // watch: { | |||||
| // materialList(newValue, oldValue) { | |||||
| // console.log(`count变化了,新值为${newValue},旧值为${oldValue}`) | |||||
| // this.materialList = newValue | |||||
| // } | |||||
| // }, | |||||
| props: { | props: { | ||||
| imgUrl: { | imgUrl: { | ||||
| default: false | default: false | ||||
| @@ -63,49 +89,8 @@ 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, //当前点击的图片 | |||||
| domIndex1: -1 //当前点击的数字人 | |||||
| } | } | ||||
| }, | }, | ||||
| @@ -115,7 +100,7 @@ export default { | |||||
| //动态计算样式 | //动态计算样式 | ||||
| bgStyle() { | bgStyle() { | ||||
| return { | return { | ||||
| backgroundImage: `url(${this.imgUrl})`, | |||||
| backgroundImage: `url(${this.materialList.BGI.material})`, | |||||
| backgroundSize: 'cover', | backgroundSize: 'cover', | ||||
| backgroundPosition: 'center' | backgroundPosition: 'center' | ||||
| } | } | ||||
| @@ -168,14 +153,15 @@ export default { | |||||
| // 双指缩放 | // 双指缩放 | ||||
| if (event.touches[1]) { | if (event.touches[1]) { | ||||
| const distance = this.getDistance(event.touches[0], 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 deltaX = event.touches[0].clientX - this.startX | ||||
| const deltaY = event.touches[0].clientY - this.startY | const deltaY = event.touches[0].clientY - this.startY | ||||
| // console.log(deltaX) | // 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.startX = event.touches[0].clientX | ||||
| this.startY = event.touches[0].clientY | this.startY = event.touches[0].clientY | ||||
| @@ -189,21 +175,90 @@ export default { | |||||
| // 限制X轴 | // 限制X轴 | ||||
| // console.log(fatherRect) | // console.log(fatherRect) | ||||
| // console.log(sonRect) | // 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() | 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() | this.exceed() | ||||
| } | } | ||||
| // 限制Y轴 | // 限制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() | 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() | this.exceed() | ||||
| } | } | ||||
| }, | }, | ||||
| @@ -220,10 +275,34 @@ export default { | |||||
| this.materialList[this.domIndex].scale -= 0.1 | this.materialList[this.domIndex].scale -= 0.1 | ||||
| } | } | ||||
| if (type == 3) { | 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) { | 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 | |||||
| } | |||||
| } | } | ||||
| }, | }, | ||||
| // 素材超出显示范围 | // 素材超出显示范围 | ||||
| @@ -233,7 +233,12 @@ | |||||
| <div v-if="bjAction == 1" class="myTab-show-list-upload"> | <div v-if="bjAction == 1" class="myTab-show-list-upload"> | ||||
| <img src="../../assets/icon/icon-upload@2x.png" alt="" /> | <img src="../../assets/icon/icon-upload@2x.png" alt="" /> | ||||
| <!-- 上传背景组件 --> | <!-- 上传背景组件 --> | ||||
| <CutImg class="CutImg"></CutImg> | |||||
| <CutImg | |||||
| @getMyBGIListApi="getMyBGIListApi" | |||||
| class="CutImg" | |||||
| :type="4" | |||||
| :videoType="videoType" | |||||
| ></CutImg> | |||||
| </div> | </div> | ||||
| <!-- 图片列表 --> | <!-- 图片列表 --> | ||||
| <div | <div | ||||
| @@ -249,6 +254,7 @@ | |||||
| </div> | </div> | ||||
| <!-- 删除上传素材 --> | <!-- 删除上传素材 --> | ||||
| <div | <div | ||||
| @click="delImg(item.id)" | |||||
| class="icon-error" | class="icon-error" | ||||
| v-if="bjAction == 1 && bjImgAction == index" | v-if="bjAction == 1 && bjImgAction == index" | ||||
| > | > | ||||
| @@ -270,7 +276,7 @@ | |||||
| <img class="img" src="../../assets/icon/icon-material.png" alt="" /> | <img class="img" src="../../assets/icon/icon-material.png" alt="" /> | ||||
| 更换素材 | 更换素材 | ||||
| </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> | ||||
| @@ -279,14 +285,14 @@ | |||||
| <!-- tab栏 --> | <!-- tab栏 --> | ||||
| <div class="myTab"> | <div class="myTab"> | ||||
| <div | <div | ||||
| @click="changeShowBGIList(3)" | |||||
| @click="changeShowBGIList(2)" | |||||
| 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="changeShowBGIList(4)" | |||||
| @click="changeShowBGIList(3)" | |||||
| class="myTab-item" | class="myTab-item" | ||||
| :class="{ active: scAction == 1 }" | :class="{ active: scAction == 1 }" | ||||
| > | > | ||||
| @@ -301,8 +307,12 @@ | |||||
| <!-- 上传 --> | <!-- 上传 --> | ||||
| <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="" /> | ||||
| <!-- 上传背景组件 --> | |||||
| <CutImg class="CutImg"></CutImg> | |||||
| <!-- 上传图片组件 --> | |||||
| <CutImg | |||||
| class="CutImg" | |||||
| :type="5" | |||||
| @getMyScListApi="getMyScListApi" | |||||
| ></CutImg> | |||||
| </div> | </div> | ||||
| <!-- 图片列表 --> | <!-- 图片列表 --> | ||||
| <div | <div | ||||
| @@ -318,6 +328,7 @@ | |||||
| </div> | </div> | ||||
| <!-- 删除上传素材 --> | <!-- 删除上传素材 --> | ||||
| <div | <div | ||||
| @click="delImg(item.id)" | |||||
| class="icon-error" | class="icon-error" | ||||
| v-if="scAction == 1 && scImgAction == index" | v-if="scAction == 1 && scImgAction == index" | ||||
| > | > | ||||
| @@ -365,7 +376,8 @@ import { | |||||
| systemBGIListApi, | systemBGIListApi, | ||||
| myBGIListApi, | myBGIListApi, | ||||
| systemScListApi, | systemScListApi, | ||||
| myScListApi | |||||
| myScListApi, | |||||
| delImgApi | |||||
| } from '@/api/editModel' | } from '@/api/editModel' | ||||
| import { getModelDetailById } from '../../api/getPaper.js' | import { getModelDetailById } from '../../api/getPaper.js' | ||||
| @@ -384,17 +396,12 @@ export default { | |||||
| audioUrl: null, // 声音试听 | audioUrl: null, // 声音试听 | ||||
| inPage: false, | inPage: false, | ||||
| imgUrl: 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 | personMouldId: null, //选择数字人id | ||||
| mouldSmId: null, | mouldSmId: null, | ||||
| saveID: null, // 作品id | saveID: null, // 作品id | ||||
| @@ -481,17 +488,39 @@ export default { | |||||
| submit() { | submit() { | ||||
| // 组装参数 | // 组装参数 | ||||
| console.log(this.soundChoose.id) | 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 = { | 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, '最终提交的参数') | console.log(data, '最终提交的参数') | ||||
| @@ -519,7 +548,8 @@ export default { | |||||
| try { | try { | ||||
| const res = await saveOrUpdateUserVideo(data) | const res = await saveOrUpdateUserVideo(data) | ||||
| console.log(res, '保存或修改用户作品') | console.log(res, '保存或修改用户作品') | ||||
| this.createVideo({ id: this.saveID }) | |||||
| // this.createVideo({ id: this.saveID }) | |||||
| this.createVideo({ id: this.$route.query.id }) | |||||
| } catch (error) { | } catch (error) { | ||||
| console.log(error, 'error') | console.log(error, 'error') | ||||
| Toast.fail(error.message) | Toast.fail(error.message) | ||||
| @@ -529,6 +559,7 @@ export default { | |||||
| * @description:生成视频 | * @description:生成视频 | ||||
| */ | */ | ||||
| async createVideo(data) { | async createVideo(data) { | ||||
| let that = this | |||||
| try { | try { | ||||
| const res = await doCreateVideo(data) | const res = await doCreateVideo(data) | ||||
| console.log(res, '生成视频') | console.log(res, '生成视频') | ||||
| @@ -539,7 +570,7 @@ export default { | |||||
| }, 2000) | }, 2000) | ||||
| const timer = setInterval(() => { | const timer = setInterval(() => { | ||||
| // 重复调取此接口直到videoStatus == 2 || 3 | // 重复调取此接口直到videoStatus == 2 || 3 | ||||
| this.getVideo(this.saveID) | |||||
| this.getVideo(that.$route.query.id) | |||||
| if (this.timerOver) { | if (this.timerOver) { | ||||
| clearInterval(timer) | clearInterval(timer) | ||||
| this.isShowCover = false | this.isShowCover = false | ||||
| @@ -589,6 +620,17 @@ export default { | |||||
| try { | try { | ||||
| const res = await getModelDetailById(id) | const res = await getModelDetailById(id) | ||||
| console.log(JSON.parse(res.data.personMouldSm)) | 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.backgroundSm)) | ||||
| // console.log(JSON.parse(res.data.materialAllJson)) | // console.log(JSON.parse(res.data.materialAllJson)) | ||||
| this.videoType = res.data.videoType | this.videoType = res.data.videoType | ||||
| @@ -645,21 +687,77 @@ export default { | |||||
| }, | }, | ||||
| // 点击对钩确定背景或者素材图 | // 点击对钩确定背景或者素材图 | ||||
| sureImg() { | 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) { | changeShowBGIList(type) { | ||||
| if (type == 0) { | if (type == 0) { | ||||
| this.bjAction = 0 | this.bjAction = 0 | ||||
| @@ -669,11 +767,11 @@ export default { | |||||
| this.bjAction = 1 | this.bjAction = 1 | ||||
| this.showBGIList = this.myBGIList | this.showBGIList = this.myBGIList | ||||
| } | } | ||||
| if (type == 3) { | |||||
| if (type == 2) { | |||||
| this.scAction = 0 | this.scAction = 0 | ||||
| this.showScList = this.systemScList | this.showScList = this.systemScList | ||||
| } | } | ||||
| if (type == 4) { | |||||
| if (type == 3) { | |||||
| this.scAction = 1 | this.scAction = 1 | ||||
| this.showScList = this.myScList | this.showScList = this.myScList | ||||
| } | } | ||||
| @@ -702,6 +800,7 @@ export default { | |||||
| ) | ) | ||||
| this.myBGIList = res.data.list | this.myBGIList = res.data.list | ||||
| }, | }, | ||||
| /** | /** | ||||
| * @description:获取系统素材 | * @description:获取系统素材 | ||||
| */ | */ | ||||
| @@ -710,6 +809,7 @@ export default { | |||||
| this.systemScList = res.data.list | this.systemScList = res.data.list | ||||
| this.showScList = this.systemScList | this.showScList = this.systemScList | ||||
| }, | }, | ||||
| /** | /** | ||||
| * @description:获取我上传的素材 | * @description:获取我上传的素材 | ||||
| */ | */ | ||||
| @@ -717,6 +817,28 @@ export default { | |||||
| const res = await myScListApi(this.pageNum, this.pageSize) | const res = await myScListApi(this.pageNum, this.pageSize) | ||||
| this.myScList = res.data.list | 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) { | go(url) { | ||||
| this.$router.push(url) | this.$router.push(url) | ||||
| } | } | ||||
| @@ -746,14 +746,12 @@ export default { | |||||
| // 瀑布流 | // 瀑布流 | ||||
| .waterFall { | .waterFall { | ||||
| // display: flex; | |||||
| // flex-wrap: wrap; | |||||
| // justify-content: space-between; | |||||
| // width: 100%; | |||||
| width: 350px; | width: 350px; | ||||
| ::v-deep .vue-waterfall-column { | |||||
| width: 50% !important; | |||||
| margin: 0 !important; | |||||
| } | |||||
| &-item { | &-item { | ||||
| // max-width: 150px; | |||||
| // max-height: 270px; | |||||
| padding: 5px; | padding: 5px; | ||||
| border-radius: 12px; | border-radius: 12px; | ||||
| overflow: hidden; | overflow: hidden; | ||||
| @@ -761,16 +759,11 @@ export default { | |||||
| position: relative; | position: relative; | ||||
| border-radius: 12px; | border-radius: 12px; | ||||
| overflow: hidden; | overflow: hidden; | ||||
| // width: 160px; | |||||
| max-width: 162px; | |||||
| max-height: 288px; | |||||
| // padding: 5px; | |||||
| } | } | ||||
| img { | img { | ||||
| max-width: 100%; | max-width: 100%; | ||||
| max-height: 100%; | max-height: 100%; | ||||
| object-fit: cover; | object-fit: cover; | ||||
| // background-color: red; | |||||
| } | } | ||||
| &-mask { | &-mask { | ||||
| position: absolute; | position: absolute; | ||||