MoeNovaClient/pages/makedetail/makeDetail.vue

<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" v-if="false">
					<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>
				</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" 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>

		</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>
						<image class="roll" src="@/static/icon/roll.png"></image>
					</view>
					<view class="maskLayer"></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 && (fileInformation.status == 3 || fileInformation.status == 0)">
			<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>
		<!-- 自定义 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">
					<uv-parse :content="fileInformation.reason"></uv-parse>
				</view>
				<view class="btn-box" @click="closeConfirmationBox">知道了</view>
			</view>
		</CustomPopup>
		<DialogBox ref="customConfirm"></DialogBox>
		<SharePopup :visible="showShare" :userId="userId" :share-title="shareTitle" :share-desc="shareDesc" :share-img="shareImg" view="makeDetail"
			@close="showShare = false" />
	</view>
</template>

<script>
import previewImage from '@/components/kxj-previewImage/kxj-previewImage.vue'; //引用插件
import NicknamePopup from '@/components//NicknamePopup/NicknamePopup.vue';
import CustomPopup from '@/components/CustomPopup/CustomPopup.vue';
import ActionSheet from '@/components/ActionSheet/ActionSheet.vue';
import SharePopup from "@/components/SharePopup/SharePopup.vue";
export default {
	components: {
		previewImage,
		NicknamePopup,
		CustomPopup,
		ActionSheet,
		SharePopup,
	},
	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, // 存储像素颜色值
			queueId: 0,
			showShare: false,
			shareTitle: "",
			shareDesc: "",
			shareImg: "",
			userId: 0,
			// 队列详情数据
			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
			},
			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,
		}
	},
	onLoad(parms) {
		let self = this;
		this.arcID = parms.id;
		this.queueId = parms.queueId;
		this.getMyInfo();
	},
	onShow() {
		this.loadData();
		this.getInfoData();
	},
	onReady() {
		// 获取音频元素
		this.audioPlayer = uni.createInnerAudioContext();
		this.audioPlayer.onEnded(() => {
			this.isPlaying = false;
		});
	},
	onUnload() {
		// 页面卸载时停止音频播放
		if (this.audioPlayer) {
			this.audioPlayer.stop();
			this.audioPlayer.destroy();
		}
	},
	mounted() {

	},
	methods: {
		openConfirmationBox() {
			this.$refs.confirmationBox.open();
		},
		closeConfirmationBox() {
			this.$refs.confirmationBox.close();

		},

		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;
			}
		},
		// 获取进度条宽度
		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;
			if (this.queueId) {
				that.workInformation()
			}
			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;
						}
						// 更新分享相关数据
						this.shareTitle = res.data.data.song_name||'萌创星球';
						this.shareDesc = res.data.data.description;
						this.shareImg = this.home_image;
						this.userId = res.data.data.sso_id;

						console.log(this.shareTitle,9,this.shareDesc,2,this.shareImg,3,this.userId,4,'分享数据');
					} else {
						uni.showToast({
							title: '获取详情失败',
							icon: 'none'
						});
					}
				},
				complete: () => {
					uni.hideLoading();
				},
				fail: (e) => {
					console.log("请求失败:", e);
					uni.showToast({
						title: '网络请求失败',
						icon: 'none'
					});
				}
			});
		},
		// 加载作品信息
		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) => {
					console.log("文章信息:", res.data);
					if (res.data.success === "yes") {
						// 更新文章信息 
						this.fileInformation = res.data.data;
					} else {

					}
				},
				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 '分享作品':
					this.showShare = true;
					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() {
			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() {

			this.$refs["customConfirm"]
				.confirm({
					title: "确认删除",
					content: "确定要删除这个作品吗？",
					DialogType: "inquiry",
					btn1: "再考虑一下",
					btn2: "确认删除",
					animation: 0,
				})
				.then((res) => {
					console.log(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'
					});
				},
				complete: () => {
					setTimeout(() => {
						uni.navigateBack({
							delta: 1
						});
					}, 800);
				}
			});
		},

		// 新增过滤器方法
		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;
		},
		getInfoData() {
			uni.request({
				url: this.$apiHost + '/Member/getinfoData',
				data: {
					uuid: getApp().globalData.uuid
				},
				header: {
					'content-type': 'application/json'
				},
				success: (res) => {
					console.log('用户信息', res.data);

				}
			});
		},
	}
}
</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>