| @@ -1,19 +1,27 @@ | |||
| # home | |||
| # SuiMang-Wap | |||
| 下载依赖包 | |||
| ## Project setup | |||
| ``` | |||
| npm install | |||
| ``` | |||
| ### Compiles and hot-reloads for development | |||
| ### 启动项目 | |||
| ``` | |||
| npm run serve | |||
| npm run dev | |||
| ``` | |||
| ### Compiles and minifies for production | |||
| ### 打包项目 | |||
| ``` | |||
| 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 | |||
| * @return string | |||
| */ | |||
| @@ -37,12 +37,12 @@ export function formatSeconds(value) { | |||
| theTime1 = parseInt(theTime1 % 60); | |||
| } | |||
| } | |||
| var result = "" + parseInt(theTime) + "秒"; | |||
| var result = "" + parseInt(theTime) + " 秒"; | |||
| if (theTime1 > 0) { | |||
| result = "" + parseInt(theTime1) + "分" + result; | |||
| result = "" + parseInt(theTime1) + " 分" + result; | |||
| } | |||
| if (theTime2 > 0) { | |||
| result = "" + parseInt(theTime2) + "小时" + result; | |||
| result = "" + parseInt(theTime2) + " 小时" + result; | |||
| } | |||
| return result; | |||
| } | |||
| @@ -101,10 +101,13 @@ | |||
| </template> | |||
| <script> | |||
| // 组件 | |||
| import Vue from "vue"; | |||
| import { mapState, mapActions } from "vuex"; | |||
| import { Toast } from "vant"; | |||
| import { mapState, mapActions } from "vuex"; | |||
| // 工具 | |||
| import { scrollToID } from "../../utils"; | |||
| // 接口 | |||
| import { | |||
| getCodeByPhone, | |||
| doLoginByPhone, | |||
| @@ -14,11 +14,7 @@ | |||
| @click="goDetail(item)" | |||
| > | |||
| <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 == 1" 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 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"; | |||
| @@ -131,6 +132,7 @@ export default { | |||
| } | |||
| }, | |||
| // 将获取到的视频详情(视频时长、视频容量)加入视频列表 | |||
| getDetailJoinList(list) { | |||
| const that = this; | |||
| console.log(list, "list"); | |||
| @@ -138,7 +140,11 @@ export default { | |||
| list.forEach(async (val) => { | |||
| if (val.videoStatus == 2 && 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.videoList[i], | |||
| "videoSize", | |||
| @@ -153,6 +159,9 @@ export default { | |||
| }); | |||
| }, | |||
| /** | |||
| * @description 通过视频id获取视频详情 | |||
| */ | |||
| async getVideoDetialById(id) { | |||
| try { | |||
| const res = await doGetVideoDetialById(id); | |||
| @@ -240,7 +249,7 @@ export default { | |||
| width: 150px; | |||
| height: 100px; | |||
| // background-color: #979797; | |||
| video { | |||
| img { | |||
| position: absolute; | |||
| width: 150px; | |||
| height: 100px; | |||