traveler/LaneTexture/pages/ai-assistant/simple.vue

<template>
	<view class="content">
		<view class="header">
			<view class="back-btn" @tap="goBack">
				<text class="back-icon">←</text>
				<text class="back-text">返回</text>
			</view>
			<text class="page-title">AI旅游规划</text>
		</view>
		
		<!-- 表单区域 -->
		<view class="form-container">
			<view class="form-group">
				<text class="form-label">目的地</text>
				<input class="form-input" v-model="formData.destination" placeholder="输入旅游目的地，如：保定" />
			</view>
			
			<view class="form-group">
				<text class="form-label">行程天数</text>
				<slider class="form-slider" :min="1" :max="10" :step="1" :value="formData.days" @change="onDaysChange" show-value />
			</view>
			
			<view class="form-group">
				<text class="form-label">预算金额</text>
				<slider class="form-slider" :min="500" :max="10000" :step="500" :value="formData.budget" @change="onBudgetChange" show-value />
				<text class="slider-value">{{ formData.budget }}元</text>
			</view>
			
			<view class="form-group">
				<text class="form-label">季节</text>
				<view class="tag-container">
					<view 
						v-for="(season, index) in seasons" 
						:key="index"
						class="tag" 
						:class="{ active: formData.season === season }"
						@tap="formData.season = season"
					>
						{{ season }}
					</view>
				</view>
			</view>
			
			<view class="form-group">
				<text class="form-label">偏好</text>
				<view class="tag-container">
					<view 
						v-for="(preference, index) in preferences" 
						:key="index"
						class="tag" 
						:class="{ active: formData.preferences.includes(preference) }"
						@tap="togglePreference(preference)"
					>
						{{ preference }}
					</view>
				</view>
			</view>
			
			<view class="form-group">
				<text class="form-label">交通方式</text>
				<view class="tag-container">
					<view 
						v-for="(transport, index) in transportations" 
						:key="index"
						class="tag" 
						:class="{ active: formData.transportation === transport }"
						@tap="formData.transportation = transport"
					>
						{{ transport }}
					</view>
				</view>
			</view>
			
			<view class="form-group">
				<text class="form-label">住宿类型</text>
				<view class="tag-container">
					<view 
						v-for="(accom, index) in accommodations" 
						:key="index"
						class="tag" 
						:class="{ active: formData.accommodation === accom }"
						@tap="formData.accommodation = accom"
					>
						{{ accom }}
					</view>
				</view>
			</view>
			
			<view class="form-group checkbox-group">
				<label class="checkbox-label">
					<switch :checked="formData.includeTransportation" @change="formData.includeTransportation = $event.detail.value" />
					<text>包含交通费用</text>
				</label>
				
				<label class="checkbox-label">
					<switch :checked="formData.includeMeals" @change="formData.includeMeals = $event.detail.value" />
					<text>包含餐饮费用</text>
				</label>
				
				<label class="checkbox-label">
					<switch :checked="formData.includeTickets" @change="formData.includeTickets = $event.detail.value" />
					<text>包含门票费用</text>
				</label>
			</view>
			
			<view class="action-buttons">
				<view class="reset-btn" @tap="resetForm">重置</view>
				<view class="submit-btn" @tap="generatePlan">生成行程</view>
			</view>
		</view>
	</view>
</template>

<script>
import { generateAIPlan, saveAIPlan } from '@/pages/api/ai.js';

