| @@ -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 | |||
| // })] | |||
| // } | |||
| } | |||
| }, | |||