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