digitalMen/pages/painting/details.vue

<template>
	<view class="template-details">
		<!-- 顶部自定义导航 -->
		<!-- <view style="color: #fff;">
			<tn-nav-bar backgroundColor="#000" :bottomShadow="false">AI绘画
			</tn-nav-bar>
			<view :style="{height: tobheight+'px',borderBottom: 1+'px'+' '+'solid'}"></view>
		</view> -->

		<!-- <view class="">
      <view class="icon15__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-shadow-blur button-3" @tap="showLandscape">
        <view class="tn-icon-level"></view>
      </view>
      <view class="icon15__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-shadow-blur button-2" @click="tn('/pageA/author/author')">
        <view class="tn-icon-my"></view>
      </view>
      <view class="icon15__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-shadow-blur button-1" @click="tn('/pageB/chat/chat')">
        <view class="tn-icon-comment"></view>
      </view>
    </view> -->
		<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>
				<!-- <image src="../../static/images/head.jpg" ></image> -->
			</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="swiper-item image-banner" :style="'background-image:url('+ item.url + ');background-size: cover;'"> -->
				<!-- <view class="swiper-item image-banner"> -->
				<!-- <image :src="item.url" mode="widthFix"></image> -->
				<!-- @click.stop="preview(item.url)" -->
				<view class="lazy-load" :style="{height: windowHeight+'px'}">
					<u--image @load="previewload" @error="previewerror" width="100%" height="100%" :src="item.url"
						mode="widthFix">
						<!-- <template v-slot:loading>
							<view class="flxe align-center justify-center">
								<u-loading-icon size="50" :vertical="true" color="#fff" text="图片渲染中..."></u-loading-icon>
							</view>
							
						</template> -->
						<view slot="error" style="font-size: 32rpx;text-align: center;">
							图片加载失败
						</view>
					</u--image>
				</view>


				<!-- </view> -->
			</swiper-item>
		</swiper>
		<view class="indication">
			<block v-for="(item,index) in swiperList" :key="index">
				<view class="spot" :class="cardCur==index?'active':''"></view>
			</block>
		</view>


		<!-- 底部tabbar start-->
		<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">
				<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>
					<!-- <image class="" src='https://tnuiimage.tnkjapp.com/tabbar/i2.png'></image> -->
				</view>
				<view class="">绘画参数</view>
			</view>
			<view v-if="show2" class="action"
				@click="tn('/pages/painting/draw?prompt='+parameter.prompt+'&engine='+parameter.engine+'&model_name='+parameter.model_name)">
				<view class="tn-flex-direction-column tn-flex-row-center tn-flex-col-center tn-button--clear-style">
					<view class="bar-icon">
						<view class="tn-icon-write">
						</view>
						<!-- <image class="" src='https://tnuiimage.tnkjapp.com/tabbar/d2.png'></image> -->
					</view>
					<view class="">创作相似</view>
				</view>
			</view>
			<view v-else class="action" @click="setOpen">
				<view class="tn-flex-direction-column tn-flex-row-center tn-flex-col-center tn-button--clear-style">
					<view class="bar-icon">
						<view class="tn-icon-up-circle">
						</view>
						<!-- <image class="" src='https://tnuiimage.tnkjapp.com/tabbar/d2.png'></image> -->
					</view>
					<view class="">{{showopen?'已公开':'公开作品'}}</view>
				</view>
			</view>
		</view>

		<!-- 压屏窗-->
		<tn-landscape :show="show1" @close="closeLandscape" closePosition="bottom" :closeSize="60">
			<view class="tn-color-white" style="width: 100vw;">

				<view class="" style="margin: 120rpx 60rpx;">
					<!-- <view class="tn-flex tn-flex-col-top">

						<view class="">
							<view class="logo-pic tn-shadow">
								<view class="logo-image">
									<view class="tn-shadow-blur"
										:style="{backgroundImage:'url('+parameter.avatar+')',width: 100+'rpx',height: 100+'rpx'}">
									</view>
								</view>
							</view>
							<view class="tn-icon-sex-male"
								style="position: absolute;margin: -105rpx 0 0 72rpx;border-radius: 100rpx;background-color: #FFFFFF;color: #FF71D2;padding: 5rpx;">
							</view>
						</view>
						<view class="tn-padding-left-sm tn-padding-top-xs" style="width: 100%;">
							<view class="tn-flex tn-flex-row-between tn-flex-col-between">
								<view class="justify-content-item">
									<text class="tn-text-lg tn-text-bold">{{parameter.nickname}}</text>
									<text class="tn-padding-left-sm tn-padding-right-xs">水瓶座</text>
									<text class="tn-icon-con-virgo"></text>
								</view>
								<view class="justify-content-item tn-round tn-text-xs tn-bg-orangered--light tn-color-orangered" style="padding: 5rpx 15rpx;">
                  <text class="tn-icon-warning-fill tn-padding-right-xs"></text> 举报
                </view>
							</view>
							<view class="tn-padding-top-xs">
								<view class="">
									<text class="tn-text-df tn-color-gray--light">{{parameter.create_time}}</text>
								</view>
							</view>
						</view>
					</view> -->

					<view class="tn-flex tn-flex-row-between tn-flex-col-between tn-margin-top-xl tn-text-justify">
						<text class="">AI绘画：{{parameter.engine == 'sd'?'StableDiffusion绘图':'MidJourney绘图'}}</text>
					</view>
					<view v-if="parameter.prompt"
						class="tn-flex tn-flex-row-between tn-flex-col-between tn-margin-top-xl tn-text-justify">
						<text class="">描述词：{{parameter.prompt}}</text>
					</view>
					<view v-if="parameter.model_name"
						class="tn-flex tn-flex-row-between tn-flex-col-between tn-margin-top-xl tn-text-justify">
						<text class="">模型：{{form.name?form.name:parameter.model_name}}</text>
					</view>
					<view v-if="parameter.width"
						class="tn-flex tn-flex-row-between tn-flex-col-between tn-margin-top-xl tn-text-justify">
						<text class="">分辨率：{{parameter.width}}x{{parameter.height}}</text>
					</view>
					<!-- <view class="tn-flex tn-flex-row-between tn-flex-col-between tn-margin-top-xl tn-text-justify">
						<text class="">尺寸：16：9</text>
					</view>
					
					<view class="tn-flex tn-flex-row-between tn-flex-col-between tn-margin-top-xl tn-text-justify">
						<text class="">画面风格：吉卜力</text>
					</view> -->
				</view>


			</view>
		</tn-landscape>

	</view>
