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