@@ -621,6 +621,7 @@ export default { | |||
if (res.data.code == 1052) { | |||
this.$router.push("/login"); | |||
Toast.fail("登录过期,请重新登录!"); | |||
return; | |||
} else { | |||
this.$router.push("/myPage"); | |||
} | |||
@@ -3,6 +3,7 @@ import App from './App.vue' | |||
import './registerServiceWorker' | |||
import router from './router' | |||
import store from './store' | |||
import Vant from 'vant'; | |||
import 'vant/lib/index.css' | |||
// 引入lib-flexible做rem适配 | |||
import 'lib-flexible' | |||
@@ -11,6 +12,7 @@ import ElementUI from 'element-ui'; //引入js | |||
import 'element-ui/lib/theme-chalk/index.css';//引入css | |||
Vue.use(ElementUI); | |||
Vue.use(Vant); | |||
@@ -19,57 +19,61 @@ const routes = [ | |||
{ | |||
path: '/aboutUe', | |||
name: 'aboutUe', | |||
// component: Home | |||
component: () => import("../components/aboutUe/aboutUe"), | |||
}, | |||
{ | |||
path: '/styleAdd', | |||
name: 'styleAdd', | |||
// component: Home | |||
component: () => import("../components/styleAdd/styleAdd"), | |||
}, | |||
// 登录 | |||
{ | |||
path: '/login', | |||
name: 'login', | |||
// component: Home | |||
component: () => import("../views/login/login"), | |||
}, | |||
// 创作中心首页 | |||
{ | |||
path: '/myPage', | |||
name: 'myPage', | |||
// component: Home | |||
component: () => import("../views/myPage/myPage"), | |||
}, | |||
// 选择模板 | |||
{ | |||
path: '/chooseModel', | |||
name: 'chooseModel', | |||
// component: Home | |||
component: () => import("../views/model/chooseModel"), | |||
}, | |||
// 模板详情 | |||
{ | |||
path: '/modelDetail', | |||
name: 'modelDetail', | |||
// component: Home | |||
component: () => import("../views/model/modelDetail"), | |||
}, | |||
// 选择语音 | |||
{ | |||
path: '/selectSound', | |||
name: 'selectSound', | |||
// component: Home | |||
component: () => import("../views/model/selectSound"), | |||
}, | |||
// 录入文案 | |||
{ | |||
path: '/getPaper', | |||
name: 'getPaper', | |||
// component: Home | |||
component: () => import("../views/model/getPaper"), | |||
}, | |||
// 合成视频 | |||
{ | |||
path: '/generateVideo', | |||
name: 'generateVideo', | |||
component: () => import("../views/model/generateVideo"), | |||
}, | |||
// 下载视频 | |||
{ | |||
path: '/downloadVideo', | |||
name: 'downloadVideo', | |||
component: () => import("../views/model/downloadVideo"), | |||
}, | |||
] | |||
const router = new VueRouter({ | |||
@@ -0,0 +1,47 @@ | |||
/** | |||
* @description 根据时间戳获取时间 | |||
* @param {*} timestamp 必传,number类型,时间戳数据(10位及以下,10位至13位) | |||
* @param {*} format 选传,string类型,提供以下时间格式:YYYY-MM-DD hh:mm:ss、YYYY/MM/DD hh:mm:ss、YYYY.MM.DD hh:mm:ss、YYYY MM DD hh:mm:ss、YYYY年MM月DD日 hh:mm:ss、YYYY-MM-DD、YYYY/MM/DD、YYYY.MM.DD、YYYY MM DD、YYYY年MM月DD日;若不传,则默认为:YYYY-MM-DD | |||
* @returns 根据要求的时间格式 | |||
* @version V 1.0, Created by YWQ, 2022.10.20 | |||
*/ | |||
const timestampToTime = (timestamp, format) => { | |||
//时间戳为10位需*1000,时间戳为13位不需乘1000 | |||
const length = timestamp.length | |||
if (length <= 10) { | |||
var date = new Date(timestamp * 1000) | |||
} else { | |||
var date = new Date(timestamp) | |||
} | |||
let Y = String(date.getFullYear()) | |||
let M = String(date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) | |||
let D = String(date.getDate() + 1 < 10 ? '0' + (date.getDate()) : date.getDate()) | |||
let h = String(date.getHours() + 1 < 10 ? '0' + (date.getHours()) : date.getHours()) | |||
let m = String(date.getMinutes() + 1 < 10 ? '0' + (date.getMinutes()) : date.getMinutes()) | |||
let s = String(date.getSeconds() + 1 < 10 ? '0' + (date.getSeconds()) : date.getSeconds()) | |||
// return Y + M + D + h + m + s | |||
if (format == "YYYY-MM-DD hh:mm:ss") { | |||
return Y + "-" + M + "-" + D + " " + h + ":" + m + ":" + s | |||
} else if (format == "YYYY/MM/DD hh:mm:ss") { | |||
return Y + "/" + M + "/" + D + " " + h + ":" + m + ":" + s | |||
} else if (format == "YYYY.MM.DD hh:mm:ss") { | |||
return Y + "." + M + "." + D + " " + h + ":" + m + ":" + s | |||
} else if (format == "YYYY MM DD hh:mm:ss") { | |||
return Y + " " + M + " " + D + " " + h + ":" + m + ":" + s | |||
} else if (format == "YYYY年MM月DD日 hh:mm:ss") { | |||
return Y + "年" + M + "月" + D + "日" + " " + h + ":" + m + ":" + s | |||
} else if (format == "YYYY-MM-DD") { | |||
return Y + "-" + M + "-" + D | |||
} else if (format == "YYYY/MM/DD") { | |||
return Y + "/" + M + "/" + D | |||
} else if (format == "YYYY.MM.DD") { | |||
return Y + "." + M + "." + D | |||
} else if (format == "YYYY MM DD") { | |||
return Y + " " + M + " " + D | |||
} else if (format == "YYYY年MM月DD日") { | |||
return Y + "年" + M + "月" + D + "日" | |||
} else { | |||
return Y + "-" + M + "-" + D | |||
} | |||
} | |||
export default timestampToTime |
@@ -94,6 +94,7 @@ export default { | |||
if (res.data.code == 1052) { | |||
this.$router.push("/login"); | |||
Toast.fail("登录过期,请重新登录!"); | |||
return; | |||
} | |||
this.modeList = res.data.data.list; | |||
}) | |||
@@ -0,0 +1,112 @@ | |||
<template> | |||
<div> | |||
<HeadTop /> | |||
<div class="video"> | |||
<video :src="videoDetail.videoPathUri + videoDetail.videoPath" /> | |||
<div class="desc"> | |||
视频已保存到 <span @click="go('/myPage')">我的视频作品</span> | |||
</div> | |||
<img src="../../assets/img/play.png" @click="play" /> | |||
</div> | |||
<div class="bottomBtn"> | |||
<div class="back" @click="backToIndex">返回首页</div> | |||
<div class="next" @click="play">下载视频</div> | |||
</div> | |||
</div> | |||
</template> | |||
<script> | |||
import Vue from "vue"; | |||
import { Toast } from "vant"; | |||
import baseUrl from "../../api/baseUrl"; | |||
import { mapState, mapActions } from "vuex"; | |||
import HeadTop from "./../../components/common/head.vue"; | |||
Vue.use(Toast); | |||
export default { | |||
components: { | |||
HeadTop, | |||
}, | |||
data() { | |||
return { | |||
videoDetail: {}, | |||
}; | |||
}, | |||
computed: { | |||
...mapState({ | |||
characters: (state) => state.publicObj.characters, | |||
}), | |||
}, | |||
methods: { | |||
...mapActions(["setCharacters"]), | |||
go(url) { | |||
this.$router.push(url); | |||
}, | |||
backToIndex() { | |||
this.$router.push("/myPage"); | |||
}, | |||
play() { | |||
location.href = | |||
this.videoDetail.videoPathUri + this.videoDetail.videoPath; | |||
}, | |||
download() {}, | |||
}, | |||
created() { | |||
this.videoDetail = this.$route.query.videoDetail; | |||
console.log(this.videoDetail); | |||
}, | |||
}; | |||
</script> | |||
<style lang="scss" scoped> | |||
.video { | |||
position: relative; | |||
padding: 30px; | |||
text-align: center; | |||
.title { | |||
font-size: 18px; | |||
margin-bottom: 20px; | |||
} | |||
video { | |||
width: 80%; | |||
} | |||
img { | |||
position: absolute; | |||
top: 50%; | |||
left: 50%; | |||
transform: translate(-50%, -50%); | |||
} | |||
.desc { | |||
font-size: 16px; | |||
margin-top: 20px; | |||
span { | |||
color: #00ccff; | |||
text-decoration: underline; | |||
} | |||
} | |||
} | |||
.bottomBtn { | |||
display: flex; | |||
justify-content: space-between; | |||
padding: 0 75px; | |||
margin-top: 20px; | |||
margin-bottom: 20px; | |||
div { | |||
width: 100px; | |||
height: 30px; | |||
color: #484848; | |||
line-height: 30px; | |||
text-align: center; | |||
border: 1px solid #484848; | |||
border-radius: 7px; | |||
&.next { | |||
color: #fff; | |||
border: 1px solid #00ccff; | |||
background-color: #00ccff; | |||
} | |||
} | |||
} | |||
</style> |
@@ -0,0 +1,326 @@ | |||
<template> | |||
<div> | |||
<HeadTop /> | |||
<div class="chooseModel"> | |||
<div class="active">选择模板</div> | |||
<div class="active">录入文案</div> | |||
<div class="active">合成视频</div> | |||
</div> | |||
<div class="coverImg"> | |||
<img :src="coverImg" /> | |||
</div> | |||
<div class="backGround"> | |||
<div class="select">请选择视频背景</div> | |||
<div class="backGroundList"> | |||
<div | |||
@click="setIn(1)" | |||
:class="setIndex == 1 ? 'active' : ''" | |||
style="background-color: red" | |||
></div> | |||
<div | |||
@click="setIn(2)" | |||
:class="setIndex == 2 ? 'active' : ''" | |||
style="background-color: orange" | |||
></div> | |||
<div | |||
@click="setIn(3)" | |||
:class="setIndex == 3 ? 'active' : ''" | |||
style="background-color: yellow" | |||
></div> | |||
<div | |||
@click="setIn(4)" | |||
:class="setIndex == 4 ? 'active' : ''" | |||
style="background-color: green" | |||
></div> | |||
<div | |||
@click="setIn(5)" | |||
:class="setIndex == 5 ? 'active' : ''" | |||
style="background-color: aqua" | |||
></div> | |||
<div | |||
@click="setIn(6)" | |||
:class="setIndex == 6 ? 'active' : ''" | |||
style="background-color: blue" | |||
></div> | |||
<div | |||
@click="setIn(7)" | |||
:class="setIndex == 7 ? 'active' : ''" | |||
style="background-color: purple" | |||
></div> | |||
</div> | |||
<div>合成视频剩余时长:3:00</div> | |||
</div> | |||
<div class="bottomBtn"> | |||
<div class="back" @click="back">上一步</div> | |||
<div class="next" @click="submit">合成视频</div> | |||
</div> | |||
<div :class="isShowCover ? 'coverUp active' : 'coverUp'"> | |||
<div class="inside" @click="goMy"> | |||
<img src="../../assets/img/loading.png" alt="" /> | |||
<div class="text">视频合成中,请稍等</div> | |||
</div> | |||
</div> | |||
</div> | |||
</template> | |||
<script> | |||
import Vue from "vue"; | |||
import { Toast } from "vant"; | |||
import baseUrl from "../../api/baseUrl"; | |||
import { mapState, mapActions } from "vuex"; | |||
import HeadTop from "./../../components/common/head.vue"; | |||
Vue.use(Toast); | |||
export default { | |||
components: { | |||
HeadTop, | |||
}, | |||
data() { | |||
return { | |||
isShowCover: false, | |||
show: false, | |||
setIndex: 1, | |||
coverImg: "", | |||
id: "", | |||
timerOver: false, | |||
}; | |||
}, | |||
computed: { | |||
...mapState({ | |||
characters: (state) => state.publicObj.characters, | |||
}), | |||
}, | |||
methods: { | |||
...mapActions(["setCharacters"]), | |||
go(url) { | |||
this.$router.push(url); | |||
}, | |||
setIn(num) { | |||
this.setIndex = num; | |||
}, | |||
back() { | |||
this.$router.back(); | |||
}, | |||
goMy() { | |||
if (this.isShowCover == true) { | |||
this.$router.push("/myPage"); | |||
} | |||
}, | |||
findVideo() { | |||
const AccessToken = localStorage.getItem("AccessToken"); | |||
const data = { | |||
id: this.id, | |||
}; | |||
this.$axios({ | |||
method: "get", | |||
url: `${baseUrl}/api/userVideo/findVideo?id=${this.id}`, | |||
headers: { | |||
"Content-Type": "application/json;charset=UTF-8", | |||
token: AccessToken, | |||
}, | |||
data, | |||
}) | |||
.then((res) => { | |||
if (res.data.code == 1052) { | |||
this.$router.push("/login"); | |||
Toast.fail("登录过期,请重新登录!"); | |||
return; | |||
} | |||
if (res.data.data.videoStatus == 2) { | |||
this.isShowCover = false; | |||
Toast.success("视频生成成功!"); | |||
this.$router.push({ | |||
path: "/downloadVideo", | |||
query: { | |||
videoDetail: res.data.data, | |||
}, | |||
}); | |||
this.timerOver = true; | |||
return; | |||
} else if (res.data.data.videoStatus == 3) { | |||
this.isShowCover = false; | |||
Toast.fail(`视频生成失败!失败原因:${res.data.data.videoMsg}`); | |||
this.timerOver = true; | |||
return; | |||
} | |||
}) | |||
.catch((err) => { | |||
Toast.fail(err.message); | |||
}); | |||
}, | |||
submit() { | |||
const AccessToken = localStorage.getItem("AccessToken"); | |||
const data = { | |||
id: this.id, | |||
}; | |||
this.$axios({ | |||
method: "post", | |||
url: `${baseUrl}/api/userVideo/createVideo`, | |||
headers: { | |||
"Content-Type": "application/json;charset=UTF-8", | |||
token: AccessToken, | |||
}, | |||
data, | |||
}) | |||
.then((res) => { | |||
if (res.data.code == 1052) { | |||
this.$router.push("/login"); | |||
Toast.fail("登录过期,请重新登录!"); | |||
return; | |||
} | |||
if (res.data.code != 200) { | |||
Toast.fail(res.data.message); | |||
} else { | |||
Toast.success("提交成功!"); | |||
setTimeout(() => { | |||
this.isShowCover = true; | |||
}, 2000); | |||
const timer = setInterval(() => { | |||
this.findVideo(); | |||
if (this.timerOver) { | |||
clearInterval(timer); | |||
} | |||
}, 1000); | |||
} | |||
}) | |||
.catch((err) => { | |||
Toast.fail(err.message); | |||
}); | |||
}, | |||
}, | |||
created() { | |||
this.coverImg = this.$route.query.coverImg; | |||
this.id = this.$route.query.id; | |||
}, | |||
}; | |||
</script> | |||
<style lang="scss" scoped> | |||
.chooseModel { | |||
display: flex; | |||
justify-content: space-between; | |||
align-items: center; | |||
width: 350px; | |||
height: 32px; | |||
margin: auto; | |||
margin-top: 15px; | |||
margin-bottom: 15px; | |||
div { | |||
width: 33.33%; | |||
height: 90%; | |||
line-height: 32px; | |||
text-align: center; | |||
border: 1px solid #46464661; | |||
&.active { | |||
background-color: #00ccff; | |||
color: #fff; | |||
} | |||
} | |||
} | |||
.coverImg { | |||
text-align: center; | |||
margin: 25px auto; | |||
img { | |||
width: 270px; | |||
height: 380px; | |||
} | |||
} | |||
.backGround { | |||
padding-left: 10px; | |||
.select { | |||
font-size: 14px; | |||
margin-bottom: 10px; | |||
} | |||
.backGroundList { | |||
display: flex; | |||
overflow-x: auto; | |||
div { | |||
width: 120px; | |||
height: 120px; | |||
margin-right: 10px; | |||
flex-shrink: 0; | |||
&.active { | |||
border: 2px solid #000; | |||
width: 118px; | |||
height: 118px; | |||
transition: all 0.5s; | |||
} | |||
} | |||
// 隐藏滚动条 | |||
&::-webkit-scrollbar { | |||
width: 0 !important; | |||
} | |||
} | |||
} | |||
.bottomBtn { | |||
display: flex; | |||
justify-content: space-between; | |||
padding: 0 75px; | |||
margin-top: 20px; | |||
margin-bottom: 20px; | |||
div { | |||
width: 100px; | |||
height: 30px; | |||
color: #484848; | |||
line-height: 30px; | |||
text-align: center; | |||
border: 1px solid #484848; | |||
border-radius: 7px; | |||
&.next { | |||
color: #fff; | |||
border: 1px solid #00ccff; | |||
background-color: #00ccff; | |||
} | |||
} | |||
} | |||
@keyframes rotation { | |||
from { | |||
-webkit-transform: rotate(0deg); | |||
} | |||
to { | |||
-webkit-transform: rotate(360deg); | |||
} | |||
} | |||
.coverUp { | |||
position: fixed; | |||
top: 0; | |||
left: 0; | |||
opacity: 0; | |||
text-align: center; | |||
transition: all 0.3s; | |||
.inside { | |||
position: absolute; | |||
top: 50%; | |||
left: 50%; | |||
transform: translate(-50%, -50%); | |||
img { | |||
width: 80px; | |||
height: 80px; | |||
animation: rotation 2s linear infinite; | |||
} | |||
.text { | |||
font-size: 18px; | |||
color: #fff; | |||
} | |||
} | |||
&.active { | |||
width: 100%; | |||
height: 100%; | |||
background-color: #00000077; | |||
z-index: 99999; | |||
opacity: 1; | |||
} | |||
} | |||
</style> |
@@ -15,6 +15,7 @@ | |||
<div class="voice">语音输入</div> | |||
</div> | |||
<div class="textarea"> | |||
<input v-model="title" type="text" placeholder="请输入标题" /> | |||
<textarea | |||
v-model="paperwork" | |||
cols="55" | |||
@@ -33,10 +34,10 @@ | |||
<script> | |||
import Vue from "vue"; | |||
import { mapState, mapActions } from "vuex"; | |||
import HeadTop from "./../../components/common/head.vue"; | |||
import { Toast } from "vant"; | |||
import baseUrl from "../../api/baseUrl"; | |||
import { mapState, mapActions } from "vuex"; | |||
import HeadTop from "./../../components/common/head.vue"; | |||
Vue.use(Toast); | |||
export default { | |||
@@ -46,7 +47,9 @@ export default { | |||
data() { | |||
return { | |||
paperwork: "", | |||
title: "", | |||
modelDetail: {}, | |||
id: "", | |||
}; | |||
}, | |||
computed: { | |||
@@ -65,18 +68,58 @@ export default { | |||
back() { | |||
this.$router.back(); | |||
}, | |||
getDetailById(id) { | |||
const AccessToken = localStorage.getItem("AccessToken"); | |||
this.$axios({ | |||
method: "get", | |||
url: `${baseUrl}/api/userVideo/findById?id=${id}`, | |||
headers: { | |||
"Content-Type": "application/json;charset=UTF-8", | |||
token: AccessToken, | |||
}, | |||
}) | |||
.then((res) => { | |||
if (res.data.code == 1052) { | |||
this.$router.push("/login"); | |||
Toast.fail("登录过期,请重新登录!"); | |||
return; | |||
} | |||
this.modelDetail = res.data.data.personMould; | |||
}) | |||
.catch((err) => { | |||
Toast.fail(err.message); | |||
}); | |||
}, | |||
goNext() { | |||
const AccessToken = localStorage.getItem("AccessToken"); | |||
const data = { | |||
// id: "", | |||
type: 1, | |||
personMouldId: this.modelDetail.id, //模板id | |||
personMouldPath: this.modelDetail.mouldPath, //模板标识 | |||
paperwork: this.paperwork, | |||
title: this.modelDetail.title, | |||
// voiceMouldId: "", | |||
// voiceMouldId: "", | |||
}; | |||
let data = {}; | |||
if (this.id) { | |||
data = { | |||
id: this.id, | |||
type: 1, | |||
personMouldId: this.modelDetail.id, //模板id | |||
personMouldPath: this.modelDetail.mouldPath, //模板标识 | |||
paperwork: this.paperwork, | |||
title: this.modelDetail.title, | |||
// voiceMouldId: "", | |||
// voiceMouldId: "", | |||
}; | |||
} else { | |||
data = { | |||
// id: "", | |||
type: 1, | |||
personMouldId: this.modelDetail.id, //模板id | |||
personMouldPath: this.modelDetail.mouldPath, //模板标识 | |||
paperwork: this.paperwork, | |||
title: this.modelDetail.title, | |||
// voiceMouldId: "", | |||
// voiceMouldId: "", | |||
}; | |||
} | |||
this.$axios({ | |||
method: "post", | |||
url: `${baseUrl}/api/userVideo/saveOrUpdate`, | |||
@@ -90,7 +133,15 @@ export default { | |||
if (res.data.code == 1052) { | |||
this.$router.push("/login"); | |||
Toast.fail("登录过期,请重新登录!"); | |||
return; | |||
} | |||
this.$router.push({ | |||
path: "/generateVideo", | |||
query: { | |||
coverImg: this.modelDetail.coverImg, | |||
id: res.data.data.id, | |||
}, | |||
}); | |||
}) | |||
.catch((err) => { | |||
Toast.fail(err.message); | |||
@@ -98,7 +149,12 @@ export default { | |||
}, | |||
}, | |||
created() { | |||
this.modelDetail = this.$route.query.modelDetail; | |||
this.id = this.$route.query.id; | |||
if (this.id) { | |||
this.getDetailById(this.id); | |||
} else { | |||
this.modelDetail = this.$route.query.modelDetail; | |||
} | |||
}, | |||
}; | |||
</script> | |||
@@ -166,6 +222,11 @@ export default { | |||
position: relative; | |||
text-align: center; | |||
margin-bottom: 60px; | |||
input { | |||
height: 20px; | |||
border: 1px solid #000; | |||
margin-bottom: 15px; | |||
} | |||
textarea { | |||
border: 1px solid #00000080; | |||
} | |||
@@ -207,4 +268,7 @@ export default { | |||
} | |||
} | |||
} | |||
.van-popup { | |||
background-color: #ffffff00 !important; | |||
} | |||
</style> |
@@ -22,7 +22,7 @@ | |||
<span class="selectSound" @click="goSelectSound">更换声音</span> | |||
</div> | |||
<div class="bottomBtn"> | |||
<div class="set">高级设置</div> | |||
<div class="set" @click="back">上一步</div> | |||
<div class="next" @click="goNext">下一步</div> | |||
</div> | |||
</div> | |||
@@ -60,6 +60,10 @@ export default { | |||
this.$router.push(url); | |||
}, | |||
back() { | |||
this.$router.back(); | |||
}, | |||
getSex(num) { | |||
if (num == 1) { | |||
return "男"; | |||
@@ -86,6 +90,7 @@ export default { | |||
if (res.data.code == 1052) { | |||
this.$router.push("/login"); | |||
Toast.fail("登录过期,请重新登录!"); | |||
return; | |||
} | |||
this.modelDetail = res.data.data; | |||
}) | |||
@@ -116,6 +121,7 @@ export default { | |||
if (res.data.code == 1052) { | |||
this.$router.push("/login"); | |||
Toast.fail("登录过期,请重新登录!"); | |||
return; | |||
} | |||
this.$router.push({ | |||
path: "/getPaper", | |||
@@ -81,6 +81,7 @@ export default { | |||
if (res.data.code == 1052) { | |||
this.$router.push("/login"); | |||
Toast.fail("登录过期,请重新登录!"); | |||
return; | |||
} | |||
this.soundList = res.data.data.list; | |||
}) | |||
@@ -1,47 +1,42 @@ | |||
<template> | |||
<div class="page"> | |||
<HeadTop /> | |||
<img class="showIMG" src="../../assets/img/testIMG.png" alt="" /> | |||
<img class="showIMG" src="../../assets/img/BG@2x.png" alt="" /> | |||
<div class="item"> | |||
<div class="title">我的视频作品</div> | |||
<div class="itemList"> | |||
<div class="videoModel"> | |||
<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/imgPrv.png" /> | |||
<video :src="item.videoPathUri + item.videoPath" /> | |||
</div> | |||
<div class="videoInfo"> | |||
<div class="videoName"> | |||
视频名称视频名称视频名称视频名称视频名称视频名称 | |||
{{ item.title || "暂无" }} | |||
</div> | |||
<div class="createTime">创建时间:2022-10-18 12:13:14</div> | |||
</div> | |||
</div> | |||
<div class="videoModel"> | |||
<div class="videoPrv"> | |||
<img src="../../assets/img/imgPrv.png" /> | |||
</div> | |||
<div class="videoInfo"> | |||
<div class="videoName"> | |||
视频名称视频名称视频名称视频名称视频名称视频名称 | |||
<div class="createTime"> | |||
创建时间:{{ changeTime(item.createDate, "YYYY-MM-DD hh:mm:ss") }} | |||
</div> | |||
<div class="createTime">创建时间:2022-10-18 12:13:14</div> | |||
</div> | |||
</div> | |||
<div class="videoModel"> | |||
<div class="videoPrv"> | |||
<img src="../../assets/img/imgPrv.png" /> | |||
</div> | |||
<div class="videoInfo"> | |||
<div class="videoName"> | |||
视频名称视频名称视频名称视频名称视频名称视频名称 | |||
</div> | |||
<div class="createTime">创建时间:2022-10-18 12:13:14</div> | |||
</div> | |||
<div v-if="item.videoStatus == 0" class="tag text">草稿</div> | |||
<div v-if="item.videoStatus == 1" class="tag generating">生成中</div> | |||
<div v-if="item.videoStatus == 2" class="tag finish">已完成</div> | |||
<div v-if="item.videoStatus == 3" class="tag fail">失败</div> | |||
</div> | |||
<div v-if="videoList.length <= 0" class="noWork">暂无作品</div> | |||
</div> | |||
</div> | |||
<van-pagination | |||
v-model="currentPage" | |||
:total-items="total" | |||
:items-per-page="3" | |||
@change="pageChange" | |||
/> | |||
<div class="goAdd" @click="goCreateNew">+ 创作新作品</div> | |||
</div> | |||
</template> | |||
@@ -52,6 +47,7 @@ import HeadTop from "./../../components/common/head.vue"; | |||
import { mapState, mapActions } from "vuex"; | |||
import { Toast } from "vant"; | |||
import baseUrl from "../../api/baseUrl"; | |||
import timestampToTime from "../../utils/timestampToTime"; | |||
Vue.use(Toast); | |||
export default { | |||
@@ -59,7 +55,11 @@ export default { | |||
HeadTop, | |||
}, | |||
data() { | |||
return {}; | |||
return { | |||
videoList: [], | |||
currentPage: 1, | |||
total: "", | |||
}; | |||
}, | |||
computed: { | |||
...mapState({ | |||
@@ -73,21 +73,57 @@ export default { | |||
go(url) { | |||
this.$router.push(url); | |||
}, | |||
getVideoList() { | |||
changeTime(timestamp, form) { | |||
return timestampToTime(timestamp, form); | |||
}, | |||
pageChange() { | |||
this.getVideoList(this.currentPage); | |||
}, | |||
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) { | |||
this.$router.push({ | |||
path: "/downloadVideo", | |||
query: { | |||
videoDetail: item, | |||
}, | |||
}); | |||
} else if (status == 3) { | |||
} | |||
}, | |||
getVideoList(pageNum) { | |||
const AccessToken = localStorage.getItem("AccessToken"); | |||
this.$axios({ | |||
method: "get", | |||
url: `${baseUrl}/api/userVideo/list?pageNum=1&pageSize=3`, | |||
url: `${baseUrl}/api/userVideo/list?pageNum=${pageNum}&pageSize=3`, | |||
headers: { | |||
"Content-Type": "application/json;charset=UTF-8", | |||
token: AccessToken, | |||
}, | |||
}) | |||
.then((res) => { | |||
console.log(res.data); | |||
if (res.data.code == 1052) { | |||
this.$router.push("/login"); | |||
Toast.fail("登录过期,请重新登录!"); | |||
return; | |||
} | |||
this.videoList = res.data.data.list; | |||
this.total = res.data.data.total; | |||
}) | |||
.catch((err) => { | |||
Toast.fail(err.message); | |||
@@ -99,7 +135,7 @@ export default { | |||
}, | |||
}, | |||
created() { | |||
this.getVideoList(); | |||
this.getVideoList(1); | |||
}, | |||
}; | |||
</script> | |||
@@ -133,6 +169,9 @@ export default { | |||
} | |||
} | |||
} | |||
.showIMG { | |||
width: 100%; | |||
} | |||
.item { | |||
padding: 15px; | |||
.title { | |||
@@ -141,11 +180,20 @@ export default { | |||
} | |||
.itemList { | |||
.videoModel { | |||
position: relative; | |||
display: flex; | |||
justify-content: space-between; | |||
margin-bottom: 20px; | |||
margin-bottom: 25px; | |||
border: 1px solid #0000003a; | |||
border-radius: 5px; | |||
padding: 25px; | |||
.videoPrv { | |||
width: 320px; | |||
width: 100px; | |||
height: 100px; | |||
video { | |||
width: 100%; | |||
height: 100%; | |||
} | |||
} | |||
.videoInfo { | |||
display: flex; | |||
@@ -159,12 +207,38 @@ export default { | |||
font-size: 11px; | |||
} | |||
} | |||
.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 { | |||
font-size: 20px; | |||
text-align: center; | |||
} | |||
} | |||
} | |||
.goAdd { | |||
position: fixed; | |||
bottom: 50px; | |||
bottom: 30px; | |||
left: 50%; | |||
width: 300px; | |||
height: 30px; | |||