</template>

<script>
	let timingr;
	let asynchronous;
	export default {
		data() {
			return {
				tobheight: 45,
				platform: this.$platform.get(),
				showdrawing: true,
				showprogress: true,
				drawingtitle: '正在努力绘制中...',
				percentage: 0,
				show1: false,
				show2: true,
				cardCur: 0,
				swiperList: [],
				form: {},
				parameter: {},
				noticebar: ['精美图片需要时间打磨，预计20-30秒左右出图',
					'图片生成中请不要退出此页面，否则可能会无法生成'
					// '长时间未出图？可稍后在 我的-绘画记录 里查看'
				],
				parameterid: 0,
				showopen: false,
				failnum: 0,
				windowHeight: 0
			}
		},
		onUnload() {
			clearTimeout(timingr);
			clearTimeout(asynchronous);
		},
		onLoad() {
			var that = this;
			this.windowHeight = uni.$u.sys().windowHeight - 60
			// console.log(this.windowHeight);
			if (that.$Route.query.urls) {
				this.showprogress = false
				this.drawingtitle = '图片正在加载中...'
				that.gallerydetail(that.$Route.query.urls)
			}
			if (that.$Route.query.form) {
				this.form = that.$Route.query.form
				this.parameter.prompt = this.form.prompt
				this.parameter.model_name = this.form.model_id
				this.parameter.width = this.form.width
				this.parameter.height = this.form.height
				this.parameter.engine = 'sd'
				this.show2 = false
				// this.parameter = that.$Route.query.form
				this.aiPlay();
			}
		},
		methods: {
			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: '#26B3A0',
					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) {
						this.showdrawing = false
						this.parameter = res.data

						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 {

					}
				});
			},
			aiPlay() {

				console.log('aiPlay()传递给后端的参数：',this.form);
				
				let that = this;
				this.showdrawing = true
				if (that.failnum == 0) {
					this.progressbar()
				}

				this.$http('gallery.create', this.form).then(res => {
					console.log('aiPlay()返回值：',res);
					if (res.code == 0) {
						this.showTask(res.data.id)
					} else {
						uni.hideToast()
						uni.showModal({
							confirmText: '退出',
							showCancel: false,
							confirmColor: '#26b3a0',
							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 => {
					console.log('showTask--gallery.getOpensdDetail返回值：',res,res.data.state);
					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: '#26b3a0',
								title: '提示',
								content: res.msg,
								success(tit) {
									if (tit.confirm) {
										uni.navigateBack()
									}
								}
							})
						}
					} else {
						uni.showModal({
							confirmText: '退出',
							showCancel: false,
							confirmColor: '#26b3a0',
							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]
				})
			},
			//下载分享
			getdownload() {

				uni.showModal({
					showCancel: false,
					title: '提示',
					content: '长按图片下载/分享',
					confirmColor: '#26b3a0'
				})

			},
			getisback() {
				if (!this.done) {
					uni.showModal({
						confirmColor: '#26B3A0',
						confirmText: '立即退出',
						title: '提示',
						content: '图片生成中，退出此页面后可能无法生成',
						success(src) {
							if (src.confirm) {
								uni.navigateBack()
							}
						}
					})
				} else {
					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>
	.template-details {
		margin: 0;
		width: 100%;
		height: 100vh;
		color: #fff;
		overflow: hidden;
	}

	/* 胶囊*/
	.tn-custom-nav-bar__back {
		width: 100%;
		height: 100%;
		position: relative;
		display: flex;
		justify-content: space-evenly;
		align-items: center;
		box-sizing: border-box;
		background-color: rgba(0, 0, 0, 0.15);
		border-radius: 1000rpx;
		border: 1rpx solid rgba(255, 255, 255, 0.5);
		color: #FFFFFF;
		font-size: 18px;

		.icon {
			display: block;
			flex: 1;
			margin: auto;
			text-align: center;
		}

		&:before {
			content: " ";
			width: 1rpx;
			height: 110%;
			position: absolute;
			top: 22.5%;
			left: 0;
			right: 0;
			margin: auto;
			transform: scale(0.5);
			transform-origin: 0 0;
			pointer-events: none;
			box-sizing: border-box;
			opacity: 0.7;
			background-color: #FFFFFF;
		}
	}



	/* 图标容器15 start */
	.icon15 {
		&__item {
			width: 30%;

			border-radius: 10rpx;
			padding: 30rpx;
			margin: 20rpx 10rpx;
			transform: scale(1);
			transition: transform 0.3s linear;
			transform-origin: center center;

			&--icon {
				width: 100rpx;
				height: 100rpx;
				font-size: 50rpx;
				border-radius: 50%;
				margin-bottom: 18rpx;
				position: relative;
				z-index: 1;

				&::after {
					content: " ";
					position: absolute;
					z-index: -1;
					width: 100%;
					height: 100%;
					left: 0;
					bottom: 0;
					border-radius: inherit;
					opacity: 1;
					transform: scale(1, 1);
					background-size: 100% 100%;


				}
			}
		}
	}

	/* 按钮 */
	.button-1 {
		background-color: rgba(0, 0, 0, 0.15);
		position: fixed;
		/* bottom:200rpx;
      right: 20rpx; */
		top: 25%;
		right: 30rpx;
		z-index: 1001;
		border-radius: 100px;
	}

	.button-2 {
		background-color: rgba(0, 0, 0, 0.15);
		position: fixed;
		/* bottom:200rpx;
      right: 20rpx; */
		top: 35%;
		right: 30rpx;
		z-index: 1001;
		border-radius: 100px;
	}

	.button-3 {
		background-color: rgba(0, 0, 0, 0.15);
		position: fixed;
		/* bottom:200rpx;
      right: 20rpx; */
		top: 45%;
		right: 30rpx;
		z-index: 1001;
		border-radius: 100px;
	}


	/* 用户头像 start */
	.logo-image {
		width: 100rpx;
		height: 100rpx;
		position: relative;
	}

	.logo-pic {
		background-size: cover;
		background-repeat: no-repeat;
		// background-attachment:fixed;
		background-position: top;
		border: 6rpx solid rgba(255, 255, 255, 0.25);
		box-shadow: 0rpx 0rpx 80rpx 0rpx rgba(0, 0, 0, 0.15);
		border-radius: 50%;
		overflow: hidden;
		// background-color: #FFFFFF;
	}

	/* 底部tabbar start*/
	/* 毛玻璃*/
	.dd-glass {
		width: 100%;
		backdrop-filter: blur(20rpx);
		-webkit-backdrop-filter: blur(20rpx);
	}

	.footerfixed {
		position: fixed;
		// margin: 20rpx;
		margin: 40rpx 5%;
		width: 90%;
		bottom: calc(env(safe-area-inset-bottom) / 2);
		;
		z-index: 999;
		background-color: rgba(0, 0, 0, 0.15);
		box-shadow: 0rpx 0rpx 30rpx 0rpx rgba(0, 0, 0, 0.07);
	}

	.tabbar {
		display: flex;
		align-items: center;
		min-height: 110rpx;
		justify-content: space-between;
		padding: 0;
		height: calc(110rpx + env(safe-area-inset-bottom) / 2);
		// padding-bottom: calc(env(safe-area-inset-bottom) / 2);
	}

	.tabbar .action {
		font-size: 22rpx;
		position: relative;
		flex: 1;
		text-align: center;
		padding: 0;
		display: block;
		height: auto;
		line-height: 1;
		margin: 0;
		overflow: initial;
	}

	.tabbar .action .bar-icon {
		width: 100rpx;
		position: relative;
		display: block;
		height: auto;
		margin: 0 auto 10rpx;
		text-align: center;
		font-size: 42rpx;
	}

	.tabbar .action .bar-icon image {
		width: 50rpx;
		height: 50rpx;
		display: inline-block;
	}


	/* 全屏轮播  start*/
	.card-swiper {
		height: 100vh !important;
	}

	.card-swiper swiper-item {
		width: 750rpx !important;
		left: 0rpx;
		box-sizing: border-box;
		overflow: initial;
		background: #000;
	}

	.card-swiper swiper-item .swiper-item {
		// width: 100%;
		// display: block;
		// height: 100vh;
		// border-radius: 0rpx;
		// transform: scale(0.9);
		// transition: all 0.2s ease-in 0s;
		// will-change: transform;
		// overflow: hidden;
		display: flex;
		align-items: center;
		justify-content: center;
		height: 100%;
		background: #000;
	}

	.card-swiper swiper-item.cur .swiper-item {
		transform: scale(1);
		transition: all 0.2s ease-in 0s;
		will-change: transform;
	}

	.image-banner {
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.image-banner image {
		width: 100%;
		// height: 100%;
	}

	/* 轮播指示点 start*/
	.indication {
		z-index: 9999;
		width: 100%;
		height: 36rpx;
		position: fixed;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
	}

	.spot {
		background-color: #FFFFFF;
		opacity: 0.6;
		width: 10rpx;
		height: 10rpx;
		border-radius: 20rpx;
		top: calc(-280rpx - env(safe-area-inset-bottom) / 2);
		top: calc(-280rpx - constant(safe-area-inset-bottom));
		margin: 0 8rpx !important;
		position: relative;
	}

	.spot.active {
		opacity: 1;
		width: 30rpx;
		background-color: #FFFFFF;
	}

	.lazy-load {
		background: #000;
		display: grid;
		align-items: center;
		padding-bottom: env(safe-area-inset-bottom);
		// height: 100%;
	}

	.lazy-load view {
		width: 100%;

	}

	.lazy-loading {
		background: #000;
		height: 100%;

	}

	.drawing {
		position: absolute;
		top: 46%;
		// color: #606266;
		font-size: 18px;
	}

	.progress {
		position: absolute;
		top: 52%;
		width: 60%;
	}

	.preloader_1 {
		position: absolute;
		// right: 8%;
		// bottom: 12%;
		// position: fixed;
		// right: 58%;
		margin-right: 65px;
		top: 42%;
	}

	.preloader_1 view {
		display: block;
		bottom: 0px;
		width: 9px;
		height: 5px;
		background: #9b59b6;
		position: absolute;
		animation: preloader_1 1.5s infinite ease-in-out;
	}

	.preloader_1 view:nth-child(2) {
		left: 11px;
		animation-delay: .2s;
	}

	.preloader_1 view:nth-child(3) {
		left: 22px;
		animation-delay: .4s;
	}

	.preloader_1 view:nth-child(4) {
		left: 33px;
		animation-delay: .6s;
	}

	.preloader_1 view:nth-child(5) {
		left: 44px;
		animation-delay: .8s;
	}

	@keyframes preloader_1 {
		0% {
			height: 5px;
			transform: translateY(0px);
			background: #9b59b6;
		}

		25% {
			height: 30px;
			transform: translateY(15px);
			background: #3498db;
		}

		50% {
			height: 5px;
			transform: translateY(0px);
			background: #9b59b6;
		}

		100% {
			height: 5px;
			transform: translateY(0px);
			background: #9b59b6;
		}
	}
</style>