@@ -621,6 +621,7 @@ export default { | |||||
if (res.data.code == 1052) { | if (res.data.code == 1052) { | ||||
this.$router.push("/login"); | this.$router.push("/login"); | ||||
Toast.fail("登录过期,请重新登录!"); | Toast.fail("登录过期,请重新登录!"); | ||||
return; | |||||
} else { | } else { | ||||
this.$router.push("/myPage"); | this.$router.push("/myPage"); | ||||
} | } | ||||
@@ -3,6 +3,7 @@ import App from './App.vue' | |||||
import './registerServiceWorker' | import './registerServiceWorker' | ||||
import router from './router' | import router from './router' | ||||
import store from './store' | import store from './store' | ||||
import Vant from 'vant'; | |||||
import 'vant/lib/index.css' | import 'vant/lib/index.css' | ||||
// 引入lib-flexible做rem适配 | // 引入lib-flexible做rem适配 | ||||
import 'lib-flexible' | import 'lib-flexible' | ||||
@@ -11,6 +12,7 @@ import ElementUI from 'element-ui'; //引入js | |||||
import 'element-ui/lib/theme-chalk/index.css';//引入css | import 'element-ui/lib/theme-chalk/index.css';//引入css | ||||
Vue.use(ElementUI); | Vue.use(ElementUI); | ||||
Vue.use(Vant); | |||||
@@ -19,57 +19,61 @@ const routes = [ | |||||
{ | { | ||||
path: '/aboutUe', | path: '/aboutUe', | ||||
name: 'aboutUe', | name: 'aboutUe', | ||||
// component: Home | |||||
component: () => import("../components/aboutUe/aboutUe"), | component: () => import("../components/aboutUe/aboutUe"), | ||||
}, | }, | ||||
{ | { | ||||
path: '/styleAdd', | path: '/styleAdd', | ||||
name: 'styleAdd', | name: 'styleAdd', | ||||
// component: Home | |||||
component: () => import("../components/styleAdd/styleAdd"), | component: () => import("../components/styleAdd/styleAdd"), | ||||
}, | }, | ||||
// 登录 | // 登录 | ||||
{ | { | ||||
path: '/login', | path: '/login', | ||||
name: 'login', | name: 'login', | ||||
// component: Home | |||||
component: () => import("../views/login/login"), | component: () => import("../views/login/login"), | ||||
}, | }, | ||||
// 创作中心首页 | // 创作中心首页 | ||||
{ | { | ||||
path: '/myPage', | path: '/myPage', | ||||
name: 'myPage', | name: 'myPage', | ||||
// component: Home | |||||
component: () => import("../views/myPage/myPage"), | component: () => import("../views/myPage/myPage"), | ||||
}, | }, | ||||
// 选择模板 | // 选择模板 | ||||
{ | { | ||||
path: '/chooseModel', | path: '/chooseModel', | ||||
name: 'chooseModel', | name: 'chooseModel', | ||||
// component: Home | |||||
component: () => import("../views/model/chooseModel"), | component: () => import("../views/model/chooseModel"), | ||||
}, | }, | ||||
// 模板详情 | // 模板详情 | ||||
{ | { | ||||
path: '/modelDetail', | path: '/modelDetail', | ||||
name: 'modelDetail', | name: 'modelDetail', | ||||
// component: Home | |||||
component: () => import("../views/model/modelDetail"), | component: () => import("../views/model/modelDetail"), | ||||
}, | }, | ||||
// 选择语音 | // 选择语音 | ||||
{ | { | ||||
path: '/selectSound', | path: '/selectSound', | ||||
name: 'selectSound', | name: 'selectSound', | ||||
// component: Home | |||||
component: () => import("../views/model/selectSound"), | component: () => import("../views/model/selectSound"), | ||||
}, | }, | ||||
// 录入文案 | // 录入文案 | ||||
{ | { | ||||
path: '/getPaper', | path: '/getPaper', | ||||
name: 'getPaper', | name: 'getPaper', | ||||
// component: Home | |||||
component: () => import("../views/model/getPaper"), | 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({ | 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) { | if (res.data.code == 1052) { | ||||
this.$router.push("/login"); | this.$router.push("/login"); | ||||
Toast.fail("登录过期,请重新登录!"); | Toast.fail("登录过期,请重新登录!"); | ||||
return; | |||||
} | } | ||||
this.modeList = res.data.data.list; | 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 class="voice">语音输入</div> | ||||
</div> | </div> | ||||
<div class="textarea"> | <div class="textarea"> | ||||
<input v-model="title" type="text" placeholder="请输入标题" /> | |||||
<textarea | <textarea | ||||
v-model="paperwork" | v-model="paperwork" | ||||
cols="55" | cols="55" | ||||
@@ -33,10 +34,10 @@ | |||||
<script> | <script> | ||||
import Vue from "vue"; | import Vue from "vue"; | ||||
import { mapState, mapActions } from "vuex"; | |||||
import HeadTop from "./../../components/common/head.vue"; | |||||
import { Toast } from "vant"; | import { Toast } from "vant"; | ||||
import baseUrl from "../../api/baseUrl"; | import baseUrl from "../../api/baseUrl"; | ||||
import { mapState, mapActions } from "vuex"; | |||||
import HeadTop from "./../../components/common/head.vue"; | |||||
Vue.use(Toast); | Vue.use(Toast); | ||||
export default { | export default { | ||||
@@ -46,7 +47,9 @@ export default { | |||||
data() { | data() { | ||||
return { | return { | ||||
paperwork: "", | paperwork: "", | ||||
title: "", | |||||
modelDetail: {}, | modelDetail: {}, | ||||
id: "", | |||||
}; | }; | ||||
}, | }, | ||||
computed: { | computed: { | ||||
@@ -65,18 +68,58 @@ export default { | |||||
back() { | back() { | ||||
this.$router.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() { | goNext() { | ||||
const AccessToken = localStorage.getItem("AccessToken"); | 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({ | this.$axios({ | ||||
method: "post", | method: "post", | ||||
url: `${baseUrl}/api/userVideo/saveOrUpdate`, | url: `${baseUrl}/api/userVideo/saveOrUpdate`, | ||||
@@ -90,7 +133,15 @@ export default { | |||||
if (res.data.code == 1052) { | if (res.data.code == 1052) { | ||||
this.$router.push("/login"); | this.$router.push("/login"); | ||||
Toast.fail("登录过期,请重新登录!"); | Toast.fail("登录过期,请重新登录!"); | ||||
return; | |||||
} | } | ||||
this.$router.push({ | |||||
path: "/generateVideo", | |||||
query: { | |||||
coverImg: this.modelDetail.coverImg, | |||||
id: res.data.data.id, | |||||
}, | |||||
}); | |||||
}) | }) | ||||
.catch((err) => { | .catch((err) => { | ||||
Toast.fail(err.message); | Toast.fail(err.message); | ||||
@@ -98,7 +149,12 @@ export default { | |||||
}, | }, | ||||
}, | }, | ||||
created() { | 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> | </script> | ||||
@@ -166,6 +222,11 @@ export default { | |||||
position: relative; | position: relative; | ||||
text-align: center; | text-align: center; | ||||
margin-bottom: 60px; | margin-bottom: 60px; | ||||
input { | |||||
height: 20px; | |||||
border: 1px solid #000; | |||||
margin-bottom: 15px; | |||||
} | |||||
textarea { | textarea { | ||||
border: 1px solid #00000080; | border: 1px solid #00000080; | ||||
} | } | ||||
@@ -207,4 +268,7 @@ export default { | |||||
} | } | ||||
} | } | ||||
} | } | ||||
.van-popup { | |||||
background-color: #ffffff00 !important; | |||||
} | |||||
</style> | </style> |
@@ -22,7 +22,7 @@ | |||||
<span class="selectSound" @click="goSelectSound">更换声音</span> | <span class="selectSound" @click="goSelectSound">更换声音</span> | ||||
</div> | </div> | ||||
<div class="bottomBtn"> | <div class="bottomBtn"> | ||||
<div class="set">高级设置</div> | |||||
<div class="set" @click="back">上一步</div> | |||||
<div class="next" @click="goNext">下一步</div> | <div class="next" @click="goNext">下一步</div> | ||||
</div> | </div> | ||||
</div> | </div> | ||||
@@ -60,6 +60,10 @@ export default { | |||||
this.$router.push(url); | this.$router.push(url); | ||||
}, | }, | ||||
back() { | |||||
this.$router.back(); | |||||
}, | |||||
getSex(num) { | getSex(num) { | ||||
if (num == 1) { | if (num == 1) { | ||||
return "男"; | return "男"; | ||||
@@ -86,6 +90,7 @@ export default { | |||||
if (res.data.code == 1052) { | if (res.data.code == 1052) { | ||||
this.$router.push("/login"); | this.$router.push("/login"); | ||||
Toast.fail("登录过期,请重新登录!"); | Toast.fail("登录过期,请重新登录!"); | ||||
return; | |||||
} | } | ||||
this.modelDetail = res.data.data; | this.modelDetail = res.data.data; | ||||
}) | }) | ||||
@@ -116,6 +121,7 @@ export default { | |||||
if (res.data.code == 1052) { | if (res.data.code == 1052) { | ||||
this.$router.push("/login"); | this.$router.push("/login"); | ||||
Toast.fail("登录过期,请重新登录!"); | Toast.fail("登录过期,请重新登录!"); | ||||
return; | |||||
} | } | ||||
this.$router.push({ | this.$router.push({ | ||||
path: "/getPaper", | path: "/getPaper", | ||||
@@ -81,6 +81,7 @@ export default { | |||||
if (res.data.code == 1052) { | if (res.data.code == 1052) { | ||||
this.$router.push("/login"); | this.$router.push("/login"); | ||||
Toast.fail("登录过期,请重新登录!"); | Toast.fail("登录过期,请重新登录!"); | ||||
return; | |||||
} | } | ||||
this.soundList = res.data.data.list; | this.soundList = res.data.data.list; | ||||
}) | }) | ||||
@@ -1,47 +1,42 @@ | |||||
<template> | <template> | ||||
<div class="page"> | <div class="page"> | ||||
<HeadTop /> | <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="item"> | ||||
<div class="title">我的视频作品</div> | <div class="title">我的视频作品</div> | ||||
<div class="itemList"> | <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"> | <div class="videoPrv"> | ||||
<img src="../../assets/img/imgPrv.png" /> | |||||
<video :src="item.videoPathUri + item.videoPath" /> | |||||
</div> | </div> | ||||
<div class="videoInfo"> | <div class="videoInfo"> | ||||
<div class="videoName"> | <div class="videoName"> | ||||
视频名称视频名称视频名称视频名称视频名称视频名称 | |||||
{{ item.title || "暂无" }} | |||||
</div> | </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> | ||||
<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> | ||||
<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> | ||||
<div v-if="videoList.length <= 0" class="noWork">暂无作品</div> | |||||
</div> | </div> | ||||
</div> | </div> | ||||
<van-pagination | |||||
v-model="currentPage" | |||||
:total-items="total" | |||||
:items-per-page="3" | |||||
@change="pageChange" | |||||
/> | |||||
<div class="goAdd" @click="goCreateNew">+ 创作新作品</div> | <div class="goAdd" @click="goCreateNew">+ 创作新作品</div> | ||||
</div> | </div> | ||||
</template> | </template> | ||||
@@ -52,6 +47,7 @@ import HeadTop from "./../../components/common/head.vue"; | |||||
import { mapState, mapActions } from "vuex"; | import { mapState, mapActions } from "vuex"; | ||||
import { Toast } from "vant"; | import { Toast } from "vant"; | ||||
import baseUrl from "../../api/baseUrl"; | import baseUrl from "../../api/baseUrl"; | ||||
import timestampToTime from "../../utils/timestampToTime"; | |||||
Vue.use(Toast); | Vue.use(Toast); | ||||
export default { | export default { | ||||
@@ -59,7 +55,11 @@ export default { | |||||
HeadTop, | HeadTop, | ||||
}, | }, | ||||
data() { | data() { | ||||
return {}; | |||||
return { | |||||
videoList: [], | |||||
currentPage: 1, | |||||
total: "", | |||||
}; | |||||
}, | }, | ||||
computed: { | computed: { | ||||
...mapState({ | ...mapState({ | ||||
@@ -73,21 +73,57 @@ export default { | |||||
go(url) { | go(url) { | ||||
this.$router.push(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"); | const AccessToken = localStorage.getItem("AccessToken"); | ||||
this.$axios({ | this.$axios({ | ||||
method: "get", | method: "get", | ||||
url: `${baseUrl}/api/userVideo/list?pageNum=1&pageSize=3`, | |||||
url: `${baseUrl}/api/userVideo/list?pageNum=${pageNum}&pageSize=3`, | |||||
headers: { | headers: { | ||||
"Content-Type": "application/json;charset=UTF-8", | "Content-Type": "application/json;charset=UTF-8", | ||||
token: AccessToken, | token: AccessToken, | ||||
}, | }, | ||||
}) | }) | ||||
.then((res) => { | .then((res) => { | ||||
console.log(res.data); | |||||
if (res.data.code == 1052) { | if (res.data.code == 1052) { | ||||
this.$router.push("/login"); | this.$router.push("/login"); | ||||
Toast.fail("登录过期,请重新登录!"); | Toast.fail("登录过期,请重新登录!"); | ||||
return; | |||||
} | } | ||||
this.videoList = res.data.data.list; | |||||
this.total = res.data.data.total; | |||||
}) | }) | ||||
.catch((err) => { | .catch((err) => { | ||||
Toast.fail(err.message); | Toast.fail(err.message); | ||||
@@ -99,7 +135,7 @@ export default { | |||||
}, | }, | ||||
}, | }, | ||||
created() { | created() { | ||||
this.getVideoList(); | |||||
this.getVideoList(1); | |||||
}, | }, | ||||
}; | }; | ||||
</script> | </script> | ||||
@@ -133,6 +169,9 @@ export default { | |||||
} | } | ||||
} | } | ||||
} | } | ||||
.showIMG { | |||||
width: 100%; | |||||
} | |||||
.item { | .item { | ||||
padding: 15px; | padding: 15px; | ||||
.title { | .title { | ||||
@@ -141,11 +180,20 @@ export default { | |||||
} | } | ||||
.itemList { | .itemList { | ||||
.videoModel { | .videoModel { | ||||
position: relative; | |||||
display: flex; | display: flex; | ||||
justify-content: space-between; | justify-content: space-between; | ||||
margin-bottom: 20px; | |||||
margin-bottom: 25px; | |||||
border: 1px solid #0000003a; | |||||
border-radius: 5px; | |||||
padding: 25px; | |||||
.videoPrv { | .videoPrv { | ||||
width: 320px; | |||||
width: 100px; | |||||
height: 100px; | |||||
video { | |||||
width: 100%; | |||||
height: 100%; | |||||
} | |||||
} | } | ||||
.videoInfo { | .videoInfo { | ||||
display: flex; | display: flex; | ||||
@@ -159,12 +207,38 @@ export default { | |||||
font-size: 11px; | 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 { | .goAdd { | ||||
position: fixed; | position: fixed; | ||||
bottom: 50px; | |||||
bottom: 30px; | |||||
left: 50%; | left: 50%; | ||||
width: 300px; | width: 300px; | ||||
height: 30px; | height: 30px; | ||||