fanyunAi/pages/painting/details1.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.url"
						mode="widthFix">
						<view slot="error" style="font-size: 32rpx;text-align: center;">
							图片加载失败
						</view>
					</u--image>
				</view>
			</swiper-item>
		</swiper>
		<view class="indication">
			<block v-for="(item,index) in swiperList" :key="index">
				<view v-if="swiperList.length>1" class="spot" :class="cardCur==index?'active':''"></view>
			</block>
		</view>

		<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>
				</view>
				<view class="">立即返回</view>
			</view>

			<view class="action" @click="getdownload(cardCur)">
				<view class="bar-icon">
					<view class="tn-icon-download">
					</view>
				</view>
				<view class="">下载/分享</view>
			</view>

			<view class="action" @click="preViewImg_ys(1)" v-if="engin=='rh'">
				<view class="bar-icon">
					<view class="tn-icon-image">
					</view>
				</view>
				<view class="">模板</view>
			</view>

			<view class="action" @click="preViewImg_ys(2)" v-if="engin=='rh'">
				<view class="bar-icon">
					<view class="tn-icon-image">
					</view>
				</view>
				<view class="">照片</view>
			</view>


			<view class="action" @click="parameters" v-if="engin!='rh'">

				<view class="bar-icon">
					<view class="tn-icon-creative">
					</view>
				</view>
				<view class="">绘画参数</view>
			</view>


			<view class="action" @click="preViewImg(1)" v-if="parameter.refImg&&$Route.query.urls">
				<view class="bar-icon">
					<view class="tn-icon-image">
					</view>
				</view>
				<view class="">参考图</view>
			</view>

			<view class="action" @click="preViewImg(2)" v-if="form.init_image
">
				<view class="bar-icon">
					<view class="tn-icon-image">
					</view>
				</view>
				<view class="">参考图</view>
			</view>

			<view v-if="show2" class="action"
				@click="tn(engin!='rh'?'/pages/painting/draw?prompt='+parameter.promptSame+'&engine='+engin+'&model_name='+parameter.model_name+'&refImg='
	+parameter.refImg:'/pages/painting/draw?rh_modalId='+(parameter.templateId?parameter.templateId:-1)+'&rh_modalurl='+parameter.source_image_url)">
				<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>
					</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>
					</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-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&&$Route.query.urls"
						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="form.keywords"
						class="tn-flex tn-flex-row-between tn-flex-col-between tn-margin-top-xl tn-text-justify">
						<text class="">描述词：{{form.keywords}}</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>
			</view>
		</tn-landscape>
		<u-popup :show="show" @close="close" @open="open" mode="center">
			<view
				style="background: rgba(0, 0, 0, 0);width: 300rpx;height: 300rpx;display: flex;align-items: center;flex-direction: column;justify-content: center;color:#207CF7;">
				<l-circularProgress :isBgShow="true" :lineWidth="10" boxWidth="100" boxHeight="100"
					progressColor="#207CF7" fontColor="#207CF7" gradualColor="#207CF7"
					:percent="progress"></l-circularProgress>
				<view class="">
					图片下载中...
				</view>
			</view>
		</u-popup>

		<wike-painter style="height:1px;margin-top: -9999999px;" :board="posterObj" @done="posterSuccess"
			ref="painter"></wike-painter>
	</view>
</template>

