音乐 图片 除社区查看详情以外完成

components/ActionSheet/ActionSheet.vue

@@ -0,0 +1,214 @@
+<template>
+  <view class="action-sheet-container" v-if="visible" @click="handleMaskClick">
+    <view class="action-sheet-mask" @touchmove.stop.prevent></view>
+    <view class="action-sheet" :class="{ 'action-sheet-show': animationShow }" @touchmove.stop.prevent>
+      <view class="action-sheet-title" v-if="title">{{ title }}</view>
+      <view class="action-sheet-items">
+        <slot>
+          <view class="action-sheet-item" v-for="(item, index) in items" :key="index"
+            :class="{ 'action-sheet-item-danger': item.danger }" @click.stop="handleItemClick(index, item)">
+            <image class="action-sheet-item-icon fa" v-if="item.icon" :src="item.icon"></image> 
+            <text class="action-sheet-item-text">{{ item.text }}</text>
+          </view>
+        </slot>
+      </view>
+      <view class="action-sheet-cancel" v-if="false" @click.stop="handleCancel">{{ cancelText }}</view>
+      <view class="action-sheet-line"></view>
+    </view>
+  </view>
+</template>
+
+<script>
+export default {
+  name: 'ActionSheet',
+  props: {
+    // 标题
+    title: {
+      type: String,
+      default: ''
+    },
+    // 选项列表，格式：[{text: '选项1', icon: 'fa-share-alt', danger: false}, ...]
+    items: {
+      type: Array,
+      default: () => []
+    },
+    // 取消按钮文字
+    cancelText: {
+      type: String,
+      default: '取消'
+    },
+    // 点击遮罩是否关闭
+    maskClosable: {
+      type: Boolean,
+      default: true
+    }
+  },
+  data() {
+    return {
+      visible: false,
+      animationShow: false
+    }
+  },
+  methods: {
+    // 显示ActionSheet
+    show() {
+      this.visible = true;
+      setTimeout(() => {
+        this.animationShow = true;
+      }, 10);
+    },
+
+    // 隐藏ActionSheet
+    hide() {
+      this.animationShow = false;
+      setTimeout(() => {
+        this.visible = false;
+      }, 300); // 动画持续时间
+    },
+
+    // 处理选项点击
+    handleItemClick(index, item) {
+      this.$emit('select', index, item);
+      this.hide();
+    },
+
+    // 处理取消按钮点击
+    handleCancel() {
+      this.$emit('cancel');
+      this.hide();
+    },
+
+    // 处理遮罩点击
+    handleMaskClick() {
+      if (this.maskClosable) {
+        this.$emit('cancel');
+        this.hide();
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+.action-sheet-container {
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  z-index: 999;
+
+
+  .action-sheet-mask {
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    background-color: rgba(0, 0, 0, 0.5);
+  }
+
+  .action-sheet {
+    position: absolute;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    transform: translateY(100%);
+    transition: transform 0.3s ease;
+    background: #F2F6F2;
+    border-radius: 24rpx 24rpx 0 0;
+    overflow: hidden;
+    padding: 60rpx 32rpx;
+
+    &.action-sheet-show {
+      transform: translateY(0);
+    }
+
+    .action-sheet-title {
+      padding: 24rpx;
+      text-align: center;
+      font-size: 28rpx;
+      color: #999;
+      background-color: #fff;
+      border-bottom: 1rpx solid #eee;
+    }
+
+    .action-sheet-items {
+
+      .action-sheet-item {
+        background-color: #fff;
+        display: flex;
+        align-items: center;
+        justify-content: start;
+        height: 110rpx;
+        font-size: 32rpx;
+        color: #333;
+        border-bottom: 1rpx solid #eee;
+        box-sizing: border-box;
+        padding-left: 30rpx;
+
+
+        &:active {
+          background-color: #f2f2f2;
+        }
+
+        &.action-sheet-item-danger {
+          color: #ff5151;
+          margin-top: 16rpx;
+          border-radius: 20rpx;
+        }
+
+        .action-sheet-item-icon {
+          margin-right: 16rpx;
+          width: 36rpx;
+          height: 36rpx;
+        }
+
+        .action-sheet-item-text {
+          font-size: 32rpx;
+        }
+
+        &:first-child {
+          border-top-right-radius: 20rpx;
+          border-top-left-radius: 20rpx;
+        }
+
+        &:nth-child(2) {
+          border-bottom-right-radius: 20rpx;
+          border-bottom-left-radius: 20rpx;
+        }
+
+        &:last-child {
+          border-bottom-right-radius: 20rpx;
+          border-bottom-left-radius: 20rpx;
+        }
+      }
+    }
+
+    .action-sheet-cancel {
+      height: 110rpx;
+      line-height: 110rpx;
+      text-align: center;
+      font-size: 32rpx;
+      color: #333;
+      background-color: #fff;
+      margin-top: 16rpx;
+
+      &:active {
+        background-color: #f2f2f2;
+      }
+    }
+
+    .action-sheet-line {
+      position: absolute;
+      top: 16rpx;
+      left: 50%;
+      transform: translateX(-50%);
+      width: 62rpx;
+      height: 8rpx;
+      background: #D1DED1;
+      border-radius: 224rpx;
+    }
+  }
+}
+</style>

components/CommentSection/CommentSection.vue

@@ -0,0 +1,251 @@
+<template>
+	<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>
+</template>
+
+<script>
+import CComment from "@/components/cc-comment/cc-comment.vue";
+
+export default {
+	name: 'CommentSection',
+	components: {
+		CComment
+	},
+	props: {
+		myInfo: {
+			type: Object,
+			required: true
+		},
+		userInfo: {
+			type: Object,
+			required: true
+		},
+		articleId: {
+			type: [Number, String],
+			required: true
+		},
+		type: {
+			type: String,
+			default: 'work'
+		}
+	},
+	data() {
+		return {
+			deleteMode: "all",
+			tableTotal: 0,
+			tableData: []
+		}
+	},
+	created() {
+		this.loadCommentData();
+	},
+	methods: {
+		loadCommentData() {
+			uni.request({
+				url: this.$apiHost + '/Article/getcomments',
+				data: {
+					uuid: getApp().globalData.uuid,
+					type: this.type,
+					id: this.articleId,
+					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'
+						});
+					}
+				},
+				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); // 请求失败时重置点赞效果
+				}
+			});
+		},
+		replyFun({params}, callback) {
+			console.log("replyFun", {
+				uuid: getApp().globalData.uuid,
+				type: this.type,
+				article_id: this.articleId,
+				content: params.user_content,
+				parent_id: params.parent_id || 0,
+				reply_id: params.reply_id || 0,
+				reply_name: params.reply_name || ''
+			});
+			uni.request({
+				url: this.$apiHost + '/Article/newComment',
+				data: {
+					uuid: getApp().globalData.uuid,
+					type: this.type,
+					article_id: this.articleId,
+					content: params.user_content,
+					parent_id: params.parent_id || 0,
+					reply_id: params.reply_id || 0,
+					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);
+						this.loadCommentData(); // 重新加载评论列表
+					}
+				},
+				fail: (e) => {
+					console.log("评论失败:", e);
+					uni.showToast({
+						title: '评论失败，请重试',
+						icon: 'none'
+					});
+				}
+			});
+		},
+		deleteFun({params, mode}, callback) {
+			console.log("deleteFun", {params, mode});
+			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,
+					mode: mode
+				},
+				header: {
+					"content-type": "application/json",
+					'sign': getApp().globalData.headerSign
+				},
+				success: (res) => {
+					console.log("删除结果:", res.data);
+					if (res.data.success === "yes") {
+						callback(res);
+						this.loadCommentData(); // 重新加载评论列表
+					}
+				},
+				fail: (e) => {
+					console.log("删除失败:", e);
+					uni.showToast({
+						title: '删除失败，请重试',
+						icon: 'none'
+					});
+				}
+			});
+		}
+	}
+}
+</script>
+
+<style lang="scss">
+.comment-section {
+	background-color: #fff;
+	padding: 20rpx;
+	margin-top: 20rpx;
+	border-radius: 12rpx;
+
+	.section-header {
+		display: flex;
+		align-items: center;
+		margin-bottom: 20rpx;
+
+		.fa {
+			font-size: 36rpx;
+			color: #666;
+			margin-right: 10rpx;
+		}
+
+		.section-title {
+			font-size: 32rpx;
+			font-weight: bold;
+			color: #333;
+		}
+
+		.comment-count {
+			font-size: 28rpx;
+			color: #999;
+			margin-left: 10rpx;
+		}
+	}
+
+	.comment-button {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		height: 80rpx;
+		margin-top: 20rpx;
+		background-color: #f8f8f8;
+		border-radius: 40rpx;
+		cursor: pointer;
+
+		.fa {
+			font-size: 32rpx;
+			color: #666;
+			margin-right: 10rpx;
+		}
+
+		text {
+			font-size: 28rpx;
+			color: #666;
+		}
+
+		&:active {
+			background-color: #f0f0f0;
+		}
+	}
+}
+</style>

