feat(house): 添加 AI 找房助手功能

- 新增 AI 找房对话弹窗组件，实现房源信息智能问答 - 房源详情页面新增 AI 找房入口按钮，点击弹出聊天窗口 - AI 聊天弹窗支持用户输入提问和快速问题按钮 - 集成豆包 Seed 2.0 Pro 模型调用，实现房源详情智能解答 - 增加聊天消息列表和打字动画，提升交互体验 - 关闭按钮和输入框交互优化，确保流畅使用体验 - 代码结构和样式规范化，保持界面美观一致
2026-05-01 11:33:22 +08:00
parent d66a8dfe8c
commit 4d3503f47e
3 changed files with 487 additions and 8 deletions
--- a/.idea/workspace.xml
+++ b/.idea/workspace.xml
@@ -4,8 +4,9 @@
    <option name="autoReloadType" value="SELECTIVE" />
  </component>
  <component name="ChangeListManager">
-    <list default="true" id="ec5c6cc2-d0e3-4470-b342-660aa89effe0" name="Changes" comment="feat(area-selector): 重构地区选择器数据加载逻辑&#10;&#10;- 将数据请求逻辑独立为 requestCityData 方法&#10;- 集成腾讯地图行政区域 API 获取准确地区数据&#10;- 实现地区数据格式转换适配组件需求&#10;- 添加内置精简地区数据作为降级方案&#10;- 优化异步处理和错误捕获机制&#10;- 修复子级数据为空时的显示问题">
+    <list default="true" id="ec5c6cc2-d0e3-4470-b342-660aa89effe0" name="Changes" comment="feat(house): 优化房源区域选择及删除功能&#10;&#10;- 保存按钮布局调整优化，提升用户体验&#10;- 房源详情地区显示只展示市级，简化展示信息&#10;- 地区选择器调整，只显示市，确保区域数据统一&#10;- 删除房源操作添加确认弹窗，避免误删&#10;- 省市区数据加载逻辑简化，使用固定城区列表替代异步接口请求&#10;- 替换首页及闪屏logo图片，更新为新资源路径&#10;- 隐藏房源详情页电话咨询按钮，暂不支持电话功能&#10;- 代码格式和注释优化，提升代码可读性">
      <change beforePath="$PROJECT_DIR$/.idea/workspace.xml" beforeDir="false" afterPath="$PROJECT_DIR$/.idea/workspace.xml" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/sub_pages/house/detail.vue" beforeDir="false" afterPath="$PROJECT_DIR$/sub_pages/house/detail.vue" afterDir="false" />
    </list>
    <option name="SHOW_DIALOG" value="false" />
    <option name="HIGHLIGHT_CONFLICTS" value="true" />
@@ -76,6 +77,7 @@
      <workItem from="1770982606471" duration="56000" />
      <workItem from="1775219711691" duration="2835000" />
      <workItem from="1775277870399" duration="755000" />
+      <workItem from="1777604110578" duration="1501000" />
    </task>
    <task id="LOCAL-00001" summary="爱尚家接口合并到cms-api.websoft.top">
      <option name="closed" value="true" />
@@ -149,7 +151,15 @@
      <option name="project" value="LOCAL" />
      <updated>1775278015655</updated>
    </task>
-    <option name="localTasksCounter" value="10" />
+    <task id="LOCAL-00010" summary="feat(house): 优化房源区域选择及删除功能&#10;&#10;- 保存按钮布局调整优化，提升用户体验&#10;- 房源详情地区显示只展示市级，简化展示信息&#10;- 地区选择器调整，只显示市，确保区域数据统一&#10;- 删除房源操作添加确认弹窗，避免误删&#10;- 省市区数据加载逻辑简化，使用固定城区列表替代异步接口请求&#10;- 替换首页及闪屏logo图片，更新为新资源路径&#10;- 隐藏房源详情页电话咨询按钮，暂不支持电话功能&#10;- 代码格式和注释优化，提升代码可读性">
+      <option name="closed" value="true" />
+      <created>1777604136710</created>
+      <option name="number" value="00010" />
+      <option name="presentableId" value="LOCAL-00010" />
+      <option name="project" value="LOCAL" />
+      <updated>1777604136710</updated>
+    </task>
+    <option name="localTasksCounter" value="11" />
    <servers />
  </component>
  <component name="TypeScriptGeneratedFilesManager">
