完善各页面

components/card/card.vue

@@ -1,5 +1,5 @@
 <template>
-	<view class="waterfall-item" :style="{width,...customStyle}">
+	<view class="waterfall-item" :style="{width,...customStyle}" @click="goWork(item)">
 		<view class="waterfall-item__image" :style="{width}">
 			<image :src="item.image" mode="widthFix" style="border-radius: 20rpx;"></image>
 		</view>
@@ -11,15 +11,15 @@
 				<view class="user">
 					<image src="@/static/icon/caidou.png" mode="aspectFill" class="avater">
 					</image>
-					<text class="name" :style="{color:textColor}">wang</text>
+					<text class="name" :style="{color:textColor}">{{item.author}}</text>
 				</view>
 				<view class="like" @click="changeLike">
 					<image class="like-icon" :src="isLike ?'/static/icon/icon-7.png':'/static/icon/icon-2.png'" mode="">
 					</image>
-					<text class="value" :style="{color:textColor}">11</text>
+					<text class="value" :style="{color:textColor}">{{item.num_like}}</text>
 				</view>
 			</view>
-			<view class="waterfall-item__ft__btn">
+			<view class="waterfall-item__ft__btn" v-if="false">
 				<image class="waterfall-item__ft__btn__icon" src="@/static/zhHans-text-icon/text-10.png" mode="">
 				</image>
 			</view>
@@ -27,7 +27,7 @@
 		<view class="waterfall-item__tips">
 			<view class="item">
 				<image class="look-icon" src="@/static/icon/icon-4.png" mode=""></image>
-				<text class="value" style="color: #fff;">100</text>
+				<text class="value" style="color: #fff;">{{item.num_view}}</text>
 			</view>
 			<view class="item" style="background-color: #3F4141;">
 				<text class="value" style="color: #fff;">精选</text>
@@ -68,6 +68,11 @@
 			changeLike() {
 				this.isLike = !this.isLike
 			},
+			goWork(item) {
+				uni.navigateTo({
+					url: '/pages/index/workDetail?id=' + item.id
+				})
+			}
 		}
 	}
 </script>

pages.json

@@ -85,6 +85,12 @@
 				"navigationBarTitleText": "详情",
 				"navigationBarBackgroundColor": "#ffffff"
 			}
+		}, {
+			"path": "pages/index/workDetail",
+			"style": {
+				"navigationBarTitleText": "详情",
+				"navigationBarBackgroundColor": "#ffffff"
+			}
 		}, {
 			"path": "pages/index/ai_pp",
 			"style": {
@@ -236,12 +242,42 @@
 			"path": "pages/makedetail/makeImgDetail",
 			"style": {
 				"navigationBarTitleText": "灵感创作",
-				"navigationBarBackgroundColor": "#ffffff"
+				"navigationBarBackgroundColor": "#ffffff",
+				"navigationStyle": "custom",
+				"h5": {
+					"titleNView": false,
+					"bounce": "none"
+				},
+				"app-plus": {
+					"bounce": "none"
+				}
+			}
+		}, {
+			"path": "pages/makedetail/makeDetail",
+			"style": {
+				"navigationBarTitleText": "详情",
+				"navigationBarBackgroundColor": "#ffffff",
+				"navigationStyle": "custom",
+				"h5": {
+					"titleNView": false,
+					"bounce": "none"
+				},
+				"app-plus": {
+					"bounce": "none"
+				}
 			}
 		}, {
 			"path": "pages/makedetail/makeMusicDetail",
 			"style": {
-				"navigationBarTitleText": "音乐制作详情"
+				"navigationBarTitleText": "音乐制作",
+				"navigationStyle": "custom",
+				"h5": {
+					"titleNView": false,
+					"bounce": "none"
+				},
+				"app-plus": {
+					"bounce": "none"
+				}
 			}
 		}
 	],

pages/index/articleDetail.scss

@@ -440,4 +440,27 @@ page {
 			background-color: #2567db;
 		}
 	}
-}
+}
+	/* 确保评论按钮样式 */
+	.comment-button {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		width: 650rpx;
+		height: 90rpx;
+		background-color: #2979ff;
+		color: #fff;
+		border-radius: 45rpx;
+		margin: 40rpx auto 20rpx;
+		font-size: 30rpx;
+		box-shadow: 0 4rpx 12rpx rgba(41, 121, 255, 0.3);
+	}
+
+	.comment-button .fa {
+		margin-right: 10rpx;
+	}
+
+	.comment-button:active {
+		opacity: 0.9;
+		transform: scale(0.98);
+	}

pages/index/articleDetail.vue

@@ -36,7 +36,7 @@
 					</view>
 					<view class="meta-item">
 						<text class="fa fa-eye"></text>
-						<text class="meta-text">{{ articleInfo.view_count || 0 }}次阅读</text>
+						<text class="meta-text">{{ articleInfo.num_view || 0 }}次阅读</text>
 					</view>
 					<view class="meta-item" v-if="articleInfo.author">
 						<text class="fa fa-user"></text>
@@ -154,6 +154,7 @@
 				imgs: [],
 				descs: [],
 				list_wish: [],
+				content: '',
 
 				// 添加文章信息字段
 				articleInfo: {
@@ -274,6 +275,7 @@
 					url: this.$apiHost + '/Article/getcomments',
 					data: {
 						uuid: getApp().globalData.uuid,
+						type: 'article',
 						id: this.arcID,
 						page: 1,
 						limit: 10
@@ -360,7 +362,7 @@
 									title: '点赞成功',
 									icon: 'none'
 								});
-							}else {
+							} else {
 								this.articleInfo.like_count = (this.articleInfo.like_count || 0) - 1;
 								this.articleInfo.is_like = false;
 								uni.showToast({
@@ -427,17 +429,18 @@
 				// 	owner: true, // 是否为所有者 所有者可以进行删除 管理员默认true
 				// };
 				console.log("replyFun", {
-						uuid: getApp().globalData.uuid,
-						article_id: this.arcID, // 文章ID
-						content: params.user_content, // 评论内容
-						parent_id: params.parent_id || 0, // 父评论ID
-						reply_id: params.reply_id || 0, // 回复的评论ID
-						reply_name: params.reply_name || '' // 被回复人名称
-					});
+					uuid: getApp().globalData.uuid,
+					article_id: this.arcID, // 文章ID
+					content: params.user_content, // 评论内容
+					parent_id: params.parent_id || 0, // 父评论ID
+					reply_id: params.reply_id || 0, // 回复的评论ID
+					reply_name: params.reply_name || '' // 被回复人名称
+				});
 				uni.request({
 					url: this.$apiHost + '/Article/newComment',
 					data: {
 						uuid: getApp().globalData.uuid,
+						type: 'article',
 						article_id: this.arcID, // 文章ID
 						content: params.user_content, // 评论内容
 						parent_id: params.parent_id || 0, // 父评论ID
@@ -480,7 +483,7 @@
 				});
 				// 将params转换为逗号分隔的字符串
 				const idsString = Array.isArray(params) ? params.join(',') : params.toString();
-				
+
 				console.log("删除评论", idsString, mode)
 				uni.request({
 					url: this.$apiHost + '/Article/delComment',
@@ -499,8 +502,7 @@
 							callback(res);
 						}
 					},
-					fail: (e) => {
-					}
+					fail: (e) => {}
 				});
 				// switch (mode) {
 				// 	case "bind":
@@ -528,28 +530,4 @@
 
 <style scoped lang="scss">
 	@import 'articleDetail.scss';
-
-	/* 确保评论按钮样式 */
-	.comment-button {
-		display: flex;
-		align-items: center;
-		justify-content: center;
-		width: 650rpx;
-		height: 90rpx;
-		background-color: #2979ff;
-		color: #fff;
-		border-radius: 45rpx;
-		margin: 40rpx auto 20rpx;
-		font-size: 30rpx;
-		box-shadow: 0 4rpx 12rpx rgba(41, 121, 255, 0.3);
-	}
-
-	.comment-button .fa {
-		margin-right: 10rpx;
-	}
-
-	.comment-button:active {
-		opacity: 0.9;
-		transform: scale(0.98);
-	}
 </style>

pages/index/index.vue

@@ -12,7 +12,7 @@
 			<view class="view6 step7"></view>
 		</view>
 		<image src="@/static/image/white-bg.png" :style="{ height: windowHeight + 'px',width:'750rpx'}"></image>
-		<z-paging ref="paging" v-model="dataList" @query="queryList" :style="{ height: windowHeight - 50 + 'px'}"
+		<z-paging ref="paging" v-model="dataList" @query="queryList" :style="{ height: windowHeight - 80 + 'px'}"
 			:show-scrollbar="false">
 			<template #top>
 				<page-navbar>
@@ -102,7 +102,7 @@
 					<swiper class="hot-topics-swiper" :current="currentTopicPage" @change="handleTopicPageChange">
 						<swiper-item v-for="(page, pageIndex) in topicPages" :key="pageIndex">
 							<view class="hot-topics-list">
-								<view v-for="(topic, index) in page" :key="index" class="topic-item" 
+								<view v-for="(topic, index) in page" :key="index" class="topic-item"
 									@click="goToArticleDetail(topic.id)">
 									<text class="topic-index">{{ pageIndex * 5 + index + 1 }}</text>
 									<view class="topic-content">
@@ -126,7 +126,8 @@
 				<view v-if="currentTab === 0" class="follow-list">
 					<block v-if="followList.length > 0">
 						<view class="works-list">
-							<view class="work-item" v-for="(item, index) in followList" :key="index">
+							<view class="work-item" v-for="(item, index) in followList" :key="index"
+								@click="goWork(item)">
 								<image class="work-image" :src="item.images || item.img_url" mode="aspectFill"></image>
 								<view class="work-title">{{item.title || '作品'+index}}</view>
 							</view>
@@ -140,10 +141,11 @@
 				<!-- 推荐列表 - 瀑布流样式 -->
 				<w-waterfall v-if="currentTab === 1 && recommendList.length > 0" :data="recommendList">
 					<template v-slot:content="{item,width}">
-						<card :item="formatItem(item)" :width="width" :custom-style="{background:'#fff'}" textColor="#000"></card>
+						<card :item="formatItem(item)" :width="width" :custom-style="{background:'#fff'}"
+							textColor="#000"></card>
 					</template>
 				</w-waterfall>
-				
+
 				<!-- 探索列表 - 热点新闻已经有现成的热搜资讯组件，只需添加新闻列表 -->
 				<view v-if="currentTab === 2 && newsList.length > 0" class="news-list">
 					<view class="news-grid">
@@ -161,15 +163,16 @@
 						</view>
 					</view>
 				</view>
-				
+
 				<view class="no-data" v-if="currentTab === 1 && recommendList.length === 0 && !isLoadingRecommend">
 					<text>暂无推荐数据</text>
 				</view>
-				
+
 				<view class="no-data" v-if="currentTab === 2 && newsList.length === 0 && !isLoadingNews">
 					<text>暂无新闻数据</text>
 				</view>
 			</z-paging-cell>
+			<view class="blankHeight"></view>
 		</z-paging>
 		<tabbar-vue :tabbars="tabbars" :currentIndex="0" ref="tabbar"></tabbar-vue>
 
