PixelAI-mobile/pages/mobile_web/workshops/index.vue

<template>
	<!-- #ifdef APP -->
	<view class="mobile-workshops" :style="{ backgroundImage: `url(${myFileUrl+background})`,paddingTop: CustomBar+'rpx' }">
		<view class="app-top" :style="{ height: CustomBar+'rpx',
		background: topLevel===0? '#ffffff00' : `rgba(255, 255, 255,${topLevel})` }"></view>
	<!-- #endif -->
	<!-- #ifndef APP -->
	<view class="mobile-workshops" :style="{ backgroundImage: `url(${myFileUrl+background})` }">
	<!-- #endif -->
		<view class="mwt-top">
			<!-- #ifdef MP -->
			<view class="app-top" :style="{height: `${StatusBar}px`,background: topLevel===0? '#ffffff00' : `rgba(255, 255, 255,${topLevel})`}"></view>
			<view :style="{height: `${StatusBar}px`}"></view>
			<view class="mobile-logo" :style="{height: `${CustomBarHeight}px`,backgroundColor: `rgba(255, 255, 255,${topLevel})`}">
			<!-- #endif -->
			<!-- #ifndef MP -->
			<view class="mobile-logo" :style="{backgroundColor: `rgba(255, 255, 255,${topLevel})`}">
			<!-- #endif -->
				<image :src="myFileUrl+logo"></image>
			</view>
			<view class="mw-title">
				<u-icon name="arrow-left" size="40" color="#fff" class="back" @click="back"></u-icon>
				{{ form.name }}
			</view>
			<view class="mw-upload" v-if="form.type!==4 || (form.type === 4 && resultFile)">
				<!-- 文生图-空格位 -->
				<view v-if="form.type === 1 && !resultFile"></view>
				<!-- 未有结果+类型为文生图可选options -->
				<view class="mwu-promt" v-else-if="form.type===3 && !resultFile">
					<u-input :customStyle="{color:'#dcf1fc',fontSize:'50rpx'}" v-model="form.text"
					placeholder="请输入需要生成的文字" trim inputAlign="center" :clearable="false" :maxlength="6"/>
				</view>
				<!-- 类型为图生图类 -->
				<view class="mwu-cover" v-else-if="uploadFile==''&&form.type!==3&&form.type!==1" @click="selectImage">
					<u-icon name="plus-circle" size="100" color="#fff" label="上传图片" labelSize="40" 
					labelColor="#fff" labelPos="bottom" marginTop="25"></u-icon>
					<view class="mwuc-tips">
						请上传大小为<text>5KB~5MB</text>的图片
					</view>
				</view>
				<!-- 上传了需修改图 -->
				<view class="center-image" v-else-if="resultFile===''">
					<image mode="widthFix" :src="uploadFile" @click="selectImage"></image>
				</view>
				<!-- 结果图 -->
				<view class="center-image" v-else>
					<image mode="widthFix" :src="getResultImagePath(resultFile)" @click="previewImage"></image>
				</view>
				<!-- 其他-涂抹重绘 -->
				<view class="selections" v-if="!resultFile && form.type===-1">
					<view class="selections-item" :style="[getSelectionsStyle(index)]" 
					 v-for="(item,index) in selections" :key="index" @click="currentSelect=index">
						{{ item }}
					</view>
				</view>
			</view>
			
			<!--  -->
			<view class="mw-editor" v-if="!resultFile && form.type===-1">
				<EditorBox :icon="fileUrl+editorIcon" @strengthenTip="strengthenTip"
				placeholder="如: 衣服/鞋子/头发或者英文:clothes and shose">
					<template #title>
						<text class="slot">需<text style="color: #d8fa35;">替换</text>的元素</text>
					</template>
				</EditorBox>
				<EditorBox :icon="fileUrl+editorIcon" @strengthenTip="strengthenTip"
				placeholder="如: 衣服/鞋子/头发或者英文:clothes and shose">
					<template #title>
						<text class="slot"><text style="color: #d8fa35;">替换后</text>的图像</text>
					</template>
				</EditorBox>
			</view>
			<view class="workshops-tip" v-if="(form.type !== 4 || (form.type === 4 && resultFile)) && (form.type !== 1 || (form.type === 1 && resultFile))">
				<view @click="showTutorial" class="tip-content" v-if="asyncPollTime === -1" :style="{color: errorTips?'#e0584b' : '#d5ff00'}">
					<u-icon name="question-circle" size="35" :color="errorTips?'#e0584b' : '#c2fc3b'" />
					Tips：{{resultFile ? errorTips || '点击预览图片效果~' : form.tips||'智能创作~'}}
				</view>
				<view class="tip-progress" v-if="asyncPollTime !== -1">
					<text class="progress-title">进度</text> 
					<u-line-progress class="uline-progress" :percent="dealPercent" :show-percent="false" inactive-color="#2d3240" round/>
					<text class="progress-deal">{{ dealPercent }}%</text>
				</view>
			</view>
			
			<!-- 文生图 -->
			<view class="mw-editor" v-if="!resultFile && form.type===1">
				<EditorBox :height="200" :icon="fileUrl+editorIcon" title="提示词" 
				v-model="form.text" placeholder="请输入描述的提示词(限制300词)~~" rightIcon="question-circle"
				rightTip="使用教程" @rightIconClick="showTutorial" @strengthenTip="strengthenTip"/>
			</view>
			<view class="mw-editor" v-if="!resultFile && form.type===1">
				<u-section title="尺寸选择" color="#fff" :right="false" lineColor="#c2ea04" fontSize="34" />
				<scroll-view scroll-x>
					<view class="dimensional-drawing">
						<view class="dimensional-item" v-for="(item,index) in (form.id === 4 ? aliDimensions : volcengineDimensions)" :key="index"
						:class="selectSizeIndex===index?'dimensional-item-select':''" @click="selectSize(index)">
							<view :style="{ aspectRatio: item.value }"></view>
							<text>{{ item.name }}</text>
						</view>
					</view>
				</scroll-view>
			</view>
			
			<!-- 提示文字 -->
			<view class="mw-editor" v-if="!resultFile && form.type===3">
				<EditorBox :icon="fileUrl+editorIcon" title="提示词" v-model="form.promt"
				placeholder="请输入描述的提示词(限制300词)~~" rightIcon="question-circle"
				rightTip="使用教程" @rightIconClick="showTutorial" @strengthenTip="strengthenTip"/>
			</view>
			
			<!-- 选项生图 -->
			<view class="mw-editor" v-if="!resultFile && (form.type===2||form.type===3 || form.type === 1)">
				<u-section title="类型选择" color="#fff" :right="form.options.length>8" lineColor="#c2ea04" fontSize="34" @click="showMoreOptions = true"
				subTitle="更多" :subColor="selectElementIndex>=getOptions.length ? '#b3a0da' : '#eee'"></u-section>
				<view class="section-options">
					<view class="section-tags" v-for="(item,index) in getOptions" :key="item.id"
					:class="selectElementIndex===index?'section-tags-select':''" @click="selectElement(index)">
						<image :src="getTypeImage(item.path)"></image>
						<text>{{ item.optionName }}</text>
					</view>
					<!-- <u-tag v-for="(item,index) in getOptions" :key="item.id" :index="index"
					:text="item.optionName" @click="selectElement" :class="selectElementIndex===index?'u-tag-select':''"></u-tag>
					<u-tag v-if="form.options.length>9" :index="-1" :class="selectElementIndex>=getOptions.length?'u-tag-select':''"
					text="更多" @click="showMoreOptions = true"></u-tag> -->
				</view>
			</view>
			
			<!-- 换衣选择 -->
			<view class="mw-editor" style="margin-left: 0;margin-right: 0;" v-if="!resultFile && form.type===4">
				<DressSelect ref="dressRef" @previewMannequin="previewMannequin"/>
			</view>
		</view>
		
		<view class="workshops-btn">
			<view class="price-tips" v-if="resultFile===''">钻石 :<text>￥{{ form.price }}</text>颗 / 次</view>
			<u-button class="wbu-btn" @click="startDeal" v-if="resultFile===''" :disabled="functionDisable"
			 :style="{opacity: functionDisable?'0.6':'1'}"
			ripple :hairLine="false" shape="circle" rippleBgColor="#f0fdbf" :loading='dotLoading'>
				<u-icon name="edit-pen" size="42"></u-icon>开启魔法
			</u-button>
			<view class="workshops-btn" :style="{flexDirection: 'row'}" v-else>
				<u-button :loading="functionLoading" class="wbu-dbtn" ripple :hairLine="false"
				shape="circle" rippleBgColor="#f0fdbf" @click="download" :class="transition?'transition':''">
					<u-icon name="download" size="32"></u-icon>保存作品
				</u-button>
				<view class="wbu-dbtn wbu-odbtn">
					<u-button class="wbud-btn" ripple :hairLine="false" shape="circle" 
					rippleBgColor="#f0fdbf" @click="resultFunction['reUpload'].fun" :class="transition?'transition':''">
						<u-icon name="edit-pen" color="#8fb4e6" size="32"></u-icon>
						<text>重新绘制</text>
					</u-button>
				</view>
			</view>
			<!-- <u-button :loading="functionLoading" class="wbu-btn" v-else ripple :hairLine="false" 
			shape="circle" rippleBgColor="#f0fdbf" @click="resultFunction[currentType].fun"
			:style="{backgroundImage: resultFunction[currentType].background}" :class="transition?'transition':''">
				<u-icon :name="resultFunction[currentType].icon" size="42"></u-icon>
				{{ resultFunction[currentType].name }}
			</u-button>
			<view class="wb-change" v-if="resultFile!==''">
				<u-icon :name="fileUrl+'change.png'" size="50" @click="changeFunction"></u-icon>
			</view> -->
		</view>
		<!-- 更多类型 -->
		<u-popup class="options-popup" v-model="showMoreOptions" mode="bottom" border-radius="30"
		closeable close-icon="arrow-down" close-icon-color="#fff">
			<view class="op-content">
				<view class="op-top">
					<u-icon name="tags" size="42" label="更多类型" color="#a7b6b8"
					label-size="35" label-color="#a7b6b8" margin-left="20"></u-icon>
				</view>
				<scroll-view :scrollY="true" class="options-list">
					<view class="section-options">
						<view class="section-tags" v-for="(item,index) in form.options" :key="item.id"
						:class="selectElementIndex===index?'section-tags-select':''" @click="selectElement(index)">
							<image :src="getTypeImage(item.path)"></image>
							<text>{{ item.optionName }}</text>
						</view>
						<!-- <u-tag v-for="(item,index) in form.options" :key="item.id" :index="index"
						:text="item.optionName" @click="selectElement" :class="selectElementIndex===index?'u-tag-select':''"></u-tag> -->
					</view>
				</scroll-view>
			</view>
		</u-popup>
		
		<u-toast ref="uToast"></u-toast>
		<DotLoading :show="dotLoading" />
		<Loading :show="loading"></Loading>
	</view>
