| @@ -1,7 +1,6 @@ | |||||
| .DS_Store | .DS_Store | ||||
| node_modules | node_modules | ||||
| /dist | |||||
| dist | |||||
| # local env files | # local env files | ||||
| .env.local | .env.local | ||||
| @@ -25,7 +25,6 @@ | |||||
| "@vue/cli-plugin-vuex": "~4.5.13", | "@vue/cli-plugin-vuex": "~4.5.13", | ||||
| "@vue/cli-service": "~4.5.13", | "@vue/cli-service": "~4.5.13", | ||||
| "node-sass": "^4.14.1", | "node-sass": "^4.14.1", | ||||
| "uglifyjs-webpack-plugin": "^2.2.0", | |||||
| "vue-template-compiler": "^2.6.11" | "vue-template-compiler": "^2.6.11" | ||||
| } | } | ||||
| } | |||||
| } | |||||
| @@ -1,18 +1,21 @@ | |||||
| <!DOCTYPE html> | <!DOCTYPE html> | ||||
| <html lang=""> | <html lang=""> | ||||
| <head> | |||||
| <meta charset="utf-8"> | |||||
| <meta http-equiv="X-UA-Compatible" content="IE=edge"> | |||||
| <!-- <meta name="viewport" content="width=device-width,initial-scale=1.0"> --> | |||||
| <link rel="icon" href="<%= BASE_URL %>favicon.ico"> | |||||
| <title><%= htmlWebpackPlugin.options.title %></title> | |||||
| </head> | |||||
| <body> | |||||
| <noscript> | |||||
| <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong> | |||||
| </noscript> | |||||
| <div id="app"></div> | |||||
| <!-- built files will be auto injected --> | |||||
| </body> | |||||
| </html> | |||||
| <head> | |||||
| <meta charset="utf-8"> | |||||
| <meta http-equiv="X-UA-Compatible" content="IE=edge"> | |||||
| <!-- <meta name="viewport" content="width=device-width,initial-scale=1.0"> --> | |||||
| <link rel="icon" href="<%= BASE_URL %>favicon.ico"> | |||||
| <link rel="stylesheet" href="https://g.alicdn.com/de/prismplayer/2.13.2/skins/default/aliplayer-min.css"> | |||||
| <script charset="utf-8" type="text/javascript" | |||||
| src="https://g.alicdn.com/de/prismplayer/2.13.2/aliplayer-min.js"></script> | |||||
| <title> | |||||
| <%= htmlWebpackPlugin.options.title %> | |||||
| </title> | |||||
| </head> | |||||
| <body> | |||||
| <div id="app"></div> | |||||
| </body> | |||||
| </html> | |||||
| @@ -1,8 +1,6 @@ | |||||
| <template> | <template> | ||||
| <div id="app"> | <div id="app"> | ||||
| <transition name="app" mode="out-in"> | |||||
| <router-view></router-view> | |||||
| </transition> | |||||
| <router-view></router-view> | |||||
| <tail /> | <tail /> | ||||
| </div> | </div> | ||||
| </template> | </template> | ||||
| @@ -18,6 +16,7 @@ export default { | |||||
| return {}; | return {}; | ||||
| }, | }, | ||||
| }; | }; | ||||
| // "uglifyjs-webpack-plugin": "^2.2.0", | |||||
| </script> | </script> | ||||
| <style lang="scss"> | <style lang="scss"> | ||||
| @@ -26,6 +25,7 @@ p { | |||||
| margin: 0 0; | margin: 0 0; | ||||
| padding: 0 0; | padding: 0 0; | ||||
| } | } | ||||
| input { | input { | ||||
| background: none; | background: none; | ||||
| outline: none; | outline: none; | ||||
| @@ -0,0 +1,13 @@ | |||||
| import request from '@/utils/request' | |||||
| /** | |||||
| * @description 通过视频id获取视频详情 | |||||
| * @param {number | string} id | |||||
| * @returns data | |||||
| */ | |||||
| export function doGetVideoDetialById(id) { | |||||
| return request({ | |||||
| url: `/api/userVideo/videoDetial?videoId=${id}`, | |||||
| method: 'get', | |||||
| }) | |||||
| } | |||||
| @@ -12,3 +12,15 @@ export function getVideoList(pageNum, pageSize) { | |||||
| }) | }) | ||||
| } | } | ||||
| /** | |||||
| * @description 通过视频id获取视频详情 | |||||
| * @param {number | string} id | |||||
| * @returns data | |||||
| */ | |||||
| export function doGetVideoDetialById(id) { | |||||
| return request({ | |||||
| url: `/api/userVideo/videoDetial?videoId=${id}`, | |||||
| method: 'get', | |||||
| }) | |||||
| } | |||||
| @@ -1,5 +1,5 @@ | |||||
| <template> | <template> | ||||
| <div class="page"> | |||||
| <div class="pages"> | |||||
| <div class="logoBox"> | <div class="logoBox"> | ||||
| <img src="../../assets/img/logoh.png" class="logo" @click="go('/')" /> | <img src="../../assets/img/logoh.png" class="logo" @click="go('/')" /> | ||||
| <div class="userInfo"> | <div class="userInfo"> | ||||
| @@ -71,7 +71,11 @@ export default { | |||||
| </script> | </script> | ||||
| <style lang="scss" scoped> | <style lang="scss" scoped> | ||||
| .page { | |||||
| .pages { | |||||
| position: sticky; | |||||
| top: 0; | |||||
| background-color: #fff; | |||||
| z-index: 99; | |||||
| .logoBox { | .logoBox { | ||||
| display: flex; | display: flex; | ||||
| justify-content: space-between; | justify-content: space-between; | ||||
| @@ -1,5 +1,5 @@ | |||||
| <template> | <template> | ||||
| <div class="Box"> | |||||
| <div :class="inPage ? 'Box active' : 'Box'"> | |||||
| <div id="top"></div> | <div id="top"></div> | ||||
| <top /> | <top /> | ||||
| <div class="topBox"> | <div class="topBox"> | ||||
| @@ -411,6 +411,7 @@ export default { | |||||
| }, | }, | ||||
| data() { | data() { | ||||
| return { | return { | ||||
| inPage: false, | |||||
| userName: "", | userName: "", | ||||
| phone: "", | phone: "", | ||||
| email: "", | email: "", | ||||
| @@ -730,6 +731,7 @@ export default { | |||||
| el: ".swiper-scrollbar", | el: ".swiper-scrollbar", | ||||
| }, | }, | ||||
| }); | }); | ||||
| this.inPage = true; | |||||
| }, | }, | ||||
| }; | }; | ||||
| </script> | </script> | ||||
| @@ -742,6 +744,7 @@ export default { | |||||
| transform: translateY(0); | transform: translateY(0); | ||||
| } | } | ||||
| } | } | ||||
| .contentBox { | .contentBox { | ||||
| width: 90%; | width: 90%; | ||||
| background-color: rgba(0, 0, 0, 0.5); | background-color: rgba(0, 0, 0, 0.5); | ||||
| @@ -816,6 +819,13 @@ export default { | |||||
| .Box { | .Box { | ||||
| width: 100%; | width: 100%; | ||||
| overflow: hidden; | overflow: hidden; | ||||
| transform: translateX(100%); | |||||
| opacity: 0; | |||||
| transition: all 0.3s; | |||||
| &.active { | |||||
| opacity: 1; | |||||
| transform: translateX(0); | |||||
| } | |||||
| } | } | ||||
| .topBox { | .topBox { | ||||
| width: 100%; | width: 100%; | ||||
| @@ -12,9 +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); | |||||
| Vue.use(Vant) | |||||
| Vue.config.productionTip = false | Vue.config.productionTip = false | ||||
| Vue.prototype.$axios = axios | Vue.prototype.$axios = axios | ||||
| @@ -30,19 +30,19 @@ request.interceptors.request.use( | |||||
| // 响应拦截器 | // 响应拦截器 | ||||
| request.interceptors.response.use( | request.interceptors.response.use( | ||||
| function (response) { | function (response) { | ||||
| let code = response.data.code | |||||
| // 弹出错误 | // 弹出错误 | ||||
| if (response.data.code != 200) { | |||||
| if (code != 200) { | |||||
| // 当token过期或损坏时 | // 当token过期或损坏时 | ||||
| if (response.data.code == 1052) { | |||||
| if (code == 1052) { | |||||
| router.push("/login"); | router.push("/login"); | ||||
| Toast.fail("登录过期,请重新登录!"); | Toast.fail("登录过期,请重新登录!"); | ||||
| return | return | ||||
| } else if (response.data.code == 404) { | |||||
| Toast.fail("网络异常,请稍后再试"); | |||||
| return Promise.reject(response.data) | |||||
| } else if (response.data.code == 500) { | |||||
| } else if (code == 1053) { | |||||
| router.push("/login"); | |||||
| Toast.fail("请您先登录!"); | |||||
| return | |||||
| } else if (code == 500) { | |||||
| Toast.fail("系统异常,请稍后再试"); | Toast.fail("系统异常,请稍后再试"); | ||||
| return Promise.reject(response.data) | return Promise.reject(response.data) | ||||
| @@ -1,5 +1,5 @@ | |||||
| <template> | <template> | ||||
| <div class="page"> | |||||
| <div :class="inPage ? 'page active' : 'page'"> | |||||
| <div id="top"></div> | <div id="top"></div> | ||||
| <div class="logoBox" @click="go('/')"> | <div class="logoBox" @click="go('/')"> | ||||
| <img src="../../assets/img/logoh.png" alt class="logo" /> | <img src="../../assets/img/logoh.png" alt class="logo" /> | ||||
| @@ -117,6 +117,7 @@ export default { | |||||
| data() { | data() { | ||||
| return { | return { | ||||
| codeInfo: "获取验证码", | codeInfo: "获取验证码", | ||||
| inPage: false, | |||||
| loginType: 1, | loginType: 1, | ||||
| // 短信验证码登录 | // 短信验证码登录 | ||||
| form: { | form: { | ||||
| @@ -312,6 +313,7 @@ export default { | |||||
| this.form.phone = phoneValue ? phoneValue : ""; | this.form.phone = phoneValue ? phoneValue : ""; | ||||
| }, | }, | ||||
| mounted() { | mounted() { | ||||
| this.inPage = true; | |||||
| scrollToID("top"); | scrollToID("top"); | ||||
| }, | }, | ||||
| }; | }; | ||||
| @@ -319,6 +321,13 @@ export default { | |||||
| <style lang="scss" scoped> | <style lang="scss" scoped> | ||||
| .page { | .page { | ||||
| transform: translateX(100%); | |||||
| opacity: 0; | |||||
| transition: all 0.3s; | |||||
| &.active { | |||||
| opacity: 1; | |||||
| transform: translateX(0); | |||||
| } | |||||
| .logoBox { | .logoBox { | ||||
| // margin-top: 10px; | // margin-top: 10px; | ||||
| margin-left: 5px; | margin-left: 5px; | ||||
| @@ -1,5 +1,5 @@ | |||||
| <template> | <template> | ||||
| <div> | |||||
| <div :class="inPage ? 'page active' : 'page'"> | |||||
| <div id="top"></div> | <div id="top"></div> | ||||
| <HeadTop /> | <HeadTop /> | ||||
| <!-- <div class="chooseModel"> | <!-- <div class="chooseModel"> | ||||
| @@ -64,6 +64,7 @@ export default { | |||||
| }, | }, | ||||
| data() { | data() { | ||||
| return { | return { | ||||
| inPage: false, | |||||
| type: 2, | type: 2, | ||||
| currentId: "", | currentId: "", | ||||
| modeList: [], // 模板列表 | modeList: [], // 模板列表 | ||||
| @@ -162,6 +163,7 @@ export default { | |||||
| }, | }, | ||||
| }, | }, | ||||
| mounted() { | mounted() { | ||||
| this.inPage = true; | |||||
| scrollToID("top"); | scrollToID("top"); | ||||
| }, | }, | ||||
| created() { | created() { | ||||
| @@ -171,132 +173,140 @@ export default { | |||||
| </script> | </script> | ||||
| <style lang="scss" scoped> | <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: 100%; | |||||
| line-height: 32px; | |||||
| text-align: center; | |||||
| border: 1px solid #46464661; | |||||
| &.active { | |||||
| background-color: #00ccff; | |||||
| color: #fff; | |||||
| } | |||||
| .page { | |||||
| transform: translateX(100%); | |||||
| opacity: 0; | |||||
| transition: all 0.3s; | |||||
| padding-bottom: 25px; | |||||
| &.active { | |||||
| opacity: 1; | |||||
| transform: translateX(0); | |||||
| } | } | ||||
| } | |||||
| .title { | |||||
| text-align: center; | |||||
| width: 70px; | |||||
| font-size: 16px; | |||||
| font-weight: 600; | |||||
| border-bottom: 3px solid #0068b7; | |||||
| padding-bottom: 7px; | |||||
| margin: 10px auto; | |||||
| margin-bottom: 25px; | |||||
| } | |||||
| .typeOutSide { | |||||
| position: fixed; | |||||
| left: 0; | |||||
| right: 0; | |||||
| bottom: 10px; | |||||
| z-index: 99; | |||||
| .type { | |||||
| .chooseModel { | |||||
| display: flex; | display: flex; | ||||
| justify-content: space-between; | justify-content: space-between; | ||||
| align-items: center; | align-items: center; | ||||
| padding: 0 25px; | |||||
| margin-bottom: 20px; | |||||
| width: 350px; | |||||
| height: 32px; | |||||
| margin: auto; | |||||
| margin-top: 15px; | |||||
| margin-bottom: 15px; | |||||
| div { | div { | ||||
| width: 94px; | |||||
| height: 35px; | |||||
| line-height: 35px; | |||||
| color: #fff; | |||||
| border: 1px solid #bfbfbf; | |||||
| background-color: #bfbfbf; | |||||
| border-radius: 5px; | |||||
| width: 33.33%; | |||||
| height: 100%; | |||||
| line-height: 32px; | |||||
| text-align: center; | text-align: center; | ||||
| transition: all 0.3s; | |||||
| border: 1px solid #46464661; | |||||
| &.active { | &.active { | ||||
| background-color: #00ccff; | |||||
| color: #fff; | color: #fff; | ||||
| border: 1px solid #0068b7; | |||||
| background-color: #0068b7; | |||||
| } | } | ||||
| } | } | ||||
| } | } | ||||
| } | |||||
| .choose { | |||||
| margin-bottom: 40px; | |||||
| .modeList { | |||||
| display: flex; | |||||
| justify-content: space-between; | |||||
| align-items: center; | |||||
| flex-wrap: wrap; | |||||
| margin: auto; | |||||
| padding: 0 10px; | |||||
| .title { | |||||
| text-align: center; | |||||
| width: 70px; | |||||
| font-size: 16px; | |||||
| font-weight: 600; | |||||
| border-bottom: 3px solid #0068b7; | |||||
| padding-bottom: 7px; | |||||
| margin: 10px auto; | |||||
| margin-bottom: 25px; | |||||
| } | |||||
| .typeOutSide { | |||||
| position: sticky; | |||||
| top: 60px; | |||||
| z-index: 99; | |||||
| .model { | |||||
| position: relative; | |||||
| text-align: left; | |||||
| margin-bottom: 25px; | |||||
| border: 1px solid #00000028; | |||||
| padding: 8px; | |||||
| border-radius: 8px; | |||||
| transition: all 0.3s; | |||||
| opacity: 0.9; | |||||
| img { | |||||
| width: 150px; | |||||
| height: 220px; | |||||
| } | |||||
| .modelName { | |||||
| margin-top: 4px; | |||||
| font-size: 13px; | |||||
| } | |||||
| .setPaper { | |||||
| position: absolute; | |||||
| top: 80%; | |||||
| left: 50%; | |||||
| transform: translate(-50%, -50%); | |||||
| .type { | |||||
| display: flex; | |||||
| justify-content: space-between; | |||||
| align-items: center; | |||||
| padding: 0 25px; | |||||
| margin-bottom: 20px; | |||||
| div { | |||||
| width: 94px; | |||||
| height: 35px; | |||||
| line-height: 35px; | |||||
| color: #fff; | color: #fff; | ||||
| font-size: 14px; | |||||
| font-weight: 600; | |||||
| background-color: #00000042; | |||||
| padding: 3px 5px; | |||||
| border: 1px solid #bfbfbf; | |||||
| background-color: #bfbfbf; | |||||
| border-radius: 5px; | border-radius: 5px; | ||||
| text-align: center; | |||||
| transition: all 0.3s; | transition: all 0.3s; | ||||
| opacity: 0; | |||||
| &.active { | |||||
| color: #fff; | |||||
| border: 1px solid #0068b7; | |||||
| background-color: #0068b7; | |||||
| } | |||||
| } | } | ||||
| &.active { | |||||
| transform: translateY(-3px); | |||||
| box-shadow: #60606082 0px 2px 2px 1px; | |||||
| opacity: 1; | |||||
| } | |||||
| } | |||||
| .choose { | |||||
| margin-bottom: 40px; | |||||
| .modeList { | |||||
| display: flex; | |||||
| justify-content: space-between; | |||||
| align-items: center; | |||||
| flex-wrap: wrap; | |||||
| margin: auto; | |||||
| padding: 0 10px; | |||||
| .model { | |||||
| position: relative; | |||||
| text-align: left; | |||||
| margin-bottom: 25px; | |||||
| border: 1px solid #00000028; | |||||
| padding: 8px; | |||||
| border-radius: 8px; | |||||
| transition: all 0.3s; | |||||
| opacity: 0.9; | |||||
| img { | |||||
| width: 150px; | |||||
| height: 220px; | |||||
| } | |||||
| .modelName { | |||||
| margin-top: 4px; | |||||
| font-size: 13px; | |||||
| } | |||||
| .setPaper { | .setPaper { | ||||
| position: absolute; | |||||
| top: 80%; | |||||
| left: 50%; | |||||
| transform: translate(-50%, -50%); | |||||
| color: #fff; | |||||
| font-size: 14px; | |||||
| font-weight: 600; | |||||
| background-color: #00000042; | |||||
| padding: 3px 5px; | |||||
| border-radius: 5px; | |||||
| transition: all 0.3s; | |||||
| opacity: 0; | |||||
| } | |||||
| &.active { | |||||
| transform: translateY(-3px); | |||||
| box-shadow: #60606082 0px 2px 2px 1px; | |||||
| opacity: 1; | opacity: 1; | ||||
| .setPaper { | |||||
| opacity: 1; | |||||
| } | |||||
| } | } | ||||
| } | } | ||||
| } | |||||
| .alt { | |||||
| font-size: 18px; | |||||
| margin: 80px auto; | |||||
| height: 450px; | |||||
| line-height: 450px; | |||||
| .alt { | |||||
| font-size: 18px; | |||||
| margin: 80px auto; | |||||
| height: 450px; | |||||
| line-height: 450px; | |||||
| } | |||||
| } | } | ||||
| } | } | ||||
| } | |||||
| .blank { | |||||
| width: 1px; | |||||
| height: 1px; | |||||
| margin-bottom: 240px; | |||||
| .blank { | |||||
| width: 1px; | |||||
| height: 1px; | |||||
| margin-bottom: 240px; | |||||
| } | |||||
| } | } | ||||
| </style> | </style> | ||||
| @@ -1,22 +1,24 @@ | |||||
| <template> | <template> | ||||
| <div> | |||||
| <div :class="inPage ? 'page active' : 'page'"> | |||||
| <div id="top"></div> | <div id="top"></div> | ||||
| <HeadTop /> | <HeadTop /> | ||||
| <div class="video"> | <div class="video"> | ||||
| <video | |||||
| <!-- <video | |||||
| :src=" | :src=" | ||||
| 'https://smapitest.malls.iformall.com/myVideo/' + | 'https://smapitest.malls.iformall.com/myVideo/' + | ||||
| videoDetail.videoPath | videoDetail.videoPath | ||||
| " | " | ||||
| /> | |||||
| /> --> | |||||
| <div id="J_prismPlayer" /> | |||||
| <div class="desc"> | <div class="desc"> | ||||
| 视频已保存到 <span @click="go('/myPage')">我的视频作品</span> | 视频已保存到 <span @click="go('/myPage')">我的视频作品</span> | ||||
| </div> | </div> | ||||
| <img src="../../assets/img/play.png" @click="play" /> | |||||
| <!-- <img src="../../assets/img/play.png" @click="play" /> --> | |||||
| </div> | </div> | ||||
| <div class="bottomBtn"> | <div class="bottomBtn"> | ||||
| <div class="back" @click="backToIndex">返回首页</div> | <div class="back" @click="backToIndex">返回首页</div> | ||||
| <div class="next" @click="play">下载视频</div> | |||||
| <a class="next" @click="download">下载视频</a> | |||||
| </div> | </div> | ||||
| </div> | </div> | ||||
| </template> | </template> | ||||
| @@ -24,10 +26,12 @@ | |||||
| <script> | <script> | ||||
| import Vue from "vue"; | import Vue from "vue"; | ||||
| import { Toast } from "vant"; | import { Toast } from "vant"; | ||||
| import baseUrl from "../../api/baseUrl"; | |||||
| import { mapState, mapActions } from "vuex"; | import { mapState, mapActions } from "vuex"; | ||||
| import HeadTop from "./../../components/common/head.vue"; | import HeadTop from "./../../components/common/head.vue"; | ||||
| import scrollToID from "../../utils/scrollToID"; | import scrollToID from "../../utils/scrollToID"; | ||||
| import deepCopy from "../../utils/deepCopy"; | |||||
| import { doGetVideoDetialById } from "../../api/downloadVideo"; | |||||
| Vue.use(Toast); | Vue.use(Toast); | ||||
| export default { | export default { | ||||
| @@ -36,7 +40,10 @@ export default { | |||||
| }, | }, | ||||
| data() { | data() { | ||||
| return { | return { | ||||
| inPage: false, | |||||
| videoDetail: {}, | videoDetail: {}, | ||||
| coverUrl: "", | |||||
| videoUrl: "", | |||||
| }; | }; | ||||
| }, | }, | ||||
| computed: { | computed: { | ||||
| @@ -51,83 +58,133 @@ export default { | |||||
| go(url) { | go(url) { | ||||
| this.$router.push(url); | this.$router.push(url); | ||||
| }, | }, | ||||
| backToIndex() { | backToIndex() { | ||||
| this.$router.push("/myPage"); | this.$router.push("/myPage"); | ||||
| }, | }, | ||||
| play() { | |||||
| location.href = | |||||
| "https://smapitest.malls.iformall.com/myVideo/" + | |||||
| this.videoDetail.videoPath; | |||||
| download() { | |||||
| window.open(this.videoUrl); | |||||
| }, | |||||
| async getVideoDetail(id) { | |||||
| try { | |||||
| const res = await doGetVideoDetialById(id); | |||||
| console.log(res, "视频详情"); | |||||
| this.coverUrl = res.data.coverURL; | |||||
| this.videoUrl = res.data.videoUrl; | |||||
| this.open(); | |||||
| } catch (error) { | |||||
| console.log(error, "error"); | |||||
| Toast.fail(error.message); | |||||
| } | |||||
| }, | }, | ||||
| download() {}, | |||||
| open() { | |||||
| new Aliplayer( | |||||
| { | |||||
| id: "J_prismPlayer", | |||||
| cover: this.coverUrl, | |||||
| source: this.videoUrl, | |||||
| width: "480px", | |||||
| height: "854px", | |||||
| // 以下可选设置 | |||||
| isLive: false, // 直播 | |||||
| rePlay: false, // 循环播放 | |||||
| preload: true, //播放器自动加载 | |||||
| autoplay: false, // 自动播放 | |||||
| diagnosisButtonVisible: false, //是否显示检测按钮 | |||||
| keyShortCuts: true, //是否启用快捷键 | |||||
| keyFastForwardStep: 3, //快进快退的时间长度 | |||||
| controlBarVisibility: "hover", // 控制条的显示方式 | |||||
| }, | |||||
| function (player) { | |||||
| player.play(); | |||||
| } | |||||
| ); | |||||
| }, | |||||
| }, | }, | ||||
| created() { | created() { | ||||
| this.videoDetail = this.$route.query.videoDetail; | |||||
| console.log(this.videoDetail); | |||||
| this.videoId = this.$route.query.videoId; | |||||
| this.getVideoDetail(this.videoId); | |||||
| }, | }, | ||||
| mounted() { | mounted() { | ||||
| this.inPage = true; | |||||
| scrollToID("top"); | scrollToID("top"); | ||||
| }, | }, | ||||
| }; | }; | ||||
| </script> | </script> | ||||
| <style lang="scss" scoped> | <style lang="scss" scoped> | ||||
| .video { | |||||
| position: relative; | |||||
| padding: 30px; | |||||
| text-align: center; | |||||
| .title { | |||||
| font-size: 18px; | |||||
| margin-bottom: 20px; | |||||
| } | |||||
| video { | |||||
| width: 240px; | |||||
| height: 427px; | |||||
| border: 0.5px solid #000; | |||||
| border-radius: 8px; | |||||
| } | |||||
| img { | |||||
| position: absolute; | |||||
| top: 50%; | |||||
| left: 50%; | |||||
| transform: translate(-50%, -50%); | |||||
| .page { | |||||
| transform: translateX(100%); | |||||
| opacity: 0; | |||||
| transition: all 0.3s; | |||||
| padding-bottom: 25px; | |||||
| &.active { | |||||
| opacity: 1; | |||||
| transform: translateX(0); | |||||
| } | } | ||||
| .desc { | |||||
| .video { | |||||
| position: relative; | position: relative; | ||||
| right: 45px; | |||||
| bottom: 8px; | |||||
| font-size: 12px; | |||||
| margin-top: 20px; | |||||
| span { | |||||
| color: #0006ff; | |||||
| } | |||||
| } | |||||
| } | |||||
| .bottomBtn { | |||||
| display: flex; | |||||
| justify-content: space-between; | |||||
| padding: 0 32.5px; | |||||
| margin-top: 20px; | |||||
| margin-bottom: 20px; | |||||
| div { | |||||
| width: 142px; | |||||
| height: 42px; | |||||
| color: #484848; | |||||
| line-height: 42px; | |||||
| padding: 30px; | |||||
| text-align: center; | text-align: center; | ||||
| border: 1px solid #484848; | |||||
| border-radius: 7px; | |||||
| &.back { | |||||
| color: #fff; | |||||
| border: 1px solid #d2d2d2; | |||||
| background-color: #d2d2d2; | |||||
| #J_prismPlayer { | |||||
| margin: auto; | |||||
| } | |||||
| .title { | |||||
| font-size: 18px; | |||||
| margin-bottom: 20px; | |||||
| } | |||||
| video { | |||||
| width: 240px; | |||||
| height: 427px; | |||||
| border: 0.5px solid #000; | |||||
| border-radius: 8px; | |||||
| } | } | ||||
| &.next { | |||||
| color: #fff; | |||||
| border: 1px solid #0068b7; | |||||
| background-color: #0068b7; | |||||
| img { | |||||
| position: absolute; | |||||
| top: 50%; | |||||
| left: 50%; | |||||
| transform: translate(-50%, -50%); | |||||
| } | |||||
| .desc { | |||||
| position: relative; | |||||
| right: 45px; | |||||
| bottom: 8px; | |||||
| font-size: 12px; | |||||
| margin-top: 20px; | |||||
| span { | |||||
| color: #0006ff; | |||||
| } | |||||
| } | |||||
| } | |||||
| .bottomBtn { | |||||
| display: flex; | |||||
| justify-content: space-between; | |||||
| padding: 0 32.5px; | |||||
| margin-top: 20px; | |||||
| margin-bottom: 20px; | |||||
| div, | |||||
| a { | |||||
| display: block; | |||||
| width: 142px; | |||||
| height: 42px; | |||||
| color: #484848; | |||||
| line-height: 42px; | |||||
| text-align: center; | |||||
| border: 1px solid #484848; | |||||
| border-radius: 7px; | |||||
| &.back { | |||||
| color: #fff; | |||||
| border: 1px solid #d2d2d2; | |||||
| background-color: #d2d2d2; | |||||
| } | |||||
| &.next { | |||||
| color: #fff; | |||||
| border: 1px solid #0068b7; | |||||
| background-color: #0068b7; | |||||
| } | |||||
| } | } | ||||
| } | } | ||||
| } | } | ||||
| @@ -1,5 +1,5 @@ | |||||
| <template> | <template> | ||||
| <div> | |||||
| <div :class="inPage ? 'page active' : 'page'"> | |||||
| <div id="top"></div> | <div id="top"></div> | ||||
| <HeadTop /> | <HeadTop /> | ||||
| <div class="title">生成视频</div> | <div class="title">生成视频</div> | ||||
| @@ -106,10 +106,12 @@ export default { | |||||
| }, | }, | ||||
| data() { | data() { | ||||
| return { | return { | ||||
| inPage: false, | |||||
| isShowCover: false, | isShowCover: false, | ||||
| isShowMessageCover: false, | isShowMessageCover: false, | ||||
| show: false, | show: false, | ||||
| voiceAlert: "暂无可用声音", | voiceAlert: "暂无可用声音", | ||||
| timeOuter: "", | |||||
| soundIndex: "", | soundIndex: "", | ||||
| backGroundIndex: "", | backGroundIndex: "", | ||||
| coverImg: "", | coverImg: "", | ||||
| @@ -210,7 +212,7 @@ export default { | |||||
| console.log(res, "生成视频"); | console.log(res, "生成视频"); | ||||
| Toast.success("提交成功!"); | Toast.success("提交成功!"); | ||||
| // *#06# | // *#06# | ||||
| setTimeout(() => { | |||||
| this.timeOuter = setTimeout(() => { | |||||
| this.isShowCover = true; | this.isShowCover = true; | ||||
| }, 2000); | }, 2000); | ||||
| const timer = setInterval(() => { | const timer = setInterval(() => { | ||||
| @@ -266,14 +268,13 @@ export default { | |||||
| const res = await doFindVideoById(id); | const res = await doFindVideoById(id); | ||||
| console.log(res, "通过id获取视频"); | console.log(res, "通过id获取视频"); | ||||
| if (res.data.videoStatus == 2) { | if (res.data.videoStatus == 2) { | ||||
| setTimeout(() => { | |||||
| this.isShowCover = false; | |||||
| }, 2000); | |||||
| this.isShowCover = false; | |||||
| clearTimeout(this.timeOuter); | |||||
| Toast.success("视频生成成功!"); | Toast.success("视频生成成功!"); | ||||
| this.$router.push({ | this.$router.push({ | ||||
| path: "/downloadVideo", | path: "/downloadVideo", | ||||
| query: { | query: { | ||||
| videoDetail: res.data, | |||||
| videoId: res.data.videoId, | |||||
| }, | }, | ||||
| }); | }); | ||||
| this.timerOver = true; | this.timerOver = true; | ||||
| @@ -281,9 +282,8 @@ export default { | |||||
| } else if (res.data.videoStatus == 3) { | } else if (res.data.videoStatus == 3) { | ||||
| Toast.fail(`视频生成失败!失败原因:${res.data.videoMsg}`); | Toast.fail(`视频生成失败!失败原因:${res.data.videoMsg}`); | ||||
| this.timerOver = true; | this.timerOver = true; | ||||
| setTimeout(() => { | |||||
| this.isShowCover = false; | |||||
| }, 2000); | |||||
| clearTimeout(this.timeOuter); | |||||
| this.isShowCover = false; | |||||
| return; | return; | ||||
| } | } | ||||
| } catch (error) { | } catch (error) { | ||||
| @@ -345,6 +345,7 @@ export default { | |||||
| }, | }, | ||||
| mounted() { | mounted() { | ||||
| this.inPage = true; | |||||
| scrollToID("top"); | scrollToID("top"); | ||||
| this.loadVoice(); | this.loadVoice(); | ||||
| this.loadBackGrounnd(); | this.loadBackGrounnd(); | ||||
| @@ -353,292 +354,301 @@ export default { | |||||
| </script> | </script> | ||||
| <style lang="scss" scoped> | <style lang="scss" scoped> | ||||
| .title { | |||||
| text-align: center; | |||||
| width: 70px; | |||||
| font-size: 16px; | |||||
| font-weight: 600; | |||||
| border-bottom: 3px solid #0068b7; | |||||
| padding-bottom: 7px; | |||||
| margin: 10px auto; | |||||
| margin-bottom: 25px; | |||||
| } | |||||
| .coverImg { | |||||
| text-align: center; | |||||
| margin: 25px auto; | |||||
| img { | |||||
| border: 1px solid #00000046; | |||||
| border-radius: 5px; | |||||
| width: 207px; | |||||
| height: 368.5px; | |||||
| .page { | |||||
| transform: translateX(100%); | |||||
| opacity: 0; | |||||
| transition: all 0.3s; | |||||
| padding-bottom: 25px; | |||||
| &.active { | |||||
| opacity: 1; | |||||
| transform: translateX(0); | |||||
| } | } | ||||
| } | |||||
| .sound { | |||||
| position: relative; | |||||
| width: 80%; | |||||
| border: 1px solid #0068b7; | |||||
| padding: 12.5px; | |||||
| padding-bottom: 8px; | |||||
| border-radius: 5px; | |||||
| margin: 15px auto; | |||||
| .select { | |||||
| position: absolute; | |||||
| top: -7px; | |||||
| left: 10px; | |||||
| font-size: 10px; | |||||
| color: #0068b7; | |||||
| background-color: #fff; | |||||
| padding: 0 5px; | |||||
| .title { | |||||
| text-align: center; | |||||
| width: 70px; | |||||
| font-size: 16px; | |||||
| font-weight: 600; | |||||
| border-bottom: 3px solid #0068b7; | |||||
| padding-bottom: 7px; | |||||
| margin: 10px auto; | |||||
| margin-bottom: 25px; | |||||
| } | } | ||||
| .soundList { | |||||
| display: flex; | |||||
| overflow-x: auto; | |||||
| .item { | |||||
| .coverImg { | |||||
| text-align: center; | |||||
| margin: 25px auto; | |||||
| img { | |||||
| border: 1px solid #00000046; | |||||
| border-radius: 5px; | |||||
| width: 207px; | |||||
| height: 368.5px; | |||||
| } | |||||
| } | |||||
| .sound { | |||||
| position: relative; | |||||
| width: 80%; | |||||
| border: 1px solid #0068b7; | |||||
| padding: 12.5px; | |||||
| padding-bottom: 8px; | |||||
| border-radius: 5px; | |||||
| margin: 15px auto; | |||||
| .select { | |||||
| position: absolute; | |||||
| top: -7px; | |||||
| left: 10px; | |||||
| font-size: 10px; | |||||
| color: #0068b7; | |||||
| background-color: #fff; | |||||
| padding: 0 5px; | |||||
| } | |||||
| .soundList { | |||||
| display: flex; | display: flex; | ||||
| justify-content: space-around; | |||||
| align-items: center; | |||||
| margin-right: 8px; | |||||
| transition: all 0.5s; | |||||
| padding: 5px; | |||||
| .preview { | |||||
| width: 35px; | |||||
| height: 35px; | |||||
| margin-right: 10px; | |||||
| flex-shrink: 0; | |||||
| border: 1px solid #00000036; | |||||
| border-radius: 50% 50%; | |||||
| overflow: hidden; | |||||
| overflow-x: auto; | |||||
| .item { | |||||
| display: flex; | |||||
| justify-content: space-around; | |||||
| align-items: center; | |||||
| margin-right: 8px; | |||||
| transition: all 0.5s; | transition: all 0.5s; | ||||
| opacity: 0.9; | |||||
| img { | |||||
| width: 100%; | |||||
| height: 100%; | |||||
| } | |||||
| &.active { | |||||
| border: 1px solid #000; | |||||
| padding: 5px; | |||||
| .preview { | |||||
| width: 35px; | width: 35px; | ||||
| height: 35px; | height: 35px; | ||||
| opacity: 1; | |||||
| margin-right: 10px; | |||||
| flex-shrink: 0; | |||||
| border: 1px solid #00000036; | |||||
| border-radius: 50% 50%; | |||||
| overflow: hidden; | |||||
| transition: all 0.5s; | |||||
| opacity: 0.9; | |||||
| img { | |||||
| width: 100%; | |||||
| height: 100%; | |||||
| } | |||||
| &.active { | |||||
| border: 1px solid #000; | |||||
| width: 35px; | |||||
| height: 35px; | |||||
| opacity: 1; | |||||
| } | |||||
| } | |||||
| .tag { | |||||
| min-width: 40px; | |||||
| } | |||||
| &.active { | |||||
| border-radius: 5px; | |||||
| background-color: #00000025; | |||||
| } | } | ||||
| } | } | ||||
| .tag { | |||||
| min-width: 40px; | |||||
| // 隐藏滚动条 | |||||
| &::-webkit-scrollbar { | |||||
| width: 0 !important; | |||||
| } | } | ||||
| &.active { | |||||
| border-radius: 5px; | |||||
| background-color: #00000025; | |||||
| .instead { | |||||
| position: relative; | |||||
| left: 38%; | |||||
| height: 45px; | |||||
| line-height: 45px; | |||||
| } | } | ||||
| } | } | ||||
| // 隐藏滚动条 | |||||
| &::-webkit-scrollbar { | |||||
| width: 0 !important; | |||||
| } | |||||
| .instead { | |||||
| position: relative; | |||||
| left: 38%; | |||||
| height: 45px; | |||||
| line-height: 45px; | |||||
| } | |||||
| } | |||||
| } | |||||
| .backGround { | |||||
| position: relative; | |||||
| width: 80%; | |||||
| border: 1px solid #0068b7; | |||||
| padding: 12.5px; | |||||
| padding-bottom: 8px; | |||||
| border-radius: 5px; | |||||
| margin: auto; | |||||
| .select { | |||||
| position: absolute; | |||||
| top: -7px; | |||||
| left: 10px; | |||||
| font-size: 10px; | |||||
| color: #0068b7; | |||||
| background-color: #fff; | |||||
| padding: 0 5px; | |||||
| } | } | ||||
| .backGroundList { | |||||
| display: flex; | |||||
| overflow-x: auto; | |||||
| .item { | |||||
| .backGround { | |||||
| position: relative; | |||||
| width: 80%; | |||||
| border: 1px solid #0068b7; | |||||
| padding: 12.5px; | |||||
| padding-bottom: 8px; | |||||
| border-radius: 5px; | |||||
| margin: auto; | |||||
| .select { | |||||
| position: absolute; | |||||
| top: -7px; | |||||
| left: 10px; | |||||
| font-size: 10px; | |||||
| color: #0068b7; | |||||
| background-color: #fff; | |||||
| padding: 0 5px; | |||||
| } | |||||
| .backGroundList { | |||||
| display: flex; | display: flex; | ||||
| justify-content: space-around; | |||||
| align-items: center; | |||||
| margin-right: 8px; | |||||
| transition: all 0.5s; | |||||
| padding: 5px; | |||||
| .preview { | |||||
| width: 35px; | |||||
| height: 35px; | |||||
| margin-right: 10px; | |||||
| flex-shrink: 0; | |||||
| border: 1px solid #00000036; | |||||
| border-radius: 50% 50%; | |||||
| overflow: hidden; | |||||
| overflow-x: auto; | |||||
| .item { | |||||
| display: flex; | |||||
| justify-content: space-around; | |||||
| align-items: center; | |||||
| margin-right: 8px; | |||||
| transition: all 0.5s; | transition: all 0.5s; | ||||
| opacity: 0.9; | |||||
| img { | |||||
| width: 100%; | |||||
| height: 100%; | |||||
| } | |||||
| &.active { | |||||
| border: 1px solid #000; | |||||
| padding: 5px; | |||||
| .preview { | |||||
| width: 35px; | width: 35px; | ||||
| height: 35px; | height: 35px; | ||||
| opacity: 1; | |||||
| margin-right: 10px; | |||||
| flex-shrink: 0; | |||||
| border: 1px solid #00000036; | |||||
| border-radius: 50% 50%; | |||||
| overflow: hidden; | |||||
| transition: all 0.5s; | |||||
| opacity: 0.9; | |||||
| img { | |||||
| width: 100%; | |||||
| height: 100%; | |||||
| } | |||||
| &.active { | |||||
| border: 1px solid #000; | |||||
| width: 35px; | |||||
| height: 35px; | |||||
| opacity: 1; | |||||
| } | |||||
| } | |||||
| .tag { | |||||
| min-width: 40px; | |||||
| } | |||||
| &.active { | |||||
| border-radius: 5px; | |||||
| background-color: #00000025; | |||||
| } | } | ||||
| } | } | ||||
| .tag { | |||||
| min-width: 40px; | |||||
| // 隐藏滚动条 | |||||
| &::-webkit-scrollbar { | |||||
| width: 0 !important; | |||||
| } | } | ||||
| &.active { | |||||
| border-radius: 5px; | |||||
| background-color: #00000025; | |||||
| .instead { | |||||
| position: relative; | |||||
| left: 38%; | |||||
| height: 45px; | |||||
| line-height: 45px; | |||||
| } | } | ||||
| } | } | ||||
| // 隐藏滚动条 | |||||
| &::-webkit-scrollbar { | |||||
| width: 0 !important; | |||||
| } | |||||
| .instead { | |||||
| position: relative; | |||||
| left: 38%; | |||||
| height: 45px; | |||||
| line-height: 45px; | |||||
| } | |||||
| } | } | ||||
| } | |||||
| .bottomBtn { | |||||
| display: flex; | |||||
| justify-content: space-between; | |||||
| padding: 0 32.5px; | |||||
| margin-top: 16px; | |||||
| margin-bottom: 30px; | |||||
| div { | |||||
| width: 142px; | |||||
| height: 42px; | |||||
| color: #fff; | |||||
| line-height: 42px; | |||||
| text-align: center; | |||||
| border: 1px solid #d2d2d2; | |||||
| border-radius: 7px; | |||||
| background-color: #d2d2d2; | |||||
| &.next { | |||||
| .bottomBtn { | |||||
| display: flex; | |||||
| justify-content: space-between; | |||||
| padding: 0 32.5px; | |||||
| margin-top: 16px; | |||||
| margin-bottom: 30px; | |||||
| div { | |||||
| width: 142px; | |||||
| height: 42px; | |||||
| color: #fff; | color: #fff; | ||||
| border: 1px solid #0068b7; | |||||
| background-color: #0068b7; | |||||
| line-height: 42px; | |||||
| text-align: center; | |||||
| border: 1px solid #d2d2d2; | |||||
| border-radius: 7px; | |||||
| background-color: #d2d2d2; | |||||
| &.next { | |||||
| color: #fff; | |||||
| border: 1px solid #0068b7; | |||||
| background-color: #0068b7; | |||||
| } | |||||
| } | } | ||||
| } | } | ||||
| } | |||||
| @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%; | |||||
| width: 80%; | |||||
| transform: translate(-50%, -50%); | |||||
| img { | |||||
| width: 75px; | |||||
| height: 75px; | |||||
| animation: rotation 2s linear infinite; | |||||
| margin-bottom: 10px; | |||||
| @keyframes rotation { | |||||
| from { | |||||
| -webkit-transform: rotate(0deg); | |||||
| } | } | ||||
| .generating { | |||||
| font-size: 18px; | |||||
| color: #fff; | |||||
| margin-bottom: 53px; | |||||
| } | |||||
| .alert { | |||||
| font-size: 11.5px; | |||||
| color: #fff; | |||||
| to { | |||||
| -webkit-transform: rotate(360deg); | |||||
| } | } | ||||
| } | } | ||||
| &.active { | |||||
| width: 100%; | |||||
| height: 100%; | |||||
| background-color: #00000077; | |||||
| z-index: 99999; | |||||
| opacity: 1; | |||||
| } | |||||
| } | |||||
| .messageCover { | |||||
| position: fixed; | |||||
| top: 0; | |||||
| width: 100%; | |||||
| height: 100%; | |||||
| background-color: #00000091; | |||||
| transition: all 0.3s; | |||||
| opacity: 0; | |||||
| z-index: -1; | |||||
| .message { | |||||
| .coverUp { | |||||
| position: fixed; | position: fixed; | ||||
| top: 53%; | |||||
| left: 50%; | |||||
| transform: translate(-50%, -50%); | |||||
| width: 272px; | |||||
| height: 290px; | |||||
| border-radius: 5px; | |||||
| background-color: #fff; | |||||
| top: 0; | |||||
| left: 0; | |||||
| opacity: 0; | |||||
| text-align: center; | text-align: center; | ||||
| transition: all 0.3s; | transition: all 0.3s; | ||||
| .inside { | |||||
| position: absolute; | |||||
| top: 50%; | |||||
| left: 50%; | |||||
| width: 80%; | |||||
| transform: translate(-50%, -50%); | |||||
| .connect { | |||||
| font-size: 12px; | |||||
| margin: 19px 0 10px 0; | |||||
| img { | |||||
| width: 75px; | |||||
| height: 75px; | |||||
| animation: rotation 2s linear infinite; | |||||
| margin-bottom: 10px; | |||||
| } | |||||
| .generating { | |||||
| font-size: 18px; | |||||
| color: #fff; | |||||
| margin-bottom: 53px; | |||||
| } | |||||
| .alert { | |||||
| font-size: 11.5px; | |||||
| color: #fff; | |||||
| } | |||||
| } | } | ||||
| .qrCode { | |||||
| width: 203px; | |||||
| height: 213px; | |||||
| background-color: #ffffff; | |||||
| border-radius: 5px; | |||||
| border: solid 1px #595959; | |||||
| margin: auto; | |||||
| &.active { | |||||
| width: 100%; | |||||
| height: 100%; | |||||
| background-color: #00000077; | |||||
| z-index: 150; | |||||
| opacity: 1; | |||||
| } | } | ||||
| .phoneNum { | |||||
| float: left; | |||||
| font-size: 11px; | |||||
| margin-top: 3px; | |||||
| margin-left: 34px; | |||||
| } | |||||
| .messageCover { | |||||
| position: fixed; | |||||
| top: 0; | |||||
| width: 100%; | |||||
| height: 100%; | |||||
| background-color: #00000091; | |||||
| transition: all 0.3s; | |||||
| opacity: 0; | |||||
| z-index: -1; | |||||
| .message { | |||||
| position: fixed; | |||||
| top: 53%; | |||||
| left: 50%; | |||||
| transform: translate(-50%, -50%); | |||||
| width: 272px; | |||||
| height: 290px; | |||||
| border-radius: 5px; | |||||
| background-color: #fff; | |||||
| text-align: center; | |||||
| transition: all 0.3s; | |||||
| .connect { | |||||
| font-size: 12px; | |||||
| margin: 19px 0 10px 0; | |||||
| } | |||||
| .qrCode { | |||||
| width: 203px; | |||||
| height: 213px; | |||||
| background-color: #ffffff; | |||||
| border-radius: 5px; | |||||
| border: solid 1px #595959; | |||||
| margin: auto; | |||||
| } | |||||
| .phoneNum { | |||||
| float: left; | |||||
| font-size: 11px; | |||||
| margin-top: 3px; | |||||
| margin-left: 34px; | |||||
| } | |||||
| .close { | |||||
| position: absolute; | |||||
| top: 8px; | |||||
| right: 15px; | |||||
| font-size: 18px; | |||||
| color: #000; | |||||
| } | |||||
| } | } | ||||
| .close { | |||||
| .clickToClose { | |||||
| position: absolute; | position: absolute; | ||||
| top: 8px; | |||||
| right: 15px; | |||||
| font-size: 18px; | |||||
| color: #000; | |||||
| font-size: 14px; | |||||
| color: #fff; | |||||
| left: 50%; | |||||
| transform: translateX(-50%); | |||||
| bottom: 16%; | |||||
| } | |||||
| &.active { | |||||
| z-index: 100; | |||||
| opacity: 1; | |||||
| } | } | ||||
| } | |||||
| .clickToClose { | |||||
| position: absolute; | |||||
| font-size: 14px; | |||||
| color: #fff; | |||||
| left: 50%; | |||||
| transform: translateX(-50%); | |||||
| bottom: 16%; | |||||
| } | |||||
| &.active { | |||||
| z-index: 999; | |||||
| opacity: 1; | |||||
| } | } | ||||
| } | } | ||||
| </style> | </style> | ||||
| @@ -1,5 +1,5 @@ | |||||
| <template> | <template> | ||||
| <div> | |||||
| <div :class="inPage ? 'page active' : 'page'"> | |||||
| <div id="top"></div> | <div id="top"></div> | ||||
| <HeadTop /> | <HeadTop /> | ||||
| <div class="title">录入文案</div> | <div class="title">录入文案</div> | ||||
| @@ -44,6 +44,7 @@ export default { | |||||
| }, | }, | ||||
| data() { | data() { | ||||
| return { | return { | ||||
| inPage: false, | |||||
| paperwork: "", | paperwork: "", | ||||
| title: "", | title: "", | ||||
| modelDetail: {}, | modelDetail: {}, | ||||
| @@ -129,91 +130,102 @@ export default { | |||||
| this.saveID = this.$route.query.saveID; | this.saveID = this.$route.query.saveID; | ||||
| }, | }, | ||||
| mounted() { | mounted() { | ||||
| this.inPage = true; | |||||
| scrollToID("top"); | scrollToID("top"); | ||||
| }, | }, | ||||
| }; | }; | ||||
| </script> | </script> | ||||
| <style lang="scss" scoped> | <style lang="scss" scoped> | ||||
| .title { | |||||
| text-align: center; | |||||
| width: 70px; | |||||
| font-size: 16px; | |||||
| font-weight: 600; | |||||
| border-bottom: 3px solid #0068b7; | |||||
| padding-bottom: 7px; | |||||
| margin: 10px auto; | |||||
| margin-bottom: 25px; | |||||
| } | |||||
| .content { | |||||
| display: flex; | |||||
| justify-content: space-between; | |||||
| padding: 0 15px; | |||||
| .img { | |||||
| img { | |||||
| width: 76px; | |||||
| height: 135.5px; | |||||
| border: 1px solid #999999; | |||||
| border-radius: 8px; | |||||
| } | |||||
| .title { | |||||
| font-size: 15px; | |||||
| margin-top: 15px; | |||||
| } | |||||
| .page { | |||||
| transform: translateX(100%); | |||||
| opacity: 0; | |||||
| transition: all 0.3s; | |||||
| padding-bottom: 25px; | |||||
| &.active { | |||||
| opacity: 1; | |||||
| transform: translateX(0); | |||||
| } | } | ||||
| .textarea { | |||||
| position: relative; | |||||
| .title { | |||||
| text-align: center; | text-align: center; | ||||
| margin-bottom: 60px; | |||||
| textarea { | |||||
| width: 250px; | |||||
| height: 367.5px; | |||||
| border: 1px solid #00000080; | |||||
| border-radius: 8px; | |||||
| } | |||||
| .limit { | |||||
| position: absolute; | |||||
| left: 0px; | |||||
| bottom: -15px; | |||||
| width: 70px; | |||||
| font-size: 16px; | |||||
| font-weight: 600; | |||||
| border-bottom: 3px solid #0068b7; | |||||
| padding-bottom: 7px; | |||||
| margin: 10px auto; | |||||
| margin-bottom: 25px; | |||||
| } | |||||
| .content { | |||||
| display: flex; | |||||
| justify-content: space-between; | |||||
| padding: 0 15px; | |||||
| .img { | |||||
| img { | |||||
| width: 76px; | |||||
| height: 135.5px; | |||||
| border: 1px solid #999999; | |||||
| border-radius: 8px; | |||||
| } | |||||
| .title { | |||||
| font-size: 15px; | |||||
| margin-top: 15px; | |||||
| } | |||||
| } | } | ||||
| .try { | |||||
| position: absolute; | |||||
| left: 20px; | |||||
| bottom: -35px; | |||||
| width: 80px; | |||||
| height: 25px; | |||||
| line-height: 25px; | |||||
| .textarea { | |||||
| position: relative; | |||||
| text-align: center; | text-align: center; | ||||
| color: #0000004b; | |||||
| border: 1px solid #0000004b; | |||||
| border-radius: 5px; | |||||
| margin-bottom: 60px; | |||||
| textarea { | |||||
| width: 250px; | |||||
| height: 367.5px; | |||||
| border: 1px solid #00000080; | |||||
| border-radius: 8px; | |||||
| } | |||||
| .limit { | |||||
| position: absolute; | |||||
| left: 0px; | |||||
| bottom: -15px; | |||||
| } | |||||
| .try { | |||||
| position: absolute; | |||||
| left: 20px; | |||||
| bottom: -35px; | |||||
| width: 80px; | |||||
| height: 25px; | |||||
| line-height: 25px; | |||||
| text-align: center; | |||||
| color: #0000004b; | |||||
| border: 1px solid #0000004b; | |||||
| border-radius: 5px; | |||||
| } | |||||
| } | } | ||||
| } | } | ||||
| } | |||||
| .bottomBtn { | |||||
| display: flex; | |||||
| justify-content: space-between; | |||||
| padding: 0 32.5px; | |||||
| margin-top: 50px; | |||||
| margin-bottom: 30px; | |||||
| div { | |||||
| width: 142px; | |||||
| height: 42px; | |||||
| color: #fff; | |||||
| line-height: 42px; | |||||
| text-align: center; | |||||
| border: 1px solid #d2d2d2; | |||||
| border-radius: 7px; | |||||
| background-color: #d2d2d2; | |||||
| &.next { | |||||
| .bottomBtn { | |||||
| display: flex; | |||||
| justify-content: space-between; | |||||
| padding: 0 32.5px; | |||||
| margin-top: 50px; | |||||
| margin-bottom: 30px; | |||||
| div { | |||||
| width: 142px; | |||||
| height: 42px; | |||||
| color: #fff; | color: #fff; | ||||
| border: 1px solid #0068b7; | |||||
| background-color: #0068b7; | |||||
| line-height: 42px; | |||||
| text-align: center; | |||||
| border: 1px solid #d2d2d2; | |||||
| border-radius: 7px; | |||||
| background-color: #d2d2d2; | |||||
| &.next { | |||||
| color: #fff; | |||||
| border: 1px solid #0068b7; | |||||
| background-color: #0068b7; | |||||
| } | |||||
| } | } | ||||
| } | } | ||||
| } | |||||
| .van-popup { | |||||
| background-color: #ffffff00 !important; | |||||
| .van-popup { | |||||
| background-color: #ffffff00 !important; | |||||
| } | |||||
| } | } | ||||
| </style> | </style> | ||||
| @@ -1,5 +1,5 @@ | |||||
| <template> | <template> | ||||
| <div class="page"> | |||||
| <div :class="inPage ? 'page active' : 'page'"> | |||||
| <div id="top"></div> | <div id="top"></div> | ||||
| <HeadTop /> | <HeadTop /> | ||||
| <img class="showIMG" src="../../assets/img/BG-Page.png" alt="" /> | <img class="showIMG" src="../../assets/img/BG-Page.png" alt="" /> | ||||
| @@ -28,8 +28,8 @@ | |||||
| <div class="videoName"> | <div class="videoName"> | ||||
| {{ item.title || "暂无" }} | {{ item.title || "暂无" }} | ||||
| </div> | </div> | ||||
| <div class="createTime">视频时长:{{ item.videoTime }}</div> | |||||
| <div class="createTime">视频容量{{ "46.5Mb" }}</div> | |||||
| <div class="createTime">视频时长:{{ item.videoTime }}</div> | |||||
| <div class="createTime">视频容量:{{ "46.5Mb" }}</div> | |||||
| <div class="createTime"> | <div class="createTime"> | ||||
| 创建时间:{{ changeTime(item.createDate, "YYYY-MM-DD hh:mm:ss") }} | 创建时间:{{ changeTime(item.createDate, "YYYY-MM-DD hh:mm:ss") }} | ||||
| </div> | </div> | ||||
| @@ -41,7 +41,7 @@ | |||||
| <van-pagination | <van-pagination | ||||
| v-model="currentPage" | v-model="currentPage" | ||||
| :total-items="total" | :total-items="total" | ||||
| :items-per-page="3" | |||||
| :items-per-page="4" | |||||
| @change="pageChange" | @change="pageChange" | ||||
| /> | /> | ||||
| <div class="goAdd" @click="goCreateNew">+ 创作新作品</div> | <div class="goAdd" @click="goCreateNew">+ 创作新作品</div> | ||||
| @@ -55,7 +55,7 @@ import { mapState, mapActions } from "vuex"; | |||||
| import { Toast } from "vant"; | import { Toast } from "vant"; | ||||
| import timestampToTime from "../../utils/timestampToTime"; | import timestampToTime from "../../utils/timestampToTime"; | ||||
| import scrollToID from "../../utils/scrollToID"; | import scrollToID from "../../utils/scrollToID"; | ||||
| import { getVideoList } from "../../api/myPage"; | |||||
| import { getVideoList, doGetVideoDetialById } from "../../api/myPage"; | |||||
| Vue.use(Toast); | Vue.use(Toast); | ||||
| export default { | export default { | ||||
| @@ -64,9 +64,11 @@ export default { | |||||
| }, | }, | ||||
| data() { | data() { | ||||
| return { | return { | ||||
| inPage: false, | |||||
| videoList: [], | videoList: [], | ||||
| currentPage: 1, | currentPage: 1, | ||||
| pageSize: 5, | |||||
| pageSize: 4, | |||||
| prePage: "", | |||||
| total: "", | total: "", | ||||
| }; | }; | ||||
| }, | }, | ||||
| @@ -107,7 +109,7 @@ export default { | |||||
| this.$router.push({ | this.$router.push({ | ||||
| path: "/downloadVideo", | path: "/downloadVideo", | ||||
| query: { | query: { | ||||
| videoDetail: item, | |||||
| videoId: item.videoId, | |||||
| }, | }, | ||||
| }); | }); | ||||
| } else if (status == 3) { | } else if (status == 3) { | ||||
| @@ -126,11 +128,22 @@ export default { | |||||
| } | } | ||||
| }, | }, | ||||
| async getVideoDetialById(id) { | |||||
| try { | |||||
| const res = await doGetVideoDetialById(id); | |||||
| console.log(res, "通过视频id获取视频详情"); | |||||
| } catch (error) { | |||||
| console.log(error, "error"); | |||||
| Toast.fail(error.message); | |||||
| } | |||||
| }, | |||||
| goCreateNew() { | goCreateNew() { | ||||
| this.$router.push("/chooseModel"); | this.$router.push("/chooseModel"); | ||||
| }, | }, | ||||
| }, | }, | ||||
| mounted() { | mounted() { | ||||
| this.inPage = true; | |||||
| scrollToID("top"); | scrollToID("top"); | ||||
| }, | }, | ||||
| created() { | created() { | ||||
| @@ -141,6 +154,14 @@ export default { | |||||
| <style lang="scss" scoped> | <style lang="scss" scoped> | ||||
| .page { | .page { | ||||
| transform: translateX(100%); | |||||
| opacity: 0; | |||||
| transition: all 0.3s; | |||||
| padding-bottom: 25px; | |||||
| &.active { | |||||
| opacity: 1; | |||||
| transform: translateX(0); | |||||
| } | |||||
| .logoBox { | .logoBox { | ||||
| display: flex; | display: flex; | ||||
| justify-content: space-between; | justify-content: space-between; | ||||
| @@ -255,9 +276,9 @@ export default { | |||||
| } | } | ||||
| } | } | ||||
| .goAdd { | .goAdd { | ||||
| position: fixed; | |||||
| bottom: 15px; | |||||
| left: 50%; | |||||
| position: sticky; | |||||
| bottom: 25px; | |||||
| left: 10px; | |||||
| width: 300px; | width: 300px; | ||||
| height: 42px; | height: 42px; | ||||
| line-height: 42px; | line-height: 42px; | ||||
| @@ -268,6 +289,8 @@ export default { | |||||
| background-color: #0068b7; | background-color: #0068b7; | ||||
| border-radius: 5px; | border-radius: 5px; | ||||
| box-shadow: #60606082 1px 1px 1px 1px; | box-shadow: #60606082 1px 1px 1px 1px; | ||||
| margin-top: 25px; | |||||
| margin-left: 190px; | |||||
| } | } | ||||
| } | } | ||||
| </style> | </style> | ||||
| @@ -1,4 +1,4 @@ | |||||
| const UglifyJsPlugin = require('uglifyjs-webpack-plugin') | |||||
| // const UglifyJsPlugin = require('uglifyjs-webpack-plugin') | |||||
| module.exports = { | module.exports = { | ||||
| css: { | css: { | ||||
| @@ -47,18 +47,18 @@ module.exports = { | |||||
| lintOnSave: false, | lintOnSave: false, | ||||
| publicPath: './', // 打包后引用的资源路径 | publicPath: './', // 打包后引用的资源路径 | ||||
| configureWebpack: { | |||||
| plugins: [ | |||||
| //打包环境去掉console.log | |||||
| new UglifyJsPlugin({ | |||||
| uglifyOptions: { | |||||
| compress: { | |||||
| drop_console: true, //注释console | |||||
| drop_debugger: true, //注释debugger | |||||
| pure_funcs: ['console.log'], //移除console.log | |||||
| }, | |||||
| }, | |||||
| }), | |||||
| ], | |||||
| } | |||||
| // configureWebpack: { | |||||
| // plugins: [ | |||||
| // //打包环境去掉console.log | |||||
| // new UglifyJsPlugin({ | |||||
| // uglifyOptions: { | |||||
| // compress: { | |||||
| // drop_console: true, //注释console | |||||
| // drop_debugger: true, //注释debugger | |||||
| // pure_funcs: ['console.log'], //移除console.log | |||||
| // }, | |||||
| // }, | |||||
| // }), | |||||
| // ], | |||||
| // } | |||||
| } | } | ||||
| @@ -6403,11 +6403,6 @@ send@0.18.0: | |||||
| range-parser "~1.2.1" | range-parser "~1.2.1" | ||||
| statuses "2.0.1" | statuses "2.0.1" | ||||
| serialize-javascript@^1.7.0: | |||||
| version "1.9.1" | |||||
| resolved "https://registry.yarnpkg.com/serialize-javascript/-/serialize-javascript-1.9.1.tgz#cfc200aef77b600c47da9bb8149c943e798c2fdb" | |||||
| integrity sha512-0Vb/54WJ6k5v8sSWN09S0ora+Hnr+cX40r9F170nT+mSkaxltoE/7R3OrIdBSUv1OoiobH1QoWQbCnAO+e8J1A== | |||||
| serialize-javascript@^4.0.0: | serialize-javascript@^4.0.0: | ||||
| version "4.0.0" | version "4.0.0" | ||||
| resolved "https://registry.npmmirror.com/serialize-javascript/-/serialize-javascript-4.0.0.tgz#b525e1238489a5ecfc42afacc3fe99e666f4b1aa" | resolved "https://registry.npmmirror.com/serialize-javascript/-/serialize-javascript-4.0.0.tgz#b525e1238489a5ecfc42afacc3fe99e666f4b1aa" | ||||
| @@ -7255,26 +7250,6 @@ uglify-js@3.4.x: | |||||
| commander "~2.19.0" | commander "~2.19.0" | ||||
| source-map "~0.6.1" | source-map "~0.6.1" | ||||
| uglify-js@^3.6.0: | |||||
| version "3.17.4" | |||||
| resolved "https://registry.yarnpkg.com/uglify-js/-/uglify-js-3.17.4.tgz#61678cf5fa3f5b7eb789bb345df29afb8257c22c" | |||||
| integrity sha512-T9q82TJI9e/C1TAxYvfb16xO120tMVFZrGA3f9/P4424DNu6ypK103y0GPFVa17yotwSyZW5iYXgjYHkGrJW/g== | |||||
| uglifyjs-webpack-plugin@^2.2.0: | |||||
| version "2.2.0" | |||||
| resolved "https://registry.yarnpkg.com/uglifyjs-webpack-plugin/-/uglifyjs-webpack-plugin-2.2.0.tgz#e75bc80e7f1937f725954c9b4c5a1e967ea9d0d7" | |||||
| integrity sha512-mHSkufBmBuJ+KHQhv5H0MXijtsoA1lynJt1lXOaotja8/I0pR4L9oGaPIZw+bQBOFittXZg9OC1sXSGO9D9ZYg== | |||||
| dependencies: | |||||
| cacache "^12.0.2" | |||||
| find-cache-dir "^2.1.0" | |||||
| is-wsl "^1.1.0" | |||||
| schema-utils "^1.0.0" | |||||
| serialize-javascript "^1.7.0" | |||||
| source-map "^0.6.1" | |||||
| uglify-js "^3.6.0" | |||||
| webpack-sources "^1.4.0" | |||||
| worker-farm "^1.7.0" | |||||
| unbox-primitive@^1.0.2: | unbox-primitive@^1.0.2: | ||||
| version "1.0.2" | version "1.0.2" | ||||
| resolved "https://registry.npmmirror.com/unbox-primitive/-/unbox-primitive-1.0.2.tgz#29032021057d5e6cdbd08c5129c226dff8ed6f9e" | resolved "https://registry.npmmirror.com/unbox-primitive/-/unbox-primitive-1.0.2.tgz#29032021057d5e6cdbd08c5129c226dff8ed6f9e" | ||||