调整工作台，作品墙完善收藏，首页移除双击收藏

common/http.api.js

@@ -29,6 +29,11 @@ const install = (Vue, vm) => {
 	// 推荐作品管理
 	vm.$api.getRecommend = async (params = {}) => await vm.$u.get('/paRecommend', params);// 首页推荐作品查询
 	
+	// 作品收藏管理
+	vm.$api.getCollections = async (params = {}) => await vm.$u.get('/paCollection', params);// 收藏作品查询
+	vm.$api.addCollections = async (params = {}) => await vm.$u.post('/paCollection', params);// 收藏作品
+	vm.$api.deleteCollections = async (id) => await vm.$u.delete(`/paCollection/${id}`);// 删除收藏作品
+	
 	// 图片管理
 	vm.$api.getCpPhotoById = async (params = {}) => await vm.$u.get('/cpPhoto/all', params);// 根据标签id查询全部图片
 	vm.$api.singlePhotoById = async (id) => await vm.$u.get(`/cpPhoto/${id}`);// 根据图片id查询单个图片

pages/mobile_web/home/home.vue

@@ -276,34 +276,38 @@ export default {
 		},
 		// 监听单双击，单击-预览图片、双击-收藏
 		maskTouchend(item){
-			this.touchNum ++;
+			// 暂时只能预览，不收藏
-			setTimeout(()=>{
-				if(this.touchNum == 1){
 			const array = [this.getWorkPath(item.path)];
 			if(item.sourcePath) array.push(this.getWorkPath(item.sourcePath));
 			tools.methods.lookImage(0,array);
-				}
+			// this.touchNum ++;
-				if(this.touchNum >= 2){
+			// setTimeout(()=>{
-					// 若collect为null，默认没收藏，那接下来就是收藏操作
+			// 	if(this.touchNum == 1){
-					const result = item.collect ? (item.collect+1)%2 : 1;
+			// 		const array = [this.getWorkPath(item.path)];
-					if(result === 0){
+			// 		if(item.sourcePath) array.push(this.getWorkPath(item.sourcePath));
-						// 添加淡出的class样式
+			// 		tools.methods.lookImage(0,array);
-						item.display = 1;
+			// 	}
-						this.$refs.uWaterfall.$forceUpdate();
+			// 	if(this.touchNum >= 2){
-						// 下面的操作应该替换为请求后端数据后，再停止动画
+			// 		// 若collect为null，默认没收藏，那接下来就是收藏操作
-						// 模拟操作，这里用setTimeout模拟  
+			// 		const result = item.collect ? (item.collect+1)%2 : 1;
-						setTimeout(() => {  
+			// 		if(result === 0){
-						    // 移除淡出类
+			// 			// 添加淡出的class样式
-							item.display = 0;
+			// 			item.display = 1;
-							item.collect = result;
+			// 			this.$refs.uWaterfall.$forceUpdate();
-						}, 1000); // 假设操作需要1秒  
+			// 			// 下面的操作应该替换为请求后端数据后，再停止动画
-					}else{
+			// 			// 模拟操作，这里用setTimeout模拟  
-						item.collect = result;
+			// 			setTimeout(() => {  
-						this.$refs.uWaterfall.$forceUpdate();
+			// 			    // 移除淡出类
-					}
+			// 				item.display = 0;
-				}
+			// 				item.collect = result;
-				this.touchNum = 0;
+			// 			}, 1000); // 假设操作需要1秒  
-			},250)
+			// 		}else{
+			// 			item.collect = result;
+			// 			this.$refs.uWaterfall.$forceUpdate();
+			// 		}
+			// 	}
+			// 	this.touchNum = 0;
+			// },250)
 		},
 		// 前往作品墙
 		toWall(){

pages/mobile_web/my/child_pages/recharge.vue

@@ -186,17 +186,9 @@
 			},
 			// 初始化
 			init(){
-				this.form = {size: 10,current: 1};
+				const { id } = JSON.parse(this.$store.state.user_message);
-				// let { createtime } = JSON.parse(this.$store.state.user_message);
+				if(!id) return;
-				// this.rechargeList = [{
+				this.form = {size: 10,current: 1,memberId: id};
-				// 	id: -1,
-				// 	type: '充值钻石',
-				// 	addOrSub: 'add',
-				// 	value: '1000',
-				// 	createtime: createtime,
-				// 	description: '新用户注册，赠送1000钻石。'
-				// }];
-				// this.total = 1;
 				this.getRechargeList();
 			},
 		}

