| @@ -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', | |||
| }) | |||
| } | |||
| @@ -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('上传成功') | |||
| @@ -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 | |||
| } | |||
| } | |||
| }, | |||
| // 素材超出显示范围 | |||
| @@ -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) | |||
| } | |||
| @@ -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; | |||