MoeNovaClient/pages/makedetail/makeImgDetail.vue

<template>
	<view class="makedetail-container">
		<view class="status-bar"></view>
		<!-- 顶部导航 -->
		<view class="nav-bar">
			<view class="left">
				<view class="uni-btn-icon" @click="goBack">&#xe601;</view>
				<view class="create">灵感创作</view>
				<image src="@/static/makedetail/cz_icon_lingganchuangzuo.png" class="edit"></image>
			</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 lineUp-section" v-if="queuing">
			<view class="section-title">
				<text>创作预览</text>
				<view class="member-box">
					<image src="@/static/makedetail/wd_icon_vip(1).png" mode="aspectFit"></image>
					升级会员插队加速
				</view>
			</view>
			<view class="preview-card">
				<image src="@/static/makedetail/cz_icon_jiazai.png" mode="aspectFit"></image>
				<view class="text1">排队中1/262</view>
				<view class="text2">退出不影响继续生成</view>
			</view>
		</view>
		<!-- 创作预览区域 -->
		<view class="preview-section" v-if="inQueue">
			<view class="section-title">创作预览</view>
			<view class="preview-card">
				<image src="@/static/makedetail/cz_icon_shengcheng.png" mode="aspectFit"></image>
				<view class="text1">生成中0%</view>
				<view class="text2">退出不影响继续生成</view>
			</view>
		</view>

		<!-- 以下区域在非排队状态下显示 -->
		<view>
			<!-- 创作描述输入区 -->
			<view class="description-section">
				<view class="section-header">
					<text class="section-title">创作描述<text style="display: none;" class="required">*</text></text>
					<view class="clear-text" @click="clearDescription">
						<image src="/static/clear.png" mode="aspectFit"></image>
						<view class="clear-box">
							<image src="@/static/makedetail/cz_icon_qingkongwenben.png" class="edit"></image>
							<text>清空文本</text>
						</view>
					</view>
				</view>
				<textarea auto-height class="input-area" v-model="description" placeholder="请输入描述语,例如:穿着白色运动服,外表俊朗..."
					maxlength="1000" @input="onDescriptionInput" disabled="doYouWantToEdit"></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)"
						:class="{ active: action == 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)" :class="{ active: environment == 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)"
						:class="{ active: image == item }">{{ item
						}}</text>
				</view>
			</view>
			<!-- 参考风格选择区 -->
			<view class="style-section">
				<view class="section-title">选择参考风格<text style="display: none;" 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 v-if="!doYouWantToEdit" class="generate-btn" @click="generateImage">立即生成
					<image src="/static/icon/coin_cd.png" mode="aspectFit"></image>
					10
				</button>

				<view v-else class="generate-btn prohibit"  >生成中
				</view>


				<view class="promotion-link">
					<image class="vip" src="/static/makedetail/wd_icon_vip(1).png" mode="aspectFit"></image>
					<text> 即刻开通订阅，获取各种福利! </text>
					<image class="jiantou" src="/static/makedetail/cz_icon_jiantou.png" mode="aspectFit"></image>
				</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/dome/fenge.png'
			},
			{
				name: '国风新锋',
				image: '../../static/dome/fenge.png'
			},
			{
				name: '萌系治愈',
				image: '../../static/dome/fenge.png'
			}
			],
			inQueue: false,//是否创作中
			queuing: false,//是否排队中
			queueMessage: '',
			myinfo: {}
		}
	},
	onLoad(e) {
		// this.checkQueueStatus()
		this.getMyInfo();
	}, 
	methods: {
		doYouWantToEdit() {
			return this.inQueue || this.queuing
		},
		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>