MoeNovaClient/pages/my/myStar.vue

<template>
	<view class="star-container">
		<PageHeader title="" class="PageHeader" v-if="state == 1">
			<template slot="center"> </template>
		</PageHeader>
		<!-- 星灵基因重组仓弹窗 -->
		<view class="gender-popup" v-if="state == 0">
			<NicknamePopup title="星灵基因重组仓" subtitle="" class="openContentPopUpWindow" ref="openContentPopUpWindow">
				<template slot="content">
					<uv-textarea v-model="noteContent" maxlength="200" count autoHeight
						placeholder="可描述你想要重新赋予Ta的形象、性别、性格、身份、兴趣爱好等（不会展示给其他人，仅你自己知道），示例：有一头波浪状的橙色头发，喜欢运动的阳光男孩..."></uv-textarea>
					<view class="btn-box" @tap="confirmGender">创建星灵</view>
				</template>
			</NicknamePopup>
		</view>

		<!-- 加载动画区域 -->
		<view class="loading-area" v-if="state == 2">
			<image src="../../static/me/loadAnimation.gif" mode="widthFix"></image>
		</view>

		<!-- 角色展示页面 -->
		<view class="character-page" v-else-if="state == 1">
			<view class="character-container">
				<image :src="starImg || 'https://e.zhichao.art/AI_images/b_3_92.png'" mode="widthFix"
					class="character-image">
				</image>
			</view>
			<view class="bottom-button" @tap="goToSetProfile"> 设置星灵简介 </view>
		</view>



		<!-- 表单页面 -->
		<view class="form-page" v-else-if="state == 4">
			<PageHeader title="设置星灵简介" class="PageHeader">
				<template slot="center"> </template>
			</PageHeader>
			<view class="reserveASeat"></view>

			<form @submit="submitForm">
				<view class="form-group">
					<view class="label">
						<text class="required">*</text>
						<text>昵称</text>
					</view>
					<input class="input" v-model="formData.nickname" placeholder="给星灵取个名字"
						:class="{ error: showError && !formData.nickname }" />
				</view>

				<view class="form-group">
					<view class="label">性别</view>
					<view class="gender-options">
						<view class="gender-option" :class="sex == 'male' ? 'selected' : ''">
							<view class="gender-icon male" @tap="selectGender('male')">
								<image src="../../static/me/wd_icon_nan.png" mode="aspectFit"></image>
								男性
							</view>
						</view>
						<view class="gender-option" :class="sex == 'female' ? 'selected' : ''">
							<view class="gender-icon female" @tap="selectGender('female')">
								<image src="../../static/me/wd_icon_nv.png" mode="aspectFit"></image>
								女性
							</view>
						</view>
						<view class="gender-option" :class="sex == 'other' ? 'selected' : ''">
							<view class="gender-icon other" @tap="selectGender('other')">
								<image src="../../static/me/wd_icon_qita.png" mode="aspectFit"></image>
								其它
							</view>
						</view>
					</view>
				</view>

				<view class="form-group">
					<view class="label">
						<text class="required">*</text>
						<text>人物简介</text>
					</view>
					<view class="textarea-container">
						<textarea class="textarea" v-model="formData.description"
							placeholder="填写这个角色的人物介绍，例如性格、身份、背景与历程..." :maxlength="500"
							:class="{ error: showError && !formData.description }" autoHeight />
						<text class="word-count">{{ formData.description.length }}/500</text>
					</view>
				</view>

				<view class="form-group">
					<view class="label">人物标签</view>
					<!-- <scroll-view class="tags-scroll" scroll-x="true" show-scrollbar="false">
						<view class="tags-container">
							<view class="tag" v-for="tag in predefinedTags" :key="tag">
								{{ tag }}
							</view>
						</view>
					</scroll-view> -->
					<view class="tags-container">
						<!-- <view class="tag" :class="{ active: tagSet.has(tag) }" v-for="tag in predefinedTags" :key="tag"
							@tap="switchTag(tag)">
							{{ tag }}
						</view> -->
						<uni-data-checkbox mode="tag" multiple v-model="selectTags"
							:localdata="predefinedTags"></uni-data-checkbox>
					</view>
				</view>
			</form>

			<view class="submit-button" @tap="submitStar"> 确定并提交 </view>
		</view>

		<!-- 角色信息展示页面 -->
		<view class="character-info" v-else-if="state == 5">

			<view class="custom-navbar">
				<view class="navbar-left" @click="goBack">
					<text class="fa fa-angle-left" style="color: #000;"></text>
				</view>

				<view class="navbar-right" @click="showShare = true">
					<text class="fa fa-ellipsis-h"></text>
				</view>
			</view>

			<view class="info-container">
				<!-- 角色立绘区域 -->
				<view class="character-portrait">
					<image :src="starInfo.image" mode="widthFix" class="portrait-image"></image>
				</view>

				<!-- 角色信息板块 -->
				<view class="info-section">
					<view class="character-name">
						{{ starInfo.name }}
						<image class="male" v-if="starInfo.sex == 0" src="../../static/me/wd_icon_nan.png"
							mode="aspectFit">
						</image>
						<image class="female" v-else-if="starInfo.sex == 1" src="../../static/me/wd_icon_nv.png"
							mode="aspectFit">
						</image>
						<image class="other" v-else src="../../static/me/wd_icon_qita.png" mode="aspectFit"></image>

					</view>
					<!-- <view class="section-title">关于Ta</view> -->

					<!-- 人物简介 -->
					<view class="description-box">
						<view class="description-title">
							<view>Ta的设定</view>
							<view v-if="false" class="edit-button">编辑<text class="fa fa-angle-right"
									style="color: #000;"></text></view>
						</view>
						<view class="description-text"> <text>{{ starInfo.content }}</text> </view>
					</view>

					<!-- 标签展示 -->
					<view class="description-box">
						<view class="description-title">
							<view>人物标签</view>
						</view>
						<view class="tags-box"> 
							<view class="tag-item" v-for="tag in starInfo.tags" :key="tag">
								{{ tag }}
							</view>
						</view>
					</view>
				</view>
			</view>

			<!-- 底部按钮 -->
			<view class="join-button" @tap="handleJoin"> 入驻星球 </view>
		</view>

		<SharePopup :visible="showShare" :share-url="shareUrl" :share-title="shareTitle" :share-desc="shareDesc"
			:share-img="shareImg" @close="showShare = false" />
	</view>
