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