|
- <template>
- <div :class="inPage ? 'page active' : 'page'">
- <div id="top"></div>
- <HeadTop />
- <!-- 中间内容区 -->
- <div class="vantLoadingBox" style="height: 550px" v-show="contentLoading">
- <van-loading type="spinner" color="#52d4e5" class="vantLoading" />
- </div>
- <div v-show="!contentLoading" class="content">
- <!-- 展示图片 -->
- <div class="shouModelImg">
- <div id="editPosition" class="editPosition" :class="videoType == 2 ? 'verticalmodel' : ''">
- <EditPosition ref="EditPosition" :proportion="proportion" :imgUrl="imgUrl" :materialList="materialList" :videoType="videoType"></EditPosition>
- </div>
- <!-- <img :src="imgUrl" alt="" /> -->
- <!-- 字幕 -->
- <!-- <div
- v-html="textareaContent"
- v-show="showSubtitle"
- class="shouModelImg-subtitle"
- ></div> -->
- </div>
- <!-- 文字 -->
- <div class="addText">
- <div class="addText-title">
- <img src="../../assets/icon/icon-text.png" alt="" />
- 添加文案
- </div>
- <div class="desalinate">
- <span>已录入{{ textareaContent.length }}字</span>
-
- <!-- <span>视频时长: 00:16</span> -->
- </div>
- </div>
- <!-- 标题框 -->
- <div class="textInput">
- <div class="textInput-in">
- <!-- 标题 -->
- <el-input v-model="inputTitle" placeholder="请输入标题">
- <template slot="append">
- <img src="../../assets/icon/icon-pencil.png" alt="" />
- </template>
- </el-input>
- <div class="divider" />
- <!-- 语音内容 -->
- <el-input placeholder="请输入文案" @change="loadVoice" rows="4" type="textarea" v-model="textareaContent"></el-input>
- </div>
- </div>
- <!-- 播报声音 -->
- <div class="addText">
- <div class="addText-title">
- <img src="../../assets/icon/icon-sound.png" alt="" />
- 选择播报声音
- <!-- <span class="redWord">(必选)</span> -->
- </div>
- <!-- 只有一级没有二级时 soundChoose.subTitle-->
- <div v-if="soundChoose.speakTypeStr && !soundChoose2">{{ soundChoose.title }} — {{ soundChoose.speakTypeStr }}</div>
- <!-- 有二级时 -->
- <div v-if="soundChoose2.speakTypeStr">{{ soundChoose2.title }} — {{ soundChoose2.speakTypeStr }}</div>
- </div>
- <button class="chooseSound" @click="clickBottomTab(1)">
- <img class="img" src="../../assets/icon/icon-microphone.png" alt="" />
- <span>选择声音</span>
- </button>
-
- <!-- 合成按钮 -->
- <div class="makeVideo" @click="submit(1)">立即制作</div>
- <!-- 上移下移 -->
- <div class="upAndBottomBtn">
- <div class="moveLayer" :class="videoType == 2 ? 'moveLayer1' : ''">
- <div class="btnContent" @click="$refs.EditPosition.controlImg(3)">
- <!-- <img src="https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPngf9bff6080bf29c6886ad614d479aebfb5fc41429c11c0bea78ca695a0f0e7388" alt="" /> -->
- <img src="../../assets/icon/icon-up.png" alt="" />
- 上移一层
- </div>
- </div>
- <div class="moveLayer below" :class="videoType == 2 ? 'below1' : ''">
- <div class="btnContent" @click="$refs.EditPosition.controlImg(4)">
- <!-- <img src="https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPngde1a7c84fc47b26095186ff9ee7ec07d7fe7bcd2cde90f3178f4edb8cdb08bcd" alt="" /> -->
- <img src="../../assets/icon/icon-down.png" alt="" />
- 下移一层
- </div>
- </div>
- </div>
- </div>
-
- <!-- 底部导航栏 -->
- <div v-show="!contentLoading" class="bottom">
- <van-tabbar class="bottom-tab">
- <!-- <van-tabbar-item @click="clickBottomTab(1)">
- <span>选择声音</span>
- <template #icon="props">
- <img src="../../assets/icon/icon-microphone.png" />
- </template>
- </van-tabbar-item> -->
- <van-tabbar-item @click="clickBottomTab(2)">
- <span>更改背景</span>
- <template #icon="props">
- <img src="../../assets/icon/icon-background.png" />
- </template>
- </van-tabbar-item>
- <van-tabbar-item @click="clickBottomTab(3)">
- <span>添加素材</span>
- <template #icon="props">
- <img src="../../assets/icon/icon-material.png" />
- </template>
- </van-tabbar-item>
- <!-- <van-tabbar-item @click="clickBottomTab(4)" disabled>
- <span v-show="showSubtitle">取消字幕</span>
- <span v-show="!showSubtitle">添加字幕</span>
- <template #icon="props">
- <img src="../../assets/icon/icon-subtitle.png" />
- </template>
- </van-tabbar-item> -->
- </van-tabbar>
- </div>
-
- <!-- 合成视频进度条 -->
- <div v-if="showSynthesisDialog" class="synthesisDialog" @touchmove.prevent="noScroll">
- <div class="synthesisDialog-in">
- <van-progress :percentage="percentageData" color="#7264F5" define-back-color="#f0effe" stroke-width="12" class="progress" />
- <div class="synthesisDialog-text">正在生成视频,请耐心等待!</div>
- <van-button type="default" @click="$router.push('/myPage')">回到主页</van-button>
- </div>
- </div>
-
- <!-- 点击tab栏弹出框 -->
- <van-action-sheet class="tabSheet" v-model="showTabSheet">
- <!-- 声音 -->
- <div v-show="bottomTabActive == 1">
- <!-- 顶部文字 -->
- <div class="tabSheet-title">
- <div>
- <img class="img" src="../../assets/icon/icon-microphone.png" alt="" />
- <span v-show="!showSoundList2">选择声音</span>
- <span v-show="showSoundList2">选择情绪</span>
- </div>
- <div @click="showTabSheet = !showTabSheet" v-show="showSoundList2">
- <img class="yesImg" src="../../assets/icon/icon-yes.png" alt="" />
- </div>
- </div>
-
- <!-- 主要内容 -->
- <div class="tabSheet-content">
- <!-- tab栏 -->
- <van-tabs v-if="!showSoundList2" color="#7264F5" line-width="46" line-height="6" title-inactive-color="#666" title-active-color="#333" v-model="soundListAction" swipeable>
- <van-tab v-for="(item, index) in soundTabList" :title="item" :key="index">
- <!-- 展示页 -->
- <div class="vantLoadingBox" style="height: 150px" v-show="soundLoading1">
- <van-loading type="spinner" color="#52d4e5" class="vantLoading" />
- </div>
- <div class="list" v-show="!soundLoading1">
- <div v-if="textareaContent.length == 0">输入文案后才可以选择声音哦~ ~</div>
- <div v-if="soundItemList.length == 0 && textareaContent.length != 0">{{ soundTips ? soundTips : '试试输入长一点的句子吧~ ~' }}</div>
-
- <template v-if="soundItemList.length != 0">
- <div @click="clickSoundItem(index, item)" class="listItem" :class="{ active: soundItemListAction == index }" v-for="(item, index) in soundItemList" :key="index">
- <img src="../../assets/icon/icon-earphone.png" alt="" />
- <div>
- {{ item.subTitle }}-{{ item.title }}
- <br />
- {{ item.ageTypeStr }}
- </div>
- </div>
- </template>
- </div>
- </van-tab>
- </van-tabs>
-
- <!-- 二级列表显示 -->
- <div v-if="showSoundList2" class="SoundList2">
- <div class="vantLoadingBox" style="height: 150px" v-show="soundLoading2">
- <van-loading type="spinner" color="#52d4e5" class="vantLoading" />
- </div>
- <div class="list" v-show="!soundLoading2">
- <div v-if="soundItemList2.length == 0">暂无数据</div>
- <template v-if="soundItemList.length != 0">
- <div @click="clickSoundItem2(index, item)" class="listItem" :class="{ active: soundItemListAction2 == index }" v-for="(item, index) in soundItemList2" :key="index">
- <img src="../../assets/icon/icon-earphone.png" alt="" />
- <div>{{ item.title }}-{{ item.speakTypeStr }}</div>
- </div>
- </template>
- </div>
- </div>
- </div>
- </div>
-
- <!-- 背景 -->
- <div v-show="bottomTabActive == 2">
- <!-- 顶部文字 -->
- <div class="tabSheet-title">
- <div>
- <img class="img" src="../../assets/icon/icon-background.png" alt="" />
- 更改背景
- </div>
- <div @click="sureImg">
- <img class="yesImg" src="../../assets/icon/icon-yes.png" alt="" />
- </div>
- </div>
- <!-- 主要内容 -->
- <div class="tabSheet-content">
- <!-- tab栏 -->
- <div class="myTab">
- <div @click="changeShowBGIList(0)" class="myTab-item" :class="{ active: bjAction == 0 }">
- <img src="../../assets/icon/icon-folder@2x.png" alt="" />
- 背景库
- </div>
- <div @click="changeShowBGIList(1)" class="myTab-item" :class="{ active: bjAction == 1 }">
- <img src="../../assets/icon/icon-upload@2x.png" alt="" />
- 我上传的
- </div>
- </div>
- <!-- 展示 -->
- <!-- <div v-if="systemBGIList.length == 0">暂无数据</div> -->
- <div class="myTab-show">
- <div class="myTab-show-title">
- 图片
- <i></i>
- </div>
- <!-- <div class="vantLoadingBox" style="height: 50px" v-show="bjLoading1">
- <van-loading type="spinner" color="#52d4e5" class="vantLoading" />
- </div> -->
- <div class="myTab-show-list">
- <!-- 上传 -->
- <div v-if="bjAction == 1" class="myTab-show-list-upload">
- <img src="../../assets/icon/icon-upload@2x.png" alt="" />
- <!-- 上传背景组件 -->
- <CutImg @getMyBGIListApi="getMyBGIListApi" class="CutImg" :type="4" :videoType="videoType"></CutImg>
- </div>
- <!-- 图片列表 -->
- <div @click="chooseImg(index, 'bj')" class="myTab-show-list-item" v-for="(item, index) in showBGIList" :key="index">
- <div :class="{ 'myTab-show-list-active': bjImgAction == index }">
- <div class="whiteBox"></div>
- </div>
- <!-- 删除上传素材 -->
- <div @click="delImg(item.id)" class="icon-error" v-if="bjAction == 1 && bjImgAction == index">×</div>
- <!-- 中间图片 -->
-
- <img :src="item.material" alt="" />
- </div>
- </div>
- </div>
- </div>
- </div>
-
- <!-- 素材 -->
- <div v-show="bottomTabActive == 3">
- <!-- 顶部文字 -->
- <div class="tabSheet-title">
- <div>
- <img class="img" src="../../assets/icon/icon-material.png" alt="" />
- 添加素材
- </div>
- <div @click="sureImg">
- <img class="yesImg" src="../../assets/icon/icon-yes.png" alt="" />
- </div>
- </div>
- <!-- 主要内容 -->
- <div class="tabSheet-content">
- <!-- tab栏 -->
- <div class="myTab">
- <div @click="changeShowBGIList(2)" class="myTab-item" :class="{ active: scAction == 0 }">
- <img src="../../assets/icon/icon-folder@2x.png" alt="" />
- 素材库
- </div>
- <div @click="changeShowBGIList(3)" class="myTab-item" :class="{ active: scAction == 1 }">
- <img src="../../assets/icon/icon-upload@2x.png" alt="" />
- 我上传的
- </div>
- </div>
- <!-- 展示 -->
- <!-- <div v-if="showScList.length == 0">暂无数据</div> -->
- <div class="myTab-show">
- <div class="myTab-show-title">
- 图片
- <i></i>
- </div>
- <div class="myTab-show-list">
- <!-- 上传 -->
- <div v-if="scAction == 1" class="myTab-show-list-upload">
- <img src="../../assets/icon/icon-upload@2x.png" alt="" />
- <!-- 上传图片组件 -->
- <CutImg class="CutImg" :type="5" @getMyScListApi="getMyScListApi"></CutImg>
- </div>
- <!-- 图片列表 -->
- <div @click="chooseImg(index, 'sc')" class="myTab-show-list-item" v-for="(item, index) in showScList" :key="index">
- <div :class="{ 'myTab-show-list-active': scImgAction == index }">
- <div class="whiteBox"></div>
- </div>
- <!-- 删除上传素材 -->
- <div @click="delImg(item.id)" class="icon-error" v-if="scAction == 1 && scImgAction == index">×</div>
- <!-- 中间图片 -->
- <img :src="item.material" alt="" />
- </div>
- </div>
- </div>
- </div>
- </div>
- </van-action-sheet>
-
- <!-- 试听的mp3 -->
- <audio autoplay :src="audioUrl"></audio>
-
- <!-- 切图 -->
-
- <!-- <CutImg
- ref="CutImgBg"
- id="CutImgBg"
- @getMyBGIListApi="getMyBGIListApi"
- class="CutImg"
- :type="4"
- :videoType="videoType"
- ></CutImg> -->
- </div>
- </template>
-
- <script>
- // 组件
- import Vue from 'vue';
- import { Toast, Dialog } from 'vant';
- import { mapState, mapActions } from 'vuex';
- import HeadTop from './../../components/common/head.vue';
- import CutImg from '../../components/CutImg.vue';
- import EditPosition from '../../components/editPosition.vue';
-
- // 工具
- import { scrollToID } from '../../utils';
- // 语言检测插件
- import { franc } from 'franc';
- // 接口
- import {
- doCreateVideo,
- doFindVideoById,
- getVoiceList, // 获取声音列表,废弃
- getBackGroundList,
- doFindInviteCode,
- saveOrUpdateUserVideo
- } from '@/api/generateVideo';
- import { videoDetial, voiceList, voiceList2Api, systemBGIListApi, myBGIListApi, systemScListApi, myScListApi, delImgApi } from '@/api/editModel';
- import { getModelDetailById } from '../../api/getPaper.js';
-
- Vue.use(-Toast);
- export default {
- components: {
- HeadTop,
- CutImg,
- EditPosition
- },
- data() {
- return {
- contentLoading: true,
- soundLoading1: true,
- soundLoading2: true,
- bjLoading1: true,
- bjLoading2: true,
- scLoading1: true,
- scLoading2: true,
-
- soundTips: '',
-
- timer: null,
- id: null,
- timeOuter: null,
- percentageData: 1, // 进度条的值
- pageNum: 1,
- pageSize: 20,
- proportion: null, //编辑页面的比例
- videoType: null, //判断横屏2还是竖屏1
- audioUrl: null, // 声音试听
- inPage: false,
- imgUrl: false, // 背景图
- materialList: {
- BGI: {},
- scList: [],
- virtual: {}
- }, // 传给组件的素材,背景,数字人数据
-
- personMouldId: null, //选择数字人id
- mouldSmId: null,
- saveID: null, // 作品id
- inputTitle: '您的新数字人', // 作品标题
- textareaContent: '', // 输入框内容
- //底部
- bottomTabActive: 2, // 底部导航高亮
- showSubtitle: false, // 是否展示字幕
- showSynthesisDialog: false, //合成进度条窗口显示隐藏
- showTabSheet: false, //tab栏弹出框显隐
- showSoundList2: false, //声音的二级显隐
- soundTabList: ['全部'], // 声音tab栏标题
- soundListAction: -1, //声音tab栏标题高亮
- soundItemList: [], // 声音展示一级列表
- soundItemList2: [], // 声音展示二级列表
- soundItemListAction: -1, // 声音展示列表高亮
- soundItemListAction2: -1, // 声音展示列表高亮二级
- soundChoose: {}, //选中的音频
- soundChoose2: {}, //选中的音频二级
- //编辑
- bjAction: 0, // 背景:素材库和上传高亮
- bjImgAction: -1, // 选中背景图高亮
- scAction: 0, // 素材:素材库和上传高亮
- scImgAction: -1, // 选中素材图高亮
- showBGIList: [], // 渲染时代替下面2个列表
- systemBGIList: [], // 背景库列表
- myBGIList: [], // 我上传的背景库列表
- showScList: [], // 渲染时代替下面2个列表
- systemScList: [], // 素材库列表
- myScList: [] // 我上传的素材库列表
- };
- },
- computed: {
- ...mapState({
- characters: state => state.publicObj.characters
- })
- },
-
- methods: {
- ...mapActions(['setCharacters']),
- // aaa() {
- // console.log('aaa')
- // this.$nextTick(() => {
- // // document.getDetailById
- // // this.$refs.CutImgBg.$refs.uploader.clickUpload()
- // this.$refs.CutImgBg.$refs.uploader.beforeRead()
- // })
- // },
- // 禁止滚动
- noScroll(e) {
- e.preventDefault();
- },
- // 点击底部tab栏
- clickBottomTab(index) {
- if (index == 1) {
- if (this.textareaContent == 0) {
- Toast.fail('输入文案后才可以选择声音哦~~');
- return;
- }
- this.showSoundList2 = false;
- }
- if (index != 4) {
- this.bottomTabActive = index;
- if (this.textareaContent.length == 0) {
- this.soundItemList = []; //清空处理
- this.soundItemList2 = []; //清空处理
- }
- console.log(this.bottomTabActive);
- this.showTabSheet = !this.showTabSheet;
- } else {
- //字幕切换
- this.showSubtitle = !this.showSubtitle;
- }
- },
- // 获取声音列表
- async loadVoice() {
- this.soundTips = '';
- if (this.textareaContent.length != 0) {
- const language = franc(this.textareaContent);
- console.log(language, '语种');
- const data = {
- personMouldId: this.personMouldId,
- paperwork: this.textareaContent
- };
- try {
- this.soundLoading1 = true;
- const res = await voiceList(data);
- console.log(res, '获取声音列表');
- this.soundItemList = res.data.list;
- this.soundLoading1 = false;
- } catch (error) {
- this.soundItemList = [];
- if (error.message == '暂不支持该语种') {
- this.soundTips = error.message;
- }
- this.soundLoading1 = false;
- console.log(error, 'error');
- Toast.fail(error.message);
- }
- } else {
- Toast('您还没有输入文案');
- }
- },
- // 点击声音列表中的某一项
- async clickSoundItem(index, item) {
- if (this.soundItemListAction != index) {
- this.soundItemListAction = index; //高亮
- this.soundChoose = item;
-
- this.showSoundList2 = true;
- this.soundLoading2 = true;
- const res = await voiceList2Api(item.id);
-
- let list = res.data.subVoiceMould ? res.data.subVoiceMould : [];
- console.log(list);
- let obj = JSON.parse(JSON.stringify(res));
- delete obj.data.subVoiceMould;
- let list2 = [{ ...obj.data }, ...list];
-
- this.soundItemList2 = list2 || [];
- this.soundLoading2 = false;
- // console.log(this.soundItemList2)
- // this.audioUrl = res.data.videoUrl
- } else {
- this.soundItemListAction = -1;
- this.soundChoose = {};
- }
- },
- // 点击声音列表中的某一项2级
- async clickSoundItem2(index, item) {
- if (this.soundItemListAction2 != index) {
- this.soundItemListAction2 = index; //高亮
- this.soundChoose2 = item;
- // 得到试听文件
- const res = await videoDetial(item.exampleVideoId);
-
- this.audioUrl = res.data.videoUrl;
- } else {
- this.soundItemListAction2 = -1;
- this.soundChoose2 = {};
- }
- },
-
- // 提交合成视频
- submit(type) {
- // type代表时保存还是点击生成视频按钮
- // 组装参数
- console.log(this.soundChoose.id);
- // 素材列表处理
- const scList = this.materialList.scList.map(item => {
- return {
- id: item.id,
- type: 5,
- material: item.material,
- x: item.x,
- y: item.y,
- z: item.z,
- w: item.w,
- h: item.h
- };
- });
- // 数字人处理
- const shuziren = {
- id: this.materialList.virtual.id,
- type: 1,
- material: this.materialList.virtual.material,
- x: this.materialList.virtual.x,
- y: this.materialList.virtual.y,
- z: this.materialList.virtual.z,
- w: this.materialList.virtual.w,
- h: this.materialList.virtual.h
- };
- const data = {
- id: this.id,
- videoType: this.videoType, //横屏竖屏
- personMouldId: this.materialList.virtual.id, //数字人id
- voiceMouldIds: [this.soundChoose2.id ? this.soundChoose2.id : this.soundChoose.id], //声音id
- title: this.inputTitle, //标题
- paperwork: this.textareaContent, //语音内容
- backgroundId: this.materialList.BGI.id + '', //背景id
- personJson: JSON.stringify(shuziren), // 数字人
- materialAllJson: JSON.stringify([...scList]) // 素材
- };
- console.log(data, '最终提交的参数');
- if (type == 1) {
- Toast.loading({
- duration: 5000,
- message: '加载中...',
- forbidClick: true
- });
- if (!this.textareaContent) {
- Toast.fail('请输入文案内容!');
- return;
- }
- // 当没有选择声音参数时
- if (!this.soundChoose.id) {
- Toast.fail('请选择声音!');
- return;
- }
- // 当没有选择声音参数时
- // if (!this.soundChoose2.id) {
- // Toast.fail('请选择声音!');
- // return;
- // }
- // if (!this.inputTitle) {
- // Toast.fail('请输入文案标题!')
- // return
- // }
- }
- // 先保存草稿,里面再调生成视频的接口
- this.saveOrUpdate(data, type);
- },
-
- /**
- * @description:保存或修改用户作品
- */
- async saveOrUpdate(data, type) {
- console.log(data);
- try {
- const res = await saveOrUpdateUserVideo(data);
- console.log(res, '保存或修改用户作品');
- // this.createVideo({ id: this.saveID })
- if (type == 1) {
- this.createVideo({ id: this.$route.query.id });
- }
- } catch (error) {
- if (error.message != '视频生成中') {
- console.log(error, 'error');
- Toast.fail(error.message);
- }
- }
- },
- /**
- * @description:生成视频
- */
- async createVideo(data) {
- let that = this;
- try {
- const res = await doCreateVideo(data);
- console.log(res, '生成视频');
- Toast.success('提交成功!');
- // *#06#
- that.showSynthesisDialog = true; //显示进度条
-
- this.timeOuter = setTimeout(() => {
- this.isShowCover = true;
- }, 2000);
- that.timer = setInterval(() => {
- if (that.percentageData < 98) {
- that.percentageData += 1;
- } else {
- that.percentageData == 98;
- }
- // 重复调取此接口直到videoStatus == 2 || 3
- this.getVideo(that.$route.query.id);
- // if (this.timerOver) {
- // clearInterval(timer)
- // this.isShowCover = false
- // }
- }, 1000);
- } catch (error) {
- console.log(error, 'error');
- Toast.fail(error.message);
- }
- },
- /**
- * @description:通过id获取视频
- */
- async getVideo(id) {
- try {
- const res = await doFindVideoById(id);
- console.log(res, '通过id获取视频');
- if (res.data.videoStatus == 2) {
- this.percentageData == 99;
- this.showSynthesisDialog = false; //隐藏进度条
- this.percentageData = 0;
- clearInterval(this.timer);
- this.timer = null;
- this.isShowCover = false;
- clearTimeout(this.timeOuter);
- Toast.success('视频生成成功!');
- const url = res.data.videoPathUri + res.data.videoPath;
- console.log(url, 'url');
- this.$router.push({
- // path: '/downloadVideo',
- path: '/videoDownload',
- query: {
- id: this.$route.query.id,
- videoId: res.data.videoId,
- videoUrl: url
- }
- });
- // this.timerOver = true
- return;
- } else if (res.data.videoStatus == 3) {
- console.log(res.data.videoStatus, '看看id是不是3');
- this.showSynthesisDialog = false; //隐藏进度条
- this.percentageData = 0;
- Toast.fail(`视频生成失败!失败原因:${res.data.videoMsg}`);
- // this.timerOver = true
- clearTimeout(this.timer);
- this.timer = null;
- // clearTimeout(this.timeOuter)
- this.isShowCover = false;
- return;
- }
- } catch (error) {
- console.log(error, 'error');
- Toast.fail(error.message);
- }
- },
- // 根据作品ID获取信息
- async getDetailById(id) {
- try {
- this.contentLoading = true;
- const res = await getModelDetailById(id);
-
- // console.log(JSON.parse(res.data.personMouldSm))
- console.log();
- this.materialList.BGI = JSON.parse(res.data.backgroundSm) || {};
- // this.materialList.BGI.id = JSON.parse(res.data.backgroundSm).id + '';
- this.materialList.BGI.id = res.data.backgroundId + '';
- this.materialList.scList = res.data.materialAllJson ? JSON.parse(res.data.materialAllJson) : [];
- this.materialList.virtual = JSON.parse(res.data.personJson) || {};
- if (!this.materialList.virtual.w) {
- this.materialList.virtual = {
- ...this.materialList.virtual,
- x: 100,
- y: 0,
- z: 0,
- w: 1,
- h: 1
- };
- }
-
- this.videoType = res.data.videoType;
- this.id = res.data.id;
- // this.imgUrl = res.data.personMould.coverImg
- this.personMouldId = res.data.personMouldId;
- this.mouldSmId = res.data.personMouldSmId;
- this.inputTitle = res.data.title ? res.data.title : '您的新数字人';
- this.textareaContent = res.data.paperwork || '';
- this.soundChoose.id = res.data.voiceMouldId;
- this.soundChoose.mouldSmId = res.data.voiceMouldSmId;
- // console.log(res.data.voiceMouldSm, 111111111111111);
- this.soundChoose.title = res.data.voiceMouldSm ? JSON.parse(res.data.voiceMouldSm).title : '';
- this.soundChoose2.subTitle = res.data.voiceMouldSm ? JSON.parse(res.data.voiceMouldSm).subTitle : '';
- this.soundChoose2.title = res.data.voiceMouldSm ? JSON.parse(res.data.voiceMouldSm).title : '';
- this.soundChoose2.speakTypeStr = res.data.voiceMouldSm ? JSON.parse(res.data.voiceMouldSm).speakTypeStr : '';
- this.soundChoose2.id = res.data.voiceMouldSm ? JSON.parse(res.data.voiceMouldSm).id : '';
- // console.log(this.soundChoose.title, this.soundChoose2.speakTypeStr, '112233');
- if (this.textareaContent.length != 0) {
- await this.loadVoice(); // 获取音频列表
- }
- this.soundItemListAction = this.soundItemList.findIndex(item => {
- return item.id == this.soundChoose.id;
- }); //高亮处理
- this.contentLoading = false;
- // backgroundMouldId: '', // 背景id
- // backgroundMouldSmId: '', //背景标识
- // 如果视频生成了
- // if ([2, 4, 5, 6].includes(res.data.videoStatus)) {
- // this.$router.push({
- // // path: '/downloadVideo',
- // path: '/videoDownload',
- // query: {
- // id: this.$route.query.id
- // }
- // });
-
- // return;
- // }
- // if ([1].includes(res.data.videoStatus)) {
- // this.$router.push('/myPage');
- // return;
- // }
- } catch (error) {
- console.log(error, 'error');
- Toast.fail(error.message);
- }
- },
- // 点击选中背景图或者素材
- chooseImg(index, type) {
- if (type == 'bj') {
- if (this.bjImgAction == -1 || this.bjImgAction != index) {
- this.bjImgAction = index;
- } else if (this.bjImgAction == index) {
- this.bjImgAction = -1;
- }
- }
- if (type == 'sc') {
- if (this.scmgAction == -1 || this.scImgAction != index) {
- this.scImgAction = index;
- } else if (this.scImgAction == index) {
- this.scImgAction = -1;
- }
- }
- },
- // 点击对钩确定背景或者素材图
- sureImg() {
- let that = this;
- // 背景
- if (this.bottomTabActive == 2 && this.bjImgAction != -1) {
- // Dialog.confirm({
- // // title: '退出登录',
- // message: '您确定要用这张背景图吗?'
- // })
- // .then(() => {
- if (that.bjAction == 0) {
- that.materialList.BGI = that.systemBGIList.find((item, index) => {
- return index == that.bjImgAction;
- });
- } else if (that.bjAction == 1) {
- that.materialList.BGI = that.myBGIList.find((item, index) => {
- return index == that.bjImgAction;
- });
- }
- this.showTabSheet = false;
- // })
- // .catch(() => {
- // console.log('false')
- // this.showTabSheet = false
- // return
- // })
- }
- // 素材
- else if (this.bottomTabActive == 3 && this.scImgAction != -1) {
- // Dialog.confirm({
- // // title: '退出登录',
- // message: '您确定要用这张素材图吗?'
- // })
- // .then(() => {
- if (that.scAction == 0) {
- let scItem = that.systemScList.find((item, index) => {
- return index == that.scImgAction;
- });
- that.materialList.scList.push({
- ...scItem,
- x: 0,
- y: 0,
- z: 0,
- w: 1,
- h: 1
- });
- } else if (that.scAction == 1) {
- let scItem = that.myScList.find((item, index) => {
- return index == that.scImgAction;
- });
- that.materialList.scList.push({
- ...scItem,
- x: 0,
- y: 0,
- z: 0,
- w: 1,
- h: 1
- });
- }
- this.showTabSheet = false;
- // })
- // .catch(() => {
- // console.log('false')
- // this.showTabSheet = false
- // return
- // })
- }
- // 啥没选
- else {
- this.showTabSheet = false;
- }
- },
- // 切换背景图/素材图的展示列表
- changeShowBGIList(type) {
- if (type == 0) {
- this.bjAction = 0;
- this.bjImgAction = -1;
- this.showBGIList = this.systemBGIList;
- }
- if (type == 1) {
- this.bjAction = 1;
- this.bjImgAction = -1;
- this.showBGIList = this.myBGIList;
- }
- if (type == 2) {
- this.scAction = 0;
- this.scImgAction = -1;
- this.showScList = this.systemScList;
- }
- if (type == 3) {
- this.scAction = 1;
- this.scImgAction = -1;
- this.showScList = this.myScList;
- }
- },
- /**
- * @description:获取系统背景图
- */
- async getSystemBGIList() {
- try {
- this.bjLoading1 = true;
- const res = await systemBGIListApi(this.pageNum, this.pageSize, this.videoType);
- this.systemBGIList = res.data.list;
- this.showBGIList = this.systemBGIList;
- this.bjLoading1 = false;
- } catch (error) {
- console.log(error);
- this.bjLoading1 = false;
- }
- },
-
- /**
- * @description:获取我上传的背景图
- */
- async getMyBGIListApi() {
- try {
- this.bjLoading2 = true;
- const res = await myBGIListApi(this.pageNum, this.pageSize, this.videoType);
- this.myBGIList = res.data.list;
- this.bjLoading2 = false;
- } catch (error) {
- console.log(error);
- this.bjLoading2 = false;
- }
- },
-
- /**
- * @description:获取系统素材
- */
- async getSystemScList() {
- try {
- this.scLoading1 = true;
- const res = await systemScListApi(this.pageNum, this.pageSize);
- this.systemScList = res.data.list;
- this.showScList = this.systemScList;
- this.scLoading1 = false;
- } catch (error) {
- console.log(error);
- this.scLoading1 = false;
- }
- },
-
- /**
- * @description:获取我上传的素材
- */
- async getMyScListApi() {
- try {
- this.scLoading2 = true;
- const res = await myScListApi(this.pageNum, this.pageSize);
- this.myScList = res.data.list;
- this.scLoading2 = false;
- } catch (error) {
- console.log(error);
- this.scLoading2 = false;
- }
- },
-
- /**
- * @description:删除上传的背景或素材
- */
- async delImg(id) {
- Dialog.confirm({
- message: '确认删除吗?'
- })
- .then(async () => {
- const res = await delImgApi(id);
- if (this.bottomTabActive == 2) {
- await this.getMyBGIListApi();
- this.changeShowBGIList(1);
- }
- if (this.bottomTabActive == 3) {
- await this.getMyScListApi();
- this.changeShowBGIList(3);
- }
- })
- .catch(() => {});
- },
-
- go(url) {
- this.$router.push(url);
- }
- },
- created() {},
- async mounted() {
- this.inPage = true;
- scrollToID('top');
-
- await this.getDetailById(this.$route.query.id);
- this.getSystemBGIList();
- this.getMyBGIListApi();
- this.getSystemScList();
- this.getMyScListApi();
-
- const elementWidth = document.getElementById('editPosition').clientWidth;
- console.log(elementWidth);
- // 根据横竖屏来确定比例 1竖2横
- if (this.videoType == 1) {
- this.proportion = 1080 / elementWidth;
- console.log(this.proportion);
- } else if (this.videoType == 2) {
- this.proportion = 1920 / elementWidth;
- console.log(this.proportion);
- }
- },
- async beforeDestroy() {
- this.timeOuter = null; // 清除定时器
- clearInterval(this.timer);
- this.timer = null; // 清除定时器
- await this.submit(2); // 保存草稿
- console.log('保存了');
- }
- };
- </script>
-
- <style lang="scss" scoped>
- .chooseSound {
- position: absolute;
- left: 50%;
- transform: translateX(-50%);
- margin-top: 10px;
- width: 225px;
- height: 50px;
- text-align: center;
- font-size: 20px;
- line-height: 50px;
- border: 1px solid #85a5f9;
- .img {
- margin-top: -3px;
- margin-right: 3px;
- width: 16px;
- height: 16px;
- }
- }
- .editPosition {
- position: relative;
- // transform: scale(0.2);
- width: 216px;
- height: 384px;
- // width: 1080px;
- // height: 1920px;
- border-radius: 12px;
- overflow: hidden;
- background-color: pink;
- }
- .verticalmodel {
- width: 384px !important;
- height: 216px !important;
- // width: 1920px !important;
- // height: 1080px !important;
- margin-bottom: 50px;
- }
- .CutImg {
- position: absolute;
- top: 0;
- left: 0;
- width: 100%;
- height: 100%;
- }
- .page {
- // transform会导致其子元素固定定位失效
- // transform: translateX(30%);
- opacity: 0;
- transition: all 0.5s; // global-transition
-
- &.active {
- opacity: 1;
- // transform: translateX(0);
- }
- }
-
- .content {
- position: relative;
- margin-top: 10px;
- padding: 0 10px;
- padding-bottom: 190px;
-
- .shouModelImg {
- display: flex;
- position: relative;
- justify-content: center;
- width: 100%;
-
- img {
- width: 200px;
- height: 351px;
- border-radius: 12px;
- }
-
- &-subtitle {
- position: absolute;
- top: 220px;
- left: 50%;
- transform: translateX(-50%);
- padding: 2px 6px;
- width: 160px;
- height: 24px;
- line-height: 20px;
- background: rgba(0, 0, 0, 0.5);
- font-size: 14px;
- color: #fff;
- border-radius: 3px;
- }
- }
-
- .addText {
- display: flex;
- justify-content: space-between;
- margin-top: 20px;
-
- &-title {
- font-size: 16px;
- font-weight: 600;
- color: #000;
- img {
- width: 24px;
- height: 24px;
- margin-right: 5px;
- }
- }
- }
-
- .textInput {
- margin-top: 10px;
- padding: 1px;
- width: 100%;
- background: linear-gradient(225deg, rgba(81, 217, 202, 1), rgba(114, 100, 245, 1));
- border-radius: 6px;
-
- &-in {
- width: 100%;
- height: 100%;
- background: #fff;
- border-radius: 6px;
-
- ::v-deep .el-input-group__append {
- padding: 0;
- }
-
- img {
- float: right;
- width: 16px;
- height: 16px;
- margin: 10px;
- }
- }
-
- .divider {
- transform: scaleY (0.25);
- width: 100%;
- height: 1px;
- border-top: 1px solid;
- border-image: linear-gradient(225deg, rgba(81, 217, 202, 1), rgba(114, 100, 245, 1)) 1 1;
- }
-
- ::v-deep .el-input__inner {
- border: none;
- background-color: #faf9fe;
- }
-
- ::v-deep .el-textarea__inner {
- border: none;
- background-color: #faf9fe;
- }
- }
-
- .makeVideo {
- position: fixed;
- bottom: 70px;
- left: 50%;
- transform: translateX(-50%);
- // margin: 15px 20px 0;
- width: 325px;
- height: 50px;
- text-align: center;
- font-size: 20px;
- line-height: 50px;
- color: #fff;
- background: linear-gradient(316deg, #6ee4d7 0%, #37c4f1 32%, #a49afc 100%);
- border-radius: 25px;
- }
-
- .upAndBottomBtn {
- .moveLayer {
- position: absolute;
- display: flex;
- align-items: center;
- justify-content: center;
- top: 20%;
- right: 5px;
- // padding-left: 10px;
- width: 70px;
- height: 22px;
- font-size: 10px;
- line-height: 28px;
- text-align: center;
- box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.1);
- background-color: rgba(255, 255, 255, 1);
- border-radius: 11px;
- }
- .moveLayer1 {
- top: 35% !important;
- left: 20% !important;
- }
- img {
- vertical-align: middle;
- width: 10px;
- height: 11px;
- margin: 1px 0 2px 0;
- }
-
- .below {
- top: 25%;
- }
- .below1 {
- top: 35% !important;
- left: 60% !important;
- }
-
- .active {
- // opacity: 0.5;
- }
- }
- }
-
- .bottom {
- ::v-deep .van-tabbar-item {
- color: rgba(51, 51, 51, 1) !important;
- font-size: 10px !important;
- }
- }
-
- .synthesisDialog {
- position: fixed;
- top: 0;
- left: 0;
- // width: 100vw;
- // height: 110vh;
- width: 100%;
- height: 100%;
- z-index: 99999;
- color: #333;
- background: rgba(0, 0, 0, 0.5);
- overflow: hidden;
- ::v-deep .el-progress-bar {
- }
- &-in {
- position: absolute;
- top: 40%;
- left: 50%;
- transform: translate(-50%);
- padding: 0 15px;
- padding-top: 40px;
- width: 315px;
- height: 145px;
- background-color: #fff;
- border-radius: 12px;
- ::v-deep .van-button {
- float: right;
-
- height: 40px;
- color: #fff;
- border-radius: 40px;
- background: linear-gradient(316deg, #6ee4d7 0%, #37c4f1 32%, #a49afc 100%);
- }
- .progress {
- width: 280px;
-
- ::v-deep .el-progress__text {
- margin-left: 15px;
- }
- }
- }
-
- &-text {
- margin-top: 10px;
- font-size: 12px;
- }
- }
-
- .tabSheet {
- height: 280px;
- padding-bottom: 0px;
- background-color: #f9f9f9;
-
- &-title {
- display: flex;
- justify-content: space-between;
- padding: 0 10px;
- height: 40px;
- font-size: 13px;
- line-height: 40px;
- background-color: #fff;
-
- .img {
- margin-top: -3px;
- margin-right: 3px;
- width: 16px;
- height: 16px;
- }
-
- .yesImg {
- margin-top: -3px;
- width: 24px;
- height: 16px;
- }
- }
-
- &-content {
- height: 220px;
- padding: 0 10px;
- background-color: #f9f9f9;
-
- ::v-deep .van-tab {
- background-color: #f9f9f9;
- }
-
- ::v-deep .van-tab--active {
- font-size: 17px;
- font-weight: 700;
- }
-
- .list {
- height: 170px;
- overflow-y: scroll;
- // scrollbar-width: none;
- // -ms-overflow-style: none;
- display: flex;
- justify-content: space-between;
- flex-wrap: wrap;
- margin-top: 10px;
-
- .listItem {
- display: flex;
- justify-content: space-between;
- padding: 12px;
- margin-bottom: 10px;
- width: 170px;
- height: 50px;
- overflow: hidden;
- background: rgba(186, 186, 189, 0.5);
- border-radius: 24px;
- color: #fff;
-
- img {
- width: 32px;
- }
-
- > div {
- flex: 1;
- margin-left: 12px;
- }
- }
-
- .active {
- background: #7264f5;
- }
- }
-
- .list::-webkit-scrollbar {
- width: 0;
- }
- }
-
- .SoundList2 {
- overflow: hidden;
- height: 240px;
- // padding: 10px 10px 10px;
- padding-top: 10px;
- &-title {
- display: flex;
- justify-content: space-between;
- margin-bottom: 10px;
- width: 100%;
- .img {
- width: 16px;
- height: 16px;
- }
-
- .yesImg {
- float: right;
- margin-top: -3px;
- margin-right: 3px;
- width: 16px;
- height: 16px;
- margin-top: -3px;
- width: 24px;
- height: 16px;
- }
- }
- .list {
- height: 240px;
- margin-top: 0px;
- }
- .list::-webkit-scrollbar {
- width: 0;
- display: none;
- }
- }
- .SoundList2::-webkit-scrollbar {
- width: 0;
- display: none;
- }
- .myTab {
- display: flex;
- margin: 10px 0;
- padding: 5px;
- width: 100%;
- height: 40px;
- background-color: #eeeeee;
- border-radius: 6px;
-
- &-item {
- width: 50%;
- height: 30px;
- font-size: 14px;
- line-height: 30px;
- text-align: center;
- background-color: #eeeeee;
- border-radius: 6px;
-
- img {
- width: 20px;
- height: 16px;
- margin-right: 8px;
- }
- }
-
- .active {
- background-color: #fff;
- }
-
- &-show {
- width: 100%;
- height: 170px;
-
- &-title {
- font-size: 16px;
-
- i {
- display: block;
- margin-top: 4px;
- margin-left: 3px;
- width: 23px;
- height: 3px;
- background: #7264f5;
- border-radius: 2px;
- }
- }
-
- &-list {
- height: 145px;
- padding-left: 4px;
- overflow-y: scroll;
- display: flex;
- justify-content: start;
- flex-wrap: wrap;
-
- &-item {
- display: flex;
- align-items: center;
- position: relative;
- margin-right: 6px;
- margin-top: 10px;
- width: 80px;
- height: 142px;
- z-index: 9;
- background-color: #fff;
- border-radius: 10px;
- img {
- // background: red;
- width: 100%;
- // width: 80px;
- max-height: 142px;
- border-radius: 12px;
- }
-
- .icon-error {
- float: left;
- position: absolute;
- top: 5px;
- right: 5px;
- z-index: 99999;
- display: block !important;
- float: right;
- width: 12px;
- height: 12px;
- line-height: 12px;
- text-align: center;
- color: #fff;
- background: #666666;
- border-radius: 6px;
- }
-
- &:nth-child(4n) {
- // margin-right: 0px !important;
- }
- }
-
- &-active {
- position: absolute;
- top: -3px;
- left: -3px;
- padding: 1px;
- z-index: -1;
- width: 86px;
- height: 148px;
- border-radius: 12px;
-
- background: linear-gradient(225deg, rgba(81, 217, 202, 1), rgba(114, 100, 245, 1));
-
- .whiteBox {
- transition: all 0.5s;
- width: 100%;
- height: 100%;
- background-color: #fff;
- border-radius: 12px;
- }
- }
-
- &-upload {
- position: relative;
- margin-right: 10px;
- margin-top: 10px;
- width: 80px;
- height: 142px;
- background: #ddd;
- border-radius: 10px;
- overflow: hidden;
- img {
- background-color: #fff;
- position: absolute;
- top: 50%;
- left: 50%;
- transform: translate(-50%, -50%);
- }
-
- input {
- width: 100%;
- height: 100%;
- opacity: 0;
- }
- }
- }
- }
- }
-
- // 隐藏滚动条
- .myTab-show-list::-webkit-scrollbar {
- display: none;
- }
- }
- </style>
|