From 4c6bff9127cae3b1f4dc1c354d33c5c832a84c98 Mon Sep 17 00:00:00 2001
From: WindowBird <13870814+windows-bird@user.noreply.gitee.com>
Date: Wed, 3 Sep 2025 10:01:46 +0800
Subject: [PATCH] =?UTF-8?q?=E5=AF=BC=E5=85=A5uv-ui,=E4=BC=98=E5=8C=96?=
=?UTF-8?q?=E7=94=B3=E8=AF=B7=E4=BB=A3=E7=90=86=E5=9C=B0=E5=9D=80=E4=B8=89?=
=?UTF-8?q?=E7=BA=A7=E9=80=89=E6=8B=A9=E5=99=A8=EF=BC=8C=E4=BC=98=E5=8C=96?=
=?UTF-8?q?=E7=94=B3=E8=AF=B7=E4=BB=A3=E7=90=86=E7=95=8C=E9=9D=A2=E5=B8=83?=
=?UTF-8?q?=E5=B1=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
package-lock.json | 7 +
package.json | 1 +
pages.json | 3 +-
pages/agents/agents.vue | 413 ++++++++++++----------------------------
4 files changed, 137 insertions(+), 287 deletions(-)
diff --git a/package-lock.json b/package-lock.json
index cc3c440..305964e 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -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",
diff --git a/package.json b/package.json
index 6dd75ca..fa0daf0 100644
--- a/package.json
+++ b/package.json
@@ -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",
diff --git a/pages.json b/pages.json
index f32add1..0b3fc90 100644
--- a/pages.json
+++ b/pages.json
@@ -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"
}
}
}
diff --git a/pages/agents/agents.vue b/pages/agents/agents.vue
index 765de68..3fd1e35 100644
--- a/pages/agents/agents.vue
+++ b/pages/agents/agents.vue
@@ -8,7 +8,7 @@
title=""
>
@@ -52,68 +52,23 @@
请选择您的服务区域
-
-
-
- 省份
-
-
- {{ selectedProvince ? selectedProvince.name : '请选择省份' }}
-
- ▼
-
-
-
-
-
-
- 城市
-
-
- {{ selectedCity ? selectedCity.name : '请选择城市' }}
-
- ▼
-
-
-
-
-
-
- 区县
-
-
- {{ selectedDistrict ? selectedDistrict.name : '请选择区县' }}
-
- ▼
-
-
-
-
-
-
- 已选择: {{ selectedProvince.name }} {{ selectedCity.name }}
- {{ selectedDistrict.name }}
-
+
+
+
+ {{ formData.serviceArea || '请选择服务区域' }}
+
+ >
+
+
+
@@ -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);
+ }
+ }
+}