优化个人中心页面
This commit is contained in:
冯辉
@@ -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
|
||||
});
|
||||
}
|
||||
}
|
||||
},
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user