| @@ -1,19 +1,27 @@ | |||||
| # home | |||||
| # SuiMang-Wap | |||||
| 下载依赖包 | |||||
| ## Project setup | |||||
| ``` | ``` | ||||
| npm install | npm install | ||||
| ``` | ``` | ||||
| ### Compiles and hot-reloads for development | |||||
| ### 启动项目 | |||||
| ``` | ``` | ||||
| npm run serve | |||||
| npm run dev | |||||
| ``` | ``` | ||||
| ### Compiles and minifies for production | |||||
| ### 打包项目 | |||||
| ``` | ``` | ||||
| npm run build | npm run build | ||||
| ``` | ``` | ||||
| ### Customize configuration | |||||
| See [Configuration Reference](https://cli.vuejs.org/config/). | |||||
| **若要稳定运行此项目,请确保node版本为v10.24.1,且运行忽略node版本检查** | |||||
| ``` | |||||
| yarn config set ignore-engines true | |||||
| ``` | |||||
| 项目根目录下配置有模板vue文件“model.vue”,已配置进入动画、回到顶部等功能,可以此为基础添加页面。 | |||||
| @@ -1,2 +0,0 @@ | |||||
| const baseUrl = 'https://smapitest.malls.iformall.com/C' | |||||
| export default baseUrl | |||||
| @@ -1,33 +0,0 @@ | |||||
| <template> | |||||
| <div></div> | |||||
| </template> | |||||
| <script> | |||||
| import Vue from "vue"; | |||||
| import { mapState, mapActions } from "vuex"; | |||||
| import { Toast } from "vant"; | |||||
| import baseUrl from "../../api/baseUrl"; | |||||
| Vue.use(Toast); | |||||
| export default { | |||||
| data() { | |||||
| return {}; | |||||
| }, | |||||
| computed: { | |||||
| ...mapState({ | |||||
| characters: (state) => state.publicObj.characters, | |||||
| }), | |||||
| }, | |||||
| methods: { | |||||
| ...mapActions(["setCharacters"]), | |||||
| go(url) { | |||||
| this.$router.push(url); | |||||
| }, | |||||
| }, | |||||
| created() {}, | |||||
| }; | |||||
| </script> | |||||
| <style lang="scss" scoped></style> | |||||
| @@ -0,0 +1,53 @@ | |||||
| <template> | |||||
| <div :class="inPage ? 'page active' : 'page'"> | |||||
| <div id="top"></div> | |||||
| </div> | |||||
| </template> | |||||
| <script> | |||||
| // 组件 | |||||
| import Vue from "vue"; | |||||
| import { Toast } from "vant"; | |||||
| import { mapState, mapActions } from "vuex"; | |||||
| // 工具 | |||||
| import { scrollToID } from "../../utils"; | |||||
| Vue.use(Toast); | |||||
| export default { | |||||
| data() { | |||||
| return { | |||||
| inPage: false, | |||||
| }; | |||||
| }, | |||||
| computed: { | |||||
| ...mapState({ | |||||
| characters: (state) => state.publicObj.characters, | |||||
| }), | |||||
| }, | |||||
| methods: { | |||||
| ...mapActions(["setCharacters"]), | |||||
| go(url) { | |||||
| this.$router.push(url); | |||||
| }, | |||||
| }, | |||||
| created() {}, | |||||
| mounted() { | |||||
| this.inPage = true; | |||||
| scrollToID("top"); | |||||
| }, | |||||
| }; | |||||
| </script> | |||||
| <style lang="scss" scoped> | |||||
| .page { | |||||
| transform: translateX(100%); | |||||
| opacity: 0; | |||||
| transition: all 0.3s; | |||||
| &.active { | |||||
| opacity: 1; | |||||
| transform: translateX(0); | |||||
| } | |||||
| } | |||||
| </style> | |||||
| @@ -21,7 +21,7 @@ export function bytesToSize(bytes) { | |||||
| } | } | ||||
| /** | /** | ||||
| * @description 秒转时分秒 | |||||
| * @description 秒转化时分秒 | |||||
| * @param {number} seconds | * @param {number} seconds | ||||
| * @return string | * @return string | ||||
| */ | */ | ||||
| @@ -37,12 +37,12 @@ export function formatSeconds(value) { | |||||
| theTime1 = parseInt(theTime1 % 60); | theTime1 = parseInt(theTime1 % 60); | ||||
| } | } | ||||
| } | } | ||||
| var result = "" + parseInt(theTime) + "秒"; | |||||
| var result = "" + parseInt(theTime) + " 秒"; | |||||
| if (theTime1 > 0) { | if (theTime1 > 0) { | ||||
| result = "" + parseInt(theTime1) + "分" + result; | |||||
| result = "" + parseInt(theTime1) + " 分" + result; | |||||
| } | } | ||||
| if (theTime2 > 0) { | if (theTime2 > 0) { | ||||
| result = "" + parseInt(theTime2) + "小时" + result; | |||||
| result = "" + parseInt(theTime2) + " 小时" + result; | |||||
| } | } | ||||
| return result; | return result; | ||||
| } | } | ||||
| @@ -101,10 +101,13 @@ | |||||
| </template> | </template> | ||||
| <script> | <script> | ||||
| // 组件 | |||||
| import Vue from "vue"; | import Vue from "vue"; | ||||
| import { mapState, mapActions } from "vuex"; | |||||
| import { Toast } from "vant"; | import { Toast } from "vant"; | ||||
| import { mapState, mapActions } from "vuex"; | |||||
| // 工具 | |||||
| import { scrollToID } from "../../utils"; | import { scrollToID } from "../../utils"; | ||||
| // 接口 | |||||
| import { | import { | ||||
| getCodeByPhone, | getCodeByPhone, | ||||
| doLoginByPhone, | doLoginByPhone, | ||||
| @@ -14,11 +14,7 @@ | |||||
| @click="goDetail(item)" | @click="goDetail(item)" | ||||
| > | > | ||||
| <div class="videoPrv"> | <div class="videoPrv"> | ||||
| <video | |||||
| :src=" | |||||
| 'https://smapitest.malls.iformall.com/myVideo/' + item.videoPath | |||||
| " | |||||
| /> | |||||
| <img src="../../assets/img/BG@2x.png" /> | |||||
| <div v-if="item.videoStatus == 0" class="cover">草稿</div> | <div v-if="item.videoStatus == 0" class="cover">草稿</div> | ||||
| <div v-if="item.videoStatus == 1" class="cover">视频生成中</div> | <div v-if="item.videoStatus == 1" class="cover">视频生成中</div> | ||||
| <div v-if="item.videoStatus == 3" class="cover">视频生成失败</div> | <div v-if="item.videoStatus == 3" class="cover">视频生成失败</div> | ||||
| @@ -55,7 +51,12 @@ import { Toast } from "vant"; | |||||
| 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 { bytesToSize, timestampToTime, scrollToID } from "../../utils"; | |||||
| import { | |||||
| bytesToSize, | |||||
| timestampToTime, | |||||
| scrollToID, | |||||
| formatSeconds, | |||||
| } from "../../utils"; | |||||
| // 接口 | // 接口 | ||||
| import { getVideoList, doGetVideoDetialById } from "../../api/myPage"; | import { getVideoList, doGetVideoDetialById } from "../../api/myPage"; | ||||
| @@ -131,6 +132,7 @@ export default { | |||||
| } | } | ||||
| }, | }, | ||||
| // 将获取到的视频详情(视频时长、视频容量)加入视频列表 | |||||
| getDetailJoinList(list) { | getDetailJoinList(list) { | ||||
| const that = this; | const that = this; | ||||
| console.log(list, "list"); | console.log(list, "list"); | ||||
| @@ -138,7 +140,11 @@ export default { | |||||
| list.forEach(async (val) => { | list.forEach(async (val) => { | ||||
| if (val.videoStatus == 2 && val.videoId) { | if (val.videoStatus == 2 && val.videoId) { | ||||
| const videoData = await that.getVideoDetialById(val.videoId); | const videoData = await that.getVideoDetialById(val.videoId); | ||||
| that.$set(that.videoList[i], "videoTime", videoData.duration); | |||||
| that.$set( | |||||
| that.videoList[i], | |||||
| "videoTime", | |||||
| formatSeconds(videoData.duration) | |||||
| ); | |||||
| that.$set( | that.$set( | ||||
| that.videoList[i], | that.videoList[i], | ||||
| "videoSize", | "videoSize", | ||||
| @@ -153,6 +159,9 @@ export default { | |||||
| }); | }); | ||||
| }, | }, | ||||
| /** | |||||
| * @description 通过视频id获取视频详情 | |||||
| */ | |||||
| async getVideoDetialById(id) { | async getVideoDetialById(id) { | ||||
| try { | try { | ||||
| const res = await doGetVideoDetialById(id); | const res = await doGetVideoDetialById(id); | ||||
| @@ -240,7 +249,7 @@ export default { | |||||
| width: 150px; | width: 150px; | ||||
| height: 100px; | height: 100px; | ||||
| // background-color: #979797; | // background-color: #979797; | ||||
| video { | |||||
| img { | |||||
| position: absolute; | position: absolute; | ||||
| width: 150px; | width: 150px; | ||||
| height: 100px; | height: 100px; | ||||