@@ -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 查询用户邀请码状态 | |||
* @returns data | |||
@@ -33,4 +44,5 @@ export function doFindInviteCode() { | |||
url: `/api/inviteCode/find`, | |||
method: 'get', | |||
}) | |||
} | |||
} | |||
@@ -60,6 +60,7 @@ export default { | |||
try { | |||
const res = await doLoginOut(); | |||
this.$router.push("/login"); | |||
localStorage.removeItem("AccessToken"); | |||
} catch (error) { | |||
console.log(error, "error"); | |||
Toast.fail(error.message); | |||
@@ -820,7 +820,7 @@ export default { | |||
overflow: hidden; | |||
transform: translateX(30%); | |||
opacity: 0; | |||
transition: all 1s; | |||
transition: all 0.5s; // global-transition | |||
&.active { | |||
opacity: 1; | |||
transform: translateX(0); | |||
@@ -44,7 +44,7 @@ export default { | |||
.page { | |||
transform: translateX(30%); | |||
opacity: 0; | |||
transition: all 1s; | |||
transition: all 0.5s; // global-transition | |||
&.active { | |||
opacity: 1; | |||
transform: translateX(0); | |||
@@ -68,13 +68,11 @@ export function scrollToID(id) { | |||
*/ | |||
export function timestampToTime(timestamp, format) { | |||
//时间戳为10位需*1000,时间戳为13位不需乘1000 | |||
const length = timestamp.length || '' | |||
const length = timestamp.length | |||
if (length <= 10) { | |||
var date = new Date(timestamp * 1000) | |||
} else if (length > 10) { | |||
var date = new Date(timestamp) | |||
} else { | |||
return '无时间戳' | |||
var date = new Date(timestamp) | |||
} | |||
let Y = String(date.getFullYear()) | |||
let M = String(date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) | |||
@@ -324,12 +324,10 @@ export default { | |||
<style lang="scss" scoped> | |||
.page { | |||
transform: translateX(30%); | |||
opacity: 0; | |||
transition: all 1s; | |||
transition: all 0.5s; // global-transition | |||
&.active { | |||
opacity: 1; | |||
transform: translateX(0); | |||
} | |||
.logoBox { | |||
// margin-top: 10px; | |||
@@ -135,7 +135,7 @@ export default { | |||
this.$router.push({ | |||
path: "/getPaper", | |||
query: { | |||
modelDetail: modelDetail, | |||
modelDetail: JSON.stringify(modelDetail), | |||
saveID: res.data.id, | |||
}, | |||
}); | |||
@@ -176,7 +176,7 @@ export default { | |||
.page { | |||
transform: translateX(30%); | |||
opacity: 0; | |||
transition: all 1s; | |||
transition: all 0.5s; // global-transition | |||
padding-bottom: 25px; | |||
&.active { | |||
opacity: 1; | |||
@@ -138,7 +138,7 @@ export default { | |||
.page { | |||
transform: translateX(30%); | |||
opacity: 0; | |||
transition: all 1s; | |||
transition: all 0.5s; // global-transition | |||
padding-bottom: 25px; | |||
&.active { | |||
opacity: 1; | |||
@@ -131,6 +131,7 @@ export default { | |||
backgroundMouldId: "", | |||
backgroundMouldSmId: "", | |||
}, | |||
comeFrom: "", // 由哪个页面跳转而来 | |||
}; | |||
}, | |||
computed: { | |||
@@ -185,7 +186,16 @@ export default { | |||
}, | |||
back() { | |||
this.$router.back(); | |||
if (this.comeFrom == "getPaper") { | |||
this.$router.push({ | |||
path: "/getPaper", | |||
query: { | |||
id: this.id, | |||
}, | |||
}); | |||
} else { | |||
this.$router.back(); | |||
} | |||
}, | |||
goMy() { | |||
@@ -305,6 +315,7 @@ export default { | |||
}; | |||
console.log(data, "最终提交的参数"); | |||
// 当没有选择声音参数时 | |||
if (!this.soundParams.voiceMouldId || !this.soundParams.voiceMouldSmId) { | |||
Toast.fail("请选择声音!"); | |||
return; | |||
@@ -328,6 +339,12 @@ export default { | |||
}, | |||
}, | |||
beforeRouteEnter(to, from, next) { | |||
next((vm) => { | |||
vm.comeFrom = from.name; | |||
}); | |||
}, | |||
created() { | |||
this.coverImg = this.$route.query.coverImg; | |||
this.id = this.$route.query.id; | |||
@@ -349,7 +366,7 @@ export default { | |||
.page { | |||
transform: translateX(30%); | |||
opacity: 0; | |||
transition: all 1s; | |||
transition: all 0.5s; // global-transition | |||
padding-bottom: 25px; | |||
&.active { | |||
opacity: 1; | |||
@@ -124,6 +124,7 @@ export default { | |||
title: this.title, | |||
}; | |||
// 来自编辑 | |||
if (this.id) { | |||
data.id = this.id; | |||
} | |||
@@ -180,16 +181,18 @@ export default { | |||
} | |||
}, | |||
}, | |||
created() { | |||
this.id = this.$route.query.id; | |||
if (this.id) { | |||
this.getDetailById(this.id); | |||
} else { | |||
this.modelDetail = this.$route.query.modelDetail; | |||
this.modelDetail = JSON.parse(this.$route.query.modelDetail); | |||
console.log(this.modelDetail, "modelDetail"); | |||
} | |||
this.saveID = this.$route.query.saveID; | |||
}, | |||
mounted() { | |||
this.inPage = true; | |||
scrollToID("top"); | |||
@@ -201,7 +204,7 @@ export default { | |||
.page { | |||
transform: translateX(30%); | |||
opacity: 0; | |||
transition: all 1s; | |||
transition: all 0.5s; // global-transition | |||
padding-bottom: 25px; | |||
&.active { | |||
opacity: 1; | |||
@@ -5,34 +5,49 @@ | |||
<img class="showIMG" src="../../assets/img/BG-Page.png" alt="" /> | |||
<div class="item"> | |||
<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 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 v-if="videoList.length <= 0" class="noWork"> | |||
您还没有视频作品 | |||
</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> | |||
<van-pagination | |||
v-model="currentPage" | |||
@@ -63,7 +78,7 @@ | |||
<script> | |||
// 组件 | |||
import Vue from "vue"; | |||
import { Toast } from "vant"; | |||
import { Toast, Dialog } from "vant"; | |||
import { mapState, mapActions } from "vuex"; | |||
import HeadTop from "./../../components/common/head.vue"; | |||
// 工具 | |||
@@ -78,6 +93,7 @@ import { | |||
getVideoList, | |||
doGetVideoDetialById, | |||
doFindInviteCode, | |||
deleteVideoById, | |||
} from "../../api/myPage"; | |||
Vue.use(Toast); | |||
@@ -146,20 +162,27 @@ export default { | |||
}, | |||
}); | |||
} 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获取视频详情 | |||
*/ | |||
@@ -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:查询用户邀请码状态 | |||
*/ | |||
@@ -229,10 +281,12 @@ export default { | |||
this.$router.push("/chooseModel"); | |||
}, | |||
}, | |||
mounted() { | |||
this.inPage = true; | |||
scrollToID("top"); | |||
}, | |||
created() { | |||
this.loadVideoList(1, this.pageSize); | |||
}, | |||
@@ -243,7 +297,7 @@ export default { | |||
.page { | |||
transform: translateX(30%); | |||
opacity: 0; | |||
transition: all 1s; | |||
transition: all 0.5s; // global-transition | |||
padding-bottom: 25px; | |||
&.active { | |||
opacity: 1; | |||
@@ -445,5 +499,10 @@ export default { | |||
opacity: 1; | |||
} | |||
} | |||
.delete-button { | |||
position: relative; | |||
left: 1%; | |||
height: 100%; | |||
} | |||
} | |||
</style> |
@@ -1,4 +1,4 @@ | |||
const UglifyJsPlugin = require('uglifyjs-webpack-plugin') | |||
// const UglifyJsPlugin = require('uglifyjs-webpack-plugin') | |||
module.exports = { | |||
css: { | |||
@@ -47,18 +47,18 @@ module.exports = { | |||
lintOnSave: false, | |||
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 | |||
// }, | |||
// }, | |||
// }), | |||
// ], | |||
// } | |||
} |