Browse Source

通用工具组整合

release
HolyKnightIX 2 years ago
parent
commit
5be2ca5087
13 changed files with 101 additions and 449 deletions
  1. +0
    -1
      src/api/myPage.js
  2. +0
    -8
      src/utils/deepCopy.js
  3. +63
    -2
      src/utils/index.js
  4. +2
    -0
      src/utils/request.js
  5. +0
    -12
      src/utils/scrollToID.js
  6. +1
    -1
      src/views/login/login.vue
  7. +1
    -2
      src/views/model/chooseModel.vue
  8. +1
    -2
      src/views/model/downloadVideo.vue
  9. +1
    -2
      src/views/model/generateVideo.vue
  10. +1
    -1
      src/views/model/getPaper.vue
  11. +0
    -242
      src/views/model/modelDetail.vue
  12. +0
    -171
      src/views/model/selectSound.vue
  13. +31
    -5
      src/views/myPage/myPage.vue

+ 0
- 1
src/api/myPage.js View File

@@ -23,4 +23,3 @@ export function doGetVideoDetialById(id) {
method: 'get',
})
}


+ 0
- 8
src/utils/deepCopy.js View File

@@ -1,8 +0,0 @@
/**
* @description:使用JSON进行深度拷贝
*/
const deepCopy = data => {
const copyData = JSON.stringify(data)
return JSON.parse(copyData)
}
export default deepCopy

src/utils/timestampToTime.js → src/utils/index.js View File

@@ -1,3 +1,64 @@
/**
* @description:使用JSON进行深度拷贝
*/
export function deepCopy(data) {
const copyData = JSON.stringify(data)
return JSON.parse(copyData)
}

