pet-front-order/pages/personalCenter/personalitySelect.vue

<template>
	<view class="personality-select-container">
		<!-- 性格描述 -->
		<view class="personality-description">
			<view class="section-title">性格描述</view>
			<view class="description-input">
				<textarea 
					v-model="personalityDescription" 
					placeholder="请描述您的宠物性格" 
					class="description-textarea"
					maxlength="200"
				></textarea>
			</view>
		</view>
		
		<!-- 快捷选择 -->
		<view class="quick-selection">
			<view class="section-title">快捷选择</view>
			<view class="selection-grid">
				<view 
					v-for="(item, index) in personalityOptions" 
					:key="index"
					:class="['selection-item', { 'selected': selectedPersonalities.includes(item) }]"
					@click="togglePersonality(item)"
				>
					{{ item }}
				</view>
			</view>
		</view>
		
		<!-- 保存按钮 -->
		<view class="save-button-container">
			<u-button 
				color="#FFBF60" 
				@click="savePersonality"
				:loading="loading"
				class="save-button"
			>
				<view style="color: #fff;">保存</view>
			</u-button>
		</view>
	</view>
</template>

<script>
	import { getDictList } from "@/api/system/user"
	
	export default {
		data() {
			return {
				loading: false,
				personalityDescription: '',
				selectedPersonalities: [],
				personalityOptions: [],
				originalPersonality: ''
			}
		},
		onLoad(options) {
			// 接收传入的性格数据
			if (options.personality) {
				this.originalPersonality = decodeURIComponent(options.personality);
				this.parsePersonality(this.originalPersonality);
			}
		},
		mounted() {
			this.getPersonalityDataList();
		},
		methods: {
			// 解析传入的性格数据
			parsePersonality(personality) {
				if (!personality) return;
				
				// 等待API数据加载完成后再解析
				if (this.personalityOptions.length === 0) {
					setTimeout(() => {
						this.parsePersonality(personality);
					}, 100);
					return;
				}
				
				// 处理数组形式的性格数据
				if (Array.isArray(personality)) {
					// 分离描述和快捷选择
					this.selectedPersonalities = personality.filter(item => 
						this.personalityOptions.includes(item)
					);
					
					// 描述部分是数组中不在快捷选择里的项
					const descriptions = personality.filter(item => 
						!this.personalityOptions.includes(item)
					);
					this.personalityDescription = descriptions.join('，');
				} else {
					// 兼容字符串形式的数据
					const parts = personality.split('，');
					if (parts.length > 1) {
						// 最后一部分是快捷选择
						const quickSelections = parts[parts.length - 1];
						this.selectedPersonalities = this.personalityOptions.filter(item => 
							quickSelections.includes(item)
						);
						
						// 前面的部分是描述
						this.personalityDescription = parts.slice(0, -1).join('，');
					} else {
						// 只有快捷选择
						this.selectedPersonalities = this.personalityOptions.filter(item => 
							personality.includes(item)
						);
					}
				}
			},
			
			// 切换性格选择
			togglePersonality(personality) {
				const index = this.selectedPersonalities.indexOf(personality);
				if (index > -1) {
					this.selectedPersonalities.splice(index, 1);
				} else {
					this.selectedPersonalities.push(personality);
				}
			},
			
			// 获取性格数据列表
			getPersonalityDataList() {
				getDictList('pet_personality').then(res => {
					if (res.code == 200) {
						this.personalityOptions = Array.from(new Set(res.data.map(e => e.dictLabel)));
					} else {
						this.$modal.showToast('获取性格失败');
					}
				}).catch(err => {
					console.error('获取性格数据失败:', err);
					this.$modal.showToast('获取性格数据失败');
				});
			},
			
			// 保存性格选择
			savePersonality() {
				this.loading = true;
				
				// 组合性格描述和快捷选择，保持数组形式
				let finalPersonality = [];
				
				if (this.personalityDescription.trim()) {
					finalPersonality.push(this.personalityDescription.trim());
				}
				
				if (this.selectedPersonalities.length > 0) {
					finalPersonality = finalPersonality.concat(this.selectedPersonalities);
				}
				
				// 验证是否至少选择了一项
				if (finalPersonality.length === 0) {
					this.$modal.showToast('请至少选择一项性格特征');
					this.loading = false;
					return;
				}
				
				// 延迟一下模拟保存过程
				setTimeout(() => {
					this.loading = false;
					
					// 返回上一页并传递选择的性格数据
					const pages = getCurrentPages();
					
					// 安全检查：确保有足够的页面
					if (!pages || pages.length < 2) {
						console.warn('页面栈不足，无法获取上一页')
						uni.navigateBack();
						return;
					}
					
					const prevPage = pages[pages.length - 2];
					
					if (prevPage && prevPage.$vm) {
						// 更新父页面的性格数据
						if (prevPage.$vm.petBaseInfo) {
							prevPage.$vm.petBaseInfo.personality = finalPersonality;
							// 触发父页面的更新事件
							prevPage.$vm.$emit('update:petBaseInfo', prevPage.$vm.petBaseInfo);
						} else {
							console.warn('上一页没有petBaseInfo')
						}
					} else {
						console.warn('无法找到上一页')
					}
					
					// uni.showToast({
					// 	title: '保存成功',
					// 	icon: 'success',
					// 	duration: 1500
					// });
					
					// 返回上一页
					setTimeout(() => {
						uni.navigateBack();
					}, 0);
				}, 0);
			}
		}
	}
</script>

<style lang="scss">
	.personality-select-container {
		min-height: 100vh;
		background-color: #f5f5f5;
		padding: 20px;
		box-sizing: border-box;
		padding-bottom: 120px;
	}
	
	.section-title {
		font-size: 16px;
		font-weight: bold;
		color: #333;
		margin-bottom: 15px;
	}
	
	.personality-description {
		background-color: #fff;
		border-radius: 8px;
		padding: 20px;
		margin-bottom: 20px;
		
		.description-input {
			.description-textarea {
				width: 100%;
				min-height: 100px;
				padding: 15px;
				border: 1px solid #e0e0e0;
				border-radius: 8px;
				font-size: 14px;
				line-height: 1.5;
				background-color: #fafafa;
				box-sizing: border-box;
				resize: none;
				
				&::placeholder {
					color: #999;
				}
			}
		}
	}
	
	.quick-selection {
		background-color: #fff;
		border-radius: 8px;
		padding: 20px;
		margin-bottom: 100px;
		
		.selection-grid {
			display: grid;
			grid-template-columns: 1fr 1fr 1fr 1fr;
			gap: 8px;
			
			.selection-item {
				padding: 10px 4px;
				background-color: #f5f5f5;
				border-radius: 6px;
				text-align: center;
				font-size: 12px;
				color: #666;
				border: 1px solid transparent;
				transition: all 0.3s ease;
				line-height: 1.1;
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
				min-height: 40px;
				display: flex;
				align-items: center;
				justify-content: center;
				
				&.selected {
					background-color: #FFBF60;
					color: #fff;
					border-color: #FFBF60;
				}
				
				&:active {
					transform: scale(0.98);
				}
			}
		}
	}
	
	.save-button-container {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		padding: 20px;
		background-color: #fff;
		border-top: 1px solid #e0e0e0;
		
		.save-button {
			width: 100%;
			height: 50px;
			border-radius: 8px;
		}
	}
</style>