MoeNovaClient/pages/my/myStar.vue

<template>
	<view class="star-container">
		<!-- 性别选择弹窗 -->
		<view class="gender-popup" v-if="!selectedGender && !showInfo">
			<view class="popup-content">
				<view class="popup-title">请选择性别</view>

				<view class="gender-cards">
					<view class="gender-card" :class="{'selected': tempGender === 'male'}" @tap="selectGender('male')">
						<image src="/static/home/nan.png" mode="aspectFit"></image>
						<text>男生</text>
						<image v-if="tempGender === 'male'" class="check-icon" src="/static/gender/check.png"
							mode="aspectFit">
						</image>
					</view>

					<view class="gender-card" :class="{'selected': tempGender === 'female'}"
						@tap="selectGender('female')">
						<image src="/static/home/nv.png" mode="aspectFit"></image>
						<text>女生</text>
						<image v-if="tempGender === 'female'" class="check-icon" src="/static/gender/check.png"
							mode="aspectFit">
						</image>
					</view>
				</view>

				<view class="confirm-btn" @tap="confirmGender">
					创建星灵
				</view>
			</view>
		</view>

		<!-- 加载动画区域 -->
		<view class="loading-area" v-if="isLoading">
			<view class="loading-wrapper">
				<!-- 中心蓝色旋转圆 -->
				<view class="center-circle"></view>

				<!-- 外围16个小球 -->
				<view class="orbit-balls">
					<view class="ball" v-for="(item,index) in 16" :key="index" :style="{
							transform: `rotate(${index * 22.5}deg)`,
							'--delay': `${index * 0.2}s`,
							'--color': ballColors[index % 8]
						}">
						<view class="ball-item"></view>
					</view>
				</view>
			</view>
			<text class="loading-text">正在加载...</text>
		</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">
			<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">
							已选{{starInfo.sex==1?'男':'女'}}
						</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="255"
							:class="{'error': showError && !formData.description}" />
						<text class="word-count">{{formData.description.length}}/255</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>
			</form>

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

		<!-- 角色展示页面 -->
		<view class="character-page" v-else-if="selectedGender">
			<view class="character-container">
				<image :src="starImg" mode="aspectFit" class="character-image"></image>
			</view>
			<view class="bottom-button" @tap="goToSetProfile">
				设置星灵简介
			</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: '',
				starInfo: {}
			}
		},
		onLoad() {
			this.getStar('get');
		},
		methods: {
			selectGender(gender) {
				this.tempGender = gender;
			},
			confirmGender() {
				if (!this.tempGender) return;
				this.selectedGender = this.tempGender;
				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,
						act: act,
					},
					header: {
						"content-type": "application/json",
						'sign': getApp().globalData.headerSign
					},
					// 设置60秒超时
					timeout: 60000,
					success: (res) => {
						console.log("res.data", res.data);
						if (res.data.have == 0) {
							this.showInfo = false;
							this.starImg = res.data.image;
						} else {
							//首次进来获取到了
							this.showInfo = true;
						}
						if (res.data.success === "yes") {
							this.starImg = res.data.image;
						}
						if (res.data.info && res.data.info.tags != "") {
							let img2 = [];
							var n2 = res.data.info.tags.split(",");
							n2.map((filePath) => {
								img2.push(filePath)
							})
							this.predefinedTags = img2;
							this.formData.tags = img2;
						}
						this.starInfo = res.data.info || {};
						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,
						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()
					}
				});
			}
		}
	}
</script>

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