sdz/ks-app-employment-service
Template
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

优化个人中心页面

Browse Source
This commit is contained in:
冯辉
2025-11-10 15:27:34 +08:00
parent 1fcfcb0475
commit 1a204549c4
38 changed files with 3017 additions and 618 deletions
Download Patch File Download Diff File Expand all files Collapse all files

89
components/area-cascade-picker/README.md
View File

@@ -70,6 +70,7 @@ const openPicker = () => {
| cancel | Function | 否 | - | 取消选择的回调函数 |
| change | Function | 否 | - | 选择变化的回调函数 |
| defaultValue | Object | 否 | null | 默认选中的地址（暂未实现） |
| forceRefresh | Boolean | 否 | false | 是否强制刷新数据（忽略缓存） |
#### success 回调参数
@@ -107,6 +108,14 @@ const openPicker = () => {
areaPicker.value?.close()
```
### clearCache()
清除地址数据缓存
```javascript
areaPicker.value?.clearCache()
```
## 数据格式
组件使用树形结构的地址数据，格式如下：
@@ -209,12 +218,73 @@ const selectLocation = () => {
</script>
```
## 性能优化
### 懒加载方案（已实现）⭐
组件已实现**懒加载**机制，大幅优化90M+地址数据的加载性能：
#### 核心优化
1. **首次加载**：只加载省份列表（< 1MB，3-5秒完成）
2. **按需加载**：用户选择省份后，再加载该省份的详细数据（2-5MB，5-10秒）
3. **智能缓存**：已加载的数据会缓存，切换省份时秒开
4. **自动降级**：如果服务器不支持分片接口，自动从完整数据中提取
#### 性能对比
| 场景 | 优化前 | 优化后（懒加载） |
|------|--------|------------------|
| 首次打开选择器 | 加载90M+（3-5分钟） | 加载省份列表（< 1MB，3-5秒） |
| 选择省份 | 无需加载 | 加载该省份数据（2-5MB，5-10秒） |
| 切换省份 | 无需加载 | 从缓存读取（< 1秒） |
#### 使用方式
组件已自动使用懒加载模式，无需修改调用代码：
```javascript
// 正常使用，自动懒加载
areaPicker.value?.open({
success: (addressData) => {
console.log('选择的地址：', addressData)
}
})
// 强制刷新数据（忽略缓存）
areaPicker.value?.open({
forceRefresh: true, // 强制从服务器重新加载
success: (addressData) => {
console.log('选择的地址：', addressData)
}
})
// 清除缓存
areaPicker.value?.clearCache()
```
### 服务器分片接口（最佳方案）🚀
如果服务器可以提供分片接口，性能会进一步提升。详见：[地址数据懒加载优化方案.md](../../docs/地址数据懒加载优化方案.md)
需要的接口：
- 省份列表接口：`/address_provinces.json`（轻量级，< 1MB）
- 省份详情接口：`/address_province_{code}.json`（按需加载，每个2-5MB）
### 缓存机制
1. **自动缓存**：已加载的数据会自动缓存到 IndexedDB（H5）或 uni.storage（小程序）
2. **缓存有效期**：默认7天，过期后自动重新加载
3. **离线支持**：网络失败时自动使用缓存数据
4. **存储方案**：优先使用 IndexedDB，自动降级到 uni.storage
## 注意事项
1. **数据来源**：当前使用本地模拟数据，生产环境建议接入后端API
1. **数据来源**：当前从远程JSON文件加载，生产环境建议接入后端API
2. **数据更新**：如需接入后端API，修改 `loadAreaData` 方法即可
3. **性能优化**：地址数据量大时，建议使用懒加载
3. **性能优化**：已集成缓存机制，首次加载后速度大幅提升
4. **兼容性**：支持 H5、微信小程序等多端
5. **存储限制**：小程序环境有存储限制，如遇问题会自动清理旧缓存
## 接入后端API
@@ -242,6 +312,21 @@ async loadAreaData() {
## 更新日志
### v1.2.0 (2025-01-XX)
- 🚀 **懒加载优化**：实现按需加载，首次加载从几分钟减少到几秒
- ✅ 首次只加载省份列表（< 1MB，3-5秒）
- ✅ 按需加载省份详情（选择省份时才加载）
- ✅ 智能缓存已加载的数据，切换省份秒开
- ✅ 支持服务器分片接口（最佳性能）
- ✅ 自动降级方案（兼容完整数据）
### v1.1.0 (2025-01-XX)
- 🚀 **性能优化**：集成智能缓存系统，优化90M+地址数据加载
- ✅ 支持 IndexedDB 和 uni.storage 双缓存方案
- ✅ 支持缓存过期管理和自动清理
- ✅ 支持强制刷新数据
- ✅ 优化首次加载体验，后续加载秒开
### v1.0.0 (2025-10-21)
- ✨ 初始版本
- ✅ 实现五级联动选择功能

162
components/area-cascade-picker/area-cascade-picker.vue
View File

@@ -85,8 +85,8 @@
</template>
<script>
// 改为动态加载，避免主包过大
let addressJson = null;
import addressDataLoaderLazy from '@/utils/addressDataLoaderLazy.js';
export default {
name: 'AreaCascadePicker',
data() {
@@ -97,7 +97,7 @@ export default {
cancelCallback: null,
changeCallback: null,
selectedIndex: [0, 0, 0, 0, 0],
// 原始数据
// 原始数据（懒加载模式下，只存储省份列表）
areaData: [],
// 各级列表
provinceList: [],
@@ -111,6 +111,10 @@ export default {
selectedDistrict: null,
selectedStreet: null,
selectedCommunity: null,
// 加载状态
isLoading: false,
// 懒加载模式：已加载的省份详情缓存
loadedProvinceDetails: new Map(),
};
},
methods: {
@@ -122,6 +126,7 @@ export default {
change,
maskClick = false,
defaultValue = null,
forceRefresh = false, // 是否强制刷新数据
} = newConfig;
this.reset();
@@ -132,46 +137,54 @@ export default {
this.maskClick = maskClick;
// 加载地区数据
await this.loadAreaData();
// 初始化列表
this.initLists();
this.$nextTick(() => {
this.$refs.popup.open();
});
this.isLoading = true;
try {
await this.loadAreaData(forceRefresh);
// 初始化列表
this.initLists();
this.$nextTick(() => {
this.$refs.popup.open();
});
} catch (error) {
console.error('打开地址选择器失败:', error);
uni.showToast({
title: '加载地址数据失败',
icon: 'none',
duration: 2000
});
} finally {
this.isLoading = false;
}
},
async loadAreaData() {
async loadAreaData(forceRefresh = false) {
try {
// 尝试调用后端API获取地区数据
// 如果后端API不存在，将使用模拟数据
console.log('正在加载地区数据...');
console.log('正在加载省份列表（懒加载模式）...');
// 优先尝试调用后端API获取省份列表
// const resp = await uni.request({
// url: '/app/common/area/cascade',
// url: '/app/common/area/provinces',
// method: 'GET'
// });
// if (resp.statusCode === 200 && resp.data && resp.data.data) {
// this.areaData = resp.data.data;
// return;
// }
// 动态加载JSON文件（使用require，支持动态加载）
if (!addressJson) {
try {
// 优先从主包加载（如果存在）
addressJson = require('http://124.243.245.42/ks_cms/address.json');
} catch (e) {
console.warn('无法加载地址数据，使用空数据', e);
addressJson = [];
}
}
// 使用懒加载器：只加载省份列表（数据量很小，< 1MB）
const provinceList = await addressDataLoaderLazy.loadProvinceList(forceRefresh);
// 使用模拟数据
this.areaData = this.getMockData();
if (provinceList && Array.isArray(provinceList)) {
this.areaData = provinceList;
} else {
console.warn('省份列表格式不正确，使用空数据');
this.areaData = [];
}
} catch (error) {
console.error('加载地区数据失败:', error);
// 如果加载失败，使用空数据
this.areaData = addressJson || [];
console.error('加载省份列表失败:', error);
this.areaData = [];
throw error;
}
},
@@ -181,12 +194,65 @@ export default {
if (this.provinceList.length > 0) {
this.selectedProvince = this.provinceList[0];
// 懒加载：首次选择第一个省份时，加载其详情
this.updateCityList();
}
},
updateCityList() {
if (!this.selectedProvince || !this.selectedProvince.children) {
async updateCityList() {
if (!this.selectedProvince) {
this.cityList = [];
this.districtList = [];
this.streetList = [];
this.communityList = [];
return;
}
// 检查是否已加载该省份的详情
let provinceDetail = this.loadedProvinceDetails.get(this.selectedProvince.code);
// 如果未加载，则懒加载该省份的详情
if (!provinceDetail) {
try {
console.log(`📥 懒加载省份详情: ${this.selectedProvince.name} (${this.selectedProvince.code})`);
provinceDetail = await addressDataLoaderLazy.loadProvinceDetail(
this.selectedProvince.code,
false
);
if (provinceDetail) {
// 缓存已加载的省份详情
this.loadedProvinceDetails.set(this.selectedProvince.code, provinceDetail);
// 更新省份对象，添加children
Object.assign(this.selectedProvince, {
children: provinceDetail.children || []
});
}
} catch (error) {
console.error('加载省份详情失败:', error);
// 如果加载失败，检查是否有 _hasChildren 标记
if (this.selectedProvince._hasChildren) {
uni.showToast({
title: '加载城市数据失败，请重试',
icon: 'none',
duration: 2000
});
}
this.cityList = [];
this.districtList = [];
this.streetList = [];
this.communityList = [];
return;
}
} else {
// 如果已加载，直接使用缓存的详情
Object.assign(this.selectedProvince, {
children: provinceDetail.children || []
});
}
// 更新城市列表
if (!this.selectedProvince.children || this.selectedProvince.children.length === 0) {
this.cityList = [];
this.districtList = [];
this.streetList = [];
@@ -250,7 +316,7 @@ export default {
}
},
bindChange(e) {
async bindChange(e) {
const newIndex = e.detail.value;
// 检查哪一列发生了变化
@@ -260,9 +326,9 @@ export default {
// 根据变化的列更新后续列
if (i === 0) {
// 省变化
// 省变化 - 需要懒加载新省份的详情
this.selectedProvince = this.provinceList[newIndex[0]];
this.updateCityList();
await this.updateCityList(); // 改为异步
} else if (i === 1) {
// 市变化
this.selectedCity = this.cityList[newIndex[1]];
@@ -348,9 +414,27 @@ export default {
this.communityList = [];
},
// 模拟数据（用于演示）
getMockData() {
return addressJson || []
/**
* 清除地址数据缓存（供外部调用）
*/
async clearCache() {
try {
await addressDataLoaderLazy.clearCache();
// 同时清除内存缓存
this.loadedProvinceDetails.clear();
uni.showToast({
title: '缓存已清除',
icon: 'success',
duration: 2000
});
} catch (error) {
console.error('清除缓存失败:', error);
uni.showToast({
title: '清除缓存失败',
icon: 'none',
duration: 2000
});
}
}
},
};