MoeNovaClient/pages/makedetail/makeImgDetail.vue

<template>
	<view class="makedetail-container">
		<!-- 顶部导航 -->
		<view class="nav-bar">
			<view class="left">
				<view class="uni-btn-icon" @click="goBack">&#xe601;</view>
			</view>
			<view class="center">发表创作</view>
			<view class="right">
				<view class="coinM">
					<image src="/static/icon/coin_m.png" mode="aspectFit"></image>
					<text>{{myinfo.num_gmm}}</text>
				</view>
				<view class="coinC">
					<image src="/static/icon/coin_cd.png" mode="aspectFit"></image>
					<text>{{myinfo.num_gmd}}</text>
				</view>
			</view>
		</view>

		<!-- 创作预览区域 -->
		<view class="preview-section" v-if="inQueue">
			<view class="preview-title">创作预览</view>
			<view class="preview-card">
				<image class="loading-icon" src="/static/loading.png" mode="aspectFit"></image>
				<text class="loading-text">{{queueMessage}}</text>
				<text class="sub-text">请耐心等待制作完成</text>
			</view>
		</view>

		<!-- 以下区域在非排队状态下显示 -->
		<view v-if="!inQueue">
			<!-- 创作描述输入区 -->
			<view class="description-section">
				<view class="section-header">
					<text class="section-title">创作描述<text class="required">*</text></text>
					<view class="clear-text" @click="clearDescription">
						<image src="/static/clear.png" mode="aspectFit"></image>
						<text>清空文本</text>
					</view>
				</view>
				<textarea class="input-area" v-model="description" placeholder="请输入描述语,例如:穿着白色运动服,外表俊朗..."
					maxlength="1000" @input="onDescriptionInput"></textarea>
				<view class="word-count">{{descriptionLength}}/1000</view>
			</view>

			<!-- 行为动作选择区 -->
			<view class="action-section">
				<view class="section-title">行为动作</view>
				<input class="input-box" v-model="action" placeholder="可输入也可点击推荐词" />
				<view class="tag-group">
					<text class="tag" v-for="(item, index) in actionTags" :key="index"
						@click="selectAction(item)">{{item}}</text>
				</view>
			</view>

			<!-- 主体环境选择区 -->
			<view class="environment-section">
				<view class="section-title">主体环境</view>
				<input class="input-box" v-model="environment" placeholder="可输入也可点击推荐词" />
				<view class="tag-group">
					<text class="tag" v-for="(item, index) in environmentTags" :key="index"
						@click="selectEnvironment(item)">{{item}}</text>
				</view>
			</view>

			<!-- 主体形象选择区 -->
			<view class="image-section">
				<view class="section-title">主体形象</view>
				<input class="input-box" v-model="image" placeholder="可输入也可点击推荐词" />
				<view class="tag-group">
					<text class="tag" v-for="(item, index) in imageTags" :key="index"
						@click="selectImage(item)">{{item}}</text>
				</view>
			</view>

			<!-- 参考风格选择区 -->
			<view class="style-section">
				<view class="section-title">选择参考风格<text class="required">*</text></view>
				<scroll-view class="style-scroll" scroll-x>
					<view class="style-item" v-for="(item, index) in styleList" :key="index"
						:class="{'active': selectedStyle === index}" @click="selectStyle(index)">
						<image :src="item.image" mode="aspectFill"></image>
						<text>{{item.name}}</text>
					</view>
				</scroll-view>
			</view>

			<!-- 底部按钮 -->
			<view class="bottom-button">
				<button class="generate-btn" @click="generateImage">立即生成(消耗10贡献)</button>
				<view class="promotion-link">
					<text> 即刻开通订阅，获取各种福利! </text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				description: '',
				descriptionLength: 0,
				action: '',
				environment: '',
				image: '',
				selectedStyle: -1,
				actionTags: ['跳舞', '开枪', '喝咖啡', '看书', '运动'],
				environmentTags: ['都市大道', '大树底下', '办公室', '厨房'],
				imageTags: ['戴着墨镜', '戴着耳机', '戴着帽子', '手持冲浪板'],
				styleList: [{
						name: '自然共生',
						image: '/static/style1.png'
					},
					{
						name: '国风新锋',
						image: '/static/style2.png'
					},
					{
						name: '萌系治愈',
						image: '/static/style3.png'
					}
				],
				inQueue: false,
				queueMessage: '',
				myinfo: {}
			}
		},
		onLoad() {
			// this.checkQueueStatus()
			this.getMyInfo();
		},
		methods: {
			goBack() {
				uni.navigateBack()
			},
			getMyInfo() {
				uni.request({
					url: this.$apiHost + '/My/getnum',
					method: 'GET',
					header: {
						'content-type': 'application/json',
						'sign': getApp().globalData.headerSign
					},
					data: {
						uuid: getApp().globalData.uuid
					},
					success: (res) => {
						console.log("获取用户信息：", res.data);
						this.myinfo = res.data
					}
				})

			},
			checkQueueStatus() {
				uni.request({
					url: this.$apiHost + '/WorkAI/queueStatus',
					method: 'GET',
					header: {
						'Content-Type': 'application/x-www-form-urlencoded',
						'sign': getApp().globalData.headerSign
					},
					data: {
						uuid: getApp().globalData.uuid,
						task_type: 1
					},
					success: (res) => {
						console.log("队列状态：", res.data);
						if (res.data.success === "yes") {
							this.inQueue = res.data.in_queue
							if (this.inQueue) {
								this.queueMessage = res.data.str
							}
						}
					},
					fail: (err) => {
						console.log('获取队列状态失败：', err);
						uni.showToast({
							title: '获取状态失败',
							icon: 'none'
						});
					}
				})
			},
			clearDescription() {
				this.description = ''
				this.descriptionLength = 0
			},
			onDescriptionInput(e) {
				this.descriptionLength = e.detail.value.length
			},
			selectAction(tag) {
				this.action = tag
			},
			selectEnvironment(tag) {
				this.environment = tag
			},
			selectImage(tag) {
				this.image = tag
			},
			selectStyle(index) {
				this.selectedStyle = index
			},
			generateImage() {
				if (!this.description) {
					uni.showToast({
						title: '请输入创作描述',
						icon: 'none'
					})
					return
				}
				// if (this.selectedStyle === -1) {
				//   uni.showToast({
				//     title: '请选择参考风格',
				//     icon: 'none'
				//   })
				//   return
				// }
				let style = '';
				if (this.selectedStyle !== -1) {
					style = this.styleList[this.selectedStyle].name
				}

				let that = this
				uni.request({
					url: this.$apiHost + '/WorkAI/creatorLG',
					data: {
						uuid: getApp().globalData.uuid,
						description: this.description,
						action: this.action,
						environment: this.environment,
						subject: this.image,
						style: style
					},
					method: 'POST',
					header: {
						'Content-Type': 'application/x-www-form-urlencoded',
						'sign': getApp().globalData.headerSign
					},
					dataType: 'json',
					success: (res) => {
						console.log("生成结果：", res.data);
						uni.showToast({
							title: res.data.str || '请求成功',
							icon: 'none'
						});
						if (res.data.success == "yes") {
							// TODO: 处理生成成功后的逻辑
							setTimeout(function() {
								// that.checkQueueStatus()
								uni.navigateBack()
							}, 500);
						}
					},
					fail: (err) => {
						console.log('生成失败：', err);
						uni.showToast({
							title: '生成请求失败',
							icon: 'none'
						});
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	@import './makeImgDetail.scss';
</style>