export default {
	data() {
		return {
			formData: {
				userId: 'user_123', // 模拟用户ID
				destination: '保定',
				days: 3,
				budget: 3000,
				season: '春季',
				preferences: ['景点', '美食'],
				transportation: '公共交通',
				accommodation: '经济型酒店',
				includeTransportation: true,
				includeMeals: true,
				includeTickets: true
			},
			seasons: ['春季', '夏季', '秋季', '冬季', '四季皆宜'],
			preferences: ['景点', '美食', '文化', '购物', '自然', '摄影', '历史', '休闲'],
			transportations: ['公共交通', '自驾', '步行', '共享单车', '出租车'],
			accommodations: ['经济型酒店', '舒适型酒店', '豪华酒店', '民宿', '青旅']
		}
	},
	methods: {
		goBack() {
			uni.navigateBack();
		},
		onDaysChange(e) {
			this.formData.days = e.detail.value;
		},
		onBudgetChange(e) {
			this.formData.budget = e.detail.value;
		},
		togglePreference(preference) {
			const index = this.formData.preferences.indexOf(preference);
			if (index > -1) {
				// 已选中，则移除
				this.formData.preferences.splice(index, 1);
			} else {
				// 未选中，则添加
				if (this.formData.preferences.length < 5) { // 最多选5个
					this.formData.preferences.push(preference);
				} else {
					uni.showToast({
						title: '最多选择5个偏好',
						icon: 'none'
					});
				}
			}
		},
		resetForm() {
			this.formData = {
				userId: 'user_123',
				destination: '保定',
				days: 3,
				budget: 3000,
				season: '春季',
				preferences: ['景点', '美食'],
				transportation: '公共交通',
				accommodation: '经济型酒店',
				includeTransportation: true,
				includeMeals: true,
				includeTickets: true
			};
		},
		generatePlan() {
			// 表单验证
			if (!this.formData.destination) {
				uni.showToast({
					title: '请输入目的地',
					icon: 'none'
				});
				return;
			}
			
			if (this.formData.preferences.length === 0) {
				uni.showToast({
					title: '请至少选择一个偏好',
					icon: 'none'
				});
				return;
			}
			
			// 显示加载中
			uni.showLoading({
				title: '正在生成行程...'
			});
			
			// 调用AI生成行程
			generateAIPlan(this.formData)
				.then(res => {
					uni.hideLoading();
					console.log('AI响应:', res);
					
					if (res && res.data) {
						// 保存生成的行程
						saveAIPlan(this.formData)
							.then(saveRes => {
								console.log('保存行程成功:', saveRes);
								
								// 跳转到行程详情页
								uni.navigateTo({
									url: `/pages/travel-detail/index?planId=${saveRes.data.planId}`
								});
							})
							.catch(err => {
								console.error('保存行程失败:', err);
								uni.showModal({
									title: '保存失败',
									content: '行程已生成但保存失败，请重试',
									showCancel: false
								});
							});
					} else {
						uni.showModal({
							title: '生成失败',
							content: '无法生成行程，请稍后再试',
							showCancel: false
						});
					}
				})
				.catch(err => {
					uni.hideLoading();
					console.error('生成行程失败:', err);
					uni.showModal({
						title: '生成失败',
						content: '无法连接服务器，请检查网络连接',
						showCancel: false
					});
				});
		}
	}
}
</script>

<style>
.content {
	display: flex;
	flex-direction: column;
	padding: 30rpx;
	background-color: #f7f9fc;
	min-height: 100vh;
}

.header {
	display: flex;
	align-items: center;
	margin-bottom: 40rpx;
}

.back-btn {
	display: flex;
	align-items: center;
	margin-right: 20rpx;
}

.back-icon {
	font-size: 40rpx;
	color: #3a9eeb;
	margin-right: 5rpx;
}

.back-text {
	font-size: 28rpx;
	color: #3a9eeb;
}

.page-title {
	font-size: 36rpx;
	font-weight: bold;
	color: #333;
	flex: 1;
	text-align: center;
	margin-right: 60rpx;
}

.form-container {
	background-color: #fff;
	border-radius: 20rpx;
	padding: 30rpx;
	box-shadow: 0 2rpx 20rpx rgba(0, 0, 0, 0.05);
}

.form-group {
	margin-bottom: 30rpx;
}

.form-label {
	font-size: 28rpx;
	color: #333;
	margin-bottom: 15rpx;
	display: block;
	font-weight: 600;
}

.form-input {
	width: 100%;
	height: 80rpx;
	background-color: #f5f7fa;
	border-radius: 10rpx;
	padding: 0 20rpx;
	font-size: 28rpx;
	color: #333;
}

.form-slider {
	margin: 20rpx 0;
}

.slider-value {
	font-size: 26rpx;
	color: #666;
	text-align: right;
}

.tag-container {
	display: flex;
	flex-wrap: wrap;
	margin: 0 -10rpx;
}

.tag {
	padding: 10rpx 20rpx;
	background-color: #f5f7fa;
	border-radius: 30rpx;
	margin: 10rpx;
	font-size: 26rpx;
	color: #666;
}

.tag.active {
	background-color: #3a9eeb;
	color: #fff;
}

.checkbox-group {
	display: flex;
	flex-direction: column;
}

.checkbox-label {
	display: flex;
	align-items: center;
	margin-bottom: 20rpx;
	font-size: 28rpx;
}

.checkbox-label text {
	margin-left: 10rpx;
}

.action-buttons {
	display: flex;
	justify-content: space-between;
	margin-top: 50rpx;
}

.reset-btn, .submit-btn {
	width: 45%;
	height: 80rpx;
	border-radius: 40rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 30rpx;
	font-weight: bold;
}

.reset-btn {
	background-color: #f5f7fa;
	color: #666;
}

.submit-btn {
	background-color: #3a9eeb;
	color: #fff;
}
</style>