gxwebsoft/aishangjia-uniapp
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(area-selector): 重构地区选择器数据加载逻辑

Browse Source 
- 将数据请求逻辑独立为 requestCityData 方法
- 集成腾讯地图行政区域 API 获取准确地区数据
- 实现地区数据格式转换适配组件需求
- 添加内置精简地区数据作为降级方案
- 优化异步处理和错误捕获机制
- 修复子级数据为空时的显示问题
This commit is contained in:
赵忠林
2026-04-03 21:58:30 +08:00
parent ea8fcd691d
commit 2b82e4a6d0
3 changed files with 94 additions and 40 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
.idea/workspace.xml generated
View File

@@ -4,8 +4,8 @@
<option name="autoReloadType" value="SELECTIVE" /> <option name="autoReloadType" value="SELECTIVE" />
</component> </component>
<component name="ChangeListManager"> <component name="ChangeListManager">
<list default="true" id="ec5c6cc2-d0e3-4470-b342-660aa89effe0" name="Changes" comment="feat(house): 添加房源卖价和总价功能并优化分享流程&#10;&#10;- 在房源添加页面添加卖价(元/平)和总价(万)输入字段&#10;- 实现卖价变动时总价自动计算功能&#10;- 在房源详情页显示卖价和总价信息&#10;- 调整物业费显示位置提升界面布局合理性&#10;- 更新服务器配置地址从gxwebsoft.com到websoft.top&#10;- 替换必看好房标签为特价好房标签统一显示&#10;- 修复房源详情页分享功能和海报生成流程&#10;- 添加跟进记录页面和相应跳转功能&#10;- 优化房源管理页面删除按钮显示逻辑&#10;- 实现闪屏页跳过功能和登录状态记忆&#10;- 添加房源海报生成组件支持分享推广&#10;- 修复分享路径参数传递和用户信息存储"> <list default="true" id="ec5c6cc2-d0e3-4470-b342-660aa89effe0" name="Changes" comment="feat(liu-customize-sel): 添加全国省市区数据支持&#10;&#10;- 新增重庆市及其下属区县数据&#10;- 新增四川省及其下属地市数据&#10;- 新增广西壮族自治区及其下属地市数据&#10;- 新增江苏省地市数据补充&#10;- 新增山东省、河南省、湖北省、湖南省地市数据&#10;- 新增福建省、江西省、云南省、贵州省地市数据&#10;- 新增海南省、陕西省、山西省地市数据&#10;- 完善广东省地市及区县数据结构">
<change beforePath="$PROJECT_DIR$/.idea/workspace.xml" beforeDir="false" afterPath="$PROJECT_DIR$/.idea/workspace.xml" afterDir="false" /> <change beforePath="$PROJECT_DIR$/sub_pages/house/add.vue" beforeDir="false" afterPath="$PROJECT_DIR$/sub_pages/house/add.vue" afterDir="false" />
<change beforePath="$PROJECT_DIR$/uni_modules/liu-customize-sel/components/liu-customize-sel/liu-customize-sel.vue" beforeDir="false" afterPath="$PROJECT_DIR$/uni_modules/liu-customize-sel/components/liu-customize-sel/liu-customize-sel.vue" afterDir="false" /> <change beforePath="$PROJECT_DIR$/uni_modules/liu-customize-sel/components/liu-customize-sel/liu-customize-sel.vue" beforeDir="false" afterPath="$PROJECT_DIR$/uni_modules/liu-customize-sel/components/liu-customize-sel/liu-customize-sel.vue" afterDir="false" />
</list> </list>
<option name="SHOW_DIALOG" value="false" /> <option name="SHOW_DIALOG" value="false" />
@@ -75,7 +75,7 @@
<workItem from="1749367885938" duration="572000" /> <workItem from="1749367885938" duration="572000" />
<workItem from="1749371022185" duration="5619000" /> <workItem from="1749371022185" duration="5619000" />
<workItem from="1770982606471" duration="56000" /> <workItem from="1770982606471" duration="56000" />
<workItem from="1775219711691" duration="652000" /> <workItem from="1775219711691" duration="2227000" />
</task> </task>
<task id="LOCAL-00001" summary="爱尚家接口合并到cms-api.websoft.top"> <task id="LOCAL-00001" summary="爱尚家接口合并到cms-api.websoft.top">
<option name="closed" value="true" /> <option name="closed" value="true" />
@@ -117,7 +117,23 @@
<option name="project" value="LOCAL" /> <option name="project" value="LOCAL" />
<updated>1770982645978</updated> <updated>1770982645978</updated>
</task> </task>
<option name="localTasksCounter" value="6" /> <task id="LOCAL-00006" summary="feat(area-selector): 重构地区选择器数据加载逻辑&#10;&#10;- 将数据请求逻辑独立为 requestCityData 方法&#10;- 集成腾讯地图行政区域 API 获取准确地区数据&#10;- 实现地区数据格式转换适配组件需求&#10;- 添加内置精简地区数据作为降级方案&#10;- 优化异步处理和错误捕获机制&#10;- 修复子级数据为空时的显示问题">
<option name="closed" value="true" />
<created>1775221374761</created>
<option name="number" value="00006" />
<option name="presentableId" value="LOCAL-00006" />
<option name="project" value="LOCAL" />
<updated>1775221374761</updated>
</task>
<task id="LOCAL-00007" summary="feat(liu-customize-sel): 添加全国省市区数据支持&#10;&#10;- 新增重庆市及其下属区县数据&#10;- 新增四川省及其下属地市数据&#10;- 新增广西壮族自治区及其下属地市数据&#10;- 新增江苏省地市数据补充&#10;- 新增山东省、河南省、湖北省、湖南省地市数据&#10;- 新增福建省、江西省、云南省、贵州省地市数据&#10;- 新增海南省、陕西省、山西省地市数据&#10;- 完善广东省地市及区县数据结构">
<option name="closed" value="true" />
<created>1775222388851</created>
<option name="number" value="00007" />
<option name="presentableId" value="LOCAL-00007" />
<option name="project" value="LOCAL" />
<updated>1775222388851</updated>
</task>
<option name="localTasksCounter" value="8" />
<servers /> <servers />
</component> </component>
<component name="TypeScriptGeneratedFilesManager"> <component name="TypeScriptGeneratedFilesManager">
@@ -129,6 +145,8 @@
<MESSAGE value="爱尚家接口合并到cms-api.websoft.top" /> <MESSAGE value="爱尚家接口合并到cms-api.websoft.top" />
<MESSAGE value="新增：分享、下载图片、视频功能登" /> <MESSAGE value="新增：分享、下载图片、视频功能登" />
<MESSAGE value="feat(house): 添加房源卖价和总价功能并优化分享流程&#10;&#10;- 在房源添加页面添加卖价(元/平)和总价(万)输入字段&#10;- 实现卖价变动时总价自动计算功能&#10;- 在房源详情页显示卖价和总价信息&#10;- 调整物业费显示位置提升界面布局合理性&#10;- 更新服务器配置地址从gxwebsoft.com到websoft.top&#10;- 替换必看好房标签为特价好房标签统一显示&#10;- 修复房源详情页分享功能和海报生成流程&#10;- 添加跟进记录页面和相应跳转功能&#10;- 优化房源管理页面删除按钮显示逻辑&#10;- 实现闪屏页跳过功能和登录状态记忆&#10;- 添加房源海报生成组件支持分享推广&#10;- 修复分享路径参数传递和用户信息存储" /> <MESSAGE value="feat(house): 添加房源卖价和总价功能并优化分享流程&#10;&#10;- 在房源添加页面添加卖价(元/平)和总价(万)输入字段&#10;- 实现卖价变动时总价自动计算功能&#10;- 在房源详情页显示卖价和总价信息&#10;- 调整物业费显示位置提升界面布局合理性&#10;- 更新服务器配置地址从gxwebsoft.com到websoft.top&#10;- 替换必看好房标签为特价好房标签统一显示&#10;- 修复房源详情页分享功能和海报生成流程&#10;- 添加跟进记录页面和相应跳转功能&#10;- 优化房源管理页面删除按钮显示逻辑&#10;- 实现闪屏页跳过功能和登录状态记忆&#10;- 添加房源海报生成组件支持分享推广&#10;- 修复分享路径参数传递和用户信息存储" />
<option name="LAST_COMMIT_MESSAGE" value="feat(house): 添加房源卖价和总价功能并优化分享流程&#10;&#10;- 在房源添加页面添加卖价(元/平)和总价(万)输入字段&#10;- 实现卖价变动时总价自动计算功能&#10;- 在房源详情页显示卖价和总价信息&#10;- 调整物业费显示位置提升界面布局合理性&#10;- 更新服务器配置地址从gxwebsoft.com到websoft.top&#10;- 替换必看好房标签为特价好房标签统一显示&#10;- 修复房源详情页分享功能和海报生成流程&#10;- 添加跟进记录页面和相应跳转功能&#10;- 优化房源管理页面删除按钮显示逻辑&#10;- 实现闪屏页跳过功能和登录状态记忆&#10;- 添加房源海报生成组件支持分享推广&#10;- 修复分享路径参数传递和用户信息存储" /> <MESSAGE value="feat(area-selector): 重构地区选择器数据加载逻辑&#10;&#10;- 将数据请求逻辑独立为 requestCityData 方法&#10;- 集成腾讯地图行政区域 API 获取准确地区数据&#10;- 实现地区数据格式转换适配组件需求&#10;- 添加内置精简地区数据作为降级方案&#10;- 优化异步处理和错误捕获机制&#10;- 修复子级数据为空时的显示问题" />
<MESSAGE value="feat(liu-customize-sel): 添加全国省市区数据支持&#10;&#10;- 新增重庆市及其下属区县数据&#10;- 新增四川省及其下属地市数据&#10;- 新增广西壮族自治区及其下属地市数据&#10;- 新增江苏省地市数据补充&#10;- 新增山东省、河南省、湖北省、湖南省地市数据&#10;- 新增福建省、江西省、云南省、贵州省地市数据&#10;- 新增海南省、陕西省、山西省地市数据&#10;- 完善广东省地市及区县数据结构" />
<option name="LAST_COMMIT_MESSAGE" value="feat(liu-customize-sel): 添加全国省市区数据支持&#10;&#10;- 新增重庆市及其下属区县数据&#10;- 新增四川省及其下属地市数据&#10;- 新增广西壮族自治区及其下属地市数据&#10;- 新增江苏省地市数据补充&#10;- 新增山东省、河南省、湖北省、湖南省地市数据&#10;- 新增福建省、江西省、云南省、贵州省地市数据&#10;- 新增海南省、陕西省、山西省地市数据&#10;- 完善广东省地市及区县数据结构" />
</component> </component>
</project> </project>

