@@ -9,16 +9,17 @@ | |||||
"dependencies": { | "dependencies": { | ||||
"axios": "0.18.1", | "axios": "0.18.1", | ||||
"element-ui": "^2.15.12", | "element-ui": "^2.15.12", | ||||
"franc": "^6.1.0", | |||||
"install": "^0.13.0", | "install": "^0.13.0", | ||||
"lib-flexible": "^0.3.2", | "lib-flexible": "^0.3.2", | ||||
"mic-recorder-to-mp3": "^2.2.2", | "mic-recorder-to-mp3": "^2.2.2", | ||||
"npm": "^9.6.2", | "npm": "^9.6.2", | ||||
"postcss-px2rem": "^0.3.0", | "postcss-px2rem": "^0.3.0", | ||||
"register-service-worker": "^1.7.1", | "register-service-worker": "^1.7.1", | ||||
"sass-loader": "^7.0.0", | |||||
"swiper": "^4.5.1", | "swiper": "^4.5.1", | ||||
"vant": "^2.12.48", | "vant": "^2.12.48", | ||||
"vue": "^2.6.11", | "vue": "^2.6.11", | ||||
"vue-masonry": "^0.16.0", | |||||
"vue-router": "^3.2.0", | "vue-router": "^3.2.0", | ||||
"vuex": "^3.4.0" | "vuex": "^3.4.0" | ||||
}, | }, | ||||
@@ -27,7 +28,9 @@ | |||||
"@vue/cli-plugin-router": "~4.5.13", | "@vue/cli-plugin-router": "~4.5.13", | ||||
"@vue/cli-plugin-vuex": "~4.5.13", | "@vue/cli-plugin-vuex": "~4.5.13", | ||||
"@vue/cli-service": "~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", | "uglifyjs-webpack-plugin": "^2.2.0", | ||||
"vue-template-compiler": "^2.6.11" | "vue-template-compiler": "^2.6.11" | ||||
} | } | ||||
@@ -1,21 +1,23 @@ | |||||
<template> | <template> | ||||
<div id="app"> | <div id="app"> | ||||
<!-- <keep-alive> --> | |||||
<router-view></router-view> | <router-view></router-view> | ||||
<!-- </keep-alive> --> | |||||
<tail /> | <tail /> | ||||
</div> | </div> | ||||
</template> | </template> | ||||
<script> | <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 { | export default { | ||||
components: { | components: { | ||||
top, | top, | ||||
tail, | |||||
tail | |||||
}, | }, | ||||
data() { | data() { | ||||
return {}; | |||||
}, | |||||
}; | |||||
return {} | |||||
} | |||||
} | |||||
</script> | </script> | ||||
<style lang="scss"> | <style lang="scss"> | ||||
@@ -12,7 +12,9 @@ import ElementUI from 'element-ui'; //引入js | |||||
import 'element-ui/lib/theme-chalk/index.css';//引入css | import 'element-ui/lib/theme-chalk/index.css';//引入css | ||||
import "@/styles/reset.scss"; // 引入清除默认样式 | import "@/styles/reset.scss"; // 引入清除默认样式 | ||||
import "@/styles/index.scss"; // 引入全局样式 | import "@/styles/index.scss"; // 引入全局样式 | ||||
import { VueMasonryPlugin } from 'vue-masonry'; | |||||
Vue.use(VueMasonryPlugin); // 瀑布流插件 | |||||
Vue.use(ElementUI); | Vue.use(ElementUI); | ||||
Vue.use(Vant) | Vue.use(Vant) | ||||
@@ -56,6 +56,18 @@ const routes = [ | |||||
name: 'editModel', | name: 'editModel', | ||||
component: () => import("../views/model/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 | // 聊天首页new | ||||
{ | { | ||||
path: '/chat', | path: '/chat', | ||||
@@ -33,8 +33,9 @@ | |||||
</div> --> | </div> --> | ||||
<!-- 模板列表 --> | <!-- 模板列表 --> | ||||
<div class="choose"> | <div class="choose"> | ||||
<div class="modeList"> | |||||
<div class="modeList" v-masonry item-selector=".model" column-width="175"> | |||||
<div | <div | ||||
v-masonry-tile | |||||
class="model" | class="model" | ||||
:class="currentId == item.id ? 'active' : ''" | :class="currentId == item.id ? 'active' : ''" | ||||
v-if="modeList.length >= 1" | v-if="modeList.length >= 1" | ||||
@@ -161,6 +162,7 @@ export default { | |||||
path: '/previewModel', | path: '/previewModel', | ||||
query: { | query: { | ||||
saveID: res.data.id, | saveID: res.data.id, | ||||
id: res.data.id, | |||||
imgUrl: modelDetail.coverImg, //模版图片路径 | imgUrl: modelDetail.coverImg, //模版图片路径 | ||||
mouldSmId: modelDetail.mouldSmId, //模版标识 | mouldSmId: modelDetail.mouldSmId, //模版标识 | ||||
modelId: modelDetail.id, //模版id | modelId: modelDetail.id, //模版id | ||||
@@ -285,8 +287,11 @@ export default { | |||||
justify-content: space-between; | justify-content: space-between; | ||||
align-items: center; | align-items: center; | ||||
flex-wrap: wrap; | flex-wrap: wrap; | ||||
margin: auto; | |||||
padding: 0 23px; | |||||
// margin: auto; | |||||
// padding: 0 23px; | |||||
padding-left: 20px; | |||||
width: 100%; | |||||
margin-right: -20px; | |||||
.model { | .model { | ||||
position: relative; | position: relative; | ||||
@@ -294,9 +299,11 @@ export default { | |||||
margin-bottom: 15px; | margin-bottom: 15px; | ||||
// border: 1px solid #00000028; | // border: 1px solid #00000028; | ||||
// padding: 8px; | // 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; | opacity: 0.9; | ||||
img { | img { | ||||
border-radius: 8px; | border-radius: 8px; | ||||
@@ -326,6 +326,8 @@ import { mapState, mapActions } from 'vuex' | |||||
import HeadTop from './../../components/common/head.vue' | import HeadTop from './../../components/common/head.vue' | ||||
// 工具 | // 工具 | ||||
import { scrollToID } from '../../utils' | import { scrollToID } from '../../utils' | ||||
// 语言检测插件 | |||||
import { franc } from 'franc' | |||||
// 接口 | // 接口 | ||||
import { | import { | ||||
doCreateVideo, | doCreateVideo, | ||||
@@ -350,7 +352,7 @@ export default { | |||||
mouldSmId: null, | mouldSmId: null, | ||||
saveID: null, // 作品id | saveID: null, // 作品id | ||||
inputTitle: '', | inputTitle: '', | ||||
textareaContent: '', // 输入框内容 | |||||
textareaContent: 'qweqwe', // 输入框内容 | |||||
bottomTabActive: 2, // 底部导航高亮 | bottomTabActive: 2, // 底部导航高亮 | ||||
showSubtitle: false, // 是否展示字幕 | showSubtitle: false, // 是否展示字幕 | ||||
showSynthesisDialog: false, //合成进度条窗口显示隐藏 | showSynthesisDialog: false, //合成进度条窗口显示隐藏 | ||||
@@ -395,6 +397,8 @@ export default { | |||||
// 获取声音列表 | // 获取声音列表 | ||||
async loadVoice() { | async loadVoice() { | ||||
if (this.textareaContent.length != 0) { | if (this.textareaContent.length != 0) { | ||||
const language = franc(this.textareaContent) | |||||
console.log(language, '语种') | |||||
const data = { | const data = { | ||||
paperwork: this.textareaContent | paperwork: this.textareaContent | ||||
} | } | ||||
@@ -530,12 +534,11 @@ export default { | |||||
async getDetailById(id) { | async getDetailById(id) { | ||||
try { | try { | ||||
const res = await getModelDetailById(id) | const res = await getModelDetailById(id) | ||||
console.log(res, '根据作品ID获取信息') | |||||
this.imgUrl = res.data.personMould.coverImg | this.imgUrl = res.data.personMould.coverImg | ||||
this.modelId = res.data.personMouldId | this.modelId = res.data.personMouldId | ||||
this.mouldSmId = res.data.personMouldSmId | this.mouldSmId = res.data.personMouldSmId | ||||
this.inputTitle = res.data.title | this.inputTitle = res.data.title | ||||
this.textareaContent = res.data.paperwork | |||||
this.textareaContent = res.data.paperwork || '' | |||||
this.soundChoose.id = res.data.voiceMouldId | this.soundChoose.id = res.data.voiceMouldId | ||||
this.soundChoose.mouldSmId = res.data.voiceMouldSmId | this.soundChoose.mouldSmId = res.data.voiceMouldSmId | ||||
await this.loadVoice() // 获取音频列表 | await this.loadVoice() // 获取音频列表 | ||||
@@ -554,14 +557,15 @@ export default { | |||||
this.$router.push(url) | this.$router.push(url) | ||||
} | } | ||||
}, | }, | ||||
created() { | |||||
async created() { | |||||
// 判断是不是草稿或者生成失败的情况 | |||||
this.imgUrl = this.$route.query.imgUrl | this.imgUrl = this.$route.query.imgUrl | ||||
this.modelId = this.$route.query.modelId | this.modelId = this.$route.query.modelId | ||||
this.mouldSmId = this.$route.query.mouldSmId | this.mouldSmId = this.$route.query.mouldSmId | ||||
this.saveID = this.$route.query.saveID | this.saveID = this.$route.query.saveID | ||||
// 判断是不是草稿或者生成失败的情况 | |||||
if (this.$route.query.modify) { | if (this.$route.query.modify) { | ||||
this.getDetailById(this.saveID) | |||||
console.log(this.$route.query.id) | |||||
await this.getDetailById(this.$route.query.id) | |||||
} | } | ||||
}, | }, | ||||
mounted() { | 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="item"> | ||||
<div class="title"> | <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> | </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 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" /> | <img src="../../assets/img/BG@2x.png" /> | ||||
<div v-if="item.videoStatus == 0" class="cover">草稿</div> | <div v-if="item.videoStatus == 0" class="cover">草稿</div> | ||||
<div v-if="item.videoStatus == 1" 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 == 3" class="cover">视频生成失败</div> | ||||
<!-- <div v-if="item.videoStatus == ?" class="cover">排队中</div> --> | <!-- <div v-if="item.videoStatus == ?" class="cover">排队中</div> --> | ||||
</div> | </div> | ||||
<div class="videoInfo"> | |||||
<!-- 中间文字 --> | |||||
<div class="videoInfo" @click="goDetail(item)"> | |||||
<div class="videoName"> | <div class="videoName"> | ||||
{{ item.title || "暂无" }} | |||||
{{ item.title || '暂无' }} | |||||
</div> | </div> | ||||
<div class="createTime"> | <div class="createTime"> | ||||
视频时长:{{ formatSeconds(item.videoTime) }} | 视频时长:{{ formatSeconds(item.videoTime) }} | ||||
@@ -37,17 +41,39 @@ | |||||
</div> | </div> | ||||
<div class="createTime"> | <div class="createTime"> | ||||
创建时间:{{ | 创建时间:{{ | ||||
changeTime(item.createDate, "YYYY-MM-DD hh:mm:ss") | |||||
changeTime(item.createDate, 'YYYY-MM-DD hh:mm:ss') | |||||
}} | }} | ||||
</div> | </div> | ||||
</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> | ||||
<!-- 无数据处理 --> | |||||
<div v-if="videoList.length <= 0" class="noWork"> | <div v-if="videoList.length <= 0" class="noWork"> | ||||
您还没有视频作品 | 您还没有视频作品 | ||||
</div> | </div> | ||||
</div> | </div> | ||||
<template #right> | |||||
<!-- 右滑 --> | |||||
<!-- <template #right> | |||||
<van-button | <van-button | ||||
square | square | ||||
text="删除" | text="删除" | ||||
@@ -55,7 +81,7 @@ | |||||
class="delete-button" | class="delete-button" | ||||
@click="goDelete(item.id)" | @click="goDelete(item.id)" | ||||
/> | /> | ||||
</template> | |||||
</template> --> | |||||
</van-swipe-cell> | </van-swipe-cell> | ||||
</div> | </div> | ||||
<!-- 分页 --> | <!-- 分页 --> | ||||
@@ -65,8 +91,11 @@ | |||||
:items-per-page="4" | :items-per-page="4" | ||||
@change="pageChange" | @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 | <div | ||||
class="messageCover" | class="messageCover" | ||||
@@ -87,131 +116,158 @@ | |||||
<script> | <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 { | import { | ||||
bytesToSize, | bytesToSize, | ||||
timestampToTime, | timestampToTime, | ||||
scrollToID, | scrollToID, | ||||
formatSeconds, | |||||
} from "../../utils"; | |||||
formatSeconds | |||||
} from '../../utils' | |||||
// 接口 | // 接口 | ||||
import { | import { | ||||
getVideoList, | getVideoList, | ||||
doGetVideoDetialById, | doGetVideoDetialById, | ||||
doFindInviteCode, | doFindInviteCode, | ||||
deleteVideoById, | |||||
} from "../../api/myPage"; | |||||
deleteVideoById | |||||
} from '../../api/myPage' | |||||
Vue.use(Toast); | |||||
Vue.use(Toast) | |||||
export default { | export default { | ||||
components: { | components: { | ||||
HeadTop, | |||||
HeadTop | |||||
}, | }, | ||||
data() { | data() { | ||||
return { | return { | ||||
showPopup: false, // 编辑和删除显示隐藏 | |||||
clickItem: -1, // 弹出层显示隐藏 | |||||
showTrue: true, // 弹出层显示隐藏 | |||||
showFalse: false, // 弹出层显示隐藏 | |||||
inPage: false, | inPage: false, | ||||
isShowMessageCover: false, | isShowMessageCover: false, | ||||
videoList: [], | videoList: [], | ||||
currentPage: 1, | currentPage: 1, | ||||
pageSize: 4, | pageSize: 4, | ||||
prePage: "", | |||||
total: "", | |||||
}; | |||||
prePage: '', | |||||
total: '' | |||||
} | |||||
}, | }, | ||||
computed: { | computed: { | ||||
...mapState({ | ...mapState({ | ||||
characters: (state) => state.publicObj.characters, | |||||
}), | |||||
characters: (state) => state.publicObj.characters | |||||
}) | |||||
}, | }, | ||||
methods: { | methods: { | ||||
...mapActions(["setCharacters"]), | |||||
...mapActions(['setCharacters']), | |||||
closeDialog() { | |||||
Dialog.close | |||||
}, | |||||
// 点击显示编辑删除 | |||||
showDialog(id) { | |||||
this.showPopup = true | |||||
this.clickItem = id | |||||
}, | |||||
go(url) { | go(url) { | ||||
this.$router.push(url); | |||||
this.$router.push(url) | |||||
}, | }, | ||||
changeTime(timestamp, form) { | changeTime(timestamp, form) { | ||||
return timestampToTime(timestamp, form); | |||||
return timestampToTime(timestamp, form) | |||||
}, | }, | ||||
pageChange() { | pageChange() { | ||||
this.loadVideoList(this.currentPage, this.pageSize); | |||||
this.loadVideoList(this.currentPage, this.pageSize) | |||||
}, | }, | ||||
// 点击空白区域退出提示 | // 点击空白区域退出提示 | ||||
exitCover(e) { | exitCover(e) { | ||||
if (e.srcElement.id != "message") { | |||||
this.isShowMessageCover = false; | |||||
if (e.srcElement.id != 'message') { | |||||
this.isShowMessageCover = false | |||||
} | } | ||||
}, | }, | ||||
// 秒转化时分秒 | // 秒转化时分秒 | ||||
formatSeconds(seconds) { | formatSeconds(seconds) { | ||||
if (seconds) { | if (seconds) { | ||||
return formatSeconds(seconds); | |||||
return formatSeconds(seconds) | |||||
} else { | } else { | ||||
return "无"; | |||||
return '无' | |||||
} | } | ||||
}, | }, | ||||
// 将bytes转化 | // 将bytes转化 | ||||
bytesToSize(bytes) { | bytesToSize(bytes) { | ||||
if (bytes) { | if (bytes) { | ||||
return bytesToSize(bytes); | |||||
return bytesToSize(bytes) | |||||
} else { | } else { | ||||
return "无"; | |||||
return '无' | |||||
} | } | ||||
}, | }, | ||||
// 查看详情 | // 查看详情 | ||||
goDetail(item) { | goDetail(item) { | ||||
const status = item.videoStatus; | |||||
console.log(item) | |||||
const status = item.videoStatus | |||||
//草稿 | |||||
if (status == 0) { | if (status == 0) { | ||||
this.$router.push({ | this.$router.push({ | ||||
path: "/getPaper", | |||||
path: '/editModel', | |||||
query: { | 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({ | this.$router.push({ | ||||
path: "/downloadVideo", | |||||
path: '/downloadVideo', | |||||
query: { | query: { | ||||
videoId: item.videoId, | videoId: item.videoId, | ||||
videoUrl: url, | |||||
}, | |||||
}); | |||||
} else if (status == 3) { | |||||
videoUrl: url | |||||
} | |||||
}) | |||||
} | |||||
// 失败 | |||||
else if (status == 3) { | |||||
this.$router.push({ | this.$router.push({ | ||||
path: "/getPaper", | |||||
path: '/editModel', | |||||
query: { | query: { | ||||
id: item.id, | id: item.id, | ||||
}, | |||||
}); | |||||
imgUrl: item.id, | |||||
modelId: item.id, | |||||
mouldSmId: item.id, | |||||
modify: true | |||||
} | |||||
}) | |||||
} | } | ||||
}, | }, | ||||
// 删除作品 | |||||
goDelete(id) { | goDelete(id) { | ||||
Dialog.confirm({ | 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(() => { | .catch(() => { | ||||
return; | |||||
}); | |||||
return | |||||
}) | |||||
}, | }, | ||||
/** | /** | ||||
@@ -219,13 +275,13 @@ export default { | |||||
*/ | */ | ||||
async loadVideoList(pageNum, pageSize) { | async loadVideoList(pageNum, pageSize) { | ||||
try { | 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) { | } 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) { | async getVideoDetialById(id) { | ||||
try { | 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) { | } 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) { | async deleteVideoById(id) { | ||||
try { | try { | ||||
const res = await deleteVideoById(id); | |||||
console.log(res, "根据id删除作品"); | |||||
const res = await deleteVideoById(id) | |||||
console.log(res, '根据id删除作品') | |||||
} catch (error) { | } 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() { | async checkInviteCode() { | ||||
try { | 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) { | if (status == 0) { | ||||
scrollToID("top"); | |||||
this.isShowMessageCover = true; | |||||
scrollToID('top') | |||||
this.isShowMessageCover = true | |||||
} else if (status == 1) { | } else if (status == 1) { | ||||
this.goCreateNew(); | |||||
this.goCreateNew() | |||||
} | } | ||||
} catch (error) { | } catch (error) { | ||||
console.log(error, "error"); | |||||
Toast.fail(error.message); | |||||
console.log(error, 'error') | |||||
Toast.fail(error.message) | |||||
} | } | ||||
}, | }, | ||||
goCreateNew() { | goCreateNew() { | ||||
this.$router.push("/chooseModel"); | |||||
}, | |||||
this.$router.push('/chooseModel') | |||||
} | |||||
}, | }, | ||||
mounted() { | mounted() { | ||||
this.inPage = true; | |||||
scrollToID("top"); | |||||
this.inPage = true | |||||
scrollToID('top') | |||||
}, | }, | ||||
created() { | created() { | ||||
this.loadVideoList(1, this.pageSize); | |||||
}, | |||||
}; | |||||
this.loadVideoList(1, this.pageSize) | |||||
} | |||||
} | |||||
</script> | </script> | ||||
<style lang="scss" scoped> | <style lang="scss" scoped> | ||||
@@ -333,15 +389,12 @@ export default { | |||||
} | } | ||||
.showIMG { | .showIMG { | ||||
padding: 10px; | padding: 10px; | ||||
width: 355px; | |||||
height: 130px; | |||||
width: 100%; | |||||
height: 140px; | |||||
border-radius: 16px; | border-radius: 16px; | ||||
} | } | ||||
.item { | .item { | ||||
padding-top: 15px; | |||||
padding-bottom: 15px; | |||||
padding-left: 10px; | |||||
padding-right: 10px; | |||||
padding: 15px 10px; | |||||
.title { | .title { | ||||
font-size: 16px; | font-size: 16px; | ||||
font-weight: 500; | font-weight: 500; | ||||
@@ -360,9 +413,8 @@ export default { | |||||
position: relative; | position: relative; | ||||
display: flex; | display: flex; | ||||
justify-content: space-between; | justify-content: space-between; | ||||
margin-bottom: 25px; | |||||
border-bottom: 1px solid #00000010; | |||||
padding: 0 20px 25px 25px; | |||||
margin-bottom: 20px; | |||||
.videoPrv { | .videoPrv { | ||||
width: 150px; | width: 150px; | ||||
height: 100px; | height: 100px; | ||||
@@ -371,6 +423,7 @@ export default { | |||||
position: absolute; | position: absolute; | ||||
width: 150px; | width: 150px; | ||||
height: 100px; | height: 100px; | ||||
border-radius: 6px; | |||||
} | } | ||||
.cover { | .cover { | ||||
position: absolute; | position: absolute; | ||||
@@ -379,22 +432,62 @@ export default { | |||||
line-height: 100px; | line-height: 100px; | ||||
background-color: #00000034; | background-color: #00000034; | ||||
text-align: center; | text-align: center; | ||||
border-radius: 6px; | |||||
color: #fff; | color: #fff; | ||||
} | } | ||||
} | } | ||||
.videoInfo { | .videoInfo { | ||||
display: flex; | |||||
flex-direction: column; | |||||
justify-content: space-between; | |||||
margin-left: 10px; | |||||
flex: 1; | |||||
margin-left: 12px; | |||||
.videoName { | .videoName { | ||||
font-size: 16px; | font-size: 16px; | ||||
font-weight: 600; | font-weight: 600; | ||||
} | } | ||||
.createTime { | .createTime { | ||||
font-size: 11px; | 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 { | .tag { | ||||
position: absolute; | position: absolute; | ||||
right: 10px; | right: 10px; | ||||
@@ -445,6 +538,20 @@ export default { | |||||
margin-top: 25px; | margin-top: 25px; | ||||
margin-left: 190px; | 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 { | .messageCover { | ||||
position: fixed; | position: fixed; | ||||
top: 0; | top: 0; | ||||
@@ -9,10 +9,61 @@ | |||||
<div class="title"> | <div class="title"> | ||||
<img src="../../assets/img/myVideo.png" alt="" /> | <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> | ||||
<!-- 具体内容 --> | <!-- 具体内容 --> | ||||
<!-- 列表样式--大图 --> | |||||
<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 | <van-swipe-cell | ||||
v-show="listActive == 2" | |||||
loading | loading | ||||
v-for="(item, index) in videoList" | v-for="(item, index) in videoList" | ||||
:key="item.id ? item.id : index" | :key="item.id ? item.id : index" | ||||
@@ -60,28 +111,12 @@ | |||||
<i class="el-icon-delete" /> 删除 | <i class="el-icon-delete" /> 删除 | ||||
</div> | </div> | ||||
</van-popup> | </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> | ||||
<!-- 无数据处理 --> | <!-- 无数据处理 --> | ||||
<div v-if="videoList.length <= 0" class="noWork"> | <div v-if="videoList.length <= 0" class="noWork"> | ||||
您还没有视频作品 | 您还没有视频作品 | ||||
</div> | </div> | ||||
</div> | </div> | ||||
<!-- 右滑 --> | |||||
<!-- <template #right> | |||||
<van-button | |||||
square | |||||
text="删除" | |||||
type="danger" | |||||
class="delete-button" | |||||
@click="goDelete(item.id)" | |||||
/> | |||||
</template> --> | |||||
</van-swipe-cell> | </van-swipe-cell> | ||||
</div> | </div> | ||||
<!-- 分页 --> | <!-- 分页 --> | ||||
@@ -152,7 +187,10 @@ export default { | |||||
currentPage: 1, | currentPage: 1, | ||||
pageSize: 4, | pageSize: 4, | ||||
prePage: '', | prePage: '', | ||||
total: '' | |||||
total: '', | |||||
defaultImg: require('@/assets/img/BG@2x.png'), //默认图片 | |||||
defaultImg1: require('@/assets/img/bg.png'), //默认图片 | |||||
listActive: 1 // 显示列表样式 | |||||
} | } | ||||
}, | }, | ||||
computed: { | computed: { | ||||
@@ -218,6 +256,7 @@ export default { | |||||
path: '/editModel', | path: '/editModel', | ||||
query: { | query: { | ||||
saveID: item.id, | saveID: item.id, | ||||
id: item.id, | |||||
imgUrl: item.id, | imgUrl: item.id, | ||||
modelId: item.id, | modelId: item.id, | ||||
mouldSmId: item.id, | mouldSmId: item.id, | ||||
@@ -351,6 +390,14 @@ export default { | |||||
</script> | </script> | ||||
<style lang="scss" scoped> | <style lang="scss" scoped> | ||||
.floatRight { | |||||
margin-left: 20px; | |||||
img { | |||||
vertical-align: bottom !important; | |||||
margin-top: 2px !important; | |||||
color: red; | |||||
} | |||||
} | |||||
.page { | .page { | ||||
transform: translateX(30%); | transform: translateX(30%); | ||||
opacity: 0; | opacity: 0; | ||||
@@ -624,4 +671,64 @@ export default { | |||||
height: 100%; | 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> | </style> |
@@ -1,6 +1,13 @@ | |||||
// const UglifyJsPlugin = require('uglifyjs-webpack-plugin') | // const UglifyJsPlugin = require('uglifyjs-webpack-plugin') | ||||
const path = require('path'); | |||||
module.exports = { | module.exports = { | ||||
configureWebpack: { | |||||
resolve: { | |||||
alias: { | |||||
'@': path.resolve(__dirname, 'src') | |||||
} | |||||
} | |||||
}, | |||||
css: { | css: { | ||||
loaderOptions: { | loaderOptions: { | ||||
css: { | css: { | ||||
@@ -12,8 +19,6 @@ module.exports = { | |||||
// remUnit: 75 | // remUnit: 75 | ||||
// })] | // })] | ||||
// } | // } | ||||
} | } | ||||
}, | }, | ||||