适配小程序（一版——存遗留问题）

pages/mobile_web/home/home.vue

@@ -50,8 +50,14 @@
 						</swiper-item>
 					</swiper>
 					<view class="dots">
+						<!-- #ifdef MP -->
+						<view v-for="item in swiperFunctionList.length" :key="item"
+							:class="{ active: item+1 === currentPageindex }"></view>
+						<!-- #endif -->
+						<!-- #ifndef MP -->
 						<view v-for="item in swiperFunctionList.length" :key="item"
 							:class="{ active: item === currentPageindex }"></view>
+						<!-- #endif -->
 					</view>
 				</view>
 				<!-- 推荐作品 -->
@@ -61,17 +67,17 @@
 						<view class="tfc-right">
 							筛选
 							<view class="tfcr-btn" @click="showSift = true">
-								<u-icon :label="siftLabel||'暂无'" :name="fileUrl+select" color="#d4ff00" 
+								<u-icon class="tfcr-sift" :label="siftLabel||'暂无'" :name="fileUrl+select" color="#d4ff00" 
 								size="17" label-pos="left" label-color="#d4ff00"></u-icon>
 							</view>
 						</view>
 					</view>
 					<u-waterfall class="show-work" v-model="workList" ref="uWaterfall">
 						<template v-slot:left="{leftList}">
-							<view @click="maskTouchend(item)" class="work-item" v-for="(item,index) in leftList" :key="item.id">
+							<view @click="maskTouchend(item)" class="work-item work-item-odd" v-for="(item,index) in leftList" :key="item.id">
-								<view :class="item.display?'ribbon-fadeOutUp':''" class="collect-ribbon" v-show="item.collect">收藏</view>
+								<view :class="item.display?'ribbon-fadeOutUp':''" class="collect-ribbon" v-if="item.collect">收藏</view>
 								<u-lazy-load border-radius="30" class="work-picture"
-								:image="getWorkPath(item.path)"></u-lazy-load>
+								:image="item.path"></u-lazy-load>
 								<!-- <image class="work-picture" :src="item.picture" mode="widthFix"></image> -->
 								<view class="sign-text">{{ item.serviceName || '暂无' }}</view>
 								<image :lazy-load="true" class="sign" :src="fileUrl+sign"></image>
@@ -79,14 +85,14 @@
 									<image :src="fileUrl+magicWand"></image>
 									<text>做同款</text>
 								</view>
-								<image v-if="item.sourcePath" class="compare-sign" mode="widthFix" :src="getWorkPath(item.sourcePath)"></image>
+								<image v-if="item.sourcePath" class="compare-sign" mode="widthFix" :src="item.sourcePath"></image>
 							</view>
 						</template>
 						<template v-slot:right="{rightList}">
-							<view @click="maskTouchend(item)" class="work-item" v-for="(item,index) in rightList" :key="item.id">
+							<view @click="maskTouchend(item)" class="work-item work-item-even" v-for="(item,index) in rightList" :key="item.id">
-								<view :class="item.display?'ribbon-fadeOutUp':''" class="collect-ribbon" v-show="item.collect">收藏</view>
+								<view :class="item.display?'ribbon-fadeOutUp':''" class="collect-ribbon" v-if="item.collect">收藏</view>
 								<u-lazy-load border-radius="30" class="work-picture"
-								:image="getWorkPath(item.path)"></u-lazy-load>
+								:image="item.path"></u-lazy-load>
 								<!-- <image class="work-picture" :src="item.picture" mode="widthFix"></image> -->
 								<view class="sign-text">{{ item.serviceName || '暂无' }}</view>
 								<image :lazy-load="true" class="sign" :src="fileUrl+sign"></image>
@@ -94,7 +100,7 @@
 									<image :src="fileUrl+magicWand"></image>
 									<text>做同款</text>
 								</view>
-								<image v-if="item.sourcePath" class="compare-sign" mode="widthFix" :src="getWorkPath(item.sourcePath)"></image>
+								<image v-if="item.sourcePath" class="compare-sign" mode="widthFix" :src="item.sourcePath"></image>
 							</view>
 						</template>
 					</u-waterfall>