<script>
	import {
		mapMutations,
		mapActions,
		mapState,
		mapGetters
	} from 'vuex';
	let timingr;
	let asynchronous;
	// 判断是否为微信环境
	// const isWechat = () => {
	// 	return String(navigator.userAgent.toLowerCase().match(/MicroMessenger/i)) === "micromessenger";
	// }
	export default {
		data() {
			return {
				tobheight: 45,
				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,
				engin: '',
				progress: 0,
				isDowload: false,
				show: false,
				sd_keywords: '',


				// 生成海报data
				platform: this.$platform.get(),

				qrcode: '',
				spmplatform: 0,
				posterObj: {},
				info: {
					// poster_bg_img_path:"",

					poster_bg_width: 347,
					poster_bg_height: 574,

					poster_qrcode_x: 278,
					poster_qrcode_y: 495,
					poster_qrcode_width: 52,
					poster_qrcode_height: 52,
				},
			}
		},

		// 生成海报需要的数据由此开始
		computed: {
			...mapGetters(['appInfo', 'homeTemplate', 'isLogin', 'userInfo', 'userData'])
		},
		onShow() {
			console.log('this.userInfo-----------------', this.option, this.userInfo);
		},
		onLoad(o) {
			this.spmplatform = ['H5', 'wxOfficialAccount', 'wxMiniProgram', 'App'].indexOf(this.platform) + 1;
			// this.commonqrcodePath()

			var that = this;
			this.windowHeight = uni.$u.sys().windowHeight - 60
			this.engin = that.$Route.query.from
			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
				console.log('生成绘画的参数：', this.form);
				this.parameter.refImg = this.form.refer_img
				this.parameter.prompt = this.form.init_image + 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.sd_keywords = this.form.keywords
				this.aiPlay();
			}
		},
		methods: {
			preViewImg_ys(type) {
				if (type == 1) {
					uni.previewImage({
						urls: [this.parameter.source_image_url],
						longPressActions: {
							itemList: ['发送给朋友', '保存图片', '收藏'],
							success: function(data) {},
							fail: function(err) {
								console.log(err.errMsg);
							}
						}
					});
				} else {
					uni.previewImage({
						urls: [this.parameter.target_image_url],
						longPressActions: {
							itemList: ['发送给朋友', '保存图片', '收藏'],
							success: function(data) {},
							fail: function(err) {
								console.log(err.errMsg);
							}
						}
					});
				}
			},
			downloadPic(e) {
				return new Promise((resolve, reject) => {
					uni.request({
						url: e,
						method: 'GET',
						responseType: 'arraybuffer',
						success: ress => {
							let base64 = uni.arrayBufferToBase64(ress.data);
							base64 = 'data:image/jpeg;base64,' + base64
							resolve(base64);
						},
						fail: (e) => {
							resolve('fail');
						}
					})
				});
			},
			commonqrcodePath() {
				let spm = this.userInfo.id + '.1.0.' + this.spmplatform + '.1';
				// console.log(spm);
				this.$http('common.qrcodePath', {
					spm: spm
				}).then(res => {
					if (res.code == 0) {
						this.qrcode = res.data;
						this.createPoster()
						console.log('二维码需要包含的url信息=============', this.qrcode);
					}
				});
			},
			async createPoster(e) {
				let that = this;

				let avatarUrl = '';
				let mainUrl = '';
				uni.showLoading({
					title: '海报渲染中'
				});

				console.log("that.swiperList[0].url,that.userInfo.avatar", that.userInfo, that.swiperList[0].url, that
					.userInfo.avatar);


				if (that.swiperList[0].url.indexOf("https") < 0) {
					mainUrl = await that.downloadPic(that.swiperList[0].url.replace("http:", "https:"));
				} else {
					mainUrl = await that.downloadPic(that.swiperList[0].url);
				}
				if (mainUrl == 'fail') {
					uni.hideLoading();
					uni.showToast({
						title: '生成失败',
						icon: 'none'
					})
					return;
				}
				that.userInfo.avatar =
					"https://face.cdn.zhishuyun.com/attachments/1133012400174534792/1204009950465101866/0d47db66-1faf-42df-a732-22cf18697a65_ins.png?ex=65d32ca5&is=65c0b7a5&hm=7219a0f250453314cfbf9eefaf2e927ba8d6adea944774b3fe32e67c0787a877&"
				if (that.userInfo.avatar) {
					if (that.userInfo.avatar.indexOf("https") < 0) {
						avatarUrl = await that.downloadPic(that.userInfo.avatar.replace("http:", "https:"));
					} else {
						avatarUrl = await that.downloadPic(that.userInfo.avatar);
					}
					if (avatarUrl == 'fail') {
						uni.hideLoading();
						uni.showToast({
							title: '生成失败',
							icon: 'none'
						})
						return;
					}
				}

				let proportionally = this.info.poster_bg_width / uni.$u.sys().windowWidth;
				(this.posterObj = {
					width: (this.info.poster_bg_width / proportionally) + 'px',
					height: (this.info.poster_bg_height / proportionally) + 'px',
					background: 'rgba(0,0,0,0)',
					borderRadius: '16rpx',
					views: [
						// 背景图
						{
							src: '/static/shareBg.png',
							type: "image",
							css: {
								width: (this.info.poster_bg_width / proportionally) + 'px',
								height: (this.info.poster_bg_height / proportionally) + 'px',
							}
						},
						// 主图
						{
							type: 'view',
							css: {
								position: 'absolute',
								left: '24rpx',
								top: '24rpx',
							},
							views: [{
								src: mainUrl,
								type: "image",
								css: {
									width: 705 + 'rpx',
									height: 936 + 'rpx',
									borderRadius: '28rpx',
								}
							}, ],
						},


						// 头像
						{
							type: 'view',
							css: {
								display: 'flex',
								position: 'absolute',
								left: '24rpx',
								top: '1060rpx',

							},
							views: [{
								type: 'image',
								src: that.userInfo.avatar ? avatarUrl : '/static/images/head.jpg',
								css: {
									marginTop: '-80rpx',
									borderRadius: '50%',
									width: '94rpx',
									height: '94rpx',
									objectFit: 'cover'
								}
							}, ],
						},
						// 昵称
						{
							type: 'view',
							css: {
								display: 'flex',
								position: 'absolute',
								left: '140rpx',
								bottom: '196rpx',

							},
							views: [{
								type: 'text',
								text: that.userInfo.nickname ? that.userInfo.nickname : '默认用户',
								css: {
									fontSize: '28rpx',
									color: '#333333',
								}
							}],
						},

						// 海报文案1
						{
							type: 'view',
							css: {
								display: 'flex',
								position: 'absolute',
								left: '24rpx',
								bottom: '96rpx',

							},
							views: [{
								type: 'text',
								text: '免费体验Al生成个人质感艺术照',
								css: {
									fontSize: '32rpx',
									color: '#333333',
								}
							}],
						},
						// 海报文案2
						{
							type: 'view',
							css: {
								display: 'flex',
								position: 'absolute',
								left: '24rpx',
								bottom: '44rpx',

							},
							views: [{
								type: 'text',
								text: '设计微信/抖音/小红书专属头像',
								css: {
									fontSize: '32rpx',
									color: '#333333',
								}
							}],
						},

						// 二维码上方文案
						{
							type: 'view',
							css: {
								position: 'absolute',
								right: '40rpx',
								bottom: '196rpx',
							},
							views: [{
								type: 'text',
								text: '微信扫码',
								css: {
									fontSize: '24rpx',
									color: '#333333',
								}
							}],
						},
						{
							type: 'view',
							css: {
								left: (this.info.poster_qrcode_x / proportionally) + 'px',
								top: (this.info.poster_qrcode_y / proportionally) + 'px',
								position: 'fixed',

							},
							views: [{
									type: 'qrcode',
									text: this.qrcode,
									css: {
										width: (this.info.poster_qrcode_width / proportionally) + 'px',
										height: (this.info.poster_qrcode_width / proportionally) + 'px',
										background: '#fff'
									}
								},
								// {
								// 	src: '/static/images/fanyunLogo.png',
								// 	type: "image",
								// 	css: {
								// 		position: 'absolute',
								// 		width: 30 + 'rpx',
								// 		height: 30 + 'rpx',

								// 		left: '44rpx',
								// 		top: '44rpx',

								// 	}
								// }
							],
						},
					]
				}),
				(
					this.showPoster = true,
					// this.revertUrl()

					setTimeout(() => {
						that.$refs.painter.canvasToTempFilePathSync({
							// 在nvue里是jpeg
							fileType: 'jpg',
							quality: 1,
							success: res => {
								console.log('res.tempFilePath', res.tempFilePath);
								// uni.showModal({
								// 	title: '提示',
								// 	content: '查看图片后长按图片即可保存或分享',
								// 	confirmText: '查看',
								// 	confirmColor: '#1F79F0',
								// 	success: function(res2) {
								// 		if (res2.confirm) {
								uni.previewImage({
									urls: [res.tempFilePath],
									longPressActions: {
										itemList: ['发送给朋友', '保存图片',
											'收藏'
										],
										success: function(data) {},
										fail: function(err) {
											console.log(err
												.errMsg);
										}
									}
								});
								// 		} else if (res2.cancel) {
								// 			console.log('用户点击取消');
								// 		}
								// 	}
								// });
							}
						})
					}, 1000)
				);
			},
			posterSuccess() {
				uni.hideLoading();
			},
			// 生成海报需要的数据到此为止


			preViewImg(type) {
				if (type == 1) {
					uni.previewImage({
						urls: [this.parameter.refImg],
						longPressActions: {
							itemList: ['发送给朋友', '保存图片', '收藏'],
							success: function(data) {},
							fail: function(err) {
								console.log(err.errMsg);
							}
						}
					});
				} else {
					uni.previewImage({
						urls: [this.form.init_image],
						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,
					type: this.engin
				}).then(res => {
					if (res.code == 0) {

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

							console.log("this.engin == 'rh'====", res.data.imgs_file, that.swiperList);
							this.done = true

							this.commonqrcodePath()
						}

						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('进入这里了没有', this.parameter.promptSame);
					} 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;
				}
				// if (!this.is_weixin()) {
				// 	return uni.showModal({
				// 		showCancel: false,
				// 		title: '提示',
				// 		content: '请在微信内置浏览器打开，长按图片下载/分享',
				// 		confirmColor: '#207CF7'
				// 	})
				// }
				this.createPoster()
				return

				uni.showModal({
					showCancel: false,
					title: '提示',
					content: '请在微信内置浏览器打开，长按图片下载/分享',
					confirmColor: '#207CF7'
				})
				return

				if (this.engin == 'mj') {
					uni.showModal({
						showCancel: false,
						title: '提示',
						content: '请在微信内置浏览器打开，长按图片下载/分享',
						confirmColor: '#207CF7'
					})
					return
				}

				console.log('要下载的图片地址：', this.parameter.imgs_file[index]);

				let url = this.parameter.imgs_file[index]
				// 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() {
				if (!this.done) {
					uni.showModal({
						confirmColor: '#207CF7',
						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
			},
		},
		onUnload() {
			clearTimeout(timingr);
			clearTimeout(asynchronous);
		},
	}
</script>

<style lang="scss" scoped>
	// .shareBox {
	// 	position: fixed;
	// 	top: 0;
	// 	left: 0;
	// 	height: 100vh;
	// 	width: 100vw;
	// 	background: red;
	// 	z-index: 9999999;
	// }

	.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>