pages/index/workDetail.vue

@@ -104,22 +104,8 @@
 		<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>
+	<CommentSection ref="commentSection" :myInfo="myInfo" :userInfo="userInfo" :articleId="arcID"></CommentSection>
+		
 
 		<view class="thread2"></view>
 
@@ -128,8 +114,8 @@
 
 <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'; //引用插件
+import CommentSection from '@/components/CommentSection/CommentSection.vue';
 	function parseImgs(nodes) {
 		nodes.forEach(node => {
 			if (
@@ -150,9 +136,9 @@
 	}
 	export default {
 		components: {
-			previewImage,
-			CComment
-		},
+		previewImage,
+		CommentSection,
+	},
 		data() {
 			return {
 				title: '',
@@ -204,10 +190,14 @@
 			this.arcID = parms.id || 393;
 		},
 		onShow() {
-			uni.$emit('check_update');
-			this.loadData();
-			this.loadCommentData();
-		},
+		uni.$emit('check_update');
+		this.loadData();
+		this.$nextTick(() => {
+			if (this.$refs.commentSection) {
+				this.$refs.commentSection.loadCommentData();
+			}
+		});
+	},
 		onReady() {
 			// 初始化音频播放器
 			this.audioPlayer = uni.createInnerAudioContext();
@@ -280,75 +270,12 @@
 					}
 				});
 			},
-			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); // 请求失败时重置点赞效果
-					}
-				});
-			},
+	openComment() {
+		if (this.$refs.commentSection) {
+			this.$refs.commentSection.openComment();
+		}
+	},
 			// 文章点赞
 			likeArticle() {
 				uni.request({
@@ -423,114 +350,6 @@
 					});
 				}
 			},
-			// 评论回调事件
-			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;

pages/makedetail/makeDetail copy.vue