@@ -117,6 +123,11 @@
 import configService from '@/common/config.service.js';
 import { tools } from '@/utils/utils.js';
 export default {
+	// #ifdef MP
+	options: {
+		styleIsolation: 'shared'
+	},
+	// #endif
 	props: {
 		topLevel:{
 			type: Number,
@@ -238,19 +249,28 @@ export default {
 		},
 		// 获取推荐作品列表
 		async getWorkList(){
+			let that = this;
 			if(this.recommendForm.isFinish) return;
 			let res = await this.$api.getRecommend(this.recommendForm);
 			if(res?.success){
 				const { records, total, current, size } = res.data;
 				const result = records;
 				if(current === 1){
-					this.workList = result
+					this.workList = result.map((item)=>{
+						let nowResult = {...item,path: that.getWorkPath(item.path)};
+						if(nowResult.sourcePath) nowResult.sourcePath = that.getWorkPath(item.sourcePath);
+						return nowResult;
+					});
 				}else{
-					this.workList.push(...result);
+					this.workList.push(...result.map((item)=>{
+						let nowResult = {...item,path: that.getWorkPath(item.path)};
+						if(nowResult.sourcePath) nowResult.sourcePath = that.getWorkPath(item.sourcePath);
+						return nowResult;
+					}));
 				}
 				this.recommendForm.total = total;
 				this.recommendForm.isFinish = current*size >= total;
-				this.$forceUpdate();
+				// this.$refs.uWaterfall.$forceUpdate();
 			}else{
 				this.$refs.uToast.show({type:'error',title: "推荐作品获取失败!"});
 			}
@@ -508,7 +528,7 @@ export default {
 							border: 2rpx solid #d5ff00;
 							border-radius: 25rpx;
 							background-color: #1a1929;
-							.u-icon{
+							.tfcr-sift{
 								margin: 16rpx 15rpx;
 							}
 						}
@@ -523,6 +543,7 @@ export default {
 					column-gap: 1em;
 					-moz-column-gap: 1em;
 					-webkit-column-gap: 1em; 
+					// #ifndef MP
 					.work-item{
 						-webkit-column-break-inside: avoid;
 						break-inside: avoid; /*防止断点*/
@@ -641,6 +662,7 @@ export default {
 						    }
 						}
 					}
+					// #endif
 				}
 				.last-tip{
 					color: #d5ff00;
@@ -693,4 +715,140 @@ export default {
 	width: 80rpx !important;
 	height: 74rpx !important;
 }
+// #ifdef MP
+.show-work{
+	margin-top: 13rpx;
+	width: 100%;
+	// column-count:2;
+	// -moz-column-count:2; /* Firefox */
+	// -webkit-column-count:2; /* Safari 和 Chrome */
+	column-gap: 1em;
+	-moz-column-gap: 1em;
+	-webkit-column-gap: 1em; 
+}
+.work-item-odd{
+	margin-right: 0.5em;
+}
+.work-item-even{
+	margin-left: 0.5em;
+}
+.work-item{
+	-webkit-column-break-inside: avoid;
+	break-inside: avoid; /*防止断点*/
+	margin-bottom: 1em;
+	position: relative;
+	padding-top: 13rpx;	
+	.work-picture{
+		// border: 0.1em solid #d5ff00;
+		border-radius: 30rpx;
+		// 骗系统开启硬件加速
+		transform: transition3d(0, 0, 0);
+		// 防止图片加载“闪一下”
+		will-change: transform;
+	}	
+	.sign{
+		border: none;
+		border-radius: 0;
+		position: absolute;
+		top: 0.8em;
+		left: 0.6em;
+		width: 170rpx;
+		height: 47rpx;
+	}
+	.sign-text{
+		width: 140rpx;
+		text-overflow: ellipsis;
+		overflow: hidden;
+		white-space: nowrap;
+		color: #ffffff;
+		font-size: 28rpx;
+		position: absolute;
+		top: 0.85em;
+		left: 0.9em;
+		z-index: 1;
+	}	
+	.work-todo{
+		position: absolute;
+		bottom: 0.85em;
+		right: 0.7em;
+		z-index: 1;
+		border-radius: 12rpx;
+		padding: 14rpx 30rpx;
+		background-color: rgba(0, 0, 0, 0.3);
+		display: flex;
+		align-items: center;
+		text{
+			font-weight: bold;
+			background-image: linear-gradient(to right, #cdfbf2 0%, #a3d4ff 100%);
+			background-clip: text;
+			-webkit-background-clip: text;
+			-webkit-text-fill-color: transparent;
+		}
+		image{
+			margin-right: 10rpx;
+			width: 34rpx;
+			height: 34rpx;
+		}				
+		&:active{
+			opacity: 0.8;
+		}
+	}				
+	.compare-sign{
+		position: absolute;
+		left: 0;
+		bottom: 0.2em;
+		width: 120rpx;
+		height: 50%;
+		border: 0.1em solid #d5ff00;
+		border-radius: 20rpx;
+		box-shadow: 0 0 20rpx #eee;
+		// box-shadow: rgba(213, 255, 0, 0.3) 0px 4px 12px;
+	}				
+	.ribbon-fadeOutUp{
+		animation-name: fadeOutUp !important;
+	}
+	.collect-ribbon {
+	    position: absolute;
+		z-index: 2;
+	    margin-top: -13rpx;
+	    right: 30rpx;
+	    width: 62rpx;
+	    padding: 20rpx 14rpx 0;
+	    box-sizing: border-box;
+	    text-align: center;
+	    background: #ff9900;
+		font-size: 25rpx;
+		color: #fff;
+		animation-name: bounceInDown;
+		animation-duration: 0.5s;
+		animation-fill-mode: both;
+		
+	    &::before,
+	    &::after {
+	        content: '';
+	        position: absolute;
+	    }
+	
+	    &::before {
+	        top: 0;
+	        left: -10rpx;
+	        height: 0;
+	        width: 0;
+	        border-bottom: 14rpx solid #ff9900;
+	        border-left: 12rpx solid transparent;
+	        opacity: .8;
+	    }
+	
+	    &::after {
+	        height: 0;
+	        width: 0;
+	        left: 0;
+	        bottom: -39rpx;
+	        border-left: 31rpx solid #ff9900;
+	        border-right: 32rpx solid #ff9900;
+	        border-bottom: 43rpx solid transparent;
+	    }
+	}		
+}	
+// #endif
 </style>

pages/mobile_web/my/child_pages/contact.vue

@@ -45,7 +45,12 @@
 							</view>
 						</view>
 						<view class="dcf-btn">
+							<!-- #ifndef MP -->
 							<u-button ripple :hairLine="false" class="messageSubmit" form-type="submit">提交</u-button>
+							<!-- #endif -->
+							<!-- #ifdef MP -->
+							<u-button ripple :hairLine="false" class="messageSubmit" form-type="submit" @click="submit">提交</u-button>
+							<!-- #endif -->
 						</view>
 					</view>
 				</form>
@@ -59,6 +64,11 @@
 <script>
 import configService from '@/common/config.service.js';
 export default {
+	// #ifdef MP
+	options: {
+		styleIsolation: 'shared'
+	},
+	// #endif
 	data() {
 		return {
 			// #ifdef MP
@@ -135,8 +145,7 @@ export default {
 					this.$refs.uToast.show({type:'warning',title: "请输入留言内容!"});
 					return;
 				}
-				
+				let res = await this.$api.addMessage(this.form);
-				let res = await this.$api.addMessage(e.detail.value);
 				if(res.success){
 					this.$refs.uToast.show({type:'success',title: "提交成功!"});
 					this.clear();
@@ -321,6 +330,16 @@ export default {
 	align-items: center;
 	justify-content: center;
 	font-size: 35rpx;
+	// #ifdef MP
+	/deep/.u-btn--default{
+		background-color: #ffffff00;
+		border: none;
+		color: #fff;
+		width: 100%;
+		height: 100rpx;
+		border-radius: 56rpx;
+	}
+	// #endif
 	&::after{
 		display: none;
 	}
@@ -328,6 +347,11 @@ export default {
 	    background-position: right center;
 	    color: #f8f9fb;
 	    text-decoration: none;
+		// #ifdef MP
+		/deep/.u-btn--default{
+			color: #f8f9fb;
+		}
+		// #endif
 	}
 }
 .type-icon{

pages/mobile_web/my/child_pages/setting.vue

@@ -87,6 +87,11 @@
 <script>
 import configService from '@/common/config.service.js';
 export default {
+	// #ifdef MP
+	options: {
+		styleIsolation: 'shared'
+	},
+	// #endif
 	data() {
 		return {
 			// #ifdef MP
@@ -436,6 +441,16 @@ export default {
 	border: none;
 	color: #e53636;
 	background-color: #F8F9FB;
+	// #ifdef MP
+	/deep/.u-btn--default{
+		background-color: #ffffff00;
+		border: none;
+		color: #e53636;
+		width: 100%;
+		height: 100rpx;
+		border-radius: 56rpx;
+	}
+	// #endif
 }
 .type-icon{
 	z-index:90;

pages/mobile_web/my/my.vue

@@ -79,6 +79,11 @@
 <script>
 import configService from '@/common/config.service.js';
 export default {
+	// #ifdef MP
+	options: {
+		styleIsolation: 'shared'
+	},
+	// #endif
 	props: {
 		topLevel:{
 			type: Number,

pages/mobile_web/recharge/detail.vue

@@ -96,9 +96,13 @@
 </template>
 
 <script>
-import { onLoad } from '../../../uview-ui/libs/mixin/mixin';
 import configService from '@/common/config.service.js';
 export default {
+	// #ifdef MP
+	options: {
+		styleIsolation: 'shared'
+	},
+	// #endif
 	data(){
 		return{
 			// #ifdef MP
@@ -333,7 +337,7 @@ export default {
 	display: flex;
 	flex-direction: column;
 	min-height: 100vh;
-	background-color: #f9f9f9;
+	background: linear-gradient(to bottom, #53a8ed 0%, #f9f9f9 30%, #f9f9f9 100%);
 	// #ifdef APP || MP
 	.app-top{
 		width: 100%;
@@ -457,7 +461,7 @@ export default {
 					display: grid;
 					grid-gap: 26rpx;
 					grid-template-columns: repeat(3,1fr);
-					.u-tag{
+					/deep/.u-tag{
 						// width: 200rpx;
 						height: 74rpx;
 						font-size: 28rpx;
@@ -472,9 +476,18 @@ export default {
 						}
 					}
 					.u-tag-select{
+						// #ifndef MP
 						box-shadow: 0 0 15rpx #eee;
 						color: #2979ff;
 						background-color: rgba(236,245,255,0.8);
+						// #endif
+						// #ifdef MP
+						/deep/.u-tag{
+							box-shadow: 0 0 15rpx #eee;
+							color: #2979ff;
+							background-color: rgba(236,245,255,0.8);
+						}
+						// #endif
 					}
 				}
 			}

pages/mobile_web/work/work.vue

@@ -37,28 +37,28 @@
 		<view class="mw-content">
 			<u-waterfall class="show-work" v-model="current===0?workList:collectList" ref="uWaterfall">
 				<template v-slot:left="{leftList}">
-					<view @click="maskTouchend(item,index)" class="work-item" v-for="(item,index) in leftList" :key="item.id">
+					<view @click="maskTouchend(item,index)" class="work-item work-item-odd" v-for="(item,index) in leftList" :key="item.id">
 						<image class="trash" :class="item.display ? 'hideTrash' : ''" :src="fileUrl+trash" v-show="item.mask" @click.stop="deleteCollect(item,index)"></image>
 						<u-lazy-load border-radius="30" class="work-picture"
-						:image="getImagePath(item.path)"></u-lazy-load>
+						:image="item.path"></u-lazy-load>
 						<view class="sign-text">{{ item.type || '暂无' }}</view>
 						<image :lazy-load="true" class="sign" :src="fileUrl+sign"></image>
 						<!-- <image class="compare-sign" mode="widthFix" :src="item.compare"></image> -->
-						<view class="item-mask" :class="item.display ? 'hideMask' : ''" v-show="item.mask" v-if="!current">
+						<view class="item-mask" :class="item.display ? 'hideMask' : ''" v-if="!current&&item.mask">
 							<button class="mask-public" @click.stop="publicWork(item,index)">发布</button>
 							<button class="mask-collect" @click.stop="toCollect(item,index)">收藏</button>
 						</view>
 					</view>
 				</template>
 				<template v-slot:right="{rightList}">
-					<view @click="maskTouchend(item,index)" class="work-item" v-for="(item,index) in rightList" :key="item.id">
+					<view @click="maskTouchend(item,index)" class="work-item work-item-even" v-for="(item,index) in rightList" :key="item.id">
 						<image class="trash" :class="item.display ? 'hideTrash' : ''" :src="fileUrl+trash" v-show="item.mask" @click.stop="deleteCollect(item,index)"></image>
 						<u-lazy-load border-radius="30" class="work-picture"
-						:image="getImagePath(item.path)"></u-lazy-load>
+						:image="item.path"></u-lazy-load>
 						<view class="sign-text">{{ item.type || '暂无' }}</view>
 						<image :lazy-load="true" class="sign" :src="fileUrl+sign"></image>
 						<!-- <image class="compare-sign" mode="widthFix" :src="item.compare"></image> -->
-						<view class="item-mask" :class="item.display ? 'hideMask' : ''" v-show="item.mask" v-if="!current">
+						<view class="item-mask" :class="item.display ? 'hideMask' : ''" v-if="!current&&item.mask">
 							<button class="mask-public" @click.stop="publicWork(item,index)">发布</button>
 							<button class="mask-collect" @click.stop="toCollect(item,index)">收藏</button>
 						</view>
@@ -181,15 +181,20 @@ export default {
 		},
 		// 获取我的创作
 		async getMyWorks(){
+			let that = this;
 			if(this.workForm.isFinish) return;
 			let res = await this.$api.myCreations(this.workForm);
 			if(res.success){
 				const { records, total, current, size } = res.data;
 				const result = records;
 				if(current === 1){
-					this.workList = result
+					this.workList = result.map((item)=>{
+						return {...item,path: that.getImagePath(item.path),display:0,mask:0};
+					});
 				}else{
-					this.workList.push(...result);
+					this.workList.push(...result.map((item)=>{
+						return {...item,path: that.getImagePath(item.path),display:0,mask:0};
+					}));
 				}
 				this.workForm.total = total;
 				this.workForm.isFinish = current*size >= total;
@@ -200,15 +205,20 @@ export default {
 		},
 		// 获取我的藏品
 		async getCollections(){
+			let that = this;
 			if(this.collectForm.isFinish) return;
 			let res = await this.$api.getCollections(this.collectForm);
 			if(res.success){
 				const { records, total, current, size } = res.data;
 				const result = records;
 				if(current === 1){
-					this.collectList = result
+					this.collectList = result.map((item)=>{
+						return {...item,path: that.getImagePath(item.path)};
+					});
 				}else{
-					this.collectList.push(...result);
+					this.collectList.push(...result.map((item)=>{
+						return {...item,path: that.getImagePath(item.path)};
+					}));
 				}
 				this.collectForm.total = total;
 				this.collectForm.isFinish = current*size >= total;
@@ -449,6 +459,7 @@ export default {
 			column-gap: 1em;
 			-moz-column-gap: 1em;
 			-webkit-column-gap: 1em; 
+			// #ifndef MP
 			.work-item{
 				-webkit-column-break-inside: avoid;
 				break-inside: avoid; /*防止断点*/
@@ -552,6 +563,7 @@ export default {
 					}
 				}
 			}
+			// #endif
 		}
 		.last-tip{
 			color: #d5ff00;
@@ -620,4 +632,117 @@ export default {
         opacity: 0;
     }
 }
+// #ifdef MP
+.work-item-odd{
+	margin-right: 0.5em;
+	margin-left: 1em;
+}
+.work-item-even{
+	margin-left: 0.5em;
+	margin-right: 1em;
+}
+.work-item{
+	-webkit-column-break-inside: avoid;
+	break-inside: avoid; /*防止断点*/
+	// margin-bottom: 0.5em;
+	position: relative;
+	padding-top: 30rpx;		
+	.work-picture{
+		// border: 0.1em solid #d5ff00;
+		border-radius: 30rpx;
+		// 骗系统开启硬件加速
+		transform: transition3d(0, 0, 0);
+		// 防止图片加载“闪一下”
+		will-change: transform;
+	}			
+	.sign{
+		border: none;
+		border-radius: 0;
+		position: absolute;
+		top: 1.7em;
+		left: 0.6em;
+		width: 152rpx;
+		height: 47rpx;
+		z-index: 1;
+	}
+	.sign-text{
+		width: 132rpx;
+		text-overflow: ellipsis;
+		overflow: hidden;
+		white-space: nowrap;
+		color: #ffffff;
+		font-size: 28rpx;
+		position: absolute;
+		top: 1.8em;
+		left: 0.9em;
+		z-index: 2;
+	}
+	.trash{
+		animation-duration: 0.8s;
+		animation-fill-mode: both;
+		backface-visibility: visible !important;
+		animation-name: showTrash;
+		width: 100rpx;
+		height: 110rpx;
+		position: absolute;
+		right: -22rpx;
+		margin-top: -30rpx;
+		z-index: 1;
+	}
+	.hideTrash {
+		animation-duration: calc(1s * 0.75);
+		backface-visibility: visible !important;
+		animation-name: hideTrash;
+	}
+	.compare-sign{
+		position: absolute;
+		left: 0;
+		bottom: 0.2em;
+		width: 120rpx;
+		border: 0.1em solid #d5ff00;
+		border-radius: 20rpx;
+		box-shadow: rgba(213, 255, 0, 0.3) 0px 4px 12px;
+	}
+	.hideMask {
+	    animation-duration: calc(1s * 0.75);
+	    animation-fill-mode: both;
+	    animation-name: hideMask !important;
+	}
+	.item-mask{
+		position: absolute;
+		top: 0;
+		margin-top: 30rpx;
+		// left: 0.1rpx;
+		width: 100%;
+		height: calc(100% - 30rpx);
+		display: flex;
+		flex-wrap: wrap;
+		flex-direction: column;
+		align-items: center;
+		justify-content: center;
+		background-color: rgba(0, 0, 0, 0.6);
+		border-radius: 30rpx;
+		animation-duration: 0.8s;
+		animation-name: showMask;
+		button{
+			border-radius: 56rpx;
+			min-width: 145rpx;
+			max-width: 185rpx;
+			height: 60rpx;
+			display: flex;
+			align-items: center;
+			justify-content: center;
+			font-size: 25rpx;
+			color: #f9f9f9;
+			margin: 10% 0;
+		}
+		.mask-public{
+			background: linear-gradient(to right,#853ade 0%, #d450da 100%);
+		}
+		.mask-collect{
+			background: linear-gradient(to right,rgba(65, 222, 70, 0.8) 0%, rgba(191, 218, 133, 0.8) 100%);
+		}
+	}			
+}
+// #endif
 </style>

pages/mobile_web/workshops/components/dress_select.vue

@@ -1,6 +1,6 @@
 <template>
 	<view class="dress-select">
-		<view class="mw-editor" v-show="list[4]&&list[4].length>0">
+		<view class="mw-editor" v-if="list[4]&&list[4].length>0">
 			<!-- <u-section title="选择模特" :right="false" color="#fff" lineColor="#c2ea04" fontSize="40"></u-section> -->
 			<view class="mw-tips">
 				<u-icon :name="fileUrl+mannequin" size="30" color="#c2ea04" label="选择模特"
@@ -11,7 +11,7 @@
 				</view>
 			</view>
 			<!-- 预设模特 -->
-			<scroll-view scroll-x class="ds-mannequin" v-show="selectOptions[0]">
+			<scroll-view scroll-x class="ds-mannequin" v-if="selectOptions[0]">
 				<view class="mannequin-list">
 					<view class="mannequin-item" v-for="(item,index) in list[4]" :key="item.id"
 					@click="selectMannequin(index)" :class="mannequinJudge(index)?'mannequin-item-select':''">
@@ -20,7 +20,7 @@
 				</view>
 			</scroll-view>
 			<!-- 自定义模特 -->
-			<view class="ds-mannequin ds-auto" @click="uploadFile('mannequin')" v-show="!selectOptions[0]">
+			<view class="ds-mannequin ds-auto" @click="uploadFile('mannequin')" v-if="!selectOptions[0]">
 				<u-icon v-if="form.mannequin === ''" :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.mannequinIndex===-1?'dsa-upload-select':''">
@@ -40,15 +40,15 @@
 			<view class="mw-tips">
 				<u-icon :name="fileUrl+cloth" size="32" color="#c2ea04" label="选择上下衣服"
 				labelColor="#eee" margin-left="20rpx" labelSize="32rpx"></u-icon>
-				<view v-show="showRight" class="mwt-back">
+				<view v-if="showRight" class="mwt-back">
 					<u-icon @click="currentStep-=1" name="/static/back.png" size="32" color="#fff"></u-icon>	
 				</view>
-				<view v-show="!showRight" class="mwt-btn" @click="handleClickSelect(1,$event)">
+				<view v-if="!showRight" 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 v-if="selectOptions[1]">
 				<view class="section-options" v-if="currentStep !== 2">
 					<!-- <u-tag v-for="(item,index) in getOptions" :key="item.id" :index="index"
 					:text="item.optionName" @click="selectElement" :class="judge(index)?'u-tag-select':''"></u-tag> -->
@@ -72,7 +72,7 @@
 				</view>
 			</view>
 			<!-- 自定义服装 -->
-			<view class="cloth-upload" v-show="!selectOptions[1]">
+			<view class="cloth-upload" v-if="!selectOptions[1]">
 				<!-- 上装 -->
 				<view class="cu-item" @click="uploadFile('coat')">
 					<u-icon v-if="form.topImage === ''" :name="fileUrl+upload" size="30" color="#c2ea04" label="上传上装"

pages/mobile_web/workshops/components/editor.vue

@@ -17,10 +17,10 @@
 			type="textarea" :custom-style="{ height: height+'rpx', fontSize: '25rpx', overflowY: 'scroll',
 			color: '#fff'}" placeholderStyle="color:#7f7c86" @input="input"/>
 			<view class="strengthen-tips">
-				<u-icon :name="rightIcon" size="30" :label="rightTip" @click="rightIconClick"
+				<u-icon :name="rightIcon" size="30" :label="rightTip" @click="$emit('rightIconClick')"
 				margin-left="10rpx" label-color="#a19daa" color="#a19daa" />
 			</view>
-			<view class="we-loading" v-show="showLoading">
+			<view class="we-loading" v-if="showLoading">
 				<u-loading :show="showLoading" mode="flower" size="40"></u-loading>
 			</view>
 		</view>
@@ -30,6 +30,11 @@
 <script>
 import configService from '@/common/config.service.js';
 export default {
+	// #ifdef MP
+	options: {
+		styleIsolation: 'shared'
+	},
+	// #endif
 	props: {
 		value: {
 			type: [String, Number],
@@ -55,10 +60,6 @@ export default {
 			type: String,
 			default: ''
 		},
-		rightIconClick: {
-			type: Function,
-			default: ()=>{}
-		},
 		height: {
 			type: [String, Number],
 			default: '150'
@@ -107,7 +108,7 @@ export default {
 		.wet-left{
 			display: flex;
 			align-items: center;
-			.u-icon{
+			/deep/.u-icon{
 				margin-right: 24rpx;
 			}
 			.slot{
@@ -119,7 +120,7 @@ export default {
 		.wet-right{
 			color: #d5ff00;
 			margin-right: 5rpx;
-			.u-icon{
+			/deep/.u-icon{
 				font-size: 25rpx;
 			}
 		}

pages/mobile_web/workshops/index.vue

@@ -66,14 +66,14 @@
 					</template>
 				</EditorBox>
 			</view>
-			<view class="workshops-tip" v-show="(form.type !== 4 || (form.type === 4 && resultFile)) && (form.type !== 1 || (form.type === 1 && resultFile))">
+			<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-show="this.asyncPollTime === -1" :style="{color: errorTips?'#e0584b' : '#d5ff00'}">
+				<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-show="this.asyncPollTime !== -1">
+				<view class="tip-progress" v-if="asyncPollTime !== -1">
 					<text class="progress-title">进度</text> 
-					<u-line-progress :percent="dealPercent" :show-percent="false" inactive-color="#2d3240" round/>
+					<u-line-progress class="uline-progress" :percent="dealPercent" :show-percent="false" inactive-color="#2d3240" round/>
 					<text class="progress-deal">{{ dealPercent }}%</text>
 				</view>
 			</view>
@@ -82,7 +82,7 @@
 			<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"/>
+				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" />
@@ -101,7 +101,7 @@
 			<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"/>
+				rightTip="使用教程" @rightIconClick="showTutorial" @strengthenTip="strengthenTip"/>
 			</view>
 			
 			<!-- 选项生图 -->
@@ -192,6 +192,11 @@ 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
 	},
@@ -285,7 +290,7 @@ export default {
 			// 加载中随机图片
 			rangeImageList: [],
 			// 进度条
-			dealPercent: 0,
+			dealPercent: 20,
 			// 进度条计时器
 			dealPercentTimer: 1,
 			// 生成失败提示词
@@ -664,7 +669,7 @@ export default {
 			return path?.includes('://') ? path : encodeURI(this.ip+path);
 		},
 		// 判断是否在微信内置浏览器打开
-		// #ifndef APP
+		// #ifndef APP || MP
 		isMpWeb(){
 			if(navigator.userAgent.toLowerCase().match(/MicroMessenger/i) == 'micromessenger'){
 				this.$refs.uToast.show({type:'warning',title: "请在浏览器打开进行下载，或长按图片保存到相册!"});
@@ -678,7 +683,7 @@ export default {
 		async download(){
 			let that = this;
 			
-			// #ifndef APP
+			// #ifndef APP || MP
 			if(this.isMpWeb()) return;
 			// #endif
 
@@ -818,7 +823,7 @@ export default {
 		},
 		// 增强提示词
 		async strengthenTip({input, deal}){
-			if(input === ''){
+			if(input === null || input === ''){
 				this.$refs.uToast.show({type:'warning',title: "请提供部分词句!"});
 				deal();
 				return;
@@ -981,7 +986,7 @@ export default {
 				font-weight: bold;
 			}
 			.section-options{
-				margin-top: 40rpx;
+				// margin-top: 40rpx;
 				display: grid;
 				grid-gap: 26rpx;
 				grid-template-columns: repeat(4,1fr);
@@ -1040,9 +1045,12 @@ export default {
 					background-color: rgba(236,245,255,1);
 				}
 			}
+			/deep/.u-section{
+				margin-bottom: 40rpx;
+			}
 			.dimensional-drawing{
 				height: 180rpx;
-				margin-top: 40rpx;
+				// margin-top: 40rpx;
 				display: flex;
 				.dimensional-item{
 					min-width: 160rpx;
@@ -1119,6 +1127,11 @@ export default {
 					-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;
@@ -1149,7 +1162,9 @@ export default {
 		// 保存图片
 		.wbu-dbtn{
 			margin: 0 10rpx;
+			// #ifndef MP
 			padding: 50rpx 70rpx;
+			// #endif
 			border: none;
 			height: 100rpx;
 			color: rgba(42, 35, 61, 0.9);
@@ -1164,8 +1179,25 @@ export default {
 			    background-position: right center;
 			    color: #fff;
 			    text-decoration: none;
+				// #ifdef MP
+				/deep/.u-btn--default{
+					color: #fff;
 				}
-			.u-icon{
+				// #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;
 			}
 		}
@@ -1184,10 +1216,12 @@ export default {
 			.wbud-btn{
 				width: 100%;
 				height: 92rpx;
+				// #ifndef MP
 				padding: 0 70rpx;
+				// #endif
 				background: #1a1929;
 				border: none;
-				.u-icon{
+				/deep/.u-icon{
 					margin-right: 10rpx;
 				}
 				text{
@@ -1196,6 +1230,17 @@ export default {
 					-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{
@@ -1215,10 +1260,26 @@ export default {
 			    background-position: right center;
 			    color: #fff;
 			    text-decoration: none;
+				// #ifdef MP
+				/deep/.u-btn--default{
+					color: #fff;
 				}
-			.u-icon{
+				// #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;