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