@@ -9,16 +9,17 @@ | |||
"dependencies": { | |||
"axios": "0.18.1", | |||
"element-ui": "^2.15.12", | |||
"franc": "^6.1.0", | |||
"install": "^0.13.0", | |||
"lib-flexible": "^0.3.2", | |||
"mic-recorder-to-mp3": "^2.2.2", | |||
"npm": "^9.6.2", | |||
"postcss-px2rem": "^0.3.0", | |||
"register-service-worker": "^1.7.1", | |||
"sass-loader": "^7.0.0", | |||
"swiper": "^4.5.1", | |||
"vant": "^2.12.48", | |||
"vue": "^2.6.11", | |||
"vue-masonry": "^0.16.0", | |||
"vue-router": "^3.2.0", | |||
"vuex": "^3.4.0" | |||
}, | |||
@@ -27,7 +28,9 @@ | |||
"@vue/cli-plugin-router": "~4.5.13", | |||
"@vue/cli-plugin-vuex": "~4.5.13", | |||
"@vue/cli-service": "~4.5.13", | |||
"node-sass": "^4.14.1", | |||
"node-sass": "^6.0.1", | |||
"sass": "^1.60.0", | |||
"sass-loader": "^7.0.3", | |||
"uglifyjs-webpack-plugin": "^2.2.0", | |||
"vue-template-compiler": "^2.6.11" | |||
} | |||
@@ -1,21 +1,23 @@ | |||
<template> | |||
<div id="app"> | |||
<!-- <keep-alive> --> | |||
<router-view></router-view> | |||
<!-- </keep-alive> --> | |||
<tail /> | |||
</div> | |||
</template> | |||
<script> | |||
import top from "./components/common/top"; | |||
import tail from "./components/common/tail"; | |||
import top from './components/common/top' | |||
import tail from './components/common/tail' | |||
export default { | |||
components: { | |||
top, | |||
tail, | |||
tail | |||
}, | |||
data() { | |||
return {}; | |||
}, | |||
}; | |||
return {} | |||
} | |||
} | |||
</script> | |||
<style lang="scss"> | |||
@@ -12,7 +12,9 @@ import ElementUI from 'element-ui'; //引入js | |||
import 'element-ui/lib/theme-chalk/index.css';//引入css | |||
import "@/styles/reset.scss"; // 引入清除默认样式 | |||
import "@/styles/index.scss"; // 引入全局样式 | |||
import { VueMasonryPlugin } from 'vue-masonry'; | |||
Vue.use(VueMasonryPlugin); // 瀑布流插件 | |||
Vue.use(ElementUI); | |||
Vue.use(Vant) | |||
@@ -56,6 +56,18 @@ const routes = [ | |||
name: 'editModel', | |||
component: () => import("../views/model/editModel"), | |||
}, | |||
// 编辑位置new | |||
{ | |||
path: '/editPosition', | |||
name: 'editPosition', | |||
component: () => import("../views/model/editPosition"), | |||
}, | |||
// 编辑位置new | |||
{ | |||
path: '/editPosition-chatgpt', | |||
name: 'editPosition-chatgpt', | |||
component: () => import("../views/model/editPosition-chatgpt"), | |||
}, | |||
// 聊天首页new | |||
{ | |||
path: '/chat', | |||
@@ -33,8 +33,9 @@ | |||
</div> --> | |||
<!-- 模板列表 --> | |||
<div class="choose"> | |||
<div class="modeList"> | |||
<div class="modeList" v-masonry item-selector=".model" column-width="175"> | |||
<div | |||
v-masonry-tile | |||
class="model" | |||
:class="currentId == item.id ? 'active' : ''" | |||
v-if="modeList.length >= 1" | |||
@@ -161,6 +162,7 @@ export default { | |||
path: '/previewModel', | |||
query: { | |||
saveID: res.data.id, | |||
id: res.data.id, | |||
imgUrl: modelDetail.coverImg, //模版图片路径 | |||
mouldSmId: modelDetail.mouldSmId, //模版标识 | |||
modelId: modelDetail.id, //模版id | |||
@@ -285,8 +287,11 @@ export default { | |||
justify-content: space-between; | |||
align-items: center; | |||
flex-wrap: wrap; | |||
margin: auto; | |||
padding: 0 23px; | |||
// margin: auto; | |||
// padding: 0 23px; | |||
padding-left: 20px; | |||
width: 100%; | |||
margin-right: -20px; | |||
.model { | |||
position: relative; | |||
@@ -294,9 +299,11 @@ export default { | |||
margin-bottom: 15px; | |||
// border: 1px solid #00000028; | |||
// padding: 8px; | |||
width: 154px; | |||
height: 305px; | |||
transition: all 0.3s; | |||
// width: 154px; | |||
max-width: 170px; | |||
// height: 305px; | |||
max-height: 310px; | |||
// transition: all 0.3s; | |||
opacity: 0.9; | |||
img { | |||
border-radius: 8px; | |||
@@ -326,6 +326,8 @@ import { mapState, mapActions } from 'vuex' | |||
import HeadTop from './../../components/common/head.vue' | |||
// 工具 | |||
import { scrollToID } from '../../utils' | |||
// 语言检测插件 | |||
import { franc } from 'franc' | |||
// 接口 | |||
import { | |||
doCreateVideo, | |||
@@ -350,7 +352,7 @@ export default { | |||
mouldSmId: null, | |||
saveID: null, // 作品id | |||
inputTitle: '', | |||
textareaContent: '', // 输入框内容 | |||
textareaContent: 'qweqwe', // 输入框内容 | |||
bottomTabActive: 2, // 底部导航高亮 | |||
showSubtitle: false, // 是否展示字幕 | |||
showSynthesisDialog: false, //合成进度条窗口显示隐藏 | |||
@@ -395,6 +397,8 @@ export default { | |||
// 获取声音列表 | |||
async loadVoice() { | |||
if (this.textareaContent.length != 0) { | |||
const language = franc(this.textareaContent) | |||
console.log(language, '语种') | |||
const data = { | |||
paperwork: this.textareaContent | |||
} | |||
@@ -530,12 +534,11 @@ export default { | |||
async getDetailById(id) { | |||
try { | |||
const res = await getModelDetailById(id) | |||
console.log(res, '根据作品ID获取信息') | |||
this.imgUrl = res.data.personMould.coverImg | |||
this.modelId = res.data.personMouldId | |||
this.mouldSmId = res.data.personMouldSmId | |||
this.inputTitle = res.data.title | |||
this.textareaContent = res.data.paperwork | |||
this.textareaContent = res.data.paperwork || '' | |||
this.soundChoose.id = res.data.voiceMouldId | |||
this.soundChoose.mouldSmId = res.data.voiceMouldSmId | |||
await this.loadVoice() // 获取音频列表 | |||
@@ -554,14 +557,15 @@ export default { | |||
this.$router.push(url) | |||
} | |||
}, | |||
created() { | |||
async created() { | |||
// 判断是不是草稿或者生成失败的情况 | |||
this.imgUrl = this.$route.query.imgUrl | |||
this.modelId = this.$route.query.modelId | |||
this.mouldSmId = this.$route.query.mouldSmId | |||
this.saveID = this.$route.query.saveID | |||
// 判断是不是草稿或者生成失败的情况 | |||
if (this.$route.query.modify) { | |||
this.getDetailById(this.saveID) | |||
console.log(this.$route.query.id) | |||
await this.getDetailById(this.$route.query.id) | |||
} | |||
}, | |||
mounted() { | |||
@@ -0,0 +1,93 @@ | |||
<template> | |||
<div | |||
class="image-container" | |||
ref="container" | |||
@touchstart="onTouchStart" | |||
@touchmove="onTouchMove" | |||
@touchend="onTouchEnd" | |||
> | |||
<img | |||
:src="imageUrl" | |||
ref="image" | |||
:style="{ | |||
transform: | |||
'scale(' + scale + ') translate(' + offsetX + 'px, ' + offsetY + 'px)' | |||
}" | |||
/> | |||
</div> | |||
</template> | |||
<script> | |||
export default { | |||
data() { | |||
return { | |||
imageUrl: 'https://picsum.photos/600/400', | |||
lastX: 0, | |||
lastY: 0, | |||
isDragging: false, | |||
startX: 0, | |||
startY: 0, | |||
scale: 1, | |||
lastScale: 1, | |||
offsetX: 0, | |||
offsetY: 0 | |||
} | |||
}, | |||
methods: { | |||
onTouchStart(event) { | |||
if (event.touches.length === 2) { | |||
this.lastX = (event.touches[0].clientX + event.touches[1].clientX) / 2 | |||
this.lastY = (event.touches[0].clientY + event.touches[1].clientY) / 2 | |||
this.lastScale = this.scale | |||
this.isDragging = false | |||
} else if (event.touches.length === 1) { | |||
this.startX = event.touches[0].clientX | |||
this.startY = event.touches[0].clientY | |||
this.isDragging = true | |||
} | |||
}, | |||
onTouchMove(event) { | |||
if (event.touches.length === 2) { | |||
const x = (event.touches[0].clientX + event.touches[1].clientX) / 2 | |||
const y = (event.touches[0].clientY + event.touches[1].clientY) / 2 | |||
const deltaX = x - this.lastX | |||
const deltaY = y - this.lastY | |||
const scale = | |||
(event.touches[0].clientX - event.touches[1].clientX) / | |||
(this.lastX - this.lastY) | |||
this.scale = this.lastScale * scale | |||
this.offsetX += deltaX | |||
this.offsetY += deltaY | |||
this.lastX = x | |||
this.lastY = y | |||
} else if (event.touches.length === 1 && this.isDragging) { | |||
const deltaX = event.touches[0].clientX - this.startX | |||
const deltaY = event.touches[0].clientY - this.startY | |||
this.offsetX += deltaX | |||
this.offsetY += deltaY | |||
this.startX = event.touches[0].clientX | |||
this.startY = event.touches[0].clientY | |||
} | |||
}, | |||
onTouchEnd(event) { | |||
this.isDragging = false | |||
} | |||
} | |||
} | |||
</script> | |||
<style> | |||
.image-container { | |||
width: 100%; | |||
height: 100%; | |||
overflow: hidden; | |||
display: flex; | |||
justify-content: center; | |||
align-items: center; | |||
} | |||
img { | |||
max-width: 100%; | |||
max-height: 100%; | |||
} | |||
</style> |
@@ -0,0 +1,182 @@ | |||
<template> | |||
<div :class="inPage ? 'page active' : 'page'"> | |||
<div id="top"></div> | |||
<div @touchmove="onMouseMove" class="content"> | |||
<!-- <div | |||
v-for="(item, index) in materialList" | |||
:key="index" | |||
class="material" | |||
style=" | |||
{ | |||
top: item.x + 'px'; | |||
left: item.y + 'px'; | |||
transform: scale(item.scale); | |||
} | |||
" | |||
> | |||
<img :src="item.url" alt="" /> | |||
<div>11233</div> | |||
</div> --> | |||
<!-- <div | |||
v-for="(item, index) in materialList" | |||
:key="index" | |||
class="material" | |||
:style="{ top: item.x, left: item.y }" | |||
> | |||
<div>{{ item.text }}</div> | |||
</div> --> | |||
<div | |||
@touchstart="onMouseDown" | |||
@touchend="onMouseUp" | |||
class="material" | |||
:style="{ | |||
transform: | |||
'scale(' + | |||
scale + | |||
') translate(' + | |||
offsetX + | |||
'px, ' + | |||
offsetY + | |||
'px)' | |||
}" | |||
></div> | |||
</div> | |||
</div> | |||
</template> | |||
<script> | |||
// 组件 | |||
import Vue from 'vue' | |||
import { Toast } from 'vant' | |||
import { mapState, mapActions } from 'vuex' | |||
// 工具 | |||
import { scrollToID } from '../../utils' | |||
Vue.use(Toast) | |||
export default { | |||
data() { | |||
return { | |||
inPage: false, | |||
dragging: false, | |||
startX: 0, | |||
startY: 0, // 鼠标位置x y | |||
scale: 1, | |||
lastScale: 1, | |||
offsetX: 200, | |||
offsetY: 200, | |||
materialList: [ | |||
{ | |||
text: '小div1', | |||
url: 'img/BG@2x.b0cf224b.png', | |||
x: 300, | |||
y: 300, | |||
scale: 1, | |||
zIndex: 3, | |||
num: 1 | |||
}, | |||
{ | |||
text: '小div2', | |||
url: 'img/BG@2x.b0cf224b.png', | |||
x: 100, | |||
y: 0, | |||
scale: 1, | |||
zIndex: 13 | |||
}, | |||
{ | |||
text: '小div3', | |||
url: '@/assets/icon/icon-trash', | |||
x: 0, | |||
y: 100, | |||
scale: 1, | |||
zIndex: 11 | |||
}, | |||
{ | |||
text: '小div4', | |||
url: '@/assets/icon/icon-trash', | |||
x: '100px', | |||
y: '100px', | |||
scale: 1, | |||
zIndex: 10 | |||
}, | |||
{ | |||
text: '小div5', | |||
url: '@/assets/icon/icon-trash', | |||
x: 200, | |||
y: 200, | |||
scale: 1, | |||
zIndex: 4 | |||
} | |||
] | |||
} | |||
}, | |||
computed: { | |||
...mapState({ | |||
characters: (state) => state.publicObj.characters | |||
}) | |||
}, | |||
methods: { | |||
...mapActions(['setCharacters']), | |||
// 鼠标按下事件 | |||
onMouseDown(event) { | |||
this.dragging = true | |||
this.startX = event.touches[0].clientX | |||
this.startY = event.touches[0].clientY | |||
}, | |||
// 鼠标抬起 | |||
onMouseUp() { | |||
this.dragging = false | |||
}, | |||
// 鼠标在父盒子移动时,判断是否按下,然后再走逻辑 | |||
onMouseMove(event) { | |||
if (!this.dragging) return | |||
const deltaX = event.touches[0].clientX - this.startX | |||
const deltaY = event.touches[0].clientY - this.startY | |||
this.offsetX += deltaX | |||
this.offsetY += deltaY | |||
this.startX = event.touches[0].clientX | |||
this.startY = event.touches[0].clientY | |||
}, | |||
go(url) { | |||
this.$router.push(url) | |||
} | |||
}, | |||
created() {}, | |||
mounted() { | |||
this.inPage = true | |||
scrollToID('top') | |||
} | |||
} | |||
</script> | |||
<style lang="scss" scoped> | |||
.page { | |||
transform: translateX(30%); | |||
opacity: 0; | |||
transition: all 0.5s; // global-transition | |||
&.active { | |||
opacity: 1; | |||
transform: translateX(0); | |||
} | |||
} | |||
.content { | |||
position: relative; | |||
width: 375px; | |||
height: 667px; | |||
background-color: green; | |||
.material { | |||
position: absolute; | |||
top: 0; | |||
left: 0; | |||
width: 50px; | |||
height: 40px; | |||
background-color: red; | |||
img { | |||
width: 30px; | |||
height: 30px; | |||
// background-color: red; | |||
} | |||
} | |||
} | |||
</style> |
@@ -0,0 +1,213 @@ | |||
<template> | |||
<div :class="inPage ? 'page active' : 'page'"> | |||
<div id="top"></div> | |||
<div class="content"> | |||
<!-- <div | |||
v-for="(item, index) in materialList" | |||
:key="index" | |||
class="material" | |||
style=" | |||
{ | |||
top: item.x + 'px'; | |||
left: item.y + 'px'; | |||
transform: scale(item.scale); | |||
} | |||
" | |||
> | |||
<img :src="item.url" alt="" /> | |||
<div>11233</div> | |||
</div> --> | |||
<!-- <div | |||
v-for="(item, index) in materialList" | |||
:key="index" | |||
class="material" | |||
:style="{ top: item.x, left: item.y }" | |||
> | |||
<div>{{ item.text }}</div> | |||
</div> --> | |||
<div | |||
@touchmove="onMouseMove(index)" | |||
@touchstart="onMouseDown(index)" | |||
@touchend="onMouseUp(index)" | |||
v-for="(item, index) in materialList" | |||
:key="index" | |||
class="material" | |||
:style="{ | |||
transform: | |||
'scale(' + | |||
item.scale + | |||
') translate(' + | |||
item.x + | |||
'px, ' + | |||
item.y + | |||
'px)', | |||
zIndex: item.zIndex | |||
}" | |||
> | |||
<img :src="item.url" alt="" /> | |||
<div>{{ item.text }}</div> | |||
</div> | |||
</div> | |||
</div> | |||
</template> | |||
<script> | |||
// 组件 | |||
import Vue from 'vue' | |||
import { Toast } from 'vant' | |||
import { mapState, mapActions } from 'vuex' | |||
// 工具 | |||
import { scrollToID } from '../../utils' | |||
Vue.use(Toast) | |||
export default { | |||
data() { | |||
return { | |||
inPage: false, | |||
dragging: false, | |||
startX: 0, | |||
startY: 0, // 鼠标位置x y | |||
scale: 1, | |||
lastScale: 1, | |||
domIndex: -1, //当前点击的图片 | |||
offsetX: 200, | |||
offsetY: 200, | |||
materialList: [ | |||
{ | |||
text: '小div1', | |||
url: 'img/BG@2x.b0cf224b.png', | |||
x: 300, | |||
y: 300, | |||
scale: 1, | |||
zIndex: 3, | |||
num: 1 | |||
}, | |||
{ | |||
text: '小div2', | |||
url: 'img/BG@2x.b0cf224b.png', | |||
x: 100, | |||
y: 0, | |||
scale: 1, | |||
zIndex: 13 | |||
}, | |||
{ | |||
text: '小div3', | |||
url: '@/assets/icon/icon-trash', | |||
x: 0, | |||
y: 100, | |||
scale: 1, | |||
zIndex: 11 | |||
}, | |||
{ | |||
text: '小div4', | |||
url: '../../assets/icon/icon-trash', | |||
x: 100, | |||
y: 100, | |||
scale: 1, | |||
zIndex: 10 | |||
}, | |||
{ | |||
text: '小div5', | |||
url: '@/assets/icon/icon-trash', | |||
x: 200, | |||
y: 200, | |||
scale: 1, | |||
zIndex: 4 | |||
} | |||
] | |||
} | |||
}, | |||
computed: { | |||
...mapState({ | |||
characters: (state) => state.publicObj.characters | |||
}) | |||
// imageStyles() { | |||
// return this.images.map((image, index) => { | |||
// return { | |||
// zIndex: index, | |||
// width: `${image.width}px`, | |||
// height: `${image.height}px`, | |||
// position: 'absolute', | |||
// top: `${image.y}px`, | |||
// left: `${image.x}px`, | |||
// }; | |||
// }); | |||
// }, | |||
}, | |||
methods: { | |||
...mapActions(['setCharacters']), | |||
// 鼠标按下事件 | |||
onMouseDown(index) { | |||
this.dragging = true | |||
this.domIndex = index | |||
this.startX = event.touches[0].clientX | |||
this.startY = event.touches[0].clientY | |||
}, | |||
// 鼠标抬起 | |||
onMouseUp(index) { | |||
this.dragging = false | |||
this.domIndex = -1 | |||
}, | |||
// 鼠标在父盒子移动时,判断是否按下,然后再走逻辑 | |||
onMouseMove(index) { | |||
if (!this.dragging) return | |||
if (this.domIndex != index) return | |||
const deltaX = event.touches[0].clientX - this.startX | |||
const deltaY = event.touches[0].clientY - this.startY | |||
this.materialList[index].x += deltaX | |||
this.materialList[index].y += deltaY | |||
if (this.materialList[index].x < 0) { | |||
this.materialList[index].x = 0 | |||
} | |||
if (this.materialList[index].y < 0) { | |||
this.materialList[index].y = 0 | |||
} | |||
this.startX = event.touches[0].clientX | |||
this.startY = event.touches[0].clientY | |||
}, | |||
go(url) { | |||
this.$router.push(url) | |||
} | |||
}, | |||
created() {}, | |||
mounted() { | |||
this.inPage = true | |||
scrollToID('top') | |||
} | |||
} | |||
</script> | |||
<style lang="scss" scoped> | |||
.page { | |||
transform: translateX(30%); | |||
opacity: 0; | |||
transition: all 0.5s; // global-transition | |||
&.active { | |||
opacity: 1; | |||
transform: translateX(0); | |||
} | |||
} | |||
.content { | |||
position: relative; | |||
width: 375px; | |||
height: 667px; | |||
background-color: green; | |||
overflow: hidden; | |||
.material { | |||
position: absolute; | |||
top: 0; | |||
left: 0; | |||
width: 150px; | |||
height: 140px; | |||
background-color: red; | |||
img { | |||
width: 30px; | |||
height: 30px; | |||
// background-color: red; | |||
} | |||
} | |||
} | |||
</style> |
@@ -1,489 +0,0 @@ | |||
<template> | |||
<div :class="inPage ? 'page active' : 'page'"> | |||
<div id="top"></div> | |||
<HeadTop /> | |||
<!-- 顶部图 --> | |||
<img class="showIMG" src="../../assets/img/BG-Page.png" alt="" /> | |||
<!-- 展示列表 --> | |||
<div class="item"> | |||
<div class="title"> | |||
<img src="../../assets/img/myVideo.png" alt=""> | |||
我的视频作品 | |||
<span class="floatRight" style="float: right;">草稿箱</span> | |||
</div> | |||
<!-- 具体内容 --> | |||
<MyVideoItem :videoList="videoList"/> | |||
</div> | |||
<!-- 分页 --> | |||
<van-pagination | |||
v-model="currentPage" | |||
:total-items="total" | |||
:items-per-page="4" | |||
@change="pageChange" | |||
/> | |||
<div class="goAdd" @click="checkInviteCode">+ 创作新作品</div> | |||
<div | |||
class="messageCover" | |||
:class="isShowMessageCover ? 'active' : ''" | |||
@click="exitCover" | |||
> | |||
<div class="message" id="message"> | |||
<div class="connect" id="message">请添加微信与我们联系</div> | |||
<div class="qrCode" id="message"> | |||
<img src="../../assets/img/SuiMangQRCode.png" alt="" /> | |||
</div> | |||
<div class="phoneNum" id="message">或致电13260039498</div> | |||
<div class="clickToClose">点击空白处关闭</div> | |||
</div> | |||
</div> | |||
</div> | |||
</template> | |||
<script> | |||
// 组件 | |||
import Vue from "vue"; | |||
import { Toast, Dialog } from "vant"; | |||
import { mapState, mapActions } from "vuex"; | |||
import HeadTop from "./../../components/common/head.vue"; | |||
import MyVideoItem from "./../../components/MyVideoItem.vue"; | |||
// 工具 | |||
import { | |||
bytesToSize, | |||
timestampToTime, | |||
scrollToID, | |||
formatSeconds, | |||
} from "../../utils"; | |||
// 接口 | |||
import { | |||
getVideoList, | |||
doGetVideoDetialById, | |||
doFindInviteCode, | |||
deleteVideoById, | |||
} from "../../api/myPage"; | |||
Vue.use(Toast); | |||
export default { | |||
components: { | |||
HeadTop, | |||
MyVideoItem | |||
}, | |||
data() { | |||
return { | |||
showDialog: true,// 弹出层显示隐藏 | |||
inPage: false, | |||
isShowMessageCover: false, | |||
videoList: [], | |||
currentPage: 1, | |||
pageSize: 4, | |||
prePage: "", | |||
total: "", | |||
}; | |||
}, | |||
computed: { | |||
...mapState({ | |||
characters: (state) => state.publicObj.characters, | |||
}), | |||
}, | |||
methods: { | |||
...mapActions(["setCharacters"]), | |||
go(url) { | |||
this.$router.push(url); | |||
}, | |||
changeTime(timestamp, form) { | |||
return timestampToTime(timestamp, form); | |||
}, | |||
pageChange() { | |||
this.loadVideoList(this.currentPage, this.pageSize); | |||
}, | |||
// 点击空白区域退出提示 | |||
exitCover(e) { | |||
if (e.srcElement.id != "message") { | |||
this.isShowMessageCover = false; | |||
} | |||
}, | |||
// 秒转化时分秒 | |||
formatSeconds(seconds) { | |||
if (seconds) { | |||
return formatSeconds(seconds); | |||
} else { | |||
return "无"; | |||
} | |||
}, | |||
// 将bytes转化 | |||
bytesToSize(bytes) { | |||
if (bytes) { | |||
return bytesToSize(bytes); | |||
} else { | |||
return "无"; | |||
} | |||
}, | |||
// 查看详情 | |||
goDetail(item) { | |||
const status = item.videoStatus; | |||
if (status == 0) { | |||
this.$router.push({ | |||
path: "/getPaper", | |||
query: { | |||
id: item.id, | |||
}, | |||
}); | |||
} else if (status == 1) { | |||
Toast.fail("视频生成中"); | |||
return; | |||
} else if (status == 2) { | |||
const url = item.videoPathUri + item.videoPath; | |||
this.$router.push({ | |||
path: "/downloadVideo", | |||
query: { | |||
videoId: item.videoId, | |||
videoUrl: url, | |||
}, | |||
}); | |||
} else if (status == 3) { | |||
this.$router.push({ | |||
path: "/getPaper", | |||
query: { | |||
id: item.id, | |||
}, | |||
}); | |||
} | |||
}, | |||
goDelete(id) { | |||
Dialog.confirm({ | |||
title: "删除作品", | |||
message: "您确定要删除该作品吗?", | |||
}) | |||
.then(() => { | |||
this.deleteVideoById(id); | |||
this.loadVideoList(this.currentPage, this.pageSize); | |||
}) | |||
.catch(() => { | |||
return; | |||
}); | |||
}, | |||
/** | |||
* @description:获取作品列表 | |||
*/ | |||
async loadVideoList(pageNum, pageSize) { | |||
try { | |||
const res = await getVideoList(pageNum, pageSize); | |||
console.log(res, "获取作品列表"); | |||
this.videoList = res.data.list; | |||
this.total = res.data.total; | |||
} catch (error) { | |||
console.log(error, "error"); | |||
Toast.fail(error.message); | |||
} | |||
}, | |||
/** | |||
* @description 通过视频id获取视频详情 | |||
*/ | |||
async getVideoDetialById(id) { | |||
try { | |||
const res = await doGetVideoDetialById(id); | |||
console.log(res, "通过视频id获取视频详情"); | |||
return res.data; | |||
} catch (error) { | |||
console.log(error, "error"); | |||
Toast.fail(error.message); | |||
} | |||
}, | |||
/** | |||
* @description 根据id删除作品 | |||
*/ | |||
async deleteVideoById(id) { | |||
try { | |||
const res = await deleteVideoById(id); | |||
console.log(res, "根据id删除作品"); | |||
} catch (error) { | |||
console.log(error, "error"); | |||
Toast.fail(error.message); | |||
} | |||
}, | |||
/** | |||
* @description:查询用户邀请码状态 | |||
*/ | |||
async checkInviteCode() { | |||
try { | |||
const res = await doFindInviteCode(); | |||
console.log(res, "查询用户邀请码数据"); | |||
const status = res.data.status; | |||
// 当没有邀请码时 | |||
if (status == 0) { | |||
scrollToID("top"); | |||
this.isShowMessageCover = true; | |||
} else if (status == 1) { | |||
this.goCreateNew(); | |||
} | |||
} catch (error) { | |||
console.log(error, "error"); | |||
Toast.fail(error.message); | |||
} | |||
}, | |||
goCreateNew() { | |||
this.$router.push("/chooseModel"); | |||
}, | |||
}, | |||
mounted() { | |||
this.inPage = true; | |||
scrollToID("top"); | |||
}, | |||
created() { | |||
this.loadVideoList(1, this.pageSize); | |||
}, | |||
}; | |||
</script> | |||
<style lang="scss" scoped> | |||
.page { | |||
transform: translateX(30%); | |||
opacity: 0; | |||
transition: all 0.5s; // global-transition | |||
padding-bottom: 25px; | |||
&.active { | |||
opacity: 1; | |||
transform: translateX(0); | |||
} | |||
.logoBox { | |||
display: flex; | |||
justify-content: space-between; | |||
align-items: center; | |||
overflow: hidden; | |||
cursor: pointer; | |||
background-color: #606060; | |||
.logo { | |||
float: left; | |||
width: 140px; | |||
height: 40px; | |||
} | |||
.userInfo { | |||
display: flex; | |||
justify-content: space-between; | |||
align-items: center; | |||
color: #fff; | |||
.userImg { | |||
float: right; | |||
width: 30px; | |||
height: 30px; | |||
margin-top: 3px; | |||
margin-right: 10px; | |||
margin-left: 15px; | |||
} | |||
} | |||
} | |||
.showIMG { | |||
padding: 10px; | |||
width: 100%; | |||
height: 140px; | |||
border-radius: 16px; | |||
} | |||
.item { | |||
padding: 15px 10px; | |||
.title { | |||
font-size: 16px; | |||
font-weight: 500; | |||
// margin-left: 15px; | |||
margin-bottom: 20px; | |||
img { | |||
margin-top: -5px; | |||
vertical-align: middle; | |||
width: 24px; | |||
height: 18px; | |||
background-size: 100% 100%; | |||
} | |||
} | |||
::v-deep .itemList { | |||
.videoModel { | |||
position: relative; | |||
display: flex; | |||
justify-content: space-between; | |||
margin-bottom: 20px; | |||
.videoPrv { | |||
width: 150px; | |||
height: 100px; | |||
// background-color: #979797; | |||
img { | |||
position: absolute; | |||
width: 150px; | |||
height: 100px; | |||
border-radius: 6px; | |||
} | |||
.cover { | |||
position: absolute; | |||
width: 150px; | |||
height: 100px; | |||
line-height: 100px; | |||
background-color: #00000034; | |||
text-align: center; | |||
border-radius: 6px; | |||
color: #fff; | |||
} | |||
} | |||
.videoInfo { | |||
flex: 1; | |||
margin-left: 12px; | |||
.videoName { | |||
font-size: 16px; | |||
font-weight: 600; | |||
} | |||
.createTime { | |||
font-size: 11px; | |||
color: #999999; | |||
margin-top: 10px; | |||
} | |||
} | |||
.showMore { | |||
width: 20px; | |||
display: flex; | |||
justify-content: space-between; | |||
align-items: center; | |||
// margin-left: 10px; | |||
div { | |||
width: 4px; | |||
height: 4px; | |||
background-color: #51D9CA; | |||
} | |||
} | |||
.tag { | |||
position: absolute; | |||
right: 10px; | |||
top: 10px; | |||
padding: 1px 5px; | |||
border-radius: 5px; | |||
&.text { | |||
color: #fff; | |||
background-color: #a2a2a290; | |||
} | |||
&.generating { | |||
background-color: #ffa600c2; | |||
} | |||
&.finish { | |||
color: #ffffff; | |||
background-color: #00ff88; | |||
} | |||
&.fail { | |||
color: #ffffff; | |||
background-color: #ff0000c3; | |||
} | |||
} | |||
} | |||
.noWork { | |||
width: 100%; | |||
height: 450px; | |||
line-height: 450px; | |||
font-size: 14px; | |||
font-weight: 600; | |||
text-align: center; | |||
} | |||
} | |||
} | |||
.goAdd { | |||
position: sticky; | |||
bottom: 25px; | |||
left: 10px; | |||
width: 300px; | |||
height: 42px; | |||
line-height: 42px; | |||
font-size: 15px; | |||
color: #fff; | |||
text-align: center; | |||
transform: translateX(-50%); | |||
background-color: #0068b7; | |||
border-radius: 5px; | |||
box-shadow: #60606082 1px 1px 1px 1px; | |||
margin-top: 25px; | |||
margin-left: 190px; | |||
} | |||
.messageCover { | |||
position: fixed; | |||
top: 0; | |||
width: 100%; | |||
height: 100%; | |||
background-color: #00000091; | |||
transition: all 0.3s; | |||
opacity: 0; | |||
z-index: -1; | |||
.message { | |||
position: sticky; | |||
top: 48%; | |||
transform: translate(-50%, -50%); | |||
width: 272px; | |||
height: 290px; | |||
border-radius: 5px; | |||
background-color: #fff; | |||
text-align: center; | |||
transition: all 0.3s; | |||
margin-left: 50%; | |||
padding: 10px; | |||
.connect { | |||
font-size: 12px; | |||
margin: 19px 0 10px 0; | |||
} | |||
.qrCode { | |||
width: 203px; | |||
height: 213px; | |||
background-color: #ffffff; | |||
border-radius: 5px; | |||
border: solid 1px #595959; | |||
margin: auto; | |||
img { | |||
width: 100%; | |||
height: 100%; | |||
} | |||
} | |||
.phoneNum { | |||
float: left; | |||
font-size: 11px; | |||
margin-top: 8px; | |||
margin-left: 34px; | |||
} | |||
.close { | |||
position: absolute; | |||
top: 8px; | |||
right: 15px; | |||
font-size: 18px; | |||
color: #000; | |||
} | |||
.clickToClose { | |||
position: absolute; | |||
font-size: 14px; | |||
color: #fff; | |||
left: 50%; | |||
bottom: -20%; | |||
transform: translateX(-50%); | |||
} | |||
} | |||
&.active { | |||
z-index: 100; | |||
opacity: 1; | |||
} | |||
} | |||
.delete-button { | |||
position: relative; | |||
left: 1%; | |||
height: 100%; | |||
} | |||
} | |||
</style> |
@@ -7,27 +7,31 @@ | |||
<!-- 展示列表 --> | |||
<div class="item"> | |||
<div class="title"> | |||
<img src="../../assets/img/myVideo.png" alt=""> | |||
<img src="../../assets/img/myVideo.png" alt="" /> | |||
我的视频作品 | |||
<span class="floatRight" style="float: right">草稿箱</span> | |||
</div> | |||
<van-swipe-cell v-for="(item, index) in videoList"> | |||
<!-- 具体内容 --> | |||
<van-swipe-cell | |||
loading | |||
v-for="(item, index) in videoList" | |||
:key="item.id ? item.id : index" | |||
> | |||
<div class="itemList"> | |||
<div | |||
v-if="videoList.length > 0" | |||
class="videoModel" | |||
:key="index" | |||
@click="goDetail(item)" | |||
> | |||
<div class="videoPrv"> | |||
<!-- 每一项 --> | |||
<div v-if="videoList.length > 0" class="videoModel" :key="index"> | |||
<!-- 左侧图片 --> | |||
<div class="videoPrv" @click="goDetail(item)"> | |||
<img src="../../assets/img/BG@2x.png" /> | |||
<div v-if="item.videoStatus == 0" class="cover">草稿</div> | |||
<div v-if="item.videoStatus == 1" class="cover">视频生成中</div> | |||
<div v-if="item.videoStatus == 3" class="cover">视频生成失败</div> | |||
<!-- <div v-if="item.videoStatus == ?" class="cover">排队中</div> --> | |||
</div> | |||
<div class="videoInfo"> | |||
<!-- 中间文字 --> | |||
<div class="videoInfo" @click="goDetail(item)"> | |||
<div class="videoName"> | |||
{{ item.title || "暂无" }} | |||
{{ item.title || '暂无' }} | |||
</div> | |||
<div class="createTime"> | |||
视频时长:{{ formatSeconds(item.videoTime) }} | |||
@@ -37,17 +41,39 @@ | |||
</div> | |||
<div class="createTime"> | |||
创建时间:{{ | |||
changeTime(item.createDate, "YYYY-MM-DD hh:mm:ss") | |||
changeTime(item.createDate, 'YYYY-MM-DD hh:mm:ss') | |||
}} | |||
</div> | |||
</div> | |||
<!-- 右侧更多 --> | |||
<div class="showMore" @click.stop="showDialog(item.id)"> | |||
<div></div> | |||
<div></div> | |||
<div></div> | |||
</div> | |||
<!-- 弹出层 --> | |||
<van-popup v-if="clickItem == item.id" v-model="showPopup"> | |||
<!-- <div @click="closeDialog"> | |||
<i class="el-icon-edit" /> 编辑 | |||
</div> --> | |||
<div @click="goDelete(item.id)"> | |||
<i class="el-icon-delete" /> 删除 | |||
</div> | |||
</van-popup> | |||
<!-- <van-dialog class="dialog" | |||
v-model="clickItem==item?showTrue:showFalse"> | |||
<div @click="closeDialog"><i class="el-icon-edit" /> 编辑</div> | |||
<div><i class="el-icon-delete" /> 删除</div> | |||
</van-dialog> --> | |||
</div> | |||
<!-- 无数据处理 --> | |||
<div v-if="videoList.length <= 0" class="noWork"> | |||
您还没有视频作品 | |||
</div> | |||
</div> | |||
<template #right> | |||
<!-- 右滑 --> | |||
<!-- <template #right> | |||
<van-button | |||
square | |||
text="删除" | |||
@@ -55,7 +81,7 @@ | |||
class="delete-button" | |||
@click="goDelete(item.id)" | |||
/> | |||
</template> | |||
</template> --> | |||
</van-swipe-cell> | |||
</div> | |||
<!-- 分页 --> | |||
@@ -65,8 +91,11 @@ | |||
:items-per-page="4" | |||
@change="pageChange" | |||
/> | |||
<div class="goAdd" @click="checkInviteCode">+ 创作新作品</div> | |||
<!-- 创建新作品 --> | |||
<!-- <div class="goAdd" @click="checkInviteCode">+ 创作新作品</div> --> | |||
<div class="goNewAdd" @click="checkInviteCode"> | |||
<i class="el-icon-plus"></i> | |||
</div> | |||
<div | |||
class="messageCover" | |||
@@ -87,131 +116,158 @@ | |||
<script> | |||
// 组件 | |||
import Vue from "vue"; | |||
import { Toast, Dialog } from "vant"; | |||
import { mapState, mapActions } from "vuex"; | |||
import HeadTop from "./../../components/common/head.vue"; | |||
import Vue from 'vue' | |||
import { Toast, Dialog } from 'vant' | |||
import { mapState, mapActions } from 'vuex' | |||
import HeadTop from '@/components/common/head.vue' | |||
// 工具 | |||
import { | |||
bytesToSize, | |||
timestampToTime, | |||
scrollToID, | |||
formatSeconds, | |||
} from "../../utils"; | |||
formatSeconds | |||
} from '../../utils' | |||
// 接口 | |||
import { | |||
getVideoList, | |||
doGetVideoDetialById, | |||
doFindInviteCode, | |||
deleteVideoById, | |||
} from "../../api/myPage"; | |||
deleteVideoById | |||
} from '../../api/myPage' | |||
Vue.use(Toast); | |||
Vue.use(Toast) | |||
export default { | |||
components: { | |||
HeadTop, | |||
HeadTop | |||
}, | |||
data() { | |||
return { | |||
showPopup: false, // 编辑和删除显示隐藏 | |||
clickItem: -1, // 弹出层显示隐藏 | |||
showTrue: true, // 弹出层显示隐藏 | |||
showFalse: false, // 弹出层显示隐藏 | |||
inPage: false, | |||
isShowMessageCover: false, | |||
videoList: [], | |||
currentPage: 1, | |||
pageSize: 4, | |||
prePage: "", | |||
total: "", | |||
}; | |||
prePage: '', | |||
total: '' | |||
} | |||
}, | |||
computed: { | |||
...mapState({ | |||
characters: (state) => state.publicObj.characters, | |||
}), | |||
characters: (state) => state.publicObj.characters | |||
}) | |||
}, | |||
methods: { | |||
...mapActions(["setCharacters"]), | |||
...mapActions(['setCharacters']), | |||
closeDialog() { | |||
Dialog.close | |||
}, | |||
// 点击显示编辑删除 | |||
showDialog(id) { | |||
this.showPopup = true | |||
this.clickItem = id | |||
}, | |||
go(url) { | |||
this.$router.push(url); | |||
this.$router.push(url) | |||
}, | |||
changeTime(timestamp, form) { | |||
return timestampToTime(timestamp, form); | |||
return timestampToTime(timestamp, form) | |||
}, | |||
pageChange() { | |||
this.loadVideoList(this.currentPage, this.pageSize); | |||
this.loadVideoList(this.currentPage, this.pageSize) | |||
}, | |||
// 点击空白区域退出提示 | |||
exitCover(e) { | |||
if (e.srcElement.id != "message") { | |||
this.isShowMessageCover = false; | |||
if (e.srcElement.id != 'message') { | |||
this.isShowMessageCover = false | |||
} | |||
}, | |||
// 秒转化时分秒 | |||
formatSeconds(seconds) { | |||
if (seconds) { | |||
return formatSeconds(seconds); | |||
return formatSeconds(seconds) | |||
} else { | |||
return "无"; | |||
return '无' | |||
} | |||
}, | |||
// 将bytes转化 | |||
bytesToSize(bytes) { | |||
if (bytes) { | |||
return bytesToSize(bytes); | |||
return bytesToSize(bytes) | |||
} else { | |||
return "无"; | |||
return '无' | |||
} | |||
}, | |||
// 查看详情 | |||
goDetail(item) { | |||
const status = item.videoStatus; | |||
console.log(item) | |||
const status = item.videoStatus | |||
//草稿 | |||
if (status == 0) { | |||
this.$router.push({ | |||
path: "/getPaper", | |||
path: '/editModel', | |||
query: { | |||
id: item.id, | |||
}, | |||
}); | |||
} else if (status == 1) { | |||
Toast.fail("视频生成中"); | |||
return; | |||
} else if (status == 2) { | |||
const url = item.videoPathUri + item.videoPath; | |||
saveID: item.id, | |||
imgUrl: item.id, | |||
modelId: item.id, | |||
mouldSmId: item.id, | |||
modify: true | |||
} | |||
}) | |||
} | |||
//生成中 | |||
else if (status == 1) { | |||
Toast.fail('视频生成中') | |||
return | |||
} | |||
// 成功 | |||
else if (status == 2) { | |||
const url = item.videoPathUri + item.videoPath | |||
this.$router.push({ | |||
path: "/downloadVideo", | |||
path: '/downloadVideo', | |||
query: { | |||
videoId: item.videoId, | |||
videoUrl: url, | |||
}, | |||
}); | |||
} else if (status == 3) { | |||
videoUrl: url | |||
} | |||
}) | |||
} | |||
// 失败 | |||
else if (status == 3) { | |||
this.$router.push({ | |||
path: "/getPaper", | |||
path: '/editModel', | |||
query: { | |||
id: item.id, | |||
}, | |||
}); | |||
imgUrl: item.id, | |||
modelId: item.id, | |||
mouldSmId: item.id, | |||
modify: true | |||
} | |||
}) | |||
} | |||
}, | |||
// 删除作品 | |||
goDelete(id) { | |||
Dialog.confirm({ | |||
title: "删除作品", | |||
message: "您确定要删除该作品吗?", | |||
title: '删除作品', | |||
message: '您确定要删除该作品吗?' | |||
}) | |||
.then(() => { | |||
this.deleteVideoById(id); | |||
this.loadVideoList(this.currentPage, this.pageSize); | |||
.then(async () => { | |||
await this.deleteVideoById(id) | |||
this.loadVideoList(this.currentPage, this.pageSize) | |||
}) | |||
.catch(() => { | |||
return; | |||
}); | |||
return | |||
}) | |||
}, | |||
/** | |||
@@ -219,13 +275,13 @@ export default { | |||
*/ | |||
async loadVideoList(pageNum, pageSize) { | |||
try { | |||
const res = await getVideoList(pageNum, pageSize); | |||
console.log(res, "获取作品列表"); | |||
this.videoList = res.data.list; | |||
this.total = res.data.total; | |||
const res = await getVideoList(pageNum, pageSize) | |||
console.log(res, '获取作品列表') | |||
this.videoList = res.data.list | |||
this.total = res.data.total | |||
} catch (error) { | |||
console.log(error, "error"); | |||
Toast.fail(error.message); | |||
console.log(error, 'error') | |||
Toast.fail(error.message) | |||
} | |||
}, | |||
@@ -234,12 +290,12 @@ export default { | |||
*/ | |||
async getVideoDetialById(id) { | |||
try { | |||
const res = await doGetVideoDetialById(id); | |||
console.log(res, "通过视频id获取视频详情"); | |||
return res.data; | |||
const res = await doGetVideoDetialById(id) | |||
console.log(res, '通过视频id获取视频详情') | |||
return res.data | |||
} catch (error) { | |||
console.log(error, "error"); | |||
Toast.fail(error.message); | |||
console.log(error, 'error') | |||
Toast.fail(error.message) | |||
} | |||
}, | |||
@@ -248,11 +304,11 @@ export default { | |||
*/ | |||
async deleteVideoById(id) { | |||
try { | |||
const res = await deleteVideoById(id); | |||
console.log(res, "根据id删除作品"); | |||
const res = await deleteVideoById(id) | |||
console.log(res, '根据id删除作品') | |||
} catch (error) { | |||
console.log(error, "error"); | |||
Toast.fail(error.message); | |||
console.log(error, 'error') | |||
Toast.fail(error.message) | |||
} | |||
}, | |||
@@ -261,37 +317,37 @@ export default { | |||
*/ | |||
async checkInviteCode() { | |||
try { | |||
const res = await doFindInviteCode(); | |||
console.log(res, "查询用户邀请码数据"); | |||
const status = res.data.status; | |||
const res = await doFindInviteCode() | |||
console.log(res, '查询用户邀请码数据') | |||
const status = res.data.status | |||
// 当没有邀请码时 | |||
if (status == 0) { | |||
scrollToID("top"); | |||
this.isShowMessageCover = true; | |||
scrollToID('top') | |||
this.isShowMessageCover = true | |||
} else if (status == 1) { | |||
this.goCreateNew(); | |||
this.goCreateNew() | |||
} | |||
} catch (error) { | |||
console.log(error, "error"); | |||
Toast.fail(error.message); | |||
console.log(error, 'error') | |||
Toast.fail(error.message) | |||
} | |||
}, | |||
goCreateNew() { | |||
this.$router.push("/chooseModel"); | |||
}, | |||
this.$router.push('/chooseModel') | |||
} | |||
}, | |||
mounted() { | |||
this.inPage = true; | |||
scrollToID("top"); | |||
this.inPage = true | |||
scrollToID('top') | |||
}, | |||
created() { | |||
this.loadVideoList(1, this.pageSize); | |||
}, | |||
}; | |||
this.loadVideoList(1, this.pageSize) | |||
} | |||
} | |||
</script> | |||
<style lang="scss" scoped> | |||
@@ -333,15 +389,12 @@ export default { | |||
} | |||
.showIMG { | |||
padding: 10px; | |||
width: 355px; | |||
height: 130px; | |||
width: 100%; | |||
height: 140px; | |||
border-radius: 16px; | |||
} | |||
.item { | |||
padding-top: 15px; | |||
padding-bottom: 15px; | |||
padding-left: 10px; | |||
padding-right: 10px; | |||
padding: 15px 10px; | |||
.title { | |||
font-size: 16px; | |||
font-weight: 500; | |||
@@ -360,9 +413,8 @@ export default { | |||
position: relative; | |||
display: flex; | |||
justify-content: space-between; | |||
margin-bottom: 25px; | |||
border-bottom: 1px solid #00000010; | |||
padding: 0 20px 25px 25px; | |||
margin-bottom: 20px; | |||
.videoPrv { | |||
width: 150px; | |||
height: 100px; | |||
@@ -371,6 +423,7 @@ export default { | |||
position: absolute; | |||
width: 150px; | |||
height: 100px; | |||
border-radius: 6px; | |||
} | |||
.cover { | |||
position: absolute; | |||
@@ -379,22 +432,62 @@ export default { | |||
line-height: 100px; | |||
background-color: #00000034; | |||
text-align: center; | |||
border-radius: 6px; | |||
color: #fff; | |||
} | |||
} | |||
.videoInfo { | |||
display: flex; | |||
flex-direction: column; | |||
justify-content: space-between; | |||
margin-left: 10px; | |||
flex: 1; | |||
margin-left: 12px; | |||
.videoName { | |||
font-size: 16px; | |||
font-weight: 600; | |||
} | |||
.createTime { | |||
font-size: 11px; | |||
color: #999999; | |||
margin-top: 5px; | |||
} | |||
} | |||
.showMore { | |||
width: 20px; | |||
display: flex; | |||
justify-content: space-between; | |||
align-items: center; | |||
// margin-left: 10px; | |||
div { | |||
width: 4px; | |||
height: 4px; | |||
background-color: #51d9ca; | |||
} | |||
} | |||
.dialog { | |||
i { | |||
margin-left: -10px; | |||
} | |||
} | |||
// 弹出层样式 | |||
::v-deep .van-popup { | |||
display: flex; | |||
flex-wrap: wrap; | |||
align-items: center; | |||
justify-content: center; | |||
top: 70%; | |||
left: 290px; | |||
width: 80px; | |||
height: 30px; | |||
border-radius: 12px; | |||
font-size: 14px; | |||
line-height: 28px; | |||
text-align: center; | |||
box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.1); | |||
} | |||
::v-deep .van-overlay { | |||
background-color: rgba(0, 0, 0, 0); | |||
} | |||
::v-deep .van-button { | |||
display: none; | |||
} | |||
.tag { | |||
position: absolute; | |||
right: 10px; | |||
@@ -445,6 +538,20 @@ export default { | |||
margin-top: 25px; | |||
margin-left: 190px; | |||
} | |||
.goNewAdd { | |||
position: sticky; | |||
left: 300px; | |||
bottom: 25px; | |||
width: 60px; | |||
height: 60px; | |||
border-radius: 50%; | |||
font-size: 40px; | |||
line-height: 60px; | |||
text-align: center; | |||
color: #ffffff; | |||
background: linear-gradient(316deg, #6ee4d7 0%, #37c4f1 32%, #a49afc 100%); | |||
box-shadow: 0px 2px 6px 0px rgba(114, 100, 245, 0.25); | |||
} | |||
.messageCover { | |||
position: fixed; | |||
top: 0; | |||
@@ -9,10 +9,61 @@ | |||
<div class="title"> | |||
<img src="../../assets/img/myVideo.png" alt="" /> | |||
我的视频作品 | |||
<span class="floatRight" style="float: right">草稿箱</span> | |||
<span | |||
v-show="listActive == 1" | |||
class="floatRight" | |||
@click="listActive = 2" | |||
><img src="../../assets/icon/icon-list2.png" alt="" /></span | |||
><span | |||
@click="listActive = 1" | |||
v-show="listActive == 2" | |||
class="floatRight" | |||
><img src="../../assets/icon/icon-list1.png" alt="" | |||
/></span> | |||
<span class="floatRight">只看竖屏</span> | |||
<span class="floatRight">只看横屏</span> | |||
</div> | |||
<!-- 具体内容 --> | |||
<!-- 列表样式--大图 --> | |||
<div | |||
v-show="listActive == 1" | |||
v-masonry | |||
class="waterFall" | |||
item-selector=".waterFall-item" | |||
column-width="175" | |||
> | |||
<div | |||
v-masonry-tile | |||
v-for="(item, index) in videoList" | |||
class="waterFall-item" | |||
:key="item.id ? item.id : index" | |||
@click="goDetail(item)" | |||
> | |||
<img :src="index == 1 ? defaultImg : defaultImg1" alt="" /> | |||
<!-- 渐变遮罩层 --> | |||
<div class="waterFall-item-mask"> | |||
<div>{{ item.title || '暂无' }}</div> | |||
<div>视频时长:{{ formatSeconds(item.videoTime) }}</div> | |||
<div>视频容量:{{ bytesToSize(item.videoSize) }}</div> | |||
<div> | |||
创建时间:{{ changeTime(item.createDate, 'YYYY-MM-DD hh:mm:ss') }} | |||
</div> | |||
</div> | |||
<!-- 视频状态 草稿还是未完成还是失败 --> | |||
<div class="waterFall-item-state"> | |||
<div v-if="item.videoStatus == 0" class="cover">草稿</div> | |||
<div v-if="item.videoStatus == 1" class="cover">视频生成中</div> | |||
<div v-if="item.videoStatus == 3" class="cover">视频生成失败</div> | |||
</div> | |||
<!-- 删除 --> | |||
<div class="waterFall-item-del" @click.stop="goDelete(item.id)"> | |||
<img src="../../assets/icon/icon-trash.png" alt="" /> | |||
</div> | |||
</div> | |||
</div> | |||
<!-- 列表样式--小图 --> | |||
<van-swipe-cell | |||
v-show="listActive == 2" | |||
loading | |||
v-for="(item, index) in videoList" | |||
:key="item.id ? item.id : index" | |||
@@ -60,28 +111,12 @@ | |||
<i class="el-icon-delete" /> 删除 | |||
</div> | |||
</van-popup> | |||
<!-- <van-dialog class="dialog" | |||
v-model="clickItem==item?showTrue:showFalse"> | |||
<div @click="closeDialog"><i class="el-icon-edit" /> 编辑</div> | |||
<div><i class="el-icon-delete" /> 删除</div> | |||
</van-dialog> --> | |||
</div> | |||
<!-- 无数据处理 --> | |||
<div v-if="videoList.length <= 0" class="noWork"> | |||
您还没有视频作品 | |||
</div> | |||
</div> | |||
<!-- 右滑 --> | |||
<!-- <template #right> | |||
<van-button | |||
square | |||
text="删除" | |||
type="danger" | |||
class="delete-button" | |||
@click="goDelete(item.id)" | |||
/> | |||
</template> --> | |||
</van-swipe-cell> | |||
</div> | |||
<!-- 分页 --> | |||
@@ -152,7 +187,10 @@ export default { | |||
currentPage: 1, | |||
pageSize: 4, | |||
prePage: '', | |||
total: '' | |||
total: '', | |||
defaultImg: require('@/assets/img/BG@2x.png'), //默认图片 | |||
defaultImg1: require('@/assets/img/bg.png'), //默认图片 | |||
listActive: 1 // 显示列表样式 | |||
} | |||
}, | |||
computed: { | |||
@@ -218,6 +256,7 @@ export default { | |||
path: '/editModel', | |||
query: { | |||
saveID: item.id, | |||
id: item.id, | |||
imgUrl: item.id, | |||
modelId: item.id, | |||
mouldSmId: item.id, | |||
@@ -351,6 +390,14 @@ export default { | |||
</script> | |||
<style lang="scss" scoped> | |||
.floatRight { | |||
margin-left: 20px; | |||
img { | |||
vertical-align: bottom !important; | |||
margin-top: 2px !important; | |||
color: red; | |||
} | |||
} | |||
.page { | |||
transform: translateX(30%); | |||
opacity: 0; | |||
@@ -624,4 +671,64 @@ export default { | |||
height: 100%; | |||
} | |||
} | |||
// 瀑布流 | |||
.waterFall { | |||
display: flex; | |||
flex-wrap: wrap; | |||
justify-content: space-between; | |||
margin-right: -20px; | |||
width: 100%; | |||
&-item { | |||
// max-width: 355px; //非瀑布流 | |||
max-width: 170px; | |||
max-height: 300px; | |||
// background-color: red; | |||
border-radius: 12px; | |||
margin-bottom: 10px; | |||
overflow: hidden; | |||
img { | |||
max-width: 100%; | |||
max-height: 100%; | |||
object-fit: cover; | |||
// background-color: red; | |||
} | |||
&-mask { | |||
position: absolute; | |||
bottom: 0; | |||
left: 0; | |||
display: flex; | |||
flex-direction: column; | |||
justify-content: space-around; | |||
padding: 5px 8px 0; | |||
background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, #000000 100%); | |||
height: 80px; | |||
width: 100%; | |||
color: #f7dcdc; | |||
} | |||
&-state { | |||
position: absolute; | |||
top: 0px; | |||
left: 0px; | |||
padding: 7.5px; | |||
border-radius: 0 0 12px 0; | |||
color: #f7dcdc; | |||
background-color: rgba(0, 0, 0, 0.3); | |||
} | |||
&-del { | |||
position: absolute; | |||
top: 0px; | |||
right: 0px; | |||
height: 30px; | |||
width: 30px; | |||
padding: 7.5px; | |||
border-radius: 0 0 0 12px; | |||
background-color: rgba(0, 0, 0, 0.3); | |||
img { | |||
height: 15px; | |||
width: 15px; | |||
} | |||
} | |||
} | |||
} | |||
</style> |
@@ -1,6 +1,13 @@ | |||
// const UglifyJsPlugin = require('uglifyjs-webpack-plugin') | |||
const path = require('path'); | |||
module.exports = { | |||
configureWebpack: { | |||
resolve: { | |||
alias: { | |||
'@': path.resolve(__dirname, 'src') | |||
} | |||
} | |||
}, | |||
css: { | |||
loaderOptions: { | |||
css: { | |||
@@ -12,8 +19,6 @@ module.exports = { | |||
// remUnit: 75 | |||
// })] | |||
// } | |||
} | |||
}, | |||