</template>

<script>
import tabbarView from "@/components/tabbar/tabbar.vue";

export default {
	components: {
		tabbarView,
	},
	data() {
		return {
			isLoading: false,
			selectedGender: null,
			tempGender: null,
			tabbars: [],
			ballColors: [
				"#FF6B6B", // 红色
				"#4ECDC4", // 青色
				"#45B7D1", // 蓝色
				"#96CEB4", // 绿色
				"#FFEEAD", // 黄色
				"#D4A5A5", // 粉色
				"#9A8194", // 紫色
				"#FF9F1C", // 橙色
			],
			showForm: false,
			showError: false,
			formData: {
				nickname: "",
				gender: "其他",
				description: "",
				tags: [],
			},
			predefinedTags: [],
			showInfo: false,
			starImg: "",
			noteContent: "",
			starInfo: {},
			state: 5, //0 是用户输入星灵基因重组仓的状态   1 是用户已经完成了匹星灵展示页面   2是用户匹配中加载的状态 3是匹配到了待点击进入设置界面 （根据其它字段判断是否失败）  4是用户设置星灵信息的页面  5是用户查看星灵信息的页面 待入驻 6是用户已经已经入驻星球了
			sex: "",
			selectTags: [],
			info: {
				"id": 0,
				"sso_id": 0,
				"image_id": 0,
				"image": "",
				"nickname": "",
				"user_content": "",
				"content": "",
				"sex_id": 0,
				"tags": "",
				"status": 0
			},
			showShare: false,
			shareUrl: "https://your-share-url.com",
			shareTitle: "分享标题",
			shareDesc: "分享描述",
			shareImg: "https://your-share-image.com/image.jpg",
		};
	},
	onLoad() {
		this.getStar("get");
	},
	methods: {
		// 返回上一页
		goBack() {
			uni.navigateBack({
				delta: 1
			});
		},
		confirmGender() {
			if (!this.noteContent) return;
			// this.selectedGender = this.noteContent;
			this.isLoading = true;

			this.getStar("make");
		},
		goToSetProfile() {
			this.showForm = true;
		},
		toggleTag(tag) {
			const index = this.formData.tags.indexOf(tag);
			if (index > -1) {
				this.formData.tags.splice(index, 1);
			} else {
				this.formData.tags.push(tag);
			}
		},
		handleJoin() {
			console.log("入驻星球");
			// 处理入驻逻辑
		},
		getStar(act) {
			let that = this;
			console.log("uuid", getApp().globalData.uuid);

			// 设置加载状态
			if (act === "make") {
				this.isLoading = true;
			}

			uni.request({
				url: this.$apiHost + "/Work/getStar",
				data: {
					uuid: getApp().globalData.uuid,
					sex: this.tempGender,
					// noteContent: this.noteContent,
					act: act,
				},
				header: {
					"content-type": "application/json",
					sign: getApp().globalData.headerSign,
				},
				// 设置60秒超时
				timeout: 60000,
				success: (res) => {
					console.log("res.data", res.data);
					// res.data.have = 0
					if (res.data.have == 0) {
						this.showInfo = false;
						this.starImg = res.data.image;
					} else {
						//首次进来获取到了
						this.showInfo = true;
					}
					this.openContentPopUpWindow();
					if (res.data.success === "yes") {
						this.starImg = res.data.image;
					}
					if (res.data.info && res.data.info.tags != "") {
						let tags = res.data.info.tags.split(",");
						this.predefinedTags = tags.map(tag => ({
							text: tag,
							value: tag
						}));
					}
					this.starInfo = res.data.info || {};
					this.starInfo.tags = this.starInfo.tags.trim().split(",");
					console.log("starInfo", this.starInfo);

					this.formData.description = this.starInfo.content;
					if (act == "make") {
						// 模拟加载过程
						setTimeout(() => {
							that.isLoading = false;
						}, 300);
					}
				},
				fail: (err) => {
					console.error("请求失败：", err);
					// 显示错误提示
					uni.showToast({
						title: "网络请求失败，请重试",
						icon: "none",
						duration: 2000,
					});

					// 重置加载状态
					if (act === "make") {
						that.isLoading = false;
					}

					// 如果是网络超时，自动重试一次
					if (err.errMsg.includes("timeout")) {
						setTimeout(() => {
							console.log("请求超时，正在重试...");
							that.getStar(act);
						}, 1000);
					}
				},
				complete: () => {
					// 确保在任何情况下都能重置加载状态
					if (act === "make" && this.isLoading) {
						this.isLoading = false;
					}
				},
			});
		},
		// 提交用户 开始创建的命令
		apiPeiStar() {
			if (!this.noteContent) {
				uni.showToast({
					title: "请输入匹配条件",
					icon: "none",
				});
				return;
			}
			uni.request({
				url: this.$apiHost + "/AIpipei/start",
				data: {
					uuid: getApp().globalData.uuid,
					content: this.noteContent,
				},
				header: {
					"content-type": "application/json",
					sign: getApp().globalData.headerSign,
				},
				// 设置60秒超时
				timeout: 60000,
				methods: "POST",
				success: (res) => {
					console.log("开始AI匹配", res.data);
					state
					if (res.data.have == 0) {
						this.showInfo = false;
						this.starImg = res.data.image;
					} else {
						//首次进来获取到了
						this.showInfo = true;
					}
					this.openContentPopUpWindow();
					if (res.data.success === "yes") {
						this.starImg = res.data.image;
					}
					if (res.data.info && res.data.info.tags != "") {
						let tags = res.data.info.tags.split(",");
						this.predefinedTags = tags.map(tag => ({
							text: tag,
							value: tag
						}));
					}
					this.starInfo = res.data.info || {};
					this.starInfo.tags = this.starInfo.tags.trim().split(",");
					console.log("starInfo", this.starInfo);

					this.formData.description = this.starInfo.content;
					if (act == "make") {
						// 模拟加载过程
						setTimeout(() => {
							that.isLoading = false;
						}, 300);
					}
				},
				fail: (err) => {
					console.error("请求失败：", err);
					// 显示错误提示
					uni.showToast({
						title: "网络请求失败，请重试",
						icon: "none",
						duration: 2000,
					});

					// 重置加载状态
					if (act === "make") {
						that.isLoading = false;
					}

					// 如果是网络超时，自动重试一次
					if (err.errMsg.includes("timeout")) {
						setTimeout(() => {
							console.log("请求超时，正在重试...");
							that.getStar(act);
						}, 1000);
					}
				},
				complete: () => {
					// 确保在任何情况下都能重置加载状态
					if (act === "make" && this.isLoading) {
						this.isLoading = false;
					}
				},
			});
		},
		// 查询Ai匹配信息
		aIpipeiGetinfo(act) {
			uni.request({
				url: this.$apiHost + "/AIpipei/getinfo",
				data: {
					uuid: getApp().globalData.uuid,
				},
				header: {
					"content-type": "application/json",
					sign: getApp().globalData.headerSign,
				},
				// 设置60秒超时
				timeout: 60000,
				success: (res) => {
					console.log("查询到生成信息", res.data);
				},
				fail: (err) => {
					console.error("请求失败：", err);
					// 显示错误提示
					uni.showToast({
						title: "网络请求失败，请重试",
						icon: "none",
						duration: 2000,
					});
					// 如果是网络超时，自动重试一次
					if (err.errMsg.includes("timeout")) {
						setTimeout(() => {
							console.log("请求超时，正在重试...");
							that.aIpipeiGetinfo(act);
						}, 6000);
					}
				},
				complete: () => {

				},
			});
		},
		// 保存表单信息
		submitStar() {
			this.formData.tags = this.selectTags.join(",");
			this.state = 5
			return
			let that = this;
			uni.showLoading({
				mask: true,
			});
			uni.request({
				url: this.$apiHost + "/AIpipei/save",
				data: {
					uuid: getApp().globalData.uuid,
					sex: this.tempGender,
					// noteContent: this.noteContent,
					name: this.formData.nickname,
					content: this.formData.description,

				},
				header: {
					"content-type": "application/json",
					sign: getApp().globalData.headerSign,
				},
				// 设置60秒超时
				timeout: 10000,
				success: (res) => {
					console.log("res.data", res.data);
					uni.showToast({
						title: res.data.str,
						icon: "none",
						duration: 2000,
					});
					if (res.data.success === "yes") {
						setTimeout(() => {
							that.aIpipeiGetinfo();
						}, 300);
					}
				},
				fail: (err) => {
					console.error("请求失败：", err);
					// 显示错误提示
					uni.showToast({
						title: "网络请求失败，请重试",
						icon: "none",
						duration: 2000,
					});
				},
				complete: () => {
					uni.hideLoading();
				},
			});
		},
		selectGender(option) {
			this.formData.sex = option;
			this.sex = option;
		},

		openContentPopUpWindow() {
			if (this.$refs.openContentPopUpWindow) {
				this.$refs.openContentPopUpWindow.open();
			}
		},
		closeContentPopUpWindow() {
			if (this.$refs.openContentPopUpWindow) {
				this.$refs.openContentPopUpWindow.close();
			}
		},

	},
};
</script>

