# 小程序图片视频下载和分享功能实现说明

## 🎯 功能概述
为房源详情页面添加了图片和视频下载功能以及分享功能，方便同行使用。用户可以通过点击下载按钮或长按媒体文件来保存到手机相册，也可以通过分享功能将房源信息分享给其他人。

## 📁 修改的文件

### 1. utils/util.js
新增了两个下载工具函数：
- `downloadImage(imageUrl, successCallback, failCallback)` - 下载图片到相册
- `downloadVideo(videoUrl, successCallback, failCallback)` - 下载视频到相册

### 2. sub_pages/house/detail.vue
在房源详情页面添加了下载功能：

#### 模板修改：
- 为图片轮播添加了下载按钮和长按事件
- 为视频播放器添加了下载按钮和长按事件
- 添加了下载按钮的样式

#### 脚本修改：
- `onImageLongPress()` - 图片长按事件处理
- `onVideoLongPress()` - 视频长按事件处理
- `downloadCurrentImage()` - 下载当前图片
- `downloadAllImages()` - 下载所有图片
- `batchDownloadImages()` - 批量下载图片实现
- `updateBatchProgress()` - 更新批量下载进度
- `downloadCurrentVideo()` - 下载当前视频
- `onShare()` - 分享功能处理

#### 样式修改：
- `.download-btn` - 下载按钮样式，半透明圆形按钮

## 🚀 功能特性

### 图片下载
1. **单张下载**：点击右下角下载按钮
2. **长按选择**：长按图片弹出选择菜单
3. **批量下载**：可选择下载所有图片
4. **进度显示**：批量下载时显示进度

### 视频下载
1. **点击下载**：点击右下角下载按钮
2. **长按下载**：长按视频弹出下载选项

### 分享功能
1. **分享按钮**：在操作栏中点击分享按钮
2. **分享选项**：支持分享给微信好友、朋友圈、生成海报、复制链接等
3. **智能分享**：自动获取房源标题、图片作为分享内容

### 用户体验
1. **加载提示**：下载过程中显示加载动画
2. **成功反馈**：下载成功后显示成功提示
3. **错误处理**：下载失败时显示错误信息
4. **权限引导**：相册权限被拒绝时提供设置引导

## 🔧 技术实现

### 下载流程
1. 使用 `uni.downloadFile()` 下载文件到临时目录
2. 使用 `uni.saveImageToPhotosAlbum()` 或 `uni.saveVideoToPhotosAlbum()` 保存到相册
3. 处理各种异常情况和用户反馈

### 批量下载优化
- 使用 `setTimeout()` 控制下载间隔，避免并发过多
- 实时更新下载进度
- 统计成功和失败数量

### 权限处理
- 自动检测相册访问权限
- 权限被拒绝时提供友好的引导提示

## 📱 使用方法

### 对于用户：
1. **下载单张图片**：在图片轮播界面点击右下角下载按钮
2. **下载所有图片**：长按图片，选择"下载所有图片"
3. **下载视频**：切换到视频模式，点击下载按钮或长按视频
4. **分享房源**：点击操作栏中的分享按钮，选择分享方式

### 对于开发者：
1. 可以直接调用 `Util.downloadImage(url)` 下载图片
2. 可以直接调用 `Util.downloadVideo(url)` 下载视频
3. 支持成功和失败回调函数

## 🔒 权限要求

### 小程序权限
- 需要用户授权访问相册权限
- 首次使用时会自动申请权限

### App权限
- Android: WRITE_EXTERNAL_STORAGE
- iOS: 相册访问权限

## 🎨 界面展示

下载按钮位于图片/视频的右下角，采用半透明圆形设计：
- 背景：黑色半透明 (rgba(0, 0, 0, 0.5))
- 图标：白色下载图标
- 文字：白色"下载图片"/"下载视频"文字

## 🐛 错误处理

1. **网络错误**：下载失败时显示"下载失败"提示
2. **权限错误**：相册权限被拒绝时显示设置引导
3. **文件错误**：无效的图片/视频地址时显示相应提示
4. **批量下载**：显示成功和失败的统计信息
5. **分享链接**：H5地址获取失败时使用当前页面路径作为备选方案
6. **海报生成**：没有图片时使用默认占位图或文字海报

## 🔄 兼容性

- ✅ 微信小程序
- ✅ 支付宝小程序
- ✅ App (Android/iOS)
- ✅ H5 (部分功能受限)

## 📝 注意事项

1. H5端的下载功能可能受浏览器限制
2. 批量下载时建议控制并发数量，避免性能问题
3. 大文件下载时注意网络状况和用户流量
4. 确保有足够的存储空间

## 🎉 总结

该功能为房源详情页面提供了完整的媒体文件下载和分享解决方案，支持：
- 单张/批量图片下载和视频下载
- 多种分享方式（微信好友、朋友圈、海报、复制链接）
- 良好的用户体验和错误处理机制
- 方便同行保存和分享房源媒体资料

通过这些功能，用户可以轻松地保存房源图片和视频到本地，也可以快速分享房源信息给其他人，大大提升了小程序的实用性和用户体验。