pages/mobile_web/work/work.vue

@@ -38,27 +38,29 @@
 			<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">
+						<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>
 						<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">
+						<view class="item-mask" :class="item.display ? 'hideMask' : ''" v-show="item.mask" v-if="!current">
-							<button v-if="!current" class="mask-public" @click.stop="publicWork(item,index)">发布</button>
+							<button class="mask-public" @click.stop="publicWork(item,index)">发布</button>
-							<button class="mask-delete" @click.stop="deleteCollect(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">
+						<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>
 						<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">
+						<view class="item-mask" :class="item.display ? 'hideMask' : ''" v-show="item.mask" v-if="!current">
-							<button v-if="!current" class="mask-public" @click.stop="publicWork(item,index)">发布</button>
+							<button class="mask-public" @click.stop="publicWork(item,index)">发布</button>
-							<button class="mask-delete" @click.stop="deleteCollect(item,index)">删除</button>
+							<button class="mask-collect" @click.stop="toCollect(item,index)">收藏</button>
 						</view>
 					</view>
 				</template>
@@ -105,9 +107,9 @@ export default {
 			blackStar: 'work/black-star.png',
 			// 选择白底图片
 			selectBottom: 'work/select-bottom.png',
-			// 选择白底图片
+			// 选择红星
 			redStar: 'work/red-star.png',
-			// 选择白底图片
+			// 删除——垃圾桶
 			trash: 'work/trash.png',
 			// 当前选项
 			current: 0,
@@ -155,12 +157,16 @@ export default {
 	methods:{
 		// 初始化
 		async init(){
-			this.current === 0 ? this.workList = [] : this.collectList = [];
 			this.$refs.uWaterfall.clear();
-			this.workForm = {current: 1,size: 10,isFinish: false,total: 0};
+			if(this.current){
+				this.collectList = [];
 				this.collectForm = {current: 1,size: 10,isFinish: false,total: 0};
-			this.current === 0 ? this.getMyWorks() : this.getCollections();
+				this.getCollections();
-			// this.$api.getReleases();
+			}else{
+				this.workList = [];
+				this.workForm = {current: 1,size: 10,isFinish: false,total: 0};
+				this.getMyWorks();
+			}
 		},
 		// 查看更多
 		getMore(){
@@ -180,9 +186,6 @@ export default {
 			if(res.success){
 				const { records, total, current, size } = res.data;
 				const result = records;
-				// .map((item)=>{
-				// 	return {...item, path: item.path}
-				// });
 				if(current === 1){
 					this.workList = result
 				}else{
@@ -190,14 +193,29 @@ export default {
 				}
 				this.workForm.total = total;
 				this.workForm.isFinish = current*size >= total;
-				this.$forceUpdate();
+				// this.$forceUpdate();
 			}else{
 				this.$refs.uToast.show({type:'error',title: "我的创作获取失败!"});
 			}
 		},
 		// 获取我的藏品
-		getCollections(){
+		async getCollections(){
-			this.collectForm.isFinish = true;
+			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
+				}else{
+					this.collectList.push(...result);
+				}
+				this.collectForm.total = total;
+				this.collectForm.isFinish = current*size >= total;
+				// this.$forceUpdate();
+			}else{
+				this.$refs.uToast.show({type:'error',title: "我的藏品获取失败!"});
+			}
 		},
 		// 图片格式化
 		getImagePath(path){
@@ -207,9 +225,35 @@ export default {
 		},
 		// 切换选项
 		changeSelect(index){
-			this.$refs.uWaterfall.clear();
+			// this.$refs.uWaterfall.clear();
 			this.current = index;
 			this.startVal = index===0?this.collectForm.total:this.workForm.total;
+			this.init();
+		},
+		// 收藏作品
+		toCollect(item, index){
+			let that = this;
+			uni.showModal({
+				title: '提示',
+				content: `是否确认收藏该作品？`,
+				confirmColor: '#94d500',
+				success: async (res) => {
+					if (res.confirm) {
+						let res = await that.$api.addCollections({
+							creationId: item.id,
+						});
+						if(res?.success){
+							// 关掉蒙层
+							item.mask = 0;
+							item.display = 0;
+							that.$refs.uWaterfall.$forceUpdate();
+							that.$refs.uToast.show({type:'success',title: '作品收藏成功！'});
+						}else{
+							that.$refs.uToast.show({type:'error',title: res?.data || '作品收藏失败！'});
+						}
+					}
+				}
+			});
 		},
 		// 监听单双击，单击-预览图片、双击-显示删除图标
 		maskTouchend(item,index){
@@ -272,7 +316,7 @@ export default {
 							// 关掉蒙层
 							item.mask = 0;
 							item.display = 0;
-							this.$refs.uWaterfall.$forceUpdate();
+							that.$refs.uWaterfall.$forceUpdate();
 							that.$refs.uToast.show({type:'success',title: '作品上传分享成功！'});
 						}else{
 							that.$refs.uToast.show({type:'error',title: res?.errorMsg || '作品上传分享失败！'});
@@ -291,7 +335,7 @@ export default {
 				confirmColor: '#94d500',
 				success: async (res) => {
 					if (res.confirm) {
-						let res = await that.$api.deleteCreation(item.id);
+						let res = current ? await that.$api.deleteCreation(item.id) : await that.$api.deleteCollections(item.id);
 						if(res.success){
 							// current ? that.workList.splice(index, 1) : this.collectList.splice(index, 1);
 							current ? that.workForm.total-- : that.collectForm.total--;
@@ -440,6 +484,23 @@ export default {
 					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;
@@ -485,8 +546,8 @@ export default {
 					.mask-public{
 						background: linear-gradient(to right,#853ade 0%, #d450da 100%);
 					}
-					.mask-delete{
+					.mask-collect{
-						background-color: rgba(41, 38, 37, 0.8);
+						background: linear-gradient(to right,rgba(65, 222, 70, 0.8) 0%, rgba(191, 218, 133, 0.8) 100%);
 					}
 				}
 			}
@@ -518,4 +579,44 @@ export default {
         opacity: 0;
     }
 }
+@keyframes showTrash {
+	from {
+	        transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
+	        animation-timing-function: ease-in;
+	        opacity: 0;
+	    }
+	
+	    40% {
+	        transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
+	        animation-timing-function: ease-in;
+	    }
+	
+	    60% {
+	        transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
+	        opacity: 1;
+	    }
+	
+	    80% {
+	        transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
+	    }
+	
+	    to {
+	        transform: perspective(400px);
+	    }
+}
+@keyframes hideTrash {
+    from {
+        transform: perspective(400px);
+    }
+
+    30% {
+        transform: perspective(400px) rotate3d(0, 1, 0, -15deg);
+        opacity: 1;
+    }
+
+    to {
+        transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
+        opacity: 0;
+    }
+}
 </style>

pages/mobile_web/workshops/index.vue

@@ -84,6 +84,18 @@
 				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">
@@ -259,6 +271,8 @@ export default {
 			dotLoading: false,
 			// 元素选择下标
 			selectElementIndex: '',
+			// 尺寸选择下标
+			selectSizeIndex: '',
 			// 弹窗显示更多选项
 			showMoreOptions: false,
 			// 按钮禁用
@@ -274,7 +288,24 @@ export default {
 			// 进度条计时器
 			dealPercentTimer: 1,
 			// 生成失败提示词
-			errorTips: ''
+			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
@@ -592,7 +623,9 @@ export default {
 						serviceId: id,
 						option: options[that.selectElementIndex].optionKey,
 						text: text,
+						size: that.form.id === 4 ? that.aliDimensions[that.selectSizeIndex].name : that.volcengineDimensions[that.selectSizeIndex].name
 					}
+					if(this.selectSizeIndex === '') delete result.size;
 					break;
 				case 2 :
 					result = {
@@ -801,8 +834,10 @@ export default {
 		// 元素选择
 		selectElement(index){
 			this.selectElementIndex = this.selectElementIndex === index ? '' : index;
-			// this.form.options[index];
+		},
-			
+		// 尺寸选择
+		selectSize(index){
+			this.selectSizeIndex = this.selectSizeIndex === index ? '' : index;
 		},
 	}
 }
@@ -1003,6 +1038,52 @@ export default {
 					background-color: rgba(236,245,255,1);
 				}
 			}
+			.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;