<style lang="scss">
@import "./myStar.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;
		padding-bottom: 40rpx;

		.uv-textarea__field {
			min-height: 200rpx !important;
			font-weight: 400;
			font-size: 28rpx;
			color: #999999;
		}
	}
}

.textarea-container {
	.textarea {
		background: #f2f6f2 !important;
		min-height: 100rpx;
	}
}

.tags-container {


	::v-deep.checklist-box {


		border-radius: 16rpx !important;
		border: 2rpx solid #1f1f1f !important;
		background-color: #fff !important;
		display: flex;
		align-items: center;
		justify-content: center;

		.checklist-text {

			font-size: 28rpx;
			color: #1f1f1f;
			font-family: "PingFang SC-Bold" !important;
		}

		&.is-checked {
			background: #f7ffea !important;
			border-color: #7ebc00 !important;

			.checklist-text {
				color: #1f1f1f !important;
			}
		}
	}
}

.star-container {

	/* 自定义导航栏样式 */
	.custom-navbar {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		width: 100%;
		height: 90rpx;
		padding: 0 20rpx;
		padding-top: var(--status-bar-height);
		background-color: transparent;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 100;
		background: transparent;

		&::before {
			content: '';
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: var(--status-bar-height);
			background-color: #fff;
			z-index: -1;
		}

		.navbar-left {
			width: 80rpx;
			height: 80rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			
			.fa-angle-left {
				font-size: 48rpx;
				color: #333;
			}
		}

		.navbar-right {
			width: 80rpx;
			height: 80rpx;
			display: flex;
			justify-content: center;
			align-items: center;

			.fa-ellipsis-h {
				font-size: 36rpx;
				color: #333;
			}
		}
	}

}
</style>