fanyunAi/pages/painting/ys.vue

<template>
	<view class="template-details">
		<block v-if="showdrawing">
			<u-notice-bar v-if="drawingtitle=='正在努力绘制中...'||drawingtitle=='图片正在渲染中...'" :text="noticebar" step
				bgColor="#000"></u-notice-bar>
			<view class="lazy-loading tn-flex justify-center align-center flex-wrap">
				<view class="preloader_1">
					<view></view>
					<view></view>
					<view></view>
					<view></view>
					<view></view>
				</view>
				<view class="drawing">
					{{drawingtitle}}
				</view>
				<view v-if="showprogress" class="progress">
					<u-line-progress :percentage="percentage" activeColor="#9b59b6" height="18"></u-line-progress>
				</view>
			</view>
		</block>

		<swiper class="card-swiper" :circular="false" :autoplay="true" duration="500" interval="12000"
			@change="cardSwiper">
			<swiper-item v-for="(item,index) in swiperList" :key="index" :class="cardCur==index?'cur':''">
				<view class="lazy-load" :style="{height: windowHeight+'px'}">
					<u--image @load="previewload" @error="previewerror" width="100%" height="100%" :src="item"
						mode="widthFix">
						<view slot="error" style="font-size: 32rpx;text-align: center;">
							图片加载失败
						</view>
					</u--image>
				</view>
			</swiper-item>
		</swiper>

		<view class="tabbar footerfixed dd-glass tn-color-white" style="border-radius: 100rpx;">
			<view class="action" @click="getisback">
				<view class="bar-icon">
					<view class="tn-icon-left-circle">
					</view>
					<!-- <image class="" src='https://tnuiimage.tnkjapp.com/tabbar/a1.png'></image> -->
				</view>
				<view class="">立即返回</view>
			</view>
			<view class="action" @click="getdownload(cardCur)">
				<view class="bar-icon">
					<view class="tn-icon-download">
					</view>
					<!-- <image class="" src='https://tnuiimage.tnkjapp.com/tabbar/k2.png'></image> -->
				</view>
				<view class="">下载/分享</view>
			</view>

			<!-- 	<view class="action" @click="parameters">
				<view class="bar-icon">
					<view class="tn-icon-creative">
					</view>
				</view>
				<view class="">绘画参数</view>
			</view> -->


			<view class="action" @click="preViewImg(1)" v-if="true">
				<view class="bar-icon">
					<view class="tn-icon-image">
					</view>
				</view>
				<view class="">上传模板图</view>
			</view>

			<view class="action" @click="preViewImg(2)" v-if="true
		">
				<view class="bar-icon">
					<view class="tn-icon-image">
					</view>
				</view>
				<view class="">上传照片</view>
			</view>
		</view>

	</view>
</template>