</template>

<script>
import configService from '@/common/config.service.js';
import { tools } from '@/utils/utils.js';
import EditorBox from './components/editor.vue';
import DressSelect from './components/dress_select.vue';
import { ossUpload } from '@/common/ossutil/ossWebUpload.js';
export default {
	// #ifdef MP
	options: {
		styleIsolation: 'shared'
	},
	// #endif
	components: {
		EditorBox, DressSelect
	},
	data(){
		return{
			// #ifdef MP
			// 微信小程序自定义导航栏参数
			StatusBar: this.StatusBar || 0,
			CustomBarHeight: this.Custom.height+(this.Custom.top-this.StatusBar)*2 || 0,
			// #endif
			// 全加载
			loading: false,
			// 顶部距离等级
			topLevel: 0,
			// 基础路径
			ip: configService.ip,
			aliIp: configService.aliUrl,
			otherAliIp: configService.otherAliUrl,
			anotherAliIp: configService.anotherAliUrl,
			aliAsyncIp: configService.aliAsyncUrl,
			myFileUrl: configService.fileUrl + 'pixel/my/',
			fileUrl: configService.fileUrl + 'pixel/workshops/',
			// 上传图片
			// http://8.138.171.103/upload%5CAttachment%5C20241127%5Caa73abfb8b3a433292c94de57aef0a35.png
			uploadFile: '',
			// 结果图
			// upload%5CAttachment%5C20241127%5Caa73abfb8b3a433292c94de57aef0a35.png
			resultFile: '',
			// logo图标
			logo: 'logo-new.png',
			// 我的页面背景
			background: 'background.png',
			// 数据
			form: {
				id: ''//id
			},
			// 模式选择
			selections:["保留模式","替换模式"],
			// 模式选择下标
			currentSelect: 0,
			// 模式选择背景
			selectBackground: 'selectedBd.png',
			// 未选择背景
			noSelectBackground: 'noSelectedBd.png',
			// 编辑图标
			editorIcon: 'editor.png',
			// 提示语列表
			// placeholderList: {
			// 	stylereplace: '上传图片后，选择更换不同风格~',
			// 	animeization: '上传人像图，快进入anime的世界吧~',
			// 	oldrepair: '上传黑白旧照片，焕发色彩~'
			// },
			// 创作之后的操作按钮
			resultFunction: {
				download: {
					name: '下载',
					icon: 'download',
					background: 'linear-gradient(to right, #56ab2f 0%, #96fe11  51%, #56ab2f  100%)',
					fun: ()=>{this.download()}
				},
				reUpload: {
					name: '重新制图',
					icon: 'camera',
					background: 'linear-gradient(to right, #c2fc3b 0%, #c2ffd8  51%, #c2fc3b 100%)',
					fun: ()=>{this.redraw()}
				},
				// saveWork: {
				// 	name: '保存作品',
				// 	icon: 'bookmark',
				// 	background: 'linear-gradient(to right, #4AC29A 0%, #BDFFF3  51%, #4AC29A  100%)',
				// 	fun: ()=>{}
				// }
			},
			// 当前功能按钮
			currentType: 'download',
			// 当前功能下标
			index: 0,
			// 下载加载
			functionLoading: false,
			// 过渡动画
			transition: false,
			// 图片处理加载动画
			dotLoading: false,
			// 元素选择下标
			selectElementIndex: '',
			// 尺寸选择下标
			selectSizeIndex: '',
			// 弹窗显示更多选项
			showMoreOptions: false,
			// 按钮禁用
			functionDisable: false,
			// 轮询次数——不轮询-1
			asyncPollTime: -1,
			// 异步结果——成功true，失败false
			asyncResult: false,
			// 加载中随机图片
			rangeImageList: [],
			// 进度条
			dealPercent: 20,
			// 进度条计时器
			dealPercentTimer: 1,
			// 生成失败提示词
			errorTips: '',
			// 火山尺寸列表——文生图
			volcengineDimensions: [
				{ name: "512*512", value: "1/1" },
				{ name: "512*384", value: "4/3" },
				{ name: "384*512", value: "3/4" },
				{ name: "512*341", value: "3/2" },
				{ name: "341*512", value: "2/3" },
				{ name: "512*288", value: "16/9" },
				{ name: "288*512", value: "9/16" },
			],
			// 阿里尺寸列表——文生图
			aliDimensions: [
				{ name: "1024*1024", value: "1/1" },
				{ name: "720*1280", value: "9/16" },
				{ name: "768*1152", value: "2/3" },
				{ name: "1280*720", value: "16/9" },
			]
		}
	},
	// #ifndef H5
	onPageScroll(e) {
		const level = e.scrollTop/60;
		if(level<=1) this.topLevel = level;
		else this.topLevel = 1;
	},
	// #endif
	
	// #ifdef H5
	mounted(){
		let that = this;
		window.onscroll = function () {
		    //为了保证兼容性，这里取三个值，哪个有值取哪一个
		    //scrollTop就是触发滚轮事件时滚轮的高度
		    var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
			const level = scrollTop/60;
			if(level<=1) that.topLevel = level;
			else that.topLevel = 1;
		}
	},
	
	onHide() {
		window.onscroll = null;
	},
	// #endif
	onLoad(options) {
		this.form.id = options.id;
		this.getForm();
		this.getRangeImages();
	},
	computed: {
		// 获取一般展示页选项——8个最多
		getOptions(){
			let options = this.form.options;
			const length = this.form.options.length;
			return length > 8 ? options.slice(0,8) : options;
		},
		// 获取涂抹重绘选中样式
		getSelectionsStyle(index){
			return (index) => {
				return this.currentSelect===index?{ backgroundImage: `url(${this.fileUrl+this.selectBackground})` }:
				{ color: '#000', backgroundImage: `url(${this.fileUrl+this.noSelectBackground})` }
			}
		},
	},
	methods: {
		// 获取ai功能详情
		async getForm(){
			this.loading = true;
			try{
				let res = await this.$api.singleServices(this.form.id);
				if(res.success){
					res.data.type = Number(res.data.type);
					this.form = res.data;
				}else{
					this.functionDisable = true;
					this.$refs.uToast.show({type:'error',title: "ai功能暂未开放!"});
				}
			}catch(e){}
			finally{
				this.loading = false;
			}
		},
		// 获取加载中图片
		async getRangeImages(){
			let res = await this.$api.getCpPhotoById({labelId: 6});
			if(res?.success){
				this.rangeImageList = res.data;
			}else{
				this.$refs.uToast.show({type:'error',title: "随机加载图片获取失败!"});
			}
		},
		// 图片格式化
		getTypeImage(path){
			if(path === null || path === ''){
				return '/static/default-select.png';
			}else if(path.startsWith("http")){
				return path;
			}else if(path.startsWith("/")){
				// #ifdef H5
				return encodeURI(path);
				// #endif
				// #ifndef H5
				return encodeURI(this.ip+path);
				// #endif
			}else{
				return encodeURI(this.ip+path);
			}
		},
		// 返回
		back(){
			// #ifdef MP || APP
			uni.navigateBack();
			// #endif
			// #ifndef MP || APP
			uni.redirectTo({
				url: '/pages/mobile_web/index/index'
			})
			// #endif
		},
		// 上传图片
		selectImage(){
			let that = this;
			uni.chooseImage({
				count: 1, // 默认9
				sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
				sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
				success: (res) => {
					// #ifdef H5
					if (res.tempFiles[0].type.indexOf('image') === -1) {
						that.$refs.uToast.show({
							type: 'warning',
							title: "图片上传格式错误!"
						});
						return;
					}
					// #endif
					
					const size = res.tempFiles[0].size / 1024; // 计算文件大小
					if(size<5 || (size/1024)>5){
						that.$refs.uToast.show({
							type: 'warning',
							title: "图片大小不符合规范!"
						});
						return;
					}
					
					if(that.resultFile!=='') that.resultFile = '';
					that.uploadFile = res.tempFilePaths[0];
				}
			});
		},
		// ai试衣模特预选
		previewMannequin(model){
			this.uploadFile = model;
		},
		// 预览图片
		previewImage(){
			if(this.asyncPollTime !== -1){
				this.setResultFile();
			}else{
				const previewImages = [this.getResultImagePath(this.resultFile)];
				if(this.uploadFile) previewImages.push(this.uploadFile);
				tools.methods.lookImage(0,previewImages);
			}
		},
		// 开始处理图片
		async startDeal(){
			try{
				let that = this;
				// 判断图片是否符合规范
				if(!this.legalJudge()) return;
				that.dotLoading = true;
				let mannequinIndex = that.form.type === 4 ? that.$refs.dressRef.form.mannequinIndex : '';
				if(that.uploadFile && (mannequinIndex === '' || mannequinIndex === -1)){
					// 上传图片
					ossUpload(that,that.uploadFile,(path)=>{
						if(!path) return;
						that.uploadFile = path;
						// 再实际处理
						that.realUpload();
					});
				}else{
					// 再实际处理
					that.realUpload();
				}
			}catch(e){
				this.dotLoading = false;
			}finally{
			}
		},
		// 真正处理方法
		async realUpload(){
			let that = this;
			let resp = await that.$api.generateImages(that.getParams(that.form));
			if(resp?.success){
				that.setResultFile(resp.data.path);
				console.log('that.resultFile',that.resultFile);
				that.$refs.uToast.show({type:'success',title:
				'等待ai生成中......点击先看临时工表演',duration: 3000});
				that.dotLoading = false;
				// 开启轮询
				that.delayLoadImage(resp.data.id);
			}else{
				that.$refs.uToast.show({type:'error',title: `${that.form.name}失败!`});
				that.dotLoading = false;
			}
		},
		// 设置结果图
		setResultFile(path = ''){
			// if(this.form.id > 3){
				const length = this.rangeImageList.length;
				// 获取随机下标
				let num = Math.floor(Math.random() * length);
				let image = this.rangeImageList[num]?.path;
				this.resultFile = length>0 ? 
				(image.startsWith("http") ? image : encodeURI(this.ip+image)) : path;
			// } else {
			// 	this.resultFile = path;
			// }
		},
		// 开启轮询查询结果图片
		delayLoadImage(id){
			// if(this.form.id > 3&&id){
			if(id){
				this.dealPercent = 0;
				this.asyncPollTime = 0;
				this.startDealPercent();
				this.asyncPoll(id);
			}
		},
		// 结果图格式化
		getResultImagePath(path){
			if(!path) return;
			let index = path?.indexOf('?');
			let judge = path?.includes(configService.anotherAliUrl);
			return path?.includes('://') ? path.substring(0,(judge||!index||index===-1) ? path.length : index) : encodeURI(this.ip+path);
		},
		// 轮询
		async asyncPoll(id) {
			if(this.asyncPollTime === -1) return;
			// 超13次轮询结束
			if(this.asyncPollTime > 13) {
				this.asyncPollTime = -1;
				this.$refs.uToast.show({type:'warning',title:'生成时间过长，请移步作品栏目查看图片'});
				return;
			}
			if(this.asyncPollTime === 3){
				this.$refs.uToast.show({type:'warning',title:'火速插队中......客官可稍后移步作品栏目查看图片',
				duration: 3000});
			}
			try {
				let res = await this.$api.singlePhotoById(id);
				if(res?.success && res.data !== null && res.data?.creationState !== "create"){
					this.dealPercent = 100;
					this.resultFile = res.data?.path;
					setTimeout(()=>{this.asyncPollTime = -1;},100);
					// 结果判断
					this.asyncResult = res.data?.creationState === 't';
					this.errorTips = this.asyncResult ? '' : res.data?.reason;
					this.$refs.uToast.show({type:this.asyncResult?'success':'error',title: `${this.form.name}${this.asyncResult?'成功':'失败'}`});
					return;
				}
				this.asyncPollTime++;
				console.log('轮询次数：',this.asyncPollTime);
			} catch (error) {
				return;
		    }
			setTimeout(() => this.asyncPoll(id), 5000);
		},
		// 设置进度条——最多15秒
		startDealPercent(){
			let that = this;
			let timerx = 1;
			let timer = function(){
				let random = Math.floor(Math.random()*3.5);
				let num = timerx === 75 ? 99 : that.dealPercent + random;
				if(num<99){
					that.dealPercent = num;
					timerx++;
				}else{
					that.dealPercent = 99;
					clearInterval(that.dealPercentTimer);
				}
			}
			this.dealPercentTimer = setInterval(timer,200);
		},
		// 表单合法判断
		legalJudge(){
			const currentType = this.form.type;
			if(currentType !== 3 && currentType !== 1 && this.uploadFile===''){
				this.$refs.uToast.show({type:'error',title: currentType === 4 ? "请选择模特！" : "请上传图片!"});
				// this.dotLoading = false;
				return false;
			}
			if(currentType === 1){
				if(this.selectElementIndex === '' || !this.form.text){
					this.$refs.uToast.show({type:'error',title: "请完善信息!"});
					// this.dotLoading = false;
					return false;
				}
			}
			if(currentType === 2 && this.selectElementIndex === ''){
				this.$refs.uToast.show({type:'error',title: "请选择图片元素!"});
				// this.dotLoading = false;
				return false;
			}
			if(currentType === 3){
				if(this.selectElementIndex === '' || !this.form.text || !this.form.promt){
					this.$refs.uToast.show({type:'error',title: "请完善信息!"});
					// this.dotLoading = false;
					return false;
				}
			}
			if(currentType === 4){
				const { bottomImageUrl, topImageUrl } = this.$refs.dressRef.form;
				if(topImageUrl===''){
					this.$refs.uToast.show({type:'error',title: "请选择更换上衣!"});
					// this.dotLoading = false;
					return false;
				}
			}
			
			return true;
		},
		// 获取参数值
		getParams({id, type, options, text, promt}){
			let result,that = this;
			switch(type){
				case 0 :
					result = {
						serviceId: id,
						imageUrl: that.uploadFile,
					}
					break;
				case 1 :
					result = {
						serviceId: id,
						option: options[that.selectElementIndex].optionKey,
						text: text,
					}
					if(this.selectSizeIndex !== '') result.size = that.form.id === 4 ? that.aliDimensions[that.selectSizeIndex].name : that.volcengineDimensions[that.selectSizeIndex].name;
					break;
				case 2 :
					result = {
						serviceId: id,
						imageUrl: that.uploadFile,
						option: options[that.selectElementIndex].optionKey
					}
					break;
				case 3 :
					result = {
						serviceId: id,
						option: options[that.selectElementIndex].optionKey,
						text: text,
						promt: promt
					}
					break;
				case 4 :
					const { bottomImageUrl, topImageUrl } = this.$refs.dressRef.form;
					result = {
						serviceId: id,
						bottomImageUrl: bottomImageUrl,
						topImageUrl: topImageUrl,
						imageUrl: that.getImagePath(that.uploadFile),
					};
					if(bottomImageUrl === '') delete result.bottomImageUrl;
					else result.bottomImageUrl = that.getImagePath(bottomImageUrl);
					if(topImageUrl === '') delete result.topImageUrl;
					else result.topImageUrl = that.getImagePath(topImageUrl);
					break;
			}
			return result;
		},
		// 获取图片格式化路径
		getImagePath(path){
			return path?.includes('://') ? path : encodeURI(this.ip+path);
		},
		// 判断是否在微信内置浏览器打开
		// #ifndef APP || MP
		isMpWeb(){
			if(navigator.userAgent.toLowerCase().match(/MicroMessenger/i) == 'micromessenger'){
				this.$refs.uToast.show({type:'warning',title: "请在浏览器打开进行下载，或长按图片保存到相册!"});
				return true;
			}else{
				return false;
			}
		},
		// #endif
		// 图片下载
		async download(){
			let that = this;
			
			// #ifndef APP || MP
			if(this.isMpWeb()) return;
			// #endif

			this.functionLoading = true;
			if(this.resultFile==='') {
				this.$refs.uToast.show({type:'error',title: "暂无结果图片可下载!"});
				this.functionLoading = false;
				return;
			}
			// 判断是否为异步生图 ×
			// 现在均为异步的，均作以下判断 √
			if(this.asyncPollTime !== -1){
				this.$refs.uToast.show({type:'warning',title: "图片生成中，请前往我的作品查看下载!"});
				this.functionLoading = false;
				return;
			} else if(!this.asyncResult){
				this.$refs.uToast.show({type:'error',title: "图片生成失败，请重试!"});
				this.functionLoading = false;
				return;
			}
			
			// 下载地址
			// #ifdef H5
			let downloadUrl = await that.resultFile.replace(that.aliIp, "/ossUpload");
			downloadUrl = await downloadUrl.replace(that.otherAliIp, "/otherOssUpload");
			downloadUrl = await downloadUrl.replace(that.anotherAliIp, "/anotherOssUpload");
			// #endif
			// #ifndef H5
			let downloadUrl = that.resultFile;
			// #endif
			
			// #ifdef H5
			uni.request({
				url: downloadUrl,
				method: 'GET',
				header: { 'token' : that.$store.state.vuex_token },
				responseType: 'arraybuffer',
				success(res) {
					const arrayBuffer = res.data;
					const blob = new Blob([arrayBuffer], {type: 'image/png'}); // 创建 Blob 对象
					const imageUrl = URL.createObjectURL(blob); // 通过 Blob 对象创建图片 URL
					let a = document.createElement('a'); //创建一个 a 标签
					a.href = imageUrl;  //把路径赋到a标签的href上
					a.download = 'pixel.png'; 
					a.click();
					URL.revokeObjectURL(imageUrl);
					a = null;
					that.$refs.uToast.show({type:'success',title: "图片下载成功!"});
				},
				fail() {
					that.$refs.uToast.show({type:'error',title: "图片下载失败，请重试!"});
				},
				complete() {	
					that.functionLoading = false;
				}
			});
			// #endif
			
			// #ifndef H5
			uni.downloadFile({
				url: downloadUrl,
				header: { 'token': that.$store.state.vuex_token },
				success: (res) => {
					if (res.statusCode === 200) {
						//文件保存到本地
						uni.saveImageToPhotosAlbum({
							filePath: res.tempFilePath, //临时路径
							success: function(resp) {
								that.$refs.uToast.show({type:'success',title: "下载成功,请前往手机相册查看!"});
							},
							fail: function(err) {
								that.$refs.uToast.show({type:'error',title: "暂不支持下载,请长按保存!"});
							}
						});
					}else{
						that.$refs.uToast.show({type:'error',title: "下载失败，请重试!"});
					}
				},
				fail() {
					that.$refs.uToast.show({type:'error',title: "暂不支持下载,请长按保存!"});
				},
				complete() {
					that.functionLoading = false;
				}
			});
			// #endif
		},
		// 重新绘制
		redraw(){
			let that = this;
			// 判断是否为异步生图
			if(this.asyncPollTime !== -1){
				uni.showModal({
					title: '提示',
					content: `图片生成中，是否确认重新绘制？`,
					confirmColor: '#94d500',
					success: (res) => {if (res.confirm) that.realRedraw();}
				});
			} else this.realRedraw();
		},
		// 真正重绘方法
		realRedraw(){
			if(this.form.type===0){
				this.selectImage();
			}else if(this.form.type){
				this.resultFile = '';
				this.uploadFile = '';
			}else if(this.form.type === 4){
				this.resultFile = '';
				this.uploadFile = '';
				this.$refs.dressRef.resetForm();
			};
			this.errorTips = '';
			this.asyncPollTime = -1;
			setTimeout(()=>{this.dealPercent = 100;});
		},
		// 使用教程
		showTutorial(){
			if(this.form.exampleUrl){
				if(this.UniPlatform === 'web'){
					window.open(encodeURI(this.form.exampleUrl));
				}else{
					uni.navigateTo({
						url: `/pages/index/webview?src=${encodeURI(this.form.exampleUrl)}`
					})
				}
			}else{
				this.$refs.uToast.show({type:'warning',title: "暂无使用教程，请自求多福!"});
			}
		},
		// 切换操作按钮
		changeFunction(){
			this.transition = true;
			const keys = Object.keys(this.resultFunction);
			this.index = (this.index+1) % keys.length;
			this.currentType = keys[this.index];
			setTimeout(()=>{
				this.transition = false;
			},500)
		},
		// 增强提示词
		async strengthenTip({input, deal}){
			if(input === null || input === ''){
				this.$refs.uToast.show({type:'warning',title: "请提供部分词句!"});
				deal();
				return;
			}else{
				let res = await this.$api.createTip(input);
				if(res.success){
					deal(res.data);
				}else{
					this.$refs.uToast.show({type:'error',title: "提示词强化失败!"});
					deal();
					return;
				}
			}
		},
		// 元素选择
		selectElement(index){
			this.selectElementIndex = this.selectElementIndex === index ? '' : index;
		},
		// 尺寸选择
		selectSize(index){
			this.selectSizeIndex = this.selectSizeIndex === index ? '' : index;
		},
	}
}
</script>

