赵忠林
1bf7caf34e
- 在房源添加页面添加卖价(元/平)和总价(万)输入字段 - 实现卖价变动时总价自动计算功能 - 在房源详情页显示卖价和总价信息 - 调整物业费显示位置提升界面布局合理性 - 更新服务器配置地址从gxwebsoft.com到websoft.top - 替换必看好房标签为特价好房标签统一显示 - 修复房源详情页分享功能和海报生成流程 - 添加跟进记录页面和相应跳转功能 - 优化房源管理页面删除按钮显示逻辑 - 实现闪屏页跳过功能和登录状态记忆 - 添加房源海报生成组件支持分享推广 - 修复分享路径参数传递和用户信息存储
300 lines
8.6 KiB
Markdown
300 lines
8.6 KiB
Markdown
# 海报生成功能修复总结
|
||
|
||
## 🔧 修复的问题
|
||
|
||
### 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. **添加调试日志**：便于快速定位问题
|
||
|
||
## 🚀 预期效果
|
||
|
||
修复后，海报生成功能应该完全正常：
|
||
- ✅ 有房源图片时，使用第一张图片作为海报
|
||
- ✅ 没有房源图片时，生成包含房源信息的默认海报
|
||
- ✅ 海报保存功能正常
|
||
- ✅ 错误处理完善，用户体验良好
|
||
- ✅ 无控制台错误
|