业务代理商-三级区域选择
This commit is contained in:
WindowBird
parent
74194dbd51
commit
e23be989d7
|
|
@ -121,7 +121,8 @@
|
|||
"easycom": {
|
||||
"autoscan": true,
|
||||
"custom": {
|
||||
"^custom-nav-bar": "@/components/custom-nav-bar/custom-nav-bar.vue"
|
||||
"^custom-nav-bar": "@/components/custom-nav-bar/custom-nav-bar.vue",
|
||||
"^uni-(.*)": "@/uni_modules/uni-$1/components/uni-$1/uni-$1.vue"
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -44,12 +44,61 @@
|
|||
/>
|
||||
</view>
|
||||
|
||||
<!-- 服务区域选择 -->
|
||||
<!-- 服务区域选择 - 三级选择 -->
|
||||
<view class="form-item">
|
||||
<view class="form-label">请选择您的服务区域</view>
|
||||
<view class="form-selector" @click="selectServiceArea">
|
||||
<text class="selector-text">{{ formData.serviceArea || '请选择服务区域' }}</text>
|
||||
<text class="arrow-icon">></text>
|
||||
|
||||
<!-- 省份选择 -->
|
||||
<view class="region-picker-item">
|
||||
<view class="picker-label">省份</view>
|
||||
<picker
|
||||
:range="provinceList"
|
||||
range-key="name"
|
||||
@change="onProvinceChange"
|
||||
:value="selectedProvinceIndex"
|
||||
>
|
||||
<view class="picker-display">
|
||||
<text class="picker-text">{{ selectedProvince ? selectedProvince.name : '请选择省份' }}</text>
|
||||
<text class="picker-arrow">▼</text>
|
||||
</view>
|
||||
</picker>
|
||||
</view>
|
||||
|
||||
<!-- 城市选择 -->
|
||||
<view class="region-picker-item" v-if="selectedProvince">
|
||||
<view class="picker-label">城市</view>
|
||||
<picker
|
||||
:range="cityList"
|
||||
range-key="name"
|
||||
@change="onCityChange"
|
||||
:value="selectedCityIndex"
|
||||
>
|
||||
<view class="picker-display">
|
||||
<text class="picker-text">{{ selectedCity ? selectedCity.name : '请选择城市' }}</text>
|
||||
<text class="picker-arrow">▼</text>
|
||||
</view>
|
||||
</picker>
|
||||
</view>
|
||||
|
||||
<!-- 区县选择 -->
|
||||
<view class="region-picker-item" v-if="selectedCity">
|
||||
<view class="picker-label">区县</view>
|
||||
<picker
|
||||
:range="districtList"
|
||||
range-key="name"
|
||||
@change="onDistrictChange"
|
||||
:value="selectedDistrictIndex"
|
||||
>
|
||||
<view class="picker-display">
|
||||
<text class="picker-text">{{ selectedDistrict ? selectedDistrict.name : '请选择区县' }}</text>
|
||||
<text class="picker-arrow">▼</text>
|
||||
</view>
|
||||
</picker>
|
||||
</view>
|
||||
|
||||
<!-- 显示完整地址 -->
|
||||
<view class="selected-address" v-if="selectedDistrict">
|
||||
<text class="address-text">已选择: {{ selectedProvince.name }} {{ selectedCity.name }} {{ selectedDistrict.name }}</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
|
|
@ -107,9 +156,13 @@
|
|||
<script>
|
||||
import commonEnum from '../../enum/commonEnum'
|
||||
import { applyForAgent, getAgentAgreement, getServiceAreas } from '@/api/agents'
|
||||
import uniDataPicker from '@/uni_modules/uni-data-picker/components/uni-data-picker/uni-data-picker.vue'
|
||||
|
||||
export default {
|
||||
name: 'AgentsPage',
|
||||
components: {
|
||||
uniDataPicker
|
||||
},
|
||||
computed: {
|
||||
commonEnum() {
|
||||
return commonEnum
|
||||
|
|
@ -119,7 +172,7 @@ export default {
|
|||
this.formData.name &&
|
||||
this.formData.phone &&
|
||||
this.formData.idCard &&
|
||||
this.formData.serviceArea &&
|
||||
this.selectedDistrict && // 必须选择到区县级别
|
||||
this.formData.detailAddress &&
|
||||
this.formData.agreed &&
|
||||
!this.submitting
|
||||
|
|
@ -130,6 +183,10 @@ export default {
|
|||
// 页面加载时获取服务区域列表和协议内容
|
||||
this.loadServiceAreas()
|
||||
this.loadAgreement()
|
||||
this.loadRegionTreeData()
|
||||
|
||||
// 添加测试数据
|
||||
console.log('页面加载完成，三级选择器已初始化')
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
|
|
@ -137,7 +194,7 @@ export default {
|
|||
name: '张珊珊',
|
||||
phone: '',
|
||||
idCard: '',
|
||||
serviceArea: '福建省宁德市福鼎市',
|
||||
serviceArea: '',
|
||||
detailAddress: '太姥山镇秦屿大道2号',
|
||||
agreed: true,
|
||||
},
|
||||
|
|
@ -147,6 +204,20 @@ export default {
|
|||
showAgreementModal: false,
|
||||
// 区域ID映射
|
||||
areaIdMap: {},
|
||||
// 三级选择相关数据
|
||||
regionTreeData: [],
|
||||
// 省份相关
|
||||
provinceList: [],
|
||||
selectedProvince: null,
|
||||
selectedProvinceIndex: -1,
|
||||
// 城市相关
|
||||
cityList: [],
|
||||
selectedCity: null,
|
||||
selectedCityIndex: -1,
|
||||
// 区县相关
|
||||
districtList: [],
|
||||
selectedDistrict: null,
|
||||
selectedDistrictIndex: -1,
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
|
|
@ -213,24 +284,6 @@ export default {
|
|||
}
|
||||
},
|
||||
|
||||
// 选择服务区域
|
||||
selectServiceArea() {
|
||||
if (this.serviceAreas.length === 0) {
|
||||
uni.showToast({
|
||||
title: '暂无可用区域',
|
||||
icon: 'none',
|
||||
})
|
||||
return
|
||||
}
|
||||
|
||||
uni.showActionSheet({
|
||||
itemList: this.serviceAreas,
|
||||
success: res => {
|
||||
this.formData.serviceArea = this.serviceAreas[res.tapIndex]
|
||||
},
|
||||
})
|
||||
},
|
||||
|
||||
// 切换协议同意状态
|
||||
toggleAgreement() {
|
||||
this.formData.agreed = !this.formData.agreed
|
||||
|
|
@ -329,10 +382,10 @@ export default {
|
|||
|
||||
try {
|
||||
// 构建请求数据
|
||||
const regionId = this.areaIdMap[this.formData.serviceArea]
|
||||
const regionId = this.getSelectedRegionId()
|
||||
if (!regionId) {
|
||||
uni.showToast({
|
||||
title: '无效的服务区域，请重新选择',
|
||||
title: '请选择服务区域',
|
||||
icon: 'none',
|
||||
})
|
||||
return
|
||||
|
|
@ -347,7 +400,13 @@ export default {
|
|||
}
|
||||
|
||||
console.log('提交代理商申请:', requestData)
|
||||
console.log('选择的区域:', this.formData.serviceArea, '对应ID:', regionId)
|
||||
console.log('三级选择信息:', {
|
||||
省份: this.selectedProvince?.name,
|
||||
城市: this.selectedCity?.name,
|
||||
区县: this.selectedDistrict?.name,
|
||||
完整地址: this.formData.serviceArea,
|
||||
区域ID: regionId
|
||||
})
|
||||
|
||||
const response = await applyForAgent(requestData)
|
||||
|
||||
|
|
@ -389,6 +448,147 @@ export default {
|
|||
detailAddress: '',
|
||||
agreed: false,
|
||||
}
|
||||
// 重置三级选择
|
||||
this.selectedProvince = null
|
||||
this.selectedProvinceIndex = -1
|
||||
this.selectedCity = null
|
||||
this.selectedCityIndex = -1
|
||||
this.selectedDistrict = null
|
||||
this.selectedDistrictIndex = -1
|
||||
this.cityList = []
|
||||
this.districtList = []
|
||||
},
|
||||
|
||||
// 三级选择相关方法
|
||||
async loadRegionTreeData() {
|
||||
try {
|
||||
const response = await getServiceAreas()
|
||||
if (response.code === 200 && response.data) {
|
||||
this.regionTreeData = response.data
|
||||
console.log('获取到的区域树形数据:', this.regionTreeData)
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('获取区域树形数据失败:', error)
|
||||
// 使用默认的树形数据
|
||||
this.regionTreeData = [
|
||||
{
|
||||
id: 1,
|
||||
name: '福建省',
|
||||
children: [
|
||||
{
|
||||
id: 2,
|
||||
name: '宁德市',
|
||||
children: [
|
||||
{ id: 8, name: '福鼎市' },
|
||||
{ id: 9, name: '霞浦县' },
|
||||
{ id: 10, name: '古田县' },
|
||||
{ id: 11, name: '屏南县' }
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
// 初始化三级选择数据
|
||||
this.initThreeLevelData()
|
||||
},
|
||||
|
||||
// 初始化三级选择数据
|
||||
initThreeLevelData() {
|
||||
// 初始化省份列表
|
||||
this.provinceList = this.regionTreeData
|
||||
|
||||
// 初始化 areaIdMap
|
||||
this.initAreaIdMap()
|
||||
},
|
||||
|
||||
// 初始化区域ID映射
|
||||
initAreaIdMap() {
|
||||
const idMap = {}
|
||||
const extractIds = (regions) => {
|
||||
regions.forEach(region => {
|
||||
idMap[region.name] = region.id
|
||||
if (region.children && region.children.length > 0) {
|
||||
extractIds(region.children)
|
||||
}
|
||||
})
|
||||
}
|
||||
extractIds(this.regionTreeData)
|
||||
this.areaIdMap = idMap
|
||||
console.log('区域ID映射:', this.areaIdMap)
|
||||
},
|
||||
|
||||
// 省份选择事件
|
||||
onProvinceChange(e) {
|
||||
const index = e.detail.value
|
||||
this.selectedProvinceIndex = index
|
||||
this.selectedProvince = this.provinceList[index]
|
||||
|
||||
// 重置城市和区县选择
|
||||
this.selectedCity = null
|
||||
this.selectedCityIndex = -1
|
||||
this.selectedDistrict = null
|
||||
this.selectedDistrictIndex = -1
|
||||
|
||||
// 更新城市列表
|
||||
this.cityList = this.selectedProvince.children || []
|
||||
this.districtList = []
|
||||
|
||||
// 更新服务区域
|
||||
this.updateServiceArea()
|
||||
},
|
||||
|
||||
// 城市选择事件
|
||||
onCityChange(e) {
|
||||
const index = e.detail.value
|
||||
this.selectedCityIndex = index
|
||||
this.selectedCity = this.cityList[index]
|
||||
|
||||
// 重置区县选择
|
||||
this.selectedDistrict = null
|
||||
this.selectedDistrictIndex = -1
|
||||
|
||||
// 更新区县列表
|
||||
this.districtList = this.selectedCity.children || []
|
||||
|
||||
// 更新服务区域
|
||||
this.updateServiceArea()
|
||||
},
|
||||
|
||||
// 区县选择事件
|
||||
onDistrictChange(e) {
|
||||
const index = e.detail.value
|
||||
this.selectedDistrictIndex = index
|
||||
this.selectedDistrict = this.districtList[index]
|
||||
|
||||
// 更新服务区域
|
||||
this.updateServiceArea()
|
||||
},
|
||||
|
||||
// 更新服务区域
|
||||
updateServiceArea() {
|
||||
if (this.selectedProvince && this.selectedCity && this.selectedDistrict) {
|
||||
this.formData.serviceArea = `${this.selectedProvince.name}${this.selectedCity.name}${this.selectedDistrict.name}`
|
||||
} else if (this.selectedProvince && this.selectedCity) {
|
||||
this.formData.serviceArea = `${this.selectedProvince.name}${this.selectedCity.name}`
|
||||
} else if (this.selectedProvince) {
|
||||
this.formData.serviceArea = this.selectedProvince.name
|
||||
} else {
|
||||
this.formData.serviceArea = ''
|
||||
}
|
||||
},
|
||||
|
||||
// 获取选中区域的ID
|
||||
getSelectedRegionId() {
|
||||
if (this.selectedDistrict) {
|
||||
return this.selectedDistrict.id
|
||||
} else if (this.selectedCity) {
|
||||
return this.selectedCity.id
|
||||
} else if (this.selectedProvince) {
|
||||
return this.selectedProvince.id
|
||||
}
|
||||
return null
|
||||
},
|
||||
},
|
||||
}
|
||||
|
|
@ -635,4 +835,72 @@ export default {
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
.debug-info {
|
||||
background: #f0f0f0;
|
||||
padding: 10rpx;
|
||||
margin-bottom: 10rpx;
|
||||
border-radius: 8rpx;
|
||||
font-size: 24rpx;
|
||||
color: #666;
|
||||
|
||||
text {
|
||||
display: block;
|
||||
margin-bottom: 5rpx;
|
||||
}
|
||||
}
|
||||
|
||||
// 三级选择器样式
|
||||
.region-picker-item {
|
||||
margin-bottom: 20rpx;
|
||||
|
||||
.picker-label {
|
||||
font-size: 26rpx;
|
||||
color: #666;
|
||||
margin-bottom: 10rpx;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.picker-display {
|
||||
height: 80rpx;
|
||||
background: #ffffff;
|
||||
border: 2rpx solid #e8e8e8;
|
||||
border-radius: 12rpx;
|
||||
padding: 0 24rpx;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
cursor: pointer;
|
||||
|
||||
&:active {
|
||||
background: #f5f5f5;
|
||||
}
|
||||
|
||||
.picker-text {
|
||||
font-size: 28rpx;
|
||||
color: #333;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.picker-arrow {
|
||||
font-size: 24rpx;
|
||||
color: #999;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.selected-address {
|
||||
margin-top: 20rpx;
|
||||
padding: 20rpx;
|
||||
background: #f8f9fa;
|
||||
border-radius: 12rpx;
|
||||
border: 2rpx solid #e9ecef;
|
||||
|
||||
.address-text {
|
||||
font-size: 28rpx;
|
||||
color: #495057;
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user