| @@ -24,6 +24,17 @@ export function doGetVideoDetialById(id) { | |||||
| }) | }) | ||||
| } | } | ||||
| /** | |||||
| * @description 根据id删除作品 | |||||
| * @param {number} id (pageNum, pageSize) | |||||
| */ | |||||
| export function deleteVideoById(id) { | |||||
| return request({ | |||||
| url: `/api/userVideo/del?id=${id}`, | |||||
| method: 'get' | |||||
| }) | |||||
| } | |||||
| /** | /** | ||||
| * @description 查询用户邀请码状态 | * @description 查询用户邀请码状态 | ||||
| * @returns data | * @returns data | ||||
| @@ -33,4 +44,5 @@ export function doFindInviteCode() { | |||||
| url: `/api/inviteCode/find`, | url: `/api/inviteCode/find`, | ||||
| method: 'get', | method: 'get', | ||||
| }) | }) | ||||
| } | |||||
| } | |||||
| @@ -60,6 +60,7 @@ export default { | |||||
| try { | try { | ||||
| const res = await doLoginOut(); | const res = await doLoginOut(); | ||||
| this.$router.push("/login"); | this.$router.push("/login"); | ||||
| localStorage.removeItem("AccessToken"); | |||||
| } catch (error) { | } catch (error) { | ||||
| console.log(error, "error"); | console.log(error, "error"); | ||||
| Toast.fail(error.message); | Toast.fail(error.message); | ||||
| @@ -820,7 +820,7 @@ export default { | |||||
| overflow: hidden; | overflow: hidden; | ||||
| transform: translateX(30%); | transform: translateX(30%); | ||||
| opacity: 0; | opacity: 0; | ||||
| transition: all 1s; | |||||
| transition: all 0.5s; // global-transition | |||||
| &.active { | &.active { | ||||
| opacity: 1; | opacity: 1; | ||||
| transform: translateX(0); | transform: translateX(0); | ||||
| @@ -44,7 +44,7 @@ export default { | |||||
| .page { | .page { | ||||
| transform: translateX(30%); | transform: translateX(30%); | ||||
| opacity: 0; | opacity: 0; | ||||
| transition: all 1s; | |||||
| transition: all 0.5s; // global-transition | |||||
| &.active { | &.active { | ||||
| opacity: 1; | opacity: 1; | ||||
| transform: translateX(0); | transform: translateX(0); | ||||
| @@ -68,13 +68,11 @@ export function scrollToID(id) { | |||||
| */ | */ | ||||
| export function timestampToTime(timestamp, format) { | export function timestampToTime(timestamp, format) { | ||||
| //时间戳为10位需*1000,时间戳为13位不需乘1000 | //时间戳为10位需*1000,时间戳为13位不需乘1000 | ||||
| const length = timestamp.length || '' | |||||
| const length = timestamp.length | |||||
| if (length <= 10) { | if (length <= 10) { | ||||
| var date = new Date(timestamp * 1000) | var date = new Date(timestamp * 1000) | ||||
| } else if (length > 10) { | |||||
| var date = new Date(timestamp) | |||||
| } else { | } else { | ||||
| return '无时间戳' | |||||
| var date = new Date(timestamp) | |||||
| } | } | ||||
| let Y = String(date.getFullYear()) | let Y = String(date.getFullYear()) | ||||
| let M = String(date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) | let M = String(date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) | ||||
| @@ -324,12 +324,10 @@ export default { | |||||
| <style lang="scss" scoped> | <style lang="scss" scoped> | ||||
| .page { | .page { | ||||
| transform: translateX(30%); | |||||
| opacity: 0; | opacity: 0; | ||||
| transition: all 1s; | |||||
| transition: all 0.5s; // global-transition | |||||
| &.active { | &.active { | ||||
| opacity: 1; | opacity: 1; | ||||
| transform: translateX(0); | |||||
| } | } | ||||
| .logoBox { | .logoBox { | ||||
| // margin-top: 10px; | // margin-top: 10px; | ||||
| @@ -135,7 +135,7 @@ export default { | |||||
| this.$router.push({ | this.$router.push({ | ||||
| path: "/getPaper", | path: "/getPaper", | ||||
| query: { | query: { | ||||
| modelDetail: modelDetail, | |||||
| modelDetail: JSON.stringify(modelDetail), | |||||
| saveID: res.data.id, | saveID: res.data.id, | ||||
| }, | }, | ||||
| }); | }); | ||||
| @@ -176,7 +176,7 @@ export default { | |||||
| .page { | .page { | ||||
| transform: translateX(30%); | transform: translateX(30%); | ||||
| opacity: 0; | opacity: 0; | ||||
| transition: all 1s; | |||||
| transition: all 0.5s; // global-transition | |||||
| padding-bottom: 25px; | padding-bottom: 25px; | ||||
| &.active { | &.active { | ||||
| opacity: 1; | opacity: 1; | ||||
| @@ -138,7 +138,7 @@ export default { | |||||
| .page { | .page { | ||||
| transform: translateX(30%); | transform: translateX(30%); | ||||
| opacity: 0; | opacity: 0; | ||||
| transition: all 1s; | |||||
| transition: all 0.5s; // global-transition | |||||
| padding-bottom: 25px; | padding-bottom: 25px; | ||||
| &.active { | &.active { | ||||
| opacity: 1; | opacity: 1; | ||||
| @@ -131,6 +131,7 @@ export default { | |||||
| backgroundMouldId: "", | backgroundMouldId: "", | ||||
| backgroundMouldSmId: "", | backgroundMouldSmId: "", | ||||
| }, | }, | ||||
| comeFrom: "", // 由哪个页面跳转而来 | |||||
| }; | }; | ||||
| }, | }, | ||||
| computed: { | computed: { | ||||
| @@ -185,7 +186,16 @@ export default { | |||||
| }, | }, | ||||
| back() { | back() { | ||||
| this.$router.back(); | |||||
| if (this.comeFrom == "getPaper") { | |||||
| this.$router.push({ | |||||
| path: "/getPaper", | |||||
| query: { | |||||
| id: this.id, | |||||
| }, | |||||
| }); | |||||
| } else { | |||||
| this.$router.back(); | |||||
| } | |||||
| }, | }, | ||||
| goMy() { | goMy() { | ||||
| @@ -305,6 +315,7 @@ export default { | |||||
| }; | }; | ||||
| console.log(data, "最终提交的参数"); | console.log(data, "最终提交的参数"); | ||||
| // 当没有选择声音参数时 | |||||
| if (!this.soundParams.voiceMouldId || !this.soundParams.voiceMouldSmId) { | if (!this.soundParams.voiceMouldId || !this.soundParams.voiceMouldSmId) { | ||||
| Toast.fail("请选择声音!"); | Toast.fail("请选择声音!"); | ||||
| return; | return; | ||||
| @@ -328,6 +339,12 @@ export default { | |||||
| }, | }, | ||||
| }, | }, | ||||
| beforeRouteEnter(to, from, next) { | |||||
| next((vm) => { | |||||
| vm.comeFrom = from.name; | |||||
| }); | |||||
| }, | |||||
| created() { | created() { | ||||
| this.coverImg = this.$route.query.coverImg; | this.coverImg = this.$route.query.coverImg; | ||||
| this.id = this.$route.query.id; | this.id = this.$route.query.id; | ||||
| @@ -349,7 +366,7 @@ export default { | |||||
| .page { | .page { | ||||
| transform: translateX(30%); | transform: translateX(30%); | ||||
| opacity: 0; | opacity: 0; | ||||
| transition: all 1s; | |||||
| transition: all 0.5s; // global-transition | |||||
| padding-bottom: 25px; | padding-bottom: 25px; | ||||
| &.active { | &.active { | ||||
| opacity: 1; | opacity: 1; | ||||
| @@ -124,6 +124,7 @@ export default { | |||||
| title: this.title, | title: this.title, | ||||
| }; | }; | ||||
| // 来自编辑 | |||||
| if (this.id) { | if (this.id) { | ||||
| data.id = this.id; | data.id = this.id; | ||||
| } | } | ||||
| @@ -180,16 +181,18 @@ export default { | |||||
| } | } | ||||
| }, | }, | ||||
| }, | }, | ||||
| created() { | created() { | ||||
| this.id = this.$route.query.id; | this.id = this.$route.query.id; | ||||
| if (this.id) { | if (this.id) { | ||||
| this.getDetailById(this.id); | this.getDetailById(this.id); | ||||
| } else { | } else { | ||||
| this.modelDetail = this.$route.query.modelDetail; | |||||
| this.modelDetail = JSON.parse(this.$route.query.modelDetail); | |||||
| console.log(this.modelDetail, "modelDetail"); | console.log(this.modelDetail, "modelDetail"); | ||||
| } | } | ||||
| this.saveID = this.$route.query.saveID; | this.saveID = this.$route.query.saveID; | ||||
| }, | }, | ||||
| mounted() { | mounted() { | ||||
| this.inPage = true; | this.inPage = true; | ||||
| scrollToID("top"); | scrollToID("top"); | ||||
| @@ -201,7 +204,7 @@ export default { | |||||
| .page { | .page { | ||||
| transform: translateX(30%); | transform: translateX(30%); | ||||
| opacity: 0; | opacity: 0; | ||||
| transition: all 1s; | |||||
| transition: all 0.5s; // global-transition | |||||
| padding-bottom: 25px; | padding-bottom: 25px; | ||||
| &.active { | &.active { | ||||
| opacity: 1; | opacity: 1; | ||||
| @@ -5,34 +5,49 @@ | |||||
| <img class="showIMG" src="../../assets/img/BG-Page.png" alt="" /> | <img class="showIMG" src="../../assets/img/BG-Page.png" alt="" /> | ||||
| <div class="item"> | <div class="item"> | ||||
| <div class="title">我的视频作品</div> | <div class="title">我的视频作品</div> | ||||
| <div class="itemList"> | |||||
| <div | |||||
| v-if="videoList.length > 0" | |||||
| class="videoModel" | |||||
| v-for="(item, index) in videoList" | |||||
| :key="index" | |||||
| @click="goDetail(item)" | |||||
| > | |||||
| <div class="videoPrv"> | |||||
| <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="videoName"> | |||||
| {{ item.title || "暂无" }} | |||||
| <van-swipe-cell v-for="(item, index) in videoList"> | |||||
| <div class="itemList"> | |||||
| <div | |||||
| v-if="videoList.length > 0" | |||||
| class="videoModel" | |||||
| :key="index" | |||||
| @click="goDetail(item)" | |||||
| > | |||||
| <div class="videoPrv"> | |||||
| <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> | ||||
| <div class="createTime">视频时长:{{ item.videoTime }}</div> | |||||
| <div class="createTime">视频容量:{{ item.videoSize }}</div> | |||||
| <div class="createTime"> | |||||
| 创建时间:{{ changeTime(item.createDate, "YYYY-MM-DD hh:mm:ss") }} | |||||
| <div class="videoInfo"> | |||||
| <div class="videoName"> | |||||
| {{ item.title || "暂无" }} | |||||
| </div> | |||||
| <div class="createTime">视频时长:{{ item.videoTime }}</div> | |||||
| <div class="createTime">视频容量:{{ item.videoSize }}</div> | |||||
| <div class="createTime"> | |||||
| 创建时间:{{ | |||||
| changeTime(item.createDate, "YYYY-MM-DD hh:mm:ss") | |||||
| }} | |||||
| </div> | |||||
| </div> | </div> | ||||
| </div> | </div> | ||||
| <div v-if="videoList.length <= 0" class="noWork"> | |||||
| 您还没有视频作品 | |||||
| </div> | |||||
| </div> | </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> | </div> | ||||
| <van-pagination | <van-pagination | ||||
| v-model="currentPage" | v-model="currentPage" | ||||
| @@ -63,7 +78,7 @@ | |||||
| <script> | <script> | ||||
| // 组件 | // 组件 | ||||
| import Vue from "vue"; | import Vue from "vue"; | ||||
| import { Toast } from "vant"; | |||||
| import { Toast, Dialog } from "vant"; | |||||
| import { mapState, mapActions } from "vuex"; | import { mapState, mapActions } from "vuex"; | ||||
| import HeadTop from "./../../components/common/head.vue"; | import HeadTop from "./../../components/common/head.vue"; | ||||
| // 工具 | // 工具 | ||||
| @@ -78,6 +93,7 @@ import { | |||||
| getVideoList, | getVideoList, | ||||
| doGetVideoDetialById, | doGetVideoDetialById, | ||||
| doFindInviteCode, | doFindInviteCode, | ||||
| deleteVideoById, | |||||
| } from "../../api/myPage"; | } from "../../api/myPage"; | ||||
| Vue.use(Toast); | Vue.use(Toast); | ||||
| @@ -146,20 +162,27 @@ export default { | |||||
| }, | }, | ||||
| }); | }); | ||||
| } else if (status == 3) { | } else if (status == 3) { | ||||
| this.$router.push({ | |||||
| path: "/getPaper", | |||||
| query: { | |||||
| id: item.id, | |||||
| }, | |||||
| }); | |||||
| } | } | ||||
| }, | }, | ||||
| async loadVideoList(pageNum, pageSize) { | |||||
| try { | |||||
| const res = await getVideoList(pageNum, pageSize); | |||||
| console.log(res, "获取作品列表"); | |||||
| this.videoList = res.data.list; | |||||
| this.getDetailJoinList(this.videoList); | |||||
| this.total = res.data.total; | |||||
| } catch (error) { | |||||
| console.log(error, "error"); | |||||
| Toast.fail(error.message); | |||||
| } | |||||
| goDelete(id) { | |||||
| Dialog.confirm({ | |||||
| title: "删除作品", | |||||
| message: "您确定要删除该作品吗?", | |||||
| }) | |||||
| .then(() => { | |||||
| this.deleteVideoById(id); | |||||
| this.loadVideoList(this.currentPage, this.pageSize); | |||||
| }) | |||||
| .catch(() => { | |||||
| return; | |||||
| }); | |||||
| }, | }, | ||||
| // 将获取到的视频详情(视频时长、视频容量)加入视频列表 | // 将获取到的视频详情(视频时长、视频容量)加入视频列表 | ||||
| @@ -189,6 +212,22 @@ export default { | |||||
| }); | }); | ||||
| }, | }, | ||||
| /** | |||||
| * @description:获取作品列表 | |||||
| */ | |||||
| async loadVideoList(pageNum, pageSize) { | |||||
| try { | |||||
| const res = await getVideoList(pageNum, pageSize); | |||||
| console.log(res, "获取作品列表"); | |||||
| this.videoList = res.data.list; | |||||
| this.getDetailJoinList(this.videoList); | |||||
| this.total = res.data.total; | |||||
| } catch (error) { | |||||
| console.log(error, "error"); | |||||
| Toast.fail(error.message); | |||||
| } | |||||
| }, | |||||
| /** | /** | ||||
| * @description 通过视频id获取视频详情 | * @description 通过视频id获取视频详情 | ||||
| */ | */ | ||||
| @@ -203,6 +242,19 @@ export default { | |||||
| } | } | ||||
| }, | }, | ||||
| /** | |||||
| * @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:查询用户邀请码状态 | * @description:查询用户邀请码状态 | ||||
| */ | */ | ||||
| @@ -229,10 +281,12 @@ export default { | |||||
| this.$router.push("/chooseModel"); | this.$router.push("/chooseModel"); | ||||
| }, | }, | ||||
| }, | }, | ||||
| mounted() { | mounted() { | ||||
| this.inPage = true; | this.inPage = true; | ||||
| scrollToID("top"); | scrollToID("top"); | ||||
| }, | }, | ||||
| created() { | created() { | ||||
| this.loadVideoList(1, this.pageSize); | this.loadVideoList(1, this.pageSize); | ||||
| }, | }, | ||||
| @@ -243,7 +297,7 @@ export default { | |||||
| .page { | .page { | ||||
| transform: translateX(30%); | transform: translateX(30%); | ||||
| opacity: 0; | opacity: 0; | ||||
| transition: all 1s; | |||||
| transition: all 0.5s; // global-transition | |||||
| padding-bottom: 25px; | padding-bottom: 25px; | ||||
| &.active { | &.active { | ||||
| opacity: 1; | opacity: 1; | ||||
| @@ -445,5 +499,10 @@ export default { | |||||
| opacity: 1; | opacity: 1; | ||||
| } | } | ||||
| } | } | ||||
| .delete-button { | |||||
| position: relative; | |||||
| left: 1%; | |||||
| height: 100%; | |||||
| } | |||||
| } | } | ||||
| </style> | </style> | ||||
| @@ -1,4 +1,4 @@ | |||||
| const UglifyJsPlugin = require('uglifyjs-webpack-plugin') | |||||
| // const UglifyJsPlugin = require('uglifyjs-webpack-plugin') | |||||
| module.exports = { | module.exports = { | ||||
| css: { | css: { | ||||
| @@ -47,18 +47,18 @@ module.exports = { | |||||
| lintOnSave: false, | lintOnSave: false, | ||||
| publicPath: './', // 打包后引用的资源路径 | publicPath: './', // 打包后引用的资源路径 | ||||
| configureWebpack: { | |||||
| plugins: [ | |||||
| //打包环境去掉console.log | |||||
| new UglifyJsPlugin({ | |||||
| uglifyOptions: { | |||||
| compress: { | |||||
| drop_console: true, //注释console | |||||
| drop_debugger: true, //注释debugger | |||||
| pure_funcs: ['console.log'], //移除console.log | |||||
| }, | |||||
| }, | |||||
| }), | |||||
| ], | |||||
| } | |||||
| // configureWebpack: { | |||||
| // plugins: [ | |||||
| // //打包环境去掉console.log | |||||
| // new UglifyJsPlugin({ | |||||
| // uglifyOptions: { | |||||
| // compress: { | |||||
| // drop_console: true, //注释console | |||||
| // drop_debugger: true, //注释debugger | |||||
| // pure_funcs: ['console.log'], //移除console.log | |||||
| // }, | |||||
| // }, | |||||
| // }), | |||||
| // ], | |||||
| // } | |||||
| } | } | ||||