导入uv-ui,优化申请代理地址三级选择器，优化申请代理界面布局
This commit is contained in:
WindowBird
parent
286cbefdee
commit
4c6bff9127
7
package-lock.json
generated
7
package-lock.json
generated
|
|
@ -9,6 +9,7 @@
|
|||
"version": "1.0.0",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@climblee/uv-ui": "^1.1.20",
|
||||
"@dcloudio/uni-app": "3.0.0-4070520250711001",
|
||||
"qrcode": "^1.5.4",
|
||||
"uview-ui": "^1.8.8",
|
||||
|
|
@ -281,6 +282,12 @@
|
|||
"node": ">=6.9.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@climblee/uv-ui": {
|
||||
"version": "1.1.20",
|
||||
"resolved": "https://registry.npmjs.org/@climblee/uv-ui/-/uv-ui-1.1.20.tgz",
|
||||
"integrity": "sha512-jkyesHJsPJkF4Nap9ZmG1/ibKlxXA5M8+ntqKXwwloIsYSYL5SOKb0gyPj17aBOU1PkJpmeiZ8PwnTolhK2/HA==",
|
||||
"license": "ISC"
|
||||
},
|
||||
"node_modules/@dcloudio/types": {
|
||||
"version": "3.4.19",
|
||||
"resolved": "https://registry.npmjs.org/@dcloudio/types/-/types-3.4.19.tgz",
|
||||
|
|
|
|||
|
|
@ -24,6 +24,7 @@
|
|||
"prettier": "^3.0.0"
|
||||
},
|
||||
"dependencies": {
|
||||
"@climblee/uv-ui": "^1.1.20",
|
||||
"@dcloudio/uni-app": "3.0.0-4070520250711001",
|
||||
"qrcode": "^1.5.4",
|
||||
"uview-ui": "^1.8.8",
|
||||
|
|
|
|||
|
|
@ -180,7 +180,8 @@
|
|||
"autoscan": true,
|
||||
"custom": {
|
||||
"^custom-nav-bar": "@/components/custom-nav-bar/custom-nav-bar.vue",
|
||||
"^uni-(.*)": "@/uni_modules/uni-$1/components/uni-$1/uni-$1.vue"
|
||||
"^uni-(.*)": "@/uni_modules/uni-$1/components/uni-$1/uni-$1.vue",
|
||||
"^uv-(.*)": "@climblee/uv-ui/components/uv-$1/uv-$1.vue"
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@
|
|||
title=""
|
||||
></custom-nav-bar>
|
||||
<view class="header">
|
||||
<image :src="commonEnum.AGENT" class="agent-background" mode="aspectFill"></image>
|
||||
<image :src="commonEnum.AGENT" class="agent-background" mode="widthFix"></image>
|
||||
</view>
|
||||
|
||||
<!-- 主要内容区域 -->
|
||||
|
|
@ -52,68 +52,23 @@
|
|||
<!-- 服务区域选择 - 三级选择 -->
|
||||
<view class="form-item">
|
||||
<view class="form-label">请选择您的服务区域</view>
|
||||
|
||||
<!-- 省份选择 -->
|
||||
<view class="region-picker-item">
|
||||
<view class="picker-label">省份</view>
|
||||
<picker
|
||||
:range="provinceList"
|
||||
:value="selectedProvinceIndex"
|
||||
range-key="name"
|
||||
@change="onProvinceChange"
|
||||
>
|
||||
<view class="picker-display">
|
||||
<text class="picker-text"
|
||||
>{{ selectedProvince ? selectedProvince.name : '请选择省份' }}
|
||||
</text>
|
||||
<text class="picker-arrow">▼</text>
|
||||
</view>
|
||||
</picker>
|
||||
</view>
|
||||
|
||||
<!-- 城市选择 -->
|
||||
<view v-if="selectedProvince" class="region-picker-item">
|
||||
<view class="picker-label">城市</view>
|
||||
<picker
|
||||
:range="cityList"
|
||||
:value="selectedCityIndex"
|
||||
range-key="name"
|
||||
@change="onCityChange"
|
||||
>
|
||||
<view class="picker-display">
|
||||
<text class="picker-text"
|
||||
>{{ selectedCity ? selectedCity.name : '请选择城市' }}
|
||||
</text>
|
||||
<text class="picker-arrow">▼</text>
|
||||
</view>
|
||||
</picker>
|
||||
</view>
|
||||
|
||||
<!-- 区县选择 -->
|
||||
<view v-if="selectedCity" class="region-picker-item">
|
||||
<view class="picker-label">区县</view>
|
||||
<picker
|
||||
:range="districtList"
|
||||
:value="selectedDistrictIndex"
|
||||
range-key="name"
|
||||
@change="onDistrictChange"
|
||||
>
|
||||
<view class="picker-display">
|
||||
<text class="picker-text"
|
||||
>{{ selectedDistrict ? selectedDistrict.name : '请选择区县' }}
|
||||
</text>
|
||||
<text class="picker-arrow">▼</text>
|
||||
</view>
|
||||
</picker>
|
||||
</view>
|
||||
|
||||
<!-- 显示完整地址 -->
|
||||
<view v-if="selectedDistrict" class="selected-address">
|
||||
<text class="address-text"
|
||||
>已选择: {{ selectedProvince.name }} {{ selectedCity.name }}
|
||||
{{ selectedDistrict.name }}
|
||||
</text>
|
||||
<view class="region-selector" @click="open">
|
||||
<view class="selector-display">
|
||||
<text class="selector-text">
|
||||
{{ formData.serviceArea || '请选择服务区域' }}
|
||||
</text>
|
||||
<text class="selector-arrow">></text>
|
||||
</view>
|
||||
</view>
|
||||
<uv-picker
|
||||
ref="picker"
|
||||
:columns="addressList"
|
||||
:loading="loading"
|
||||
keyName="name"
|
||||
@change="change"
|
||||
@confirm="confirm"
|
||||
>
|
||||
</uv-picker>
|
||||
</view>
|
||||
|
||||
<!-- 详细地址输入 -->
|
||||
|
|
@ -189,18 +144,21 @@ import { applyForAgent, getAgentAgreement, getServiceAreas } from '@/api/agents'
|
|||
|
||||
export default {
|
||||
name: 'AgentsPage',
|
||||
components: {},
|
||||
computed: {
|
||||
addressList() {
|
||||
return [this.provinces, this.citys, this.areas]
|
||||
},
|
||||
commonEnum() {
|
||||
return commonEnum
|
||||
},
|
||||
canSubmit() {
|
||||
return (
|
||||
// this.formData.name &&
|
||||
// this.formData.phone &&
|
||||
// this.formData.idCard &&
|
||||
// this.selectedDistrict && // 必须选择到区县级别
|
||||
// this.formData.detailAddress &&
|
||||
this.formData.name &&
|
||||
this.formData.phone &&
|
||||
this.formData.idCard &&
|
||||
this.selectedRegionId &&
|
||||
this.formData.detailAddress &&
|
||||
this.formData.agreed &&
|
||||
!this.submitting
|
||||
)
|
||||
},
|
||||
|
|
@ -209,13 +167,6 @@ export default {
|
|||
// 页面加载时获取服务区域列表和协议内容
|
||||
this.loadServiceAreas()
|
||||
this.loadAgreement()
|
||||
this.loadRegionTreeData()
|
||||
|
||||
// 重置协议同意状态，用于测试协议弹窗功能
|
||||
this.formData.agreed = false
|
||||
|
||||
// 添加测试数据
|
||||
console.log('页面加载完成，三级选择器已初始化')
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
|
|
@ -228,25 +179,16 @@ export default {
|
|||
agreed: false,
|
||||
},
|
||||
submitting: false,
|
||||
serviceAreas: [],
|
||||
agreementContent: '',
|
||||
showAgreementModal: false,
|
||||
// 区域ID映射
|
||||
areaIdMap: {},
|
||||
// 三级选择相关数据
|
||||
regionTreeData: [],
|
||||
// 省份相关
|
||||
provinceList: [],
|
||||
selectedProvince: null,
|
||||
selectedProvinceIndex: -1,
|
||||
// 城市相关
|
||||
cityList: [],
|
||||
selectedCity: null,
|
||||
selectedCityIndex: -1,
|
||||
// 区县相关
|
||||
districtList: [],
|
||||
selectedDistrict: null,
|
||||
selectedDistrictIndex: -1,
|
||||
|
||||
loading: true,
|
||||
provinces: [], //省
|
||||
citys: [], //市
|
||||
areas: [], //区
|
||||
pickerValue: [0, 0, 0],
|
||||
defaultValue: [3442, 1, 2],
|
||||
selectedRegionId: null, // 选中的区域ID
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
|
|
@ -256,48 +198,67 @@ export default {
|
|||
const response = await getServiceAreas()
|
||||
if (response.code === 200 && response.data) {
|
||||
// 处理服务器返回的区域数据，提取所有区域名称和ID映射
|
||||
const { names, idMap } = this.extractRegionData(response.data)
|
||||
this.serviceAreas = names
|
||||
this.areaIdMap = idMap
|
||||
console.log('获取到的区域列表:', this.serviceAreas)
|
||||
console.log('区域ID映射:', this.areaIdMap)
|
||||
this.provinces = response.data.sort((left, right) =>
|
||||
Number(left.code) > Number(right.code) ? 1 : -1
|
||||
)
|
||||
console.log(this.provinces)
|
||||
this.loading = false
|
||||
this.handlePickValueDefault()
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('获取服务区域失败:', error)
|
||||
// 使用默认区域列表
|
||||
this.serviceAreas = [
|
||||
'福建省宁德市福鼎市',
|
||||
'福建省宁德市霞浦县',
|
||||
'福建省宁德市古田县',
|
||||
'福建省宁德市屏南县',
|
||||
]
|
||||
// 默认区域ID映射
|
||||
this.areaIdMap = {
|
||||
福建省宁德市福鼎市: 8,
|
||||
福建省宁德市霞浦县: 9,
|
||||
福建省宁德市古田县: 10,
|
||||
福建省宁德市屏南县: 11,
|
||||
}
|
||||
this.loading = false
|
||||
}
|
||||
},
|
||||
|
||||
// 从区域数据中提取区域名称和ID映射
|
||||
extractRegionData(regions) {
|
||||
const names = []
|
||||
const idMap = {}
|
||||
handlePickValueDefault() {
|
||||
// 设置省
|
||||
this.pickerValue[0] = this.provinces.findIndex(
|
||||
item => Number(item.id) === this.defaultValue[0]
|
||||
)
|
||||
// 设置市
|
||||
this.citys = this.provinces[this.pickerValue[0]]?.children || []
|
||||
this.pickerValue[1] = this.citys.findIndex(item => Number(item.id) === this.defaultValue[1])
|
||||
// 设置区
|
||||
this.areas = this.citys[this.pickerValue[1]]?.children || []
|
||||
this.pickerValue[2] = this.areas.findIndex(item => Number(item.id) === this.defaultValue[2])
|
||||
// 重置下位置
|
||||
this.$refs.picker.setIndexs(
|
||||
[this.pickerValue[0], this.pickerValue[1], this.pickerValue[2]],
|
||||
true
|
||||
)
|
||||
},
|
||||
|
||||
const extractData = regionList => {
|
||||
regionList.forEach(region => {
|
||||
names.push(region.name)
|
||||
idMap[region.name] = region.id
|
||||
if (region.children && region.children.length > 0) {
|
||||
extractData(region.children)
|
||||
}
|
||||
})
|
||||
change(e) {
|
||||
if (this.loading) return
|
||||
const { columnIndex, index, indexs } = e
|
||||
// 改变了省
|
||||
if (columnIndex === 0) {
|
||||
this.citys = this.provinces[index]?.children || []
|
||||
this.areas = this.citys[0]?.children || []
|
||||
this.$refs.picker.setIndexs([index, 0, 0], true)
|
||||
} else if (columnIndex === 1) {
|
||||
this.areas = this.citys[index]?.children || []
|
||||
this.$refs.picker.setIndexs(indexs, true)
|
||||
}
|
||||
},
|
||||
|
||||
extractData(regions)
|
||||
return { names, idMap }
|
||||
open() {
|
||||
this.$refs.picker.open()
|
||||
this.handlePickValueDefault()
|
||||
},
|
||||
|
||||
confirm(e) {
|
||||
console.log('确认选择的地区：', e)
|
||||
// 保存选中的区域ID
|
||||
this.selectedRegionId = e.value[2]?.id || e.value[1]?.id || e.value[0]?.id
|
||||
// 更新服务区域显示
|
||||
this.formData.serviceArea = `${e.value[0].name}/${e.value[1].name}/${e.value[2].name}`
|
||||
|
||||
uni.showToast({
|
||||
icon: 'none',
|
||||
title: `${e.value[0].name}/${e.value[1].name}/${e.value[2].name}`,
|
||||
})
|
||||
},
|
||||
|
||||
// 加载代理商协议
|
||||
|
|
@ -374,7 +335,7 @@ export default {
|
|||
return false
|
||||
}
|
||||
|
||||
if (!this.formData.serviceArea) {
|
||||
if (!this.selectedRegionId) {
|
||||
uni.showToast({
|
||||
title: '请选择服务区域',
|
||||
icon: 'none',
|
||||
|
|
@ -420,32 +381,15 @@ export default {
|
|||
this.submitting = true
|
||||
|
||||
try {
|
||||
// 构建请求数据
|
||||
const regionId = this.getSelectedRegionId()
|
||||
if (!regionId) {
|
||||
uni.showToast({
|
||||
title: '请选择服务区域',
|
||||
icon: 'none',
|
||||
})
|
||||
return
|
||||
}
|
||||
|
||||
const requestData = {
|
||||
name: this.formData.name.trim(),
|
||||
phone: this.formData.phone.trim(),
|
||||
idCard: this.formData.idCard.trim(),
|
||||
regionId: regionId,
|
||||
regionId: this.selectedRegionId,
|
||||
address: this.formData.detailAddress.trim(),
|
||||
}
|
||||
|
||||
console.log('提交代理商申请:', requestData)
|
||||
console.log('三级选择信息:', {
|
||||
省份: this.selectedProvince?.name,
|
||||
城市: this.selectedCity?.name,
|
||||
区县: this.selectedDistrict?.name,
|
||||
完整地址: this.formData.serviceArea,
|
||||
区域ID: regionId,
|
||||
})
|
||||
|
||||
const response = await applyForAgent(requestData)
|
||||
|
||||
|
|
@ -487,147 +431,7 @@ 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
|
||||
this.selectedRegionId = null
|
||||
},
|
||||
},
|
||||
}
|
||||
|
|
@ -642,7 +446,6 @@ export default {
|
|||
// 头部区域
|
||||
.header {
|
||||
position: relative;
|
||||
background: #fedfcd;
|
||||
|
||||
.agent-background {
|
||||
position: relative;
|
||||
|
|
@ -985,4 +788,42 @@ export default {
|
|||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
|
||||
// 服务区域选择器样式
|
||||
.region-selector {
|
||||
.selector-display {
|
||||
width: 100%;
|
||||
height: 80rpx;
|
||||
background: #ffffff;
|
||||
border: 2rpx solid #e8e8e8;
|
||||
border-radius: 12rpx;
|
||||
padding: 0 24rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
box-sizing: border-box;
|
||||
cursor: pointer;
|
||||
|
||||
&:active {
|
||||
background: #f5f5f5;
|
||||
}
|
||||
|
||||
.selector-text {
|
||||
font-size: 28rpx;
|
||||
color: #333;
|
||||
flex: 1;
|
||||
|
||||
&:empty::before {
|
||||
content: '请选择服务区域';
|
||||
color: #999;
|
||||
}
|
||||
}
|
||||
|
||||
.selector-arrow {
|
||||
font-size: 24rpx;
|
||||
color: #999;
|
||||
transform: rotate(90deg);
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user