MoeNovaClient/pages/my/myStar.vue

<template>
	<view class="star-container">
		<!-- 性别选择弹窗 -->
		<view class="gender-popup" v-if="!selectedGender">
			<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/gender/male.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/gender/female.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="selectedGender === 'male' ? '/static/character/male-full.png' : '/static/character/female-full.png'"
						mode="aspectFit"
						class="portrait-image"
					></image>
					<text class="character-name">{{formData.nickname}}</text>
				</view>
				
				<!-- 角色信息板块 -->
				<view class="info-section">
					<view class="section-title">关于Ta</view>
					
					<!-- 人物简介 -->
					<view class="description-box">
						<text class="description-text">{{formData.description}}</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" 
							:class="{'selected': formData.gender === gender}"
							v-for="gender in ['男', '女', '其他']" 
							:key="gender"
							@tap="formData.gender = gender"
						>
							{{gender}}
						</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" 
								:class="{'selected': formData.tags.includes(tag)}"
								v-for="tag in predefinedTags" 
								:key="tag"
								@tap="toggleTag(tag)"
							>
								{{tag}}
							</view>
						</view>
					</scroll-view>
				</view>
			</form>
			
			<view class="submit-button" @tap="handleSubmit">
				确定并提交
			</view>
		</view>
		
		<!-- 角色展示页面 -->
		<view class="character-page" v-else-if="selectedGender">
			<view class="character-container">
				<image 
					:src="selectedGender === 'male' ? '/static/character/male-full.png' : '/static/character/female-full.png'"
					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: ['高冷', 'INTJ', '爱吃瘦果', '傲娇', '理性', '感性', '文艺', '二次元'],
				showInfo: false,
			}
		},
		methods: {
			selectGender(gender) {
				this.tempGender = gender;
			},
			confirmGender() {
				if (!this.tempGender) return;
				this.selectedGender = this.tempGender;
				this.isLoading = true;
				
				// 模拟加载过程
				setTimeout(() => {
					this.isLoading = false;
				}, 4000);
			},
			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);
				}
			},
			handleSubmit() {
				// if (!this.formData.nickname || !this.formData.description) {
				// 	this.showError = true;
				// 	return;
				// }
				
				this.showForm = false;
				this.showInfo = true;
			},
			handleJoin() {
				console.log('入驻星球');
				// 处理入驻逻辑
			}
		}
	}
</script>

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