@@ -0,0 +1,1014 @@
+<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.avator" mode="aspectFill"></image>
+					<text class="navbar-text">{{ myinfo.nickname }}</text>
+					<text class="navbar-badge" v-if="myinfo.is_vip > 0">VIP</text>
+					<!-- <image style=" width: 34rpx;  height: 34rpx;" v-if="myinfo.is_vip > 0" src="@/static/me/icon-vip1.png" mode=""></image> -->
+
+				</view>
+			</view>
+			<view class="navbar-right" @click="showActionSheet">
+				<text class="fa fa-ellipsis-h"></text>
+			</view>
+		</view>
+		<view class="topStatusBar inProgress" :class="queueDetail.task_type == 1 ? 'mb20' : ''"> 审核中</view>
+		<view class="topStatusBar fail" :class="queueDetail.task_type == 1 ? 'mb20' : ''"> 审核未通过，点击查看原因</view>
+		<!-- 灵感 -->
+		<template v-if="queueDetail.task_type == 1">
+			<view class="inspiration-content" v-if="home_image">
+				<image v-if="home_image" src="../../static/makedetail/cz_img_zhanshi.png" mode="widthFix"></image>
+				<image :src="home_image" class="inspirationPictures" mode="widthFix"></image>
+			</view>
+			<!-- 内容头图区域 -->
+			<view class="topUser" ref="ImageBox" v-if="false">
+				<image :src="home_image" class="home_image" mode="aspectFill"></image>
+			</view>
+
+			<view class="body" v-if="false">
+				<view class="article-header">
+					<text class="title">{{ queueDetail.title }}</text>
+
+					<!-- 显示第一个像素的颜色 -->
+					<view class="pixel-color" v-if="pixelColor">
+						<view class="color-box"
+							:style="{ backgroundColor: `rgb(${pixelColor.r}, ${pixelColor.g}, ${pixelColor.b})` }">
+						</view>
+						<view class="color-info">
+							<text class="color-text">左上角像素RGB值:</text>
+							<text class="color-value">R:{{ pixelColor.r }} G:{{ pixelColor.g }} B:{{ pixelColor.b
+							}}</text>
+							<text class="color-hex">HEX: {{ rgbToHex(pixelColor.r, pixelColor.g, pixelColor.b) }}</text>
+						</view>
+					</view>
+
+					<!-- 颜色加载中状态 -->
+					<view class="pixel-color loading"
+						v-else-if="home_image && home_image !== '../../static/home/avator.png'">
+						<view class="color-box loading"></view>
+						<!-- <text class="color-text">正在获取像素颜色...</text> -->
+					</view>
+
+					<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 class="creation-details">
+							<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>
+
+					<!-- 音乐创作显示lyrics -->
+					<view v-else-if="queueDetail.task_type == 2">
+						<text class="content">{{ queueDetail.lyrics }}</text>
+
+						<!-- 音乐创作显示歌曲名称 -->
+						<view class="creation-details">
+							<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>
+
+					<!-- 显示状态信息 -->
+					<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>
+
+		</template>
+		<!-- 音乐 -->
+		<template v-else-if="queueDetail.task_type == 2">
+			<view class="musicContentBox">
+				<view class="headCard">
+					<image :src="home_image" class="songCover"></image>
+					<view class="songInfo">
+						<view class="songTitle">{{ addBrackets(queueDetail.song_name) }}</view>
+						<view class="songTag">
+							<view class="tag" v-for="(item, index) in commaToArray(queueDetail.style)"
+								:key="index + item">{{ item }}</view>
+						</view>
+					</view>
+					<template v-if="queueDetail.task_type == 2 && queueDetail.status >= 9">
+
+						<image @click="toggleAudio" v-if="isPlaying" src="@/static/makedetail/cz_icon_zanting.png"
+							class="playerButton"></image>
+						<image @click="toggleAudio" v-else src="@/static/makedetail/cz_icon_bofang.png"
+							class="playerButton"></image>
+					</template>
+				</view>
+				<view class="contentHeader"> 
+					<view class="musicContent">
+						<text> {{ queueDetail.description }}</text>
+					</view>
+					<view class="maskLayer"></view>
+				</view>
+
+			</view> 
+			<!-- 内容头图区域 -->
+			<view class="topUser" ref="ImageBox" v-if="false">
+				<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" @mousedown="startDrag"
+					@mouseup="stopDrag" @mousemove="drag">
+					<text class="lyrics-text" ref="lyricsText" :style="{ transform: `translateY(${offsetY}px)` }">{{
+						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" v-if="false">
+				<view class="article-header">
+					<text class="title">{{ queueDetail.title }}</text>
+
+					<!-- 显示第一个像素的颜色 -->
+					<view class="pixel-color" v-if="pixelColor">
+						<view class="color-box"
+							:style="{ backgroundColor: `rgb(${pixelColor.r}, ${pixelColor.g}, ${pixelColor.b})` }">
+						</view>
+						<view class="color-info">
+							<text class="color-text">左上角像素RGB值:</text>
+							<text class="color-value">R:{{ pixelColor.r }} G:{{ pixelColor.g }} B:{{ pixelColor.b
+							}}</text>
+							<text class="color-hex">HEX: {{ rgbToHex(pixelColor.r, pixelColor.g, pixelColor.b) }}</text>
+						</view>
+					</view>
+
+					<!-- 颜色加载中状态 -->
+					<view class="pixel-color loading"
+						v-else-if="home_image && home_image !== '../../static/home/avator.png'">
+						<view class="color-box loading"></view>
+						<!-- <text class="color-text">正在获取像素颜色...</text> -->
+					</view>
+
+					<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 class="creation-details">
+							<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>
+
+					<!-- 音乐创作显示lyrics -->
+					<view v-else-if="queueDetail.task_type == 2">
+						<text class="content">{{ queueDetail.lyrics }}</text>
+
+						<!-- 音乐创作显示歌曲名称 -->
+						<view class="creation-details">
+							<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>
+
+					<!-- 显示状态信息 -->
+					<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>
+		</template>
+
+
+		<!-- 作品描述 -->
+		<view class="workDescription">
+			<view class="workDescription-title">
+				<view>创作描述 </view>
+				<!-- <image class="pen" src="@/static/icon/wd_icon_bianji.png"></image> -->
+			</view>
+			<view class="workDescription-content">
+				{{ queueDetail.lyrics || queueDetail.description }}
+			</view>
+		</view>
+		<!-- 作品描述 -->
+		<view class="workDescription" v-if="queueDetail.content">
+			<view class="workDescription-title">
+				<view>创作说明 </view>
+				<!-- <image class="pen" src="@/static/icon/wd_icon_bianji.png"></image> -->
+			</view>
+			<view class="workDescription-content">
+				{{ noteContent }}
+			</view>
+		</view>
+
+
+
+
+		<view class="thread2"></view>
+
+		<!-- 音频元素 -->
+		<audio id="audioPlayer" :src="queueDetail.result_audio" style="display:none;"></audio>
+
+		<!-- 用于处理图片像素的隐藏canvas -->
+		<canvas canvas-id="pixelCanvas"
+			style="width: 10px; height: 10px; position: absolute; left: -100px; top: -100px;"></canvas>
+
+		<!-- 底部漂浮栏 -->
+		<view class="floating-bar" v-if="queueDetail.status == 9">
+			<view class="floating-bar-content">
+				<view class="add-note-btn" @click="openContentPopUpWindow">
+					<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> -->
+
+
+
+		<NicknamePopup title="添加说明" subtitle="" class="openContentPopUpWindow" ref="openContentPopUpWindow">
+			<template slot="content">
+				<uv-textarea v-model="noteContent" maxlength="500" count placeholder="请描述你添加的内容"></uv-textarea>
+
+				<view class="btn-box" @click="confirmAddNote">确认</view>
+			</template>
+		</NicknamePopup>
+
+	</view>
+</template>
+
+<script>
+import previewImage from '@/components/kxj-previewImage/kxj-previewImage.vue'; //引用插件
+import NicknamePopup from '@/components/NicknamePopup/NicknamePopup.vue'; 
+export default {
+	components: {
+		previewImage,
+		NicknamePopup, 
+	},
+	data() {
+		return {
+			title: '',
+			arcID: 0,
+			selImg: 0,
+			home_image: '',
+			myinfo: {},
+			tag_list: [],
+			image_list: [],
+			imgs: [],
+			descs: [],
+			isPlaying: false,
+			audioPlayer: null,
+			showNotePopup: false,
+			noteContent: '',
+			pixelColor: null, // 存储像素颜色值
+
+			// 队列详情数据
+			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: {},
+			offsetY: 0,
+			isDragging: false,
+			startY: 0,
+			initialOffsetY: 0, 
+		}
+	},
+	onLoad(parms) {
+		let self = this;
+		this.arcID = parms.id || 9;
+		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();
+		}
+	},
+	mounted() {
+
+	},
+	methods: {
+
+		openContentPopUpWindow() {
+			this.$refs.openContentPopUpWindow.open();
+		},
+		closeContentPopUpWindow() {
+			this.$refs.openContentPopUpWindow.close();
+
+		},
+		// 获取图片第一个像素的RGB值
+		getImagePixelColor() {
+			console.log("图片加载完成，准备获取像素颜色");
+
+			// 清空之前的颜色值，进入加载状态
+			this.pixelColor = null;
+
+			// 如果是默认图片或空图片，则直接返回
+			if (!this.home_image || this.home_image === '../../static/home/avator.png') {
+				console.log("无有效图片，不获取像素颜色");
+				return;
+			}
+
+			// 使用uni.getImageInfo获取图片信息
+			uni.getImageInfo({
+				src: this.home_image,
+				success: (res) => {
+					console.log("图片信息:", res);
+
+					// 创建临时canvas绘制上下文
+					const ctx = uni.createCanvasContext('pixelCanvas', this);
+
+					// 修改绘制参数，确保只绘制图片左上角的一小块区域
+					// drawImage(图片路径, 源图片裁剪x, 源图片裁剪y, 源图片裁剪宽度, 源图片裁剪高度, canvas目标x, canvas目标y, canvas目标宽度, canvas目标高度)
+					// 这里我们只从源图片左上角裁剪10x10的区域，绘制到canvas的左上角
+					ctx.drawImage(res.path, 0, 0, 10, 10, 0, 0, 10, 10);
+
+					ctx.draw(false, () => {
+						// 绘制完成后，获取像素数据
+						setTimeout(() => { // 添加短暂延迟确保绘制完成
+							uni.canvasGetImageData({
+								canvasId: 'pixelCanvas',
+								x: 0, // 获取(0,0)位置的像素
+								y: 0,
+								width: 1,
+								height: 1,
+								success: (res) => {
+									// 获取像素RGB值
+									this.pixelColor = {
+										r: res.data[0],
+										g: res.data[1],
+										b: res.data[2],
+										a: res.data[3]
+									};
+									console.log("第一个像素的RGB值:", this
+										.pixelColor);
+								},
+								fail: (err) => {
+									console.error("获取像素数据失败:", err);
+									// 显示错误提示
+									uni.showToast({
+										title: '获取颜色失败',
+										icon: 'none',
+										duration: 2000
+									});
+								}
+							});
+						}, 100);
+					});
+				},
+				fail: (err) => {
+					console.error("获取图片信息失败:", err);
+					// 显示错误提示
+					uni.showToast({
+						title: '图片加载失败',
+						icon: 'none',
+						duration: 2000
+					});
+				}
+			});
+		},
+		// 返回上一页
+		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: '加载中...'
+			});
+			let that = this;
+			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];
+
+							// 当图片更新后，手动触发获取像素颜色（因为图片可能从缓存加载，不会触发@load事件）
+							// setTimeout(() => {
+							// 	that.getImagePixelColor();
+							// }, 500);
+						} 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.noteContent = '';
+						this.closeContentPopUpWindow();
+						// 重新加载数据
+						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'
+					});
+				}
+			});
+		},
+		startDrag(event) {
+			this.isDragging = true;
+			this.startY = event.clientY;
+			this.initialOffsetY = this.offsetY || 0;
+		},
+		stopDrag() {
+			this.isDragging = false;
+		},
+		drag(event) {
+			if (this.isDragging) {
+				const deltaY = event.clientY - this.startY;
+				const newOffsetY = this.initialOffsetY + deltaY;
+
+				// Get the height of the lyrics text
+				const lyricsTextHeight = this.$refs.lyricsText ? this.$refs.lyricsText.$el.clientHeight : 0;
+				const imageBoxHeight = this.$refs.ImageBox ? this.$refs.ImageBox.$el.clientHeight : 0;
+
+
+				// Define the threshold limits based on the height of the lyrics text
+				const minY = -lyricsTextHeight + 50 + imageBoxHeight; // Allow some space above
+				const maxY = lyricsTextHeight / 2;  // Allow some space below
+
+				// Apply the limits
+				this.offsetY = Math.min(Math.max(newOffsetY, minY), maxY);
+
+				// Log the height and current offset
+				console.log('Lyrics Text Height:', lyricsTextHeight);
+				console.log('Current Offset Y:', this.offsetY);
+				console.log(this);
+			}
+		},
+		rgbToHex(r, g, b) {
+			return '#' + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1);
+		},
+
+		// 新增过滤器方法
+		commaToArray(str) {
+			if (!str) return '';
+			return str.split(',');
+		},
+
+		// 新增过滤器方法
+		addBrackets(str) {
+			if (!str) return '';
+			if (!str.startsWith('《')) {
+				str = '《' + str;
+			}
+			if (!str.endsWith('》')) {
+				str = str + '》';
+			}
+			return str;
+		},
+	}
+}
+</script>
+
+<style scoped lang="scss">
+@import 'makeDetail.scss';
+
+.openContentPopUpWindow {
+	::v-deep.uv-textarea {
+		width: 694rpx !important;
+		border-radius: 20rpx !important;
+		border: 1rpx solid #000000 !important;
+		margin: 0 auto;
+		margin-bottom: 44rpx;
+		min-height: 300rpx;
+	}
+}
+</style>

