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