ys.vue 25 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003100410051006100710081009101010111012101310141015101610171018101910201021102210231024102510261027102810291030103110321033103410351036103710381039
  1. <template>
  2. <view class="template-details">
  3. <block v-if="showdrawing">
  4. <u-notice-bar v-if="drawingtitle=='正在努力绘制中...'||drawingtitle=='图片正在渲染中...'" :text="noticebar" step
  5. bgColor="#000"></u-notice-bar>
  6. <view class="lazy-loading tn-flex justify-center align-center flex-wrap">
  7. <view class="preloader_1">
  8. <view></view>
  9. <view></view>
  10. <view></view>
  11. <view></view>
  12. <view></view>
  13. </view>
  14. <view class="drawing">
  15. {{drawingtitle}}
  16. </view>
  17. <view v-if="showprogress" class="progress">
  18. <u-line-progress :percentage="percentage" activeColor="#9b59b6" height="18"></u-line-progress>
  19. </view>
  20. </view>
  21. </block>
  22. <swiper class="card-swiper" :circular="false" :autoplay="true" duration="500" interval="12000"
  23. @change="cardSwiper">
  24. <swiper-item v-for="(item,index) in swiperList" :key="index" :class="cardCur==index?'cur':''">
  25. <view class="lazy-load" :style="{height: windowHeight+'px'}">
  26. <u--image @load="previewload" @error="previewerror" width="100%" height="100%" :src="item"
  27. mode="widthFix">
  28. <view slot="error" style="font-size: 32rpx;text-align: center;">
  29. 图片加载失败
  30. </view>
  31. </u--image>
  32. </view>
  33. </swiper-item>
  34. </swiper>
  35. <view class="tabbar footerfixed dd-glass tn-color-white" style="border-radius: 100rpx;">
  36. <view class="action" @click="getisback">
  37. <view class="bar-icon">
  38. <view class="tn-icon-left-circle">
  39. </view>
  40. <!-- <image class="" src='https://tnuiimage.tnkjapp.com/tabbar/a1.png'></image> -->
  41. </view>
  42. <view class="">立即返回</view>
  43. </view>
  44. <view class="action" @click="downLoad">
  45. <view class="bar-icon">
  46. <view class="tn-icon-download">
  47. </view>
  48. </view>
  49. <view class="">下载</view>
  50. </view>
  51. <view class="action" @click="getdownload(cardCur)">
  52. <view class="bar-icon">
  53. <view class="tn-icon-share-circle">
  54. </view>
  55. <!-- <image class="" src='https://tnuiimage.tnkjapp.com/tabbar/k2.png'></image> -->
  56. </view>
  57. <view class="">分享</view>
  58. </view>
  59. <view class="action" @click="preViewImg(1)" v-if="true">
  60. <view class="bar-icon">
  61. <view class="tn-icon-image">
  62. </view>
  63. </view>
  64. <view class="">模板</view>
  65. </view>
  66. <view class="action" @click="preViewImg(2)" v-if="true
  67. ">
  68. <view class="bar-icon">
  69. <view class="tn-icon-image">
  70. </view>
  71. </view>
  72. <view class="">照片</view>
  73. </view>
  74. <!-- <view class="action" @click="public">
  75. <view class="bar-icon">
  76. <view class="tn-icon-up-circle">
  77. </view>
  78. </view>
  79. <view class="">{{showopen?'已公开':'公开作品'}}</view>
  80. </view> -->
  81. </view>
  82. <wike-painter style="height:1px;margin-top: -9999999px;" :board="posterObj" @done="posterSuccess"
  83. ref="painter"></wike-painter>
  84. </view>
  85. </template>
  86. <script>
  87. import {
  88. mapMutations,
  89. mapActions,
  90. mapState,
  91. mapGetters
  92. } from 'vuex';
  93. import {
  94. apiurl
  95. } from '@/common/request/request';
  96. let rewardedVideoAd = null;
  97. export default {
  98. mixins: [],
  99. components: {},
  100. data() {
  101. return {
  102. showopen: false,
  103. showdrawing: true,
  104. drawingtitle: '正在努力绘制中...',
  105. showprogress: false,
  106. percentage: 0,
  107. noticebar: ['精美图片需要时间打磨,预计20-30秒左右出图',
  108. '图片生成中请不要退出此页面,否则可能会无法生成'
  109. // '长时间未出图?可稍后在 我的-绘画记录 里查看'
  110. ],
  111. tobheight: 45,
  112. parmas: null,
  113. show1: false,
  114. show2: true,
  115. cardCur: 0,
  116. swiperList: [],
  117. form: {},
  118. parameter: {},
  119. parameterid: 0,
  120. showopen: false,
  121. failnum: 0,
  122. windowHeight: 0,
  123. engin: '',
  124. progress: 0,
  125. isDowload: false,
  126. show: false,
  127. sd_keywords: '',
  128. timer: null,
  129. faceId: -1,
  130. platform: this.$platform.get(),
  131. qrcode: '',
  132. spmplatform: 0,
  133. posterObj: {},
  134. info: {
  135. // poster_bg_img_path:"",
  136. poster_bg_width: 347,
  137. poster_bg_height: 574,
  138. poster_qrcode_x: 278,
  139. poster_qrcode_y: 495,
  140. poster_qrcode_width: 52,
  141. poster_qrcode_height: 52,
  142. },
  143. }
  144. },
  145. computed: {
  146. ...mapGetters(['appInfo', 'homeTemplate', 'isLogin', 'userInfo', 'userData'])
  147. },
  148. async onLoad(o) {
  149. this.spmplatform = ['H5', 'wxOfficialAccount', 'wxMiniProgram', 'App'].indexOf(this.platform) + 1;
  150. this.commonqrcodePath()
  151. // this.parmas = JSON.parse(o.ysParmas)
  152. this.parmas = getApp().ysParmas
  153. var that = this;
  154. this.windowHeight = uni.$u.sys().windowHeight - 60
  155. // this.parmas = {
  156. // templateUrl: "https://zhengda.oss-accelerate.aliyuncs.com/new_fanyun/0d47db66-1faf-42df-a732-22cf18697a65.jpg",
  157. // userUrl: "https://oaigc.oss-cn-chengdu.aliyuncs.com/20240205/d4f3699caf01faecdf37fc8d3573975b.jpg"
  158. // }
  159. console.log('接收的生成参数', this.parmas);
  160. // return
  161. let res = await this.$http('ys.addFaceTask', this.parmas)
  162. console.log('提交艺术照任务返回值---', res);
  163. if (res.code == 0) {
  164. // this.showdrawing = false
  165. this.timer = setInterval(() => {
  166. this.getGenStatus({
  167. task_id: res.msg.task_id
  168. })
  169. }, 3000)
  170. // this.swiperList = [res.msg.image_url]
  171. }
  172. },
  173. beforeDestroy() {
  174. clearInterval(this.timer)
  175. },
  176. onHide() {
  177. clearInterval(this.timer)
  178. },
  179. onUnload() {
  180. clearTimeout(timingr);
  181. clearTimeout(asynchronous);
  182. },
  183. methods: {
  184. downLoad() {
  185. if (this.showdrawing) {
  186. uni.showToast({
  187. title: '图片生成中',
  188. icon: 'none'
  189. })
  190. return;
  191. }
  192. if (!this.is_weixin()) {
  193. return uni.showModal({
  194. showCancel: false,
  195. title: '提示',
  196. content: '请在微信内置浏览器打开,长按图片下载',
  197. confirmColor: '#207CF7'
  198. })
  199. }
  200. uni.showModal({
  201. showCancel: false,
  202. title: '提示',
  203. content: '长按图片即可下载',
  204. confirmColor: '#207CF7',
  205. confirmText: '知道了',
  206. })
  207. },
  208. downloadPic(e) {
  209. return new Promise((resolve, reject) => {
  210. uni.request({
  211. url: e,
  212. method: 'GET',
  213. responseType: 'arraybuffer',
  214. success: ress => {
  215. let base64 = uni.arrayBufferToBase64(ress.data);
  216. base64 = 'data:image/jpeg;base64,' + base64
  217. resolve(base64);
  218. },
  219. fail: (e) => {
  220. resolve('fail');
  221. }
  222. })
  223. });
  224. },
  225. commonqrcodePath() {
  226. let spm = this.userInfo.id + '.1.0.' + this.spmplatform + '.1';
  227. // console.log(spm);
  228. this.$http('common.qrcodePath', {
  229. spm: spm
  230. }).then(res => {
  231. if (res.code == 0) {
  232. this.qrcode = res.data;
  233. // this.createPoster()
  234. console.log('二维码需要包含的url信息=============', this.qrcode);
  235. }
  236. });
  237. },
  238. async createPoster(e) {
  239. let that = this;
  240. let avatarUrl = '';
  241. let mainUrl = '';
  242. uni.showLoading({
  243. title: '海报渲染中'
  244. });
  245. console.log("that.swiperList[0].url,that.userInfo.avatar", that.userInfo, that.swiperList[0], that
  246. .userInfo.avatar);
  247. if (that.swiperList[0].indexOf("https") < 0) {
  248. mainUrl = await that.downloadPic(that.swiperList[0].replace("http:", "https:"));
  249. } else {
  250. mainUrl = await that.downloadPic(that.swiperList[0]);
  251. }
  252. if (mainUrl == 'fail') {
  253. uni.hideLoading();
  254. uni.showToast({
  255. title: '生成失败',
  256. icon: 'none'
  257. })
  258. return;
  259. }
  260. // that.userInfo.avatar ="https://face.cdn.zhishuyun.com/attachments/1133012400174534792/1204009950465101866/0d47db66-1faf-42df-a732-22cf18697a65_ins.png?ex=65d32ca5&is=65c0b7a5&hm=7219a0f250453314cfbf9eefaf2e927ba8d6adea944774b3fe32e67c0787a877&"
  261. if (that.userInfo.avatar) {
  262. if (that.userInfo.avatar.indexOf("https") < 0) {
  263. avatarUrl = await that.downloadPic(that.userInfo.avatar.replace("http:", "https:"));
  264. } else {
  265. avatarUrl = await that.downloadPic(that.userInfo.avatar);
  266. }
  267. if (avatarUrl == 'fail') {
  268. uni.hideLoading();
  269. uni.showToast({
  270. title: '生成失败',
  271. icon: 'none'
  272. })
  273. return;
  274. }
  275. }
  276. let proportionally = this.info.poster_bg_width / uni.$u.sys().windowWidth;
  277. (this.posterObj = {
  278. width: (this.info.poster_bg_width / proportionally) + 'px',
  279. height: (this.info.poster_bg_height / proportionally) + 'px',
  280. background: 'rgba(0,0,0,0)',
  281. borderRadius: '16rpx',
  282. views: [
  283. // 背景图
  284. {
  285. src: '/static/shareBg.png',
  286. type: "image",
  287. css: {
  288. width: (this.info.poster_bg_width / proportionally) + 'px',
  289. height: (this.info.poster_bg_height / proportionally) + 'px',
  290. }
  291. },
  292. // 主图
  293. // 主图
  294. {
  295. type: 'view',
  296. css: {
  297. position: 'absolute',
  298. left: '50%',
  299. },
  300. views: [{
  301. src: mainUrl,
  302. type: "image",
  303. css: {
  304. height: 936 + 'rpx',
  305. borderRadius: '28rpx',
  306. transform: 'translateX(-50%)',
  307. marginTop: "28rpx",
  308. maxWidth: '705rpx'
  309. }
  310. }, ],
  311. },
  312. // 头像
  313. {
  314. type: 'view',
  315. css: {
  316. display: 'flex',
  317. position: 'absolute',
  318. left: '24rpx',
  319. top: '1060rpx',
  320. },
  321. views: [{
  322. type: 'image',
  323. src: that.userInfo.avatar ? avatarUrl : '/static/images/head.jpg',
  324. css: {
  325. marginTop: '-80rpx',
  326. borderRadius: '50%',
  327. width: '94rpx',
  328. height: '94rpx',
  329. objectFit: 'cover'
  330. }
  331. }, ],
  332. },
  333. // 昵称
  334. {
  335. type: 'view',
  336. css: {
  337. display: 'flex',
  338. position: 'absolute',
  339. left: '140rpx',
  340. bottom: '196rpx',
  341. },
  342. views: [{
  343. type: 'text',
  344. text: that.userInfo.nickname ? that.userInfo.nickname : '默认用户',
  345. css: {
  346. fontSize: '28rpx',
  347. color: '#333333',
  348. }
  349. }],
  350. },
  351. // 海报文案1
  352. {
  353. type: 'view',
  354. css: {
  355. display: 'flex',
  356. position: 'absolute',
  357. left: '24rpx',
  358. bottom: '96rpx',
  359. },
  360. views: [{
  361. type: 'text',
  362. text: '免费体验Al生成个人质感艺术照',
  363. css: {
  364. fontSize: '32rpx',
  365. color: '#333333',
  366. }
  367. }],
  368. },
  369. // 海报文案2
  370. {
  371. type: 'view',
  372. css: {
  373. display: 'flex',
  374. position: 'absolute',
  375. left: '24rpx',
  376. bottom: '44rpx',
  377. },
  378. views: [{
  379. type: 'text',
  380. text: '设计微信/抖音/小红书专属头像',
  381. css: {
  382. fontSize: '32rpx',
  383. color: '#333333',
  384. }
  385. }],
  386. },
  387. // 二维码上方文案
  388. {
  389. type: 'view',
  390. css: {
  391. position: 'absolute',
  392. right: '40rpx',
  393. bottom: '196rpx',
  394. },
  395. views: [{
  396. type: 'text',
  397. text: '微信扫码',
  398. css: {
  399. fontSize: '24rpx',
  400. color: '#333333',
  401. }
  402. }],
  403. },
  404. {
  405. type: 'view',
  406. css: {
  407. left: (this.info.poster_qrcode_x / proportionally) + 'px',
  408. top: (this.info.poster_qrcode_y / proportionally) + 'px',
  409. position: 'fixed',
  410. },
  411. views: [{
  412. type: 'qrcode',
  413. text: this.qrcode,
  414. css: {
  415. width: (this.info.poster_qrcode_width / proportionally) + 'px',
  416. height: (this.info.poster_qrcode_width / proportionally) + 'px',
  417. background: '#fff'
  418. }
  419. },
  420. // {
  421. // src: '/static/images/fanyunLogo.png',
  422. // type: "image",
  423. // css: {
  424. // position: 'absolute',
  425. // width: 30 + 'rpx',
  426. // height: 30 + 'rpx',
  427. // left: '44rpx',
  428. // top: '44rpx',
  429. // }
  430. // }
  431. ],
  432. },
  433. ]
  434. }),
  435. (
  436. this.showPoster = true,
  437. // this.revertUrl()
  438. setTimeout(() => {
  439. that.$refs.painter.canvasToTempFilePathSync({
  440. // 在nvue里是jpeg
  441. fileType: 'jpg',
  442. quality: 1,
  443. success: res => {
  444. console.log('res.tempFilePath', res.tempFilePath);
  445. uni.showModal({
  446. title: '提示',
  447. content: '查看图片后长按图片即可保存或分享',
  448. confirmText: '查看',
  449. confirmColor: '#1F79F0',
  450. success: function(res2) {
  451. if (res2.confirm) {
  452. uni.previewImage({
  453. urls: [res.tempFilePath],
  454. longPressActions: {
  455. itemList: ['发送给朋友', '保存图片',
  456. '收藏'
  457. ],
  458. success: function(data) {},
  459. fail: function(err) {
  460. console.log(err
  461. .errMsg);
  462. }
  463. }
  464. });
  465. } else if (res2.cancel) {
  466. console.log('用户点击取消');
  467. }
  468. }
  469. });
  470. }
  471. })
  472. }, 1000)
  473. );
  474. },
  475. posterSuccess() {
  476. uni.hideLoading();
  477. },
  478. async public() {
  479. var that = this;
  480. if (this.showdrawing) {
  481. uni.showToast({
  482. title: '图片生成中',
  483. icon: 'none'
  484. })
  485. return;
  486. }
  487. if (that.showopen) {
  488. uni.showToast({
  489. title: '图片已公开',
  490. icon: 'none'
  491. })
  492. return;
  493. }
  494. uni.showModal({
  495. confirmColor: '#207cf7',
  496. confirmText: '确认公开',
  497. title: '提示',
  498. content: '是否确认公开此绘画作品',
  499. success(src) {
  500. if (src.confirm) {
  501. that.$http('gallery.setOpen', {
  502. id: that.faceId
  503. }).then(res => {
  504. if (res.code == 0) {
  505. uni.showToast({
  506. title: '提交成功,等待审核'
  507. })
  508. that.showopen = true
  509. }
  510. });
  511. }
  512. }
  513. });
  514. },
  515. async getGenStatus(p) {
  516. let res = await this.$http('ys.checkDescribe', p)
  517. console.log('查询生成状态返回值---', res);
  518. if (res.code == 0) {
  519. // if (res.msg.state == 0) {
  520. // this.showdrawing = false
  521. // clearInterval(this.timer)
  522. // }
  523. if (res.msg.state == 1) {
  524. this.showdrawing = false
  525. clearInterval(this.timer)
  526. this.swiperList = [res.msg.build_url]
  527. this.faceId = res.msg.id
  528. console.log('this.swiperList--------------', this.swiperList);
  529. } else if (res.msg.state == 2) {
  530. clearInterval(this.timer)
  531. uni.showModal({
  532. title: '提示',
  533. content: '图片生成出错,请稍后重试',
  534. confirmColor: '#1F79F0',
  535. showCancel: false,
  536. success: function(res) {
  537. if (res.confirm) {
  538. uni.navigateBack()
  539. } else if (res.cancel) {
  540. console.log('用户点击取消');
  541. }
  542. }
  543. });
  544. }
  545. }
  546. },
  547. preViewImg(type) {
  548. if (type == 1) {
  549. uni.previewImage({
  550. urls: [this.parmas.templateUrl],
  551. longPressActions: {
  552. itemList: ['发送给朋友', '保存图片', '收藏'],
  553. success: function(data) {},
  554. fail: function(err) {
  555. console.log(err.errMsg);
  556. }
  557. }
  558. });
  559. } else {
  560. uni.previewImage({
  561. urls: [this.parmas.userUrl],
  562. longPressActions: {
  563. itemList: ['发送给朋友', '保存图片', '收藏'],
  564. success: function(data) {},
  565. fail: function(err) {
  566. console.log(err.errMsg);
  567. }
  568. }
  569. });
  570. }
  571. },
  572. parameters() {
  573. var that = this;
  574. // if(that.showdrawing){
  575. // uni.showToast({
  576. // title:'图片生成中',
  577. // icon:'none'
  578. // })
  579. // return;
  580. // }
  581. that.show1 = true
  582. },
  583. setOpen() {
  584. var that = this;
  585. if (that.showdrawing) {
  586. uni.showToast({
  587. title: '图片生成中',
  588. icon: 'none'
  589. })
  590. return;
  591. }
  592. if (that.showopen) {
  593. uni.showToast({
  594. title: '图片已公开',
  595. icon: 'none'
  596. })
  597. return;
  598. }
  599. uni.showModal({
  600. confirmColor: '#207CF7',
  601. confirmText: '确认公开',
  602. title: '提示',
  603. content: '是否确认公开此绘画作品',
  604. success(src) {
  605. if (src.confirm) {
  606. that.$http('gallery.setOpen', {
  607. id: that.parameterid
  608. }).then(res => {
  609. if (res.code == 0) {
  610. uni.showToast({
  611. title: '提交成功,等待审核'
  612. })
  613. that.showopen = true
  614. }
  615. });
  616. }
  617. }
  618. });
  619. },
  620. gallerydetail(id) {
  621. let that = this;
  622. this.$http('gallery.detail', {
  623. id: id
  624. }).then(res => {
  625. if (res.code == 0) {
  626. console.log('获取到的图片详情返回值:', res);
  627. // this.showdrawing = false
  628. this.parameter = res.data
  629. //this.parameter.prompt =
  630. //'https://mjcdn.iduomi.cc/attachments/1124768570157564029/1129053571321712670/erinramirez_In_a_Chinese_ancient_garden_a_lady_is_playing_the_t_cff28ad6-6f7e-44f0-a7bb-2a8724e573f2.png 关键词测试测'
  631. // this.parameter.prompt = '123'
  632. if (this.parameter.prompt.includes('http') && this.parameter.prompt.includes('.png')) {
  633. this.parameter.refImg = this.parameter.prompt.split('.png')[0] + '.png'
  634. // 创作相似去参考图提示词
  635. let tempKeyWord = ''
  636. this.parameter.prompt.split('.png').forEach((item, index) => {
  637. if (!item.includes('http')) {
  638. tempKeyWord += item
  639. }
  640. })
  641. this.parameter.promptSame = tempKeyWord
  642. this.parameter.prompt = tempKeyWord
  643. } else if (this.parameter.prompt.includes('http') && this.parameter.prompt.includes(
  644. '.jpeg')) {
  645. this.parameter.refImg = this.parameter.prompt.split('.jpeg')[0] + '.jpeg'
  646. // 创作相似去参考图提示词
  647. let tempKeyWord = ''
  648. this.parameter.prompt.split('.jpeg').forEach((item, index) => {
  649. if (!item.includes('http')) {
  650. tempKeyWord += item
  651. }
  652. })
  653. this.parameter.promptSame = tempKeyWord
  654. this.parameter.prompt = tempKeyWord
  655. } else if (this.parameter.prompt.includes('http') && this.parameter.prompt.includes(
  656. '.jpg')) {
  657. this.parameter.refImg = this.parameter.prompt.split('.jpg')[0] + '.jpg'
  658. // 创作相似去参考图提示词
  659. let tempKeyWord = ''
  660. this.parameter.prompt.split('.jpg').forEach((item, index) => {
  661. if (!item.includes('http')) {
  662. tempKeyWord += item
  663. }
  664. })
  665. this.parameter.promptSame = tempKeyWord
  666. this.parameter.prompt = tempKeyWord
  667. } else {
  668. this.parameter.promptSame = this.parameter.prompt
  669. }
  670. console.log('创作相似prompt', this.parameter.promptSame);
  671. if (this.engin == 'sd') {
  672. for (var i = 0; i < res.data.imgs_file.length; i++) {
  673. var url = {
  674. id: i,
  675. type: 'image',
  676. url: res.data.imgs_file[i],
  677. }
  678. that.swiperList.push(url)
  679. }
  680. this.done = true
  681. } else {
  682. var url = {
  683. id: 0,
  684. type: 'image',
  685. url: res.data.origin_url,
  686. }
  687. that.swiperList.push(url)
  688. this.done = true
  689. }
  690. } else {
  691. }
  692. });
  693. },
  694. aiPlay() {
  695. let that = this;
  696. this.showdrawing = true
  697. if (that.failnum == 0) {
  698. this.progressbar()
  699. }
  700. this.$http('gallery.create', this.form).then(res => {
  701. if (res.code == 0) {
  702. this.showTask(res.data.id)
  703. } else {
  704. uni.hideToast()
  705. uni.showModal({
  706. confirmText: '退出',
  707. showCancel: false,
  708. confirmColor: '#207CF7',
  709. title: '提示',
  710. content: res.msg,
  711. success(tit) {
  712. if (tit.confirm) {
  713. uni.navigateBack()
  714. }
  715. }
  716. })
  717. }
  718. });
  719. },
  720. progressbar() {
  721. var that = this;
  722. if (that.percentage < 99) {
  723. timingr = setTimeout(() => {
  724. that.percentage = uni.$u.range(0, 99, that.percentage + 1)
  725. that.progressbar()
  726. }, 300);
  727. } else {
  728. clearTimeout(timingr);
  729. }
  730. },
  731. showTask(id) {
  732. let that = this;
  733. this.$http('gallery.getOpensdDetail', {
  734. id: id,
  735. }).then(res => {
  736. if (res.code == 0) {
  737. if (res.data.state == "success") {
  738. this.percentage = 99
  739. this.drawingtitle = '图片正在渲染中,请不要退出此页面'
  740. this.parameterid = res.data.id
  741. this.done = true
  742. clearTimeout(asynchronous);
  743. var url = {
  744. id: 0,
  745. type: 'image',
  746. url: res.data.gen_img,
  747. }
  748. that.swiperList.push(url)
  749. } else if (res.data.state == "in_create") {
  750. asynchronous = setTimeout(() => {
  751. that.showTask(id)
  752. }, 1000);
  753. return;
  754. } else if (res.data.state == "in_wait") {
  755. asynchronous = setTimeout(() => {
  756. that.showTask(id)
  757. }, 1000);
  758. return;
  759. } else {
  760. uni.showModal({
  761. confirmText: '退出',
  762. showCancel: false,
  763. confirmColor: '#207CF7',
  764. title: '提示',
  765. content: res.msg,
  766. success(tit) {
  767. if (tit.confirm) {
  768. uni.navigateBack()
  769. }
  770. }
  771. })
  772. }
  773. } else {
  774. uni.showModal({
  775. confirmText: '退出',
  776. showCancel: false,
  777. confirmColor: '#207CF7',
  778. title: '提示',
  779. content: res.msg,
  780. success(tit) {
  781. if (tit.confirm) {
  782. uni.navigateBack()
  783. }
  784. }
  785. })
  786. }
  787. })
  788. },
  789. previewload() {
  790. // console.log('ch');
  791. this.showdrawing = false
  792. this.percentage = 0
  793. },
  794. previewerror() {
  795. this.showdrawing = false
  796. this.percentage = 0
  797. },
  798. preview(e) {
  799. uni.previewImage({
  800. urls: [e]
  801. })
  802. },
  803. is_weixin() {
  804. var ua = window.navigator.userAgent.toLowerCase();
  805. if (ua.match(/MicroMessenger/i) == 'micromessenger') {
  806. console.log('微信浏览器');
  807. return true;
  808. } else {
  809. console.log("不是微信浏览器");
  810. return false;
  811. }
  812. },
  813. //下载分享
  814. getdownload(index) {
  815. if (this.showdrawing) {
  816. uni.showToast({
  817. title: '图片生成中',
  818. icon: 'none'
  819. })
  820. return;
  821. }
  822. // if(!this.is_weixin()){
  823. // return uni.showModal({
  824. // showCancel: false,
  825. // title: '提示',
  826. // content: '请在微信内置浏览器打开,长按图片下载/分享',
  827. // confirmColor: '#207CF7'
  828. // })
  829. // }
  830. this.createPoster()
  831. return
  832. uni.showModal({
  833. showCancel: false,
  834. title: '提示',
  835. content: '请在微信内置浏览器打开,长按图片下载/分享',
  836. confirmColor: '#207CF7'
  837. })
  838. return
  839. console.log('要下载的图片地址:', this.swiperList[0]);
  840. let url = this.swiperList[0]
  841. // return
  842. const detectDeviceType = () => /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i
  843. .test(
  844. navigator.userAgent) ? false : true;
  845. if (this.is_weixin()) {
  846. uni.showModal({
  847. showCancel: false,
  848. title: '提示',
  849. content: '请在微信内置浏览器打开,长按图片下载/分享',
  850. confirmColor: '#207CF7'
  851. })
  852. } else {
  853. if (detectDeviceType()) {
  854. let _this = this
  855. // if (_this.isDowload) {
  856. // uni.showToast({
  857. // icon: 'none',
  858. // title: '请等待上一个视频下载完成后,再下载',
  859. // });
  860. // }
  861. // PC端
  862. // this.delItem.url = 'http://www.liwantao.top/test.mp4'
  863. const downloadTask = uni.downloadFile({
  864. url, //文件链接
  865. timeout: 99999999,
  866. success: (res) => {
  867. if (res.statusCode === 200) {
  868. var oA = document.createElement("a");
  869. // oA.download = _this.delItem.name; // 设置下载的文件名,默认是'下载'
  870. oA.href = res.tempFilePath; //临时路径再保存到本地
  871. document.body.appendChild(oA);
  872. oA.click();
  873. oA.remove(); // 下载之后把创建的元素删除
  874. }
  875. },
  876. fail: (err) => {
  877. _this.show = false;
  878. _this.isDowload = false
  879. _this.progress = 0
  880. // console.log(_this.show, _this.isDowload, _this.progress, err);
  881. uni.showToast({
  882. icon: 'none',
  883. mask: true,
  884. title: '失败请重新下载',
  885. });
  886. },
  887. })
  888. downloadTask.onProgressUpdate((res) => {
  889. if (res.progress > 0) {
  890. _this.show = true;
  891. _this.isDowload = true
  892. }
  893. _this.progress = res.progress;
  894. if (res.progress == 100) {
  895. _this.show = false;
  896. _this.isDowload = false
  897. _this.progress = 0
  898. uni.showToast({
  899. icon: 'success',
  900. title: '图片下载成功!',
  901. });
  902. }
  903. })
  904. } else {
  905. uni.showModal({
  906. showCancel: false,
  907. title: '提示',
  908. content: '请在微信内置浏览器打开,长按图片下载/分享',
  909. confirmColor: '#207CF7'
  910. })
  911. return
  912. // 其他移动端浏览器
  913. // window.open(this.delItem.url)
  914. let _this = this
  915. // this.delItem.url = 'http://www.liwantao.top/test.mp4'
  916. var oA = document.createElement("a");
  917. // oA.download = _this.delItem.name;
  918. oA.href = url;
  919. document.body.appendChild(oA);
  920. oA.click();
  921. oA.remove();
  922. }
  923. }
  924. },
  925. getisback() {
  926. uni.navigateBack()
  927. },
  928. // 跳转
  929. tn(e) {
  930. // console.log(e);
  931. uni.navigateTo({
  932. url: e,
  933. });
  934. },
  935. // cardSwiper
  936. cardSwiper(e) {
  937. // console.log(e.detail);
  938. this.cardCur = e.detail.current
  939. },
  940. // 弹出压屏窗
  941. showLandscape() {
  942. this.openLandscape()
  943. },
  944. // 打开压屏窗
  945. openLandscape() {
  946. this.show1 = true
  947. },
  948. // 关闭压屏窗
  949. closeLandscape() {
  950. this.show1 = false
  951. },
  952. }
  953. }
  954. </script>
  955. <style lang="scss" scoped>
  956. @import './ys.scss';
  957. </style>