<style scoped lang="scss">
.mobile-workshops{
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	min-height: 100vh;
	background-size: cover;
	// #ifdef APP || MP
	.app-top{
		width: 100%;
		position: fixed;
		z-index: 81;
		top: 0;
	}
	// #endif
	.mwt-top{
		// #ifdef APP || MP
		.app-top{
			width: 100%;
			position: fixed;
			z-index: 81;
			top: 0;
		}
		// #endif
		.mobile-logo{
			width: 100%;
			display: flex;
			justify-content: center;
			position: fixed;
			z-index: 81;
			padding: 15rpx 0;
			image{
				width: 200rpx;
				height: 45rpx;
			}
		}
		.mw-title{
			color: #fff;
			font-size: 35rpx;
			line-height: 35rpx;
			font-weight: bold;
			position: relative;
			display: flex;
			align-items: center;
			justify-content: center;
			margin: 80rpx 40rpx 32rpx;
			height: 40rpx;
			.back{
				position: absolute;
				left: 0;
				&:active{
					filter: opacity(0.8);
				}
			}
		}
		.mw-upload{
			display: flex;
			flex-direction: column;
			margin: 15rpx 100rpx;
			.mwu-promt{
				height: 100rpx;
				margin-top: 120rpx;
				display: flex;
				align-items: center;
				width: calc(100% + 100rpx);
				margin-left: -50rpx;
				border-radius: 20rpx;
				box-shadow: 0 0 10rpx #eee;
				border: 2rpx solid #858585;
			}
			.mwu-cover{
				width: 100%;
				height: 550rpx;
				background-color: #626262;
				border-radius: 35rpx;
				border: 2rpx solid #858585;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				&:active{
					filter: opacity(0.8);
				}
				.mwuc-tips{
					font-size: 28rpx;
					margin: 30rpx 0 -70rpx;
					color: #f9f9f9;
					text{
						color: rgba(229, 64, 70, 1);
					}
				}
			}
			.center-image{
				border-radius: 35rpx;
				width: 100%;
				min-height: 650rpx;
				display: flex;
				align-items: center;
				image{
					width: 100%;
					border-radius: 35rpx;
					border: 2rpx solid #858585;
				}
			}
			.selections{
				margin-top: 20rpx;
				width: 100%;
				display: flex;
				align-items: center;
				justify-content: flex-end;
				.selections-item{
					margin-left: 20rpx;
					width: 150rpx;
					height: 48rpx;
					line-height: 50rpx;
					border: 56rpx;
					color: #fff;
					font-weight: bold;
					font-size: 20rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					background-size: cover;
				}
			}
		}
		.mw-editor{
			margin: 50rpx 46rpx 12rpx;
			display: flex;
			flex-direction: column;
			.slot{
				color: #fff;
				font-size: 32rpx;
				font-weight: bold;
			}
			.section-options{
				// margin-top: 40rpx;
				display: grid;
				grid-gap: 26rpx;
				grid-template-columns: repeat(4,1fr);
				
				.section-tags{
					height: 200rpx;
					width: 150rpx;
					background-color: #2a243d;
					border-radius: 20rpx;
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: space-evenly;
					color: #b3a0da;
					
					text{
						width: 90%;
						text-align: center;
						text-overflow: ellipsis;
						white-space: nowrap;
						overflow: hidden;
					}
					
					image{
						opacity: 0.7;
						border-radius: 20rpx;
						width: 130rpx;
						height: 130rpx;
					}
				}
				
				.section-tags-select{
					border: 2rpx solid #ff55f5;
					image{
						opacity: 1;
					}
				}
				
				.u-tag{
					width: 200rpx;
					height: 80rpx;
					font-size: 28rpx;
					display: flex;
					color: rgba(41,121,255,0.6);
					background-color: rgba(236,245,255,0.8);
					align-items: center;
					justify-content: center;
					
					&:active{
						opacity: 0.8;
					}
				}
				.u-tag-select{
					box-shadow: 0 0 15rpx #eee;
					color: #2979ff;
					background-color: rgba(236,245,255,1);
				}
			}
			/deep/.u-section{
				margin-bottom: 40rpx;
			}
			.dimensional-drawing{
				height: 180rpx;
				// margin-top: 40rpx;
				display: flex;
				.dimensional-item{
					min-width: 160rpx;
					height: 100%;
					padding: 0 20rpx 18rpx;
					background-color: #2a243d;
					border-radius: 20rpx;
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: flex-end;
					color: #b3a0da;
					margin-right: 30rpx;
					
					&:nth-last-child(1){
						margin-right: 0;
					}
					
					text{
						width: 100%;
						text-align: center;
						margin-top: 20rpx;
					}
					
					view{
						opacity: 0.7;
						border-radius: 10rpx;
						width: 60rpx;
						border: 4rpx solid #aea4ee;
						aspect-ratio: 1/1;
					}
				}
				.dimensional-item-select{
					border: 2rpx solid #ff55f5;
					view{
						opacity: 1;
						box-shadow: 0 0 10rpx #aea4ee;
					}
					text{
						text-shadow: 0 0 2rpx #aea4ee;
					}
				}
			}
		}
		.workshops-tip{
			margin-top: 50rpx;
			justify-content: center;
			align-items: center;
			display: flex;
			font-size: 28rpx;
			color: #c2fc3b;
			.tip-content{
				justify-content: center;
				align-items: center;
				display: flex;
				.u-icon{
					margin-right: 15rpx;
				}
			}
			.tip-progress{
				display: flex;
				align-items: center;
				width: calc(100% - 200rpx);
				.progress-title{
					margin-right: 20rpx;
					white-space: nowrap;
				}
				.progress-deal{
					margin-left: 20rpx;
				}
				text{
					background-image: linear-gradient(to right, #d3e7e7 0%, #a7b6b8 100%);
					background-clip: text;
					-webkit-background-clip: text;
					-webkit-text-fill-color: transparent;
				}
				// #ifdef MP
				.uline-progress{
					width: 100%;
				}
				// #endif
				::v-deep .u-active{
					border-top-right-radius: 100rpx;
					border-bottom-right-radius: 100rpx;
					box-shadow: 0 0 20rpx #d3e7e7;
					background: linear-gradient(to right, #96a3a5 0%, #d3e7e7 100%);
				}
			}
		}
	}
	.workshops-btn{
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		margin: 80rpx 0 40rpx;
		// 价格提示
		.price-tips{
			text-align: center;
			font-size: 24rpx;
			color: #b2d210;
			width: 65%;
			margin-bottom: 6rpx;
			text{
				margin: 0 10rpx;
				color: red;
			}
		}
		// 保存图片
		.wbu-dbtn{
			margin: 0 10rpx;
			// #ifndef MP
			padding: 50rpx 70rpx;
			// #endif
			border: none;
			height: 100rpx;
			color: rgba(42, 35, 61, 0.9);
			font-size: 32rpx;
			font-weight: bold;
			background-size: 200% auto;
			transition: 0.5s;
			animation-duration: 1s;
			animation-fill-mode: both;
			background-image: linear-gradient(to right, #c2fc3b 0%, #c2ffd8  51%, #c2fc3b 100%);
			&:active {
			    background-position: right center;
			    color: #fff;
			    text-decoration: none;
				// #ifdef MP
				/deep/.u-btn--default{
					color: #fff;
				}
				// #endif
			}
			// #ifdef MP
			border-radius: 56rpx;
			/deep/.u-btn--default{
				padding: 50rpx 70rpx;
				background-color: #ffffff00;
				border: none;
				color: rgba(42, 35, 61, 0.9);
				width: 100%;
				height: 100rpx;
				border-radius: 56rpx;
			}
			// #endif
			/deep/.u-icon{
				margin-right: 10rpx;
			}
		}
		// 重新制图
		.wbu-odbtn{
			padding: 4rpx;
			background: #1a1929;
			display: flex;
			justify-content: center;
			align-items: center;
			border-radius: 56rpx;
			overflow: hidden;
			box-sizing: border-box;
			background: linear-gradient(90deg, #2dc5da, #e313ee) !important;

			.wbud-btn{
				width: 100%;
				height: 92rpx;
				// #ifndef MP
				padding: 0 70rpx;
				// #endif
				background: #1a1929;
				border: none;
				/deep/.u-icon{
					margin-right: 10rpx;
				}
				text{
					background-image: linear-gradient(to right, #aea4ee 0%, #e26afd 100%);
					background-clip: text;
					-webkit-background-clip: text;
					-webkit-text-fill-color: transparent;
				}
				// #ifdef MP
				border-radius: 56rpx;
				/deep/.u-btn--default{
					background-color: #ffffff00;
					border: none;
					// color: rgba(42, 35, 61, 0.9);
					width: 100%;
					height: 92rpx;
					border-radius: 56rpx;
				}
				// #endif
			}
		}
		.wbu-btn{
			margin: 0;
			border: none;
			width: 70%;
			height: 100rpx;
			color: rgba(42, 35, 61, 0.9);
			font-size: 35rpx;
			font-weight: bold;
			background-size: 200% auto;
			transition: 0.5s;
			animation-duration: 1s;
			animation-fill-mode: both;
			background-image: linear-gradient(to right, #c2fc3b 0%, #c2ffd8  51%, #c2fc3b 100%);
			&:active {
			    background-position: right center;
			    color: #fff;
			    text-decoration: none;
				// #ifdef MP
				/deep/.u-btn--default{
					color: #fff;
				}
				// #endif
			}
			/deep/.u-icon{
				margin-right: 10rpx;
			}
			// #ifdef MP
			border-radius: 56rpx;
			/deep/.u-btn--default{
				background-color: #ffffff00;
				border: none;
				color: rgba(42, 35, 61, 0.9);
				width: 100%;
				height: 100rpx;
				border-radius: 56rpx;
			}
			// #endif
		}
		.transition{
			animation-name: fadeIn;
		}
		.wb-change{
			color: #fff;
			margin-left: 20rpx;
			margin-right: -70rpx;
			&:active{
				filter: opacity(0.6);
			}
		}
	}
}
.options-popup{
	.op-content{
		background-color: #2D3240;
		padding: 10rpx 25rpx 20rpx;
		display: flex;
		flex-direction: column;
		.op-top{
			height: 80rpx;
			display: flex;
			align-items: center;
		}
		.options-list{
			height: 800rpx;
			color: #a7b6b8;
			width: 100%;
			margin-top: 10rpx;
			.section-options{
				display: grid;
				grid-gap: 26rpx;
				grid-template-columns: repeat(4,1fr);
				
				.section-tags{
					height: 200rpx;
					width: 150rpx;
					background-color: #2a243d;
					border-radius: 20rpx;
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: space-evenly;
					color: #b3a0da;
					
					text{
						width: 90%;
						text-align: center;
						text-overflow: ellipsis;
						white-space: nowrap;
						overflow: hidden;
					}
					
					image{
						opacity: 0.7;
						border-radius: 20rpx;
						width: 130rpx;
						height: 130rpx;
					}
				}
				
				.section-tags-select{
					border: 2rpx solid #ff55f5;
					image{
						opacity: 1;
					}
				}
				
				.u-tag{
					width: 200rpx;
					height: 80rpx;
					font-size: 28rpx;
					display: flex;
					color: rgba(41,121,255,0.6);
					background-color: rgba(236,245,255,0.8);
					align-items: center;
					justify-content: center;
					
					&:active{
						opacity: 0.8;
					}
				}
				.u-tag-select{
					box-shadow: 0 0 15rpx #eee;
					color: #2979ff;
					background-color: rgba(236,245,255,1);
				}
			}
		}
	}
}
@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}
</style>