| @@ -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; | ||||