|
|
@@ -6,6 +6,8 @@
|
|
|
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">
|
|
|
@@ -13,134 +15,283 @@
|
|
|
</view>
|
|
|
<view class="navbar-center">
|
|
|
<view class="navbar-title">
|
|
|
- <image class="navbar-avatar" :src="myinfo.avatar" mode="aspectFill"></image>
|
|
|
+ <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="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>
|
|
|
+ <!-- 灵感 -->
|
|
|
+ <template v-if="queueDetail.task_type == 1">
|
|
|
+ <view class="inspiration-content">
|
|
|
+ <image src="../../static/makedetail/cz_img_zhanshi.png" mode="widthFix"></image>
|
|
|
+ <image :src="home_image" class="inspirationPictures" mode="widthFix"></image>
|
|
|
</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 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>
|
|
|
+ <!-- 显示第一个像素的颜色 -->
|
|
|
+ <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="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="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>
|
|
|
|
|
|
- <!-- 颜色加载中状态 -->
|
|
|
- <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 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="meta-info">
|
|
|
- <view class="meta-item">
|
|
|
- <text class="fa fa-clock-o"></text>
|
|
|
- <text class="meta-text">{{ queueDetail.create_time }}</text>
|
|
|
+ <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>
|
|
|
- <view class="meta-item">
|
|
|
- <text class="fa fa-tag"></text>
|
|
|
- <text class="meta-text">{{ queueDetail.task_type == 1 ? '灵感创作' : '音乐创作' }}</text>
|
|
|
+
|
|
|
+ <!-- 音乐创作显示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="meta-item">
|
|
|
- <text class="fa fa-circle" :style="getStatusStyle(queueDetail.status)"></text>
|
|
|
- <text class="meta-text">{{ getStatusText(queueDetail.status) }}</text>
|
|
|
+
|
|
|
+ <!-- 显示状态信息 -->
|
|
|
+ <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="divider"></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="article-content">
|
|
|
- <!-- 灵感创作显示description -->
|
|
|
- <view v-if="queueDetail.task_type == 1">
|
|
|
- <text class="content">{{ queueDetail.description }}</text>
|
|
|
+ <!-- 音乐类型时显示歌词 -->
|
|
|
+ <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>
|
|
|
|
|
|
- <!-- 音乐创作显示lyrics -->
|
|
|
- <view v-if="queueDetail.task_type == 2">
|
|
|
- <text class="content">{{ queueDetail.lyrics }}</text>
|
|
|
+ <!-- 音乐类型且状态为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 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="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>
|
|
|
</view>
|
|
|
- <view class="detail-item" v-if="queueDetail.subject">
|
|
|
- <text class="detail-label">主体形象:</text>
|
|
|
- <text class="detail-value">{{ queueDetail.subject }}</text>
|
|
|
+
|
|
|
+ <!-- 颜色加载中状态 -->
|
|
|
+ <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="detail-item" v-if="queueDetail.style">
|
|
|
- <text class="detail-label">参考风格:</text>
|
|
|
- <text class="detail-value">{{ queueDetail.style }}</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="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 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>
|
|
|
- </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>
|
|
|
+ <!-- 音乐创作显示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>
|
|
|
|
|
|
- <!-- 显示错误信息 -->
|
|
|
- <view class="error-message" v-if="queueDetail.status == 3">
|
|
|
- <text class="error-text">{{ queueDetail.error_msg }}</text>
|
|
|
+ <!-- 显示错误信息 -->
|
|
|
+ <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>
|
|
|
|
|
|
@@ -154,7 +305,7 @@
|
|
|
<!-- 底部漂浮栏 -->
|
|
|
<view class="floating-bar" v-if="queueDetail.status == 9">
|
|
|
<view class="floating-bar-content">
|
|
|
- <view class="add-note-btn" @click="showAddNotePopup">
|
|
|
+ <view class="add-note-btn" @click="openContentPopUpWindow">
|
|
|
<text>添加说明</text>
|
|
|
</view>
|
|
|
<view class="publish-btn" @click="publishWork">
|
|
|
@@ -164,7 +315,7 @@
|
|
|
</view>
|
|
|
|
|
|
<!-- 添加说明弹窗 -->
|
|
|
- <view class="popup-mask" v-if="showNotePopup" @click="closeAddNotePopup"></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>
|
|
|
@@ -172,7 +323,7 @@
|
|
|
<view class="popup-content">
|
|
|
<textarea class="note-textarea" v-model="noteContent" placeholder="请描述你想添加的内容。"
|
|
|
maxlength="500"></textarea>
|
|
|
- <view class="word-count">{{noteContent.length}}/500</view>
|
|
|
+ <view class="word-count">{{ noteContent.length }}/500</view>
|
|
|
</view>
|
|
|
<view class="popup-footer">
|
|
|
<view class="cancel-btn" @click="closeAddNotePopup">
|
|
|
@@ -182,606 +333,639 @@
|
|
|
<text>确认</text>
|
|
|
</view>
|
|
|
</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 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();
|
|
|
|
|
|
- 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: '',
|
|
|
- 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
|
|
|
+ // 获取图片第一个像素的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
|
|
|
+ });
|
|
|
+ }
|
|
|
+ });
|
|
|
},
|
|
|
- onLoad(parms) {
|
|
|
- let self = this;
|
|
|
- this.arcID = parms.id || 9;
|
|
|
- this.getMyInfo();
|
|
|
+ // 返回上一页
|
|
|
+ goBack() {
|
|
|
+ uni.navigateBack({
|
|
|
+ delta: 1
|
|
|
+ });
|
|
|
},
|
|
|
- onShow() {
|
|
|
- this.loadData();
|
|
|
+ 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
|
|
|
+ }
|
|
|
+ })
|
|
|
+
|
|
|
},
|
|
|
- onReady() {
|
|
|
- // 获取音频元素
|
|
|
- this.audioPlayer = uni.createInnerAudioContext();
|
|
|
- this.audioPlayer.onEnded(() => {
|
|
|
- this.isPlaying = false;
|
|
|
- });
|
|
|
+ selPhoto(item, sel) {
|
|
|
+ this.selImg = sel;
|
|
|
+ this.home_image = this.image_list[sel];
|
|
|
},
|
|
|
- onUnload() {
|
|
|
- // 页面卸载时停止音频播放
|
|
|
- if (this.audioPlayer) {
|
|
|
- this.audioPlayer.stop();
|
|
|
- this.audioPlayer.destroy();
|
|
|
- }
|
|
|
+ toArr(imgs) {
|
|
|
+ let arr = imgs.split("|");
|
|
|
+ return arr;
|
|
|
},
|
|
|
- mounted() {
|
|
|
-
|
|
|
+ previewOpen(imgs1, index) {
|
|
|
+ this.imgs = imgs1.split("|");
|
|
|
+ setTimeout(() => this.$refs.previewImage.open(index), 0)
|
|
|
+ // 传入当前选中的图片地址或序号
|
|
|
+ return; //如需测试和uni原生预览差别可注释这两行
|
|
|
},
|
|
|
- methods: {
|
|
|
- // 获取图片第一个像素的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";
|
|
|
- }
|
|
|
+ // 切换音频播放状态
|
|
|
+ toggleAudio() {
|
|
|
+ if (!this.queueDetail.result_audio) return;
|
|
|
|
|
|
- // 如果是音频类型,设置音频源
|
|
|
- if (this.queueDetail.task_type == 2 && this.queueDetail.result_audio) {
|
|
|
- this.audioPlayer.src = this.queueDetail.result_audio;
|
|
|
- }
|
|
|
+ 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 {
|
|
|
- uni.showToast({
|
|
|
- title: '获取详情失败',
|
|
|
- icon: 'none'
|
|
|
- });
|
|
|
+ this.home_image = "../../static/home/avator.png";
|
|
|
+ }
|
|
|
+
|
|
|
+ // 如果是音频类型,设置音频源
|
|
|
+ if (this.queueDetail.task_type == 2 && this.queueDetail.result_audio) {
|
|
|
+ this.audioPlayer.src = this.queueDetail.result_audio;
|
|
|
}
|
|
|
- },
|
|
|
- complete: () => {
|
|
|
- uni.hideLoading();
|
|
|
- },
|
|
|
- fail: (e) => {
|
|
|
- console.log("请求失败:", e);
|
|
|
+ } else {
|
|
|
uni.showToast({
|
|
|
- title: '网络请求失败',
|
|
|
+ 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);
|
|
|
+ },
|
|
|
+ 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;
|
|
|
}
|
|
|
- });
|
|
|
- },
|
|
|
- // 修改封面
|
|
|
- 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: () => {
|
|
|
+ },
|
|
|
+ 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: function(uploadFileFail) {
|
|
|
- console.log('Error:', uploadFileFail.data);
|
|
|
- uni.showToast({
|
|
|
- title: '图片上传失败',
|
|
|
- icon: 'none'
|
|
|
+ },
|
|
|
+ fail: () => {
|
|
|
+ uni.showToast({
|
|
|
+ title: '修改封面失败',
|
|
|
+ icon: 'none'
|
|
|
+ });
|
|
|
+ }
|
|
|
});
|
|
|
}
|
|
|
- });
|
|
|
- }
|
|
|
- },
|
|
|
- error: function(e) {
|
|
|
- console.log(e);
|
|
|
- uni.showToast({
|
|
|
- title: '选择图片失败',
|
|
|
- icon: 'none'
|
|
|
+ },
|
|
|
+ fail: function (uploadFileFail) {
|
|
|
+ console.log('Error:', uploadFileFail.data);
|
|
|
+ uni.showToast({
|
|
|
+ title: '图片上传失败',
|
|
|
+ icon: 'none'
|
|
|
+ });
|
|
|
+ }
|
|
|
});
|
|
|
}
|
|
|
- });
|
|
|
- },
|
|
|
- // 删除作品
|
|
|
- deleteWork() {
|
|
|
- // 显示确认对话框
|
|
|
- uni.showModal({
|
|
|
- title: '确认删除',
|
|
|
- content: '确定要删除这个作品吗?',
|
|
|
- confirmColor: '#ff5151',
|
|
|
- success: (res) => {
|
|
|
- if (res.confirm) {
|
|
|
- // 用户点击确定,执行删除操作
|
|
|
- this.confirmDelete();
|
|
|
- }
|
|
|
+ },
|
|
|
+ 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: '删除中...'
|
|
|
- });
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ // 确认删除
|
|
|
+ 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'
|
|
|
+ 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
|
|
|
});
|
|
|
- }
|
|
|
- },
|
|
|
- fail: () => {
|
|
|
- uni.hideLoading();
|
|
|
+ }, 1500);
|
|
|
+ } else {
|
|
|
uni.showToast({
|
|
|
title: '删除失败',
|
|
|
icon: 'none'
|
|
|
});
|
|
|
}
|
|
|
- });
|
|
|
- },
|
|
|
- // 显示添加说明弹窗
|
|
|
- showAddNotePopup() {
|
|
|
- this.showNotePopup = true;
|
|
|
- },
|
|
|
- // 关闭添加说明弹窗
|
|
|
- closeAddNotePopup() {
|
|
|
- this.showNotePopup = false;
|
|
|
- },
|
|
|
- // 确认添加说明
|
|
|
- confirmAddNote() {
|
|
|
- if (!this.noteContent.trim()) {
|
|
|
+ },
|
|
|
+ fail: () => {
|
|
|
+ uni.hideLoading();
|
|
|
uni.showToast({
|
|
|
- title: '请输入说明内容',
|
|
|
+ title: '删除失败',
|
|
|
icon: 'none'
|
|
|
});
|
|
|
- return;
|
|
|
}
|
|
|
-
|
|
|
- uni.showLoading({
|
|
|
- title: '保存中...'
|
|
|
+ });
|
|
|
+ },
|
|
|
+ // 显示添加说明弹窗
|
|
|
+ showAddNotePopup() {
|
|
|
+ this.showNotePopup = true;
|
|
|
+ },
|
|
|
+ // 关闭添加说明弹窗
|
|
|
+ closeAddNotePopup() {
|
|
|
+ this.showNotePopup = false;
|
|
|
+ },
|
|
|
+ // 确认添加说明
|
|
|
+ confirmAddNote() {
|
|
|
+ if (!this.noteContent.trim()) {
|
|
|
+ uni.showToast({
|
|
|
+ title: '请输入说明内容',
|
|
|
+ icon: 'none'
|
|
|
});
|
|
|
+ return;
|
|
|
+ }
|
|
|
|
|
|
- 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.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'
|
|
|
});
|
|
|
}
|
|
|
- });
|
|
|
- },
|
|
|
- // 发布作品
|
|
|
- publishWork() {
|
|
|
- uni.showLoading({
|
|
|
- title: '发布中...'
|
|
|
- });
|
|
|
+ },
|
|
|
+ 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.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: '发布失败',
|
|
|
+ title: '发布成功',
|
|
|
+ icon: 'success'
|
|
|
+ });
|
|
|
+ // 重新加载数据
|
|
|
+ // this.loadData();
|
|
|
+ } else {
|
|
|
+ uni.showToast({
|
|
|
+ title: res.data.str || '发布失败',
|
|
|
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;
|
|
|
+ },
|
|
|
+ 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;
|
|
|
+ // 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
|
|
|
+ // 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);
|
|
|
+ // 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);
|
|
|
+ // 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);
|
|
|
}
|
|
|
}
|
|
|
+}
|
|
|
</script>
|
|
|
|
|
|
<style scoped lang="scss">
|
|
|
- @import 'makeDetail.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>
|