浏览代码

更换声音与录入文案

release
HolyKnightIX 2 年前
父节点
当前提交
6cabdff4ea
共有 9 个文件被更改,包括 643 次插入9 次删除
  1. +1
    -1
      src/api/baseUrl.js
  2. 二进制
      src/assets/img/exit.png
  3. +8
    -4
      src/components/common/head.vue
  4. +22
    -2
      src/router/index.js
  5. +6
    -1
      src/views/model/chooseModel.vue
  6. +210
    -0
      src/views/model/getPaper.vue
  7. +231
    -0
      src/views/model/modelDetail.vue
  8. +165
    -0
      src/views/model/selectSound.vue
  9. +0
    -1
      src/views/myPage/myPage.vue

+ 1
- 1
src/api/baseUrl.js 查看文件

@@ -1,2 +1,2 @@
const baseUrl = ' https://smapitest.malls.iformall.com/C'
const baseUrl = 'https://smapitest.malls.iformall.com/C'
export default baseUrl

二进制
src/assets/img/exit.png 查看文件

之前 之后
宽度: 200  |  高度: 200  |  大小: 3.8 KiB

+ 8
- 4
src/components/common/head.vue 查看文件

@@ -1,10 +1,14 @@
<template>
<div class="page">
<div class="logoBox" @click="go('/')">
<img src="../../assets/img/LOGO1.png" class="logo" />
<div class="logoBox">
<img src="../../assets/img/LOGO1.png" class="logo" @click="go('/')" />
<div class="userInfo">
<div>用户名</div>
<img class="userImg" src="../../assets/img/user center.png" />
<div @click="go('/myPage')">用户名</div>
<img
class="userImg"
src="../../assets/img/user center.png"
@click="go('/myPage')"
/>
</div>
</div>
</div>


+ 22
- 2
src/router/index.js 查看文件

@@ -42,14 +42,34 @@ const routes = [
// component: Home
component: () => import("../views/myPage/myPage"),
},
// 创作中心首页
// 选择模板
{
path: '/chooseModel',
name: 'chooseModel',
// component: Home
component: () => import("../views/model/chooseModel"),
},

// 模板详情
{
path: '/modelDetail',
name: 'modelDetail',
// component: Home
component: () => import("../views/model/modelDetail"),
},
// 选择语音
{
path: '/selectSound',
name: 'selectSound',
// component: Home
component: () => import("../views/model/selectSound"),
},
// 录入文案
{
path: '/getPaper',
name: 'getPaper',
// component: Home
component: () => import("../views/model/getPaper"),
},
]

const router = new VueRouter({


+ 6
- 1
src/views/model/chooseModel.vue 查看文件

@@ -102,7 +102,12 @@ export default {
});
},
goDetail(id) {
console.log(id);
this.$router.push({
path: "/modelDetail",
query: {
id: id,
},
});
},
},
created() {


+ 210
- 0
src/views/model/getPaper.vue 查看文件

@@ -0,0 +1,210 @@
<template>
<div>
<HeadTop />
<div class="chooseModel">
<div class="active">选择模板</div>
<div class="active">录入文案</div>
<div>合成视频</div>
</div>
<div class="img">
<img :src="modelDetail.coverImg" />
<div class="title">{{ modelDetail.title }}</div>
</div>
<div class="inpuType">
<div class="text">文字输入</div>
<div class="voice">语音输入</div>
</div>
<div class="textarea">
<textarea
v-model="paperwork"
cols="55"
rows="15"
placeholder="写点什么"
></textarea>
<div class="limit">15000字 约100分钟</div>
<div class="try">试听</div>
</div>
<div class="bottomBtn">
<div class="back" @click="back">上一步</div>
<div class="next" @click="goNext">下一步</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";

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

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

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

back() {
this.$router.back();
},
goNext() {
const AccessToken = localStorage.getItem("AccessToken");
const data = {
// id: "",
type: 1,
personMouldId: this.modelDetail.id, //模板id
personMouldPath: this.modelDetail.mouldPath, //模板标识
paperwork: this.paperwork,
title: this.modelDetail.title,
// 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("登录过期,请重新登录!");
}
})
.catch((err) => {
Toast.fail(err.message);
});
},
},
created() {
this.modelDetail = this.$route.query.modelDetail;
},
};
</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;
}
}
}
.img {
margin: 25px auto;
text-align: center;
img {
width: 300px;
height: 180px;
background-color: grey;
}
.title {
font-size: 15px;
margin-top: 15px;
}
}
.inpuType {
display: flex;
justify-content: space-between;
padding: 0 90px;
margin-bottom: 25px;
div {
width: 80px;
height: 28px;
line-height: 28px;
text-align: center;
border: 1px solid #000;
border-radius: 5px;
&.text {
color: #fff;
border: 1px solid #00ccff;
background-color: #00ccff;
border: none;
}
&.voice {
color: #0000004b;
border: 1px solid #0000004b;
}
}
}
.textarea {
position: relative;
text-align: center;
margin-bottom: 60px;
textarea {
border: 1px solid #00000080;
}
.limit {
position: absolute;
left: 25px;
bottom: 10px;
}
.try {
position: absolute;
left: 20px;
bottom: -35px;
width: 80px;
height: 25px;
line-height: 25px;
text-align: center;
color: #0000004b;
border: 1px solid #0000004b;
border-radius: 5px;
}
}
.bottomBtn {
display: flex;
justify-content: space-between;
padding: 0 75px;
margin-bottom: 20px;
div {
width: 100px;
height: 30px;
color: #484848;
line-height: 30px;
text-align: center;
border: 1px solid #484848;
border-radius: 7px;
&.next {
color: #fff;
border: 1px solid #00ccff;
background-color: #00ccff;
}
}
}
</style>

+ 231
- 0
src/views/model/modelDetail.vue 查看文件

@@ -0,0 +1,231 @@
<template>
<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">高级设置</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";

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);
},

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("登录过期,请重新登录!");
}
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.mouldPath, //模板标识
// 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("登录过期,请重新登录!");
}
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);
},
};
</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>

+ 165
- 0
src/views/model/selectSound.vue 查看文件

@@ -0,0 +1,165 @@
<template>
<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";

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("登录过期,请重新登录!");
}
this.soundList = res.data.data.list;
})
.catch((err) => {
Toast.fail(err.message);
});
},
},
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>

+ 0
- 1
src/views/myPage/myPage.vue 查看文件

@@ -84,7 +84,6 @@ export default {
},
})
.then((res) => {
console.log(res, "res");
if (res.data.code == 1052) {
this.$router.push("/login");
Toast.fail("登录过期,请重新登录!");


正在加载...
取消
保存