pages/makedetail/makeDetail.scss

@@ -287,6 +287,23 @@ page {
     }
   }
 }
+.topStatusBar {
+  width: 100%;
+  height: 48rpx;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  &.mb20 {
+    margin-bottom: 20rpx;
+  }
+}
+.inProgress {
+  background: #acf934;
+}
+.fail {
+  background: #fd3a3a;
+  color: #fff;
+}
 // 灵感模式的样式
 .inspiration-content {
   width: 700rpx;
@@ -299,19 +316,104 @@ page {
   display: flex;
   align-items: center;
   justify-content: center;
-  flex-direction: column; 
+  flex-direction: column;
 
- image{
-  width: 100%;
-  height: auto;
-  margin: 0;
- }
- .inspirationPictures{
-  border-radius: 0px 0px 32rpx 32rpx;
-  border: 2rpx solid #000000;
- }
+  image {
+    width: 100%;
+    height: auto;
+    margin: 0;
+  }
+  .inspirationPictures {
+    border-radius: 0px 0px 32rpx 32rpx;
+    border: 2rpx solid #000000;
+  }
+}
+// 音乐模式样式
+.musicContentBox {
+  padding-top: 20rpx;
+  .headCard {
+    background: #fff;
+    width: 694rpx;
+    height: 172rpx;
+    border-radius: 20rpx;
+    box-sizing: border-box;
+    padding: 20rpx 24rpx 28rpx 20rpx;
+    margin: 0rpx auto;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    .songCover {
+      width: 124rpx;
+      height: 124rpx;
+      border-radius: 16rpx;
+    }
+    .songInfo {
+      width: 400rpx;
+      .songTitle {
+        font-family: PingFang SC;
+        font-weight: 400;
+        font-size: 34rpx;
+        color: #1f1f1f;
+        padding-bottom: 4rpx;
+      }
+      .songTag {
+        display: flex;
+        flex-wrap: wrap;
+        max-height: 88rpx;
+        overflow: hidden;
+        .tag {
+          padding: 2rpx 6rpx;
+          font-family: PingFang SC;
+          font-weight: 400;
+          font-size: 20rpx;
+          color: #1f1f1f;
+          border-radius: 8rpx;
+          border: 2rpx solid #e6e6e6;
+          margin-right: 8rpx;
+          margin-bottom: 5rpx;
+        }
+      }
+    }
+    .playerButton {
+      width: 76rpx;
+      height: 76rpx;
+    }
+  }
+  .contentHeader {
+    position: relative;
+    left: 0;
+    top: 0;
+    padding-bottom: 40rpx;
+    .musicContent {
+      width: calc(100% - 38rpx);
+      height: 620rpx;
+      margin: 38rpx auto;
+      margin-right: 0;
+      overflow: hidden;
+      overflow-y: auto;
+      background: url("../../static/makedetail/cz_img_cd.png") center right/auto
+        100% no-repeat;
+      background-position-x: 370%;
+      box-sizing: border-box;
+      padding: 200rpx 0;
+    }
+    .maskLayer {
+      width: 60%;
+      height: 100%;
+      position: absolute;
+      left: 0;
+      top: 0;
+      background: linear-gradient(
+        to bottom,
+        rgba(242, 246, 242, 0.8) 0,
+        rgba(242, 246, 242, 0) 45%,
+        rgba(242, 246, 242, 0) 55%,
+        rgba(242, 246, 242, 0.8) 100%
+      );
+      pointer-events: none;
+    }
+  }
 }
-
 // 作品描述
 .workDescription {
   margin: 20rpx 28rpx 80rpx 28rpx;
@@ -685,3 +787,41 @@ page {
     color: #ff5151;
   }
 }
+.failureReason {
+  padding: 40rpx;
+  padding-top: 52tpx;
+  background: #fff;
+  width: 600rpx;
+  min-height: 346rpx;
+  border-radius: 28rpx;
+  box-sizing: border-box;
+  .title {
+    font-family: PingFang SC, PingFang SC;
+    font-weight: 400;
+    font-size: 36rpx;
+    color: #1f1f1f;
+    text-align: center;
+    margin-bottom: 24rpx;
+  }
+  .reviewContent {
+    font-family: PingFang SC, PingFang SC;
+    font-weight: 400;
+    font-size: 28rpx;
+    color: #1f1f1f;
+  }
+  .btn-box {
+    background: #1f1f1f;
+    color: #fff;
+    margin: 0 auto;
+    width: 244rpx;
+    height: 72rpx;
+    font-size: 32rpx;
+    font-family: "PingFang SC-Bold";
+    background: #1f1f1f;
+    border-radius: 12rpx;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin-top: 54rpx;
+  }
+}

pages/makedetail/makeDetail.vue

@@ -18,252 +18,52 @@
 					<image class="navbar-avatar" :src="myinfo.avator" mode="aspectFill"></image>
 					<text class="navbar-text">{{ myinfo.nickname }}</text>
 					<text class="navbar-badge" v-if="myinfo.is_vip > 0">VIP</text>
-					<!-- <image style=" width: 34rpx;  height: 34rpx;" v-if="myinfo.is_vip > 0" src="@/static/me/icon-vip1.png" mode=""></image> -->
-
 				</view>
 			</view>
 			<view class="navbar-right" @click="showActionSheet">
 				<text class="fa fa-ellipsis-h"></text>
 			</view>
 		</view>
+		<view class="topStatusBar inProgress" v-if="fileInformation.status == 2"
+			:class="queueDetail.task_type == 1 ? 'mb20' : ''"> 审核中</view>
+		<view class="topStatusBar fail" v-if="fileInformation.status == 4"
+			:class="queueDetail.task_type == 2 ? 'mb20' : ''" @click="openConfirmationBox"> 审核未通过，点击查看原因</view>
+
 		<!-- 灵感 -->
 		<template v-if="queueDetail.task_type == 1">
-			<view class="inspiration-content">
-				<image src="../../static/makedetail/cz_img_zhanshi.png" mode="widthFix"></image>
+			<view class="inspiration-content" v-if="home_image">
+				<image v-if="home_image" src="../../static/makedetail/cz_img_zhanshi.png" mode="widthFix"></image>
 				<image :src="home_image" class="inspirationPictures" mode="widthFix"></image>
 			</view>
-			<!-- 内容头图区域 -->
-			<view class="topUser" ref="ImageBox" v-if="false">
-				<image :src="home_image" class="home_image" mode="aspectFill"></image>
-			</view>
-
-			<view class="body" v-if="false">
-				<view class="article-header">
-					<text class="title">{{ queueDetail.title }}</text>
-
-					<!-- 显示第一个像素的颜色 -->
-					<view class="pixel-color" v-if="pixelColor">
-						<view class="color-box"
-							:style="{ backgroundColor: `rgb(${pixelColor.r}, ${pixelColor.g}, ${pixelColor.b})` }">
-						</view>
-						<view class="color-info">
-							<text class="color-text">左上角像素RGB值:</text>
-							<text class="color-value">R:{{ pixelColor.r }} G:{{ pixelColor.g }} B:{{ pixelColor.b
-							}}</text>
-							<text class="color-hex">HEX: {{ rgbToHex(pixelColor.r, pixelColor.g, pixelColor.b) }}</text>
-						</view>
-					</view>
-
-					<!-- 颜色加载中状态 -->
-					<view class="pixel-color loading"
-						v-else-if="home_image && home_image !== '../../static/home/avator.png'">
-						<view class="color-box loading"></view>
-						<!-- <text class="color-text">正在获取像素颜色...</text> -->
-					</view>
-
-					<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 class="creation-details">
-							<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>
-
-					<!-- 音乐创作显示lyrics -->
-					<view v-else-if="queueDetail.task_type == 2">
-						<text class="content">{{ queueDetail.lyrics }}</text>
-
-						<!-- 音乐创作显示歌曲名称 -->
-						<view class="creation-details">
-							<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>
-
-					<!-- 显示状态信息 -->
-					<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>
 
 		</template>
 		<!-- 音乐 -->
 		<template v-else-if="queueDetail.task_type == 2">
-			<!-- 内容头图区域 -->
-			<view class="topUser" ref="ImageBox">
-				<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" @mousedown="startDrag"
-					@mouseup="stopDrag" @mousemove="drag">
-					<text class="lyrics-text" ref="lyricsText" :style="{ transform: `translateY(${offsetY}px)` }">{{
-						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="pixel-color" v-if="pixelColor">
-						<view class="color-box"
-							:style="{ backgroundColor: `rgb(${pixelColor.r}, ${pixelColor.g}, ${pixelColor.b})` }">
-						</view>
-						<view class="color-info">
-							<text class="color-text">左上角像素RGB值:</text>
-							<text class="color-value">R:{{ pixelColor.r }} G:{{ pixelColor.g }} B:{{ pixelColor.b
-							}}</text>
-							<text class="color-hex">HEX: {{ rgbToHex(pixelColor.r, pixelColor.g, pixelColor.b) }}</text>
+			<view class="musicContentBox">
+				<view class="headCard">
+					<image :src="home_image" class="songCover"></image>
+					<view class="songInfo">
+						<view class="songTitle">{{ addBrackets(queueDetail.song_name) }}</view>
+						<view class="songTag">
+							<view class="tag" v-for="(item, index) in commaToArray(queueDetail.style)"
+								:key="index + item">{{ item }}</view>
 						</view>
 					</view>
+					<template v-if="queueDetail.task_type == 2 && queueDetail.status >= 9">
 
-					<!-- 颜色加载中状态 -->
-					<view class="pixel-color loading"
-						v-else-if="home_image && home_image !== '../../static/home/avator.png'">
-						<view class="color-box loading"></view>
-						<!-- <text class="color-text">正在获取像素颜色...</text> -->
-					</view>
-
-					<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>
+						<image @click="toggleAudio" v-if="isPlaying" src="@/static/makedetail/cz_icon_zanting.png"
+							class="playerButton"></image>
+						<image @click="toggleAudio" v-else src="@/static/makedetail/cz_icon_bofang.png"
+							class="playerButton"></image>
+					</template>
 				</view>
-
-				<view class="divider"></view>
-
-				<view class="article-content">
-					<!-- 灵感创作显示description -->
-					<view v-if="queueDetail.task_type == 1">
-						<text class="content">{{ queueDetail.description }}</text>
-
-						<!-- 显示创作详情 -->
-						<view class="creation-details">
-							<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>
-
-					<!-- 音乐创作显示lyrics -->
-					<view v-else-if="queueDetail.task_type == 2">
-						<text class="content">{{ queueDetail.lyrics }}</text>
-
-						<!-- 音乐创作显示歌曲名称 -->
-						<view class="creation-details">
-							<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>
-
-					<!-- 显示状态信息 -->
-					<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 class="contentHeader">
+					<view class="musicContent">
+						<text> {{ queueDetail.description }}</text>
 					</view>
+					<view class="maskLayer"></view>
 				</view>
+
 			</view>
 
 		</template>
@@ -273,20 +73,20 @@
 		<view class="workDescription">
 			<view class="workDescription-title">
 				<view>创作描述 </view>
-				<image class="pen" src="@/static/icon/wd_icon_bianji.png"></image>
+				<!-- <image class="pen" src="@/static/icon/wd_icon_bianji.png"></image> -->
 			</view>
 			<view class="workDescription-content">
-				{{ queueDetail.lyrics ||queueDetail.description}}
+				{{ queueDetail.lyrics || queueDetail.description }}
 			</view>
 		</view>
 		<!-- 作品描述 -->
 		<view class="workDescription" v-if="queueDetail.content">
 			<view class="workDescription-title">
-				<view>创作描述 </view>
-				<image class="pen" src="@/static/icon/wd_icon_bianji.png"></image>
+				<view>创作说明 </view>
+				<!-- <image class="pen" src="@/static/icon/wd_icon_bianji.png"></image> -->
 			</view>
 			<view class="workDescription-content">
-				{{ noteContent}}
+				{{ noteContent }}
 			</view>
 		</view>
 
@@ -303,7 +103,8 @@
 			style="width: 10px; height: 10px; position: absolute; left: -100px; top: -100px;"></canvas>
 
 		<!-- 底部漂浮栏 -->
-		<view class="floating-bar" v-if="queueDetail.status == 9">
+		<view class="floating-bar"
+			v-if="queueDetail.status == 9 && (fileInformation.status == 3 || fileInformation.status == 0)">
 			<view class="floating-bar-content">
 				<view class="add-note-btn" @click="openContentPopUpWindow">
 					<text>添加说明</text>
@@ -313,50 +114,42 @@
 				</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> -->
-
-
-
-		<NicknamePopup title="添加说明" subtitle="" class="openContentPopUpWindow"
-			ref="openContentPopUpWindow">
-			<template slot="content"> 
+		<!-- 自定义 ActionSheet -->
+		<ActionSheet ref="actionSheet" :items="[
+			{ text: '分享作品', icon: '../../static/icon/cz_icon_fenxiangzuopin.png' },
+			{ text: '修改封面', icon: '../../static/icon/cz_icon_xiugaifengmian.png' },
+			{ text: '删除作品', icon: '../../static/icon/sy_icon_shanchu.png', danger: true }
+		]" @select="handleActionSelect" @cancel="handleActionCancel" />
+		<NicknamePopup title="添加说明" subtitle="" class="openContentPopUpWindow" ref="openContentPopUpWindow">
+			<template slot="content">
 				<uv-textarea v-model="noteContent" maxlength="500" count placeholder="请描述你添加的内容"></uv-textarea>
-
 				<view class="btn-box" @click="confirmAddNote">确认</view>
 			</template>
 		</NicknamePopup>
-
+		<CustomPopup ref="confirmationBox">
+			<view class="failureReason">
+				<view class="title"> 审核未通关</view>
+				<view class="reviewContent">
+					{{ fileInformation.reason }}
+				</view>
+				<view class="btn-box" @click="closeConfirmationBox">知道了</view>
+			</view>
+		</CustomPopup>
+		<DialogBox ref="customConfirm"></DialogBox>
 	</view>
 </template>
 
 <script>
 import previewImage from '@/components/kxj-previewImage/kxj-previewImage.vue'; //引用插件
-import NicknamePopup from '@/components/NicknamePopup/NicknamePopup.vue';
-
+import NicknamePopup from '@/components//NicknamePopup/NicknamePopup.vue';
+import CustomPopup from '@/components/CustomPopup/CustomPopup.vue';
+import ActionSheet from '@/components/ActionSheet/ActionSheet.vue';
 export default {
 	components: {
 		previewImage,
-		NicknamePopup
+		NicknamePopup,
+		CustomPopup,
+		ActionSheet,
 	},
 	data() {
 		return {
@@ -374,7 +167,7 @@ export default {
 			showNotePopup: false,
 			noteContent: '',
 			pixelColor: null, // 存储像素颜色值
-
+			queueId: 0,
 			// 队列详情数据
 			queueDetail: {
 				id: 0,
@@ -400,20 +193,52 @@ export default {
 				update_time: '',
 				all_position: 0
 			},
+			fileInformation: {
+				age: 0,
+				author: "",
+				avator: "",
+				city: "",
+				content: "",
+				create_time: "",
+				dtime: "",
+				id: 0,
+				images: "",
+				is_like: 0,
+				is_vip: 0,
+				like_count: 0,
+				lyrics: "",
+				nickname: "",
+				num_comment: 0,
+				num_like: 0,
+				num_view: 0,
+				queue_id: 0,
+				reason: "",
+				result_audio: "",
+				sex: 0,
+				sso_id: 0,
+				status: 0, //1是成功  2是审核中  4是失败   3是未公布也就是私人状态
+				task_type: 0,
+				tdate: "",
+				title: "",
+				userID: 0,
+				xinzuo: "",
+			},
 			myinfo: {},
 			offsetY: 0,
 			isDragging: false,
 			startY: 0,
-			initialOffsetY: 0
+			initialOffsetY: 0,
 		}
 	},
 	onLoad(parms) {
 		let self = this;
-		this.arcID = parms.id || 9;
+		this.arcID = parms.id;
+		this.queueId = parms.queueId;
 		this.getMyInfo();
 	},
 	onShow() {
 		this.loadData();
+		this.getInfoData();
 	},
 	onReady() {
 		// 获取音频元素
@@ -433,11 +258,18 @@ export default {
 
 	},
 	methods: {
-		
+		openConfirmationBox() {
+			this.$refs.confirmationBox.open();
+		},
+		closeConfirmationBox() {
+			this.$refs.confirmationBox.close();
+
+		},
+
 		openContentPopUpWindow() {
 			this.$refs.openContentPopUpWindow.open();
 		},
-		closeContentPopUpWindow() { 
+		closeContentPopUpWindow() {
 			this.$refs.openContentPopUpWindow.close();
 
 		},
@@ -563,28 +395,6 @@ export default {
 				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%';
@@ -597,6 +407,9 @@ export default {
 				title: '加载中...'
 			});
 			let that = this;
+			if (this.queueId) {
+				that.workInformation()
+			}
 			uni.request({
 				url: this.$apiHost + '/WorkAI/getQueueDetail',
 				data: {
@@ -650,26 +463,70 @@ export default {
 				}
 			});
 		},
-		showActionSheet() {
-			// 显示操作列表
-			uni.showActionSheet({
-				itemList: ['修改封面', '删除作品'],
+		// 加载作品信息
+		workInformation() {
+			uni.request({
+				url: this.$apiHost + '/Work/getinfo',
+				data: {
+					uuid: getApp().globalData.uuid,
+					id: this.queueId
+				},
+				header: {
+					"content-type": "application/json",
+					'sign': getApp().globalData.headerSign
+				},
 				success: (res) => {
-					switch (res.tapIndex) {
-						case 0:
-							// 修改封面
-							this.editCover();
-							break;
-						case 1:
-							// 删除作品
-							this.deleteWork();
-							break;
+					console.log("文章信息:", res.data);
+					if (res.data.success === "yes") {
+						// 更新文章信息 
+						this.fileInformation = res.data.data;
+					} else {
+
 					}
 				},
-				fail: (res) => {
-					console.log(res.errMsg);
+				complete: (com) => {
+					// uni.hideLoading();
+				},
+				fail: (e) => {
+					console.log("请求失败:", e);
+					uni.showToast({
+						title: '网络请求失败',
+						icon: 'none'
+					});
 				}
 			});
+
+		},
+		showActionSheet() {
+			this.$refs.actionSheet.show();
+		},
+
+		handleActionSelect(index, item) {
+			console.log('ActionSheet selected index:', item.text,);
+
+			switch (item.text) {
+				case '分享作品':
+					break;
+				case '修改封面':
+					// 修改封面
+					if (this.fileInformation.status == 3) {
+						uni.showToast({
+							title: '作品已完成，无法修改封面！',
+							icon: 'success'
+						});
+						break;
+					}
+					this.editCover();
+					break;
+				case '删除作品':
+					// 删除作品
+					this.deleteWork();
+					break;
+			}
+		},
+
+		handleActionCancel() {
+			console.log('ActionSheet cancelled');
 		},
 		// 修改封面
 		editCover() {
@@ -751,18 +608,22 @@ export default {
 		},
 		// 删除作品
 		deleteWork() {
-			// 显示确认对话框
-			uni.showModal({
-				title: '确认删除',
-				content: '确定要删除这个作品吗？',
-				confirmColor: '#ff5151',
-				success: (res) => {
+
+			this.$refs["customConfirm"]
+				.confirm({
+					title: "确认删除",
+					content: "确定要删除这个作品吗？",
+					DialogType: "inquiry",
+					btn1: "再考虑一下",
+					btn2: "确认解绑",
+					animation: 0,
+				})
+				.then((res) => {
 					if (res.confirm) {
 						// 用户点击确定，执行删除操作
 						this.confirmDelete();
 					}
-				}
-			});
+				});
 		},
 		// 确认删除
 		confirmDelete() {
@@ -914,58 +775,64 @@ export default {
 						title: '发布失败',
 						icon: 'none'
 					});
+				},
+				complete: () => {
+					setTimeout(() => {
+						uni.navigateBack({
+							delta: 1
+						});
+					}, 800);
 				}
 			});
 		},
-		startDrag(event) {
-			this.isDragging = true;
-			this.startY = event.clientY;
-			this.initialOffsetY = this.offsetY || 0;
-		},
-		stopDrag() {
-			this.isDragging = false;
-		},
-		drag(event) {
-			if (this.isDragging) {
-				const deltaY = event.clientY - this.startY;
-				const newOffsetY = this.initialOffsetY + deltaY;
-
-				// Get the height of the lyrics text
-				const lyricsTextHeight = this.$refs.lyricsText ? this.$refs.lyricsText.$el.clientHeight : 0;
-				const imageBoxHeight = this.$refs.ImageBox ? this.$refs.ImageBox.$el.clientHeight : 0;
-
 
-				// Define the threshold limits based on the height of the lyrics text
-				const minY = -lyricsTextHeight + 50 + imageBoxHeight; // Allow some space above
-				const maxY = lyricsTextHeight / 2;  // Allow some space below
-
-				// Apply the limits
-				this.offsetY = Math.min(Math.max(newOffsetY, minY), maxY);
+		// 新增过滤器方法
+		commaToArray(str) {
+			if (!str) return '';
+			return str.split(',');
+		},
 
-				// Log the height and current offset
-				console.log('Lyrics Text Height:', lyricsTextHeight);
-				console.log('Current Offset Y:', this.offsetY);
-				console.log(this);
+		// 新增过滤器方法
+		addBrackets(str) {
+			if (!str) return '';
+			if (!str.startsWith('《')) {
+				str = '《' + str;
+			}
+			if (!str.endsWith('》')) {
+				str = str + '》';
 			}
+			return str;
+		},
+		getInfoData() {
+			uni.request({
+				url: this.$apiHost + '/Member/getinfoData',
+				data: {
+					uuid: getApp().globalData.uuid
+				},
+				header: {
+					'content-type': 'application/json'
+				},
+				success: (res) => {
+					console.log('用户信息', res.data);
+
+				}
+			});
 		},
-		rgbToHex(r, g, b) {
-			return '#' + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1);
-		}
 	}
 }
 </script>
 
 <style scoped lang="scss">
 @import 'makeDetail.scss';
+
 .openContentPopUpWindow {
-  ::v-deep.uv-textarea {
-    width: 694rpx !important;
-    border-radius: 20rpx !important;
-    border: 1rpx solid #000000 !important;
-    margin: 0 auto;
-    margin-bottom: 44rpx;
-	min-height: 300rpx;
-  }
+	::v-deep.uv-textarea {
+		width: 694rpx !important;
+		border-radius: 20rpx !important;
+		border: 1rpx solid #000000 !important;
+		margin: 0 auto;
+		margin-bottom: 44rpx;
+		min-height: 300rpx;
+	}
 }
-
 </style>

pages/my/my.vue

@@ -568,7 +568,8 @@
 				// , //任务状态(1:排队中,3:生成失败,4:生成失败,9:创作完成)
 				if (this.activeTab == 0) {
 					uni.navigateTo({
-						url: "/pages/index/workDetail?id=" + item.id,
+						// url: "/pages/index/workDetail?id=" + item.id,
+						url: "/pages/makedetail/makeDetail?id=" + item.queue_id +"&queueId="+item.id,
 					});
 				} else {
 					if (item.status >= 9) {