index.vue 25 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697989910010110210310410510610710810911011111211311411511611711811912012112212312412512612712812913013113213313413513613713813914014114214314414514614714814915015115215315415515615715815916016116216316416516616716816917017117217317417517617717817918018118218318418518618718818919019119219319419519619719819920020120220320420520620720820921021121221321421521621721821922022122222322422522622722822923023123223323423523623723823924024124224324424524624724824925025125225325425525625725825926026126226326426526626726826927027127227327427527627727827928028128228328428528628728828929029129229329429529629729829930030130230330430530630730830931031131231331431531631731831932032132232332432532632732832933033133233333433533633733833934034134234334434534634734834935035135235335435535635735835936036136236336436536636736836937037137237337437537637737837938038138238338438538638738838939039139239339439539639739839940040140240340440540640740840941041141241341441541641741841942042142242342442542642742842943043143243343443543643743843944044144244344444544644744844945045145245345445545645745845946046146246346446546646746846947047147247347447547647747847948048148248348448548648748848949049149249349449549649749849950050150250350450550650750850951051151251351451551651751851952052152252352452552652752852953053153253353453553653753853954054154254354454554654754854955055155255355455555655755855956056156256356456556656756856957057157257357457557657757857958058158258358458558658758858959059159259359459559659759859960060160260360460560660760860961061161261361461561661761861962062162262362462562662762862963063163263363463563663763863964064164264364464564664764864965065165265365465565665765865966066166266366466566666766866967067167267367467567667767867968068168268368468568668768868969069169269369469569669769869970070170270370470570670770870971071171271371471571671771871972072172272372472572672772872973073173273373473573673773873974074174274374474574674774874975075175275375475575675775875976076176276376476576676776876977077177277377477577677777877978078178278378478578678778878979079179279379479579679779879980080180280380480580680780880981081181281381481581681781881982082182282382482582682782882983083183283383483583683783883984084184284384484584684784884985085185285385485585685785885986086186286386486586686786886987087187287387487587687787887988088188288388488588688788888989089189289389489589689789889990090190290390490590690790890991091191291391491591691791891992092192292392492592692792892993093193293393493593693793893994094194294394494594694794894995095195295395495595695795895996096196296396496596696796896997097197297397497597697797897998098198298398498598698798898999099199299399499599699799899910001001100210031004100510061007100810091010101110121013101410151016101710181019102010211022102310241025102610271028
  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">
  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)">
  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="currTabIndex2=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. 像素:1080P<br>
  238. 文件大小:1M以内
  239. </view>
  240. <view class="btn" @click="uploadBg1">
  241. 上传背景图(9:16)
  242. </view>
  243. </view>
  244. <view class="type1">
  245. <view class="des">
  246. <text class="lab">尺寸:16:9</text><br>
  247. 背景图要求:<br>
  248. 像素:1080P<br>
  249. 文件大小:1M以内
  250. </view>
  251. <view class="btn" @click="uploadBg2">
  252. 上传背景图(16:9)
  253. </view>
  254. </view>
  255. </view>
  256. <view class=""
  257. style="margin-left: 30rpx;margin-top: 20rpx;word-break: break-all;word-wrap: break-word;">
  258. 已选择的背景图:<br>
  259. {{testCusBgImg}}
  260. </view>
  261. </view>
  262. </view>
  263. </view>
  264. </view>
  265. </u-popup>
  266. <!-- 声音筛选弹框 -->
  267. <u-popup :show="show2" @close="close" @open="open">
  268. <view class="contentBox">
  269. <view class="toolBar2">
  270. <view class="closeBtn" @click="show2=false">
  271. <!-- <image src="/static/images/selected.png" mode=""></image> -->
  272. X
  273. </view>
  274. </view>
  275. <view class="content">
  276. <!-- 场景 -->
  277. <view class="scenList">
  278. <view class="item " v-for="(item, index) in scenList"
  279. :class="[currScenIndex==index?'active':'']" @click="currScenIndex=index">
  280. {{item}}
  281. </view>
  282. </view>
  283. <!-- 性别-->
  284. <view class="sexList">
  285. <view class="item " v-for="(item, index) in sexList" :class="[currSexIndex==index?'active':'']"
  286. @click="currSexIndex=index">
  287. {{item}}
  288. </view>
  289. </view>
  290. <!-- 年龄-->
  291. <view class="ageList">
  292. <view class="item " v-for="(item, index) in ageList" :class="[currAgeIndex==index?'active':'']"
  293. @click="currAgeIndex=index">
  294. {{item}}
  295. </view>
  296. </view>
  297. <view class="filterBtn2" @click="filter">
  298. 确认
  299. </view>
  300. </view>
  301. </view>
  302. </u-popup>
  303. <!-- 备用-视频尺寸 -->
  304. <u-popup :show="show5" @close="close" @open="open">
  305. <view class="contentBox">
  306. <!-- <view class="toolBar2">
  307. <view class="closeBtn" @click="show5=false">
  308. X
  309. </view>
  310. </view> -->
  311. <view class="toolBar toolBar2">
  312. <view class="cancel">
  313. </view>
  314. <view class="center">
  315. 视频尺寸
  316. </view>
  317. <view class="confirm" @click="handleBtnConfirm2">
  318. <!-- <image src="/static/images/selected.png" mode=""></image> -->
  319. <view class="closeBtn" @click="show5=false">
  320. X
  321. </view>
  322. </view>
  323. </view>
  324. <view class="content">
  325. <view class="videoRatioBox">
  326. <view class="item">
  327. <view class="top">
  328. 竖版视频
  329. </view>
  330. <view class="bottom">
  331. 9:16
  332. </view>
  333. </view>
  334. <view class="item">
  335. <view class="top">
  336. 横版视频
  337. </view>
  338. <view class="bottom">
  339. 16:9
  340. </view>
  341. </view>
  342. </view>
  343. <view class="filterBtn2" @click="show5=false">
  344. 确认
  345. </view>
  346. </view>
  347. </view>
  348. </u-popup>
  349. <!-- <audio :src="tempAudioUrl" autoplay ref="audioRef" style=""></audio> -->
  350. <!-- <wike-tabbar :onTabbar="true" :isShowAnimate="true"></wike-tabbar> -->
  351. </view>
  352. </view>
  353. </template>
  354. <script>
  355. import {
  356. generateWork,
  357. roleList,
  358. voiceList,
  359. backList
  360. } from '@/api/robot/index.js'
  361. import indexVue from './index.vue';
  362. import
  363. uploadImgUrl
  364. from '@/common/config.js';
  365. export default {
  366. data() {
  367. return {
  368. testCusBgImg: '',
  369. // tempAudioUrl: 'https://oaigc.oss-cn-chengdu.aliyuncs.com/20230804/90d3618dd8ae5a9ea50b932dba34f295.mp3',
  370. audioUrl: '',
  371. bgItem: {
  372. },
  373. show5: false,
  374. show4: false,
  375. // bgList: ['图片', '颜色'],
  376. bgList: ['预置', '自定义'],
  377. currTabIndex2: 0,
  378. currTabIndexBg: -1,
  379. currTabIndexBgc: -1,
  380. bgPicList: [],
  381. bgColorList: ['red', 'green', 'blue', 'orange', 'green', 'blue', 'orange'],
  382. show3: false,
  383. viewList: ['2D', '3D'],
  384. currTabIndex1: 0,
  385. currTabIndexModal: -1,
  386. modalList: [{
  387. img: '',
  388. name: '模型名称'
  389. },
  390. {
  391. img: '',
  392. name: '模型名称'
  393. },
  394. {
  395. img: '',
  396. name: '模型名称'
  397. },
  398. {
  399. img: '',
  400. name: '模型名称'
  401. },
  402. {
  403. img: '',
  404. name: '模型名称'
  405. },
  406. {
  407. img: '',
  408. name: '模型名称'
  409. },
  410. {
  411. img: '',
  412. name: '模型名称'
  413. },
  414. ],
  415. show2: false,
  416. currTabIndexAll: -1,
  417. scenList: ['全部场景', '热门', '新闻咨询', '影视咨询', '热门', '新闻咨询', '影视咨询'],
  418. currScenIndex: 0,
  419. sexList: ['全部性别', '男声', '女声'],
  420. currSexIndex: 0,
  421. ageList: ['全部年龄', '儿童', '少年', '青年', '中年', '老年'],
  422. currAgeIndex: 0,
  423. allList: [],
  424. // voiceList: ['全部', '热门', '新闻咨询', '影视综艺', '其他'],
  425. show1: false,
  426. currTabIndex: 0,
  427. robotName: '',
  428. textAreaValue: '',
  429. voiceRate: 1,
  430. selRoleId: -1,
  431. selVoiceId: -1,
  432. selBgId: -1,
  433. selBgPic: '',
  434. roleList: [],
  435. value: 1,
  436. show: false,
  437. menuList: [{
  438. icon: require('@/static/images/yusu.png'),
  439. name: '全局语速'
  440. },
  441. {
  442. icon: require('@/static/images/audio.png'),
  443. name: '声音'
  444. },
  445. {
  446. icon: require('@/static/images/bg.png'),
  447. name: '背景'
  448. },
  449. {
  450. icon: require('@/static/images/role.png'),
  451. name: '角色'
  452. },
  453. ],
  454. videoSrc: '',
  455. showMoreMenu: false,
  456. columns: [
  457. []
  458. ],
  459. selVoiceItem: {
  460. name: '',
  461. url: ''
  462. },
  463. selRoleItem: {
  464. name: '',
  465. url: ''
  466. },
  467. detail: {},
  468. roundRate: 1,
  469. isGenerate: false,
  470. isCreate: false,
  471. roleList2: [],
  472. bgPicList2: [],
  473. newBgItem: {
  474. id: -1
  475. },
  476. music: null
  477. };
  478. },
  479. computed: {
  480. },
  481. onReady() {
  482. },
  483. onUnload() {
  484. },
  485. onLoad(o) {
  486. if (o.type == 'create') {
  487. this.isCreate = true
  488. this.selRoleId = 5
  489. this.selBgId = 0
  490. this.selVoiceId = 9
  491. this.roundRate = 1
  492. this.voiceRate = 1
  493. return
  494. console.log('create')
  495. }
  496. this.detail = getApp().draftDetail
  497. this.robotName = getApp().draftDetail.name
  498. this.textAreaValue = getApp().draftDetail.content
  499. this.selRoleId = getApp().draftDetail.role - 1
  500. this.selBgId = getApp().draftDetail.back - 1
  501. this.selVoiceId = getApp().draftDetail.audio - 1
  502. this.voiceRate = getApp().draftDetail.stage
  503. this.selBgPic = getApp().draftDetail.backs.url
  504. this.bgItem = getApp().draftDetail.backs
  505. this.roundRate = getApp().draftDetail.stage
  506. this.selVoiceItem = getApp().draftDetail.audios
  507. this.selRoleItem = getApp().draftDetail.roles
  508. this.audioUrl = getApp().draftDetail.audio_url
  509. console.log('传过来的草稿项:', this.detail);
  510. },
  511. async onShow() {
  512. let res = await roleList({})
  513. if (res.code == 0) {
  514. this.roleList = res.msg
  515. this.roleList2 = res.msg
  516. console.log('数字人角色列表返回值:', res);
  517. this.currTabIndexModal = res.msg.findIndex((item, index) => {
  518. return item.id == this.selRoleId + 1
  519. })
  520. if (this.isCreate) {
  521. this.selRoleItem = this.roleList[5]
  522. }
  523. } else {
  524. uni.showToast({
  525. title: res.msg,
  526. icon: 'none'
  527. })
  528. }
  529. let res1 = await voiceList({})
  530. if (res1.code == 0) {
  531. // this.roleList = res.data
  532. this.allList = res1.msg
  533. console.log('数字人声音列表返回值:', res1);
  534. this.currTabIndexAll = res1.msg.findIndex((item, index) => {
  535. return item.id == this.selVoiceId + 1
  536. })
  537. if (this.isCreate) {
  538. this.selVoiceItem = this.allList[9]
  539. }
  540. } else {
  541. uni.showToast({
  542. title: res1.msg,
  543. icon: 'none'
  544. })
  545. }
  546. let res3 = await backList({})
  547. if (res3.code == 0) {
  548. this.bgPicList = res3.msg
  549. this.bgPicList2 = res3.msg
  550. console.log('数字人背景列表返回值:', res3);
  551. this.currTabIndexBg = res3.msg.findIndex((item, index) => {
  552. return item.id == this.selBgId + 1
  553. })
  554. // if (this.detail.backs.scale == 2) {
  555. // this.bgPicList = res3.msg.filter((item, index) => {
  556. // return item.scale == 2
  557. // })
  558. // this.currTabIndexBg = res3.msg.filter((item, index) => {
  559. // return item.scale == 2
  560. // }).findIndex((item, index) => {
  561. // return item.id == this.selBgId + 1
  562. // })
  563. // } else {
  564. // this.bgPicList = res3.msg.filter((item, index) => {
  565. // return item.scale == 1
  566. // })
  567. // this.currTabIndexBg = res3.msg.filter((item, index) => {
  568. // return item.scale == 1
  569. // }).findIndex((item, index) => {
  570. // return item.id == this.selBgId + 1
  571. // })
  572. // }
  573. if (this.isCreate) {
  574. this.selBgPic = this.bgPicList[0].url
  575. this.bgItem = this.bgPicList[0]
  576. }
  577. console.log('index3', this.currTabIndexBgc);
  578. } else {
  579. uni.showToast({
  580. title: res3.msg,
  581. icon: 'none'
  582. })
  583. }
  584. },
  585. onHide() {
  586. // this.music.src = ''
  587. // this.music = null
  588. if (this.music) this.music.destroy()
  589. },
  590. beforeDestroy() {
  591. console.log('beforeDestroy()');
  592. if (this.music) this.music.destroy()
  593. },
  594. onShareAppMessage: function(res) {
  595. },
  596. methods: {
  597. uploadBg1() {
  598. let that = this;
  599. uni.chooseImage({
  600. count: 1, //默认9
  601. sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图,默认二者都有
  602. sourceType: ['album', 'camera'], //从相册选择
  603. success: function(res) {
  604. const tempFilePaths = res.tempFilePaths;
  605. //上传服务器将服务器;
  606. uni.uploadFile({
  607. url: uploadImgUrl.baseImgUrl,
  608. filePath: tempFilePaths[0],
  609. name: 'file',
  610. formData: {
  611. accept: 'image',
  612. upload_type: 'ali-oss'
  613. },
  614. success: res2 => {
  615. let a = JSON.parse(res2.data);
  616. if (a.code == 0) {
  617. that.testCusBgImg = a.data.path.trim()
  618. console.log('上传图片返回值:', that.testCusBgImg);
  619. // that.ifimg = true
  620. } else {
  621. uni.showToast({
  622. title: '上传图片失败',
  623. icon: 'none'
  624. })
  625. // that.ifimg = false
  626. }
  627. }
  628. });
  629. }
  630. });
  631. },
  632. uploadBg2() {
  633. let that = this;
  634. uni.chooseImage({
  635. count: 1, //默认9
  636. sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图,默认二者都有
  637. sourceType: ['album', 'camera'], //从相册选择
  638. success: function(res) {
  639. const tempFilePaths = res.tempFilePaths;
  640. //上传服务器将服务器;
  641. uni.uploadFile({
  642. url: uploadImgUrl.baseImgUrl,
  643. filePath: tempFilePaths[0],
  644. name: 'file',
  645. formData: {
  646. accept: 'image',
  647. upload_type: 'ali-oss'
  648. },
  649. success: res2 => {
  650. let a = JSON.parse(res2.data);
  651. if (a.code == 0) {
  652. that.testCusBgImg = a.data.path.trim()
  653. console.log('上传图片返回值:', that.testCusBgImg);
  654. // that.ifimg = true
  655. } else {
  656. uni.showToast({
  657. title: '上传图片失败',
  658. icon: 'none'
  659. })
  660. // that.ifimg = false
  661. }
  662. }
  663. });
  664. }
  665. });
  666. },
  667. playAudio(item) {
  668. if (this.music) {
  669. this.music.destroy()
  670. }
  671. this.music = uni.createInnerAudioContext(); //创建播放器对象
  672. this.music.autoplay = true;
  673. this.music.src =
  674. "https://oaigc.oss-cn-chengdu.aliyuncs.com/20230804/90d3618dd8ae5a9ea50b932dba34f295.mp3"; //音频地址
  675. // this.music.play();
  676. },
  677. uploadVideo() {
  678. let _this = this
  679. uni.chooseFile({
  680. count: 1, //默认100
  681. extension: ['.mp3'],
  682. success: function(res) {
  683. let tempFilePaths = res.tempFilePaths;
  684. uni.showLoading({
  685. title: "上传中...",
  686. });
  687. uni.uploadFile({
  688. url: uploadImgUrl.baseImgUrl,
  689. filePath: tempFilePaths[0],
  690. // filePath: JSON.stringify(res.tempFilePaths),
  691. name: 'file',
  692. fileType: "audio",
  693. formData: {
  694. accept: 'audio',
  695. upload_type: 'ali-oss'
  696. },
  697. success: (uploadFileRes) => {
  698. uni.hideLoading();
  699. const ret = JSON.parse(uploadFileRes.data);
  700. if (ret.code == 0) {
  701. _this.audioUrl = ret.data.path
  702. console.log(ret);
  703. }
  704. }
  705. });
  706. }
  707. });
  708. },
  709. close() {
  710. this.show = false
  711. },
  712. close1() {
  713. // this.music.src = ''; //音频地址
  714. // this.music.stop(); //执行播放
  715. if (this.music) {
  716. this.music.destroy()
  717. }
  718. this.show1 = false
  719. },
  720. close3() {
  721. this.show3 = false
  722. },
  723. close4() {
  724. this.show4 = false
  725. },
  726. handleSelBg(item, index) {
  727. this.bgItem = item
  728. this.newBgItem = item
  729. console.log('111111111', item);
  730. // return
  731. this.selRoleItem = {}
  732. this.currTabIndexModal = -1
  733. if (item.scale == 1) {
  734. this.roleList = this.roleList2.filter((item, index) => {
  735. return item.proportion == '9:16'
  736. })
  737. } else {
  738. this.roleList = this.roleList2.filter((item, index) => {
  739. return item.proportion == '16:9'
  740. })
  741. }
  742. this.bgItem = item
  743. this.selBgPic = item.url
  744. this.selBgId = item.id - 1
  745. this.currTabIndexBg = index
  746. },
  747. handleVoiceSel(item, index) {
  748. this.music.src = ''; //音频地址
  749. this.music.stop(); //执行播放
  750. this.selVoiceItem = item
  751. this.selVoiceId = item.id - 1
  752. this.currTabIndexAll = index
  753. },
  754. handleRoleSel(item, index) {
  755. if (this.bgItem.id != this.newBgItem.id) {
  756. return uni.showToast({
  757. title: '请先选择背景图,再选择角色',
  758. icon: 'none'
  759. })
  760. }
  761. this.selRoleItem = item
  762. this.selRoleId = item.id - 1
  763. this.currTabIndexModal = index
  764. },
  765. async saveDraft() {
  766. let parmas = {
  767. name: this.robotName,
  768. content: this.textAreaValue,
  769. // role: this.selRoleId,
  770. // back: this.selBgId,
  771. // audio: this.selVoiceId,
  772. stage: this.roundRate,
  773. audio_url: this.audioUrl,
  774. is_draft: 1
  775. }
  776. if (this.selRoleId != -1) {
  777. parmas['role'] = this.selRoleId
  778. }
  779. if (this.selBgId != -1) {
  780. parmas['back'] = this.selBgId
  781. }
  782. if (this.selVoiceId != -1) {
  783. parmas['audio'] = this.selVoiceId
  784. }
  785. console.log('保存数字人草稿参数:', parmas);
  786. // return
  787. let res = await generateWork(parmas)
  788. if (res.code == 0) {
  789. uni.showToast({
  790. title: '保存成功!',
  791. icon: 'success'
  792. })
  793. setTimeout(() => {
  794. uni.navigateBack()
  795. }, 1500)
  796. } else {
  797. uni.showToast({
  798. title: res.msg,
  799. icon: 'none'
  800. })
  801. }
  802. console.log('保存数字人草稿返回值:', res);
  803. },
  804. async genRobot() {
  805. if (this.isGenerate) {
  806. uni.showToast({
  807. title: '请等待上一次生成完成后提交!',
  808. icon: 'none'
  809. })
  810. return
  811. }
  812. let parmas = {}
  813. if (this.audioUrl) {
  814. parmas = {
  815. name: this.robotName,
  816. // content: this.textAreaValue,
  817. role: this.selRoleId,
  818. back: this.selBgId,
  819. // audio: this.selVoiceId,
  820. // stage: this.roundRate,
  821. audio_url: this.audioUrl
  822. }
  823. } else {
  824. parmas = {
  825. name: this.robotName,
  826. content: this.textAreaValue,
  827. role: this.selRoleId,
  828. back: this.selBgId,
  829. audio: this.selVoiceId,
  830. stage: this.roundRate,
  831. audio_url: this.audioUrl
  832. }
  833. }
  834. console.log('创建数字人参数:', parmas);
  835. // return
  836. let res = await generateWork(parmas)
  837. if (res.code == 0) {
  838. this.isGenerate = true
  839. uni.showToast({
  840. title: '创建数字人成功!',
  841. icon: 'success'
  842. })
  843. getApp().from = 'create'
  844. setTimeout(() => {
  845. uni.navigateBack()
  846. }, 1500)
  847. } else {
  848. uni.showToast({
  849. title: res.msg,
  850. icon: 'none'
  851. })
  852. }
  853. console.log('生成数字人返回值:', res);
  854. },
  855. filter() {
  856. this.show2 = false
  857. },
  858. handleFilter() {
  859. // this.show1 = false
  860. this.show2 = true
  861. },
  862. handleAudioClose() {
  863. this.show1 = false
  864. if (this.music) {
  865. this.music.destroy()
  866. }
  867. },
  868. handleBtnConfirm1() {
  869. this.show1 = false
  870. if (this.music) {
  871. this.music.destroy()
  872. }
  873. },
  874. handleBtnConfirm2() {
  875. this.show3 = false
  876. },
  877. handleBtnConfirm3() {
  878. this.show4 = false
  879. },
  880. handleSetBox(item) {
  881. if (item.name == '全局语速') {
  882. if (this.audioUrl) {
  883. return uni.showToast({
  884. title: '上传音频不支持全局语速',
  885. icon: 'none'
  886. })
  887. }
  888. this.show = true
  889. } else if (item.name == '声音') {
  890. if (this.audioUrl) {
  891. return uni.showToast({
  892. title: '上传音频不支持声音选择',
  893. icon: 'none'
  894. })
  895. }
  896. this.show1 = true
  897. } else if (item.name == '角色') {
  898. this.show3 = true
  899. } else if (item.name == '背景') {
  900. this.show4 = true
  901. }
  902. },
  903. handleChange(e) {
  904. console.log(e);
  905. this.roundRate = e.toFixed(1)
  906. },
  907. handleBtnConfirm() {
  908. this.show = false
  909. },
  910. handleCreatePro() {
  911. uni.navigateTo({
  912. url: ''
  913. })
  914. },
  915. handleShowMoreMenu() {
  916. this.showMoreMenu = true
  917. },
  918. handleConfirm(e) {
  919. this.showMoreMenu = false
  920. },
  921. open() {
  922. // console.log('open() ');
  923. }
  924. }
  925. };
  926. </script>
  927. <style lang="scss" scoped>
  928. @import './index.scss';
  929. </style>