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

- 新增 AI 找房对话弹窗组件,实现房源信息智能问答
- 房源详情页面新增 AI 找房入口按钮,点击弹出聊天窗口
- AI 聊天弹窗支持用户输入提问和快速问题按钮
- 集成豆包 Seed 2.0 Pro 模型调用,实现房源详情智能解答
- 增加聊天消息列表和打字动画,提升交互体验
- 关闭按钮和输入框交互优化,确保流畅使用体验
- 代码结构和样式规范化,保持界面美观一致
This commit is contained in:
2026-05-01 11:33:22 +08:00
parent d66a8dfe8c
commit 4d3503f47e
3 changed files with 487 additions and 8 deletions

17
.idea/workspace.xml generated
View File

@@ -4,8 +4,9 @@
<option name="autoReloadType" value="SELECTIVE" /> <option name="autoReloadType" value="SELECTIVE" />
</component> </component>
<component name="ChangeListManager"> <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$/.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> </list>
<option name="SHOW_DIALOG" value="false" /> <option name="SHOW_DIALOG" value="false" />
<option name="HIGHLIGHT_CONFLICTS" value="true" /> <option name="HIGHLIGHT_CONFLICTS" value="true" />
@@ -76,6 +77,7 @@
<workItem from="1770982606471" duration="56000" /> <workItem from="1770982606471" duration="56000" />
<workItem from="1775219711691" duration="2835000" /> <workItem from="1775219711691" duration="2835000" />
<workItem from="1775277870399" duration="755000" /> <workItem from="1775277870399" duration="755000" />
<workItem from="1777604110578" duration="1501000" />
</task> </task>
<task id="LOCAL-00001" summary="爱尚家接口合并到cms-api.websoft.top"> <task id="LOCAL-00001" summary="爱尚家接口合并到cms-api.websoft.top">
<option name="closed" value="true" /> <option name="closed" value="true" />
@@ -149,7 +151,15 @@
<option name="project" value="LOCAL" /> <option name="project" value="LOCAL" />
<updated>1775278015655</updated> <updated>1775278015655</updated>
</task> </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 /> <servers />
</component> </component>
<component name="TypeScriptGeneratedFilesManager"> <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(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(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;- 修复子级数据为空时的显示问题" /> <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> </component>
</project> </project>

View File

@@ -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}
- 户型:${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>

View File

@@ -195,9 +195,9 @@
<u-button icon="map" type="error" text="预约看房" disabled <u-button icon="map" type="error" text="预约看房" disabled
@click="$push('sub_pages/checkout/checkout?id=' + form.houseId)"></u-button> @click="$push('sub_pages/checkout/checkout?id=' + form.houseId)"></u-button>
</view> --> </view> -->
<view class="item"> <view class="item" @click="openAIChat">
<!-- <u-button icon="phone" type="primary" text="电话咨询"></u-button> --> <u-icon name="chat" size="28" color="#3f72f4"></u-icon>
<!-- <u-button icon="phone" type="primary" text="电话咨询" @click="makePhoneCall()"></u-button> --> <text style="color: #3f72f4;">AI找房</text>
</view> </view>
</view> </view>
@@ -224,6 +224,8 @@
:apiCall="posterPreviewApiCall" :apiCall="posterPreviewApiCall"
:apiParam="{}" :apiParam="{}"
/> />
<!-- AI找房对话弹窗 -->
<AiChatPopup v-model="showAIChat" :houseInfo="form" :houseId="houseId" />
</view> </view>
</template> </template>
@@ -238,6 +240,7 @@
import ShareSheet from '@/components/share-sheet' import ShareSheet from '@/components/share-sheet'
import HousePosterGenerator from '@/components/house-poster-generator' import HousePosterGenerator from '@/components/house-poster-generator'
import GoodsPosterPopup from '@/components/goods-poster-popup' import GoodsPosterPopup from '@/components/goods-poster-popup'
import AiChatPopup from '@/components/ai-chat-popup/ai-chat-popup.vue'
const menu = [{ const menu = [{
name: '推荐', name: '推荐',
@@ -347,7 +350,8 @@
components: { components: {
ShareSheet, ShareSheet,
HousePosterGenerator, HousePosterGenerator,
GoodsPosterPopup GoodsPosterPopup,
AiChatPopup
}, },
data() { data() {
return { return {
@@ -393,7 +397,9 @@
showPosterPreview: false, showPosterPreview: false,
currentPosterUrl: '', currentPosterUrl: '',
dealerId: 0, 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) { downloadPosterImage(imageUrl) {
if (!imageUrl) { if (!imageUrl) {