From e1968dbbbc726cb0d7987d33fa3e89837881aff2 Mon Sep 17 00:00:00 2001
From: Double-_-Z <2492419643@qq.com>
Date: Tue, 11 Feb 2025 19:39:37 +0800
Subject: [PATCH] =?UTF-8?q?=E5=AE=8C=E6=88=90pc=E7=AB=AF=E8=AF=95=E8=A1=A3?=
 =?UTF-8?q?=E6=8D=A2=E8=A1=A3=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../workshops/components/dress_select.vue     | 626 ++++++++++++++++++
 pages/pc_web/workshops/workshops.vue          | 486 +++++++++-----
 2 files changed, 934 insertions(+), 178 deletions(-)
 create mode 100644 pages/pc_web/workshops/components/dress_select.vue

diff --git a/pages/pc_web/workshops/components/dress_select.vue b/pages/pc_web/workshops/components/dress_select.vue
new file mode 100644
index 0000000..a40814e
--- /dev/null
+++ b/pages/pc_web/workshops/components/dress_select.vue
@@ -0,0 +1,626 @@
+<template>
+	<view class="dress-select">
+		<!-- 模特 -->
+		<view class="mw-editor">
+			<view class="mw-tips">
+				<u-icon :name="fileUrl+mannequin" size="30" color="#c2ea04" label="选择模特"
+				labelColor="#84878c" margin-left="20rpx" labelSize="32rpx"></u-icon>
+			</view>
+			<!-- 预设模特 -->
+			<view class="ds-mannequin">
+				<view class="mannequin-list">
+					<view class="mannequin-item" v-for="(item,index) in list[2]" :key="item.id"
+					@click="selectMannequin(index)" :class="mannequinJudge(index)?'mannequin-item-select':''">
+						<image :lazy-load="true" :src="getImagePath(item.path)"></image>
+					</view>
+				</view>
+			</view>
+		</view>
+		<!-- 上装 -->
+		<view class="mw-editor">
+			<view class="mw-tips">
+				<u-icon :name="fileUrl+cloth" size="32" color="#c2ea04" label="选择上衣"
+				labelColor="#84878c" margin-left="20rpx" labelSize="32rpx"></u-icon>
+				<view class="mwt-btn" @click="handleClickSelect(0,$event)">
+					<view :data-select="1" :class="selectOptions[0]?'mwt-select':''">预设上衣</view>
+					<view :class="selectOptions[0]?'':'mwt-select'">自定义</view>
+				</view>
+			</view>
+			<!-- 预设上装 -->
+			<view v-show="selectOptions[0]">
+				<view class="section-options">
+					<view class="section-cloth" v-for="(item,index) in getCoatOptions" :key="item.id"
+					@click="selectElement(0,index)" :class="form.coatIndex===index?'u-tag-select':''">
+						<image :src="getImagePath(item.path)"></image>
+					</view>
+					<view class="section-cloth" v-if="list[0]&&list[0].length>9"
+					 @click="showMoreOptions = true;currentMore = 0;" :class="form.coatIndex>=getCoatOptions.length?'u-tag-select':''">
+						<image src="/static/image-more.png"></image>
+						<text>更多</text>
+					</view>
+				</view>
+			</view>
+			<!-- 自定义上装 -->
+			<view class="ds-mannequin ds-auto" @click="uploadFile('coat')" v-show="!selectOptions[0]" 
+			:style="{cursor: form.coatTemporaryUrl === '' ? 'pointer' : 'default'}">
+				<u-icon v-if="form.coatTemporaryUrl === ''" :name="fileUrl+upload" size="30" color="#c2ea04" label="添加上衣"
+				labelColor="#befda1" margin-left="20rpx" labelSize="32rpx" top="10"></u-icon>
+				<view v-else class="dsa-upload" :class="form.coatIndex===-1?'dsa-upload-select':''">
+					<u-icon @click.native.stop="removeImage('coatTemporaryUrl')" class="close" name="backspace" size="35" color="#de3730"></u-icon>
+					<image @click.native.stop="handleSelectImage('coat')" :src="form.coatTemporaryUrl" mode="heightFix"></image>
+				</view>
+			</view>
+		</view>
+		<!-- 下装 -->
+		<view class="mw-editor">
+			<view class="mw-tips">
+				<u-icon :name="fileUrl+cloth" size="32" color="#c2ea04" label="选择下衣"
+				labelColor="#84878c" margin-left="20rpx" labelSize="32rpx"></u-icon>
+				<view class="mwt-btn" @click="handleClickSelect(1,$event)">
+					<view :data-select="1" :class="selectOptions[1]?'mwt-select':''">预设下衣</view>
+					<view :class="selectOptions[1]?'':'mwt-select'">自定义</view>
+				</view>
+			</view>
+			<!-- 预设下装 -->
+			<view v-show="selectOptions[1]">
+				<view class="section-options">
+					<view class="section-cloth" v-for="(item,index) in getBottomsOptions" :key="item.id"
+					@click="selectElement(1,index)" :class="form.bottomsIndex===index?'u-tag-select':''">
+						<image :src="getImagePath(item.path)"></image>
+					</view>
+					<view class="section-cloth" v-if="list[1]&&list[1].length>9"
+					 @click="showMoreOptions = true;currentMore = 1;" :class="form.bottomsIndex>=getBottomsOptions.length?'u-tag-select':''">
+						<image src="/static/image-more.png"></image>
+						<text>更多</text>
+					</view>
+				</view>
+			</view>
+			<!-- 自定义下装 -->
+			<view class="ds-mannequin ds-auto" @click="uploadFile('bottoms')" v-show="!selectOptions[1]" 
+			:style="{cursor: form.bottomsTemporaryUrl === '' ? 'pointer' : 'default'}">
+				<u-icon v-if="form.bottomsTemporaryUrl === ''" :name="fileUrl+upload" size="30" color="#c2ea04" label="添加下衣"
+				labelColor="#befda1" margin-left="20rpx" labelSize="32rpx" top="10"></u-icon>
+				<view v-else class="dsa-upload" :class="form.bottomsIndex===-1?'dsa-upload-select':''">
+					<u-icon @click.native.stop="removeImage('bottomsTemporaryUrl')" class="close" name="backspace" size="35" color="#de3730"></u-icon>
+					<image @click.native.stop="handleSelectImage('bottoms')" :src="form.bottomsTemporaryUrl" mode="heightFix"></image>
+				</view>
+			</view>
+		</view>
+		<!-- 更多类型 -->
+		<u-popup class="options-popup" v-model="showMoreOptions" mode="bottom" border-radius="30"
+		closeable close-icon="arrow-down" close-icon-color="#a7b6b8" :maskCustomStyle="{position: 'absolute'}">
+			<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-cloth" v-for="(item,index) in list[currentMore]" 
+						:key="item.id" @click="selectElement(currentMore,index)" 
+						:class="(currentMore === 0 ? form.coatIndex : form.bottomsIndex)===index?'u-tag-select':''">
+							<image :lazy-load="true" :src="getImagePath(item.path)"></image>
+						</view>
+					</view>
+				</scroll-view>
+			</view>
+		</u-popup>
+		<u-toast ref="uToast"></u-toast>
+	</view>
+</template>
+
+<script>
+import configService from '@/common/config.service.js';
+import { ossUpload } from '@/common/ossutil/ossWebUpload.js';
+export default {
+	data() {
+		return {
+			// 基础路径
+			staticIp: configService.ip,
+			fileUrl: configService.fileUrl+'pixel/workshops/',
+			// 模特图标
+			mannequin: 'mannequin.png',
+			// 服装图标
+			cloth: 'cloth.png',
+			// 上传图标
+			upload: 'upload.png',
+			form: {
+				coatIndex: '',// 上衣下标 -1自定义
+				coatUrl: '',// 预设/自定义 上装
+				coatTemporaryUrl: '',// 自定义上传上装
+				bottomsIndex: '',// 上装下标 -1自定义
+				bottomsUrl: '',// 预设/自定义 下装
+				bottomsTemporaryUrl: '',// 自定义上传下装
+				mannequinIndex: '',// 模特下标
+			},
+			// 预设模特/上装/下装列表
+			list: [],
+			/**
+			 * 预设/自定义-选项列表
+			 * true预设  false自定义
+			 * 上装
+			 * 下装
+			 */ 
+			selectOptions: [true,true],
+			// 弹窗显示更多选项
+			showMoreOptions: false,
+			// 当前更多弹窗显示类型  0-上装  1-下装
+			currentMore: 0,
+		}
+	},
+	computed: {
+		// 获取上装options
+		getCoatOptions(){
+			let options = this.list[0];
+			const length = options.length;
+			return length > 8 ? options.slice(0,7) : options;
+		},
+		// 获取下装options
+		getBottomsOptions(){
+			let options = this.list[1];
+			const length = options.length;
+			return length > 8 ? options.slice(0,7) : options;
+		}
+	},
+	created() {
+		// 获取上装
+		this.getCpPhotoById(0);
+		// 获取下装
+		this.getCpPhotoById(1);
+		// 获取模特
+		this.getCpPhotoById(2);
+	},
+	methods: {
+		// 初始化
+		async getCpPhotoById(index){
+			// 获取服装-labelId不是index，1-上衣、2-下装、3-模特
+			let res = await this.$api.getCpPhotoById({labelId: (index+1)});
+			if(res.success){
+				this.list[index] = await res.data;
+				this.$forceUpdate();
+			}else{
+				uni.showToast({
+					icon: 'none', title: index===2?'模特获取失败！':'服装获取失败！'
+				})
+			}
+		},
+		// 获取图片路径
+		getImagePath(path){
+			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.staticIp+path);
+		},
+		// 点击预设/自定义按钮
+		handleClickSelect(index,event){
+			if(index!==null){
+				this.selectOptions[index] = Boolean(event.target.dataset.select);
+				this.$forceUpdate();
+			}
+		},
+		// 自定义上传
+		uploadFile(type = ''){
+			if((type === 'coat' && this.form.coatTemporaryUrl) || (type === 'bottoms' && this.form.bottomsTemporaryUrl)) return;
+			let that = this;
+			// 上传图片
+			that.selectImage((path)=>{
+				if(path){
+					switch(type){
+						// 上装
+						case 'coat':
+							that.form.coatTemporaryUrl = path;
+							that.form.coatUrl = path;
+							that.form.coatIndex = -1;
+							break;
+						// 下装
+						case 'bottoms':
+							that.form.bottomsTemporaryUrl = path;
+							that.form.bottomsUrl = path;
+							that.form.bottomsIndex = -1;
+							break;
+					}
+				}
+			});
+		},
+		// 清除上传
+		removeImage(type = ''){
+			if(type === '') return;
+			this.form[type] = '';
+			if(type === 'coatTemporaryUrl' && this.form.coatIndex === -1){
+				this.form.coatIndex = '';
+				this.form.coatUrl = '';
+			}else if(type === 'bottomsTemporaryUrl' && this.form.bottomsIndex === -1){
+				this.form.bottomsIndex = '';
+				this.form.bottomsUrl = '';
+			}
+			this.$forceUpdate();
+		},
+		// 上传图片
+		selectImage(successTo = null){
+			let that = this;
+			uni.chooseImage({
+				count: 1, // 默认9
+				sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
+				sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
+				success: (res) => {
+					if (res.tempFiles[0].type.indexOf('image') === -1) {
+						that.$refs.uToast.show({
+							type: 'warning',
+							title: "图片上传格式错误!"
+						});
+						return;
+					}
+					
+					const size = res.tempFiles[0].size / 1024; // 计算文件大小
+					if(size<5 || (size/1024)>5){
+						that.$refs.uToast.show({
+							type: 'warning',
+							title: "图片大小不符合规范!"
+						});
+						return;
+					}
+					// 上传图片
+					ossUpload(that,res.tempFilePaths[0],(path)=>{
+						if(!path) return;
+						successTo(path);
+					});
+				}
+			});
+		},
+		// 模特选择
+		selectMannequin(index){
+			if(this.form.mannequinIndex === index){
+				this.form.mannequinIndex = '';
+				this.$emit('previewMannequin','');
+			} else {
+				this.form.mannequinIndex = index;
+				this.$emit('previewMannequin',this.getImagePath(this.list[2][index].path));
+			}
+		},
+		/* 
+		 * @description 选择option
+		 * @param {type} 0—上装   1-下装 
+		 * @param {index} 选项下标 
+		 */
+		async selectElement(type, index){
+			if(type === 0){
+				const judge = this.form.coatIndex === index;
+				this.form.coatIndex = judge ? '' : index;
+				this.form.coatUrl = judge ? '' : this.list[0][index].path;
+			} else {
+				const judge = this.form.bottomsIndex === index;
+				this.form.bottomsIndex = judge ? '' : index;
+				this.form.bottomsUrl = judge ? '' : this.list[1][index].path;
+			}
+		},
+		// 点击自定义上传图片
+		handleSelectImage(type = ''){
+			if(type === '') return;
+			// 上装
+			if(type === 'coat'){
+				const judge = this.form.coatIndex === -1;
+				this.form.coatIndex = judge ? '' : -1;
+				this.form.coatUrl =  judge ? '' : this.form.coatTemporaryUrl;
+			// 下装
+			}else if(type === 'bottoms'){
+				const judge = this.form.bottomsIndex === -1;
+				this.form.bottomsIndex = judge ? '' : -1;
+				this.form.bottomsUrl =  judge ? '' : this.form.bottomsTemporaryUrl;
+			}
+			
+		},
+		// 判断模特是否选中
+		mannequinJudge(index){
+			return this.form.mannequinIndex === index;
+		},
+		// 重置表单
+		resetForm(){
+			this.form = {
+				coatIndex: '',// 上衣下标 -1自定义
+				coatUrl: '',// 预设/自定义 上装
+				coatTemporaryUrl: '',// 自定义上传上装
+				bottomsIndex: '',// 上装下标 -1自定义
+				bottomsUrl: '',// 预设/自定义 下装
+				bottomsTemporaryUrl: '',// 自定义上传下装
+				mannequinIndex: '',// 模特下标
+			}
+			this.selectOptions = [true,true];
+		},
+	}
+}
+</script>
+
+<style scoped lang="scss">
+.dress-select{
+	border-radius: 30rpx;
+	.mw-editor{
+		display: flex;
+		flex-direction: column;
+		margin-top: 34rpx;
+		&:nth-child(1){
+			margin-top: 0;
+		}
+		.mw-tips{
+			display: flex;
+			justify-content: space-between;
+			align-items: center;
+			::v-deep .u-icon__img{
+				filter: drop-shadow(0 0 4rpx #00a66f);
+			}
+			::v-deep .u-icon__label{
+				font-weight: bold;
+			}
+			.mwt-btn{
+				display: flex;
+				view{
+					cursor: pointer;
+					width: 130rpx;
+					height: 48rpx;
+					font-size: 22rpx;
+					border-radius: 56rpx;
+					border: 2rpx solid rgba(167,182,184,0.8);
+					color: #a7b6b8;
+					margin-left: 20rpx;
+					display: flex;
+					justify-content: center;
+					align-items: center;
+					&:hover{
+						opacity: 0.8;
+						border-color: #b0ddee;
+						color: #99d7ff;
+						filter: drop-shadow(0 0 2rpx #befd83);
+					}
+				}
+				.mwt-select{
+					border-color: #b0ddee;
+					color: #99d7ff;
+					filter: drop-shadow(0 0 2rpx #befd83);
+				}
+			}
+			.mwt-back{
+				height: 48rpx;
+				display: flex;
+				align-items: center;
+			}
+		}
+		.ds-mannequin{
+			margin: 25rpx 0 10rpx;
+			// background-color: #2d3240;
+			overflow-x: scroll;
+			overflow-y: hidden;
+			width: 710rpx;
+			height: 220rpx;
+			.mannequin-list{
+				display: flex;
+				height: 100%;
+				.mannequin-item{
+					width: 144rpx;
+					height: 100%;
+					margin-right: 26rpx;
+					border-radius: 10rpx;
+					background-color: rgba(236,245,255,0.8);
+					opacity: 0.7;
+					cursor: pointer;
+					image{
+						width: 200rpx;
+						height: 100%;
+						border: 2rpx solid #a7b6b8;
+						border-radius: 10rpx;
+					}
+					&:hover{
+						box-shadow: 0 0 20rpx #a7b6b8;
+						color: #aea4ee;
+						background-color: rgba(236,245,255,1);
+						opacity: 1;
+						image{
+							border: 2rpx solid #b3a0da !important;
+						}
+					}
+				}
+				
+				.mannequin-item-select{
+					box-shadow: 0 0 20rpx #a7b6b8;
+					color: #aea4ee;
+					background-color: rgba(236,245,255,1);
+					opacity: 1;
+					image{
+						border: 2rpx solid #b3a0da !important;
+					}
+				}
+			}
+		}
+		.section-options{
+			margin-top: 40rpx;
+			display: grid;
+			grid-gap: 26rpx;
+			grid-template-columns: repeat(4,1fr);
+			
+			.u-tag-select{
+				box-shadow: 0 0 20rpx #a7b6b8;
+				background-color: rgba(236,245,255,1);
+				opacity: 1 !important;
+				image{
+					border: 2rpx solid #b3a0da !important;
+				}
+			}
+			
+			.section-cloth{
+				width: 150rpx;
+				height: 170rpx;
+				border-radius: 8rpx;
+				background-color: rgba(236,245,255,0.8);
+				position: relative;
+				display: flex;
+				align-items: center;
+				justify-content: center;
+				opacity: 0.7;
+				cursor: pointer;
+				
+				image{
+					width: 150rpx;
+					height: 170rpx;
+					border: 2rpx solid #a7b6b8;
+					border-radius: 8rpx;
+				}
+				
+				text{
+					position: absolute;
+					color: #fff;
+					margin-bottom: -100rpx;
+				}
+				
+				&:hover{
+					box-shadow: 0 0 20rpx #a7b6b8;
+					background-color: rgba(236,245,255,1);
+					opacity: 1 !important;
+					image{
+						border: 2rpx solid #b3a0da !important;
+					}
+				}
+			}
+		}
+		.ds-auto{
+			min-height: 300rpx;
+			display: flex;
+			align-items: center;
+			justify-content: center;
+			background-color: rgba(245, 246, 249, 0.6);
+			border-radius: 20rpx;
+			transition: 0.3s;
+			cursor: pointer;
+			border: 2rpx dashed rgba(167, 182, 184, 0.6);
+			&:hover{
+				border-color: #a7b6b8;
+				background-color: rgba(245, 246, 249, 1);
+				.u-icon{
+					opacity: 0.8;
+				}
+			}
+			.u-icon{
+				filter: drop-shadow(0 0 2rpx #008559);
+			}
+			.dsa-upload{
+				height: calc(100% - 4rpx);
+				position: relative;
+				border-radius: 10rpx;
+				cursor: pointer;
+				transition: 0.3s;
+				image{
+					opacity: 0.7;
+					height: 100%;
+					border: 2rpx solid #a7b6b8;
+					border-radius: 10rpx;
+					transition: 0.3s;
+				}
+				.close{
+					position: absolute;
+					right: 10rpx;
+					top: 10rpx;
+					z-index: 1;
+					cursor: pointer;
+					&:hover{
+						filter: opacity(0.8);
+					}
+					&:active{
+						filter: opacity(0.6);
+					}
+				}
+				&:hover{
+					box-shadow: 0 0 20rpx #a7b6b8;
+					background-color: rgba(236,245,255,1);
+					image{
+						opacity: 1;
+						border: 2rpx solid #b3a0da !important;
+					}
+				}
+			}
+			.dsa-upload-select{
+				box-shadow: 0 0 20rpx #a7b6b8;
+				background-color: rgba(236,245,255,1);
+				image{
+					opacity: 1;
+					border: 2rpx solid #b3a0da !important;
+				}
+			}
+		}
+	}
+}
+.options-popup{
+	position: absolute;
+	.op-content{
+		background-color: #ffffff;
+		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{
+				margin-top:20rpx;
+				display: grid;
+				grid-gap: 26rpx;
+				grid-template-columns: repeat(4,1fr);
+				
+				.u-tag-select{
+					box-shadow: 0 0 20rpx #a7b6b8;
+					background-color: rgba(236,245,255,1);
+					opacity: 1 !important;
+					image{
+						border: 2rpx solid #b3a0da !important;
+					}
+				}
+				
+				.section-cloth{
+					width: 150rpx;
+					height: 170rpx;
+					border-radius: 8rpx;
+					background-color: rgba(236,245,255,0.8);
+					position: relative;
+					display: flex;
+					align-items: center;
+					justify-content: center;
+					opacity: 0.7;
+					cursor: pointer;
+					
+					image{
+						width: 150rpx;
+						height: 170rpx;
+						border: 2rpx solid #a7b6b8;
+						border-radius: 8rpx;
+					}
+					
+					text{
+						position: absolute;
+						color: #fff;
+						margin-bottom: -100rpx;
+					}
+					
+					&:hover{
+						box-shadow: 0 0 20rpx #a7b6b8;
+						background-color: rgba(236,245,255,1);
+						opacity: 1 !important;
+						image{
+							border: 2rpx solid #b3a0da !important;
+						}
+					}
+				}
+			}
+		}
+	}
+	::v-deep .u-close{
+		cursor: pointer;
+		&:hover{
+			opacity: 0.8;
+		}
+		&:active{
+			opacity: 0.6;
+		}
+	}
+}
+</style>
\ No newline at end of file
diff --git a/pages/pc_web/workshops/workshops.vue b/pages/pc_web/workshops/workshops.vue
index ecc5fef..7570ebb 100644
--- a/pages/pc_web/workshops/workshops.vue
+++ b/pages/pc_web/workshops/workshops.vue
@@ -22,46 +22,71 @@
 				</view>
 				<!-- 服务中心 -->
 				<view class="control-center">
-					<!-- 文生图 -->
-					<view class="cc-edit" v-if="serviceItem.type===1">
-						<EditorBox :height="200" :icon="ip+editorIcon" title="提示词" 
-						v-model="serviceItem.text" placeholder="请输入描述的提示词(限制300词)~~" rightIcon="question-circle"
-						rightTip="使用教程" :rightIconClick="showTutorial" @strengthenTip="strengthenTip"/>
-					</view>
-					<!-- 生成艺术字 -->
-					<view class="cc-edit" v-if="serviceItem.type===3">
-						<u-section title="艺术字" color="#84878c" :right="false" lineColor="#c2ea04" fontSize="34" />
-						<u-input :customStyle="{color:'#333',fontSize:'50rpx',height:'100rpx'}" v-model="serviceItem.text"
-						placeholder="请输入需要生成的文字" trim inputAlign="center" :clearable="false" :maxlength="6" class="art-input"/>
-					</view>
-					<view class="cc-edit" v-if="serviceItem.type===3">
-						<EditorBox :height="200" :icon="ip+editorIcon" title="提示词" 
-						v-model="serviceItem.promt" placeholder="请输入描述的提示词(限制300词)~~" rightIcon="question-circle"
-						rightTip="使用教程" :rightIconClick="showTutorial" @strengthenTip="strengthenTip"/>
-					</view>
-					<view class="cc-edit" v-if="serviceItem.type===1">
-						<u-section title="尺寸选择" color="#84878c" :right="false" lineColor="#c2ea04" fontSize="34" />
-						<view class="dimensional-drawing">
-							<view class="dimensional-item" v-for="(item,index) in (serviceItem.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 class="control-center-scroll">
+						<!-- 文生图 -->
+						<view class="cc-edit" v-if="serviceItem.type===1">
+							<EditorBox :height="200" :icon="ip+editorIcon" title="提示词" 
+							v-model="serviceItem.text" placeholder="请输入描述的提示词(限制300词)~~" rightIcon="question-circle"
+							rightTip="使用教程" :rightIconClick="showTutorial" @strengthenTip="strengthenTip"/>
+						</view>
+						<!-- 生成艺术字 -->
+						<view class="cc-edit" v-if="serviceItem.type===3">
+							<u-section title="艺术字" color="#84878c" :right="false" lineColor="#c2ea04" fontSize="34" />
+							<u-input :customStyle="{color:'#333',fontSize:'50rpx',height:'100rpx'}" v-model="serviceItem.text"
+							placeholder="请输入需要生成的文字" trim inputAlign="center" :clearable="false" :maxlength="6" class="art-input"/>
+						</view>
+						<view class="cc-edit" v-if="serviceItem.type===3">
+							<EditorBox :height="200" :icon="ip+editorIcon" title="提示词" 
+							v-model="serviceItem.promt" placeholder="请输入描述的提示词(限制300词)~~" rightIcon="question-circle"
+							rightTip="使用教程" :rightIconClick="showTutorial" @strengthenTip="strengthenTip"/>
+						</view>
+						<view class="cc-edit" v-if="serviceItem.type===1">
+							<u-section title="尺寸选择" color="#84878c" :right="false" lineColor="#c2ea04" fontSize="34" />
+							<view class="dimensional-drawing">
+								<view class="dimensional-item" v-for="(item,index) in (serviceItem.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>
 						</view>
-					</view>
-					<!-- 选项生图 -->
-					<view class="cc-edit" v-if="serviceItem.type===2||serviceItem.type===3 || serviceItem.type === 1">
-						<u-section title="类型选择" color="#84878c" :right="serviceItem.options.length>8" lineColor="#c2ea04" fontSize="34" @click="showMoreOptions = true"
-						subTitle="更多" :subColor="selectElementIndex>=getOptions.length ? '#b3a0da' : '#84878c'"></u-section>
-						<view class="section-options">
-							<view class="section-tags" v-for="(item,index) in getOptions" :key="item.id" :title="item.optionName"
-							:class="selectElementIndex===index?'section-tags-select':''" @click="selectElement(index)">
-								<image :src="getTypeImage(item.path)"></image>
-								<text>{{ item.optionName }}</text>
+						<!-- 选项生图 -->
+						<view class="cc-edit" v-if="serviceItem.type===2||serviceItem.type===3 || serviceItem.type === 1">
+							<u-section title="类型选择" color="#84878c" :right="serviceItem.options.length>8" lineColor="#c2ea04" fontSize="34" @click="showMoreOptions = true"
+							subTitle="更多" :subColor="selectElementIndex>=getOptions.length ? '#b3a0da' : '#84878c'"></u-section>
+							<view class="section-options">
+								<view class="section-tags" v-for="(item,index) in getOptions" :key="item.id" :title="item.optionName"
+								:class="selectElementIndex===index?'section-tags-select':''" @click="selectElement(index)">
+									<image :src="getTypeImage(item.path)"></image>
+									<text>{{ item.optionName }}</text>
+								</view>
 							</view>
 						</view>
+						<!-- 换衣选择 -->
+						<view class="cc-edit" v-if="serviceItem.type===4">
+							<DressSelect ref="dressRef" @previewMannequin="previewMannequin" />
+						</view>
+						<view class="use-tips">Tips：<view class="uset-content">{{ serviceItem.tips || '智能创作~' }}</view></view>
 					</view>
-					<view class="use-tips">Tips：<view class="uset-content">{{ serviceItem.tips || '智能创作~' }}</view></view>
+					<!-- 更多类型 -->
+					<u-popup class="options-popup" v-model="showMoreOptions" mode="bottom" border-radius="30"
+					closeable close-icon="arrow-down" close-icon-color="#a7b6b8" :maskCustomStyle="{position: 'absolute'}">
+						<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 serviceItem.options" :key="item.id" :title="item.optionName"
+									:class="selectElementIndex===index?'section-tags-select':''" @click="selectElement(index)">
+										<image :src="getTypeImage(item.path)"></image>
+										<text>{{ item.optionName }}</text>
+									</view>
+								</view>
+							</scroll-view>
+						</view>
+					</u-popup>
 				</view>
 				<!-- 服务底栏 -->
 				<view class="control-bottom">
@@ -134,9 +159,10 @@
 import configService from '@/common/config.service.js';
 import { ossUpload } from '@/common/ossutil/ossWebUpload.js';
 import EditorBox from './components/editor.vue';
+import DressSelect from './components/dress_select.vue';
 import { tools } from '@/utils/utils.js';
 export default {
-	components: { EditorBox },
+	components: { EditorBox, DressSelect },
 	props:{
 		sid: {
 			type: [Number,String],
@@ -252,6 +278,7 @@ export default {
 					if(!this.serviceId){
 						this.serviceId = this.serviceList[0]?.id;
 						this.serviceItem = this.serviceList[0];
+						this.serviceItem.type = Number(this.serviceItem.type);
 					}
 				}else{
 					this.$refs.uToast.show({type: 'error', title: '服务列表获取失败'});
@@ -275,8 +302,8 @@ export default {
 		async singleService(){
 			let res = await this.$api.singleServices(this.serviceId);
 			if(res.success){
-				res.data.type = Number(res.data.type);
 				this.serviceItem = res.data;
+				this.serviceItem.type = Number(this.serviceItem.type);
 			}else{
 				this.$refs.uToast.show({type:'error',title: "ai功能暂未开放!"});
 			}
@@ -302,6 +329,7 @@ export default {
 				this.realRedraw();
 				this.realChangeWork(item, index);
 			} else {
+				this.realRedraw();
 				this.realChangeWork(item, index);
 			}
 		},
@@ -393,13 +421,13 @@ export default {
 					return false;
 				}
 			}
-			// if(currentType === 4){
-			// 	const { bottomImageUrl, topImageUrl } = this.$refs.dressRef.form;
-			// 	if(topImageUrl===''){
-			// 		this.$refs.uToast.show({type:'error',title: "请选择更换上衣!"});
-			// 		return false;
-			// 	}
-			// }
+			if(currentType === 4){
+				const { bottomsUrl, coatUrl } = this.$refs.dressRef.form;
+				if(coatUrl===''){
+					this.$refs.uToast.show({type:'error',title: "请选择更换上衣!"});
+					return false;
+				}
+			}
 			
 			return true;
 		},
@@ -410,9 +438,8 @@ export default {
 				// 判断图片是否符合规范
 				if(!this.legalJudge()) return;
 				that.dotLoading = true;
-				// let mannequinIndex = that.form.type === 4 ? that.$refs.dressRef.form.mannequinIndex : '';
-				// if(that.uploadFile && (mannequinIndex === '' || mannequinIndex === -1)){
-				if(that.formData.fileList.length > 0){
+				let mannequinIndex = that.serviceItem.type === 4 ? that.$refs.dressRef.form.mannequinIndex : '';
+				if(mannequinIndex === '' && that.formData.fileList.length > 0){
 					// 上传图片
 					ossUpload(that,that.formData.uploadFile,(path)=>{
 						if(!path) return;
@@ -501,22 +528,26 @@ export default {
 						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;
+				case 4 :
+					const { bottomsUrl, coatUrl } = this.$refs.dressRef.form;
+					result = {
+						serviceId: id,
+						bottomImageUrl: bottomsUrl,
+						topImageUrl: coatUrl,
+						imageUrl: that.formData.uploadFile,
+					};
+					if(bottomsUrl === '') delete result.bottomImageUrl;
+					else result.bottomImageUrl = that.getImagePath(bottomsUrl);
+					if(coatUrl === '') delete result.topImageUrl;
+					else result.topImageUrl = that.getImagePath(coatUrl);
+					break;
 			}
 			return result;
 		},
+		// 获取图片格式化路径
+		getImagePath(path){
+			return path?.includes('://') ? path : encodeURI(this.ip+path);
+		},
 		// 设置进度条——最多15秒
 		startDealPercent(){
 			let that = this;
@@ -579,6 +610,9 @@ export default {
 			this.$refs.uploadCover.clearFiles();
 			this.formData.fileList = [];
 			this.formData.uploadFile = '';
+			// 试衣换衣服务删除图片，需要取消模特选择，进行联调
+			if(this.serviceItem.type === 4)
+				this.$refs.dressRef.form.mannequinIndex = '';
 			setTimeout(()=>{
 				this.uploadDisabled = false;
 			},400);
@@ -611,9 +645,10 @@ export default {
 			this.formData.uploadFile = '';
 			delete this.serviceItem.text;
 			delete this.serviceItem.promt;
+			this.showMoreOptions = false;
 			this.selectElementIndex = '';
 			this.selectSizeIndex = '';
-			// if(this.form.type === 4) this.$refs.dressRef.resetForm();
+			if(this.serviceItem.type === 4) this.$refs.dressRef.resetForm();
 			this.errorTips = '';
 			this.asyncPollTime = -1;
 			setTimeout(()=>{this.dealPercent = 100;});
@@ -624,6 +659,18 @@ export default {
 				this.setResultFile();
 			}
 		},
+		// ai试衣模特预选
+		previewMannequin(model){
+			this.formData.uploadFile = model;
+			if(model === ''){
+				this.formData.fileList = [];
+				this.uploadDisabled = false;
+			}else{
+				if(this.formData.fileList[0]) this.formData.fileList[0].url = model;
+				else this.formData.fileList = [{url: model}];
+				this.uploadDisabled = true;
+			}
+		},
 		// 元素选择
 		selectElement(index){
 			this.selectElementIndex = this.selectElementIndex === index ? '' : index;
@@ -718,61 +765,77 @@ export default {
 			}
 			.control-center{
 				flex: 1;
-				overflow-y: scroll;
+				overflow-y: hidden;
 				background-color: rgba(248,248,248,0.7);
-				padding: 40rpx;
 				display: flex;
 				flex-direction: column;
 				position: relative;
-				.cc-edit{
-					margin-bottom: 40rpx;
-					.art-input{
-						margin: 20rpx 0 10rpx;
-						border-radius: 20rpx;
-						box-shadow: 0 0 10rpx #d0d6dd;
-						border: 2rpx solid #858585;
-					}
-					.dimensional-drawing{
-						width: 710rpx;
-						height: 180rpx;
-						margin-top: 20rpx;
-						margin-bottom: 30rpx;
-						display: flex;
-						padding: 0 10rpx 0 0;
-						overflow-x: scroll;
-						.dimensional-item{
-							min-width: 160rpx;
-							height: 100%;
-							padding: 0 0 18rpx;
-							background-color: #eff0f4;
+				.control-center-scroll{
+					overflow-y: scroll;
+					padding: 40rpx;
+					.cc-edit{
+						margin-bottom: 40rpx;
+						.art-input{
+							margin: 20rpx 0 10rpx;
 							border-radius: 20rpx;
-							display: flex;
-							flex-direction: column;
-							align-items: center;
-							justify-content: flex-end;
-							color: #b3a0da;
-							margin-right: 30rpx;
-							cursor: pointer;
-							
-							&:nth-last-child(1){
-								margin-right: 0;
-							}
-							
-							text{
-								width: 100%;
-								text-align: center;
-								margin-top: 20rpx;
-							}
-							
-							view{
-								opacity: 0.7;
-								border-radius: 10rpx;
-								width: 54rpx;
-								border: 6rpx solid #aea4ee;
-								aspect-ratio: 1/1;
-							}
-							
+							box-shadow: 0 0 10rpx #d0d6dd;
+							border: 2rpx solid #bcc1c8;
 							&:hover{
+								box-shadow: 0 0 10rpx #b4b9bf;
+							}
+						}
+						.dimensional-drawing{
+							width: 710rpx;
+							height: 180rpx;
+							margin-top: 20rpx;
+							margin-bottom: 30rpx;
+							display: flex;
+							padding: 0 10rpx 0 0;
+							overflow-x: scroll;
+							.dimensional-item{
+								min-width: 160rpx;
+								height: 100%;
+								padding: 0 0 18rpx;
+								background-color: #eff0f4;
+								border-radius: 20rpx;
+								display: flex;
+								flex-direction: column;
+								align-items: center;
+								justify-content: flex-end;
+								color: #b3a0da;
+								margin-right: 30rpx;
+								cursor: pointer;
+								
+								&:nth-last-child(1){
+									margin-right: 0;
+								}
+								
+								text{
+									width: 100%;
+									text-align: center;
+									margin-top: 20rpx;
+								}
+								
+								view{
+									opacity: 0.7;
+									border-radius: 10rpx;
+									width: 54rpx;
+									border: 6rpx solid #aea4ee;
+									aspect-ratio: 1/1;
+								}
+								
+								&:hover{
+									border: 2rpx solid #b3a0da;
+									view{
+										opacity: 1;
+										box-shadow: 0 0 8rpx #aea4ee;
+									}
+									text{
+										text-shadow: 0 0 2rpx #aea4ee;
+									}
+								}
+							}
+							.dimensional-item-select{
 								border: 2rpx solid #b3a0da;
 								view{
 									opacity: 1;
@@ -783,68 +846,153 @@ export default {
 								}
 							}
 						}
-						.dimensional-item-select{
-							border: 2rpx solid #b3a0da;
-							view{
-								opacity: 1;
-								box-shadow: 0 0 8rpx #aea4ee;
-							}
-							text{
-								text-shadow: 0 0 2rpx #aea4ee;
-							}
-						}
-					}
-					.section-options{
-						// margin-top: 40rpx;
-						display: grid;
-						grid-gap: 26rpx;
-						grid-template-columns: repeat(4,1fr);
-						margin-top: 20rpx;
-						margin-bottom: 30rpx;
-						
-						.section-tags{
-							height: 200rpx;
-							width: 150rpx;
-							background-color: #ebecef;
-							border-radius: 20rpx;
-							display: flex;
-							flex-direction: column;
-							align-items: center;
-							justify-content: space-evenly;
-							color: #b3a0da;
-							cursor: pointer;
+						.section-options{
+							// margin-top: 40rpx;
+							display: grid;
+							grid-gap: 26rpx;
+							grid-template-columns: repeat(4,1fr);
+							margin-top: 20rpx;
+							margin-bottom: 30rpx;
 							
-							text{
-								width: 90%;
-								text-align: center;
-								text-overflow: ellipsis;
-								white-space: nowrap;
-								overflow: hidden;
-							}
-							
-							image{
-								opacity: 0.7;
+							.section-tags{
+								height: 200rpx;
+								width: 150rpx;
+								background-color: #ebecef;
 								border-radius: 20rpx;
-								width: 130rpx;
-								height: 130rpx;
+								display: flex;
+								flex-direction: column;
+								align-items: center;
+								justify-content: space-evenly;
+								color: #b3a0da;
+								cursor: pointer;
+								
+								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;
+								}
+								
+								&:hover{
+									border: 2rpx solid #b3a0da;
+									image{
+										opacity: 1;
+									}
+								}
 							}
 							
-							&:hover{
+							.section-tags-select{
 								border: 2rpx solid #b3a0da;
 								image{
 									opacity: 1;
 								}
 							}
 						}
-						
-						.section-tags-select{
-							border: 2rpx solid #b3a0da;
-							image{
-								opacity: 1;
+						::v-deep .u-section__right-info{
+							cursor: pointer;
+							&:hover{
+								opacity: 0.8;
+							}
+							&:active{
+								opacity: 0.6;
 							}
 						}
 					}
-					::v-deep .u-section__right-info{
+					.use-tips{
+						width: 100%;
+						border-radius: 20rpx;
+						font-size: 30rpx;
+						color: #101010;
+						background-color: #eff0f4;
+						padding: 30rpx;
+						font-weight: bold;
+						transition: 0.3s;
+						.uset-content{
+							color: #6b6b6b;
+							font-weight: normal;
+							margin-top: 20rpx;
+							padding-left: 20rpx;
+						}
+						&:hover{
+							box-shadow: 0 0 10rpx #b3b4b6;
+						}
+					}
+				}
+				.options-popup{
+					position: absolute;
+					.op-content{
+						background-color: #ffffff;
+						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: #ebecef;
+									border-radius: 20rpx;
+									display: flex;
+									flex-direction: column;
+									align-items: center;
+									justify-content: space-evenly;
+									color: #b3a0da;
+									cursor: pointer;
+									
+									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;
+									}
+									
+									&:hover{
+										border: 2rpx solid #b3a0da;
+										image{
+											opacity: 1;
+										}
+									}
+								}
+								
+								.section-tags-select{
+									border: 2rpx solid #b3a0da;
+									image{
+										opacity: 1;
+									}
+								}
+							}
+						}
+					}
+					::v-deep .u-close{
 						cursor: pointer;
 						&:hover{
 							opacity: 0.8;
@@ -854,27 +1002,9 @@ export default {
 						}
 					}
 				}
-				.use-tips{
-					margin: -10rpx;
-					border-radius: 20rpx;
-					font-size: 30rpx;
-					color: #101010;
-					background-color: #eff0f4;
-					padding: 30rpx;
-					font-weight: bold;
-					transition: 0.3s;
-					.uset-content{
-						color: #6b6b6b;
-						font-weight: normal;
-						margin-top: 20rpx;
-						padding-left: 20rpx;
-					}
-					&:hover{
-						box-shadow: 0 0 10rpx #b3b4b6;
-					}
-				}
 			}
 			.control-bottom{
+				min-height: 140rpx;
 				height: 140rpx;
 				border-top: 2rpx solid #d5d5d5;
 				display: flex;