Bläddra i källkod

保存接口联调

master
congzc 2 år sedan
förälder
incheckning
4f5cd191ed
5 ändrade filer med 368 tillägg och 122 borttagningar
  1. +25
    -1
      src/api/editModel.js
  2. +32
    -4
      src/components/CutImg.vue
  3. +141
    -62
      src/components/editPosition.vue
  4. +166
    -44
      src/views/model/editModel.vue
  5. +4
    -11
      src/views/myPage/myPage.vue

+ 25
- 1
src/api/editModel.js Visa fil

@@ -77,4 +77,28 @@ export function awsImgUpload(data) {
method: 'post',
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',
})
}

+ 32
- 4
src/components/CutImg.vue Visa fil

@@ -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('上传成功')


+ 141
- 62
src/components/editPosition.vue Visa fil

@@ -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'
}"
>
<div>{{ item.text }}</div>
<img :src="item.url" alt="" />
<img :src="item.material" alt="" />
<!-- 边框 -->
<div :class="domIndex == index ? 'active' : ''"></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>
</template>
@@ -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
}
}
},
// 素材超出显示范围


+ 166
- 44
src/views/model/editModel.vue Visa fil

@@ -233,7 +233,12 @@
<div v-if="bjAction == 1" class="myTab-show-list-upload">
<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
@@ -249,6 +254,7 @@
</div>
<!-- 删除上传素材 -->
<div
@click="delImg(item.id)"
class="icon-error"
v-if="bjAction == 1 && bjImgAction == index"
>
@@ -270,7 +276,7 @@
<img class="img" src="../../assets/icon/icon-material.png" alt="" />
更换素材
</div>
<div @click="showTabSheet = !showTabSheet">
<div @click="sureImg">
<img class="yesImg" src="../../assets/icon/icon-yes.png" alt="" />
</div>
</div>
@@ -279,14 +285,14 @@
<!-- tab栏 -->
<div class="myTab">
<div
@click="changeShowBGIList(3)"
@click="changeShowBGIList(2)"
class="myTab-item"
:class="{ active: scAction == 0 }"
>
<img src="../../assets/icon/icon-folder@2x.png" alt="" /> 素材库
</div>
<div
@click="changeShowBGIList(4)"
@click="changeShowBGIList(3)"
class="myTab-item"
:class="{ active: scAction == 1 }"
>
@@ -301,8 +307,12 @@
<!-- 上传 -->
<div v-if="scAction == 1" class="myTab-show-list-upload">
<img src="../../assets/icon/icon-upload@2x.png" alt="" />
<!-- 上传背景组件 -->
<CutImg class="CutImg"></CutImg>
<!-- 上传图片组件 -->
<CutImg
class="CutImg"
:type="5"
@getMyScListApi="getMyScListApi"
></CutImg>
</div>
<!-- 图片列表 -->
<div
@@ -318,6 +328,7 @@
</div>
<!-- 删除上传素材 -->
<div
@click="delImg(item.id)"
class="icon-error"
v-if="scAction == 1 && scImgAction == index"
>
@@ -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)
}


+ 4
- 11
src/views/myPage/myPage.vue Visa fil

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


Laddar…
Avbryt
Spara