feat(house): 添加房源卖价和总价功能并优化分享流程
- 在房源添加页面添加卖价(元/平)和总价(万)输入字段 - 实现卖价变动时总价自动计算功能 - 在房源详情页显示卖价和总价信息 - 调整物业费显示位置提升界面布局合理性 - 更新服务器配置地址从gxwebsoft.com到websoft.top - 替换必看好房标签为特价好房标签统一显示 - 修复房源详情页分享功能和海报生成流程 - 添加跟进记录页面和相应跳转功能 - 优化房源管理页面删除按钮显示逻辑 - 实现闪屏页跳过功能和登录状态记忆 - 添加房源海报生成组件支持分享推广 - 修复分享路径参数传递和用户信息存储
This commit is contained in:
299
海报功能修复总结.md
Normal file
299
海报功能修复总结.md
Normal file
@@ -0,0 +1,299 @@
|
||||
# 海报生成功能修复总结
|
||||
|
||||
## 🔧 修复的问题
|
||||
|
||||
### 1. 主要错误
|
||||
**错误信息**：`Error in callback for watcher "value": "TypeError: app.apiCall is not a function"`
|
||||
|
||||
**根本原因**：
|
||||
- `GoodsPosterPopup` 组件期望接收一个 `apiCall` 函数
|
||||
- 函数传递过程中存在 `this` 上下文绑定问题导致 `this.swiperList` 和 `this.form` 为 `undefined`
|
||||
- 图片URL格式处理不完善
|
||||
|
||||
### 2. 新发现的问题
|
||||
从测试日志可以看出：
|
||||
```
|
||||
generateHousePoster 被调用，参数: {...}
|
||||
当前房源图片列表: undefined
|
||||
房源信息: undefined
|
||||
```
|
||||
这说明函数的 `this` 上下文丢失了。
|
||||
|
||||
## ✅ 修复内容
|
||||
|
||||
### 1. 房源详情页面 (sub_pages/house/detail.vue)
|
||||
|
||||
#### 修复点1：修改模板中的函数传递
|
||||
```vue
|
||||
<!-- 修改前 -->
|
||||
<ShareSheet
|
||||
v-model="showShareSheet"
|
||||
:posterApiCall="generateHousePoster"
|
||||
:posterApiParam="posterApiParam"
|
||||
/>
|
||||
|
||||
<!-- 修改后 -->
|
||||
<ShareSheet
|
||||
v-model="showShareSheet"
|
||||
:posterApiCall="handleGenerateHousePoster"
|
||||
:posterApiParam="posterApiParam"
|
||||
/>
|
||||
```
|
||||
|
||||
#### 修复点2：移除不必要的数据初始化
|
||||
```javascript
|
||||
// 修改前
|
||||
data() {
|
||||
return {
|
||||
posterApiCall: null, // 移除这行
|
||||
posterApiParam: {}
|
||||
}
|
||||
}
|
||||
|
||||
// 修改后
|
||||
data() {
|
||||
return {
|
||||
posterApiParam: {}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
#### 修复点3：创建新的海报生成处理方法（确保this上下文正确）
|
||||
```javascript
|
||||
// 处理海报生成（确保this上下文正确）
|
||||
handleGenerateHousePoster(params) {
|
||||
console.log('handleGenerateHousePoster 被调用，参数:', params);
|
||||
console.log('当前房源图片列表:', this.swiperList);
|
||||
console.log('房源信息:', this.form);
|
||||
console.log('this 上下文:', this);
|
||||
|
||||
return new Promise((resolve, reject) => {
|
||||
try {
|
||||
// 优先使用房源的第一张图片作为海报
|
||||
if (this.swiperList && this.swiperList.length > 0) {
|
||||
const firstImage = this.swiperList[0];
|
||||
// 支持多种图片URL格式
|
||||
const imageUrl = firstImage.url || firstImage.image || firstImage.src || firstImage;
|
||||
|
||||
console.log('第一张图片对象:', firstImage);
|
||||
console.log('提取的图片URL:', imageUrl);
|
||||
|
||||
if (imageUrl && typeof imageUrl === 'string' && imageUrl.trim() !== '') {
|
||||
console.log('使用房源图片作为海报:', imageUrl);
|
||||
resolve({
|
||||
data: {
|
||||
imageUrl: imageUrl.trim()
|
||||
}
|
||||
});
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
console.log('没有可用的房源图片，生成默认海报');
|
||||
// 如果没有房源图片，生成默认海报
|
||||
this.handleGenerateTextPoster()
|
||||
.then(imageUrl => {
|
||||
console.log('生成默认海报成功:', imageUrl);
|
||||
resolve({
|
||||
data: {
|
||||
imageUrl: imageUrl
|
||||
}
|
||||
});
|
||||
})
|
||||
.catch(err => {
|
||||
console.log('生成默认海报失败:', err);
|
||||
reject(err);
|
||||
});
|
||||
} catch (error) {
|
||||
console.error('handleGenerateHousePoster 执行出错:', error);
|
||||
reject(error);
|
||||
}
|
||||
});
|
||||
}
|
||||
```
|
||||
|
||||
#### 修复点3：改进默认海报生成
|
||||
```javascript
|
||||
generateTextPoster() {
|
||||
return new Promise((resolve, reject) => {
|
||||
try {
|
||||
// 创建一个简单的文字海报信息
|
||||
const houseTitle = this.form.houseTitle || '房源信息';
|
||||
const monthlyRent = this.form.monthlyRent || 0;
|
||||
const houseType = this.form.houseType || '';
|
||||
const extent = this.form.extent || 0;
|
||||
const address = this.form.address || '';
|
||||
|
||||
console.log('生成默认海报，房源信息:', {
|
||||
houseTitle, monthlyRent, houseType, extent, address
|
||||
});
|
||||
|
||||
// 使用占位图片服务生成默认海报
|
||||
const defaultPosterUrl = 'https://dummyimage.com/400x600/4a90e2/ffffff&text=' +
|
||||
encodeURIComponent(`${houseTitle}\n${monthlyRent}元/月\n${houseType}\n${extent}m²`);
|
||||
|
||||
console.log('生成的默认海报URL:', defaultPosterUrl);
|
||||
resolve(defaultPosterUrl);
|
||||
} catch (error) {
|
||||
console.error('generateTextPoster 执行出错:', error);
|
||||
// 如果生成默认海报也失败，使用一个简单的占位图
|
||||
resolve('https://dummyimage.com/400x600/cccccc/666666&text=房源海报');
|
||||
}
|
||||
});
|
||||
}
|
||||
```
|
||||
|
||||
#### 修复点4：优化分享数据设置
|
||||
```javascript
|
||||
onShare() {
|
||||
// 检查是否有房源信息
|
||||
if (!this.form.houseTitle) {
|
||||
uni.showToast({
|
||||
title: '房源信息加载中...',
|
||||
icon: 'none'
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
// 设置分享数据
|
||||
this.shareTitle = `${this.form.houseTitle} ${this.form.monthlyRent}元/月`;
|
||||
|
||||
// 获取分享图片URL，支持多种格式
|
||||
let shareImageUrl = '';
|
||||
if (this.swiperList && this.swiperList.length > 0) {
|
||||
const firstImage = this.swiperList[0];
|
||||
shareImageUrl = firstImage.url || firstImage.image || firstImage.src || firstImage || '';
|
||||
}
|
||||
this.shareImageUrl = shareImageUrl;
|
||||
|
||||
// 设置海报API参数
|
||||
this.posterApiParam = {
|
||||
houseId: this.form.houseId,
|
||||
houseTitle: this.form.houseTitle,
|
||||
monthlyRent: this.form.monthlyRent,
|
||||
houseType: this.form.houseType,
|
||||
extent: this.form.extent,
|
||||
address: this.form.address
|
||||
};
|
||||
|
||||
// 更新全局分享数据
|
||||
uni.$u.mpShare = {
|
||||
title: this.shareTitle,
|
||||
path: `sub_pages/house/detail?houseId=${this.form.houseId}&user_id=${uni.getStorageSync('userId')}`,
|
||||
imageUrl: this.shareImageUrl
|
||||
};
|
||||
|
||||
console.log('分享数据设置完成:', {
|
||||
shareTitle: this.shareTitle,
|
||||
shareImageUrl: this.shareImageUrl,
|
||||
posterApiParam: this.posterApiParam
|
||||
});
|
||||
|
||||
// 显示分享弹窗
|
||||
this.showShareSheet = true;
|
||||
}
|
||||
```
|
||||
|
||||
### 2. ShareSheet 组件 (components/share-sheet/index.vue)
|
||||
|
||||
#### 修复点：添加调试日志
|
||||
```javascript
|
||||
// 生成二维码海报
|
||||
handlePoster() {
|
||||
console.log('ShareSheet handlePoster 被调用');
|
||||
console.log('posterApiCall 类型:', typeof this.posterApiCall);
|
||||
console.log('posterApiCall 函数:', this.posterApiCall);
|
||||
console.log('posterApiParam:', this.posterApiParam);
|
||||
|
||||
this.showGoodsPosterPopup = true
|
||||
this.handleCancel()
|
||||
}
|
||||
```
|
||||
|
||||
### 3. GoodsPosterPopup 组件 (components/goods-poster-popup/index.vue)
|
||||
|
||||
#### 修复点：增强错误处理和调试
|
||||
```javascript
|
||||
// 显示海报弹窗
|
||||
onShowPopup() {
|
||||
const app = this
|
||||
console.log('GoodsPosterPopup onShowPopup 被调用');
|
||||
console.log('apiCall 类型:', typeof app.apiCall);
|
||||
console.log('apiCall 函数:', app.apiCall);
|
||||
console.log('apiParam:', app.apiParam);
|
||||
console.log('platform:', app.platform);
|
||||
|
||||
if (typeof app.apiCall !== 'function') {
|
||||
console.error('apiCall 不是一个函数!');
|
||||
uni.showToast({
|
||||
title: '海报生成功能异常',
|
||||
icon: 'none'
|
||||
});
|
||||
app.onClose();
|
||||
return;
|
||||
}
|
||||
|
||||
const params = { ...app.apiParam, channel: app.platform };
|
||||
console.log('调用 apiCall，参数:', params);
|
||||
|
||||
app.apiCall(params)
|
||||
.then(result => {
|
||||
console.log('apiCall 调用成功，结果:', result);
|
||||
if (result && result.data && result.data.imageUrl) {
|
||||
app.imageUrl = result.data.imageUrl;
|
||||
app.show = true;
|
||||
console.log('海报图片URL设置成功:', app.imageUrl);
|
||||
} else {
|
||||
console.error('apiCall 返回的数据格式不正确:', result);
|
||||
uni.showToast({
|
||||
title: '海报生成失败',
|
||||
icon: 'none'
|
||||
});
|
||||
app.onClose();
|
||||
}
|
||||
})
|
||||
.catch(err => {
|
||||
console.error('apiCall 调用失败:', err);
|
||||
uni.showToast({
|
||||
title: '海报生成失败',
|
||||
icon: 'none'
|
||||
});
|
||||
app.onClose();
|
||||
});
|
||||
}
|
||||
```
|
||||
|
||||
## 🧪 测试步骤
|
||||
|
||||
### 1. 打开控制台
|
||||
在微信开发者工具中打开控制台，查看日志输出
|
||||
|
||||
### 2. 测试生成海报功能
|
||||
1. 进入房源详情页面
|
||||
2. 点击"分享"按钮
|
||||
3. 选择"生成海报"
|
||||
4. 观察控制台输出
|
||||
|
||||
### 3. 预期结果
|
||||
- ✅ 控制台显示：`generateHousePoster 被调用，参数: {...}`
|
||||
- ✅ 控制台显示：`当前房源图片列表: [...]`
|
||||
- ✅ 海报弹窗正常显示
|
||||
- ✅ 不再出现 `app.apiCall is not a function` 错误
|
||||
- ✅ 海报图片能正常显示和保存
|
||||
|
||||
## 🎯 关键修复点总结
|
||||
|
||||
1. **移除不必要的数据初始化**：避免 `posterApiCall: null` 导致的问题
|
||||
2. **直接传递方法引用**：确保 `this` 上下文正确绑定
|
||||
3. **增强图片URL处理**：支持多种图片URL格式
|
||||
4. **完善错误处理**：添加详细的错误提示和降级方案
|
||||
5. **添加调试日志**：便于快速定位问题
|
||||
|
||||
## 🚀 预期效果
|
||||
|
||||
修复后，海报生成功能应该完全正常：
|
||||
- ✅ 有房源图片时，使用第一张图片作为海报
|
||||
- ✅ 没有房源图片时，生成包含房源信息的默认海报
|
||||
- ✅ 海报保存功能正常
|
||||
- ✅ 错误处理完善，用户体验良好
|
||||
- ✅ 无控制台错误
|
||||
Reference in New Issue
Block a user