MoeNovaClient/pages/my/myStar.vue

<template>
	<view class="star-container">
		<PageHeader title="" class="PageHeader" v-if="state == 1 && false">
			<template slot="center"> </template>
		</PageHeader>
		<!-- 星灵基因重组仓弹窗 -->
		<view class="gender-popup" v-if="!noteContent && !showInfo && 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="isLoading">
			<image src="../../static/me/loadAnimation.gif" mode="widthFix"></image>
		</view>

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

		<!-- 角色信息展示页面 -->
		<view class="character-info" v-else-if="showInfo ">
			<view class="info-container">
				<!-- 角色立绘区域 -->
				<view class="character-portrait">
					<image :src="starInfo.image" mode="aspectFit" class="portrait-image"></image>
					<text class="character-name">{{ starInfo.name }}</text>
				</view>

				<!-- 角色信息板块 -->
				<view class="info-section">
					<view class="section-title">关于Ta</view>

					<!-- 人物简介 -->
					<view class="description-box">
						<text class="description-text">{{ starInfo.content }}</text>
					</view>

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

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

		<!-- 表单页面 -->
		<view class="form-page" v-else-if="showForm">
			<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="star-content" v-else>
			<view class="star-list">
				<!-- 这里放收藏列表内容 -->
			</view>
		</view>
	</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: 1,
			sex: "",
			selectTags: [],
		};
	},
	onLoad() {
		this.getStar("get");
	},
	methods: {
		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 || {};
					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;
					}
				},
			});
		},
		submitStar() {
			let that = this;
			uni.showLoading({
				mask: true,
			});
			uni.request({
				url: this.$apiHost + "/Work/getStar",
				data: {
					uuid: getApp().globalData.uuid,
					sex: this.tempGender,
					// noteContent: this.noteContent,
					name: this.formData.nickname,
					content: this.formData.description,
					act: "submit",
				},
				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.getStar("get");
						}, 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;
		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;
			}
		}
	}
}
</style>