@@ -174,6 +184,7 @@
    <MESSAGE value="feat(house): 添加房源卖价和总价功能并优化分享流程&#10;&#10;- 在房源添加页面添加卖价(元/平)和总价(万)输入字段&#10;- 实现卖价变动时总价自动计算功能&#10;- 在房源详情页显示卖价和总价信息&#10;- 调整物业费显示位置提升界面布局合理性&#10;- 更新服务器配置地址从gxwebsoft.com到websoft.top&#10;- 替换必看好房标签为特价好房标签统一显示&#10;- 修复房源详情页分享功能和海报生成流程&#10;- 添加跟进记录页面和相应跳转功能&#10;- 优化房源管理页面删除按钮显示逻辑&#10;- 实现闪屏页跳过功能和登录状态记忆&#10;- 添加房源海报生成组件支持分享推广&#10;- 修复分享路径参数传递和用户信息存储" />
    <MESSAGE value="feat(liu-customize-sel): 添加全国省市区数据支持&#10;&#10;- 新增重庆市及其下属区县数据&#10;- 新增四川省及其下属地市数据&#10;- 新增广西壮族自治区及其下属地市数据&#10;- 新增江苏省地市数据补充&#10;- 新增山东省、河南省、湖北省、湖南省地市数据&#10;- 新增福建省、江西省、云南省、贵州省地市数据&#10;- 新增海南省、陕西省、山西省地市数据&#10;- 完善广东省地市及区县数据结构" />
    <MESSAGE value="feat(area-selector): 重构地区选择器数据加载逻辑&#10;&#10;- 将数据请求逻辑独立为 requestCityData 方法&#10;- 集成腾讯地图行政区域 API 获取准确地区数据&#10;- 实现地区数据格式转换适配组件需求&#10;- 添加内置精简地区数据作为降级方案&#10;- 优化异步处理和错误捕获机制&#10;- 修复子级数据为空时的显示问题" />
-    <option name="LAST_COMMIT_MESSAGE" value="feat(area-selector): 重构地区选择器数据加载逻辑&#10;&#10;- 将数据请求逻辑独立为 requestCityData 方法&#10;- 集成腾讯地图行政区域 API 获取准确地区数据&#10;- 实现地区数据格式转换适配组件需求&#10;- 添加内置精简地区数据作为降级方案&#10;- 优化异步处理和错误捕获机制&#10;- 修复子级数据为空时的显示问题" />
+    <MESSAGE value="feat(house): 优化房源区域选择及删除功能&#10;&#10;- 保存按钮布局调整优化，提升用户体验&#10;- 房源详情地区显示只展示市级，简化展示信息&#10;- 地区选择器调整，只显示市，确保区域数据统一&#10;- 删除房源操作添加确认弹窗，避免误删&#10;- 省市区数据加载逻辑简化，使用固定城区列表替代异步接口请求&#10;- 替换首页及闪屏logo图片，更新为新资源路径&#10;- 隐藏房源详情页电话咨询按钮，暂不支持电话功能&#10;- 代码格式和注释优化，提升代码可读性" />
+    <option name="LAST_COMMIT_MESSAGE" value="feat(house): 优化房源区域选择及删除功能&#10;&#10;- 保存按钮布局调整优化，提升用户体验&#10;- 房源详情地区显示只展示市级，简化展示信息&#10;- 地区选择器调整，只显示市，确保区域数据统一&#10;- 删除房源操作添加确认弹窗，避免误删&#10;- 省市区数据加载逻辑简化，使用固定城区列表替代异步接口请求&#10;- 替换首页及闪屏logo图片，更新为新资源路径&#10;- 隐藏房源详情页电话咨询按钮，暂不支持电话功能&#10;- 代码格式和注释优化，提升代码可读性" />
  </component>
 </project>
