|
|
@@ -0,0 +1,275 @@
|
|
|
+<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>
|
