viewAI.vue 26 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855
  1. <template src="./viewAI.html">
  2. </template>
  3. <script>
  4. const util = require('@/utils/util.js').default;
  5. import {
  6. MessageBox
  7. } from 'mint-ui';
  8. import {
  9. Indicator
  10. } from 'mint-ui';
  11. import {
  12. Toast
  13. } from 'mint-ui';
  14. import lottie from "lottie-web"; //lottie
  15. // const { createWorker } = require('@ffmpeg/ffmpeg');
  16. import { FFmpeg } from "@ffmpeg/ffmpeg";
  17. import { fetchFile, toBlobURL } from '@ffmpeg/util';
  18. var qiniu = require('qiniu-js');
  19. const baseURL = '.'
  20. let ffmpeg = null;
  21. // import { createFFmpeg, fetchFile } from '@/assets/ffmpeg.min.js';
  22. // import commonMethod from '@/common/commonMethod.js';
  23. // import touchHandle from '@/mixins/touchHandle.js';
  24. // import requestConfig from '@/static/lib/requestConfig';
  25. export default {
  26. data: function() {
  27. return {
  28. leftList: [],
  29. rightList: [],
  30. musicList: [], //音乐列表
  31. dataList: [],
  32. tabIndex: 0, //当前选中的tab序号
  33. selectIndex: -1,
  34. peopleIndex: -1,
  35. petIndex: -1,
  36. musicIndex: -1,
  37. specialIndex: 1,
  38. specialList:[
  39. {
  40. id:1,
  41. url:'https://dm.static.elab-plus.com/miniProgram/lottieJson/gold.json',
  42. title:'金光闪闪',
  43. },
  44. {
  45. id:2,
  46. url:'https://dm.static.elab-plus.com/miniProgram/lottieJson/fireworks.json',
  47. title:'烟花',
  48. },
  49. {
  50. id:3,
  51. url:'https://dm.static.elab-plus.com/miniProgram/lottieJson/coloreRibbon.json',
  52. title:'彩带',
  53. },
  54. ],
  55. hasRedBox:false, //是否添加了红包
  56. limit:200,
  57. videoId:'', //上传视频的id
  58. videoUrl:'', //处理好的视频地址
  59. progress:0, //进度条
  60. ktProgress:0, //抠图进度条
  61. cProgress:0, //压缩进度条
  62. showPersonView:false, //是否显示个人形象提示弹窗
  63. showPopView:false, //是否显示确认取消框
  64. uploadStatus:0, //视频处理的状态 -1 压缩中 0 未开始,1 上传中,2绿幕抠图中-服务端处理中,3处理成功 4 处理失败
  65. count:0, //结果请求次数
  66. timeOut:20*60*1000, //超时时间
  67. outTimer:null, //延时处理对象
  68. timer:null, //轮询对象
  69. widthHeight:'', //用户上传视频尺寸
  70. stopFlag:false, //停止上传动作
  71. cancelTokenSource:null, //取消上传的操作对象
  72. repeartFlag:false, //防止重复点击
  73. videoSrc:'',
  74. }
  75. },
  76. props: {
  77. relationId: {
  78. type: String,
  79. default: '',
  80. },
  81. amount: {
  82. type: String,
  83. default: '',
  84. },
  85. },
  86. watch: {
  87. relationId(newVal, oldVal) {
  88. if (newVal == null) {
  89. return;
  90. }
  91. console.log("当前空间数据relationId:", newVal);
  92. this.tabIndex = 2;//有红包时默认切换为红包
  93. if(!this.hasRedBox){
  94. setTimeout(()=>{
  95. this.addRedBox();//添加红包
  96. },500)
  97. this.$nextTick(() => {
  98. // 播放lottie动画
  99. lottie.destroy("markLoading");
  100. var element = document.getElementById("special-img");
  101. this.anim = lottie.loadAnimation({
  102. container: element,
  103. name: "markLoading",
  104. renderer: "svg",
  105. loop: true,
  106. autoplay: true,
  107. path: this.specialList[this.specialIndex].url, //动画json
  108. });
  109. });
  110. }
  111. // this.curSpaceArea = parseFloat(
  112. // (newVal.spaceWidth * newVal.spaceHeight) / 10000
  113. // ).toFixed(2);
  114. // this.getOverallArrangementDetailsList();
  115. },
  116. },
  117. // mixins: [touchHandle],
  118. async mounted() {
  119. // await this.getCityHouseList();
  120. console.warn("***viewAI***")
  121. // Indicator.open('加载中...');
  122. this.getDatalist(0);
  123. this.getDatalist(1);
  124. this.getDatalist(3);
  125. // this.getRelationInfo();//获取场景信息
  126. },
  127. computed: {
  128. userId() {
  129. return this.$store.state.userId;
  130. },
  131. },
  132. // 页面被展示时执行
  133. onPageShow: function() {
  134. },
  135. //页面被隐藏时执行
  136. onPageHide: function() {
  137. // console.warn("***detached-hide***")
  138. },
  139. methods: {
  140. format(percentage) {
  141. let text = "上传中";
  142. if(this.uploadStatus==1){
  143. text = "上传中";
  144. }else if(this.uploadStatus==2){
  145. text = "抠图中";
  146. }else if(this.uploadStatus==-1){
  147. text = "压缩中";
  148. }
  149. return `${text}\n${percentage}%`;
  150. },
  151. resolveIndex(index) {
  152. this.selectIndex = index || 0;
  153. },
  154. catchTapEvent:function(){
  155. return false;
  156. },
  157. specialChange(index) {
  158. if (this.specialIndex == index) {
  159. return false;
  160. }
  161. this.specialIndex = index;
  162. this.$nextTick(() => {
  163. // 播放lottie动画
  164. lottie.destroy("markLoading");
  165. var element = document.getElementById("special-img");
  166. this.anim = lottie.loadAnimation({
  167. container: element,
  168. name: "markLoading",
  169. renderer: "svg",
  170. loop: true,
  171. autoplay: true,
  172. path: this.specialList[this.specialIndex].url, //动画json
  173. });
  174. });
  175. },
  176. tabChange(index) {
  177. if (this.tabIndex == index) {
  178. return false;
  179. }
  180. if (this.$parent.repeatFlag == true) {
  181. Toast({
  182. message: '加载中...请稍后再试',
  183. });
  184. return false
  185. }
  186. this.tabIndex = index;
  187. this.$emit("tabChange", this.tabIndex); //通知页面,户型大类发生了变更
  188. if(this.tabIndex==2 && this.specialIndex>-1){
  189. if(!this.hasRedBox){
  190. this.addRedBox();//添加红包
  191. }
  192. this.$nextTick(() => {
  193. // 播放lottie动画
  194. lottie.destroy("markLoading");
  195. var element = document.getElementById("special-img");
  196. this.anim = lottie.loadAnimation({
  197. container: element,
  198. name: "markLoading",
  199. renderer: "svg",
  200. loop: true,
  201. autoplay: true,
  202. path: this.specialList[this.specialIndex].url, //动画json
  203. });
  204. });
  205. }
  206. },
  207. initStatus(){
  208. this.progress = 0;
  209. this.ktProgress = 0;
  210. this.count = 0;
  211. this.videoUrl = '';
  212. this.widthHeight = '';
  213. this.leftList[0].icon = '';
  214. this.leftList[0].url = '';
  215. this.uploadStatus = 0;//处理完毕
  216. },
  217. async transcode(file,ffmpeg){
  218. // if(!crossOriginIsolated) {
  219. // SharedArrayBuffer = ArrayBuffer;
  220. // }
  221. const { name } = file;
  222. console.warn('正在加载 ffmpeg-core.js')
  223. await ffmpeg.load();
  224. console.warn('开始压缩');
  225. ffmpeg.FS('writeFile', name, await fetchFile(file));
  226. // '-b','2000000' 值越小 压缩率越大
  227. await ffmpeg.run('-i', name,'-b','2000000','output.mp4');
  228. console.warn('压缩完成');
  229. var data = ffmpeg.FS('readFile', 'output.mp4');
  230. var newfile = new File([data.buffer], name, { type: "video/mp4" });
  231. var video = document.getElementById('output-video');
  232. video.src = URL.createObjectURL(new Blob([data.buffer], {
  233. type: 'video/mp4'
  234. }));
  235. // this.uploadMaterielFile(newfile)
  236. },
  237. async transcodeNew(file,form){
  238. if (ffmpeg === null) {
  239. ffmpeg = new FFmpeg();
  240. }
  241. ffmpeg.on("log", ({ message }) => {
  242. console.warn(message);
  243. })
  244. ffmpeg.on("progress", ({ progress }) => {
  245. let pro = `${progress * 100} %`;
  246. console.warn("***progress***",pro)
  247. this.cProgress = parseInt(progress * 100);
  248. });
  249. await ffmpeg.load({
  250. // coreURL: "/packages/core/dist/esm/ffmpeg-core.js",
  251. coreURL: await toBlobURL(`${baseURL}/ffmpeg-core.js`, 'text/javascript'),
  252. wasmURL: await toBlobURL(`${baseURL}/ffmpeg-core.wasm`, 'application/wasm'),
  253. workerURL: await toBlobURL(`${baseURL}/ffmpeg-core.worker.js`, 'text/javascript')
  254. });
  255. const {name} = file;
  256. console.warn('开始压缩');
  257. this.uploadStatus = -1;
  258. let d0 = Date.now();
  259. await ffmpeg.writeFile(name, await fetchFile(file));
  260. await ffmpeg.exec(['-i', name, 'output.mp4']);
  261. this.uploadStatus = 1;
  262. let d1 = Date.now();
  263. console.warn("***time1**", d0, d1,d1 - d0)
  264. console.warn('压缩完成');
  265. const data = await ffmpeg.readFile('output.mp4');
  266. // const video = document.getElementById('output-video');
  267. // video.src = URL.createObjectURL(new Blob([data.buffer], { type: 'video/mp4' }));
  268. var newfile = new File([data.buffer], name, { type: "video/mp4" });
  269. this.uploadMaterielFile({file:newfile},form)
  270. },
  271. //上传到七牛云中
  272. async uploadVideolFile(file,form){
  273. var self = this;
  274. let tokenObj = await requestConfig('getUploadToken', {});//获取上传token
  275. var token = tokenObj.single.token;
  276. var resultUrl = tokenObj.single.resultUrl; //上传图片的访问前缀this.resultUrl =
  277. var tp = file.name.substring(file.name.lastIndexOf('.'));
  278. var putExtra = {
  279. fname: "",
  280. params: {},
  281. mimeType: null
  282. };
  283. var config = {
  284. useCdnDomain: true,
  285. disableStatisticsReport: false,
  286. retryCount: 6,
  287. region: qiniu.region.z0
  288. };
  289. self.uploadStatus = 1;//上传中
  290. self.showPersonView = false;
  291. self.addSilhouette();//添加剪影视频
  292. let _name = Math.floor(Math.random()*1000);
  293. var fileName = decodeURIComponent(encodeURIComponent(Date.now() + '/video' +_name )) + tp;
  294. var observable = qiniu.upload(file, fileName, token, putExtra, config);
  295. var subscription = observable.subscribe(self.next, self.error, async function(res){
  296. let videoUrl = resultUrl + fileName;
  297. let realVideoUrl = 'https://dm.static.elab-plus.com/' + "video" + _name +'_elab.mp4';
  298. console.warn("视频上传七牛成功",videoUrl ,realVideoUrl);
  299. // self.$message.success('视频上传成功');
  300. // alert("***uploadMaterielFile***"+$config.brandId+this.userId);
  301. let data = {
  302. "url":videoUrl,
  303. "brandId": $config.brandId,
  304. "userId":self.userId
  305. }
  306. let res1 = await requestConfig('robust_videoV2', data, true, false)
  307. if (res1 && res1.success && res1.single) {
  308. self.videoId = res1.single;//根据Id查询结果
  309. self.startInterval();//开始轮询获取结果
  310. }else{
  311. self.initStatus();//还原初始状态
  312. }
  313. let videoForm = document.getElementById(form); //获取表单对象
  314. videoForm && videoForm.reset(); // 重置表单
  315. });
  316. },
  317. next(res){
  318. this.progress = Math.round(res.total.percent);//loaded已经加载的
  319. },
  320. // 上传七牛云发生错误
  321. error(res){
  322. this.$message.error('视频上传失败'+res.message);
  323. },
  324. async uploadImgObj(e,form,type=1){
  325. this.stopFlag = false;//上传开始时,开启上传
  326. if(type==2){
  327. this.initStatus();//重置上传状态到初始值
  328. }
  329. //上传图片
  330. var file = e.target.files[0];
  331. // this.transcodeNew(file,form);
  332. var fileSize = file.size / 1024 / 1024;
  333. // alert('**文件**' + e.target.value + "-fileName=" + file.name+ "-fileSize="+fileSize);
  334. if (!/\.(MP4|mp4|MOV|mov)$/.test(e.target.value)) {
  335. this.$message.warning('文件类型必须是mp4或者mov');
  336. var videoForm = document.getElementById(form); //获取表单对象
  337. videoForm && videoForm.reset(); // 重置表单
  338. return false
  339. }
  340. if (fileSize > this.limit) {
  341. this.$message.warning('您的上传的视频过大,请低于' + this.limit + 'MB');
  342. var videoForm = document.getElementById(form); //获取表单对象
  343. videoForm && videoForm.reset(); // 重置表单
  344. return false
  345. }
  346. if (file.name.length > 100) {
  347. this.$message.warning('文件名过长,请不要超过100个字符');
  348. var videoForm = document.getElementById(form); //获取表单对象
  349. videoForm && videoForm.reset(); // 重置表单
  350. return false;
  351. }
  352. if(this.$parent.isIOS){//IOS则直接上传
  353. if(!this.stopFlag){
  354. var item = {};
  355. item.file = file;
  356. console.warn("***uploadImgObj***",file)
  357. if(fileSize>20){//七牛云上传-服务端压缩
  358. this.uploadVideolFile(file,form);
  359. }else{
  360. this.uploadMaterielFile(item, form); //正常上传图片
  361. }
  362. }
  363. }else{//安卓
  364. let reader = new FileReader();
  365. reader.onload = (event) => {
  366. let video = document.createElement('video');
  367. video.onloadedmetadata = (event) => {
  368. let duration = video.duration;
  369. let width = video.videoWidth;
  370. let height = video.videoHeight;
  371. // this.videoWidth = width;
  372. // this.videoHeight = height;
  373. console.warn('视频时长:', duration,this.stopFlag);
  374. console.warn('视频尺寸:x:', width, 'y:', height);
  375. if (duration > 20) {
  376. this.$message.warning('您的上传的视频过长,请低于20s');
  377. var videoForm = document.getElementById(form); //获取表单对象
  378. videoForm && videoForm.reset(); // 重置表单
  379. return false
  380. }else{
  381. if(!this.stopFlag){
  382. var item = {};
  383. item.file = file;
  384. console.warn("***uploadImgObj***",file)
  385. if(fileSize>20){//七牛云上传-服务端压缩
  386. this.uploadVideolFile(file,form);
  387. }else{
  388. this.uploadMaterielFile(item, form); //正常上传图片
  389. }
  390. }
  391. }
  392. };
  393. video.src = event.target.result;
  394. };
  395. reader.readAsDataURL(file);
  396. }
  397. },
  398. //视频上传进度处理
  399. uploadProgress(e){
  400. this.progress = Math.round((e.loaded / e.total) * 100);//loaded已经加载的
  401. console.warn("***uploadProgress***",this.progress)
  402. },
  403. //显示弹窗提示框
  404. showPopViewHandle(){
  405. this.showPopView = true;//弹出确认框;
  406. },
  407. //取消上传
  408. cancel(cancelTokenSource){
  409. this.cancelTokenSource = cancelTokenSource;
  410. console.warn("***取消上传函数定义***")
  411. },
  412. //停止上传
  413. stopUpload(){
  414. this.showPopView = false;//弹出确认框;
  415. this.stopFlag = true;//停止上传标志打开
  416. if(this.uploadStatus == 1){
  417. this.cancelTokenSource.cancel('上传已取消');//通知取消上传
  418. Toast({
  419. message: '上传已取消',
  420. });
  421. }
  422. else if(this.uploadStatus==2 || this.uploadStatus==3){//绿幕抠图中 或者已经完成
  423. let data = {
  424. userId:this.userId,
  425. brandId: $config.brandId,
  426. processStatus:'canceled',
  427. virtualNo:this.videoId,
  428. }
  429. requestConfig('addUserVirtural', data);//停止该绿幕视频的使用
  430. this.initStatus();//还原初始状态
  431. }
  432. let data = {
  433. url:'https://dm.static.elab-plus.com/miniProgram/silhouette1.mp4',
  434. value:'个人形象',
  435. width:'',
  436. height:'',
  437. }
  438. this.aiPeopleChange(data, 'canel')
  439. this.peopleIndex = -1;
  440. },
  441. //获取用户上传的个人形象
  442. async getUserVirtural() {
  443. let data = {
  444. userId:this.userId,
  445. brandId: $config.brandId,
  446. processStatus:'completed',
  447. }
  448. let res = await requestConfig('getUserVirtural', data);//停止该绿幕视频的使用
  449. if (res.success && res.list && res.list[0]) {
  450. let data = res.list[res.list.length - 1];//获取最新的一个用户的个人形象数据
  451. this.leftList[0].icon = data.virtualBg;
  452. this.leftList[0].url = data.virtualUrl;
  453. this.videoUrl = data.virtualUrl;
  454. if(data.widthHeight){
  455. this.leftList[0].width = data.widthHeight.split('x')[0];
  456. this.leftList[0].height = data.widthHeight.split('x')[1];
  457. }
  458. }
  459. },
  460. async uploadMaterielFile(item, form) {
  461. this.uploadStatus = 0;
  462. this.peopleIndex = 0; //选中第一个
  463. if(this.stopFlag){
  464. return false;
  465. }
  466. var self = this;
  467. let formData = new FormData();
  468. formData.append('file', item.file);
  469. formData.append('brandId', $config.brandId);
  470. formData.append('userId', this.userId);
  471. console.warn("****uploadMaterielFile**",$config.brandId,this.userId)
  472. // alert("***uploadMaterielFile***"+$config.brandId+this.userId);
  473. this.uploadStatus = 1;//上传中
  474. this.showPersonView = false;
  475. this.addSilhouette();//添加剪影视频
  476. let res = await requestConfig('robust_video', formData, true, false,'post',this.uploadProgress,this.cancel)
  477. // alert("***uploadMaterielFile1***"+JSON.stringify(res));
  478. if (axios.isCancel(res)) {//取消上传处理
  479. this.initStatus();//还原初始状态
  480. }else if (res && res.success && res.single) {
  481. this.videoId = res.single;//根据Id查询结果
  482. this.startInterval();//开始轮询获取结果
  483. }else{
  484. this.initStatus();//还原初始状态
  485. }
  486. var videoForm = document.getElementById(form); //获取表单对象
  487. videoForm && videoForm.reset(); // 重置表单
  488. },
  489. async getVideoUrl() {
  490. if(this.stopFlag){
  491. this.stopInterval();
  492. }
  493. if(!this.videoId){
  494. Toast({
  495. message: '请先上传视频',
  496. });
  497. return false;
  498. }
  499. this.count = this.count + 1;
  500. let res = await requestConfig('get_result', {id:this.videoId,userId:this.userId}, true, false,'get')
  501. if(this.stopFlag){
  502. this.stopInterval();
  503. }
  504. if (res.success && res.single) {
  505. this.resultHandle(res.single)
  506. }else{
  507. this.videoUrl = "https://test.static.elab-plus.com/digital_human/f4c16cffae9711ee9853845cf3fb2826.mp4";//视频地址
  508. this.leftList[0].icon = this.videoUrl + "?vframe/jpg/offset/0";
  509. this.leftList[0].url = this.videoUrl;
  510. this.uploadStatus = 4;//处理失败
  511. }
  512. },
  513. //添加剪影视频
  514. addSilhouette(){
  515. let data = {
  516. url:'https://dm.static.elab-plus.com/miniProgram/silhouette1.mp4',
  517. value:'个人形象',
  518. width:'',
  519. height:'',
  520. }
  521. this.aiPeopleChange(data, 'add')
  522. },
  523. //添加用户绿幕视频
  524. addRealVideo(){
  525. let data = {
  526. url:this.videoUrl,
  527. value:'个人形象',
  528. width:this.widthHeight.split('x')[0],
  529. height:this.widthHeight.split('x')[1],
  530. }
  531. this.aiPeopleChange(data, 'add')
  532. },
  533. //上传结果处理
  534. resultHandle(single){
  535. if(!single){
  536. return false;
  537. }
  538. if(single.status=='completed' && single.output){//有结果
  539. this.ktProgress = 100;//抠图进度100%
  540. this.videoUrl = single.output;//视频地址
  541. // this.leftList[0].icon = this.videoUrl + "?vframe/jpg/offset/5";
  542. this.widthHeight = single.widthHeight; //"856x480"
  543. this.leftList[0].icon = single.virtualBg;
  544. this.leftList[0].url = this.videoUrl;
  545. this.leftList[0].width = single.widthHeight.split('x')[0],
  546. this.leftList[0].height = single.widthHeight.split('x')[1],
  547. this.uploadStatus = 3;//处理完毕
  548. // alert("***virtualBg***"+single.virtualBg);
  549. this.stopInterval();//停止轮询
  550. if(this.peopleIndex==0 && this.tabIndex==0){//如果当前在个人形象上,则替换视频
  551. this.addRealVideo();
  552. }
  553. }else{//没有结果
  554. let progress = single.progress;
  555. progress = progress.replace(this.videoId + ':','');
  556. let index = progress.indexOf("|");
  557. progress = progress.substr(0,index);
  558. let numbers = progress.match(/\d+/g)
  559. console.warn("***抠图进度条***",progress);
  560. this.ktProgress = parseFloat(numbers);//提取出来的进度条
  561. if(this.ktProgress>99){
  562. this.ktProgress = 99;
  563. }
  564. }
  565. },
  566. //开始生成AI图的轮询,每隔1s轮询一次
  567. startInterval() {
  568. if(this.timer){
  569. return false;
  570. }
  571. let self = this;
  572. this.count = 0;//轮询次数
  573. this.uploadStatus = 2;//绿幕抠图中
  574. this.getVideoUrl();//获取结果
  575. this.timer = setInterval(()=>{
  576. this.getVideoUrl();//获取结果
  577. },1000);//1秒轮询一次
  578. this.setOutTimer();//设置超时逻辑
  579. },
  580. //设置一个超时逻辑,到底指定时间后停止轮询,当前是90s
  581. setOutTimer() {
  582. var self = this;
  583. if (this.outTimer) {
  584. clearTimeout(this.outTimer)
  585. this.outTimer = null
  586. }
  587. this.outTimer = setTimeout(function() {
  588. if(!self.videoUrl){//没有结果
  589. MessageBox.confirm('',{
  590. title: '提示',
  591. message: '当前AI使用火爆,请继续尝试?',
  592. showCancelButton: true,
  593. confirmButtonText:'继续尝试',
  594. cancelButtonText:'取消等待',
  595. }).then(action => {
  596. console.warn("***MessageBox-action***",action)
  597. if(action == 'confirm'){
  598. // self.confirmHandle(1);
  599. }
  600. }).catch(err=>{
  601. console.warn("***MessageBox-err***",err)
  602. if(err == 'cancel'){
  603. // self.cancelHandle();
  604. }
  605. });
  606. // MessageBox.confirm('确定执行此操作?')
  607. }
  608. self.stopInterval();//停止轮询
  609. }, this.timeOut);
  610. },
  611. //停止轮询
  612. stopInterval() {
  613. if (this.timer) {
  614. clearInterval(this.timer);
  615. this.timer = null;
  616. }
  617. if (this.outTimer) {
  618. clearTimeout(this.outTimer)
  619. this.outTimer = null
  620. }
  621. // this.uploadStatus = 0;//回到初始上传状态
  622. },
  623. showMask(){
  624. //上传过程中,不允许再次上传
  625. if(this.uploadStatus==1 || this.uploadStatus == 2){
  626. return false;
  627. }
  628. this.showPersonView = true;
  629. console.warn("***showMask***",this.showPersonView)
  630. },
  631. //AI数字人切换
  632. selectAction(selItem, index) {
  633. console.log('点击动作111:', selItem, index,this.leftList)
  634. if (this.tabIndex == 0) {
  635. if(!this.leftList[index].url){
  636. return false
  637. }
  638. if (this.peopleIndex == index) { //取消选中
  639. this.aiPeopleChange(this.leftList[this.peopleIndex], 'canel')
  640. this.peopleIndex = -1;
  641. return false
  642. }
  643. } else if (this.tabIndex == 1) {
  644. if (this.petIndex == index) { //取消选中
  645. this.aiPeopleChange(this.rightList[this.petIndex], 'canel')
  646. this.petIndex = -1;
  647. return false
  648. }
  649. } else if (this.tabIndex == 3) {
  650. if (this.musicIndex == index) { //取消选中
  651. this.aiPeopleChange(this.musicList[this.musicIndex], 'canel')
  652. this.musicIndex = -1;
  653. return false
  654. }
  655. }
  656. if (this.$parent.repeatFlag == true) {
  657. Toast({
  658. message: '加载中...请稍后再试',
  659. });
  660. return false
  661. }
  662. if (this.tabIndex == 0) {
  663. this.peopleIndex = index;
  664. this.aiPeopleChange(this.leftList[this.peopleIndex], 'add')
  665. } else if (this.tabIndex == 1) {
  666. this.petIndex = index;
  667. this.aiPeopleChange(this.rightList[this.petIndex], 'add')
  668. } else if (this.tabIndex == 3) {
  669. this.musicIndex = index;
  670. this.aiPeopleChange(this.musicList[this.musicIndex], 'add')
  671. }
  672. },
  673. // // 获取场景信息
  674. // async getRelationInfo() {
  675. // if(!this.$parent.relationId){
  676. // return false;
  677. // }
  678. // var parmas = {
  679. // "relationId": this.$parent.relationId,
  680. // "brandId": $config.brandId,
  681. // }
  682. // let res = await requestConfig('getRelationInfo', parmas)
  683. // this.selectIndex = 0;
  684. // if (res && res.success) {
  685. // this.count = res.single.count;
  686. // }
  687. // },
  688. // 获取瀑布流数据
  689. async getDatalist(type) {
  690. let typeName = "Virtual_Human";
  691. if (type == 0) {
  692. typeName = "Virtual_Human";
  693. } else if (type == 1) {
  694. typeName = "Virtual_Pet";
  695. } else if (type == 3) {
  696. typeName = "Virtual_Music";
  697. // Indicator.close();
  698. }
  699. var parmas = {
  700. "type": typeName,
  701. // "brandId": $config.brandId,
  702. }
  703. let res = await requestConfig('queryEnumList', parmas)
  704. this.selectIndex = 0;
  705. if (res && res.success && res.list) {
  706. let list = res.list;
  707. if (type == 0) {
  708. this.leftList.push({
  709. icon:'',
  710. userUpload:true,
  711. value:'',
  712. url:'',
  713. width:'',
  714. height:'',
  715. })
  716. this.leftList = this.leftList.concat(list);
  717. this.getUserVirtural();
  718. } else if (type == 1) {
  719. this.rightList = list;
  720. } else if (type == 3) {
  721. this.musicList = list;
  722. }
  723. }
  724. },
  725. catchTouchMove: function() {
  726. return false;
  727. },
  728. addRedBox(){//添加红包
  729. console.warn("***添加红包***")
  730. this.$emit("redBox",'add');
  731. this.hasRedBox = true;
  732. },
  733. removeRedBox(){//去除红包
  734. this.$emit("redBox",'canel');
  735. this.hasRedBox = false;
  736. },
  737. setRedBox(){
  738. this.$emit("setRedBox");
  739. },
  740. //AI数字人切换
  741. aiPeopleChange(item, type) {
  742. this.$emit("aiPeopleChange", item, type, this.tabIndex); //通知页面,AI数字人切换了
  743. },
  744. //发布全景
  745. mynavigateFuc(e) {
  746. if (e) {
  747. // if(this.hasRedBox){
  748. // if(!this.$parent.redBoxData.count){
  749. // Toast({
  750. // message: '请输入红包个数!',
  751. // });
  752. // return false;
  753. // }
  754. // if(!this.$parent.redBoxData.money){
  755. // Toast({
  756. // message: '请输入充值金额!',
  757. // });
  758. // return false;
  759. // }
  760. // }
  761. if(this.peopleIndex==0 && (this.uploadStatus ==1 || this.uploadStatus ==2)){
  762. Toast({
  763. message: '请在个人形象上传完成后发布!',
  764. });
  765. return false;
  766. }
  767. if(this.repeartFlag){
  768. return false;
  769. }
  770. this.repeartFlag = true;
  771. let param = {
  772. type: 'CLK', //埋点类型
  773. clkId: 'clk_2cmina_23121301', //点击ID
  774. clkName: 'webgl_public_clk', //点击前往的页面名称
  775. clkParams: {
  776. locusName: "720发布",
  777. }
  778. };
  779. util.trackRequest(param);
  780. let _ps = this.$parent.getPosition();
  781. if (window.__wxjs_environment === 'miniprogram') {
  782. let url = '/extraPackage/pages/aiPublishPage/aiPublishPage?houseId=' + (this.$route.query.houseId || '')
  783. url += '&bgUrl=' + encodeURIComponent(this.$parent.bgUrl)
  784. if(this.peopleIndex>-1){
  785. let people = {
  786. url:this.leftList[this.peopleIndex].url,
  787. ath:_ps.peopleAth,
  788. atv:_ps.peopleAtv,
  789. width:this.leftList[this.peopleIndex].width || '',
  790. height:this.leftList[this.peopleIndex].height || '',
  791. scale:this.$parent.peopleScale,
  792. userUpload:this.peopleIndex==0?true:false,//是否使用了个人形象
  793. }
  794. url += '&AIPeople=' + encodeURIComponent(JSON.stringify(people))
  795. }
  796. if(this.petIndex>-1){
  797. let pet = {
  798. url:this.rightList[this.petIndex].url,
  799. ath:_ps.petAth,
  800. atv:_ps.petAtv,
  801. scale:this.$parent.petScale,
  802. }
  803. url += '&AIPet=' + encodeURIComponent(JSON.stringify(pet))
  804. }
  805. if(this.musicIndex>-1){
  806. let music = {
  807. url:this.musicList[this.musicIndex].url,
  808. title:this.musicList[this.musicIndex].value
  809. };
  810. url += '&bgMusic=' + encodeURIComponent(JSON.stringify(music))
  811. }
  812. if(this.hasRedBox){
  813. let redBox = {
  814. url:'https://dm.static.elab-plus.com/miniProgram/redbox.mp4',
  815. ath:_ps.redBoxAth,
  816. atv:_ps.redBoxAtv,
  817. scale:1,
  818. lottieIndex:this.specialIndex,
  819. // count:this.$parent.redBoxData.count,
  820. // money:this.$parent.redBoxData.money,
  821. // message:this.$parent.redBoxData.message,
  822. }
  823. url += '&redBox=' + encodeURIComponent(JSON.stringify(redBox))
  824. }
  825. console.warn("data:", _ps, url);
  826. wx.miniProgram.navigateTo({
  827. url: url,
  828. complete:(e)=>{
  829. this.repeartFlag = false;
  830. }
  831. })
  832. } else {
  833. console.warn("data:", _ps)
  834. Toast({
  835. message: '敬请期待',
  836. });
  837. }
  838. }
  839. },
  840. }
  841. }
  842. </script>
  843. <style lang="scss" scoped>
  844. @import "./viewAI.scss";
  845. /* @import "@/common/css/common.css"; */
  846. </style>