index.vue 29 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994995996997998999100010011002100310041005100610071008100910101011101210131014101510161017101810191020102110221023102410251026102710281029103010311032103310341035103610371038103910401041104210431044104510461047104810491050105110521053105410551056105710581059106010611062106310641065106610671068106910701071107210731074107510761077107810791080108110821083108410851086108710881089109010911092109310941095109610971098109911001101110211031104110511061107110811091110111111121113111411151116111711181119112011211122112311241125112611271128112911301131113211331134113511361137113811391140114111421143
  1. <template>
  2. <view class="container">
  3. <tn-nav-bar :isBack="true" backgroundColor="#fff" :bottomShadow="false">数字人创建</tn-nav-bar>
  4. <view class="pos">
  5. </view>
  6. <view class="context">
  7. <view class="top" @click="show4=true">
  8. <view class="top" @click="show4=true">
  9. <view class="videoBox1" v-if="bgItem.scale==1&&selBgPic">
  10. <image class="img16" :src="selBgPic" mode=""></image>
  11. <view class="role">
  12. <image :src="selRoleItem.url" mode=""></image>
  13. </view>
  14. </view>
  15. <view class="videoBox2" v-if="bgItem.scale==2&&selBgPic" :style="{}">
  16. <image class="img16" :src="selBgPic" mode=""></image>
  17. <view class="role" style="z-index: 2;">
  18. <image :src="selRoleItem.url" mode=""></image>
  19. </view>
  20. </view>
  21. <view class="videoBox" v-if="!bgItem.scale&&!selBgPic" :style="{minHeight:!selBgPic?'465rpx':''}">
  22. <view class="emptyVideo" style="background: #ccc;height: 100%;"></view>
  23. </view>
  24. </view>
  25. <view class="videoBox" v-if="!bgItem.scale&&!selBgPic" :style="{minHeight:!selBgPic?'465rpx':''}">
  26. <view class="emptyVideo" style="background: #ccc;height: 100%;"></view>
  27. </view>
  28. </view>
  29. <view class="selCon">
  30. <view class="item" @click="show=true" v-if="!audioUrl">
  31. <view class="label">
  32. 语速:
  33. </view>
  34. <view class="con">
  35. {{roundRate}}X
  36. </view>
  37. </view>
  38. <view class="item" @click="show1=true" v-if="!audioUrl">
  39. <view class="label">
  40. 声音:{{selVoiceItem.name}}
  41. </view>
  42. <image class="conImg" :src="selVoiceItem.url">
  43. </image>
  44. </view>
  45. <view class="item" @click="show3=true">
  46. <view class="label">
  47. 角色:{{selRoleItem.name}}
  48. </view>
  49. <image class="conImg" :src="selRoleItem.url">
  50. </image>
  51. </view>
  52. </view>
  53. <view class="centerMenuBar">
  54. <view class="barItem" v-for="(item,index) in menuList" @click="handleSetBox(item)">
  55. <view class="left" style="display: flex;justify-content: flex-end;align-items: center;">
  56. <!-- <text class="iconfont " :class="[item.icon]" style="color: #26b3a0;font-weight: 600;"></text> -->
  57. <image :src="item.icon" mode=""></image>
  58. </view>
  59. <view class="right">
  60. {{item.name}}
  61. </view>
  62. </view>
  63. </view>
  64. <view class="robotNameBox">
  65. <!-- <view class="name">
  66. 播报标题:
  67. </view> -->
  68. <uni-easyinput :inputBorder="true" :clearable="false" v-model="robotName"
  69. placeholder="请输入播报标题"></uni-easyinput>
  70. </view>
  71. <u--textarea height="" :disabled="audioUrl?true:false" border="none" :autoHeight="true" maxlength="9999"
  72. v-model="textAreaValue" placeholder="请输入播报内容"></u--textarea>
  73. <button @click="uploadVideo">上传录音文件</button>
  74. <view class="audioList" v-if="audioUrl">
  75. <view class="">
  76. 已上传的音频:
  77. </view>
  78. <view class="audioListBox">
  79. <view class="con">
  80. {{audioUrl}}
  81. </view>
  82. <text @click="audioUrl=''" class="iconfont icon-shanchu rightIcon"
  83. :style="{fontSize:isPc?'64rpx':'32rpx'}"></text>
  84. </view>
  85. </view>
  86. <view class="btnBox">
  87. <view class="btn draft" @click="saveDraft">
  88. 存草稿
  89. </view>
  90. <view class="btn" @click="genRobot" style="background: linear-gradient(to right,#06C68E,#02BCCD);">
  91. 合成
  92. </view>
  93. </view>
  94. </view>
  95. <u-picker :showIcon="true" :show="showMoreMenu" :columns="columns" title="更多" confirmColor=""
  96. @cancel="showMoreMenu=false" @confirm="handleConfirm"></u-picker>
  97. <u-popup :show="show" @close="close" @open="open">
  98. <view class="contentBox">
  99. <view class="toolBar">
  100. <view class="cancel" @click="show=false">
  101. <image src="/static/images/closeBtn.png" mode=""></image>
  102. </view>
  103. <view class="center">
  104. 全局语速
  105. </view>
  106. <view class="confirm" @click="handleBtnConfirm">
  107. <image src="/static/images/selected.png" mode=""></image>
  108. </view>
  109. </view>
  110. <view class="content" style="min-height: 300rpx;">
  111. <u-slider height="50" min="0.7" max="1.3" step="0.1" class="slider" :showValue='false'
  112. @change="handleChange" activeColor="#26b3a0" v-model="voiceRate"></u-slider>
  113. <view class="sliderValue">
  114. {{roundRate}}X
  115. </view>
  116. </view>
  117. </view>
  118. </u-popup>
  119. <!-- 声音 -->
  120. <u-popup :show="show1" @close="close1" @open="open">
  121. <view class="contentBox">
  122. <view class="toolBar">
  123. <view class="cancel" @click="handleAudioClose">
  124. <image src="/static/images/closeBtn.png" mode=""></image>
  125. </view>
  126. <view class="center">
  127. 声音
  128. </view>
  129. <view class="confirm" @click="handleBtnConfirm1">
  130. <image src="/static/images/selected.png" mode=""></image>
  131. </view>
  132. </view>
  133. <view class="content">
  134. <view class="filterConList" style="max-height: 500rpx;min-height: 500rpx;overflow-y: scroll;">
  135. <view class="item" v-for="(item,index) in allList">
  136. <view class="avtarBox" @click="handleVoiceSel(item,index)">
  137. <view class="imgBox">
  138. <image :class="[currTabIndexAll==index?'sel':'']" :src="item.url" mode="">
  139. </view>
  140. <!-- </image> -->
  141. <view class="nameDes">
  142. {{item.title}}
  143. </view>
  144. <view class="name" :class="[currTabIndexAll==index?'selTxt':'']">
  145. {{item.name}}
  146. </view>
  147. </view>
  148. <view class="playBox" style="" @click="playAudio(item.audio_url)">
  149. 试听
  150. </view>
  151. </view>
  152. </view>
  153. </view>
  154. </view>
  155. </u-popup>
  156. <!-- 模型 -->
  157. <u-popup :show="show3" @close="close3" @open="open">
  158. <view class="contentBox2">
  159. <view class="toolBar">
  160. <view class="cancel" @click="show3=false">
  161. <image src="/static/images/closeBtn.png" mode=""></image>
  162. </view>
  163. <view class="center">
  164. 角色
  165. </view>
  166. <view class="confirm" @click="handleBtnConfirm2">
  167. <image src="/static/images/selected.png" mode=""></image>
  168. </view>
  169. </view>
  170. <view class="content">
  171. <view class="filterConList">
  172. <view class="item" v-for="(item,index) in roleList" @click="handleRoleSel(item,index)">
  173. <image :class="[currTabIndexModal==index?'sel':'']" :src="item.url" mode="">
  174. </image>
  175. <view class="name" :class="[currTabIndexModal==index?'selTxt':'']">
  176. {{item.name}}
  177. </view>
  178. <view class="ratio">
  179. {{'('+item.proportion+')'}}
  180. </view>
  181. </view>
  182. </view>
  183. </view>
  184. </view>
  185. </u-popup>
  186. <!-- 背景 -->
  187. <u-popup :show="show4" @close="close4" @open="open">
  188. <view class="contentBox2">
  189. <view class="toolBar">
  190. <view class="cancel" @click="show4=false">
  191. <image src="/static/images/closeBtn.png" mode=""></image>
  192. </view>
  193. <view class="center">
  194. 背景
  195. </view>
  196. <view class="confirm" @click="handleBtnConfirm3">
  197. <image src="/static/images/selected.png" mode=""></image>
  198. </view>
  199. </view>
  200. <view class="content">
  201. <view class="filterBox">
  202. <view class="tabList">
  203. <view class="item1" style="padding-left: 40rpx;padding-right: 40rpx;"
  204. v-for="(item,index) in bgList" :class="[currTabIndex2==index?'tabActive':'']"
  205. @click="handleBgTabChange(item,index)">
  206. {{item}}
  207. </view>
  208. </view>
  209. </view>
  210. <!-- <view class="filterBox">
  211. <view class="tabList">
  212. <view class="item1" style="padding-left: 40rpx;padding-right: 40rpx;"
  213. v-for="(item,index) in bgList" :class="[currTabIndex2==index?'tabActive':'']"
  214. @click="currTabIndex2=index">
  215. {{item}}
  216. </view>
  217. </view>
  218. </view> -->
  219. <view class="filterConList2" style="max-height: 500rpx;min-height: 500rpx;overflow-y: scroll;">
  220. <view class="pictureBox" v-if="currTabIndex2==0">
  221. <view class="bgBox" v-for="(item,index) in bgPicList">
  222. <image :class="[currTabIndexBg==index?'sel':'']" :src="item.url" mode=""
  223. @click="handleSelBg(item,index)"></image>
  224. <view class="ratio">
  225. {{item.scale==1?'(9:16)':'(16:9)'}}
  226. </view>
  227. </view>
  228. </view>
  229. <view class="pictureBox" v-if="currTabIndex2==1">
  230. <!-- <view class="color" :style="{background:item}" :class="[currTabIndexBgc==index?'sel':'']"
  231. v-for="(item,index) in bgColorList" @click="currTabIndexBgc=index"></view> -->
  232. <view class="defBox">
  233. <view class="type1">
  234. <view class="des">
  235. <text class="lab">尺寸:9:16</text><br>
  236. 背景图要求:<br>
  237. 像素:最高3800 × 3800px<br>
  238. 文件大小:5M以内
  239. </view>
  240. <!-- <view class="" style="color: #06C68E;">
  241. 参考图
  242. </view>
  243. <view class="referImg" @click="previewImg(refImg1)">
  244. <image class="ig1" :src="refImg1" mode="scaleToFill"
  245. style="width: 40%;height: 250rpx;"></image>
  246. </view> -->
  247. <view class="btn" @click="uploadBg1">
  248. 上传背景图(9:16)
  249. </view>
  250. </view>
  251. <view class="type1">
  252. <view class="des">
  253. <text class="lab">尺寸:16:9</text><br>
  254. 背景图要求:<br>
  255. 像素:最高3800 × 3800px<br>
  256. 文件大小:5M以内
  257. </view>
  258. <!-- <view class="" style="color: #06C68E;">
  259. 参考图
  260. </view>
  261. <view class="referImg" @click="previewImg(refImg2)">
  262. <image class="ig2" style="width: 70%;height: 130rpx;" :src="refImg2"
  263. mode="scaleToFill"></image>
  264. </view> -->
  265. <view class="btn" @click="uploadBg2">
  266. 上传背景图(16:9)
  267. </view>
  268. </view>
  269. </view>
  270. <view class=""
  271. style="margin-left: 30rpx;margin-top: 20rpx;word-break: break-all;word-wrap: break-word;">
  272. 已选择的背景图:<br>
  273. {{testCusBgImg}}
  274. </view>
  275. </view>
  276. </view>
  277. </view>
  278. </view>
  279. </u-popup>
  280. <!-- 声音筛选弹框 -->
  281. <u-popup :show="show2" @close="close" @open="open">
  282. <view class="contentBox">
  283. <view class="toolBar2">
  284. <view class="closeBtn" @click="show2=false">
  285. <!-- <image src="/static/images/selected.png" mode=""></image> -->
  286. X
  287. </view>
  288. </view>
  289. <view class="content">
  290. <!-- 场景 -->
  291. <view class="scenList">
  292. <view class="item " v-for="(item, index) in scenList"
  293. :class="[currScenIndex==index?'active':'']" @click="currScenIndex=index">
  294. {{item}}
  295. </view>
  296. </view>
  297. <!-- 性别-->
  298. <view class="sexList">
  299. <view class="item " v-for="(item, index) in sexList" :class="[currSexIndex==index?'active':'']"
  300. @click="currSexIndex=index">
  301. {{item}}
  302. </view>
  303. </view>
  304. <!-- 年龄-->
  305. <view class="ageList">
  306. <view class="item " v-for="(item, index) in ageList" :class="[currAgeIndex==index?'active':'']"
  307. @click="currAgeIndex=index">
  308. {{item}}
  309. </view>
  310. </view>
  311. <view class="filterBtn2" @click="filter">
  312. 确认
  313. </view>
  314. </view>
  315. </view>
  316. </u-popup>
  317. <!-- 备用-视频尺寸 -->
  318. <u-popup :show="show5" @close="close" @open="open">
  319. <view class="contentBox">
  320. <!-- <view class="toolBar2">
  321. <view class="closeBtn" @click="show5=false">
  322. X
  323. </view>
  324. </view> -->
  325. <view class="toolBar toolBar2">
  326. <view class="cancel">
  327. </view>
  328. <view class="center">
  329. 视频尺寸
  330. </view>
  331. <view class="confirm" @click="handleBtnConfirm2">
  332. <!-- <image src="/static/images/selected.png" mode=""></image> -->
  333. <view class="closeBtn" @click="show5=false">
  334. X
  335. </view>
  336. </view>
  337. </view>
  338. <view class="content">
  339. <view class="videoRatioBox">
  340. <view class="item">
  341. <view class="top">
  342. 竖版视频
  343. </view>
  344. <view class="bottom">
  345. 9:16
  346. </view>
  347. </view>
  348. <view class="item">
  349. <view class="top">
  350. 横版视频
  351. </view>
  352. <view class="bottom">
  353. 16:9
  354. </view>
  355. </view>
  356. </view>
  357. <view class="filterBtn2" @click="show5=false">
  358. 确认
  359. </view>
  360. </view>
  361. </view>
  362. </u-popup>
  363. <!-- <view class="" style="height: 500rpx;width:300rpx !important;" :style='genResBgImg'>
  364. </view> -->
  365. </view>
  366. </view>
  367. </template>
  368. <script>
  369. import {
  370. generateWork,
  371. roleList,
  372. voiceList,
  373. backList,
  374. getBg
  375. } from '@/api/robot/index.js'
  376. import indexVue from './index.vue';
  377. import
  378. uploadImgUrl
  379. from '@/common/config.js';
  380. export default {
  381. data() {
  382. return {
  383. refImg1: '',
  384. refImg2: '',
  385. testCusBgImg: '',
  386. // tempAudioUrl: 'https://oaigc.oss-cn-chengdu.aliyuncs.com/20230804/90d3618dd8ae5a9ea50b932dba34f295.mp3',
  387. audioUrl: '',
  388. bgItem: {
  389. },
  390. show5: false,
  391. show4: false,
  392. // bgList: ['图片', '颜色'],
  393. bgList: ['预置', '自定义'],
  394. currTabIndex2: 0,
  395. currTabIndexBg: -1,
  396. currTabIndexBgc: -1,
  397. bgPicList: [],
  398. bgColorList: ['red', 'green', 'blue', 'orange', 'green', 'blue', 'orange'],
  399. show3: false,
  400. viewList: ['2D', '3D'],
  401. currTabIndex1: 0,
  402. currTabIndexModal: -1,
  403. modalList: [{
  404. img: '',
  405. name: '模型名称'
  406. },
  407. {
  408. img: '',
  409. name: '模型名称'
  410. },
  411. {
  412. img: '',
  413. name: '模型名称'
  414. },
  415. {
  416. img: '',
  417. name: '模型名称'
  418. },
  419. {
  420. img: '',
  421. name: '模型名称'
  422. },
  423. {
  424. img: '',
  425. name: '模型名称'
  426. },
  427. {
  428. img: '',
  429. name: '模型名称'
  430. },
  431. ],
  432. show2: false,
  433. currTabIndexAll: -1,
  434. scenList: ['全部场景', '热门', '新闻咨询', '影视咨询', '热门', '新闻咨询', '影视咨询'],
  435. currScenIndex: 0,
  436. sexList: ['全部性别', '男声', '女声'],
  437. currSexIndex: 0,
  438. ageList: ['全部年龄', '儿童', '少年', '青年', '中年', '老年'],
  439. currAgeIndex: 0,
  440. allList: [],
  441. // voiceList: ['全部', '热门', '新闻咨询', '影视综艺', '其他'],
  442. show1: false,
  443. currTabIndex: 0,
  444. robotName: '',
  445. textAreaValue: '',
  446. voiceRate: 1,
  447. selRoleId: -1,
  448. selVoiceId: -1,
  449. selBgId: -1,
  450. selBgPic: '',
  451. roleList: [],
  452. value: 1,
  453. show: false,
  454. menuList: [{
  455. icon: require('@/static/images/yusu.png'),
  456. name: '全局语速'
  457. },
  458. {
  459. icon: require('@/static/images/audio.png'),
  460. name: '声音'
  461. },
  462. {
  463. icon: require('@/static/images/bg.png'),
  464. name: '背景'
  465. },
  466. {
  467. icon: require('@/static/images/role.png'),
  468. name: '角色'
  469. },
  470. ],
  471. videoSrc: '',
  472. showMoreMenu: false,
  473. columns: [
  474. []
  475. ],
  476. selVoiceItem: {
  477. name: '',
  478. url: ''
  479. },
  480. selRoleItem: {
  481. name: '',
  482. url: ''
  483. },
  484. detail: {},
  485. roundRate: 1,
  486. isGenerate: false,
  487. isCreate: false,
  488. roleList2: [],
  489. bgPicList2: [],
  490. newBgItem: {
  491. id: -1
  492. },
  493. music: null,
  494. genResBgImg: "",
  495. // hasFirstSeledRole: false,
  496. isFirstSelRole: true,
  497. testCusBgScale: 1
  498. };
  499. },
  500. computed: {
  501. },
  502. onReady() {
  503. },
  504. onUnload() {
  505. },
  506. onLoad(o) {
  507. if (o.type == 'create') {
  508. this.isCreate = true
  509. this.selRoleId = 5
  510. this.selBgId = 0
  511. this.selVoiceId = 9
  512. this.roundRate = 1
  513. this.voiceRate = 1
  514. return
  515. console.log('create')
  516. }
  517. this.detail = getApp().draftDetail
  518. this.robotName = getApp().draftDetail.name
  519. this.textAreaValue = getApp().draftDetail.content
  520. this.selRoleId = getApp().draftDetail.role - 1
  521. this.selVoiceId = getApp().draftDetail.audio - 1
  522. this.voiceRate = getApp().draftDetail.stage
  523. this.selBgId = getApp().draftDetail.back - 1
  524. this.selBgPic = getApp().draftDetail.backs.url
  525. this.bgItem = getApp().draftDetail.backs
  526. this.roundRate = getApp().draftDetail.stage
  527. this.selVoiceItem = getApp().draftDetail.audios
  528. this.selRoleItem = getApp().draftDetail.roles
  529. this.audioUrl = getApp().draftDetail.audio_url || ''
  530. if (getApp().draftDetail.back_url) {
  531. this.testCusBgImg = getApp().draftDetail.back_url
  532. this.selBgPic = getApp().draftDetail.back_url
  533. this.bgItem.scale = getApp().draftDetail.scale
  534. }
  535. console.log('传过来的草稿项:', this.detail);
  536. },
  537. async onShow() {
  538. let res = await roleList({})
  539. if (res.code == 0) {
  540. // this.roleList = res.msg
  541. this.roleList2 = res.msg
  542. console.log('数字人角色列表返回值:', res);
  543. if (this.isCreate) {
  544. this.roleList = this.roleList2.filter((item, index) => {
  545. return item.proportion == '9:16'
  546. })
  547. this.selRoleItem = this.roleList2[5]
  548. this.currTabIndexModal = 3
  549. } else {
  550. if (this.detail.backs.scale == 1) {
  551. this.roleList = this.roleList2.filter((item, index) => {
  552. return item.proportion == '9:16'
  553. })
  554. this.currTabIndexModal = this.roleList.findIndex((item, index) => {
  555. return item.id == this.selRoleId + 1
  556. })
  557. } else {
  558. this.roleList = this.roleList2.filter((item, index) => {
  559. return item.proportion == '16:9'
  560. })
  561. this.currTabIndexModal = this.roleList.findIndex((item, index) => {
  562. return item.id == this.selRoleId + 1
  563. })
  564. }
  565. }
  566. } else {
  567. uni.showToast({
  568. title: res.msg,
  569. icon: 'none'
  570. })
  571. }
  572. let res1 = await voiceList({})
  573. if (res1.code == 0) {
  574. // this.roleList = res.data
  575. this.allList = res1.msg
  576. console.log('数字人声音列表返回值:', res1);
  577. this.currTabIndexAll = res1.msg.findIndex((item, index) => {
  578. return item.id == this.selVoiceId + 1
  579. })
  580. if (this.isCreate) {
  581. this.selVoiceItem = this.allList[9]
  582. }
  583. } else {
  584. uni.showToast({
  585. title: res1.msg,
  586. icon: 'none'
  587. })
  588. }
  589. let res3 = await backList({})
  590. if (res3.code == 0) {
  591. this.bgPicList = res3.msg
  592. this.bgPicList2 = res3.msg
  593. this.refImg1 = res3.msg[0].url
  594. this.refImg2 = res3.msg[3].url
  595. console.log('数字人背景列表返回值:', res3);
  596. if (!this.testCusBgImg) {
  597. this.currTabIndexBg = res3.msg.findIndex((item, index) => {
  598. return item.id == this.selBgId + 1
  599. })
  600. }
  601. if (this.isCreate) {
  602. this.selBgPic = this.bgPicList[0].url
  603. this.bgItem = this.bgPicList[0]
  604. }
  605. console.log('index3', this.currTabIndexBgc);
  606. } else {
  607. uni.showToast({
  608. title: res3.msg,
  609. icon: 'none'
  610. })
  611. }
  612. },
  613. onHide() {
  614. // this.music.src = ''
  615. // this.music = null
  616. if (this.music) this.music.destroy()
  617. },
  618. beforeDestroy() {
  619. console.log('beforeDestroy()');
  620. if (this.music) this.music.destroy()
  621. },
  622. onShareAppMessage: function(res) {
  623. },
  624. methods: {
  625. previewImg(url) {
  626. uni.previewImage({
  627. urls: [url],
  628. // current:[0]
  629. });
  630. },
  631. handleBgTabChange(item, index) {
  632. this.currTabIndex2 = index
  633. console.log('12122', index);
  634. if (index == 1) {} else {}
  635. },
  636. uploadBg1() {
  637. let that = this;
  638. uni.chooseImage({
  639. count: 1, //默认9
  640. sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图,默认二者都有
  641. sourceType: ['album', 'camera'], //从相册选择
  642. success: function(res) {
  643. const tempFilePaths = res.tempFilePaths;
  644. //上传服务器将服务器;
  645. uni.uploadFile({
  646. url: uploadImgUrl.baseImgUrl,
  647. filePath: tempFilePaths[0],
  648. name: 'file',
  649. formData: {
  650. accept: 'image',
  651. upload_type: 'ali-oss'
  652. },
  653. success: res2 => {
  654. let a = JSON.parse(res2.data);
  655. if (a.code == 0) {
  656. that.testCusBgImg = a.data.path.trim()
  657. console.log('上传图片返回值----1:', that.testCusBgImg);
  658. that.selRoleItem = {}
  659. that.currTabIndexModal = -1
  660. that.roleList = that.roleList2.filter((item, index) => {
  661. return item.proportion == '9:16'
  662. })
  663. that.bgItem = {
  664. id: 9999,
  665. scale: 1,
  666. url: a.data.path.trim()
  667. }
  668. that.selBgPic = a.data.path.trim()
  669. that.currTabIndexBg = -1
  670. that.testCusBgScale = 1
  671. // that.ifimg = true
  672. } else {
  673. uni.showToast({
  674. title: '上传图片失败',
  675. icon: 'none'
  676. })
  677. // that.ifimg = false
  678. }
  679. }
  680. });
  681. }
  682. });
  683. },
  684. uploadBg2() {
  685. let that = this;
  686. uni.chooseImage({
  687. count: 1, //默认9
  688. sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图,默认二者都有
  689. sourceType: ['album', 'camera'], //从相册选择
  690. success: function(res) {
  691. const tempFilePaths = res.tempFilePaths;
  692. //上传服务器将服务器;
  693. uni.uploadFile({
  694. url: uploadImgUrl.baseImgUrl,
  695. filePath: tempFilePaths[0],
  696. name: 'file',
  697. formData: {
  698. accept: 'image',
  699. upload_type: 'ali-oss'
  700. },
  701. success: res2 => {
  702. let a = JSON.parse(res2.data);
  703. if (a.code == 0) {
  704. that.testCusBgImg = a.data.path.trim()
  705. console.log('上传图片返回值---2:', that.testCusBgImg);
  706. that.selRoleItem = {}
  707. that.currTabIndexModal = -1
  708. that.roleList = that.roleList2.filter((item, index) => {
  709. return item.proportion == '16:9'
  710. })
  711. that.bgItem = {
  712. id: 9999,
  713. scale: 2,
  714. url: a.data.path.trim()
  715. }
  716. that.selBgPic = a.data.path.trim()
  717. that.currTabIndexBg = -1
  718. that.testCusBgScale = 2
  719. } else {
  720. uni.showToast({
  721. title: '上传图片失败',
  722. icon: 'none'
  723. })
  724. // that.ifimg = false
  725. }
  726. }
  727. });
  728. }
  729. });
  730. },
  731. playAudio(item) {
  732. if (this.music) {
  733. this.music.destroy()
  734. }
  735. this.music = uni.createInnerAudioContext(); //创建播放器对象
  736. this.music.autoplay = true;
  737. this.music.src =
  738. item; //音频地址
  739. // this.music.play();
  740. },
  741. uploadVideo() {
  742. let _this = this
  743. uni.chooseFile({
  744. count: 1, //默认100
  745. extension: ['.mp3'],
  746. success: function(res) {
  747. let tempFilePaths = res.tempFilePaths;
  748. uni.showLoading({
  749. title: "上传中...",
  750. });
  751. uni.uploadFile({
  752. url: uploadImgUrl.baseImgUrl,
  753. filePath: tempFilePaths[0],
  754. // filePath: JSON.stringify(res.tempFilePaths),
  755. name: 'file',
  756. fileType: "audio",
  757. formData: {
  758. accept: 'audio',
  759. upload_type: 'ali-oss'
  760. },
  761. success: (uploadFileRes) => {
  762. uni.hideLoading();
  763. const ret = JSON.parse(uploadFileRes.data);
  764. if (ret.code == 0) {
  765. _this.audioUrl = ret.data.path
  766. console.log(ret);
  767. }
  768. }
  769. });
  770. }
  771. });
  772. },
  773. close() {
  774. this.show = false
  775. },
  776. close1() {
  777. // this.music.src = ''; //音频地址
  778. // this.music.stop(); //执行播放
  779. if (this.music) {
  780. this.music.destroy()
  781. }
  782. this.show1 = false
  783. },
  784. close3() {
  785. this.show3 = false
  786. },
  787. close4() {
  788. this.show4 = false
  789. },
  790. handleSelBg(item, index) {
  791. this.isFirstSelRole = false
  792. if (this.testCusBgImg) {
  793. this.testCusBgImg = ''
  794. }
  795. this.bgItem = item
  796. this.newBgItem = item
  797. console.log('111111111', item);
  798. // return
  799. this.selRoleItem = {}
  800. this.currTabIndexModal = -1
  801. if (item.scale == 1) {
  802. this.roleList = this.roleList2.filter((item, index) => {
  803. return item.proportion == '9:16'
  804. })
  805. } else {
  806. this.roleList = this.roleList2.filter((item, index) => {
  807. return item.proportion == '16:9'
  808. })
  809. }
  810. this.bgItem = item
  811. this.selBgPic = item.url
  812. this.selBgId = item.id - 1
  813. this.currTabIndexBg = index
  814. },
  815. handleVoiceSel(item, index) {
  816. this.music.src = ''; //音频地址
  817. this.music.stop(); //执行播放
  818. this.selVoiceItem = item
  819. this.selVoiceId = item.id - 1
  820. this.currTabIndexAll = index
  821. },
  822. async handleRoleSel(item, index) {
  823. if (this.isFirstSelRole) {
  824. this.selRoleItem = item
  825. this.selRoleId = item.id - 1
  826. this.currTabIndexModal = index
  827. console.log('获取合成背景参数:', {
  828. roleId: item.id,
  829. backId: this.bgItem.id
  830. });
  831. } else {
  832. if (this.bgItem.id != this.newBgItem.id) {
  833. return uni.showToast({
  834. title: '请先选择背景图,再选择角色',
  835. icon: 'none'
  836. })
  837. }
  838. this.selRoleItem = item
  839. this.selRoleId = item.id - 1
  840. this.currTabIndexModal = index
  841. console.log('获取合成背景参数:', {
  842. roleId: item.id,
  843. backId: this.bgItem.id
  844. });
  845. }
  846. },
  847. async saveDraft() {
  848. let parmas = {
  849. name: this.robotName,
  850. content: this.textAreaValue,
  851. // role: this.selRoleId,
  852. // back: this.selBgId,
  853. // audio: this.selVoiceId,
  854. stage: this.roundRate,
  855. audio_url: this.audioUrl,
  856. is_draft: 1
  857. }
  858. if (this.selRoleId != -1) {
  859. parmas['role'] = this.selRoleId
  860. }
  861. if (this.selBgId != -1) {
  862. if (this.testCusBgImg) {
  863. parmas['back_url'] = this.testCusBgImg
  864. parmas['scale'] = this.testCusBgScale
  865. } else {
  866. parmas['back'] = this.selBgId
  867. }
  868. }
  869. if (this.selVoiceId != -1) {
  870. parmas['audio'] = this.selVoiceId
  871. }
  872. console.log('保存数字人草稿参数:', parmas);
  873. // return
  874. let res = await generateWork(parmas)
  875. if (res.code == 0) {
  876. uni.showToast({
  877. title: '保存成功!',
  878. icon: 'success'
  879. })
  880. setTimeout(() => {
  881. uni.navigateBack()
  882. }, 1500)
  883. } else {
  884. uni.showToast({
  885. title: res.msg,
  886. icon: 'none'
  887. })
  888. }
  889. console.log('保存数字人草稿返回值:', res);
  890. },
  891. async genRobot() {
  892. if (this.isGenerate) {
  893. uni.showToast({
  894. title: '请等待上一次生成完成后提交!',
  895. icon: 'none'
  896. })
  897. return
  898. }
  899. let parmas = {}
  900. if (this.audioUrl && !this.testCusBgImg) {
  901. parmas = {
  902. name: this.robotName,
  903. // content: this.textAreaValue,
  904. role: this.selRoleId,
  905. back: this.selBgId,
  906. // audio: this.selVoiceId,
  907. // stage: this.roundRate,
  908. audio_url: this.audioUrl
  909. }
  910. } else if (this.audioUrl && this.testCusBgImg) {
  911. parmas = {
  912. name: this.robotName,
  913. // content: this.textAreaValue,
  914. role: this.selRoleId,
  915. back: this.selBgId,
  916. // audio: this.selVoiceId,
  917. // stage: this.roundRate,
  918. audio_url: this.audioUrl,
  919. back_url: this.testCusBgImg
  920. }
  921. } else if (!this.audioUrl && this.testCusBgImg) {
  922. parmas = {
  923. name: this.robotName,
  924. content: this.textAreaValue,
  925. role: this.selRoleId,
  926. // back: this.selBgId,
  927. back_url: this.testCusBgImg,
  928. audio: this.selVoiceId,
  929. stage: this.roundRate,
  930. // audio_url: this.audioUrl
  931. }
  932. } else {
  933. parmas = {
  934. name: this.robotName,
  935. content: this.textAreaValue,
  936. role: this.selRoleId,
  937. back: this.selBgId,
  938. audio: this.selVoiceId,
  939. stage: this.roundRate,
  940. // audio_url: this.audioUrl
  941. }
  942. }
  943. console.log('创建数字人参数:', parmas);
  944. // return
  945. let res = await generateWork(parmas)
  946. if (res.code == 0) {
  947. this.isGenerate = true
  948. uni.showToast({
  949. title: '创建数字人成功!',
  950. icon: 'success'
  951. })
  952. getApp().from = 'create'
  953. setTimeout(() => {
  954. uni.navigateBack()
  955. }, 1500)
  956. } else {
  957. uni.showToast({
  958. title: res.msg,
  959. icon: 'none'
  960. })
  961. }
  962. console.log('生成数字人返回值:', res);
  963. },
  964. filter() {
  965. this.show2 = false
  966. },
  967. handleFilter() {
  968. // this.show1 = false
  969. this.show2 = true
  970. },
  971. handleAudioClose() {
  972. this.show1 = false
  973. if (this.music) {
  974. this.music.destroy()
  975. }
  976. },
  977. handleBtnConfirm1() {
  978. this.show1 = false
  979. if (this.music) {
  980. this.music.destroy()
  981. }
  982. },
  983. handleBtnConfirm2() {
  984. this.show3 = false
  985. },
  986. handleBtnConfirm3() {
  987. this.show4 = false
  988. },
  989. handleSetBox(item) {
  990. if (item.name == '全局语速') {
  991. if (this.audioUrl) {
  992. return uni.showToast({
  993. title: '上传音频不支持全局语速',
  994. icon: 'none'
  995. })
  996. }
  997. this.show = true
  998. } else if (item.name == '声音') {
  999. if (this.audioUrl) {
  1000. return uni.showToast({
  1001. title: '上传音频不支持声音选择',
  1002. icon: 'none'
  1003. })
  1004. }
  1005. this.music = uni.createInnerAudioContext(); //创建播放器对象
  1006. this.music.autoplay = true;
  1007. this.show1 = true
  1008. } else if (item.name == '角色') {
  1009. this.show3 = true
  1010. } else if (item.name == '背景') {
  1011. this.show4 = true
  1012. }
  1013. },
  1014. handleChange(e) {
  1015. console.log(e);
  1016. this.roundRate = e.toFixed(1)
  1017. },
  1018. handleBtnConfirm() {
  1019. this.show = false
  1020. },
  1021. handleCreatePro() {
  1022. uni.navigateTo({
  1023. url: ''
  1024. })
  1025. },
  1026. handleShowMoreMenu() {
  1027. this.showMoreMenu = true
  1028. },
  1029. handleConfirm(e) {
  1030. this.showMoreMenu = false
  1031. },
  1032. open() {
  1033. // console.log('open() ');
  1034. }
  1035. }
  1036. };
  1037. </script>
  1038. <style lang="scss" scoped>
  1039. @import './index.scss';
  1040. </style>