@@ -23,4 +23,3 @@ export function doGetVideoDetialById(id) { | |||
method: 'get', | |||
}) | |||
} | |||
@@ -1,8 +0,0 @@ | |||
/** | |||
* @description:使用JSON进行深度拷贝 | |||
*/ | |||
const deepCopy = data => { | |||
const copyData = JSON.stringify(data) | |||
return JSON.parse(copyData) | |||
} | |||
export default deepCopy |
@@ -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 | |||
@@ -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) | |||
@@ -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 |
@@ -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, | |||
@@ -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, | |||
@@ -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"; | |||
@@ -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, | |||
@@ -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, | |||
@@ -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> |
@@ -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> |
@@ -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); | |||