<script>
	import {
		mapMutations,
		mapActions,
		mapState,
		mapGetters
	} from 'vuex';
	import {
		apiurl
	} from '@/common/request/request';
	let rewardedVideoAd = null;
	export default {
		mixins: [],
		components: {},
		data() {
			return {
				showdrawing: true,
				drawingtitle: '正在努力绘制中...',
				showprogress: false,
				percentage: 0,
				noticebar: ['精美图片需要时间打磨，预计20-30秒左右出图',
					'图片生成中请不要退出此页面，否则可能会无法生成'
					// '长时间未出图？可稍后在 我的-绘画记录 里查看'
				],
				tobheight: 45,
				parmas: null,


				show1: false,
				show2: true,
				cardCur: 0,
				swiperList: [],
				form: {},
				parameter: {},

				parameterid: 0,
				showopen: false,
				failnum: 0,
				windowHeight: 0,

				engin: '',

				progress: 0,
				isDowload: false,
				show: false,

				sd_keywords: '',
			}
		},
		async onLoad(o) {
			// this.parmas = JSON.parse(o.ysParmas)
			this.parmas = getApp().ysParmas
			var that = this;
			this.windowHeight = uni.$u.sys().windowHeight - 60
			// this.parmas = {
			// 	templateUrl: "https://zhengda.oss-accelerate.aliyuncs.com/new_fanyun/0d47db66-1faf-42df-a732-22cf18697a65.jpg",
			// 	userUrl: "https://oaigc.oss-cn-chengdu.aliyuncs.com/20240205/d4f3699caf01faecdf37fc8d3573975b.jpg"
			// }
			console.log('接收的生成参数', this.parmas);

			// return
			let res = await this.$http('ys.addFaceTask', this.parmas)

			console.log('提交艺术照任务返回值---', res);
			if (res.code == 0) {
				// this.showdrawing = false

				this.swiperList = [res.msg.image_url]

				console.log('this.swiperList--------------', this.swiperList);
			}

		},
		onUnload() {
			clearTimeout(timingr);
			clearTimeout(asynchronous);
		},

		methods: {
			preViewImg(type) {
				if (type == 1) {
					uni.previewImage({
						urls: [this.parmas.templateUrl],
						longPressActions: {
							itemList: ['发送给朋友', '保存图片', '收藏'],
							success: function(data) {},
							fail: function(err) {
								console.log(err.errMsg);
							}
						}
					});
				} else {
					uni.previewImage({
						urls: [this.parmas.userUrl],
						longPressActions: {
							itemList: ['发送给朋友', '保存图片', '收藏'],
							success: function(data) {},
							fail: function(err) {
								console.log(err.errMsg);
							}
						}
					});
				}
			},
			parameters() {
				var that = this;
				// if(that.showdrawing){
				// 	uni.showToast({
				// 		title:'图片生成中',
				// 		icon:'none'
				// 	})
				// 	return;
				// }
				that.show1 = true

			},
			setOpen() {
				var that = this;
				if (that.showdrawing) {
					uni.showToast({
						title: '图片生成中',
						icon: 'none'
					})
					return;
				}
				if (that.showopen) {
					uni.showToast({
						title: '图片已公开',
						icon: 'none'
					})
					return;
				}
				uni.showModal({
					confirmColor: '#207CF7',
					confirmText: '确认公开',
					title: '提示',
					content: '是否确认公开此绘画作品',
					success(src) {
						if (src.confirm) {
							that.$http('gallery.setOpen', {
								id: that.parameterid
							}).then(res => {
								if (res.code == 0) {
									uni.showToast({
										title: '提交成功,等待审核'
									})
									that.showopen = true
								}
							});
						}
					}
				});
			},
			gallerydetail(id) {
				let that = this;
				this.$http('gallery.detail', {
					id: id
				}).then(res => {
					if (res.code == 0) {

						console.log('获取到的图片详情返回值：', res);
						// this.showdrawing = false

						this.parameter = res.data

						//this.parameter.prompt =
						//'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 关键词测试测'
						// this.parameter.prompt = '123'


						if (this.parameter.prompt.includes('http') && this.parameter.prompt.includes('.png')) {
							this.parameter.refImg = this.parameter.prompt.split('.png')[0] + '.png'

							// 创作相似去参考图提示词
							let tempKeyWord = ''
							this.parameter.prompt.split('.png').forEach((item, index) => {
								if (!item.includes('http')) {
									tempKeyWord += item
								}
							})
							this.parameter.promptSame = tempKeyWord
							this.parameter.prompt = tempKeyWord
						} else if (this.parameter.prompt.includes('http') && this.parameter.prompt.includes(
								'.jpeg')) {
							this.parameter.refImg = this.parameter.prompt.split('.jpeg')[0] + '.jpeg'

							// 创作相似去参考图提示词
							let tempKeyWord = ''
							this.parameter.prompt.split('.jpeg').forEach((item, index) => {
								if (!item.includes('http')) {
									tempKeyWord += item
								}
							})
							this.parameter.promptSame = tempKeyWord
							this.parameter.prompt = tempKeyWord
						} else if (this.parameter.prompt.includes('http') && this.parameter.prompt.includes(
								'.jpg')) {
							this.parameter.refImg = this.parameter.prompt.split('.jpg')[0] + '.jpg'

							// 创作相似去参考图提示词
							let tempKeyWord = ''
							this.parameter.prompt.split('.jpg').forEach((item, index) => {
								if (!item.includes('http')) {
									tempKeyWord += item
								}
							})
							this.parameter.promptSame = tempKeyWord
							this.parameter.prompt = tempKeyWord
						} else {
							this.parameter.promptSame = this.parameter.prompt
						}



						console.log('创作相似prompt', this.parameter.promptSame);


						if (this.engin == 'sd') {
							for (var i = 0; i < res.data.imgs_file.length; i++) {
								var url = {
									id: i,
									type: 'image',
									url: res.data.imgs_file[i],
								}
								that.swiperList.push(url)

							}
							this.done = true
						} else {
							var url = {
								id: 0,
								type: 'image',
								url: res.data.origin_url,
							}
							that.swiperList.push(url)
							this.done = true
						}
					} else {

					}
				});
			},
			aiPlay() {
				let that = this;
				this.showdrawing = true
				if (that.failnum == 0) {
					this.progressbar()
				}

				this.$http('gallery.create', this.form).then(res => {
					if (res.code == 0) {
						this.showTask(res.data.id)
					} else {
						uni.hideToast()
						uni.showModal({
							confirmText: '退出',
							showCancel: false,
							confirmColor: '#207CF7',
							title: '提示',
							content: res.msg,
							success(tit) {
								if (tit.confirm) {
									uni.navigateBack()
								}
							}
						})
					}

				});
			},
			progressbar() {
				var that = this;
				if (that.percentage < 99) {
					timingr = setTimeout(() => {
						that.percentage = uni.$u.range(0, 99, that.percentage + 1)
						that.progressbar()
					}, 300);
				} else {
					clearTimeout(timingr);
				}
			},
			showTask(id) {
				let that = this;
				this.$http('gallery.getOpensdDetail', {
					id: id,
				}).then(res => {
					if (res.code == 0) {
						if (res.data.state == "success") {
							this.percentage = 99
							this.drawingtitle = '图片正在渲染中，请不要退出此页面'
							this.parameterid = res.data.id
							this.done = true
							clearTimeout(asynchronous);
							var url = {
								id: 0,
								type: 'image',
								url: res.data.gen_img,
							}
							that.swiperList.push(url)
						} else if (res.data.state == "in_create") {
							asynchronous = setTimeout(() => {
								that.showTask(id)
							}, 1000);
							return;
						} else if (res.data.state == "in_wait") {
							asynchronous = setTimeout(() => {
								that.showTask(id)
							}, 1000);
							return;
						} else {
							uni.showModal({
								confirmText: '退出',
								showCancel: false,
								confirmColor: '#207CF7',
								title: '提示',
								content: res.msg,
								success(tit) {
									if (tit.confirm) {
										uni.navigateBack()
									}
								}
							})
						}
					} else {
						uni.showModal({
							confirmText: '退出',
							showCancel: false,
							confirmColor: '#207CF7',
							title: '提示',
							content: res.msg,
							success(tit) {
								if (tit.confirm) {
									uni.navigateBack()
								}
							}
						})
					}
				})
			},
			previewload() {
				// console.log('ch');
				this.showdrawing = false
				this.percentage = 0
			},
			previewerror() {
				this.showdrawing = false
				this.percentage = 0
			},
			preview(e) {
				uni.previewImage({
					urls: [e]
				})
			},
			is_weixin() {
				var ua = window.navigator.userAgent.toLowerCase();
				if (ua.match(/MicroMessenger/i) == 'micromessenger') {
					console.log('微信浏览器');
					return true;
				} else {
					console.log("不是微信浏览器");
					return false;
				}
			},
			//下载分享
			getdownload(index) {
				if (this.showdrawing) {
					uni.showToast({
						title: '图片生成中',
						icon: 'none'
					})
					return;
				}

				uni.showModal({
					showCancel: false,
					title: '提示',
					content: '请在微信内置浏览器打开，长按图片下载/分享',
					confirmColor: '#207CF7'
				})
				return
				console.log('要下载的图片地址：', this.swiperList[0]);

				let url = this.swiperList[0]
				// return
				const detectDeviceType = () => /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i
					.test(
						navigator.userAgent) ? false : true;
				if (this.is_weixin()) {
					uni.showModal({
						showCancel: false,
						title: '提示',
						content: '请在微信内置浏览器打开，长按图片下载/分享',
						confirmColor: '#207CF7'
					})
				} else {
					if (detectDeviceType()) {
						let _this = this

						// if (_this.isDowload) {
						// 	uni.showToast({
						// 		icon: 'none',
						// 		title: '请等待上一个视频下载完成后，再下载',
						// 	});
						// }
						// PC端
						// this.delItem.url = 'http://www.liwantao.top/test.mp4'

						const downloadTask = uni.downloadFile({
							url, //文件链接
							timeout: 99999999,
							success: (res) => {
								if (res.statusCode === 200) {
									var oA = document.createElement("a");
									// oA.download = _this.delItem.name; // 设置下载的文件名，默认是'下载'	
									oA.href = res.tempFilePath; //临时路径再保存到本地
									document.body.appendChild(oA);
									oA.click();
									oA.remove(); // 下载之后把创建的元素删除
								}
							},
							fail: (err) => {
								_this.show = false;
								_this.isDowload = false
								_this.progress = 0

								// console.log(_this.show, _this.isDowload, _this.progress, err);
								uni.showToast({
									icon: 'none',
									mask: true,
									title: '失败请重新下载',
								});
							},
						})

						downloadTask.onProgressUpdate((res) => {
							if (res.progress > 0) {
								_this.show = true;
								_this.isDowload = true
							}
							_this.progress = res.progress;
							if (res.progress == 100) {
								_this.show = false;
								_this.isDowload = false
								_this.progress = 0

								uni.showToast({
									icon: 'success',
									title: '图片下载成功！',
								});
							}
						})
					} else {
						uni.showModal({
							showCancel: false,
							title: '提示',
							content: '请在微信内置浏览器打开，长按图片下载/分享',
							confirmColor: '#207CF7'
						})
						return
						// 其他移动端浏览器
						// window.open(this.delItem.url)

						let _this = this
						// this.delItem.url = 'http://www.liwantao.top/test.mp4'

						var oA = document.createElement("a");
						// oA.download = _this.delItem.name;
						oA.href = url;
						document.body.appendChild(oA);
						oA.click();
						oA.remove();
					}
				}
			},
			getisback() {

				uni.navigateBack()

			},
			// 跳转
			tn(e) {
				// console.log(e);
				uni.navigateTo({
					url: e,
				});
			},

			// cardSwiper
			cardSwiper(e) {
				// console.log(e.detail);
				this.cardCur = e.detail.current
			},

			// 弹出压屏窗
			showLandscape() {
				this.openLandscape()
			},
			// 打开压屏窗
			openLandscape() {
				this.show1 = true
			},
			// 关闭压屏窗
			closeLandscape() {
				this.show1 = false
			},
		}
	}
</script>

<style lang="scss" scoped>
	@import './ys.scss';
</style>