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