@@ -439,7 +442,7 @@
 			loadFollowList() {
 				if (this.isLoadingFollow) return;
 				this.isLoadingFollow = true;
-				
+
 				uni.request({
 					url: this.$apiHost + '/Work/getlist',
 					data: {
@@ -459,7 +462,7 @@
 							// 只有当列表有数据时才追加
 							this.followList = [...this.followList, ...res.data.list];
 							this.followOffset += res.data.list.length;
-							
+
 							if (res.data.list.length < 20) {
 								this.hasMoreFollow = false;
 							}
@@ -467,7 +470,7 @@
 							// 如果列表为空，确保标记没有更多数据
 							this.hasMoreFollow = false;
 						}
-						
+
 						// 无论是否有数据，都需要通知z-paging组件完成刷新
 						if (this.$refs.paging) {
 							this.$refs.paging.complete(this.followList);
@@ -489,7 +492,7 @@
 			loadRecommendList() {
 				if (this.isLoadingRecommend) return;
 				this.isLoadingRecommend = true;
-				
+
 				uni.request({
 					url: this.$apiHost + '/Work/getlist',
 					data: {
@@ -507,14 +510,14 @@
 						if (res.data.success == 'yes' && res.data.list && res.data.list.length > 0) {
 							this.recommendList = [...this.recommendList, ...res.data.list];
 							this.recommendOffset += res.data.list.length;
-							
+
 							if (res.data.list.length < 20) {
 								this.hasMoreRecommend = false;
 							}
 						} else {
 							this.hasMoreRecommend = false;
 						}
-						
+
 						// 无论是否有数据，都需要通知z-paging组件完成刷新
 						if (this.$refs.paging) {
 							this.$refs.paging.complete(this.recommendList);
@@ -536,7 +539,7 @@
 			loadHotNews() {
 				if (this.isLoadingExplore) return;
 				this.isLoadingExplore = true;
-				
+
 				uni.request({
 					url: this.$apiHost + '/Article/getlist',
 					data: {
@@ -552,7 +555,7 @@
 						console.log("热点新闻数据:", res.data);
 						if (res.data.success == 'yes' && res.data.list && res.data.list.length > 0) {
 							this.hotNewsList = res.data.list;
-							
+
 							// 如果有热点新闻数据，更新热搜资讯
 							if (this.hotNewsList.length > 0) {
 								// 将API返回的热点新闻转换为热搜资讯格式
@@ -579,7 +582,7 @@
 			loadNewsList() {
 				if (this.isLoadingNews) return;
 				this.isLoadingNews = true;
-				
+
 				uni.request({
 					url: this.$apiHost + '/Article/getlist',
 					data: {
@@ -597,14 +600,14 @@
 						if (res.data.success == 'yes' && res.data.list && res.data.list.length > 0) {
 							this.newsList = [...this.newsList, ...res.data.list];
 							this.newsOffset += res.data.list.length;
-							
+
 							if (res.data.list.length < 20) {
 								this.hasMoreNews = false;
 							}
 						} else {
 							this.hasMoreNews = false;
 						}
-						
+
 						// 无论是否有数据，都需要通知z-paging组件完成刷新
 						if (this.$refs.paging) {
 							this.$refs.paging.complete(this.newsList);
@@ -649,7 +652,11 @@
 			formatItem(item) {
 				// 处理接口返回的数据，使其适配card组件
 				return {
+					id: item.id,
 					allowEdit: false,
+					author: item.author,
+					num_like: item.num_like,
+					num_view: item.num_view,
 					image: item.images || item.img_url || item.image, // 优先使用images字段
 					w: item.width,
 					h: item.height,
@@ -669,6 +676,11 @@
 					url: '/pages/index/articleDetail?id=' + id
 				});
 			},
+			goWork(item) {
+				uni.navigateTo({
+					url: '/pages/index/workDetail?id=' + item.id
+				})
+			},
 			goToMake() {
 				uni.navigateTo({
 					url: '/pages/make/make'
@@ -763,7 +775,8 @@
 
 			.topic-content {
 				flex: 1;
-				width: 0; /* 重要：确保flex子项不会超过容器宽度 */
+				width: 0;
+				/* 重要：确保flex子项不会超过容器宽度 */
 				overflow: hidden;
 
 				.topic-title-row {
@@ -778,7 +791,8 @@
 						overflow: hidden;
 						text-overflow: ellipsis;
 						flex: 1;
-						width: 0; /* 重要：确保flex子项不会超过容器宽度 */
+						width: 0;
+						/* 重要：确保flex子项不会超过容器宽度 */
 					}
 
 					.hot-tag {
@@ -859,7 +873,7 @@
 			align-items: center;
 			justify-content: center;
 			padding: 60rpx 0;
-			
+
 			text {
 				color: #808080;
 				font-size: 28rpx;
@@ -877,26 +891,26 @@
 	.news-list {
 		padding: 20rpx;
 		background: #161616;
-		
+
 		.news-grid {
 			display: flex;
 			flex-wrap: wrap;
 			justify-content: space-between;
-			
+
 			.news-item {
 				width: 48%;
 				margin-bottom: 30rpx;
 				background: #28292D;
 				border-radius: 12rpx;
 				overflow: hidden;
-				
+
 				.news-image {
 					width: 100%;
 					aspect-ratio: 1;
 					height: auto;
 					border-radius: 12rpx 12rpx 0 0;
 				}
-				
+
 				.news-title {
 					font-size: 28rpx;
 					color: #ffffff;
@@ -907,13 +921,13 @@
 					height: 60rpx;
 					line-height: 60rpx;
 				}
-				
+
 				.news-footer {
 					display: flex;
 					justify-content: space-between;
 					align-items: center;
 					padding: 0 15rpx 15rpx;
-					
+
 					.news-author {
 						font-size: 24rpx;
 						color: #808080;
@@ -922,13 +936,13 @@
 						overflow: hidden;
 						text-overflow: ellipsis;
 					}
-					
+
 					.news-views {
 						display: flex;
 						align-items: center;
 						font-size: 24rpx;
 						color: #808080;
-						
+
 						.view-icon {
 							width: 26rpx;
 							height: 18rpx;
@@ -959,4 +973,9 @@
 			height: 40rpx;
 		}
 	}
+
+	.blankHeight {
+		width: 500rpx;
+		height: 500rpx;
+	}
 </style>

pages/index/workDetail.scss

@@ -0,0 +1,513 @@
+// 导入FontAwesome
+@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css');
+
+page {
+	background-color: #ffffff;
+	width: 100%;
+	color: #333;
+	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
+}
+.page {
+	background-color: #ffffff;
+	width: 100%;
+}
+.header {
+	display: flex;
+	flex-direction: row;
+	justify-content: flex-start;
+	align-items: center;
+	width: 750rpx;height: 320rpx;
+	padding-top: calc(var(--status-bar-height) + 0rpx);
+	.left {
+		display: flex;flex-direction: row;width:200rpx;height:120rpx;
+		justify-content: center;
+		padding-left:50rpx;
+		image {
+			width:124rpx;height:40rpx;
+		}
+	}
+}
+.thread {
+	height: 20rpx;
+}
+.thread2 {
+	height: 60rpx;
+}
+.topUser {
+	width:750rpx;
+	height:750rpx;
+	position: relative;
+	overflow: hidden;
+	.home_image{
+		width: 100%;
+		height: 100%;
+		transition: transform 0.3s ease;
+		
+		&:active {
+			transform: scale(1.05);
+		}
+	}
+	.image-indicator {
+		position: absolute;
+		top: 30rpx;
+		right: 30rpx;
+		background-color: rgba(0, 0, 0, 0.5);
+		color: #fff;
+		padding: 8rpx 16rpx;
+		border-radius: 20rpx;
+		font-size: 24rpx;
+	}
+	/* 添加歌词显示样式 */
+	.lyrics-overlay {
+		position: absolute;
+		top: 0;
+		left: 0;
+		right: 0;
+		bottom: 0;
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		background-color: rgba(0, 0, 0, 0.4);
+		padding: 30rpx;
+		
+		.lyrics-text {
+			color: #fff;
+			font-size: 36rpx;
+			text-align: center;
+			text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.5);
+			font-weight: 500;
+			line-height: 1.6;
+		}
+	}
+	/* 添加播放按钮样式 */
+	.play-button {
+		position: absolute;
+		top: 50%;
+		left: 50%;
+		transform: translate(-50%, -50%);
+		width: 120rpx;
+		height: 120rpx;
+		background-color: rgba(0, 0, 0, 0.6);
+		border-radius: 60rpx;
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		z-index: 10;
+		
+		.fa {
+			color: #fff;
+			font-size: 60rpx;
+		}
+		
+		&:active {
+			background-color: rgba(0, 0, 0, 0.8);
+			transform: translate(-50%, -50%) scale(0.95);
+		}
+	}
+	.list {
+		position: absolute;
+		bottom: 20rpx;
+		width:100%;
+		display: flex;
+		flex-direction: row;
+		justify-content: center;
+		align-items: flex-end;
+		padding: 0 20rpx;
+		overflow-x: auto;
+		
+		&::-webkit-scrollbar {
+			display: none;
+		}
+		
+		.img {
+			width:84rpx;height:84rpx;margin: 0 10rpx;
+			transition: all 0.3s ease;
+			image {
+				width:84rpx;height:84rpx;border-radius: 16rpx;border: solid 4rpx #fff;
+				box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.2);
+			}
+		}
+		.active {
+			width:136rpx;height:136rpx;
+			image {
+				width:136rpx;height:136rpx;border-radius: 24rpx;border: solid 4rpx #fff;
+				box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.3);
+			}
+		}
+	}
+}
+.body {
+	width:750rpx;margin-top:-60rpx;
+	border-radius: 40rpx 40rpx 0 0;padding-top:30rpx;
+	display: flex;flex-direction: column;justify-content: flex-start;align-items: flex-start;
+	box-shadow: 0 -10rpx 20rpx rgba(0, 0, 0, 0.05);
+	position: relative;
+	z-index: 10;
+	.article-header {
+		display: flex;
+		flex-direction: column;
+		justify-content: flex-start;
+		align-items: flex-start;
+		padding: 40rpx 50rpx 20rpx;
+		width: 100%;
+		box-sizing: border-box;
+		
+		.title {
+			font-size: 40rpx;
+			font-weight: bold;
+			color: #222;
+			margin-bottom: 20rpx;
+			line-height: 1.4;
+		}
+		
+		.meta-info {
+			display: flex;
+			flex-direction: row;
+			flex-wrap: wrap;
+			color: #999;
+			font-size: 26rpx;
+			
+			.meta-item {
+				display: flex;
+				align-items: center;
+				margin-right: 30rpx;
+				margin-bottom: 10rpx;
+				
+				.meta-text {
+					margin-left: 8rpx;
+				}
+			}
+		}
+	}
+	.divider {
+		height: 1rpx;
+		background-color: #eee;
+		width: 650rpx;
+		margin: 10rpx auto 30rpx;
+	}
+	.article-content {
+		padding: 0 50rpx 40rpx;
+		width: 100%;
+		box-sizing: border-box;
+		
+		.content {
+			font-size: 32rpx;
+			color: #333;
+			line-height: 1.8;
+			text-align: justify;
+		}
+	}
+	.article-footer {
+		width: 100%;
+		padding: 20rpx 0;
+		border-top: 1rpx solid #f0f0f0;
+		
+		.action-bar {
+			display: flex;
+			justify-content: space-around;
+			align-items: center;
+			
+			.action-item {
+				display: flex;
+				flex-direction: column;
+				align-items: center;
+				padding: 20rpx 0;
+				
+				.fa {
+					font-size: 40rpx;
+					color: #666;
+					margin-bottom: 10rpx;
+					
+					&.liked {
+						color: #ff5151;
+					}
+				}
+				
+				.action-text {
+					font-size: 24rpx;
+					color: #666;
+				}
+				
+				&:active {
+					opacity: 0.7;
+				}
+			}
+		}
+	}
+}
+.list_wish {
+	display: flex;flex-direction: column;justify-content: flex-start;align-items: center;color:#fff;
+	width:750rpx;
+	
+	.item {
+		margin-top: 20rpx;color:#fff;font-size: 28rpx;
+		display: flex;flex-direction: row;justify-content: center;align-items: center;
+		width: 690rpx;height: 156rpx;
+		background: #28292D;
+		border-radius: 28rpx;
+		.avator {
+			width: 116rpx;height: 116rpx;margin-left:14rpx;
+			background: #161616;
+			border-radius: 28rpx;
+			display: flex;flex-direction: row;justify-content: center;align-items: center;
+			.icon {
+				width:100rpx;height:100rpx;border-radius: 20rpx;
+			}
+		}
+		.left {
+			width:370rpx;display: flex;flex-direction: column;justify-content: flex-start;align-items: flex-start;
+			margin-left:20rpx;
+			.name {
+				font-size: 32rpx;margin-bottom:20rpx;
+			}
+			.jindu {
+				display: flex;flex-direction: row;justify-content: flex-start;align-items: center;
+				.bord {
+					width: 216rpx;height: 20rpx;margin-left:0rpx;
+					background: #0F0F0F;
+					border-radius: 24rpx;
+					.active {
+						width: 0%;height: 20rpx;
+						background: linear-gradient( 142deg, #FF5967 0%, #FF2A95 100%);
+						border-radius: 24rpx;
+					}
+				}
+				.tips {
+					margin-left:20rpx;font-weight: 400;font-size: 24rpx;color: #FF3D83;
+				}
+			}
+		}
+		.right {
+			width:190rpx;
+			.btn_submit {
+				width: 168rpx;height: 72rpx;
+				background: linear-gradient( 142deg, #FF5967 0%, #FF2A95 100%);
+				border-radius: 28rpx 28rpx 28rpx 28rpx;
+				display: flex;flex-direction: column;justify-content: center;align-items: center;
+			}
+			.state {
+				width:168rpx;height: 72rpx;text-align: center;line-height: 72rpx;
+			}
+		}
+	}
+}
+.list_info {
+	display: flex;flex-direction: column;justify-content: flex-start;align-items: center;color:#fff;
+	width:750rpx;
+	
+	.item {
+		width: 690rpx;margin: 0rpx 0;color:#fff;font-size: 28rpx;padding:20rpx 0 0rpx;
+		display: flex;flex-direction: row;justify-content: flex-start;align-items: center;
+		.avator {
+			width:88rpx;
+			.icon {
+				width:72rpx;height:72rpx;border-radius: 36rpx;
+			}
+		}
+		.tit {
+			width:470rpx;
+			.list1 {
+				display: flex;flex-direction: row;justify-content: flex-start;align-items: center;
+				.name {
+					font-size: 32rpx;padding-right: 10rpx;height:40rpx;line-height: 40rpx;
+				}
+				.sex1 {
+					width: 76rpx;
+					height: 40rpx;
+					background: #423339;
+					border-radius: 16rpx 16rpx 16rpx 16rpx;
+					border: 2rpx solid #36D6FF;color:#36D6FF;
+					display: flex;flex-direction: row;justify-content: flex-start;align-items: center;
+					image {
+						width:24rpx;height:24rpx;margin-left:4rpx;margin-right: 4rpx;
+					}
+				}
+				.sex2 {
+					width: 76rpx;
+					height: 40rpx;
+					background: #423339;
+					border-radius: 16rpx 16rpx 16rpx 16rpx;
+					border: 2rpx solid #FF7D88;color:#FF7D88;
+					display: flex;flex-direction: row;justify-content: flex-start;align-items: center;
+					image {
+						width:24rpx;height:24rpx;margin-left:4rpx;margin-right: 4rpx;
+					}
+				}
+				.xinzuo {
+					width: 92rpx;height: 44rpx;margin-left:10rpx;line-height: 44rpx;
+					border-radius: 16rpx 16rpx 16rpx 16rpx;
+					border: 2rpx solid #404040;font-size: 20rpx;color: #D0D0D0;
+					display: flex;flex-direction: row;justify-content: center;align-items: center;
+				}
+			}
+			.time {
+				color:#D0D0D0;font-size: 24rpx;
+			}
+		}
+		.state {
+			width:130rpx;font-size: 28rpx;font-weight: normal;text-align: right;
+			.status_1 {
+				color:#999;
+			}
+			.status_9 {
+				color:#36D6FF;
+			}
+			.status_2 {
+				color:#FE2D56;
+			}
+		}
+	}
+	.content {
+		width: 690rpx;font-weight: 400;font-size: 28rpx;color: #FFFFFF;text-align: left;font-style: normal;
+		text-transform: none;padding:20rpx 0;
+		padding-left:88rpx;
+	}
+	.photo_list {
+		width: 690rpx;margin-bottom:0rpx;padding-left:88rpx;
+		border-radius: 28rpx;font-size: 28rpx;
+		display: flex;flex-direction: row;align-items: center;
+		flex-wrap: wrap;
+		.img {
+			width:186rpx;height:186rpx;margin-bottom: 24rpx;margin-right: 12rpx;
+			image {
+				width:186rpx;height:186rpx;border-radius: 28rpx;border:solid 1px rgba(255, 255, 255, 0.2);
+			}
+		}
+		.right {
+			color:#fff;
+		}
+	}
+	.desc {
+		width: 690rpx;padding:0rpx 0 0rpx;padding-left:88rpx;
+		font-weight: 400;
+		font-size: 24rpx;
+		color: #999999;
+		line-height: 0rpx;
+		text-align: left;
+		font-style: normal;
+		text-transform: none;
+		display: flex;flex-direction: row;justify-content: space-between;align-items: center;
+		image {
+			width:40rpx;height:40rpx;
+		}
+		.addr {
+			width:200rpx;
+		}
+		.img {
+			display: flex;flex-direction: row;justify-content: center;align-items: center;
+			padding:0 0rpx 0 30rpx;font-size: 28rpx;color:#fff;
+			image {
+				margin-top:-8rpx;
+			}
+		}
+	}
+}
+.btn_submit {
+	width: 336rpx;height: 100rpx;margin:50rpx auto;
+	background: linear-gradient( 90deg, #FF536D 0%, #FF3B84 100%);
+	border-radius: 50rpx 50rpx 50rpx 50rpx;
+	display: flex;flex-direction: row;justify-content: center;align-items: center;
+	font-weight: bold;
+	font-size: 32rpx;
+	color: #FFFFFF;
+	image {
+		width:44rpx;height:44rpx;margin-right: 8rpx;margin-top:4rpx;
+	}
+}
+.btn {
+	text-align: center;
+	color: #fff;
+	padding: 20rpx;
+	margin: 50rpx;
+	border-radius: 20rpx;
+	background-color: #2979ff;
+  }
+
+.font-awesome-import {
+	display: none;
+}
+
+.fa {
+	font-family: 'FontAwesome';
+	margin-right: 6rpx;
+}
+
+// 评论区域样式
+.comment-section {
+	background-color: #f8f8f8;
+	padding: 30rpx 0;
+	margin-top: 20rpx;
+	border-radius: 30rpx 30rpx 0 0;
+	
+	.section-header {
+		display: flex;
+		align-items: center;
+		padding: 0 30rpx 20rpx;
+		border-bottom: 1rpx solid #eee;
+		margin-bottom: 20rpx;
+		
+		.fa {
+			font-size: 36rpx;
+			color: #2979ff;
+		}
+		
+		.section-title {
+			font-size: 32rpx;
+			font-weight: bold;
+			margin: 0 10rpx;
+			color: #333;
+		}
+		
+		.comment-count {
+			font-size: 28rpx;
+			color: #999;
+		}
+	}
+	
+	.comment-button {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		width: 650rpx;
+		height: 90rpx;
+		background-color: #2979ff;
+		color: #fff;
+		border-radius: 45rpx;
+		margin: 40rpx auto 20rpx;
+		font-size: 30rpx;
+		box-shadow: 0 4rpx 12rpx rgba(41, 121, 255, 0.3);
+		transition: all 0.3s ease;
+		
+		.fa {
+			margin-right: 10rpx;
+		}
+		
+		&:active {
+			transform: scale(0.97);
+			background-color: #2567db;
+		}
+	}
+}
+	/* 确保评论按钮样式 */
+	.comment-button {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		width: 650rpx;
+		height: 90rpx;
+		background-color: #2979ff;
+		color: #fff;
+		border-radius: 45rpx;
+		margin: 40rpx auto 20rpx;
+		font-size: 30rpx;
+		box-shadow: 0 4rpx 12rpx rgba(41, 121, 255, 0.3);
+	}
+
+	.comment-button .fa {
+		margin-right: 10rpx;
+	}
+
+	.comment-button:active {
+		opacity: 0.9;
+		transform: scale(0.98);
+	}

pages/index/workDetail.vue

@@ -0,0 +1,553 @@
+<template>
+	<view class="page">
+		<!-- 引入FontAwesome -->
+		<view>
+			<link rel="stylesheet"
+				href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
+		</view>
+
+		<!-- 文章头图区域 -->
+		<view class="topUser">
+			<image :src="home_image" class="home_image" mode="aspectFill"></image>
+			<!-- 图片指示器 -->
+			<view class="image-indicator" v-if="image_list.length > 1">
+				<text>{{ selImg + 1 }}/{{ image_list.length }}</text>
+			</view>
+			<!-- 音乐类型时显示歌词 -->
+			<view class="lyrics-overlay" v-if="articleInfo.task_type == 2">
+				<text class="lyrics-text">{{ articleInfo.lyrics }}</text>
+			</view>
+			<!-- 音乐类型时显示播放按钮 -->
+			<view class="play-button" v-if="articleInfo.task_type == 2 && articleInfo.result_audio" @click="toggleAudio">
+				<text class="fa" :class="isPlaying ? 'fa-pause' : 'fa-play'"></text>
+			</view>
+			<!-- 缩略图列表 -->
+			<view class="list">
+				<view class="img" :class="selImg==index?'active':''" v-for="(item,index) in image_list" :key="index"
+					@click="selPhoto(item,index)">
+					<image :src="item" mode="aspectFill"></image>
+				</view>
+			</view>
+		</view>
+
+		<!-- 音频元素 -->
+		<audio id="audioPlayer" :src="articleInfo.result_audio" style="display:none;"></audio>
+
+		<!-- 文章内容区域 -->
+		<view class="body">
+			<!-- 文章标题与元信息 -->
+			<view class="article-header">
+				<view class="title">
+					{{ articleInfo.title || '暂无标题' }}
+				</view>
+				<view class="meta-info">
+					<view class="meta-item">
+						<text class="fa fa-calendar"></text>
+						<text class="meta-text">{{ articleInfo.create_time || '暂无时间' }}</text>
+					</view>
+					<view class="meta-item">
+						<text class="fa fa-eye"></text>
+						<text class="meta-text">{{ articleInfo.num_view || 0 }}次阅读</text>
+					</view>
+					<view class="meta-item" v-if="articleInfo.author">
+						<text class="fa fa-user"></text>
+						<text class="meta-text">{{ articleInfo.author }}</text>
+					</view>
+				</view>
+			</view>
+
+			<!-- 内容分隔线 -->
+			<view class="divider"></view>
+
+			<!-- 文章内容 -->
+			<!-- <view class="article-content" v-if="articleInfo.type == 'user'">
+				<view class="content">{{ articleInfo.content || '暂无内容' }}</view>
+			</view> -->
+			<view class="article-content">
+				<view class="content">
+					<rich-text :nodes="content" style="font-size: 14px;"></rich-text>
+				</view>
+			</view>
+
+			<!-- 文章底部区域 -->
+			<view class="article-footer">
+				<view class="action-bar">
+					<view class="action-item" @tap="likeArticle">
+						<text class="fa" :class="articleInfo.is_like ? 'fa-thumbs-up liked' : 'fa-thumbs-o-up'"></text>
+						<text class="action-text">{{ articleInfo.like_count || 0 }}</text>
+					</view>
+					<view class="action-item" @tap="openComment">
+						<text class="fa fa-comment-o"></text>
+						<text class="action-text">{{ tableTotal || 0 }}</text>
+					</view>
+					<view class="action-item" @tap="shareArticle">
+						<text class="fa fa-share-alt"></text>
+						<text class="action-text">分享</text>
+					</view>
+				</view>
+			</view>
+
+			<!-- 空白占位 -->
+			<view class="list_info">
+				<view class="blankHeight"></view>
+			</view>
+
+		</view>
+
+		<!-- <view class="btn_submit" @click="chatTA()">
+			<image class="icon" src="../../static/icon/icon_chat_white.png" mode="widthFix"></image>
+			私聊
+		</view> -->
+		<view class="thread2"></view>
+		<view class="thread2"></view>
+
+		<previewImage ref="previewImage" :opacity="0.8" :circular="true" :imgs="imgs" :descs="descs"></previewImage>
+
+		<!-- 评论区域 -->
+		<view class="comment-section">
+			<view class="section-header">
+				<text class="fa fa-comments"></text>
+				<text class="section-title">评论区</text>
+				<text class="comment-count">({{ tableTotal }})</text>
+			</view>
+
+			<CComment ref="ccRef" :myInfo="myInfo" :userInfo="userInfo" :tableData="tableData"
+				:tableTotal.sync="tableTotal" :deleteMode="deleteMode" @likeFun="likeFun" @replyFun="replyFun"
+				@deleteFun="deleteFun"></CComment>
+
+			<view class="comment-button" @tap="openComment">
+				<text class="fa fa-pencil"></text>
+				<text>发表新评论</text>
+			</view>
+		</view>
+
+		<view class="thread2"></view>
+
+	</view>
+</template>
+
+<script>
+	import htmlParser from '../../common/html-parser'
+	import CComment from "@/components/cc-comment/cc-comment.vue";
+	import previewImage from '@/components/kxj-previewImage/kxj-previewImage.vue'; //引用插件
+	function parseImgs(nodes) {
+		nodes.forEach(node => {
+			if (
+				node.name === 'img' &&
+				node.attrs &&
+				node.attrs['data-img-size-val']
+			) {
+				const sizes = node.attrs['data-img-size-val'].split(',')
+				const width = uni.upx2px(720 * 0.9)
+				const height = parseInt(width * (sizes[1] / sizes[0]))
+				node.attrs.style = `width:${width};height:${height};`
+			}
+			if (Array.isArray(node.children)) {
+				parseImgs(node.children)
+			}
+		})
+		return nodes
+	}
+	export default {
+		components: {
+			previewImage,
+			CComment
+		},
+		data() {
+			return {
+				title: '',
+				arcID: 0,
+				selImg: 0,
+				home_image: '',
+				myinfo: {},
+				tag_list: [],
+				image_list: [],
+				imgs: [],
+				descs: [],
+				list_wish: [],
+				content: '',
+
+				// 添加文章信息字段
+				articleInfo: {
+					title: '',
+					content: '',
+					create_time: '',
+					images: '',
+					view_count: 0,
+					author: '',
+					like_count: 0,
+					is_like: false
+				},
+
+				myInfo: {
+					user_id: 1, // 用户id
+					user_name: "cc", // 用户名
+					user_avatar: "https://img0.baidu.com/it/u=2836960144,3650263035&fm=253&fmt=auto&app=138&f=JPEG?w=474&h=474", // 用户头像地址
+				},
+				// 文章作者信息(提示: 一般来自localstorage, 如果是实时获取的话, 那么获取到数据后再v-if显示评论组件)
+				userInfo: {
+					user_id: 2, // 用户id
+					user_name: "ikun", // 用户名
+					user_avatar: "https://pic1.zhimg.com/80/v2-a79071a705f55c5d88f6c74e6111fe84_720w.webp", // 用户头像地址
+				},
+				deleteMode: "all", //删除模式
+				// 评论总数
+				tableTotal: 4,
+				// 评论表
+				tableData: [],
+				isPlaying: false, // 添加播放状态
+				audioPlayer: null, // 添加音频播放器实例
+			}
+		},
+		onLoad(parms) {
+			let self = this;
+			this.arcID = parms.id || 393;
+		},
+		onShow() {
+			uni.$emit('check_update');
+			this.loadData();
+			this.loadCommentData();
+		},
+		onReady() {
+			// 初始化音频播放器
+			this.audioPlayer = uni.createInnerAudioContext();
+			this.audioPlayer.onEnded(() => {
+				this.isPlaying = false;
+			});
+		},
+		onUnload() {
+			// 页面卸载时停止音频播放
+			if (this.audioPlayer) {
+				this.audioPlayer.stop();
+				this.audioPlayer.destroy();
+			}
+		},
+		methods: {
+			onLinqu(item) {
+				uni.navigateTo({
+					url: '/pages/my/wishHelp?id=' + item.myid,
+				})
+			},
+			selPhoto(item, sel) {
+				this.selImg = sel;
+				this.home_image = this.image_list[sel];
+			},
+			toArr(imgs) {
+				let arr = imgs.split("|");
+				return arr;
+			},
+			previewOpen(imgs1, index) {
+				this.imgs = imgs1.split("|");
+				setTimeout(() => this.$refs.previewImage.open(index), 0)
+				// 传入当前选中的图片地址或序号
+				return; //如需测试和uni原生预览差别可注释这两行
+			},
+			loadData() {
+				uni.request({
+					url: this.$apiHost + '/Work/getinfo',
+					data: {
+						uuid: getApp().globalData.uuid,
+						id: this.arcID
+					},
+					header: {
+						"content-type": "application/json",
+						'sign': getApp().globalData.headerSign
+					},
+					success: (res) => {
+						console.log("文章信息:", res.data);
+						if (res.data.success === "yes") {
+							// 更新文章信息
+							this.articleInfo = res.data.data;
+							this.content = res.data.data.content;
+							this.home_image = res.data.data.images;
+
+						} else {
+							uni.showToast({
+								title: '获取信息失败',
+								icon: 'none'
+							});
+						}
+					},
+					complete: (com) => {
+						// uni.hideLoading();
+					},
+					fail: (e) => {
+						console.log("请求失败:", e);
+						uni.showToast({
+							title: '网络请求失败',
+							icon: 'none'
+						});
+					}
+				});
+			},
+			loadCommentData() {
+				uni.request({
+					url: this.$apiHost + '/Article/getcomments',
+					data: {
+						uuid: getApp().globalData.uuid,
+						type: 'work',
+						id: this.arcID,
+						page: 1,
+						limit: 10
+					},
+					header: {
+						"content-type": "application/json",
+						'sign': getApp().globalData.headerSign
+					},
+					success: (res) => {
+						console.log("评论列表:", res.data);
+						if (res.data.success == "yes") {
+							this.$set(this, 'tableData', res.data.list);
+							this.tableTotal = res.data.total;
+							console.log("tabddd", this.tableData)
+						} else {
+							uni.showToast({
+								title: '获取评论列表失败',
+								icon: 'none'
+							});
+						}
+					},
+					complete: (com) => {
+						// uni.hideLoading();
+					},
+					fail: (e) => {
+						console.log("----e:", e);
+					}
+				});
+			},
+
+
+			// 唤起新评论弹框
+			openComment() {
+				let ccRef = this.$refs["ccRef"];
+				ccRef.newCommentFun();
+			},
+			// 点赞回调事件
+			likeFun({
+				params
+			}, callback) {
+				console.log("likeFun", params);
+				uni.request({
+					url: this.$apiHost + '/Article/zanComment',
+					data: {
+						uuid: getApp().globalData.uuid,
+						id: params.id
+					},
+					header: {
+						"content-type": "application/json",
+						'sign': getApp().globalData.headerSign
+					},
+					success: (res) => {
+						console.log("点赞结果:", res.data);
+						if (res.data.success !== "yes") {
+							callback(res); // 请求失败时重置点赞效果
+						}
+					},
+					fail: (e) => {
+						console.log("点赞失败:", e);
+						callback(e); // 请求失败时重置点赞效果
+					}
+				});
+			},
+			// 文章点赞
+			likeArticle() {
+				uni.request({
+					url: this.$apiHost + '/Work/zanTA',
+					data: {
+						uuid: getApp().globalData.uuid,
+						id: this.arcID
+					},
+					header: {
+						"content-type": "application/json",
+						'sign': getApp().globalData.headerSign
+					},
+					success: (res) => {
+						console.log("点赞结果:", res.data);
+						if (res.data.success === "yes") {
+							// 更新点赞状态
+							if (!this.articleInfo.is_like) {
+								this.articleInfo.like_count = (this.articleInfo.like_count || 0) + 1;
+								this.articleInfo.is_like = true;
+								uni.showToast({
+									title: '点赞成功',
+									icon: 'none'
+								});
+							} else {
+								this.articleInfo.like_count = (this.articleInfo.like_count || 0) - 1;
+								this.articleInfo.is_like = false;
+								uni.showToast({
+									title: res.data.str,
+									icon: 'none'
+								});
+							}
+						} else {
+							uni.showToast({
+								title: res.data.str,
+								icon: 'none'
+							});
+						}
+					},
+					fail: (e) => {
+						console.log("点赞失败:", e);
+						uni.showToast({
+							title: '网络请求失败',
+							icon: 'none'
+						});
+					}
+				});
+			},
+
+			// 分享文章
+			shareArticle() {
+				// 如果在微信小程序环境
+				if (uni.getSystemInfoSync().platform === 'mp-weixin') {
+					uni.showShareMenu({
+						withShareTicket: true,
+						menus: ['shareAppMessage', 'shareTimeline']
+					});
+				} else {
+					// 其他环境，如APP
+					uni.share({
+						provider: "weixin",
+						scene: "WXSceneSession",
+						type: 0,
+						title: this.articleInfo.title,
+						summary: this.articleInfo.content.substring(0, 40) + "...",
+						imageUrl: this.home_image,
+						success: function(res) {
+							console.log("分享成功：" + JSON.stringify(res));
+						},
+						fail: function(err) {
+							console.log("分享失败：" + JSON.stringify(err));
+						}
+					});
+				}
+			},
+			// 评论回调事件
+			replyFun({
+				params
+			}, callback) {
+				// params = {
+				// 	...params,
+				// 	user_id: this.myInfo.user_id, // 用户id
+				// 	user_name: this.myInfo.user_name, // 用户名
+				// 	user_avatar: this.myInfo.user_avatar, // 用户头像地址
+				// 	user_content: this.commentValue, // 用户评论内容
+				// 	is_like: false, // 是否点赞
+				// 	like_count: 0, // 点赞数统计
+				// 	create_time: "刚刚", // 创建时间
+				// 	owner: true, // 是否为所有者 所有者可以进行删除 管理员默认true
+				// };
+				console.log("replyFun", {
+					uuid: getApp().globalData.uuid,
+					type: 'work',
+					article_id: this.arcID, // 文章ID
+					content: params.user_content, // 评论内容
+					parent_id: params.parent_id || 0, // 父评论ID
+					reply_id: params.reply_id || 0, // 回复的评论ID
+					reply_name: params.reply_name || '' // 被回复人名称
+				});
+				uni.request({
+					url: this.$apiHost + '/Article/newComment',
+					data: {
+						uuid: getApp().globalData.uuid,
+						type: 'work',
+						article_id: this.arcID, // 文章ID
+						content: params.user_content, // 评论内容
+						parent_id: params.parent_id || 0, // 父评论ID
+						reply_id: params.reply_id || 0, // 回复的评论ID
+						reply_name: params.reply_name || '' // 被回复人名称
+					},
+					header: {
+						"content-type": "application/json",
+						'sign': getApp().globalData.headerSign
+					},
+					success: (res) => {
+						console.log("评论结果:", res.data);
+						if (res.data.success === "yes") {
+							callback(res.data); // 评论成功，传入后端返回的数据
+						}
+					},
+					fail: (e) => {
+						console.log("评论失败:", e);
+						uni.showToast({
+							title: '评论失败，请重试',
+							icon: 'none'
+						});
+					}
+				});
+			},
+			/** 删除回调事件
+			 * mode 删除模式
+			 * -- bind: 当被删除的一级评论存在回复评论, 那么该评论内容变更显示为[当前评论内容已被移除]
+			 * -- only: 仅删除当前评论(后端删除相关联的回复评论, 否则总数显示不对)
+			 * -- all : 删除所有评论包括回复评论 前端遍历子评论上报
+			 */
+
+			deleteFun({
+				params,
+				mode
+			}, callback) {
+				console.log("deleteFun", {
+					params,
+					mode
+				});
+				// 将params转换为逗号分隔的字符串
+				const idsString = Array.isArray(params) ? params.join(',') : params.toString();
+
+				console.log("删除评论", idsString, mode)
+				uni.request({
+					url: this.$apiHost + '/Article/delComment',
+					data: {
+						uuid: getApp().globalData.uuid,
+						ids: idsString, // 将params转换为逗号分隔的字符串传递给ids
+						mode: mode
+					},
+					header: {
+						"content-type": "application/json",
+						'sign': getApp().globalData.headerSign
+					},
+					success: (res) => {
+						console.log("删除结果:", res.data);
+						if (res.data.success === "yes") {
+							callback(res);
+						}
+					},
+					fail: (e) => {}
+				});
+				// switch (mode) {
+				// 	case "bind":
+				// 		// 逻辑: 调用接口进行评论内容修改 update
+				// 		setTimeout(() => callback(), 500); // 目前为了展示效果, 直接执行callback
+				// 		break;
+				// 	case "only":
+				// 		// 逻辑: 调用接口删除一个评论 delete
+				// 		setTimeout(() => callback(), 500); // 目前为了展示效果, 直接执行callback
+				// 		break;
+				// 	default:
+				// 		// all
+				// 		// 逻辑: 调用接口删除多个评论 [delete]
+				// 		setTimeout(() => callback(), 500); // 目前为了展示效果, 直接执行callback
+				// 		break;
+				// }
+			},
+			// 切换音频播放状态
+			toggleAudio() {
+				if (!this.articleInfo.result_audio) return;
+
+				if (this.isPlaying) {
+					this.audioPlayer.pause();
+					this.isPlaying = false;
+				} else {
+					this.audioPlayer.src = this.articleInfo.result_audio;
+					this.audioPlayer.play();
+					this.isPlaying = true;
+				}
+			},
+		}
+	}
+</script>
+
+<style scoped lang="scss">
+	@import 'workDetail.scss';
+</style>

pages/make/fabuArticle.vue

@@ -269,12 +269,6 @@
 								that.ainfo.num = '';
 								that.img_list = [];
 							}
-							// that.getInfo();
-							// setTimeout(function() {
-							// 	uni.redirectTo({
-							// 		url: '/pages/Work/detail_fuwu?skey=' + that.skey + '&id=' + res.data.tid
-							// 	});
-							// },2000);
 						} else {}
 						this.is_submit = 0;
 

pages/make/index.vue

@@ -5,12 +5,12 @@
 			<text class="title">星球造物</text>
 			<view class="currency-area">
 				<view class="coin-box">
-					<image src="/static/icon/coin.png" class="coin-icon"></image>
-					<text class="coin-count">999</text>
+					<image src="/static/icon/coin_m.png" mode="aspectFit"></image>
+					<text>{{myinfo.num_gmm}}</text>
 				</view>
 				<view class="gold-box">
-					<image src="/static/icon/gold.png" class="gold-icon"></image>
-					<text class="gold-count">2</text>
+					<image src="/static/icon/coin_cd.png" mode="aspectFit"></image>
+					<text>{{myinfo.num_gmd}}</text>
 				</view>
 			</view>
 		</view>
@@ -79,7 +79,8 @@
 
 		<!-- 引导教程区域 -->
 		<view class="tutorial">
-			<view class="tutorial-block" @click="handleTutorialClick(index)" v-for="(tutorial, index) in 5" :key="index">
+			<view class="tutorial-block" @click="handleTutorialClick(index)" v-for="(tutorial, index) in 5"
+				:key="index">
 				<text class="tutorial-title">引导教程{{ index + 1 }}</text>
 				<view class="tutorial-content">
 					<!-- 教程内容将在这里添加 -->
@@ -91,164 +92,63 @@
 </template>
 
 <script>
-	import sortble from "@/components/sortble/sortble.vue";
 	import tabbarView from "@/components/tabbar/tabbar.vue";
-	import pageNavbar from "@/components/page-navbar/page-navbar.vue";
-	import wWaterfall from "@/components/w-waterfall/w-waterfall.vue";
 	import tabbar from "@/mixins/tabbar";
-	import swiperItemList from "@/components/swiper-item-list/swiper-item-list.vue";
-	import card from "@/components/card/card.vue";
 	export default {
 		components: {
-			sortble,
 			tabbarView,
-			pageNavbar,
-			wWaterfall,
-			swiperItemList
 		},
 		mixins: [tabbar],
 		data() {
 			return {
-				refreshing: false,
-				loadinging: false,
+				myinfo: {},
 				windowHeight: uni.getWindowInfo().windowHeight,
-				bannerList: [
-					'https://e.zhichao.art/AI_images/1112 (1).png',
-					'https://e.zhichao.art/AI_images/1112 (101).png',
-					'https://e.zhichao.art/AI_images/1112 (102).png',
-				],
-				cardList: [{
-					img: '/static/img/img-1.png',
-					bgimg: '/static/image/bg-2.png'
-				}, {
-					img: '/static/img/img-3.png',
-					bgimg: '/static/image/bg-3.png'
-				}, {
-					img: '/static/img/img-2.png',
-					bgimg: '/static/image/bg-1.png'
-				}, ],
-				list: [], // 瀑布流全部数据
-				dataList: [],
-				tabList: ['收藏', '关注', '推荐', '音频', '视频', '图片'],
 				tabCurrent: 0
 			}
 		},
-		onLoad() {
-			this.getData().then(res => {
-				this.list = res.data;
-			});
+		onLoad() {},
+		onShow() {
+			this.getMyInfo();
 		},
 
 		// 下拉刷新数据
 		methods: {
-			goMake() {
-				uni.navigateTo({
-					url: '/pages/make/make'
+			getMyInfo() {
+				uni.request({
+					url: this.$apiHost + '/My/getnum',
+					method: 'GET',
+					header: {
+						'content-type': 'application/json',
+						'sign': getApp().globalData.headerSign
+					},
+					data: {
+						uuid: getApp().globalData.uuid
+					},
+					success: (res) => {
+						console.log("获取用户信息：", res.data);
+						this.myinfo = res.data
+					}
 				})
-			},
-			goMake2() {
-				uni.navigateTo({
-					url: '/pages/make/make2'
-				})
-			},
-			queryList() {
-				this.getData().then(res => {
-					this.list = res.data;
-					this.$refs.paging.complete(this.list);
-				});
-			},
-			async init() {
-				const {
-					data
-				} = await this.getData();
-				this.list.push.apply(this.list, data);
+
 			},
 			tabChange(index) {
 				this.tabCurrent = index;
 			},
-			// swiper change时触发
-			swiperChange(e) {
-				let current = e.target.current || e.detail.current;
-				this.tabChange(current);
-			},
-			queryData(params) {
-				const {
-					pageNo,
-					pageSize,
-					type,
-					complete
-				} = params;
-				this.getData(pageNo, pageSize).then(res => {
-					const dataList = complete(res.data);
-					this.list = pageNo !== 1 ? [...this.list, ...dataList] : dataList;
-				});
-			},
-			// 模拟的后端数据
-			getData(pageNo, pageSize) {
-				return new Promise((resolve) => {
-					const imgs = [{
-							url: 'https://e.zhichao.art/AI_images/1112 (103).png',
-						},
-						{
-							url: 'https://e.zhichao.art/AI_images/1112 (104).png',
-						},
-						{
-							url: 'https://e.zhichao.art/AI_images/1112 (106).png',
-						},
-						{
-							url: 'https://e.zhichao.art/AI_images/1112 (109).png',
-						},
-						{
-							url: 'https://e.zhichao.art/AI_images/1112 (111).png',
-						},
-						{
-							url: 'https://e.zhichao.art/AI_images/1112 (112).png',
-						},
-						{
-							url: 'https://e.zhichao.art/AI_images/1112 (116).png',
-						},
-						{
-							url: 'https://e.zhichao.art/AI_images/1112 (106).png',
-						},
-						{
-							url: 'https://e.zhichao.art/AI_images/1112 (109).png',
-						},
-						{
-							url: 'https://e.zhichao.art/AI_images/1112 (111).png',
-						},
-						{
-							url: 'https://e.zhichao.art/AI_images/1112 (112).png',
-						},
-						{
-							url: 'https://e.zhichao.art/AI_images/1112 (116).png',
-						}
-					];
-					let list = [];
-					const doFn = (i) => {
-						const randomIndex = Math.floor(Math.random() * 10);
-						return {
-							allowEdit: i == 0,
-							image: imgs[randomIndex].url,
-							w: imgs[randomIndex].width,
-							h: imgs[randomIndex].height,
-							title: i % 2 == 0 ? `玛丽` : `凌音`,
-							desc: i % 2 == 0 ?
-								`欢迎使用uv-ui，uni-app生态专用的UI框架` : `开发者编写一套代码， 可发布到iOS、Android、H5、以及各种小程序`
-						}
-					};
-					// 模拟异步
-					setTimeout(() => {
-						for (let i = 0; i < 20; i++) {
-							list.push(doFn(i));
-						}
-						resolve({
-							data: list
-						});
-					}, 200)
-				})
-			},
 			handleCardClick(type) {
 				console.log('Card clicked:', type);
+				if (type == 'cube') {
+					uni.navigateTo({
+						url: '/pages/makedetail/makeImgDetail'
+					})
+				} else if (type == 'music') {
+					uni.navigateTo({
+						url: '/pages/makedetail/makeMusicDetail'
+					})
+				} else {
+					uni.showToast({
+						title: '待开放'
+					})
+				}
 			},
 			handleTutorialClick(index) {
 				console.log('Tutorial clicked:', index + 1);

pages/makedetail/makeDetail.scss

@@ -0,0 +1,539 @@
+// 导入FontAwesome
+@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css');
+
+page {
+	background-color: #ffffff;
+	width: 100%;
+	color: #333;
+	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
+}
+.page {
+	background-color: #ffffff;
+	width: 100%;
+}
+
+/* 自定义导航栏样式 */
+.custom-navbar {
+	display: flex;
+	flex-direction: row;
+	align-items: center;
+	justify-content: space-between;
+	width: 100%;
+	height: 90rpx;
+	padding: 0 20rpx;
+	padding-top: var(--status-bar-height);
+	background-color: #ffffff;
+	position: sticky;
+	top: 0;
+	z-index: 100;
+	
+	.navbar-left {
+		width: 80rpx;
+		height: 80rpx;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		
+		.fa-angle-left {
+			font-size: 48rpx;
+			color: #333;
+		}
+	}
+	
+	.navbar-center {
+		flex: 1;
+		display: flex;
+		justify-content: flex-start;
+		align-items: center;
+		margin-left: 10rpx;
+		
+		.navbar-title {
+			display: flex;
+			align-items: center;
+			
+			.navbar-avatar {
+				width: 50rpx;
+				height: 50rpx;
+				border-radius: 25rpx;
+				margin-right: 10rpx;
+			}
+			
+			.navbar-text {
+				font-size: 32rpx;
+				font-weight: bold;
+				color: #333;
+				margin-right: 10rpx;
+			}
+			
+			.navbar-badge {
+				font-size: 22rpx;
+				color: #f0ad4e;
+				background-color: rgba(240, 173, 78, 0.1);
+				padding: 2rpx 10rpx;
+				border-radius: 10rpx;
+				border: 1rpx solid #f0ad4e;
+			}
+		}
+	}
+	
+	.navbar-right {
+		width: 80rpx;
+		height: 80rpx;
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		
+		.fa-ellipsis-h {
+			font-size: 36rpx;
+			color: #333;
+		}
+	}
+}
+
+.header {
+	display: flex;
+	flex-direction: row;
+	justify-content: flex-start;
+	align-items: center;
+	width: 750rpx;height: 320rpx;
+	padding-top: calc(var(--status-bar-height) + 0rpx);
+	.left {
+		display: flex;flex-direction: row;width:200rpx;height:120rpx;
+		justify-content: center;
+		padding-left:50rpx;
+		image {
+			width:124rpx;height:40rpx;
+		}
+	}
+}
+.thread {
+	height: 20rpx;
+}
+.thread2 {
+	height: 60rpx;
+}
+.topUser {
+	width:750rpx;
+	height:750rpx;
+	position: relative;
+	overflow: hidden;
+	.home_image{
+		width: 100%;
+		height: 100%;
+		transition: transform 0.3s ease;
+		
+		&:active {
+			transform: scale(1.05);
+		}
+	}
+	.image-indicator {
+		position: absolute;
+		top: 30rpx;
+		right: 30rpx;
+		background-color: rgba(0, 0, 0, 0.5);
+		color: #fff;
+		padding: 8rpx 16rpx;
+		border-radius: 20rpx;
+		font-size: 24rpx;
+	}
+	.list {
+		position: absolute;
+		bottom: 20rpx;
+		width:100%;
+		display: flex;
+		flex-direction: row;
+		justify-content: center;
+		align-items: flex-end;
+		padding: 0 20rpx;
+		overflow-x: auto;
+		
+		&::-webkit-scrollbar {
+			display: none;
+		}
+		
+		.img {
+			width:84rpx;height:84rpx;margin: 0 10rpx;
+			transition: all 0.3s ease;
+			image {
+				width:84rpx;height:84rpx;border-radius: 16rpx;border: solid 4rpx #fff;
+				box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.2);
+			}
+		}
+		.active {
+			width:136rpx;height:136rpx;
+			image {
+				width:136rpx;height:136rpx;border-radius: 24rpx;border: solid 4rpx #fff;
+				box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.3);
+			}
+		}
+	}
+}
+.body {
+	width:750rpx;margin-top:-60rpx;
+	border-radius: 40rpx 40rpx 0 0;padding-top:30rpx;
+	display: flex;flex-direction: column;justify-content: flex-start;align-items: flex-start;
+	box-shadow: 0 -10rpx 20rpx rgba(0, 0, 0, 0.05);
+	position: relative;
+	z-index: 10;
+	.article-header {
+		display: flex;
+		flex-direction: column;
+		justify-content: flex-start;
+		align-items: flex-start;
+		padding: 40rpx 50rpx 20rpx;
+		width: 100%;
+		box-sizing: border-box;
+		
+		.title {
+			font-size: 40rpx;
+			font-weight: bold;
+			color: #222;
+			margin-bottom: 20rpx;
+			line-height: 1.4;
+		}
+		
+		.meta-info {
+			display: flex;
+			flex-direction: row;
+			flex-wrap: wrap;
+			color: #999;
+			font-size: 26rpx;
+			
+			.meta-item {
+				display: flex;
+				align-items: center;
+				margin-right: 30rpx;
+				margin-bottom: 10rpx;
+				
+				.meta-text {
+					margin-left: 8rpx;
+				}
+			}
+		}
+	}
+	.divider {
+		height: 1rpx;
+		background-color: #eee;
+		width: 650rpx;
+		margin: 10rpx auto 30rpx;
+	}
+	.article-content {
+		padding: 0 50rpx 40rpx;
+		width: 100%;
+		box-sizing: border-box;
+		
+		.content {
+			font-size: 32rpx;
+			color: #333;
+			line-height: 1.8;
+			text-align: justify;
+		}
+	}
+	.article-footer {
+		width: 100%;
+		padding: 20rpx 0;
+		border-top: 1rpx solid #f0f0f0;
+		
+		.action-bar {
+			display: flex;
+			justify-content: space-around;
+			align-items: center;
+			
+			.action-item {
+				display: flex;
+				flex-direction: column;
+				align-items: center;
+				padding: 20rpx 0;
+				
+				.fa {
+					font-size: 40rpx;
+					color: #666;
+					margin-bottom: 10rpx;
+					
+					&.liked {
+						color: #ff5151;
+					}
+				}
+				
+				.action-text {
+					font-size: 24rpx;
+					color: #666;
+				}
+				
+				&:active {
+					opacity: 0.7;
+				}
+			}
+		}
+	}
+}
+
+/* 底部漂浮栏样式 */
+.floating-bar {
+	position: fixed;
+	bottom: 0;
+	left: 0;
+	right: 0;
+	background-color: #fff;
+	box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.1);
+	padding: 20rpx 30rpx;
+	padding-bottom: calc(20rpx + env(safe-area-inset-bottom));
+	z-index: 100;
+	
+	.floating-bar-content {
+	  display: flex;
+	  align-items: center;
+	  
+	  .add-note-btn {
+		flex: 1;
+		height: 80rpx;
+		background-color: #f5f5f5;
+		border-radius: 40rpx;
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		margin-right: 20rpx;
+		max-width: 160rpx;
+		
+		text {
+		  font-size: 28rpx;
+		  color: #666;
+		}
+		
+		&:active {
+		  background-color: #e5e5e5;
+		}
+	  }
+	  
+	  .publish-btn {
+		flex: 3;
+		height: 80rpx;
+		background: linear-gradient(90deg, #8a2be2, #9932cc);
+		border-radius: 40rpx;
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		
+		text {
+		  font-size: 30rpx;
+		  color: #fff;
+		  font-weight: 500;
+		}
+		
+		&:active {
+		  opacity: 0.9;
+		}
+	  }
+	}
+  }
+  
+  /* 弹窗样式 */
+  .popup-mask {
+	position: fixed;
+	top: 0;
+	left: 0;
+	right: 0;
+	bottom: 0;
+	background-color: rgba(0, 0, 0, 0.5);
+	z-index: 998;
+  }
+  
+  .note-popup {
+	position: fixed;
+	bottom: 0;
+	left: 0;
+	right: 0;
+	background-color: #fff;
+	border-radius: 30rpx 30rpx 0 0;
+	z-index: 999;
+	overflow: hidden;
+	animation: slideUp 0.3s ease;
+	
+	.popup-header {
+	  padding: 30rpx;
+	  text-align: center;
+	  border-bottom: 1rpx solid #f0f0f0;
+	  
+	  .popup-title {
+		font-size: 32rpx;
+		font-weight: bold;
+		color: #333;
+	  }
+	}
+	
+	.popup-content {
+	  padding: 30rpx;
+	  
+	  .note-textarea {
+		width: 100%;
+		height: 300rpx;
+		background-color: #f8f8f8;
+		border-radius: 16rpx;
+		padding: 20rpx;
+		font-size: 28rpx;
+		color: #333;
+		box-sizing: border-box;
+	  }
+	  
+	  .word-count {
+		text-align: right;
+		font-size: 24rpx;
+		color: #999;
+		margin-top: 10rpx;
+	  }
+	}
+	
+	.popup-footer {
+	  display: flex;
+	  border-top: 1rpx solid #f0f0f0;
+	  
+	  .cancel-btn, .confirm-btn {
+		flex: 1;
+		height: 100rpx;
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		
+		text {
+		  font-size: 30rpx;
+		}
+	  }
+	  
+	  .cancel-btn {
+		background-color: #f5f5f5;
+		
+		text {
+		  color: #666;
+		}
+		
+		&:active {
+		  background-color: #e5e5e5;
+		}
+	  }
+	  
+	  .confirm-btn {
+		background-color: #8a2be2;
+		
+		text {
+		  color: #fff;
+		}
+		
+		&:active {
+		  background-color: #7a1bd2;
+		}
+	  }
+	}
+  }
+  
+  @keyframes slideUp {
+	from {
+	  transform: translateY(100%);
+	}
+	to {
+	  transform: translateY(0);
+	}
+  }
+	/* 添加新样式 */
+	.lyrics-overlay {
+		position: absolute;
+		top: 0;
+		left: 0;
+		right: 0;
+		bottom: 0;
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		background-color: rgba(0, 0, 0, 0.4);
+		padding: 30rpx;
+		
+		.lyrics-text {
+			color: #fff;
+			font-size: 36rpx;
+			text-align: center;
+			text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.5);
+			font-weight: 500;
+			line-height: 1.6;
+		}
+	}
+	
+	.play-button {
+		position: absolute;
+		top: 50%;
+		left: 50%;
+		transform: translate(-50%, -50%);
+		width: 120rpx;
+		height: 120rpx;
+		background-color: rgba(0, 0, 0, 0.6);
+		border-radius: 60rpx;
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		z-index: 10;
+		
+		.fa {
+			color: #fff;
+			font-size: 60rpx;
+		}
+		
+		&:active {
+			background-color: rgba(0, 0, 0, 0.8);
+			transform: translate(-50%, -50%) scale(0.95);
+		}
+	}
+	
+	.creation-details {
+		margin-top: 30rpx;
+		
+		.detail-item {
+			margin-bottom: 20rpx;
+			
+			.detail-label {
+				font-size: 28rpx;
+				color: #666;
+				margin-right: 10rpx;
+			}
+			
+			.detail-value {
+				font-size: 28rpx;
+				color: #333;
+			}
+		}
+	}
+	
+	.status-info {
+		margin-top: 40rpx;
+		
+		.queue-info {
+			.queue-text {
+				font-size: 28rpx;
+				color: #666;
+				margin-bottom: 10rpx;
+			}
+			
+			.progress-bar {
+				height: 16rpx;
+				background-color: #f0f0f0;
+				border-radius: 8rpx;
+				overflow: hidden;
+				
+				.progress-fill {
+					height: 100%;
+					background: linear-gradient(90deg, #2979ff, #36d6ff);
+					border-radius: 8rpx;
+				}
+			}
+		}
+	}
+	
+	.error-message {
+		margin-top: 30rpx;
+		padding: 20rpx;
+		background-color: #fff5f5;
+		border-radius: 12rpx;
+		border-left: 8rpx solid #ff5151;
+		
+		.error-text {
+			font-size: 28rpx;
+			color: #ff5151;
+		}
+	}

pages/makedetail/makeDetail.vue

@@ -0,0 +1,646 @@
+<template>
+	<view class="page">
+		<!-- 引入FontAwesome -->
+		<view>
+			<link rel="stylesheet"
+				href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
+		</view>
+
+		<!-- 顶部导航栏 -->
+		<view class="custom-navbar">
+			<view class="navbar-left" @click="goBack">
+				<text class="fa fa-angle-left"></text>
+			</view>
+			<view class="navbar-center">
+				<view class="navbar-title">
+					<image class="navbar-avatar" :src="myinfo.avatar" mode="aspectFill"></image>
+					<text class="navbar-text">{{ myinfo.nickname }}</text>
+					<text class="navbar-badge" v-if="myinfo.is_vip > 0">VIP</text>
+				</view>
+			</view>
+			<view class="navbar-right" @click="showActionSheet">
+				<text class="fa fa-ellipsis-h"></text>
+			</view>
+		</view>
+
+		<!-- 内容头图区域 -->
+		<view class="topUser">
+			<image :src="home_image" class="home_image" mode="aspectFill"></image>
+
+			<!-- 图片指示器 -->
+			<!-- <view class="image-indicator" v-if="image_list.length > 1">
+				<text>{{ selImg + 1 }}/{{ image_list.length }}</text>
+			</view> -->
+
+			<!-- 音乐类型时显示歌词 -->
+			<view class="lyrics-overlay" v-if="queueDetail.task_type == 2">
+				<text class="lyrics-text">{{ queueDetail.description }}</text>
+			</view>
+
+			<!-- 音乐类型且状态为9时显示播放按钮 -->
+			<view class="play-button" v-if="queueDetail.task_type == 2 && queueDetail.status >= 9" @click="toggleAudio">
+				<text class="fa" :class="isPlaying ? 'fa-pause' : 'fa-play'"></text>
+			</view>
+
+
+		</view>
+
+		<view class="body">
+			<view class="article-header">
+				<text class="title">{{ queueDetail.title }}</text>
+				<view class="meta-info">
+					<view class="meta-item">
+						<text class="fa fa-clock-o"></text>
+						<text class="meta-text">{{ queueDetail.create_time }}</text>
+					</view>
+					<view class="meta-item">
+						<text class="fa fa-tag"></text>
+						<text class="meta-text">{{ queueDetail.task_type == 1 ? '灵感创作' : '音乐创作' }}</text>
+					</view>
+					<view class="meta-item">
+						<text class="fa fa-circle" :style="getStatusStyle(queueDetail.status)"></text>
+						<text class="meta-text">{{ getStatusText(queueDetail.status) }}</text>
+					</view>
+				</view>
+			</view>
+
+			<view class="divider"></view>
+
+			<view class="article-content">
+				<!-- 灵感创作显示description -->
+				<view v-if="queueDetail.task_type == 1">
+					<text class="content">{{ queueDetail.description }}</text>
+				</view>
+
+				<!-- 音乐创作显示lyrics -->
+				<view v-if="queueDetail.task_type == 2">
+					<text class="content">{{ queueDetail.lyrics }}</text>
+				</view>
+
+				<!-- 显示创作详情 -->
+				<view class="creation-details" v-if="queueDetail.task_type == 1">
+					<view class="detail-item" v-if="queueDetail.action">
+						<text class="detail-label">行为动作：</text>
+						<text class="detail-value">{{ queueDetail.action }}</text>
+					</view>
+					<view class="detail-item" v-if="queueDetail.environment">
+						<text class="detail-label">主体环境：</text>
+						<text class="detail-value">{{ queueDetail.environment }}</text>
+					</view>
+					<view class="detail-item" v-if="queueDetail.subject">
+						<text class="detail-label">主体形象：</text>
+						<text class="detail-value">{{ queueDetail.subject }}</text>
+					</view>
+					<view class="detail-item" v-if="queueDetail.style">
+						<text class="detail-label">参考风格：</text>
+						<text class="detail-value">{{ queueDetail.style }}</text>
+					</view>
+				</view>
+
+				<!-- 音乐创作显示歌曲名称 -->
+				<view class="creation-details" v-if="queueDetail.task_type == 2">
+					<view class="detail-item" v-if="queueDetail.song_name">
+						<text class="detail-label">歌曲名称：</text>
+						<text class="detail-value">{{ queueDetail.song_name }}</text>
+					</view>
+				</view>
+
+				<!-- 显示状态信息 -->
+				<view class="status-info" v-if="queueDetail.status < 4">
+					<view class="queue-info">
+						<text class="queue-text">队列位置:
+							{{ queueDetail.queue_position }}/{{ queueDetail.all_position }}</text>
+						<view class="progress-bar">
+							<view class="progress-fill" :style="{ width: getProgressWidth() }"></view>
+						</view>
+					</view>
+				</view>
+
+				<!-- 显示错误信息 -->
+				<view class="error-message" v-if="queueDetail.status == 3">
+					<text class="error-text">{{ queueDetail.error_msg }}</text>
+				</view>
+			</view>
+		</view>
+
+		<view class="thread2"></view>
+
+		<!-- 音频元素 -->
+		<audio id="audioPlayer" :src="queueDetail.result_audio" style="display:none;"></audio>
+
+		<!-- 底部漂浮栏 -->
+		<view class="floating-bar" v-if="queueDetail.status == 9">
+			<view class="floating-bar-content">
+				<view class="add-note-btn" @click="showAddNotePopup">
+					<text>添加说明</text>
+				</view>
+				<view class="publish-btn" @click="publishWork">
+					<text>公布作品</text>
+				</view>
+			</view>
+		</view>
+
+		<!-- 添加说明弹窗 -->
+		<view class="popup-mask" v-if="showNotePopup" @click="closeAddNotePopup"></view>
+		<view class="note-popup" v-if="showNotePopup">
+			<view class="popup-header">
+				<text class="popup-title">添加说明</text>
+			</view>
+			<view class="popup-content">
+				<textarea class="note-textarea" v-model="noteContent" placeholder="请描述你想添加的内容。"
+					maxlength="500"></textarea>
+				<view class="word-count">{{noteContent.length}}/500</view>
+			</view>
+			<view class="popup-footer">
+				<view class="cancel-btn" @click="closeAddNotePopup">
+					<text>取消</text>
+				</view>
+				<view class="confirm-btn" @click="confirmAddNote">
+					<text>确认</text>
+				</view>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	import previewImage from '@/components/kxj-previewImage/kxj-previewImage.vue'; //引用插件
+
+	export default {
+		components: {
+			previewImage
+		},
+		data() {
+			return {
+				title: '',
+				arcID: 0,
+				selImg: 0,
+				home_image: '',
+				myinfo: {},
+				tag_list: [],
+				image_list: [],
+				imgs: [],
+				descs: [],
+				isPlaying: false,
+				audioPlayer: null,
+				showNotePopup: false,
+				noteContent: '',
+
+				// 队列详情数据
+				queueDetail: {
+					id: 0,
+					sso_id: 0,
+					task_type: 1,
+					title: '',
+					description: '',
+					action: '',
+					environment: '',
+					subject: '',
+					style: '',
+					song_name: '',
+					lyrics: '',
+					generate_uuid: '',
+					result_images: '',
+					result_audio: '',
+					queue_position: 0,
+					status: 1,
+					generate_status: 1,
+					points_cost: 0,
+					error_msg: '',
+					create_time: '',
+					update_time: '',
+					all_position: 0
+				},
+				myinfo: {}
+			}
+		},
+		onLoad(parms) {
+			let self = this;
+			this.arcID = parms.id || 3;
+			this.getMyInfo();
+		},
+		onShow() {
+			this.loadData();
+		},
+		onReady() {
+			// 获取音频元素
+			this.audioPlayer = uni.createInnerAudioContext();
+			this.audioPlayer.onEnded(() => {
+				this.isPlaying = false;
+			});
+		},
+		onUnload() {
+			// 页面卸载时停止音频播放
+			if (this.audioPlayer) {
+				this.audioPlayer.stop();
+				this.audioPlayer.destroy();
+			}
+		},
+		methods: {
+			// 返回上一页
+			goBack() {
+				uni.navigateBack({
+					delta: 1
+				});
+			},
+			getMyInfo() {
+				uni.request({
+					url: this.$apiHost + '/My/getnum',
+					method: 'GET',
+					header: {
+						'content-type': 'application/json',
+						'sign': getApp().globalData.headerSign
+					},
+					data: {
+						uuid: getApp().globalData.uuid
+					},
+					success: (res) => {
+						console.log("获取用户信息：", res.data);
+						this.myinfo = res.data
+					}
+				})
+
+			},
+			selPhoto(item, sel) {
+				this.selImg = sel;
+				this.home_image = this.image_list[sel];
+			},
+			toArr(imgs) {
+				let arr = imgs.split("|");
+				return arr;
+			},
+			previewOpen(imgs1, index) {
+				this.imgs = imgs1.split("|");
+				setTimeout(() => this.$refs.previewImage.open(index), 0)
+				// 传入当前选中的图片地址或序号
+				return; //如需测试和uni原生预览差别可注释这两行
+			},
+			// 切换音频播放状态
+			toggleAudio() {
+				if (!this.queueDetail.result_audio) return;
+
+				if (this.isPlaying) {
+					this.audioPlayer.pause();
+					this.isPlaying = false;
+				} else {
+					this.audioPlayer.src = this.queueDetail.result_audio;
+					this.audioPlayer.play();
+					this.isPlaying = true;
+				}
+			},
+			// 获取状态文本
+			getStatusText(status) {
+				const statusMap = {
+					1: '排队中',
+					2: '生成中',
+					3: '生成失败',
+					4: '已完成',
+					9: '已完成'
+				};
+				return statusMap[status] || '未知状态';
+			},
+			// 获取状态样式
+			getStatusStyle(status) {
+				const colorMap = {
+					1: '#ffa500', // 橙色 - 排队中
+					2: '#2979ff', // 蓝色 - 生成中
+					3: '#ff5151', // 红色 - 生成失败
+					4: '#4caf50', // 绿色 - 已完成
+					9: '#4caf50' // 绿色 - 已完成
+				};
+				return `color: ${colorMap[status] || '#999'}`;
+			},
+			// 获取进度条宽度
+			getProgressWidth() {
+				if (this.queueDetail.all_position === 0) return '0%';
+				const progress = (1 - (this.queueDetail.queue_position / this.queueDetail.all_position)) * 100;
+				return `${progress}%`;
+			},
+			// 加载数据
+			loadData() {
+				uni.showLoading({
+					title: '加载中...'
+				});
+
+				uni.request({
+					url: this.$apiHost + '/WorkAI/getQueueDetail',
+					data: {
+						uuid: getApp().globalData.uuid,
+						id: this.arcID
+					},
+					header: {
+						"content-type": "application/json",
+						'sign': getApp().globalData.headerSign
+					},
+					success: (res) => {
+						console.log("队列详情:", res.data);
+						if (res.data.success === "yes") {
+							// 更新队列详情
+							this.queueDetail = res.data.data;
+							this.noteContent = res.data.data.content;
+
+							// 更新图片列表
+							if (this.queueDetail.result_images && this.queueDetail.result_images !== "") {
+								this.image_list = this.queueDetail.result_images.split(",");
+								this.home_image = this.image_list[0];
+							} else {
+								this.home_image = "../../static/home/avator.png";
+							}
+
+							// 如果是音频类型，设置音频源
+							if (this.queueDetail.task_type == 2 && this.queueDetail.result_audio) {
+								this.audioPlayer.src = this.queueDetail.result_audio;
+							}
+						} else {
+							uni.showToast({
+								title: '获取详情失败',
+								icon: 'none'
+							});
+						}
+					},
+					complete: () => {
+						uni.hideLoading();
+					},
+					fail: (e) => {
+						console.log("请求失败:", e);
+						uni.showToast({
+							title: '网络请求失败',
+							icon: 'none'
+						});
+					}
+				});
+			},
+			showActionSheet() {
+				// 显示操作列表
+				uni.showActionSheet({
+					itemList: ['修改封面', '删除作品'],
+					success: (res) => {
+						switch (res.tapIndex) {
+							case 0:
+								// 修改封面
+								this.editCover();
+								break;
+							case 1:
+								// 删除作品
+								this.deleteWork();
+								break;
+						}
+					},
+					fail: (res) => {
+						console.log(res.errMsg);
+					}
+				});
+			},
+			// 修改封面
+			editCover() {
+				var _self = this;
+				uni.chooseImage({
+					count: 1,
+					sizeType: ['compressed'],
+					sourceType: ['album', 'camera'],
+					success: function(res) {
+						console.log('res:', res)
+						if (res.tempFilePaths.length > 0) {
+							_self.imglocal = res.tempFilePaths[0]
+							const tempFilePaths = res.tempFilePaths[0];
+							console.log('tempFilePaths:', tempFilePaths);
+							const uploadTask = uni.uploadFile({
+								url: _self.$apiHost + '/Xweb/upload_img?skey=' + _self.skey,
+								filePath: res.tempFilePaths[0],
+								name: 'file',
+								success: function(uploadFileRes) {
+									let resdata = JSON.parse(uploadFileRes.data)
+									console.log('Success11:', uploadFileRes);
+									console.log('Success21:', resdata);
+									if (resdata.success == 'yes') {
+										_self.home_image = resdata.url;
+										// 调用修改封面接口
+										uni.request({
+											url: _self.$apiHost + '/WorkAI/queueAction',
+											method: 'GET',
+											data: {
+												uuid: getApp().globalData.uuid,
+												act: 'editImg',
+												result_images: resdata.url,
+												id: _self.arcID
+											},
+											header: {
+												'content-type': 'application/json',
+												'sign': getApp().globalData.headerSign
+											},
+											success: (res) => {
+												if (res.data.success === "yes") {
+													uni.showToast({
+														title: '修改封面成功',
+														icon: 'success'
+													});
+												} else {
+													uni.showToast({
+														title: '修改封面失败',
+														icon: 'none'
+													});
+												}
+											},
+											fail: () => {
+												uni.showToast({
+													title: '修改封面失败',
+													icon: 'none'
+												});
+											}
+										});
+									}
+								},
+								fail: function(uploadFileFail) {
+									console.log('Error:', uploadFileFail.data);
+									uni.showToast({
+										title: '图片上传失败',
+										icon: 'none'
+									});
+								}
+							});
+						}
+					},
+					error: function(e) {
+						console.log(e);
+						uni.showToast({
+							title: '选择图片失败',
+							icon: 'none'
+						});
+					}
+				});
+			},
+			// 删除作品
+			deleteWork() {
+				// 显示确认对话框
+				uni.showModal({
+					title: '确认删除',
+					content: '确定要删除这个作品吗？',
+					confirmColor: '#ff5151',
+					success: (res) => {
+						if (res.confirm) {
+							// 用户点击确定，执行删除操作
+							this.confirmDelete();
+						}
+					}
+				});
+			},
+			// 确认删除
+			confirmDelete() {
+				uni.showLoading({
+					title: '删除中...'
+				});
+
+				uni.request({
+					url: this.$apiHost + '/WorkAI/queueAction',
+					method: 'GET',
+					data: {
+						uuid: getApp().globalData.uuid,
+						act: 'del',
+						id: this.arcID
+					},
+					header: {
+						'content-type': 'application/json',
+						'sign': getApp().globalData.headerSign
+					},
+					success: (res) => {
+						uni.hideLoading();
+						if (res.data.success === "yes") {
+							uni.showToast({
+								title: '删除成功',
+								icon: 'success'
+							});
+							// 删除成功后返回上一页
+							setTimeout(() => {
+								uni.navigateBack({
+									delta: 1
+								});
+							}, 1500);
+						} else {
+							uni.showToast({
+								title: '删除失败',
+								icon: 'none'
+							});
+						}
+					},
+					fail: () => {
+						uni.hideLoading();
+						uni.showToast({
+							title: '删除失败',
+							icon: 'none'
+						});
+					}
+				});
+			},
+			// 显示添加说明弹窗
+			showAddNotePopup() {
+				this.showNotePopup = true;
+			},
+			// 关闭添加说明弹窗
+			closeAddNotePopup() {
+				this.showNotePopup = false;
+			},
+			// 确认添加说明
+			confirmAddNote() {
+				if (!this.noteContent.trim()) {
+					uni.showToast({
+						title: '请输入说明内容',
+						icon: 'none'
+					});
+					return;
+				}
+
+				uni.showLoading({
+					title: '保存中...'
+				});
+
+				uni.request({
+					url: this.$apiHost + '/WorkAI/queueAction',
+					method: 'GET',
+					data: {
+						uuid: getApp().globalData.uuid,
+						act: 'editContent',
+						content: this.noteContent,
+						id: this.arcID
+					},
+					header: {
+						'content-type': 'application/json',
+						'sign': getApp().globalData.headerSign
+					},
+					success: (res) => {
+						uni.hideLoading();
+						if (res.data.success === "yes") {
+							uni.showToast({
+								title: '添加说明成功',
+								icon: 'success'
+							});
+							this.showNotePopup = false;
+							// this.noteContent = '';
+							// 重新加载数据
+							this.loadData();
+						} else {
+							uni.showToast({
+								title: '添加说明失败',
+								icon: 'none'
+							});
+						}
+					},
+					fail: () => {
+						uni.hideLoading();
+						uni.showToast({
+							title: '添加说明失败',
+							icon: 'none'
+						});
+					}
+				});
+			},
+			// 发布作品
+			publishWork() {
+				uni.showLoading({
+					title: '发布中...'
+				});
+
+				uni.request({
+					url: this.$apiHost + '/WorkAI/queueAction',
+					method: 'GET',
+					data: {
+						uuid: getApp().globalData.uuid,
+						act: 'fabu',
+						id: this.arcID
+					},
+					header: {
+						'content-type': 'application/json',
+						'sign': getApp().globalData.headerSign
+					},
+					success: (res) => {
+						console.log("resddd", res.data);
+						uni.hideLoading();
+						if (res.data.success === "yes") {
+							uni.showToast({
+								title: '发布成功',
+								icon: 'success'
+							});
+							// 重新加载数据
+							// this.loadData();
+						} else {
+							uni.showToast({
+								title: res.data.str || '发布失败',
+								icon: 'none'
+							});
+						}
+					},
+					fail: () => {
+						uni.hideLoading();
+						uni.showToast({
+							title: '发布失败',
+							icon: 'none'
+						});
+					}
+				});
+			}
+		}
+	}
+</script>
+
+<style scoped lang="scss">
+	@import 'makeDetail.scss';
+</style>

pages/makedetail/makeImgDetail.scss

@@ -1,86 +1,212 @@
 .makedetail-container {
   min-height: 100vh;
-  background: #f5f5f5;
-  padding: 0 20rpx;
+  background: #f8f9fa;
+  padding: 0 0rpx;
+  font-family: 'PingFang SC', 'Helvetica Neue', Arial, sans-serif;
 
-  .header {
+.nav-bar {
+  width: 750rpx;
+  height: 96rpx;
+  background-color: #fff;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0 24rpx;
+  box-sizing: border-box;
+  border-bottom: 1rpx solid #f0f0f0;
+  box-shadow: 0 2rpx 10rpx rgba(0,0,0,0.05);
+
+  .left {
+    width: 120rpx;
+    .uni-btn-icon {
+      font-size: 50rpx;
+      color: #333;
+      transition: color 0.2s;
+      
+      &:active {
+        color: #2b85e4;
+      }
+    }
+  }
+
+  .center {
+    flex: 1;
+    text-align: center;
+    font-size: 34rpx;
+    font-weight: 600;
+    color: #333;
+  }
+
+  .right {
+    width: 260rpx;
     display: flex;
     align-items: center;
-    height: 88rpx;
-    padding: 0 20rpx;
-    
-    .back-icon {
-      font-size: 40rpx;
-    }
+    font-size: 28rpx;
     
-    .title {
-      flex: 1;
-      text-align: center;
-      font-size: 32rpx;
-      font-weight: 500;
+    image {
+      width: 42rpx;
+      height: 42rpx;
     }
     
-    .right-info {
+    .coinM, .coinC {
       display: flex;
+      flex-direction: row;
       align-items: center;
+      justify-content: center;
+      border: solid 1px #f0f0f0;
+      border-radius: 40rpx;
+      background: rgba(250,250,250,0.9);
+      transition: transform 0.2s, box-shadow 0.2s;
+      box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.05);
+      margin-left: 16rpx;
       
-      .coin, .diamond {
-        margin-left: 20rpx;
+      &:active {
+        transform: scale(0.98);
       }
+      
+      text {
+        padding: 6rpx 20rpx;
+        font-weight: 500;
+      }
+    }
+    
+    .coinM {
+      border-color: #ffecb3;
+      background: rgba(255,248,225,0.4);
+    }
+    
+    .coinC {
+      border-color: #e3f2fd;
+      background: rgba(227,242,253,0.4);
     }
   }
+}
+
 
   .preview-section {
-    margin: 20rpx 0;
+    margin: 30rpx 30rpx;
+    
+    .preview-title {
+      font-size: 30rpx;
+      font-weight: 600;
+      margin-bottom: 20rpx;
+      color: #333;
+      position: relative;
+      padding-left: 20rpx;
+      
+      &:before {
+        content: '';
+        position: absolute;
+        left: 0;
+        top: 6rpx;
+        height: 32rpx;
+        width: 8rpx;
+        background: #2b85e4;
+        border-radius: 4rpx;
+      }
+    }
     
     .preview-card {
-      height: 400rpx;
-      background: linear-gradient(to bottom right, #87CEEB, #90EE90);
-      border-radius: 20rpx;
+      height: 420rpx;
+      background: linear-gradient(135deg, #3494E6, #EC6EAD);
+      border-radius: 24rpx;
       display: flex;
       flex-direction: column;
       align-items: center;
       justify-content: center;
+      box-shadow: 0 8rpx 30rpx rgba(52, 148, 230, 0.15);
+      overflow: hidden;
+      position: relative;
+      
+      &:before {
+        content: '';
+        position: absolute;
+        width: 200%;
+        height: 200%;
+        background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0) 60%);
+        top: -50%;
+        left: -50%;
+      }
+      
+      .loading-icon {
+        width: 80rpx;
+        height: 80rpx;
+        margin-bottom: 20rpx;
+        animation: spin 2s linear infinite;
+      }
+      
+      @keyframes spin {
+        from { transform: rotate(0deg); }
+        to { transform: rotate(360deg); }
+      }
       
       .loading-text {
         color: #fff;
-        font-size: 32rpx;
-        margin-bottom: 10rpx;
+        font-size: 34rpx;
+        margin-bottom: 16rpx;
+        font-weight: 500;
+        text-shadow: 0 2rpx 4rpx rgba(0,0,0,0.2);
       }
       
       .sub-text {
-        color: rgba(255,255,255,0.8);
-        font-size: 24rpx;
+        color: rgba(255,255,255,0.9);
+        font-size: 26rpx;
       }
     }
   }
 
+  .description-section, .action-section, .environment-section, .image-section, .style-section {
+    margin: 30rpx 30rpx;
+    background: #fff;
+    border-radius: 20rpx;
+    padding: 30rpx;
+    box-shadow: 0 4rpx 16rpx rgba(0,0,0,0.05);
+  }
+
   .section-title {
-    font-size: 28rpx;
-    font-weight: 500;
-    margin-bottom: 20rpx;
+    font-size: 30rpx;
+    font-weight: 600;
+    margin-bottom: 24rpx;
+    color: #333;
+    position: relative;
     
     .required {
       color: #ff4d4f;
+      margin-left: 4rpx;
     }
   }
 
   .input-area {
     width: 100%;
     height: 200rpx;
-    background: #fff;
-    border-radius: 12rpx;
-    padding: 20rpx;
+    background: #f9f9f9;
+    border-radius: 16rpx;
+    padding: 24rpx;
     font-size: 28rpx;
+    border: 1rpx solid #f0f0f0;
+    transition: border-color 0.3s, box-shadow 0.3s;
+    
+    &:focus {
+      border-color: #2b85e4;
+      box-shadow: 0 0 0 2rpx rgba(43,133,228,0.2);
+    }
   }
 
   .input-box {
     width: 100%;
-    height: 80rpx;
-    background: #fff;
-    border-radius: 12rpx;
-    padding: 0 20rpx;
-    margin-bottom: 20rpx;
+    height: 88rpx;
+    background: #f9f9f9;
+    border-radius: 16rpx;
+    padding: 0 24rpx;
+    margin-bottom: 24rpx;
+    border: 1rpx solid #f0f0f0;
+    transition: border-color 0.3s, box-shadow 0.3s;
+    
+    &:focus {
+      border-color: #2b85e4;
+      box-shadow: 0 0 0 2rpx rgba(43,133,228,0.2);
+    }
   }
 
   .tag-group {
@@ -89,57 +215,101 @@
     gap: 20rpx;
     
     .tag {
-      padding: 10rpx 30rpx;
-      background: #fff;
-      border-radius: 30rpx;
+      padding: 12rpx 32rpx;
+      background: #f5f7fa;
+      border-radius: 36rpx;
       font-size: 26rpx;
+      color: #666;
+      transition: all 0.3s;
+      border: 1rpx solid transparent;
+      box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.03);
+      
+      &:active {
+        background: #e3f2fd;
+        color: #2b85e4;
+        border-color: #2b85e4;
+      }
     }
   }
 
   .style-scroll {
     white-space: nowrap;
+    padding: 10rpx 0;
     
     .style-item {
       display: inline-block;
-      margin-right: 20rpx;
+      margin-right: 24rpx;
       text-align: center;
       flex-direction: column;
+      transition: transform 0.3s;
+      
+      &:active {
+        transform: scale(0.97);
+      }
       
       image {
-        width: 160rpx;
-        height: 160rpx;
-        border-radius: 12rpx;
-        margin-bottom: 8rpx;
+        width: 180rpx;
+        height: 180rpx;
+        border-radius: 16rpx;
+        margin-bottom: 12rpx;
+        box-shadow: 0 4rpx 12rpx rgba(0,0,0,0.1);
+        transition: all 0.3s;
+        border: 4rpx solid transparent;
       }
       
       text {
         display: block;
-        font-size: 24rpx;
-        color: #333;
+        font-size: 26rpx;
+        color: #666;
+        transition: color 0.3s;
       }
     }
   }
 
   .bottom-button {
-    padding: 40rpx 0;
+    padding: 40rpx 30rpx;
     
     .generate-btn {
       width: 100%;
-      height: 88rpx;
-      background: #333;
+      height: 96rpx;
+      background: linear-gradient(135deg, #2b85e4, #1976d2);
       color: #fff;
-      border-radius: 44rpx;
-      font-size: 32rpx;
+      border-radius: 48rpx;
+      font-size: 34rpx;
+      font-weight: 600;
       display: flex;
       align-items: center;
       justify-content: center;
+      box-shadow: 0 8rpx 20rpx rgba(43,133,228,0.3);
+      letter-spacing: 2rpx;
+      transition: transform 0.2s, box-shadow 0.2s;
+      
+      &:active {
+        transform: scale(0.98);
+        box-shadow: 0 4rpx 10rpx rgba(43,133,228,0.2);
+      }
     }
     
     .promotion-link {
       text-align: center;
-      margin-top: 20rpx;
+      margin-top: 30rpx;
       color: #2b85e4;
-      font-size: 24rpx;
+      font-size: 26rpx;
+      
+      text {
+        position: relative;
+        
+        &:after {
+          content: '';
+          position: absolute;
+          width: 100%;
+          height: 1rpx;
+          background: currentColor;
+          bottom: -4rpx;
+          left: 0;
+          opacity: 0.5;
+        }
+      }
     }
   }
 
@@ -147,13 +317,18 @@
     display: flex;
     justify-content: space-between;
     align-items: center;
-    margin-bottom: 20rpx;
+    margin-bottom: 24rpx;
 
     .clear-text {
       display: flex;
       align-items: center;
       font-size: 24rpx;
-      color: #666;
+      color: #999;
+      transition: color 0.3s;
+      
+      &:active {
+        color: #ff4d4f;
+      }
 
       image {
         width: 28rpx;
@@ -163,32 +338,22 @@
     }
   }
 
-  .preview-title {
-    font-size: 28rpx;
-    font-weight: 500;
-    margin-bottom: 20rpx;
-  }
-
-  .loading-icon {
-    width: 60rpx;
-    height: 60rpx;
-    margin-bottom: 20rpx;
-  }
-
   .word-count {
     text-align: right;
     font-size: 24rpx;
     color: #999;
-    margin-top: 10rpx;
+    margin-top: 12rpx;
   }
 
   .style-item {
     &.active {
       image {
         border: 4rpx solid #2b85e4;
+        box-shadow: 0 0 0 2rpx rgba(43,133,228,0.3);
       }
       text {
         color: #2b85e4;
+        font-weight: 500;
       }
     }
   }
@@ -210,4 +375,108 @@
       }
     }
   }
-} 
+} 
+/* 添加新样式 */
+.lyrics-overlay {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background-color: rgba(0, 0, 0, 0.4);
+  padding: 30rpx;
+
+  .lyrics-text {
+    color: #fff;
+    font-size: 36rpx;
+    text-align: center;
+    text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.5);
+    font-weight: 500;
+    line-height: 1.6;
+  }
+}
+
+.play-button {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: 120rpx;
+  height: 120rpx;
+  background-color: rgba(0, 0, 0, 0.6);
+  border-radius: 60rpx;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  z-index: 10;
+
+  .fa {
+    color: #fff;
+    font-size: 60rpx;
+  }
+
+  &:active {
+    background-color: rgba(0, 0, 0, 0.8);
+    transform: translate(-50%, -50%) scale(0.95);
+  }
+}
+
+.creation-details {
+  margin-top: 30rpx;
+
+  .detail-item {
+    margin-bottom: 20rpx;
+
+    .detail-label {
+      font-size: 28rpx;
+      color: #666;
+      margin-right: 10rpx;
+    }
+
+    .detail-value {
+      font-size: 28rpx;
+      color: #333;
+    }
+  }
+}
+
+.status-info {
+  margin-top: 40rpx;
+
+  .queue-info {
+    .queue-text {
+      font-size: 28rpx;
+      color: #666;
+      margin-bottom: 10rpx;
+    }
+
+    .progress-bar {
+      height: 16rpx;
+      background-color: #f0f0f0;
+      border-radius: 8rpx;
+      overflow: hidden;
+
+      .progress-fill {
+        height: 100%;
+        background: linear-gradient(90deg, #2979ff, #36d6ff);
+        border-radius: 8rpx;
+      }
+    }
+  }
+}
+
+.error-message {
+  margin-top: 30rpx;
+  padding: 20rpx;
+  background-color: #fff5f5;
+  border-radius: 12rpx;
+  border-left: 8rpx solid #ff5151;
+
+  .error-text {
+    font-size: 28rpx;
+    color: #ff5151;
+  }
+}

pages/makedetail/makeImgDetail.vue

@@ -1,196 +1,272 @@
 <template>
-  <view class="makedetail-container">
-    <!-- 顶部导航 -->
-    <view class="header">
-      <view class="back-icon" @click="goBack">
-        <text class="iconfont icon-left">&#xe8ef;</text>
-      </view>
-      <view class="right-info">
-        <view class="coin">
-          <image src="/static/coin.png" mode="aspectFit"></image>
-          <text>999</text>
-        </view>
-        <view class="diamond">
-          <image src="/static/diamond.png" mode="aspectFit"></image>
-          <text>2</text>
-        </view>
-      </view>
-    </view>
+	<view class="makedetail-container">
+		<!-- 顶部导航 -->
+		<view class="nav-bar">
+			<view class="left">
+				<view class="uni-btn-icon" @click="goBack">&#xe601;</view>
+			</view>
+			<view class="center">发表创作</view>
+			<view class="right">
+				<view class="coinM">
+					<image src="/static/icon/coin_m.png" mode="aspectFit"></image>
+					<text>{{myinfo.num_gmm}}</text>
+				</view>
+				<view class="coinC">
+					<image src="/static/icon/coin_cd.png" mode="aspectFit"></image>
+					<text>{{myinfo.num_gmd}}</text>
+				</view>
+			</view>
+		</view>
 
-    <!-- 创作预览区域 -->
-    <view class="preview-section">
-      <view class="preview-title">创作预览</view>
-      <view class="preview-card">
-        <image class="loading-icon" src="/static/loading.png" mode="aspectFit"></image>
-        <text class="loading-text">生成中 0%</text>
-        <text class="sub-text">请耐心等待制作完成</text>
-      </view>
-    </view>
+		<!-- 创作预览区域 -->
+		<view class="preview-section" v-if="inQueue">
+			<view class="preview-title">创作预览</view>
+			<view class="preview-card">
+				<image class="loading-icon" src="/static/loading.png" mode="aspectFit"></image>
+				<text class="loading-text">{{queueMessage}}</text>
+				<text class="sub-text">请耐心等待制作完成</text>
+			</view>
+		</view>
 
-    <!-- 创作描述输入区 -->
-    <view class="description-section">
-      <view class="section-header">
-        <text class="section-title">创作描述<text class="required">*</text></text>
-        <view class="clear-text" @click="clearDescription">
-          <image src="/static/clear.png" mode="aspectFit"></image>
-          <text>清空文本</text>
-        </view>
-      </view>
-      <textarea 
-        class="input-area" 
-        v-model="description"
-        placeholder="请输入描述语,例如:穿着白色运动服,外表俊朗..."
-        maxlength="1000"
-        @input="onDescriptionInput"
-      ></textarea>
-      <view class="word-count">{{descriptionLength}}/1000</view>
-    </view>
+		<!-- 以下区域在非排队状态下显示 -->
+		<view v-if="!inQueue">
+			<!-- 创作描述输入区 -->
+			<view class="description-section">
+				<view class="section-header">
+					<text class="section-title">创作描述<text class="required">*</text></text>
+					<view class="clear-text" @click="clearDescription">
+						<image src="/static/clear.png" mode="aspectFit"></image>
+						<text>清空文本</text>
+					</view>
+				</view>
+				<textarea class="input-area" v-model="description" placeholder="请输入描述语,例如:穿着白色运动服,外表俊朗..."
+					maxlength="1000" @input="onDescriptionInput"></textarea>
+				<view class="word-count">{{descriptionLength}}/1000</view>
+			</view>
 
-    <!-- 行为动作选择区 -->
-    <view class="action-section">
-      <view class="section-title">行为动作</view>
-      <input 
-        class="input-box" 
-        v-model="action"
-        placeholder="可输入也可点击推荐词" 
-      />
-      <view class="tag-group">
-        <text 
-          class="tag" 
-          v-for="(item, index) in actionTags" 
-          :key="index"
-          @click="selectAction(item)"
-        >{{item}}</text>
-      </view>
-    </view>
+			<!-- 行为动作选择区 -->
+			<view class="action-section">
+				<view class="section-title">行为动作</view>
+				<input class="input-box" v-model="action" placeholder="可输入也可点击推荐词" />
+				<view class="tag-group">
+					<text class="tag" v-for="(item, index) in actionTags" :key="index"
+						@click="selectAction(item)">{{item}}</text>
+				</view>
+			</view>
 
-    <!-- 主体环境选择区 -->
-    <view class="environment-section">
-      <view class="section-title">主体环境</view>
-      <input 
-        class="input-box" 
-        v-model="environment"
-        placeholder="可输入也可点击推荐词" 
-      />
-      <view class="tag-group">
-        <text 
-          class="tag" 
-          v-for="(item, index) in environmentTags" 
-          :key="index"
-          @click="selectEnvironment(item)"
-        >{{item}}</text>
-      </view>
-    </view>
+			<!-- 主体环境选择区 -->
+			<view class="environment-section">
+				<view class="section-title">主体环境</view>
+				<input class="input-box" v-model="environment" placeholder="可输入也可点击推荐词" />
+				<view class="tag-group">
+					<text class="tag" v-for="(item, index) in environmentTags" :key="index"
+						@click="selectEnvironment(item)">{{item}}</text>
+				</view>
+			</view>
 
-    <!-- 主体形象选择区 -->
-    <view class="image-section">
-      <view class="section-title">主体形象</view>
-      <input 
-        class="input-box" 
-        v-model="image"
-        placeholder="可输入也可点击推荐词" 
-      />
-      <view class="tag-group">
-        <text 
-          class="tag" 
-          v-for="(item, index) in imageTags" 
-          :key="index"
-          @click="selectImage(item)"
-        >{{item}}</text>
-      </view>
-    </view>
+			<!-- 主体形象选择区 -->
+			<view class="image-section">
+				<view class="section-title">主体形象</view>
+				<input class="input-box" v-model="image" placeholder="可输入也可点击推荐词" />
+				<view class="tag-group">
+					<text class="tag" v-for="(item, index) in imageTags" :key="index"
+						@click="selectImage(item)">{{item}}</text>
+				</view>
+			</view>
 
-    <!-- 参考风格选择区 -->
-    <view class="style-section">
-      <view class="section-title">选择参考风格<text class="required">*</text></view>
-      <scroll-view class="style-scroll" scroll-x>
-        <view 
-          class="style-item" 
-          v-for="(item, index) in styleList" 
-          :key="index"
-          :class="{'active': selectedStyle === index}"
-          @click="selectStyle(index)"
-        >
-          <image :src="item.image" mode="aspectFill"></image>
-          <text>{{item.name}}</text>
-        </view>
-      </scroll-view>
-    </view>
+			<!-- 参考风格选择区 -->
+			<view class="style-section">
+				<view class="section-title">选择参考风格<text class="required">*</text></view>
+				<scroll-view class="style-scroll" scroll-x>
+					<view class="style-item" v-for="(item, index) in styleList" :key="index"
+						:class="{'active': selectedStyle === index}" @click="selectStyle(index)">
+						<image :src="item.image" mode="aspectFill"></image>
+						<text>{{item.name}}</text>
+					</view>
+				</scroll-view>
+			</view>
 
-    <!-- 底部按钮 -->
-    <view class="bottom-button">
-      <button class="generate-btn" @click="generateImage">立即生成(消耗10贡献)</button>
-      <view class="promotion-link">
-        <text>> 即刻开通订阅，获取各种福利! <</text>
-      </view>
-    </view>
-  </view>
+			<!-- 底部按钮 -->
+			<view class="bottom-button">
+				<button class="generate-btn" @click="generateImage">立即生成(消耗10贡献)</button>
+				<view class="promotion-link">
+					<text> 即刻开通订阅，获取各种福利! </text>
+				</view>
+			</view>
+		</view>
+	</view>
 </template>
 
 <script>
-export default {
-  data() {
-    return {
-      description: '',
-      descriptionLength: 0,
-      action: '',
-      environment: '',
-      image: '',
-      selectedStyle: -1,
-      actionTags: ['跳舞', '开枪', '喝咖啡', '看书', '运动'],
-      environmentTags: ['都市大道', '大树底下', '办公室', '厨房'],
-      imageTags: ['戴着墨镜', '戴着耳机', '戴着帽子', '手持冲浪板'],
-      styleList: [
-        { name: '自然共生', image: '/static/style1.png' },
-        { name: '国风新锋', image: '/static/style2.png' },
-        { name: '萌系治愈', image: '/static/style3.png' }
-      ]
-    }
-  },
-  methods: {
-    goBack() {
-      uni.navigateBack()
-    },
-    clearDescription() {
-      this.description = ''
-      this.descriptionLength = 0
-    },
-    onDescriptionInput(e) {
-      this.descriptionLength = e.detail.value.length
-    },
-    selectAction(tag) {
-      this.action = tag
-    },
-    selectEnvironment(tag) {
-      this.environment = tag
-    },
-    selectImage(tag) {
-      this.image = tag
-    },
-    selectStyle(index) {
-      this.selectedStyle = index
-    },
-    generateImage() {
-      if (!this.description) {
-        uni.showToast({
-          title: '请输入创作描述',
-          icon: 'none'
-        })
-        return
-      }
-      if (this.selectedStyle === -1) {
-        uni.showToast({
-          title: '请选择参考风格',
-          icon: 'none'
-        })
-        return
-      }
-      // TODO: 调用生成接口
-    }
-  }
-}
+	export default {
+		data() {
+			return {
+				description: '',
+				descriptionLength: 0,
+				action: '',
+				environment: '',
+				image: '',
+				selectedStyle: -1,
+				actionTags: ['跳舞', '开枪', '喝咖啡', '看书', '运动'],
+				environmentTags: ['都市大道', '大树底下', '办公室', '厨房'],
+				imageTags: ['戴着墨镜', '戴着耳机', '戴着帽子', '手持冲浪板'],
+				styleList: [{
+						name: '自然共生',
+						image: '/static/style1.png'
+					},
+					{
+						name: '国风新锋',
+						image: '/static/style2.png'
+					},
+					{
+						name: '萌系治愈',
+						image: '/static/style3.png'
+					}
+				],
+				inQueue: false,
+				queueMessage: '',
+				myinfo: {}
+			}
+		},
+		onLoad() {
+			// this.checkQueueStatus()
+			this.getMyInfo();
+		},
+		methods: {
+			goBack() {
+				uni.navigateBack()
+			},
+			getMyInfo() {
+				uni.request({
+					url: this.$apiHost + '/My/getnum',
+					method: 'GET',
+					header: {
+						'content-type': 'application/json',
+						'sign': getApp().globalData.headerSign
+					},
+					data: {
+						uuid: getApp().globalData.uuid
+					},
+					success: (res) => {
+						console.log("获取用户信息：", res.data);
+						this.myinfo = res.data
+					}
+				})
+
+			},
+			checkQueueStatus() {
+				uni.request({
+					url: this.$apiHost + '/WorkAI/queueStatus',
+					method: 'GET',
+					header: {
+						'Content-Type': 'application/x-www-form-urlencoded',
+						'sign': getApp().globalData.headerSign
+					},
+					data: {
+						uuid: getApp().globalData.uuid,
+						task_type: 1
+					},
+					success: (res) => {
+						console.log("队列状态：", res.data);
+						if (res.data.success === "yes") {
+							this.inQueue = res.data.in_queue
+							if (this.inQueue) {
+								this.queueMessage = res.data.str
+							}
+						}
+					},
+					fail: (err) => {
+						console.log('获取队列状态失败：', err);
+						uni.showToast({
+							title: '获取状态失败',
+							icon: 'none'
+						});
+					}
+				})
+			},
+			clearDescription() {
+				this.description = ''
+				this.descriptionLength = 0
+			},
+			onDescriptionInput(e) {
+				this.descriptionLength = e.detail.value.length
+			},
+			selectAction(tag) {
+				this.action = tag
+			},
+			selectEnvironment(tag) {
+				this.environment = tag
+			},
+			selectImage(tag) {
+				this.image = tag
+			},
+			selectStyle(index) {
+				this.selectedStyle = index
+			},
+			generateImage() {
+				if (!this.description) {
+					uni.showToast({
+						title: '请输入创作描述',
+						icon: 'none'
+					})
+					return
+				}
+				// if (this.selectedStyle === -1) {
+				//   uni.showToast({
+				//     title: '请选择参考风格',
+				//     icon: 'none'
+				//   })
+				//   return
+				// }
+				let style = '';
+				if (this.selectedStyle !== -1) {
+					style = this.styleList[this.selectedStyle].name
+				}
+
+				let that = this
+				uni.request({
+					url: this.$apiHost + '/WorkAI/creatorLG',
+					data: {
+						uuid: getApp().globalData.uuid,
+						description: this.description,
+						action: this.action,
+						environment: this.environment,
+						subject: this.image,
+						style: style
+					},
+					method: 'POST',
+					header: {
+						'Content-Type': 'application/x-www-form-urlencoded',
+						'sign': getApp().globalData.headerSign
+					},
+					dataType: 'json',
+					success: (res) => {
+						console.log("生成结果：", res.data);
+						uni.showToast({
+							title: res.data.str || '请求成功',
+							icon: 'none'
+						});
+						if (res.data.success == "yes") {
+							// TODO: 处理生成成功后的逻辑
+							setTimeout(function() {
+								// that.checkQueueStatus()
+								uni.navigateBack()
+							}, 500);
+						}
+					},
+					fail: (err) => {
+						console.log('生成失败：', err);
+						uni.showToast({
+							title: '生成请求失败',
+							icon: 'none'
+						});
+					}
+				})
+			}
+		}
+	}
 </script>
 
 <style lang="scss">
-@import './makeImgDetail.scss';
-</style> 
+	@import './makeImgDetail.scss';
+</style>

pages/makedetail/makeMusicDetail.scss

@@ -1,111 +1,205 @@
 .make-music-detail {
   width: 100%;
   min-height: 100vh;
-  background-color: #fff;
+  background: linear-gradient(to bottom, #ffffff, #f8f9fa);
   display: flex;
   flex-direction: column;
 
-  .nav-header {
-    padding: 44px 15px 15px;
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    border-bottom: 1px solid #f5f5f5;
+.nav-bar {
+  width: 750rpx;
+  height: 96rpx;
+  background: rgba(255, 255, 255, 0.95);
+  backdrop-filter: blur(10px);
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0 24rpx;
+  box-sizing: border-box;
+  border-bottom: 1rpx solid rgba(0,0,0,0.05);
+  box-shadow: 0 4rpx 20rpx rgba(0,0,0,0.08);
+  position: sticky;
+  top: 0;
+  z-index: 100;
 
-    .back-icon {
-      width: 24px;
+  .left {
+    width: 120rpx;
+    .uni-btn-icon {
+      font-size: 50rpx;
+      color: #2b2b2b;
+      transition: all 0.3s ease;
+      
+      &:active {
+        color: #007AFF;
+        transform: scale(0.95);
+      }
     }
+  }
 
-    .right-info {
-      flex: 1;
+  .center {
+    flex: 1;
+    text-align: center;
+    font-size: 34rpx;
+    font-weight: 600;
+    color: #333;
+  }
+
+  .right {
+    width: 260rpx;
+    display: flex;
+    align-items: center;
+    font-size: 28rpx;
+    
+    image {
+      width: 42rpx;
+      height: 42rpx;
+    }
+    
+    .coinM, .coinC {
       display: flex;
+      flex-direction: row;
       align-items: center;
-      justify-content: flex-end;
-      gap: 10px;
-
-      .coin-box, .diamond-box {
-        display: flex;
-        align-items: center;
-        background: #f5f5f5;
-        border-radius: 15px;
-        padding: 2px 8px;
-
-        image {
-          width: 16px;
-          height: 16px;
-          margin-right: 4px;
-        }
-
-        text {
-          font-size: 14px;
-        }
+      justify-content: center;
+      border: solid 1px #f0f0f0;
+      border-radius: 40rpx;
+      background: rgba(250,250,250,0.9);
+      transition: transform 0.2s, box-shadow 0.2s;
+      box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.05);
+      margin-left: 16rpx;
+      
+      &:active {
+        transform: scale(0.98);
+      }
+      
+      text {
+        padding: 6rpx 20rpx;
+        font-weight: 500;
       }
     }
+    
+    .coinM {
+      border-color: #ffecb3;
+      background: rgba(255,248,225,0.4);
+    }
+    
+    .coinC {
+      border-color: #e3f2fd;
+      background: rgba(227,242,253,0.4);
+    }
   }
+}
 
   .content {
     flex: 1;
-    padding: 20px;
+    padding: 30rpx;
 
     .input-section {
-      margin-bottom: 20px;
+      margin-bottom: 40rpx;
+      animation: fadeIn 0.5s ease;
 
       .label {
-        font-size: 16px;
-        font-weight: 500;
-        margin-bottom: 10px;
+        font-size: 32rpx;
+        font-weight: 600;
+        margin-bottom: 20rpx;
         display: block;
+        color: #2b2b2b;
       }
 
       .input-field {
         width: 100%;
-        height: 44px;
-        border-radius: 8px;
-        border: 1px solid #eee;
-        padding: 0 15px;
-        font-size: 14px;
+        height: 88rpx;
+        border-radius: 16rpx;
+        border: 2rpx solid #e8e8e8;
+        padding: 0 30rpx;
+        font-size: 28rpx;
+        background: #fff;
+        transition: all 0.3s ease;
+        
+        &:focus {
+          border-color: #007AFF;
+          box-shadow: 0 0 0 2rpx rgba(0,122,255,0.1);
+        }
       }
 
       .textarea-field {
         width: 100%;
-        height: 120px;
-        border-radius: 8px;
-        border: 1px solid #eee;
-        padding: 15px;
-        font-size: 14px;
+        border-radius: 16rpx;
+        border: 2rpx solid #e8e8e8;
+        padding: 30rpx;
+        font-size: 28rpx;
+        background: #fff;
+        transition: all 0.3s ease;
+        
+        &:focus {
+          border-color: #007AFF;
+          box-shadow: 0 0 0 2rpx rgba(0,122,255,0.1);
+        }
       }
 
       .textarea-footer {
         display: flex;
-        justify-content: space-between;
+        justify-content: flex-end;
         align-items: center;
-        margin-top: 8px;
+        margin-top: 16rpx;
 
         .ai-btn {
           color: #007AFF;
-          font-size: 14px;
+          font-size: 28rpx;
+          font-weight: 500;
+          padding: 10rpx 20rpx;
+          border-radius: 30rpx;
+          background: rgba(0,122,255,0.1);
+          transition: all 0.3s ease;
+          
+          &:active {
+            background: rgba(0,122,255,0.2);
+            transform: scale(0.98);
+          }
         }
       }
 
       .count {
-        font-size: 12px;
+        font-size: 24rpx;
         color: #999;
-        text-align: right;
       }
     }
 
     .style-section {
+      .label {
+        font-size: 32rpx;
+        font-weight: 600;
+        margin-bottom: 20rpx;
+        display: block;
+        color: #2b2b2b;
+      }
       .tabs {
         display: flex;
-        gap: 20px;
-        margin-bottom: 15px;
+        gap: 40rpx;
+        margin-bottom: 30rpx;
+        border-bottom: 2rpx solid #f0f0f0;
+        padding-bottom: 15rpx;
 
         text {
-          font-size: 14px;
+          font-size: 28rpx;
           color: #666;
+          position: relative;
+          padding-bottom: 15rpx;
+          transition: all 0.3s ease;
+          
           &.active {
-            color: #333;
-            font-weight: 500;
+            color: #007AFF;
+            font-weight: 600;
+            
+            &:after {
+              content: '';
+              position: absolute;
+              bottom: -17rpx;
+              left: 0;
+              width: 100%;
+              height: 4rpx;
+              background: #007AFF;
+              border-radius: 4rpx;
+            }
           }
         }
       }
@@ -113,50 +207,131 @@
       .tags {
         display: flex;
         flex-wrap: wrap;
-        gap: 10px;
+        gap: 20rpx;
 
         .tag {
-          padding: 6px 15px;
+          padding: 12rpx 30rpx;
           background: #f5f5f5;
-          border-radius: 20px;
-          font-size: 14px;
+          border-radius: 40rpx;
+          font-size: 28rpx;
+          transition: all 0.3s ease;
+          border: 2rpx solid transparent;
 
           &.active {
-            background: #333;
-            color: #fff;
+            background: rgba(0,122,255,0.1);
+            color: #007AFF;
+            border-color: #007AFF;
+          }
+          
+          &:active {
+            transform: scale(0.98);
           }
         }
       }
     }
   }
 
+  .preview-section {
+    padding: 30rpx;
+    
+    .preview-card {
+      background: #fff;
+      border-radius: 20rpx;
+      padding: 40rpx;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      box-shadow: 0 4rpx 20rpx rgba(0,0,0,0.08);
+      
+      .loading-icon {
+        width: 120rpx;
+        height: 120rpx;
+        margin-bottom: 30rpx;
+        animation: rotate 2s linear infinite;
+      }
+      
+      .loading-text {
+        font-size: 32rpx;
+        color: #333;
+        margin-bottom: 16rpx;
+        text-align: center;
+      }
+      
+      .sub-text {
+        font-size: 28rpx;
+        color: #999;
+      }
+    }
+  }
+
   .bottom-section {
-    padding: 20px;
+    padding: 40rpx 30rpx;
+    background: rgba(255,255,255,0.95);
+    backdrop-filter: blur(10px);
+    border-top: 2rpx solid rgba(0,0,0,0.05);
 
     .submit-btn {
       width: 100%;
-      height: 44px;
-      background: #333;
+      height: 88rpx;
+      background: linear-gradient(135deg, #007AFF, #00b4ff);
       color: #fff;
-      border-radius: 22px;
+      border-radius: 44rpx;
       display: flex;
       align-items: center;
       justify-content: center;
+      font-size: 32rpx;
+      font-weight: 600;
+      transition: all 0.3s ease;
+      box-shadow: 0 8rpx 20rpx rgba(0,122,255,0.3);
+
+      &:active {
+        transform: scale(0.98);
+        box-shadow: 0 4rpx 10rpx rgba(0,122,255,0.2);
+      }
 
       .small {
-        font-size: 12px;
-        margin-left: 5px;
+        font-size: 24rpx;
+        margin-left: 10rpx;
+        font-weight: normal;
+        opacity: 0.9;
       }
     }
 
     .promotion-text {
       text-align: center;
-      margin-top: 10px;
+      margin-top: 20rpx;
 
       .link-text {
         color: #007AFF;
-        font-size: 12px;
+        font-size: 24rpx;
+        text-decoration: underline;
+        opacity: 0.9;
+        transition: opacity 0.3s ease;
+        
+        &:active {
+          opacity: 0.7;
+        }
       }
     }
   }
+}
+
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+    transform: translateY(10rpx);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes rotate {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
 } 

pages/makedetail/makeMusicDetail.vue

@@ -1,140 +1,265 @@
 <template>
-  <view class="make-music-detail">
-    <!-- 顶部导航 -->
-    <view class="nav-header">
-      <view class="back-icon">
-        <text class="iconfont icon-left"></text>
-      </view>
-      <view class="right-info">
-        <view class="coin-box">
-          <image src="/static/images/coin.png" mode="aspectFit" class="coin-icon" />
-          <text>999</text>
-        </view>
-        <view class="diamond-box">
-          <image src="/static/images/diamond.png" mode="aspectFit" class="diamond-icon" />
-          <text>2</text>
-        </view>
-      </view>
-    </view>
+	<view class="make-music-detail">
+		<!-- 顶部导航 -->
+		<view class="nav-bar">
+			<view class="left">
+				<view class="uni-btn-icon" @click="goBack">&#xe601;</view>
+			</view>
+			<view class="center">音乐制作</view>
+			<view class="right">
+				<view class="coinM">
+					<image src="/static/icon/coin_m.png" mode="aspectFit"></image>
+					<text>{{myinfo.num_gmm}}</text>
+				</view>
+				<view class="coinC">
+					<image src="/static/icon/coin_cd.png" mode="aspectFit"></image>
+					<text>{{myinfo.num_gmd}}</text>
+				</view>
+			</view>
+		</view>
 
-    <!-- 主要内容区 -->
-    <view class="content">
-      <!-- 歌曲名称输入 -->
-      <view class="input-section">
-        <text class="label">歌曲名称</text>
-        <input type="text" placeholder="请输入名称..." class="input-field" maxlength="30" v-model="songName" />
-        <text class="count">{{songName.length}}/30</text>
-      </view>
+		<!-- 队列状态显示 -->
+		<view class="preview-section" v-if="inQueue">
+			<view class="preview-card">
+				<image class="loading-icon" src="/static/loading.png" mode="aspectFit"></image>
+				<text class="loading-text">{{queueMessage}}</text>
+				<text class="sub-text">请耐心等待制作完成</text>
+			</view>
+		</view>
 
-      <!-- 创作歌词输入 -->
-      <view class="input-section">
-        <text class="label">创作歌词</text>
-        <textarea 
-          placeholder="请在此处输入您想要进行联想的内容或者歌词" 
-          class="textarea-field"
-          maxlength="800"
-          v-model="lyrics"
-          :style="{height: textareaHeight + 'px'}"
-          @input="onTextareaInput"
-        />
-        <view class="textarea-footer">
-          <text class="count">{{lyrics.length}}/800</text>
-          <text class="ai-btn">AI润词</text>
-        </view>
-      </view>
+		<!-- 主要内容区 -->
+		<view class="content" v-if="!inQueue">
+			<!-- 歌曲名称输入 -->
+			<view class="input-section">
+				<text class="label">歌曲名称</text>
+				<input type="text" placeholder="请输入名称..." class="input-field" maxlength="30" v-model="songName" />
+				<text class="count">{{songName.length}}/30</text>
+			</view>
 
-      <!-- 音乐风格选择 -->
-      <view class="style-section">
-        <text class="label">音乐风格</text>
-        <view class="tabs">
-          <text :class="{'active': selectedTab === 'emotion'}" @click="selectTab('emotion')">情感</text>
-          <text :class="{'active': selectedTab === 'genre'}" @click="selectTab('genre')">流派</text>
-          <text :class="{'active': selectedTab === 'era'}" @click="selectTab('era')">年代</text>
-          <text :class="{'active': selectedTab === 'instrument'}" @click="selectTab('instrument')">乐器</text>
-        </view>
-        <view class="tags">
-          <text 
-            v-for="(tag, index) in currentTags" 
-            :key="index"
-            :class="['tag', { active: selectedTags.includes(tag) }]"
-            @click="toggleTag(tag)"
-          >
-            {{tag}}
-          </text>
-        </view>
-      </view>
-    </view>
+			<!-- 创作歌词输入 -->
+			<view class="input-section">
+				<text class="label">创作歌词</text>
+				<textarea placeholder="请在此处输入您想要进行联想的内容或者歌词" class="textarea-field" maxlength="800" v-model="lyrics"
+					:style="{height: textareaHeight + 'px'}" @input="onTextareaInput" />
+				<view class="textarea-footer">
+					<text class="count">{{lyrics.length}}/800</text>
+					<text class="ai-btn" v-if="false">AI润词</text>
+				</view>
+			</view>
 
-    <!-- 底部按钮 -->
-    <view class="bottom-section">
-      <button class="submit-btn">立即生成<text class="small">(需消耗10枚豆)</text></button>
-      <view class="promotion-text">
-        <text class="link-text">>即刻开通订阅，我取各种福利<</text>
-      </view>
-    </view>
-  </view>
+			<!-- 音乐风格选择 -->
+			<view class="style-section">
+				<text class="label">音乐风格</text>
+				<view class="tabs">
+					<text :class="{'active': selectedTab === 'emotion'}" @click="selectTab('emotion')">情感</text>
+					<text :class="{'active': selectedTab === 'genre'}" @click="selectTab('genre')">流派</text>
+					<text :class="{'active': selectedTab === 'era'}" @click="selectTab('era')">年代</text>
+					<text :class="{'active': selectedTab === 'instrument'}" @click="selectTab('instrument')">乐器</text>
+				</view>
+				<view class="tags">
+					<text v-for="(tag, index) in currentTags" :key="index"
+						:class="['tag', { active: selectedTags[selectedTab].includes(tag) }]" @click="toggleTag(tag)">
+						{{tag}}
+					</text>
+				</view>
+			</view>
+		</view>
+
+		<!-- 底部按钮 -->
+		<view class="bottom-section" v-if="!inQueue">
+			<button class="submit-btn" @click="generateMusic">立即生成<text class="small">(需消耗10枚豆)</text></button>
+			<view class="promotion-text">
+				<text class="link-text">即刻开通订阅，我取各种福利</text>
+			</view>
+		</view>
+	</view>
 </template>
 
 <script>
-export default {
-  name: 'MakeMusicDetail',
-  data() {
-    return {
-      songName: '',
-      lyrics: '',
-      selectedTags: [],
-      textareaHeight: 120,
-      minHeight: 120,
-      selectedTab: 'emotion',
-      tagOptions: {
-        emotion: ['欢快', '悲伤', '积极', '浪漫', '忧郁', '华丽', '闪耀', '神秘', '惊怒', '紧张', '恐怖', '平静'],
-        genre: ['流行', '摇滚', '民谣', '电子', 'R&B', '嘻哈', '古典', '爵士'],
-        era: ['80年代', '90年代', '00年代', '10年代', '20年代'],
-        instrument: ['钢琴', '吉他', '贝斯', '鼓', '小提琴', '萨克斯', '电子合成器']
-      }
-    }
-  },
-  computed: {
-    currentTags() {
-      return this.selectedTab ? this.tagOptions[this.selectedTab] : [];
-    }
-  },
-  methods: {
-    onTextareaInput(e) {
-      const lineHeight = 20; // 假设每行高度为20px
-      const padding = 30; // 上下padding各15px
-      const value = e.detail.value;
-      const lines = value.split('\n').length;
-      // 计算每行的平均字符数
-      const avgCharsPerLine = 30; // 根据实际输入框宽度调整
-      const textLines = Math.ceil(value.length / avgCharsPerLine);
-      
-      // 取行数的最大值，确保有足够空间显示
-      const totalLines = Math.max(lines, textLines);
-      const newHeight = Math.max(totalLines * lineHeight + padding, this.minHeight);
-      
-      this.textareaHeight = newHeight;
-    },
-    selectTab(tab) {
-      if (this.selectedTab === tab) {
-        this.selectedTab = '';
-      } else {
-        this.selectedTab = tab;
-      }
-      // 切换标签时清空已选择的标签
-      this.selectedTags = [];
-    },
-    toggleTag(tag) {
-      if (this.selectedTags.includes(tag)) {
-        this.selectedTags = this.selectedTags.filter(t => t !== tag);
-      } else {
-        this.selectedTags.push(tag);
-      }
-    }
-  }
-}
+	export default {
+		name: 'MakeMusicDetail',
+		data() {
+			return {
+				songName: '',
+				lyrics: '',
+				selectedTags: {
+					emotion: [],
+					genre: [],
+					era: [],
+					instrument: []
+				},
+				textareaHeight: 120,
+				minHeight: 120,
+				selectedTab: 'emotion',
+				tagOptions: {
+					emotion: ['欢快', '悲伤', '积极', '浪漫', '忧郁', '华丽', '闪耀', '神秘', '惊怒', '紧张', '恐怖', '平静'],
+					genre: ['流行', '摇滚', '民谣', '电子', 'R&B', '嘻哈', '古典', '爵士'],
+					era: ['80年代', '90年代', '00年代', '10年代', '20年代'],
+					instrument: ['钢琴', '吉他', '贝斯', '鼓', '小提琴', '萨克斯', '电子合成器']
+				},
+				inQueue: false,
+				queueMessage: '',
+				myinfo: {}
+			}
+		},
+		onLoad() {
+			// this.checkQueueStatus();
+			this.getMyInfo();
+		},
+		computed: {
+			currentTags() {
+				return this.selectedTab ? this.tagOptions[this.selectedTab] : [];
+			}
+		},
+		methods: {
+			goBack() {
+				uni.navigateBack({
+					delta: 1
+				});
+			},
+			getMyInfo() {
+				uni.request({
+					url: this.$apiHost + '/My/getnum',
+					method: 'GET',
+					header: {
+						'content-type': 'application/json',
+						'sign': getApp().globalData.headerSign
+					},
+					data: {
+						uuid: getApp().globalData.uuid
+					},
+					success: (res) => {
+						console.log("获取用户信息：", res.data);
+						this.myinfo = res.data
+					}
+				})
+
+			},
+			checkQueueStatus() {
+				uni.request({
+					url: this.$apiHost + '/WorkAI/queueStatus',
+					method: 'GET',
+					header: {
+						'content-type': 'application/json',
+						'sign': getApp().globalData.headerSign
+					},
+					data: {
+						uuid: getApp().globalData.uuid,
+						task_type: 2
+					},
+					success: (res) => {
+						console.log("音乐队列状态：", res.data);
+						if (res.data.success === "yes") {
+							this.inQueue = res.data.in_queue
+							if (this.inQueue) {
+								this.queueMessage = res.data.str
+							}
+						}
+					},
+					fail: (err) => {
+						console.log('获取队列状态失败：', err);
+						uni.showToast({
+							title: '获取状态失败',
+							icon: 'none'
+						});
+					}
+				})
+				this.getMyInfo();
+			},
+			generateMusic() {
+				if (!this.songName.trim()) {
+					uni.showToast({
+						title: '请输入歌曲名称',
+						icon: 'none'
+					})
+					return
+				}
+				if (!this.lyrics.trim()) {
+					uni.showToast({
+						title: '请输入歌词内容',
+						icon: 'none'
+					})
+					return
+				}
+
+				// 合并所有选中的标签
+				let allSelectedTags = [
+					...this.selectedTags.emotion,
+					...this.selectedTags.genre,
+					...this.selectedTags.era,
+					...this.selectedTags.instrument
+				];
+
+				let that = this
+				uni.request({
+					url: this.$apiHost + '/WorkAI/creatorMusic',
+					data: {
+						uuid: getApp().globalData.uuid,
+						name: this.songName,
+						lyrics: this.lyrics,
+						style: allSelectedTags.join(',')
+					},
+					method: 'POST',
+					header: {
+						'Content-Type': 'application/x-www-form-urlencoded',
+						'sign': getApp().globalData.headerSign
+					},
+					dataType: 'json',
+					success: (res) => {
+						console.log("生成结果：", res.data);
+						uni.showToast({
+							title: res.data.str || '请求成功',
+							icon: 'none'
+						});
+						if (res.data.success == "yes") {
+							setTimeout(function() {
+								// that.checkQueueStatus()
+								//返回上一页
+								uni.navigateBack()
+							}, 500);
+						}
+					},
+					fail: (err) => {
+						console.log('生成失败：', err);
+						uni.showToast({
+							title: '生成请求失败',
+							icon: 'none'
+						});
+					}
+				})
+			},
+			onTextareaInput(e) {
+				const lineHeight = 20; // 假设每行高度为20px
+				const padding = 30; // 上下padding各15px
+				const value = e.detail.value;
+				const lines = value.split('\n').length;
+				// 计算每行的平均字符数
+				const avgCharsPerLine = 30; // 根据实际输入框宽度调整
+				const textLines = Math.ceil(value.length / avgCharsPerLine);
+
+				// 取行数的最大值，确保有足够空间显示
+				const totalLines = Math.max(lines, textLines);
+				const newHeight = Math.max(totalLines * lineHeight + padding, this.minHeight);
+
+				this.textareaHeight = newHeight;
+			},
+			selectTab(tab) {
+				if (this.selectedTab !== tab) {
+					this.selectedTab = tab;
+					// 不再清空已选择的标签
+				}
+			},
+			toggleTag(tag) {
+				if (this.selectedTags[this.selectedTab].includes(tag)) {
+					this.selectedTags[this.selectedTab] = this.selectedTags[this.selectedTab].filter(t => t !== tag);
+				} else {
+					this.selectedTags[this.selectedTab].push(tag);
+				}
+			}
+		}
+	}
 </script>
 
 <style lang="scss">
-@import './makeMusicDetail.scss';
-</style> 
+	@import './makeMusicDetail.scss';
+</style>

pages/my/my.scss

@@ -230,6 +230,52 @@ page {
 	flex-direction: column;
 	margin:30rpx 30rpx 60rpx;
 	justify-content: flex-start;
+	
+	.line {
+		width: 100%;
+		height: 2rpx;
+		background: #f0f0f0;
+		margin-bottom: 20rpx;
+	}
+	
+	.tablist {
+		display: flex;
+		flex-direction: row;
+		justify-content: flex-start;
+		align-items: center;
+		margin-bottom: 20rpx;
+		
+		.item {
+			position: relative;
+			margin-right: 60rpx;
+			padding-bottom: 16rpx;
+			
+			.name {
+				font-size: 32rpx;
+				color: #999;
+				font-weight: 500;
+			}
+			
+			&.active {
+				.name {
+					color: #333;
+					font-weight: 600;
+				}
+				
+				&:after {
+					content: '';
+					position: absolute;
+					bottom: 0;
+					left: 0;
+					width: 40rpx;
+					height: 6rpx;
+					background: #90d369;
+					border-radius: 3rpx;
+				}
+			}
+		}
+	}
+	
 	.numlist {
 		display: flex;
 		flex-direction: row;
@@ -263,77 +309,77 @@ page {
 	}
 	.numlist2 {
 		display: flex;
-		flex-direction: row;
-		justify-content: flex-start;
-		align-items: center;
 		flex-wrap: wrap;
-		border-radius: 2rpx;
+		justify-content: space-between;
+		
 		.item {
-			display: flex;
-			justify-content: center;
-			padding:20rpx;
-			border-radius: 2rpx;
-			width:340rpx;
-			background: rgba(120, 120, 120, 0.09);margin:2rpx;
-			image {
-				width:224rpx;
-			}
+			width: 330rpx;
+			margin-bottom: 30rpx;
+			background: #fff;
+			border-radius: 16rpx;
+			box-shadow: 0 4rpx 12rpx rgba(0,0,0,0.08);
+			overflow: hidden;
+			
 			.num {
-				color:#fff;
-				text-align: center;
+				position: relative;
+				width: 100%;
+				height: 330rpx;
 				display: flex;
 				flex-direction: column;
-				justify-content: center;
-				align-items: center;
-				.name {
-					font-size: 24rpx;
-					color:#BABABA;
-					margin-top: 12rpx;
+				
+				.icon {
+					width: 100%;
+					height: 260rpx;
+					object-fit: contain;
+					background-color: #f8f9fa;
 				}
-			}
-		}
-	}
-	.tablist {
-		display: flex;
-		flex-direction: row;
-		justify-content: flex-start;
-		align-items: center;
-		margin: 20rpx 0;
-		position: relative;
-		.item {
-			flex: 1;
-			height: 80rpx;
-			display: flex;
-			justify-content: center;
-			align-items: center;
-			position: relative;
-			.name {
-				font-size: 32rpx;
-				color: #666;
-				transition: all 0.3s;
-			}
-			&.active {
+				
+				.queue-status {
+					width: 100%;
+					height: 260rpx;
+					display: flex;
+					align-items: center;
+					justify-content: center;
+					background: #f8f9fa;
+					
+					.status-text {
+						font-size: 28rpx;
+						color: #666;
+						text-align: center;
+						padding: 10rpx 20rpx;
+						border-radius: 30rpx;
+						background: rgba(0,0,0,0.05);
+					}
+				}
+				
 				.name {
-					color: #2B65D9;
-					font-weight: bold;
+					padding: 16rpx;
+					font-size: 28rpx;
+					color: #333;
+					white-space: nowrap;
+					overflow: hidden;
+					text-overflow: ellipsis;
 				}
-				&::after {
-					content: '';
+				
+				.task-type-tag {
 					position: absolute;
-					bottom: -10rpx;
-					left: 50%;
-					transform: translateX(-50%);
-					width: 40rpx;
-					height: 6rpx;
-					background: #2B65D9;
-					border-radius: 3rpx;
+					left: 16rpx;
+					bottom: 70rpx;
+					background: rgba(0,0,0,0.6);
+					color: #fff;
+					font-size: 24rpx;
+					padding: 6rpx 16rpx;
+					border-radius: 20rpx;
 				}
 			}
-			&:active {
-				opacity: 0.8;
-			}
 		}
 	}
+	.loading-more, .no-more {
+		text-align: center;
+		padding: 20rpx 0;
+		color: #999;
+		font-size: 28rpx;
+	}
 }
 .btn_submit {
 	width: 660rpx;
@@ -351,16 +397,4 @@ page {
 }
 .blankHeight {
 	height:100rpx;
-}
-.loading-more {
-	text-align: center;
-	padding: 20rpx 0;
-	color: #999;
-	font-size: 28rpx;
-}
-.no-more {
-	text-align: center;
-	padding: 20rpx 0;
-	color: #999;
-	font-size: 28rpx;
 }

pages/my/my.vue

@@ -4,7 +4,7 @@
 			<view class="header">
 				<view class="topBg"></view>
 				<view class="settingBtn" @click="navigateToSettings">
-					<image src="/static/home/icon_vip.png"></image>
+					<image src="/static/me/setting.png"></image>
 				</view>
 				<view class="top_num">
 					<view class="num_1">
@@ -75,9 +75,30 @@
 				</view>
 				<view class="numlist2" style="margin-top: 60rpx;">
 					<view class="item" v-for="(item,index) in worksList" :key="index">
-						<view class="num">
-							<image class="icon" :src="item.images" mode="widthFix" />
-							<view class="name">{{item.title || '作品'+index}}</view>
+						<view class="num" @click="goWork(item)">
+							<!-- 当activeTab为0时显示图片 -->
+							<image v-if="activeTab === 0" class="icon"
+								:src="item.images || item.img_url || item.url || '../../static/logo.png'"
+								mode="aspectFit" />
+
+							<!-- 当activeTab为1时显示队列状态 -->
+							<view v-else class="queue-status">
+								<!-- 排队中 -->
+								<view v-if="item.status === 1" class="status-text">
+									排队中({{item.queue_position}}/{{item.all_position}})</view>
+								<!-- 制作中 -->
+								<view v-else-if="item.status < 9" class="status-text">制作中</view>
+								<!-- 创作完成 -->
+								<view v-else-if="item.status === 9" class="status-text">创作完成</view>
+							</view>
+
+							<view class="name">{{item.title || item.description || '作品'+index}}</view>
+
+							<!-- 显示任务类型标签 -->
+							<view v-if="activeTab === 1" class="task-type-tag">
+								<text v-if="item.task_type === 1">灵感创作</text>
+								<text v-else-if="item.task_type === 2">音乐</text>
+							</view>
 						</view>
 					</view>
 				</view>
@@ -324,23 +345,29 @@
 				if (this.isLoading) return;
 				this.isLoading = true;
 
-				const status = this.activeTab === 0 ? 1 : 2; // 0=我的作品(已生成)，1=生成中
+				// 根据activeTab选择不同的API
+				let apiUrl = '';
+				if (this.activeTab === 0) {
+					apiUrl = '/Work/getlist';
+				} else {
+					apiUrl = '/WorkAI/getMyQueueList';
+				}
 
 				uni.request({
-					url: this.$apiHost + '/Work/getlist',
+					url: this.$apiHost + apiUrl,
 					data: {
 						uuid: getApp().globalData.uuid,
 						skey: getApp().globalData.skey,
-						type: 'my', // 固定为1，表示获取自己的作品
+						type: 'my', // 固定为my，表示获取自己的作品
 						offset: this.offset,
-						status: status
+						status: this.activeTab === 0 ? 1 : undefined // 只有我的作品需要status参数
 					},
 					header: {
 						"content-type": "application/json",
 						'sign': getApp().globalData.headerSign
 					},
 					success: (res) => {
-						console.log("作品列表数据:", res.data);
+						console.log("列表数据:", res.data);
 						if (res.data.success == 'yes' && res.data.list) {
 							if (res.data.list.length > 0) {
 								this.worksList = [...this.worksList, ...res.data.list];
@@ -354,13 +381,16 @@
 							this.hasMore = false;
 						}
 
-						this.updateDataList();
+						// 只有在"我的作品"标签下才更新data_list
+						if (this.activeTab === 0) {
+							this.updateDataList();
+						}
 					},
 					complete: () => {
 						this.isLoading = false;
 					},
 					fail: (e) => {
-						console.log("请求作品列表失败:", e);
+						console.log("请求列表失败:", e);
 						this.isLoading = false;
 					}
 				});
@@ -373,16 +403,23 @@
 			updateDataList() {
 				this.data_list = this.worksList.map(item => {
 					return {
-						url: item.img_url || item.url || '../../static/logo.png',
-						title: item.title || '作品',
+						url: item.images || item.img_url || item.url || '../../static/logo.png',
+						title: item.title || item.description || '作品',
 						id: item.id
 					};
 				});
 			},
+			goWork(item) {
+				if (this.activeTab == 0) {
+					uni.navigateTo({
+						url: '/pages/index/workDetail?id=' + item.id
+					})
+				}
+			},
 			navigateToSettings() {
 				uni.navigateTo({
-						url: '/pages/my/setting' 
-					});
+					url: '/pages/my/setting'
+				});
 			},
 		}
 	}

uni_modules/cl-uni/components/cl-loadmore/cl-loadmore.vue

@@ -1,96 +1,82 @@
 <template>
 	<view class="cl-loadmore__wrap">
-		<cl-divider
-			:background-color="backgroundColor"
-			:color="color"
-			:width="divider ? '400rpx' : '0rpx'"
-		>
+		<cl-divider :background-color="backgroundColor" :color="color" :width="divider ? '400rpx' : '0rpx'">
 			<view class="cl-loadmore">
-				<cl-loading
-					:color="iconColor"
-					:theme="loadingTheme"
-					:size="20"
-					v-if="!finish && loading"
-				></cl-loading>
-				<text
-					class="cl-loadmore__text"
-					:style="{
+				<cl-loading :color="iconColor" :theme="loadingTheme" :size="20" v-if="!finish && loading"></cl-loading>
+				<text class="cl-loadmore__text" :style="{
 						color,
-					}"
-					v-if="message"
-					>{{ message }}</text
-				>
+					}" v-if="message">{{ message }}</text>
 			</view>
 		</cl-divider>
 	</view>
 </template>
 
 <script>
-/**
- * loadmore 加载更多
- * @description 加载更多
- * @tutorial https://docs.cool-js.com/uni/components/operate/loadmore.html
- * @property {Object} loading 是否加载中
- * @property {Boolean} finish 是否加载完成
- * @property {Boolean} divider 是否显示分割符，默认true
- * @property {String} color 字体颜色，默认#666
- * @property {String} iconColor 图标颜色
- * @property {String} backgroundColor 背景颜色，默认#f7f7f7
- * @property {String} text 普通状态下显示内容，默认“上拉加载更多”
- * @property {String} loadingText 加载中显示内容，默认“加载中”
- * @property {String} loadingTheme 加载图标主题
- * @property {String} finishText 加载完成显示内容，默认“没有更多了”
- * @example <cl-loadmore :loading="true" />
- */
+	/**
+	 * loadmore 加载更多
+	 * @description 加载更多
+	 * @tutorial https://docs.cool-js.com/uni/components/operate/loadmore.html
+	 * @property {Object} loading 是否加载中
+	 * @property {Boolean} finish 是否加载完成
+	 * @property {Boolean} divider 是否显示分割符，默认true
+	 * @property {String} color 字体颜色，默认#666
+	 * @property {String} iconColor 图标颜色
+	 * @property {String} backgroundColor 背景颜色，默认#f7f7f7
+	 * @property {String} text 普通状态下显示内容，默认“上拉加载更多”
+	 * @property {String} loadingText 加载中显示内容，默认“加载中”
+	 * @property {String} loadingTheme 加载图标主题
+	 * @property {String} finishText 加载完成显示内容，默认“没有更多了”
+	 * @example <cl-loadmore :loading="true" />
+	 */
 
-export default {
-	name: "cl-loadmore",
+	export default {
+		name: "cl-loadmore",
 
-	props: {
-		// 是否加载中
-		loading: Boolean,
-		// 是否加载完成
-		finish: Boolean,
-		// 是否显示分割符
-		divider: {
-			type: Boolean,
-			default: true,
+		props: {
+			// 是否加载中
+			loading: Boolean,
+			// 是否加载完成
+			finish: Boolean,
+			// 是否显示分割符
+			divider: {
+				type: Boolean,
+				default: true,
+			},
+			// 字体颜色
+			color: {
+				type: String,
+				default: "#666",
+			},
+			// 图标颜色
+			iconColor: String,
+			// 背景颜色
+			backgroundColor: {
+				type: String,
+				default: "#f7f7f7",
+			},
+			// 普通状态下显示内容
+			text: {
+				type: String,
+				default: "上拉加载更多",
+			},
+			// 加载中显示内容
+			loadingText: {
+				type: String,
+				default: "加载中",
+			},
+			// 加载图标主题
+			loadingTheme: String,
+			// 加载完成显示内容
+			finishText: {
+				type: String,
+				default: "没有更多了!!!!!!!!!!!!!!",
+			},
 		},
-		// 字体颜色
-		color: {
-			type: String,
-			default: "#666",
-		},
-		// 图标颜色
-		iconColor: String,
-		// 背景颜色
-		backgroundColor: {
-			type: String,
-			default: "#f7f7f7",
-		},
-		// 普通状态下显示内容
-		text: {
-			type: String,
-			default: "上拉加载更多",
-		},
-		// 加载中显示内容
-		loadingText: {
-			type: String,
-			default: "加载中",
-		},
-		// 加载图标主题
-		loadingTheme: String,
-		// 加载完成显示内容
-		finishText: {
-			type: String,
-			default: "没有更多了",
-		},
-	},
 
-	computed: {
-		message() {
-			return this.finish ? this.finishText : this.loading ? this.loadingText : this.text;
+		computed: {
+			message() {
+				return this.finish ? this.finishText : this.loading ? this.loadingText : this.text;
+			},
 		},
-	},
-};
-</script>
+	};
+</script>