--- a/components/ai-chat-popup/ai-chat-popup.vue
+++ b/components/ai-chat-popup/ai-chat-popup.vue
@@ -0,0 +1,455 @@
+<template>
+	<view>
+		<u-popup v-model="showPopup" mode="bottom" border-radius="24" :safe-area-inset-bottom="true" height="75%">
+			<view class="ai-chat-container">
+				<!-- 顶部标题栏 -->
+				<view class="ai-header">
+					<view class="header-left">
+						<u-icon name="chat" color="#3f72f4" size="20"></u-icon>
+						<text class="header-title">AI找房助手</text>
+					</view>
+					<view class="header-right" @click="closePopup">
+						<u-icon name="close" color="#999999" size="20"></u-icon>
+					</view>
+				</view>
+
+				<!-- 消息列表 -->
+				<scroll-view
+					scroll-y
+					class="message-list"
+					:scroll-into-view="lastMsgId"
+					:show-scrollbar="false"
+				>
+					<!-- 欢迎消息 -->
+					<view v-if="messages.length === 0" class="welcome-box">
+						<view class="welcome-icon">🏠</view>
+						<view class="welcome-title">您好，我是AI找房助手</view>
+						<view class="welcome-desc">我可以帮您了解这套房源的详细信息、分析性价比、解答入住疑问等，请问有什么可以帮您？</view>
+						<view class="quick-questions">
+							<view class="quick-btn" @click="quickAsk('这套房性价比怎么样？')">性价比分析</view>
+							<view class="quick-btn" @click="quickAsk('周边的交通方便吗？')">交通情况</view>
+							<view class="quick-btn" @click="quickAsk('附近有什么配套设施？')">配套设施</view>
+						</view>
+					</view>
+
+					<!-- 消息气泡 -->
+					<view
+						v-for="(msg, index) in messages"
+						:key="index"
+						:id="'msg-' + index"
+						:class="['msg-row', msg.role === 'user' ? 'msg-right' : 'msg-left']"
+					>
+						<!-- AI头像 -->
+						<view v-if="msg.role !== 'user'" class="msg-avatar">
+							<text class="avatar-text">AI</text>
+						</view>
+						<!-- 气泡 -->
+						<view :class="['msg-bubble', msg.role === 'user' ? 'bubble-user' : 'bubble-ai']">
+							<text class="bubble-text" user-select>{{ msg.content }}</text>
+						</view>
+						<!-- 用户头像 -->
+						<view v-if="msg.role === 'user'" class="msg-avatar user-avatar">
+							<text class="avatar-text">我</text>
+						</view>
+					</view>
+
+					<!-- AI 打字指示器 -->
+					<view v-if="loading" class="msg-row msg-left">
+						<view class="msg-avatar">
+							<text class="avatar-text">AI</text>
+						</view>
+						<view class="msg-bubble bubble-ai">
+							<view class="typing-indicator">
+								<view class="dot"></view>
+								<view class="dot"></view>
+								<view class="dot"></view>
+							</view>
+						</view>
+					</view>
+
+					<view style="height: 20rpx;"></view>
+				</scroll-view>
+
+				<!-- 底部输入栏 -->
+				<view class="input-bar">
+					<view class="input-wrap">
+						<input
+							class="chat-input"
+							v-model="inputText"
+							placeholder="问我关于这套房的任何问题..."
+							confirm-type="send"
+							@confirm="sendMessage"
+							:adjust-position="true"
+							:cursor-spacing="20"
+						/>
+					</view>
+					<view class="send-btn" @click="sendMessage" :class="{ 'send-btn-active': inputText.trim() && !loading }">
+						<text class="send-text">发送</text>
+					</view>
+				</view>
+			</view>
+		</u-popup>
+	</view>
+</template>
+
+<script>
+	export default {
+		name: 'ai-chat-popup',
+		props: {
+			value: {
+				type: Boolean,
+				default: false
+			},
+			houseInfo: {
+				type: Object,
+				default: () => ({})
+			},
+			houseId: {
+				type: [String, Number],
+				default: ''
+			}
+		},
+		data() {
+			return {
+				inputText: '',
+				messages: [],
+				loading: false,
+				lastMsgId: '',
+				apiKey: 'ark-9cf70df3-0b36-4f0f-be3b-5d4f572c48b4-d0735',
+				apiUrl: 'https://ark.cn-beijing.volces.com/api/v3/chat/completions',
+				model: 'doubao-seed-2-0-pro-260215' // 豆包 Seed 2.0 Pro 模型
+			}
+		},
+		computed: {
+			showPopup: {
+				get() {
+					return this.value
+				},
+				set(val) {
+					this.$emit('input', val)
+				}
+			},
+			systemPrompt() {
+				const info = this.houseInfo || {}
+				return `你是一名专业的房产找房助手，名叫"AI找房助手"，语气亲切专业。
+当前用户正在查看的房源信息如下：
+- 房源标题：${info.houseTitle || '暂无'}
+- 月租：${info.monthlyRent || 0}元/月
+- 建筑面积：${info.extent || 0}m²
+- 户型：${info.houseType || '暂无'}
+- 楼层：${info.floor || '暂无'}
+- 朝向：${info.toward || '暂无'}
+- 押付方式：${info.leaseMethod || '暂无'}
+- 城市：${info.city || '暂无'}
+- 区/县：${info.region || '暂无'}
+- 详细地址：${info.address || '暂无'}
+- 物业费：${info.propertyFees || '暂无'}元/m²
+${info.salePrice ? '- 卖价：' + info.salePrice + '元/m²' : ''}
+${info.totalPrice ? '- 总价：' + info.totalPrice + '万元' : ''}
+
+请根据以上信息帮助用户：
+1. 解答关于这套房源的任何问题
+2. 分析房源性价比
+3. 介绍周边配套和交通情况（基于地址信息给出合理建议）
+4. 回答入住、签约相关问题
+5. 如果用户问其他房源，说明你只能帮助分析当前这套房源。
+回答要简洁专业，不超过300字。`
+			}
+		},
+		watch: {
+			showPopup(val) {
+				if (val) {
+					// 弹窗打开时可做初始化
+					this.$nextTick(() => {
+						this.scrollToBottom()
+					})
+				}
+			}
+		},
+		methods: {
+			closePopup() {
+				this.showPopup = false
+			},
+			quickAsk(text) {
+				this.inputText = text
+				this.$nextTick(() => {
+					this.sendMessage()
+				})
+			},
+			async sendMessage() {
+				const text = this.inputText.trim()
+				if (!text || this.loading) return
+
+				// 添加用户消息
+				this.messages.push({ role: 'user', content: text })
+				this.inputText = ''
+				this.loading = true
+				this.scrollToBottom()
+
+				try {
+					await this.callDoubaoAPI(text)
+				} catch (e) {
+					this.messages.push({
+						role: 'assistant',
+						content: '抱歉，网络出了点问题，请稍后再试～'
+					})
+				} finally {
+					this.loading = false
+					this.scrollToBottom()
+				}
+			},
+			callDoubaoAPI(userMessage) {
+				return new Promise((resolve, reject) => {
+					const messages = [
+						{ role: 'system', content: this.systemPrompt },
+						...this.messages.map(m => ({ role: m.role, content: m.content }))
+					]
+
+					uni.request({
+						url: this.apiUrl,
+						method: 'POST',
+						header: {
+							'Authorization': `Bearer ${this.apiKey}`,
+							'Content-Type': 'application/json'
+						},
+						data: {
+							model: this.model,
+							messages: messages,
+							temperature: 0.7,
+							max_tokens: 500
+						},
+						success: (res) => {
+							if (res.statusCode === 200 && res.data.choices && res.data.choices.length > 0) {
+								const aiContent = res.data.choices[0].message.content
+								this.messages.push({ role: 'assistant', content: aiContent })
+								resolve(aiContent)
+							} else {
+								const errMsg = res.data?.error?.message || '请求失败'
+								this.messages.push({ role: 'assistant', content: `抱歉，${errMsg}` })
+								reject(new Error(errMsg))
+							}
+						},
+						fail: (err) => {
+							this.messages.push({
+								role: 'assistant',
+								content: '网络连接失败，请检查网络后重试～'
+							})
+							reject(err)
+						}
+					})
+				})
+			},
+			scrollToBottom() {
+				this.$nextTick(() => {
+					const len = this.messages.length
+					if (len > 0) {
+						this.lastMsgId = 'msg-' + (len - 1)
+					}
+				})
+			}
+		}
+	}
+</script>
+
+<style scoped lang="scss">
+	.ai-chat-container {
+		display: flex;
+		flex-direction: column;
+		height: 100%;
+		background-color: #f5f6fa;
+	}
+
+	/* 顶部标题栏 */
+	.ai-header {
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
+		padding: 24rpx 30rpx;
+		background-color: #ffffff;
+		border-bottom: 1rpx solid #eeeeee;
+		border-radius: 24rpx 24rpx 0 0;
+	}
+	.header-left {
+		display: flex;
+		align-items: center;
+		gap: 12rpx;
+	}
+	.header-title {
+		font-size: 32rpx;
+		font-weight: 500;
+		color: #333333;
+	}
+	.header-right {
+		padding: 10rpx;
+	}
+
+	/* 消息列表 */
+	.message-list {
+		flex: 1;
+		padding: 20rpx 24rpx;
+		overflow-y: auto;
+	}
+
+	/* 欢迎界面 */
+	.welcome-box {
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		padding: 40rpx 30rpx;
+	}
+	.welcome-icon {
+		font-size: 80rpx;
+		margin-bottom: 20rpx;
+	}
+	.welcome-title {
+		font-size: 34rpx;
+		font-weight: 500;
+		color: #333333;
+		margin-bottom: 16rpx;
+	}
+	.welcome-desc {
+		font-size: 26rpx;
+		color: #888888;
+		text-align: center;
+		line-height: 1.6;
+		margin-bottom: 30rpx;
+	}
+	.quick-questions {
+		display: flex;
+		flex-wrap: wrap;
+		justify-content: center;
+		gap: 16rpx;
+	}
+	.quick-btn {
+		background-color: #eef4ff;
+		color: #3f72f4;
+		font-size: 24rpx;
+		padding: 12rpx 24rpx;
+		border-radius: 24rpx;
+	}
+
+	/* 消息行 */
+	.msg-row {
+		display: flex;
+		align-items: flex-start;
+		margin-bottom: 24rpx;
+	}
+	.msg-right {
+		justify-content: flex-end;
+	}
+	.msg-left {
+		justify-content: flex-start;
+	}
+
+	/* 头像 */
+	.msg-avatar {
+		width: 64rpx;
+		height: 64rpx;
+		border-radius: 50%;
+		background: linear-gradient(135deg, #3f72f4, #6a9eff);
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		flex-shrink: 0;
+	}
+	.user-avatar {
+		background: linear-gradient(135deg, #ff8a4c, #ffb347);
+	}
+	.avatar-text {
+		color: #ffffff;
+		font-size: 22rpx;
+		font-weight: 500;
+	}
+
+	/* 气泡 */
+	.msg-bubble {
+		max-width: 520rpx;
+		padding: 20rpx 24rpx;
+		border-radius: 20rpx;
+		margin: 0 16rpx;
+		word-break: break-all;
+	}
+	.bubble-user {
+		background-color: #3f72f4;
+		border-top-right-radius: 6rpx;
+	}
+	.bubble-ai {
+		background-color: #ffffff;
+		border-top-left-radius: 6rpx;
+		box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.04);
+	}
+	.bubble-text {
+		font-size: 28rpx;
+		line-height: 1.6;
+		color: #333333;
+	}
+	.bubble-user .bubble-text {
+		color: #ffffff;
+	}
+
+	/* 打字指示器 */
+	.typing-indicator {
+		display: flex;
+		align-items: center;
+		gap: 8rpx;
+		padding: 8rpx 0;
+	}
+	.dot {
+		width: 12rpx;
+		height: 12rpx;
+		border-radius: 50%;
+		background-color: #cccccc;
+		animation: typing 1.2s infinite ease-in-out;
+	}
+	.dot:nth-child(2) {
+		animation-delay: 0.2s;
+	}
+	.dot:nth-child(3) {
+		animation-delay: 0.4s;
+	}
+	@keyframes typing {
+		0%, 60%, 100% {
+			transform: translateY(0);
+			opacity: 0.4;
+		}
+		30% {
+			transform: translateY(-10rpx);
+			opacity: 1;
+		}
+	}
+
+	/* 底部输入栏 */
+	.input-bar {
+		display: flex;
+		align-items: center;
+		padding: 16rpx 20rpx;
+		padding-bottom: calc(16rpx + env(safe-area-inset-bottom));
+		background-color: #ffffff;
+		border-top: 1rpx solid #eeeeee;
+	}
+	.input-wrap {
+		flex: 1;
+		background-color: #f5f6fa;
+		border-radius: 36rpx;
+		padding: 12rpx 24rpx;
+		margin-right: 16rpx;
+	}
+	.chat-input {
+		font-size: 28rpx;
+		width: 100%;
+	}
+	.send-btn {
+		padding: 14rpx 28rpx;
+		border-radius: 36rpx;
+		background-color: #cccccc;
+		transition: background-color 0.2s;
+	}
+	.send-btn-active {
+		background-color: #3f72f4;
+	}
+	.send-text {
+		font-size: 26rpx;
+		color: #ffffff;
+		font-weight: 500;
+	}
+</style>
--- a/sub_pages/house/detail.vue
+++ b/sub_pages/house/detail.vue
@@ -195,9 +195,9 @@
 				<u-button icon="map" type="error" text="预约看房" disabled
 					@click="$push('sub_pages/checkout/checkout?id=' + form.houseId)"></u-button>
 			</view> -->
-			<view class="item">
-				<!-- <u-button icon="phone" type="primary" text="电话咨询"></u-button> -->
-				<!-- <u-button icon="phone" type="primary" text="电话咨询" @click="makePhoneCall()"></u-button> -->
+			<view class="item" @click="openAIChat">
+				<u-icon name="chat" size="28" color="#3f72f4"></u-icon>
+				<text style="color: #3f72f4;">AI找房</text>
 			</view>
 		</view>

@@ -224,6 +224,8 @@
 			:apiCall="posterPreviewApiCall"
 			:apiParam="{}"
 		/>
+		<!-- AI找房对话弹窗 -->
+		<AiChatPopup v-model="showAIChat" :houseInfo="form" :houseId="houseId" />
 	</view>
 </template>

@@ -238,6 +240,7 @@
 	import ShareSheet from '@/components/share-sheet'
 	import HousePosterGenerator from '@/components/house-poster-generator'
 	import GoodsPosterPopup from '@/components/goods-poster-popup'
+	import AiChatPopup from '@/components/ai-chat-popup/ai-chat-popup.vue'

 	const menu = [{
 			name: '推荐',
@@ -347,7 +350,8 @@
 		components: {
 			ShareSheet,
 			HousePosterGenerator,
-			GoodsPosterPopup
+			GoodsPosterPopup,
+			AiChatPopup
 		},
 		data() {
 			return {
@@ -393,7 +397,9 @@
 				showPosterPreview: false,
 				currentPosterUrl: '',
 				dealerId: 0,
-				mobile: ''
+				mobile: '',
+				// AI找房弹窗
+				showAIChat: false
 			};

 		},
@@ -803,6 +809,13 @@
 				})
 			},

+		// AI找房：打开对话弹窗
+		openAIChat() {
+			console.log('openAIChat called, showAIChat before:', this.showAIChat)
+			this.showAIChat = true
+			console.log('showAIChat after:', this.showAIChat)
+		},
+
 			// 下载海报图片
 			downloadPosterImage(imageUrl) {
 				if (!imageUrl) {