| @@ -1,2 +1,2 @@ | |||||
| const baseUrl = ' https://smapitest.malls.iformall.com/C' | |||||
| const baseUrl = 'https://smapitest.malls.iformall.com/C' | |||||
| export default baseUrl | export default baseUrl | ||||
| @@ -1,10 +1,14 @@ | |||||
| <template> | <template> | ||||
| <div class="page"> | <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 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> | </div> | ||||
| </div> | </div> | ||||
| @@ -42,14 +42,34 @@ const routes = [ | |||||
| // component: Home | // component: Home | ||||
| component: () => import("../views/myPage/myPage"), | component: () => import("../views/myPage/myPage"), | ||||
| }, | }, | ||||
| // 创作中心首页 | |||||
| // 选择模板 | |||||
| { | { | ||||
| path: '/chooseModel', | path: '/chooseModel', | ||||
| name: 'chooseModel', | name: 'chooseModel', | ||||
| // component: Home | // component: Home | ||||
| component: () => import("../views/model/chooseModel"), | 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({ | const router = new VueRouter({ | ||||
| @@ -102,7 +102,12 @@ export default { | |||||
| }); | }); | ||||
| }, | }, | ||||
| goDetail(id) { | goDetail(id) { | ||||
| console.log(id); | |||||
| this.$router.push({ | |||||
| path: "/modelDetail", | |||||
| query: { | |||||
| id: id, | |||||
| }, | |||||
| }); | |||||
| }, | }, | ||||
| }, | }, | ||||
| created() { | created() { | ||||
| @@ -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> | |||||
| @@ -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> | |||||
| @@ -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> | |||||
| @@ -84,7 +84,6 @@ export default { | |||||
| }, | }, | ||||
| }) | }) | ||||
| .then((res) => { | .then((res) => { | ||||
| console.log(res, "res"); | |||||
| if (res.data.code == 1052) { | if (res.data.code == 1052) { | ||||
| this.$router.push("/login"); | this.$router.push("/login"); | ||||
| Toast.fail("登录过期,请重新登录!"); | Toast.fail("登录过期,请重新登录!"); | ||||