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: ''
			}
		},
		watch: {
			// 监听输入框内容变化,同步快捷选择状态
			personalityDescription: {
				handler(newVal) {
					this.syncSelectedPersonalities();
				},
				immediate: true
			},
			// 监听快捷选择选项加载完成
			personalityOptions: {
				handler() {
					this.syncSelectedPersonalities();
				},
				immediate: true
			}
		},
		onLoad(options) {
			// 接收传入的性格数据
			if (options.personality) {
				this.originalPersonality = decodeURIComponent(options.personality);
				this.parsePersonality(this.originalPersonality);
			}
		},
		mounted() {
			this.getPersonalityDataList();
		},
		methods: {
			// 同步快捷选择状态
			syncSelectedPersonalities() {
				if (!this.personalityDescription || this.personalityOptions.length === 0) {
					this.selectedPersonalities = [];
					return;
				}
				
				// 将输入框内容按逗号分割
				const descriptionItems = this.personalityDescription.split(',')
					.map(item => item.trim())
					.filter(item => item.length > 0);
				
				// 找出哪些是快捷选择项
				this.selectedPersonalities = descriptionItems.filter(item => 
					this.personalityOptions.includes(item)
				);
			},
			
			// 解析传入的性格数据
			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)
					);
					
					// 将所有内容都显示在输入框中
					this.personalityDescription = personality.join(',');
				} else {
					// 兼容字符串形式的数据
					const parts = personality.split(',');
					
					// 识别哪些是快捷选择项
					this.selectedPersonalities = parts.filter(item => 
						this.personalityOptions.includes(item.trim())
					);
					
					// 将所有内容都显示在输入框中
					this.personalityDescription = personality;
				}
			},
			
			// 切换性格选择
			togglePersonality(personality) {
				const isSelected = this.selectedPersonalities.includes(personality);
				if (isSelected) {
					// 取消选择：从输入框中移除对应文本
					this.removeFromDescription(personality);
				} else {
					// 选择：添加到输入框中
					this.addToDescription(personality);
				}
				// selectedPersonalities会通过watch自动更新
			},
			
			// 添加性格到描述中
			addToDescription(personality) {
				if (this.personalityDescription.trim()) {
					// 如果输入框已有内容,用逗号分隔
					if (!this.personalityDescription.includes(personality)) {
						this.personalityDescription += ',' + personality;
					}
				} else {
					// 如果输入框为空,直接添加
					this.personalityDescription = personality;
				}
			},
			
			// 从描述中移除性格
			removeFromDescription(personality) {
				if (!this.personalityDescription.includes(personality)) return;
				
				// 将描述按逗号分割
				let parts = this.personalityDescription.split(',').map(item => item.trim());
				// 移除指定的性格
				parts = parts.filter(item => item !== personality);
				// 重新组合
				this.personalityDescription = parts.join(',');
			},
			
			// 获取性格数据列表
			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;
				
				// 验证是否至少有内容
				if (!this.personalityDescription.trim()) {
					this.$modal.showToast('请至少选择一项性格特征');
					this.loading = false;
					return;
				}
				
				// 将输入框内容按逗号分割,去重并过滤空值
				const personalityItems = this.personalityDescription.split(',')
					.map(item => item.trim())
					.filter(item => item.length > 0);
				
				// 去重处理
				const finalPersonality = Array.from(new Set(personalityItems));
				
				// 延迟一下模拟保存过程
				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>