/**
* @description 将bytes转化
* @param {number} bytes
* @return string
*/
export function bytesToSize(bytes) {
if (bytes === 0) return '0 B';
var k = 1000, // or 1024
sizes = ['B', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'],
i = Math.floor(Math.log(bytes) / Math.log(k));

return (bytes / Math.pow(k, i)).toPrecision(3) + ' ' + sizes[i];
}

/**
* @description 秒转时分秒
* @param {number} seconds
* @return string
*/
export function formatSeconds(value) {
var theTime = parseInt(value);// 秒
var theTime1 = 0;// 分
var theTime2 = 0;// 小时
if (theTime > 60) {
theTime1 = parseInt(theTime / 60);
theTime = parseInt(theTime % 60);
if (theTime1 > 60) {
theTime2 = parseInt(theTime1 / 60);
theTime1 = parseInt(theTime1 % 60);
}
}
var result = "" + parseInt(theTime) + "秒";
if (theTime1 > 0) {
result = "" + parseInt(theTime1) + "分" + result;
}
if (theTime2 > 0) {
result = "" + parseInt(theTime2) + "小时" + result;
}
return result;
}

/**
* @description:滚动到对应id的位置
* @param {type} id
*/
export function scrollToID(id) {
document.querySelector("#" + id).scrollIntoView({
behavior: "smooth",
block: "start",
inline: "nearest",
});
}

/**
* @description 根据时间戳获取时间
* @param {*} timestamp 必传,number类型,时间戳数据(10位及以下,10位至13位)
@@ -5,7 +66,7 @@
* @returns 根据要求的时间格式
* @version V 1.0, Created by YWQ, 2022.10.20
*/
const timestampToTime = (timestamp, format) => {
export function timestampToTime(timestamp, format) {
//时间戳为10位需*1000,时间戳为13位不需乘1000
const length = timestamp.length
if (length <= 10) {
@@ -44,4 +105,4 @@ const timestampToTime = (timestamp, format) => {
return Y + "-" + M + "-" + D
}
}
export default timestampToTime

+ 2
- 0
src/utils/request.js View File

@@ -38,10 +38,12 @@ request.interceptors.response.use(
router.push("/login");
Toast.fail("登录过期,请重新登录!");
return

} else if (code == 1053) {
router.push("/login");
Toast.fail("请您先登录!");
return

} else if (code == 500) {
Toast.fail("系统异常,请稍后再试");
return Promise.reject(response.data)


+ 0
- 12
src/utils/scrollToID.js View File

@@ -1,12 +0,0 @@
/**
* @description:滚动到对应id的位置
* @param {type} id
*/
const scrollToID = id => {
document.querySelector("#" + id).scrollIntoView({
behavior: "smooth",
block: "start",
inline: "nearest",
});
}
export default scrollToID

+ 1
- 1
src/views/login/login.vue View File

@@ -104,7 +104,7 @@
import Vue from "vue";
import { mapState, mapActions } from "vuex";
import { Toast } from "vant";
import scrollToID from "../../utils/scrollToID";
import { scrollToID } from "../../utils";
import {
getCodeByPhone,
doLoginByPhone,


+ 1
- 2
src/views/model/chooseModel.vue View File

@@ -49,8 +49,7 @@ import Vue from "vue";
import { mapState, mapActions } from "vuex";
import HeadTop from "./../../components/common/head.vue";
import { Toast } from "vant";
import baseUrl from "../../api/baseUrl";
import scrollToID from "../../utils/scrollToID";
import { scrollToID } from "../../utils";
import {
getModeList,
getModeDetailById,


+ 1
- 2
src/views/model/downloadVideo.vue View File

@@ -28,8 +28,7 @@ import Vue from "vue";
import { Toast } from "vant";
import { mapState, mapActions } from "vuex";
import HeadTop from "./../../components/common/head.vue";
import scrollToID from "../../utils/scrollToID";
import deepCopy from "../../utils/deepCopy";
import { scrollToID, deepCopy } from "../../utils";

import { doGetVideoDetialById } from "../../api/downloadVideo";



+ 1
- 2
src/views/model/generateVideo.vue View File

@@ -87,8 +87,7 @@ import Vue from "vue";
import { Toast } from "vant";
import { mapState, mapActions } from "vuex";
import HeadTop from "./../../components/common/head.vue";
import scrollToID from "../../utils/scrollToID";
import deepCopy from "../../utils/deepCopy";
import { scrollToID, deepCopy } from "../../utils";

import {
doCreateVideo,


+ 1
- 1
src/views/model/getPaper.vue View File

@@ -30,7 +30,7 @@ import Vue from "vue";
import { Toast } from "vant";
import { mapState, mapActions } from "vuex";
import HeadTop from "./../../components/common/head.vue";
import scrollToID from "../../utils/scrollToID";
import { scrollToID } from "../../utils";

import {
getModelDetailById,


+ 0
- 242
src/views/model/modelDetail.vue View File

@@ -1,242 +0,0 @@
<template>
<div>
<div id="top"></div>
<HeadTop />
<div class="chooseModel">
<div :class="phase == 1 ? 'active' : ''">选择模板</div>
<div :class="phase == 2 ? 'active' : ''">录入文案</div>
<div :class="phase == 3 ? 'active' : ''">合成视频</div>
</div>
<div class="content">
<img class="coverImg" :src="modelDetail.coverImg" />
<div class="desCard">
<div class="name">{{ modelDetail.title }}</div>
<div class="age">
<span>年龄:{{ modelDetail.age }}</span>
<span>性别:{{ getSex(modelDetail.sex) }}</span>
</div>
<div class="mouldPatchSign">
适用场景:<span>{{ modelDetail.mouldPatchSign || "暂无" }}</span>
</div>
<div class="desc">人物简介:{{ modelDetail.detail || "暂无" }}</div>
<span class="sound">声音:默认</span>
<span class="selectSound" @click="goSelectSound">更换声音</span>
</div>
<div class="bottomBtn">
<div class="set" @click="back">上一步</div>
<div class="next" @click="goNext">下一步</div>
</div>
</div>
</div>
</template>

<script>
import Vue from "vue";
import { mapState, mapActions } from "vuex";
import HeadTop from "./../../components/common/head.vue";
import { Toast } from "vant";
import baseUrl from "../../api/baseUrl";
import scrollToID from "../../utils/scrollToID";

Vue.use(Toast);
export default {
components: {
HeadTop,
},
data() {
return {
phase: 1,
modelDetail: {},
};
},
computed: {
...mapState({
characters: (state) => state.publicObj.characters,
}),
},

methods: {
...mapActions(["setCharacters"]),

go(url) {
this.$router.push(url);
},

back() {
this.$router.back();
},

getSex(num) {
if (num == 1) {
return "男";
} else if (num == 2) {
return "女";
}
},

goSelectSound() {
this.$router.push("/selectSound");
},

getModeDetail(id) {
const AccessToken = localStorage.getItem("AccessToken");
this.$axios({
method: "get",
url: `${baseUrl}/api/mouldPatch/findById?id=${id}`,
headers: {
"Content-Type": "application/json;charset=UTF-8",
token: AccessToken,
},
})
.then((res) => {
if (res.data.code == 1052) {
this.$router.push("/login");
Toast.fail("登录过期,请重新登录!");
return;
}
this.modelDetail = res.data.data;
})
.catch((err) => {
Toast.fail(err.message);
});
},
goNext() {
const AccessToken = localStorage.getItem("AccessToken");
const data = {
// id: "",
type: 1,
personMouldId: this.modelDetail.id, //模板id
personMouldPath: this.modelDetail.mouldSmId, //模板标识
// voiceMouldId: "",
// voiceMouldId: "",
};
this.$axios({
method: "post",
url: `${baseUrl}/api/userVideo/saveOrUpdate`,
headers: {
"Content-Type": "application/json;charset=UTF-8",
token: AccessToken,
},
data,
})
.then((res) => {
if (res.data.code == 1052) {
this.$router.push("/login");
Toast.fail("登录过期,请重新登录!");
return;
}
this.$router.push({
path: "/getPaper",
query: {
modelDetail: this.modelDetail,
},
});
})
.catch((err) => {
Toast.fail(err.message);
});
},
},
created() {
const id = this.$route.query.id;
this.getModeDetail(id);
},
mounted() {
scrollToID("top");
},
};
</script>

<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: 90%;
line-height: 32px;
text-align: center;
border: 1px solid #46464661;
&.active {
background-color: #00ccff;
color: #fff;
}
}
}
.content {
margin-top: 50px;
margin-bottom: 20px;
margin: auto;
text-align: center;
.coverImg {
width: 270px;
height: 350px;
}
.desCard {
width: 315px;
border: 1px solid #000;
margin: 20px auto;
text-align: left;
padding: 15px 18px;
div {
margin-bottom: 10px;
&.name {
font-size: 20px;
}
&.age {
font-size: 14px;
span {
margin-right: 15px;
}
}
&.mouldPatchSign {
font-size: 14px;
}
&.desc {
font-size: 14px;
}
}
.sound {
display: inline-block;
color: #00ccff;
margin-right: 15px;
}
.selectSound {
display: inline-block;
width: 100px;
height: 30px;
color: #fff;
line-height: 30px;
text-align: center;
border-radius: 5px;
background: linear-gradient(140deg, #6e60e9, #2867d4, #1ec2ae);
}
}
.bottomBtn {
display: flex;
justify-content: space-between;
padding: 0 75px;
margin-bottom: 20px;
div {
width: 100px;
height: 30px;
color: #868686;
line-height: 30px;
text-align: center;
border: 1px solid #bababa;
border-radius: 7px;
&.next {
color: #fff;
border: 1px solid #00ccff;
background-color: #00ccff;
}
}
}
}
</style>

+ 0
- 171
src/views/model/selectSound.vue View File

@@ -1,171 +0,0 @@
<template>
<div>
<div id="top"></div>
<HeadTop />
<div class="title">请选择需要更换的语音</div>
<div class="selectSex">
<div :class="sex == 1 ? 'active' : ''" @click="changeSex(1)">男声</div>
<div :class="sex == 2 ? 'active' : ''" @click="changeSex(2)">女声</div>
</div>
<div class="soundList">
<div class="item">声音名称</div>
<div class="item">声音名称</div>
<div class="item">声音名称</div>
<div class="item">声音名称</div>
<div class="item">声音名称</div>
<div class="item">声音名称</div>
<div class="item">声音名称</div>
<div class="item">声音名称</div>
<div class="item">声音名称</div>
<div class="item">声音名称</div>
<div class="item">声音名称</div>
<div class="item">声音名称</div>
</div>
<div class="bottomBtn">
<div class="confirm">确定</div>
<div class="back" @click="back">返回</div>
</div>
</div>
</template>

<script>
import Vue from "vue";
import { mapState, mapActions } from "vuex";
import HeadTop from "./../../components/common/head.vue";
import { Toast } from "vant";
import baseUrl from "../../api/baseUrl";
import scrollToID from "../../utils/scrollToID";

Vue.use(Toast);
export default {
components: {
HeadTop,
},
data() {
return {
sex: 2,
soundList: [],
};
},
computed: {
...mapState({
characters: (state) => state.publicObj.characters,
}),
},

methods: {
...mapActions(["setCharacters"]),

go(url) {
this.$router.push(url);
},

back() {
this.$router.back();
},

changeSex(sex) {
this.sex = sex;
this.getModeList(sex);
},

getModeList(sex) {
const AccessToken = localStorage.getItem("AccessToken");
this.$axios({
method: "get",
url: `${baseUrl}/api/mouldPatch/list?sex=${sex}&type=2&pageNum=1&pageSize=10`,
headers: {
"Content-Type": "application/json;charset=UTF-8",
token: AccessToken,
},
})
.then((res) => {
if (res.data.code == 1052) {
this.$router.push("/login");
Toast.fail("登录过期,请重新登录!");
return;
}
this.soundList = res.data.data.list;
})
.catch((err) => {
Toast.fail(err.message);
});
},
},
mounted() {
scrollToID("top");
},
created() {
this.getModeList(2);
},
};
</script>

<style lang="scss" scoped>
.title {
font-size: 18px;
font-weight: 700;
text-align: center;
margin: 20px 0;
}
.selectSex {
display: flex;
justify-content: space-between;
text-align: center;
margin-bottom: 25px;
padding: 0 110px;
div {
width: 50px;
height: 22px;
line-height: 22px;
border-radius: 5px;
border: 1px solid #000;
&.active {
border: 1px solid #00ccff;
background-color: #00ccff;
}
}
}
.soundList {
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
width: 290px;
border: 1px solid #000;
margin: auto;
padding: 20px;
padding-left: 45px;
.item {
width: 100px;
height: 30px;
line-height: 30px;
text-align: center;
border: 1px solid #000;
margin-right: 40px;
margin-bottom: 25px;
border-radius: 5px;
}
}
.bottomBtn {
display: flex;
justify-content: space-between;
padding: 0 75px;
margin-top: 30px;
margin-bottom: 20px;
div {
width: 100px;
height: 30px;
color: #4f4f4f;
line-height: 30px;
text-align: center;
border: 1px solid #4f4f4f;
border-radius: 7px;
&.confirm {
color: #fff;
border: 1px solid #ffffff00;
background-color: #00ccff;
}
}
}
</style>

+ 31
- 5
src/views/myPage/myPage.vue View File

@@ -29,7 +29,7 @@
{{ item.title || "暂无" }}
</div>
<div class="createTime">视频时长:{{ item.videoTime }}</div>
<div class="createTime">视频容量:{{ "46.5Mb" }}</div>
<div class="createTime">视频容量:{{ item.videoSize }}</div>
<div class="createTime">
创建时间:{{ changeTime(item.createDate, "YYYY-MM-DD hh:mm:ss") }}
</div>
@@ -49,12 +49,14 @@
</template>

<script>
// 组件
import Vue from "vue";
import HeadTop from "./../../components/common/head.vue";
import { mapState, mapActions } from "vuex";
import { Toast } from "vant";
import timestampToTime from "../../utils/timestampToTime";
import scrollToID from "../../utils/scrollToID";
import { mapState, mapActions } from "vuex";
import HeadTop from "./../../components/common/head.vue";
// 工具
import { bytesToSize, timestampToTime, scrollToID } from "../../utils";
// 接口
import { getVideoList, doGetVideoDetialById } from "../../api/myPage";

Vue.use(Toast);
@@ -121,6 +123,7 @@ export default {
const res = await getVideoList(pageNum, pageSize);
console.log(res, "获取作品列表");
this.videoList = res.data.list;
this.getDetailJoinList(this.videoList);
this.total = res.data.total;
} catch (error) {
console.log(error, "error");
@@ -128,10 +131,33 @@ export default {
}
},

getDetailJoinList(list) {
const that = this;
console.log(list, "list");
let i = 0;
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],
"videoSize",
bytesToSize(videoData.size)
);
that.$set(that.videoList[i], "coverUrl", videoData.coverURL);
} else {
that.$set(that.videoList[i], "videoTime", "无");
that.$set(that.videoList[i], "videoSize", "无");
}
i++;
});
},

async getVideoDetialById(id) {
try {
const res = await doGetVideoDetialById(id);
console.log(res, "通过视频id获取视频详情");
return res.data;
} catch (error) {
console.log(error, "error");
Toast.fail(error.message);


Loading…
Cancel
Save