39
sub_pages/house/add.vue
View File

@@ -254,7 +254,7 @@
<!-- 地址选择器 --> <!-- 地址选择器 -->
<liu-customize-sel ref="area" @change="chooseSuccess"></liu-customize-sel> <liu-customize-sel ref="area" :level="2" @change="chooseSuccess"></liu-customize-sel>
</block> </block>
</u--form> </u--form>
@@ -308,13 +308,16 @@
avatarUrl: '', avatarUrl: '',
// 临时图片 (用于上传) // 临时图片 (用于上传)
tempFile: null, tempFile: null,
// 表单数据 // 表单数据
form: { form: {
houseTitle: '', houseTitle: '',
area: '', province: '',
status: 10, city: '',
address: '' region: '',
}, area: '',
status: 10,
address: ''
},
fileList1: [], fileList1: [],
fileList2: [], fileList2: [],
loading: false, loading: false,
@@ -537,6 +540,9 @@
app.form.videoUrl = app.fileList2[0] ? app.fileList2[0].url : null app.form.videoUrl = app.fileList2[0] ? app.fileList2[0].url : null
app.form.monthlyRent = app.monthlyRent app.form.monthlyRent = app.monthlyRent
const saveOrUpdate = app.selectId > 0 ? updateHouseInfo : addHouseInfo; const saveOrUpdate = app.selectId > 0 ? updateHouseInfo : addHouseInfo;
// 调试：打印提交的数据
console.log('提交表单数据:', JSON.stringify(app.form, null, 2));
console.log('province:', app.form.province, 'city:', app.form.city, 'area:', app.form.area);
saveOrUpdate(app.form).then(result => { saveOrUpdate(app.form).then(result => {
app.$toast('保存成功') app.$toast('保存成功')
setTimeout(() => { setTimeout(() => {
@@ -647,12 +653,23 @@
}, },
//地址选择成功 //地址选择成功
chooseSuccess(e) { chooseSuccess(e) {
console.log('chooseSuccess 收到数据:', JSON.stringify(e));
const data = e.value const data = e.value
if (!data || data.length < 2) {
console.error('地区数据不完整:', data);
return;
}
this.form.province = data[0].label this.form.province = data[0].label
this.form.city = data[1].label this.form.city = data[1].label
this.form.region = data[2].label // 根据选择层级保存数据
this.form.area = `${data[0].label} ${data[1].label} ${data[2].label}` if (data.length >= 3 && data[2]) {
console.log("this.form.area: ", this.form.area); this.form.region = data[2].label
this.form.area = `${data[0].label} ${data[1].label} ${data[2].label}`
} else {
this.form.region = ''
this.form.area = `${data[0].label} ${data[1].label}`
}
console.log('地区选择完成 - province:', this.form.province, 'city:', this.form.city, 'area:', this.form.area);
}, },
changeHandler(e) { changeHandler(e) {
console.log("e: ", e); console.log("e: ", e);

67
uni_modules/liu-customize-sel/components/liu-customize-sel/liu-customize-sel.vue
View File

@@ -8,7 +8,7 @@
<view :class="confirmClass" @click="getResult('confirm')">确定</view> <view :class="confirmClass" @click="getResult('confirm')">确定</view>
</view> </view>
<view class="sel-title"> <view class="sel-title">
<view class="sel-title-item" v-for="(i, e) in tabList" :key="e" @click="checkTab(e)"> <view class="sel-title-item" v-for="(i, e) in tabList" :key="e" @click="checkTab(e)" v-if="e < level">
<view v-if="tabId >= e" :id="'se-' + e" <view v-if="tabId >= e" :id="'se-' + e"
:class="tabId == e ? ' sel-title-item-true' : 'sel-title-item-false'"> :class="tabId == e ? ' sel-title-item-true' : 'sel-title-item-false'">
{{ checkArr[e] ? checkArr[e].label : i.title }} {{ checkArr[e] ? checkArr[e].label : i.title }}
@@ -41,6 +41,11 @@
import noData from '../../static/noData.png' import noData from '../../static/noData.png'
export default { export default {
props: { props: {
//选择层级：2=省市，3=省市县区（默认）
level: {
type: Number,
default: 3,
},
//是否开启动画 //是否开启动画
animation: { animation: {
type: Boolean, type: Boolean,
@@ -59,8 +64,18 @@
}, },
computed: { computed: {
confirmClass() { confirmClass() {
return this.checkArr.length == this.tabList.length ? 'sel-top-right-check' : 'sel-top-right'; return this.checkArr.length >= this.level ? 'sel-top-right-check' : 'sel-top-right';
}, },
tabListComputed() {
const list = [
{ title: '选择所在省', id: 0 },
{ title: '选择所在市', id: 1 }
];
if (this.level >= 3) {
list.push({ title: '选择所在区', id: 2 });
}
return list;
}
}, },
data() { data() {
return { return {
@@ -71,18 +86,10 @@
tabId: 0, //计算当前顶部滑块id tabId: 0, //计算当前顶部滑块id
checkArr: [], checkArr: [],
id: 0, //通tabId，他们2的区别是，id先赋值，tabId在数据请求成功后才会赋值 id: 0, //通tabId，他们2的区别是，id先赋值，tabId在数据请求成功后才会赋值
tabList: [{ tabList: [
title: '选择所在省', { title: '选择所在省', id: 0 },
id: 0, { title: '选择所在市', id: 1 },
}, { title: '选择所在区', id: 2 }
{
title: '选择所在市',
id: 1,
},
{
title: '选择所在县',
id: 2,
}
], ],
}; };
}, },
@@ -106,8 +113,11 @@
this.isShow = false; this.isShow = false;
}, },
async check(index) { async check(index) {
console.log('check called - id:', this.id, 'level:', this.level, 'tabList.length:', this.tabList.length);
this.$set(this.checkArr, this.id, this.checkBox[this.id][index]); this.$set(this.checkArr, this.id, this.checkBox[this.id][index]);
console.log('after set checkArr:', JSON.stringify(this.checkArr));
if (this.id < this.tabList.length - 1) this.id = this.id + 1; if (this.id < this.tabList.length - 1) this.id = this.id + 1;
console.log('next id:', this.id);
await this.getData(); //同步请求 await this.getData(); //同步请求
if (this.tabId < this.tabList.length - 1) this.tabId = this.tabId + 1; if (this.tabId < this.tabList.length - 1) this.tabId = this.tabId + 1;
}, },
@@ -119,20 +129,29 @@
this.checkArr = this.checkArr.splice(0, e); this.checkArr = this.checkArr.splice(0, e);
}, },
getResult(event) { getResult(event) {
if (event == 'confirm') { if (event == 'confirm') {
if (this.checkArr.length != this.tabList.length) return; // 检查是否选择了所有必要的级别
let result = this.checkArr; console.log('getResult confirm:', {
this.$emit('change', { checkArrLength: this.checkArr.length,
value: result level: this.level,
}); checkArr: this.checkArr
});
if (this.checkArr.length < this.level) {
console.warn('选择不完整，无法确认');
return;
} }
this.close(); let result = this.checkArr;
}, this.$emit('change', {
value: result
});
}
this.close();
},
async getData() { async getData() {
// 加载数据 // 加载数据
if (this.checkArr.length == this.tabList.length) return; if (this.checkArr.length >= this.level) return;
uni.showLoading({ title: '加载中...' }); uni.showLoading({ title: '加载中...' });