业务代理商-三级区域选择-data-picker多余组件清理
This commit is contained in:
parent
e23be989d7
commit
95a9d76b4a
|
|
@ -47,58 +47,67 @@
|
||||||
<!-- 服务区域选择 - 三级选择 -->
|
<!-- 服务区域选择 - 三级选择 -->
|
||||||
<view class="form-item">
|
<view class="form-item">
|
||||||
<view class="form-label">请选择您的服务区域</view>
|
<view class="form-label">请选择您的服务区域</view>
|
||||||
|
|
||||||
<!-- 省份选择 -->
|
<!-- 省份选择 -->
|
||||||
<view class="region-picker-item">
|
<view class="region-picker-item">
|
||||||
<view class="picker-label">省份</view>
|
<view class="picker-label">省份</view>
|
||||||
<picker
|
<picker
|
||||||
:range="provinceList"
|
:range="provinceList"
|
||||||
|
:value="selectedProvinceIndex"
|
||||||
range-key="name"
|
range-key="name"
|
||||||
@change="onProvinceChange"
|
@change="onProvinceChange"
|
||||||
:value="selectedProvinceIndex"
|
|
||||||
>
|
>
|
||||||
<view class="picker-display">
|
<view class="picker-display">
|
||||||
<text class="picker-text">{{ selectedProvince ? selectedProvince.name : '请选择省份' }}</text>
|
<text class="picker-text">{{
|
||||||
|
selectedProvince ? selectedProvince.name : '请选择省份'
|
||||||
|
}}</text>
|
||||||
<text class="picker-arrow">▼</text>
|
<text class="picker-arrow">▼</text>
|
||||||
</view>
|
</view>
|
||||||
</picker>
|
</picker>
|
||||||
</view>
|
</view>
|
||||||
|
|
||||||
<!-- 城市选择 -->
|
<!-- 城市选择 -->
|
||||||
<view class="region-picker-item" v-if="selectedProvince">
|
<view v-if="selectedProvince" class="region-picker-item">
|
||||||
<view class="picker-label">城市</view>
|
<view class="picker-label">城市</view>
|
||||||
<picker
|
<picker
|
||||||
:range="cityList"
|
:range="cityList"
|
||||||
|
:value="selectedCityIndex"
|
||||||
range-key="name"
|
range-key="name"
|
||||||
@change="onCityChange"
|
@change="onCityChange"
|
||||||
:value="selectedCityIndex"
|
|
||||||
>
|
>
|
||||||
<view class="picker-display">
|
<view class="picker-display">
|
||||||
<text class="picker-text">{{ selectedCity ? selectedCity.name : '请选择城市' }}</text>
|
<text class="picker-text">{{
|
||||||
|
selectedCity ? selectedCity.name : '请选择城市'
|
||||||
|
}}</text>
|
||||||
<text class="picker-arrow">▼</text>
|
<text class="picker-arrow">▼</text>
|
||||||
</view>
|
</view>
|
||||||
</picker>
|
</picker>
|
||||||
</view>
|
</view>
|
||||||
|
|
||||||
<!-- 区县选择 -->
|
<!-- 区县选择 -->
|
||||||
<view class="region-picker-item" v-if="selectedCity">
|
<view v-if="selectedCity" class="region-picker-item">
|
||||||
<view class="picker-label">区县</view>
|
<view class="picker-label">区县</view>
|
||||||
<picker
|
<picker
|
||||||
:range="districtList"
|
:range="districtList"
|
||||||
|
:value="selectedDistrictIndex"
|
||||||
range-key="name"
|
range-key="name"
|
||||||
@change="onDistrictChange"
|
@change="onDistrictChange"
|
||||||
:value="selectedDistrictIndex"
|
|
||||||
>
|
>
|
||||||
<view class="picker-display">
|
<view class="picker-display">
|
||||||
<text class="picker-text">{{ selectedDistrict ? selectedDistrict.name : '请选择区县' }}</text>
|
<text class="picker-text">{{
|
||||||
|
selectedDistrict ? selectedDistrict.name : '请选择区县'
|
||||||
|
}}</text>
|
||||||
<text class="picker-arrow">▼</text>
|
<text class="picker-arrow">▼</text>
|
||||||
</view>
|
</view>
|
||||||
</picker>
|
</picker>
|
||||||
</view>
|
</view>
|
||||||
|
|
||||||
<!-- 显示完整地址 -->
|
<!-- 显示完整地址 -->
|
||||||
<view class="selected-address" v-if="selectedDistrict">
|
<view v-if="selectedDistrict" class="selected-address">
|
||||||
<text class="address-text">已选择: {{ selectedProvince.name }} {{ selectedCity.name }} {{ selectedDistrict.name }}</text>
|
<text class="address-text"
|
||||||
|
>已选择: {{ selectedProvince.name }} {{ selectedCity.name }}
|
||||||
|
{{ selectedDistrict.name }}
|
||||||
|
</text>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
|
|
||||||
|
|
@ -128,7 +137,11 @@
|
||||||
|
|
||||||
<!-- 提交按钮 -->
|
<!-- 提交按钮 -->
|
||||||
<view class="submit-section">
|
<view class="submit-section">
|
||||||
<button :disabled="!canSubmit || submitting" class="submit-btn" @click="submitApplication">
|
<button
|
||||||
|
:disabled="!canSubmit || submitting"
|
||||||
|
class="submit-btn"
|
||||||
|
@click="submitApplication"
|
||||||
|
>
|
||||||
{{ submitting ? '提交中...' : '申请成为代理商' }}
|
{{ submitting ? '提交中...' : '申请成为代理商' }}
|
||||||
</button>
|
</button>
|
||||||
</view>
|
</view>
|
||||||
|
|
@ -156,13 +169,10 @@
|
||||||
<script>
|
<script>
|
||||||
import commonEnum from '../../enum/commonEnum'
|
import commonEnum from '../../enum/commonEnum'
|
||||||
import { applyForAgent, getAgentAgreement, getServiceAreas } from '@/api/agents'
|
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 {
|
export default {
|
||||||
name: 'AgentsPage',
|
name: 'AgentsPage',
|
||||||
components: {
|
components: {},
|
||||||
uniDataPicker
|
|
||||||
},
|
|
||||||
computed: {
|
computed: {
|
||||||
commonEnum() {
|
commonEnum() {
|
||||||
return commonEnum
|
return commonEnum
|
||||||
|
|
@ -184,7 +194,7 @@ export default {
|
||||||
this.loadServiceAreas()
|
this.loadServiceAreas()
|
||||||
this.loadAgreement()
|
this.loadAgreement()
|
||||||
this.loadRegionTreeData()
|
this.loadRegionTreeData()
|
||||||
|
|
||||||
// 添加测试数据
|
// 添加测试数据
|
||||||
console.log('页面加载完成,三级选择器已初始化')
|
console.log('页面加载完成,三级选择器已初始化')
|
||||||
},
|
},
|
||||||
|
|
@ -244,10 +254,10 @@ export default {
|
||||||
]
|
]
|
||||||
// 默认区域ID映射
|
// 默认区域ID映射
|
||||||
this.areaIdMap = {
|
this.areaIdMap = {
|
||||||
'福建省宁德市福鼎市': 8,
|
福建省宁德市福鼎市: 8,
|
||||||
'福建省宁德市霞浦县': 9,
|
福建省宁德市霞浦县: 9,
|
||||||
'福建省宁德市古田县': 10,
|
福建省宁德市古田县: 10,
|
||||||
'福建省宁德市屏南县': 11,
|
福建省宁德市屏南县: 11,
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
@ -256,8 +266,8 @@ export default {
|
||||||
extractRegionData(regions) {
|
extractRegionData(regions) {
|
||||||
const names = []
|
const names = []
|
||||||
const idMap = {}
|
const idMap = {}
|
||||||
|
|
||||||
const extractData = (regionList) => {
|
const extractData = regionList => {
|
||||||
regionList.forEach(region => {
|
regionList.forEach(region => {
|
||||||
names.push(region.name)
|
names.push(region.name)
|
||||||
idMap[region.name] = region.id
|
idMap[region.name] = region.id
|
||||||
|
|
@ -266,7 +276,7 @@ export default {
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
extractData(regions)
|
extractData(regions)
|
||||||
return { names, idMap }
|
return { names, idMap }
|
||||||
},
|
},
|
||||||
|
|
@ -405,7 +415,7 @@ export default {
|
||||||
城市: this.selectedCity?.name,
|
城市: this.selectedCity?.name,
|
||||||
区县: this.selectedDistrict?.name,
|
区县: this.selectedDistrict?.name,
|
||||||
完整地址: this.formData.serviceArea,
|
完整地址: this.formData.serviceArea,
|
||||||
区域ID: regionId
|
区域ID: regionId,
|
||||||
})
|
})
|
||||||
|
|
||||||
const response = await applyForAgent(requestData)
|
const response = await applyForAgent(requestData)
|
||||||
|
|
@ -482,14 +492,14 @@ export default {
|
||||||
{ id: 8, name: '福鼎市' },
|
{ id: 8, name: '福鼎市' },
|
||||||
{ id: 9, name: '霞浦县' },
|
{ id: 9, name: '霞浦县' },
|
||||||
{ id: 10, name: '古田县' },
|
{ id: 10, name: '古田县' },
|
||||||
{ id: 11, name: '屏南县' }
|
{ id: 11, name: '屏南县' },
|
||||||
]
|
],
|
||||||
}
|
},
|
||||||
]
|
],
|
||||||
}
|
},
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
|
|
||||||
// 初始化三级选择数据
|
// 初始化三级选择数据
|
||||||
this.initThreeLevelData()
|
this.initThreeLevelData()
|
||||||
},
|
},
|
||||||
|
|
@ -498,7 +508,7 @@ export default {
|
||||||
initThreeLevelData() {
|
initThreeLevelData() {
|
||||||
// 初始化省份列表
|
// 初始化省份列表
|
||||||
this.provinceList = this.regionTreeData
|
this.provinceList = this.regionTreeData
|
||||||
|
|
||||||
// 初始化 areaIdMap
|
// 初始化 areaIdMap
|
||||||
this.initAreaIdMap()
|
this.initAreaIdMap()
|
||||||
},
|
},
|
||||||
|
|
@ -506,7 +516,7 @@ export default {
|
||||||
// 初始化区域ID映射
|
// 初始化区域ID映射
|
||||||
initAreaIdMap() {
|
initAreaIdMap() {
|
||||||
const idMap = {}
|
const idMap = {}
|
||||||
const extractIds = (regions) => {
|
const extractIds = regions => {
|
||||||
regions.forEach(region => {
|
regions.forEach(region => {
|
||||||
idMap[region.name] = region.id
|
idMap[region.name] = region.id
|
||||||
if (region.children && region.children.length > 0) {
|
if (region.children && region.children.length > 0) {
|
||||||
|
|
@ -524,17 +534,17 @@ export default {
|
||||||
const index = e.detail.value
|
const index = e.detail.value
|
||||||
this.selectedProvinceIndex = index
|
this.selectedProvinceIndex = index
|
||||||
this.selectedProvince = this.provinceList[index]
|
this.selectedProvince = this.provinceList[index]
|
||||||
|
|
||||||
// 重置城市和区县选择
|
// 重置城市和区县选择
|
||||||
this.selectedCity = null
|
this.selectedCity = null
|
||||||
this.selectedCityIndex = -1
|
this.selectedCityIndex = -1
|
||||||
this.selectedDistrict = null
|
this.selectedDistrict = null
|
||||||
this.selectedDistrictIndex = -1
|
this.selectedDistrictIndex = -1
|
||||||
|
|
||||||
// 更新城市列表
|
// 更新城市列表
|
||||||
this.cityList = this.selectedProvince.children || []
|
this.cityList = this.selectedProvince.children || []
|
||||||
this.districtList = []
|
this.districtList = []
|
||||||
|
|
||||||
// 更新服务区域
|
// 更新服务区域
|
||||||
this.updateServiceArea()
|
this.updateServiceArea()
|
||||||
},
|
},
|
||||||
|
|
@ -544,14 +554,14 @@ export default {
|
||||||
const index = e.detail.value
|
const index = e.detail.value
|
||||||
this.selectedCityIndex = index
|
this.selectedCityIndex = index
|
||||||
this.selectedCity = this.cityList[index]
|
this.selectedCity = this.cityList[index]
|
||||||
|
|
||||||
// 重置区县选择
|
// 重置区县选择
|
||||||
this.selectedDistrict = null
|
this.selectedDistrict = null
|
||||||
this.selectedDistrictIndex = -1
|
this.selectedDistrictIndex = -1
|
||||||
|
|
||||||
// 更新区县列表
|
// 更新区县列表
|
||||||
this.districtList = this.selectedCity.children || []
|
this.districtList = this.selectedCity.children || []
|
||||||
|
|
||||||
// 更新服务区域
|
// 更新服务区域
|
||||||
this.updateServiceArea()
|
this.updateServiceArea()
|
||||||
},
|
},
|
||||||
|
|
@ -561,7 +571,7 @@ export default {
|
||||||
const index = e.detail.value
|
const index = e.detail.value
|
||||||
this.selectedDistrictIndex = index
|
this.selectedDistrictIndex = index
|
||||||
this.selectedDistrict = this.districtList[index]
|
this.selectedDistrict = this.districtList[index]
|
||||||
|
|
||||||
// 更新服务区域
|
// 更新服务区域
|
||||||
this.updateServiceArea()
|
this.updateServiceArea()
|
||||||
},
|
},
|
||||||
|
|
@ -806,7 +816,7 @@ export default {
|
||||||
|
|
||||||
.agreement-modal-content {
|
.agreement-modal-content {
|
||||||
flex: 1;
|
flex: 1;
|
||||||
padding:50rpx;
|
padding: 50rpx;
|
||||||
max-width: 500rpx;
|
max-width: 500rpx;
|
||||||
max-height: 600rpx;
|
max-height: 600rpx;
|
||||||
overflow-y: auto;
|
overflow-y: auto;
|
||||||
|
|
@ -843,7 +853,7 @@ export default {
|
||||||
border-radius: 8rpx;
|
border-radius: 8rpx;
|
||||||
font-size: 24rpx;
|
font-size: 24rpx;
|
||||||
color: #666;
|
color: #666;
|
||||||
|
|
||||||
text {
|
text {
|
||||||
display: block;
|
display: block;
|
||||||
margin-bottom: 5rpx;
|
margin-bottom: 5rpx;
|
||||||
|
|
@ -853,14 +863,14 @@ export default {
|
||||||
// 三级选择器样式
|
// 三级选择器样式
|
||||||
.region-picker-item {
|
.region-picker-item {
|
||||||
margin-bottom: 20rpx;
|
margin-bottom: 20rpx;
|
||||||
|
|
||||||
.picker-label {
|
.picker-label {
|
||||||
font-size: 26rpx;
|
font-size: 26rpx;
|
||||||
color: #666;
|
color: #666;
|
||||||
margin-bottom: 10rpx;
|
margin-bottom: 10rpx;
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
}
|
}
|
||||||
|
|
||||||
.picker-display {
|
.picker-display {
|
||||||
height: 80rpx;
|
height: 80rpx;
|
||||||
background: #ffffff;
|
background: #ffffff;
|
||||||
|
|
@ -872,17 +882,17 @@ export default {
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
|
|
||||||
&:active {
|
&:active {
|
||||||
background: #f5f5f5;
|
background: #f5f5f5;
|
||||||
}
|
}
|
||||||
|
|
||||||
.picker-text {
|
.picker-text {
|
||||||
font-size: 28rpx;
|
font-size: 28rpx;
|
||||||
color: #333;
|
color: #333;
|
||||||
flex: 1;
|
flex: 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
.picker-arrow {
|
.picker-arrow {
|
||||||
font-size: 24rpx;
|
font-size: 24rpx;
|
||||||
color: #999;
|
color: #999;
|
||||||
|
|
@ -896,7 +906,7 @@ export default {
|
||||||
background: #f8f9fa;
|
background: #f8f9fa;
|
||||||
border-radius: 12rpx;
|
border-radius: 12rpx;
|
||||||
border: 2rpx solid #e9ecef;
|
border: 2rpx solid #e9ecef;
|
||||||
|
|
||||||
.address-text {
|
.address-text {
|
||||||
font-size: 28rpx;
|
font-size: 28rpx;
|
||||||
color: #495057;
|
color: #495057;
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue
Block a user