feat(house): 添加 AI 找房助手功能
- 新增 AI 找房对话弹窗组件,实现房源信息智能问答 - 房源详情页面新增 AI 找房入口按钮,点击弹出聊天窗口 - AI 聊天弹窗支持用户输入提问和快速问题按钮 - 集成豆包 Seed 2.0 Pro 模型调用,实现房源详情智能解答 - 增加聊天消息列表和打字动画,提升交互体验 - 关闭按钮和输入框交互优化,确保流畅使用体验 - 代码结构和样式规范化,保持界面美观一致
This commit is contained in:
17
.idea/workspace.xml
generated
17
.idea/workspace.xml
generated
@@ -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): 重构地区选择器数据加载逻辑 - 将数据请求逻辑独立为 requestCityData 方法 - 集成腾讯地图行政区域 API 获取准确地区数据 - 实现地区数据格式转换适配组件需求 - 添加内置精简地区数据作为降级方案 - 优化异步处理和错误捕获机制 - 修复子级数据为空时的显示问题">
|
<list default="true" id="ec5c6cc2-d0e3-4470-b342-660aa89effe0" name="Changes" comment="feat(house): 优化房源区域选择及删除功能 - 保存按钮布局调整优化,提升用户体验 - 房源详情地区显示只展示市级,简化展示信息 - 地区选择器调整,只显示市,确保区域数据统一 - 删除房源操作添加确认弹窗,避免误删 - 省市区数据加载逻辑简化,使用固定城区列表替代异步接口请求 - 替换首页及闪屏logo图片,更新为新资源路径 - 隐藏房源详情页电话咨询按钮,暂不支持电话功能 - 代码格式和注释优化,提升代码可读性">
|
||||||
<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): 优化房源区域选择及删除功能 - 保存按钮布局调整优化,提升用户体验 - 房源详情地区显示只展示市级,简化展示信息 - 地区选择器调整,只显示市,确保区域数据统一 - 删除房源操作添加确认弹窗,避免误删 - 省市区数据加载逻辑简化,使用固定城区列表替代异步接口请求 - 替换首页及闪屏logo图片,更新为新资源路径 - 隐藏房源详情页电话咨询按钮,暂不支持电话功能 - 代码格式和注释优化,提升代码可读性">
|
||||||
|
<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): 添加房源卖价和总价功能并优化分享流程 - 在房源添加页面添加卖价(元/平)和总价(万)输入字段 - 实现卖价变动时总价自动计算功能 - 在房源详情页显示卖价和总价信息 - 调整物业费显示位置提升界面布局合理性 - 更新服务器配置地址从gxwebsoft.com到websoft.top - 替换必看好房标签为特价好房标签统一显示 - 修复房源详情页分享功能和海报生成流程 - 添加跟进记录页面和相应跳转功能 - 优化房源管理页面删除按钮显示逻辑 - 实现闪屏页跳过功能和登录状态记忆 - 添加房源海报生成组件支持分享推广 - 修复分享路径参数传递和用户信息存储" />
|
<MESSAGE value="feat(house): 添加房源卖价和总价功能并优化分享流程 - 在房源添加页面添加卖价(元/平)和总价(万)输入字段 - 实现卖价变动时总价自动计算功能 - 在房源详情页显示卖价和总价信息 - 调整物业费显示位置提升界面布局合理性 - 更新服务器配置地址从gxwebsoft.com到websoft.top - 替换必看好房标签为特价好房标签统一显示 - 修复房源详情页分享功能和海报生成流程 - 添加跟进记录页面和相应跳转功能 - 优化房源管理页面删除按钮显示逻辑 - 实现闪屏页跳过功能和登录状态记忆 - 添加房源海报生成组件支持分享推广 - 修复分享路径参数传递和用户信息存储" />
|
||||||
<MESSAGE value="feat(liu-customize-sel): 添加全国省市区数据支持 - 新增重庆市及其下属区县数据 - 新增四川省及其下属地市数据 - 新增广西壮族自治区及其下属地市数据 - 新增江苏省地市数据补充 - 新增山东省、河南省、湖北省、湖南省地市数据 - 新增福建省、江西省、云南省、贵州省地市数据 - 新增海南省、陕西省、山西省地市数据 - 完善广东省地市及区县数据结构" />
|
<MESSAGE value="feat(liu-customize-sel): 添加全国省市区数据支持 - 新增重庆市及其下属区县数据 - 新增四川省及其下属地市数据 - 新增广西壮族自治区及其下属地市数据 - 新增江苏省地市数据补充 - 新增山东省、河南省、湖北省、湖南省地市数据 - 新增福建省、江西省、云南省、贵州省地市数据 - 新增海南省、陕西省、山西省地市数据 - 完善广东省地市及区县数据结构" />
|
||||||
<MESSAGE value="feat(area-selector): 重构地区选择器数据加载逻辑 - 将数据请求逻辑独立为 requestCityData 方法 - 集成腾讯地图行政区域 API 获取准确地区数据 - 实现地区数据格式转换适配组件需求 - 添加内置精简地区数据作为降级方案 - 优化异步处理和错误捕获机制 - 修复子级数据为空时的显示问题" />
|
<MESSAGE value="feat(area-selector): 重构地区选择器数据加载逻辑 - 将数据请求逻辑独立为 requestCityData 方法 - 集成腾讯地图行政区域 API 获取准确地区数据 - 实现地区数据格式转换适配组件需求 - 添加内置精简地区数据作为降级方案 - 优化异步处理和错误捕获机制 - 修复子级数据为空时的显示问题" />
|
||||||
<option name="LAST_COMMIT_MESSAGE" value="feat(area-selector): 重构地区选择器数据加载逻辑 - 将数据请求逻辑独立为 requestCityData 方法 - 集成腾讯地图行政区域 API 获取准确地区数据 - 实现地区数据格式转换适配组件需求 - 添加内置精简地区数据作为降级方案 - 优化异步处理和错误捕获机制 - 修复子级数据为空时的显示问题" />
|
<MESSAGE value="feat(house): 优化房源区域选择及删除功能 - 保存按钮布局调整优化,提升用户体验 - 房源详情地区显示只展示市级,简化展示信息 - 地区选择器调整,只显示市,确保区域数据统一 - 删除房源操作添加确认弹窗,避免误删 - 省市区数据加载逻辑简化,使用固定城区列表替代异步接口请求 - 替换首页及闪屏logo图片,更新为新资源路径 - 隐藏房源详情页电话咨询按钮,暂不支持电话功能 - 代码格式和注释优化,提升代码可读性" />
|
||||||
|
<option name="LAST_COMMIT_MESSAGE" value="feat(house): 优化房源区域选择及删除功能 - 保存按钮布局调整优化,提升用户体验 - 房源详情地区显示只展示市级,简化展示信息 - 地区选择器调整,只显示市,确保区域数据统一 - 删除房源操作添加确认弹窗,避免误删 - 省市区数据加载逻辑简化,使用固定城区列表替代异步接口请求 - 替换首页及闪屏logo图片,更新为新资源路径 - 隐藏房源详情页电话咨询按钮,暂不支持电话功能 - 代码格式和注释优化,提升代码可读性" />
|
||||||
</component>
|
</component>
|
||||||
</project>
|
</project>
|
||||||
455
components/ai-chat-popup/ai-chat-popup.vue
Normal file
455
components/ai-chat-popup/ai-chat-popup.vue
Normal 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}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>
|
||||||
@@ -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) {
|
||||||
|
|||||||
Reference in New Issue
Block a user