|
@@ -1,52 +1,44 @@
|
|
<template>
|
|
<template>
|
|
<view class="star-container">
|
|
<view class="star-container">
|
|
<!-- 性别选择弹窗 -->
|
|
<!-- 性别选择弹窗 -->
|
|
- <view class="gender-popup" v-if="!selectedGender">
|
|
|
|
|
|
+ <view class="gender-popup" v-if="!selectedGender && !showInfo">
|
|
<view class="popup-content">
|
|
<view class="popup-content">
|
|
<view class="popup-title">请选择性别</view>
|
|
<view class="popup-title">请选择性别</view>
|
|
-
|
|
|
|
|
|
+
|
|
<view class="gender-cards">
|
|
<view class="gender-cards">
|
|
- <view class="gender-card"
|
|
|
|
- :class="{'selected': tempGender === 'male'}"
|
|
|
|
- @tap="selectGender('male')">
|
|
|
|
- <image src="/static/gender/male.png" mode="aspectFit"></image>
|
|
|
|
|
|
+ <view class="gender-card" :class="{'selected': tempGender === 'male'}" @tap="selectGender('male')">
|
|
|
|
+ <image src="/static/home/nan.png" mode="aspectFit"></image>
|
|
<text>男生</text>
|
|
<text>男生</text>
|
|
- <image v-if="tempGender === 'male'"
|
|
|
|
- class="check-icon"
|
|
|
|
- src="/static/gender/check.png"
|
|
|
|
|
|
+ <image v-if="tempGender === 'male'" class="check-icon" src="/static/gender/check.png"
|
|
mode="aspectFit">
|
|
mode="aspectFit">
|
|
</image>
|
|
</image>
|
|
</view>
|
|
</view>
|
|
-
|
|
|
|
- <view class="gender-card"
|
|
|
|
- :class="{'selected': tempGender === 'female'}"
|
|
|
|
|
|
+
|
|
|
|
+ <view class="gender-card" :class="{'selected': tempGender === 'female'}"
|
|
@tap="selectGender('female')">
|
|
@tap="selectGender('female')">
|
|
- <image src="/static/gender/female.png" mode="aspectFit"></image>
|
|
|
|
|
|
+ <image src="/static/home/nv.png" mode="aspectFit"></image>
|
|
<text>女生</text>
|
|
<text>女生</text>
|
|
- <image v-if="tempGender === 'female'"
|
|
|
|
- class="check-icon"
|
|
|
|
- src="/static/gender/check.png"
|
|
|
|
|
|
+ <image v-if="tempGender === 'female'" class="check-icon" src="/static/gender/check.png"
|
|
mode="aspectFit">
|
|
mode="aspectFit">
|
|
</image>
|
|
</image>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
-
|
|
|
|
|
|
+
|
|
<view class="confirm-btn" @tap="confirmGender">
|
|
<view class="confirm-btn" @tap="confirmGender">
|
|
创建星灵
|
|
创建星灵
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
-
|
|
|
|
|
|
+
|
|
<!-- 加载动画区域 -->
|
|
<!-- 加载动画区域 -->
|
|
<view class="loading-area" v-if="isLoading">
|
|
<view class="loading-area" v-if="isLoading">
|
|
<view class="loading-wrapper">
|
|
<view class="loading-wrapper">
|
|
<!-- 中心蓝色旋转圆 -->
|
|
<!-- 中心蓝色旋转圆 -->
|
|
<view class="center-circle"></view>
|
|
<view class="center-circle"></view>
|
|
-
|
|
|
|
|
|
+
|
|
<!-- 外围16个小球 -->
|
|
<!-- 外围16个小球 -->
|
|
<view class="orbit-balls">
|
|
<view class="orbit-balls">
|
|
- <view class="ball" v-for="(item,index) in 16" :key="index"
|
|
|
|
- :style="{
|
|
|
|
|
|
+ <view class="ball" v-for="(item,index) in 16" :key="index" :style="{
|
|
transform: `rotate(${index * 22.5}deg)`,
|
|
transform: `rotate(${index * 22.5}deg)`,
|
|
'--delay': `${index * 0.2}s`,
|
|
'--delay': `${index * 0.2}s`,
|
|
'--color': ballColors[index % 8]
|
|
'--color': ballColors[index % 8]
|
|
@@ -57,29 +49,25 @@
|
|
</view>
|
|
</view>
|
|
<text class="loading-text">正在加载...</text>
|
|
<text class="loading-text">正在加载...</text>
|
|
</view>
|
|
</view>
|
|
-
|
|
|
|
|
|
+
|
|
<!-- 角色信息展示页面 -->
|
|
<!-- 角色信息展示页面 -->
|
|
<view class="character-info" v-else-if="showInfo">
|
|
<view class="character-info" v-else-if="showInfo">
|
|
<view class="info-container">
|
|
<view class="info-container">
|
|
<!-- 角色立绘区域 -->
|
|
<!-- 角色立绘区域 -->
|
|
<view class="character-portrait">
|
|
<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>
|
|
|
|
|
|
+ <image :src="starInfo.image" mode="aspectFit" class="portrait-image"></image>
|
|
|
|
+ <text class="character-name">{{starInfo.name}}</text>
|
|
</view>
|
|
</view>
|
|
-
|
|
|
|
|
|
+
|
|
<!-- 角色信息板块 -->
|
|
<!-- 角色信息板块 -->
|
|
<view class="info-section">
|
|
<view class="info-section">
|
|
<view class="section-title">关于Ta</view>
|
|
<view class="section-title">关于Ta</view>
|
|
-
|
|
|
|
|
|
+
|
|
<!-- 人物简介 -->
|
|
<!-- 人物简介 -->
|
|
<view class="description-box">
|
|
<view class="description-box">
|
|
- <text class="description-text">{{formData.description}}</text>
|
|
|
|
|
|
+ <text class="description-text">{{starInfo.content}}</text>
|
|
</view>
|
|
</view>
|
|
-
|
|
|
|
|
|
+
|
|
<!-- 标签展示 -->
|
|
<!-- 标签展示 -->
|
|
<view class="tags-box">
|
|
<view class="tags-box">
|
|
<view class="tag-item" v-for="tag in formData.tags" :key="tag">
|
|
<view class="tag-item" v-for="tag in formData.tags" :key="tag">
|
|
@@ -88,13 +76,13 @@
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
-
|
|
|
|
|
|
+
|
|
<!-- 底部按钮 -->
|
|
<!-- 底部按钮 -->
|
|
<view class="join-button" @tap="handleJoin">
|
|
<view class="join-button" @tap="handleJoin">
|
|
入驻星球
|
|
入驻星球
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
-
|
|
|
|
|
|
+
|
|
<!-- 表单页面 -->
|
|
<!-- 表单页面 -->
|
|
<view class="form-page" v-else-if="showForm">
|
|
<view class="form-page" v-else-if="showForm">
|
|
<form @submit="submitForm">
|
|
<form @submit="submitForm">
|
|
@@ -103,87 +91,59 @@
|
|
<text class="required">*</text>
|
|
<text class="required">*</text>
|
|
<text>昵称</text>
|
|
<text>昵称</text>
|
|
</view>
|
|
</view>
|
|
- <input
|
|
|
|
- class="input"
|
|
|
|
- v-model="formData.nickname"
|
|
|
|
- placeholder="给星灵取个名字"
|
|
|
|
- :class="{'error': showError && !formData.nickname}"
|
|
|
|
- />
|
|
|
|
|
|
+ <input class="input" v-model="formData.nickname" placeholder="给星灵取个名字"
|
|
|
|
+ :class="{'error': showError && !formData.nickname}" />
|
|
</view>
|
|
</view>
|
|
-
|
|
|
|
|
|
+
|
|
<view class="form-group">
|
|
<view class="form-group">
|
|
<view class="label">性别</view>
|
|
<view class="label">性别</view>
|
|
<view class="gender-options">
|
|
<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 class="gender-option">
|
|
|
|
+ 已选{{starInfo.sex==1?'男':'女'}}
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
-
|
|
|
|
|
|
+
|
|
<view class="form-group">
|
|
<view class="form-group">
|
|
<view class="label">
|
|
<view class="label">
|
|
<text class="required">*</text>
|
|
<text class="required">*</text>
|
|
<text>人物简介</text>
|
|
<text>人物简介</text>
|
|
</view>
|
|
</view>
|
|
<view class="textarea-container">
|
|
<view class="textarea-container">
|
|
- <textarea
|
|
|
|
- class="textarea"
|
|
|
|
- v-model="formData.description"
|
|
|
|
- placeholder="填写这个角色的人物介绍,例如性格、身份、背景与历程..."
|
|
|
|
- :maxlength="255"
|
|
|
|
- :class="{'error': showError && !formData.description}"
|
|
|
|
- />
|
|
|
|
|
|
+ <textarea class="textarea" v-model="formData.description"
|
|
|
|
+ placeholder="填写这个角色的人物介绍,例如性格、身份、背景与历程..." :maxlength="255"
|
|
|
|
+ :class="{'error': showError && !formData.description}" />
|
|
<text class="word-count">{{formData.description.length}}/255</text>
|
|
<text class="word-count">{{formData.description.length}}/255</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
-
|
|
|
|
|
|
+
|
|
<view class="form-group">
|
|
<view class="form-group">
|
|
<view class="label">人物标签</view>
|
|
<view class="label">人物标签</view>
|
|
- <scroll-view
|
|
|
|
- class="tags-scroll"
|
|
|
|
- scroll-x="true"
|
|
|
|
- show-scrollbar="false"
|
|
|
|
- >
|
|
|
|
|
|
+ <scroll-view class="tags-scroll" scroll-x="true" show-scrollbar="false">
|
|
<view class="tags-container">
|
|
<view class="tags-container">
|
|
- <view
|
|
|
|
- class="tag"
|
|
|
|
- :class="{'selected': formData.tags.includes(tag)}"
|
|
|
|
- v-for="tag in predefinedTags"
|
|
|
|
- :key="tag"
|
|
|
|
- @tap="toggleTag(tag)"
|
|
|
|
- >
|
|
|
|
|
|
+ <view class="tag" v-for="tag in predefinedTags" :key="tag">
|
|
{{tag}}
|
|
{{tag}}
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</scroll-view>
|
|
</scroll-view>
|
|
</view>
|
|
</view>
|
|
</form>
|
|
</form>
|
|
-
|
|
|
|
- <view class="submit-button" @tap="handleSubmit">
|
|
|
|
|
|
+
|
|
|
|
+ <view class="submit-button" @tap="submitStar">
|
|
确定并提交
|
|
确定并提交
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
-
|
|
|
|
|
|
+
|
|
<!-- 角色展示页面 -->
|
|
<!-- 角色展示页面 -->
|
|
<view class="character-page" v-else-if="selectedGender">
|
|
<view class="character-page" v-else-if="selectedGender">
|
|
<view class="character-container">
|
|
<view class="character-container">
|
|
- <image
|
|
|
|
- :src="selectedGender === 'male' ? '/static/character/male-full.png' : '/static/character/female-full.png'"
|
|
|
|
- mode="aspectFit"
|
|
|
|
- class="character-image"
|
|
|
|
- ></image>
|
|
|
|
|
|
+ <image :src="starImg" mode="aspectFit" class="character-image"></image>
|
|
</view>
|
|
</view>
|
|
<view class="bottom-button" @tap="goToSetProfile">
|
|
<view class="bottom-button" @tap="goToSetProfile">
|
|
设置星灵简介
|
|
设置星灵简介
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
-
|
|
|
|
|
|
+
|
|
<!-- 收藏内容区域 -->
|
|
<!-- 收藏内容区域 -->
|
|
<view class="star-content" v-else>
|
|
<view class="star-content" v-else>
|
|
<view class="star-list">
|
|
<view class="star-list">
|
|
@@ -195,7 +155,7 @@
|
|
|
|
|
|
<script>
|
|
<script>
|
|
import tabbarView from "@/components/tabbar/tabbar.vue"
|
|
import tabbarView from "@/components/tabbar/tabbar.vue"
|
|
-
|
|
|
|
|
|
+
|
|
export default {
|
|
export default {
|
|
components: {
|
|
components: {
|
|
tabbarView
|
|
tabbarView
|
|
@@ -214,7 +174,7 @@
|
|
'#FFEEAD', // 黄色
|
|
'#FFEEAD', // 黄色
|
|
'#D4A5A5', // 粉色
|
|
'#D4A5A5', // 粉色
|
|
'#9A8194', // 紫色
|
|
'#9A8194', // 紫色
|
|
- '#FF9F1C' // 橙色
|
|
|
|
|
|
+ '#FF9F1C' // 橙色
|
|
],
|
|
],
|
|
showForm: false,
|
|
showForm: false,
|
|
showError: false,
|
|
showError: false,
|
|
@@ -224,10 +184,15 @@
|
|
description: '',
|
|
description: '',
|
|
tags: []
|
|
tags: []
|
|
},
|
|
},
|
|
- predefinedTags: ['高冷', 'INTJ', '爱吃瘦果', '傲娇', '理性', '感性', '文艺', '二次元'],
|
|
|
|
|
|
+ predefinedTags: [],
|
|
showInfo: false,
|
|
showInfo: false,
|
|
|
|
+ starImg: '',
|
|
|
|
+ starInfo: {}
|
|
}
|
|
}
|
|
},
|
|
},
|
|
|
|
+ onLoad() {
|
|
|
|
+ this.getStar('get');
|
|
|
|
+ },
|
|
methods: {
|
|
methods: {
|
|
selectGender(gender) {
|
|
selectGender(gender) {
|
|
this.tempGender = gender;
|
|
this.tempGender = gender;
|
|
@@ -236,11 +201,8 @@
|
|
if (!this.tempGender) return;
|
|
if (!this.tempGender) return;
|
|
this.selectedGender = this.tempGender;
|
|
this.selectedGender = this.tempGender;
|
|
this.isLoading = true;
|
|
this.isLoading = true;
|
|
-
|
|
|
|
- // 模拟加载过程
|
|
|
|
- setTimeout(() => {
|
|
|
|
- this.isLoading = false;
|
|
|
|
- }, 4000);
|
|
|
|
|
|
+
|
|
|
|
+ this.getStar('make');
|
|
},
|
|
},
|
|
goToSetProfile() {
|
|
goToSetProfile() {
|
|
this.showForm = true;
|
|
this.showForm = true;
|
|
@@ -253,18 +215,138 @@
|
|
this.formData.tags.push(tag);
|
|
this.formData.tags.push(tag);
|
|
}
|
|
}
|
|
},
|
|
},
|
|
- handleSubmit() {
|
|
|
|
- // if (!this.formData.nickname || !this.formData.description) {
|
|
|
|
- // this.showError = true;
|
|
|
|
- // return;
|
|
|
|
- // }
|
|
|
|
-
|
|
|
|
- this.showForm = false;
|
|
|
|
- this.showInfo = true;
|
|
|
|
- },
|
|
|
|
handleJoin() {
|
|
handleJoin() {
|
|
console.log('入驻星球');
|
|
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()
|
|
|
|
+ }
|
|
|
|
+ });
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
@@ -272,4 +354,4 @@
|
|
|
|
|
|
<style lang="scss">
|
|
<style lang="scss">
|
|
@import './myStar.scss';
|
|
@import './myStar.scss';
|
|
-</style>
|
|
|
|
|
|
+</style>
|