Bläddra i källkod

fix: 志愿者注册地址优化

chenjj 4 månader sedan
förälder
incheckning
8241f5e915

Filskillnaden har hållts tillbaka eftersom den är för stor
+ 30050 - 0
components/pickerAddress/address.js


+ 124 - 84
components/pickerAddress/pickerAddress.vue

@@ -1,105 +1,145 @@
 <template>
 	<!-- 地址选择器组件 -->
-	<picker @change="bindPickerChange" @columnchange="columnchange" :range="array" range-key="name" :value="value" mode="multiSelector">
+	<view>
+		<picker @change="bindPickerChange" @columnchange="columnchange" :range="array" range-key="name" :value="value"
+			mode="multiSelector">
 			<slot></slot>
-	</picker>
+		</picker>
+	</view>
 </template>
 
 <script>
-import AllAddress from './areadata.js'
-let selectVal = ['','','']
+// import AllAddress from './areadata.js'
+import AllAddress from './address.js'
+let selectVal = ['', '', '']
+let selectCode = ['', '', '']
 export default {
-		data() {
-			return{
-				value: [0,0,0],
-				array: [],
-				index: 0
-			}
-		},
-		props:{
-			selectValue: {
-				type: Array,
-				default: [0,0,0]
+	data() {
+		return {
+			value: [0, 0, 0],
+			array: [],
+			index: 0
+		}
+	},
+	props: {
+		selectValue: {
+			type: Array,
+			default: [0, 0, 0]
+		}
+	},
+	created() {
+		this.value = this.selectValue
+		this.initSelect()
+	},
+	watch: {
+		selectValue: {
+				handler(newVal) {
+					console.log('selectValue',this.selectValue);
+					this.value = this.selectValue
+					this.initSelect()
+				},
+				immediate: true
 			}
 		},
-		created() {
-			this.value = this.selectValue
-			this.initSelect()
-		},
-		methods:{
-			// 初始化地址选项
-			initSelect() {
-				this.updateSourceDate() // 更新源数据
+	methods: {
+		// 初始化地址选项
+		initSelect() {
+			this.updateSourceDate() // 更新源数据
 				.updateAddressDate() // 更新结果数据
 				.$forceUpdate()  // 触发双向绑定
-			},
-			// 地址控件改变控件
-			columnchange(d) {
-				this.updateSelectIndex(d.detail.column, d.detail.value) // 更新选择索引
+		},
+		// 地址控件改变控件
+		columnchange(d) {
+			this.updateSelectIndex(d.detail.column, d.detail.value) // 更新选择索引
 				.updateSourceDate() // 更新源数据
 				.updateAddressDate() // 更新结果数据
 				.$forceUpdate()  // 触发双向绑定
-			},
-			
-			/**
-			 * 更新源数据
-			 * */
-			updateSourceDate() {
-				// console.log(AllAddress, '>>>>>>>AllAddress');
-				this.array = []
-				this.array[0] = AllAddress.map(obj => {
-					return { name: obj.name }
-				})
-				this.array[1] = AllAddress[this.value[0]].city.map(obj => {
-					return { name: obj.name }
-				})
-				this.array[2] = AllAddress[this.value[0]].city[this.value[1]].area.map(obj => { 
-					return { name: obj }
-				})
-				return this
-			},
-			
-			/**
-			 * 更新索引
-			 * */
-			updateSelectIndex(column, value){
-				let arr = JSON.parse(JSON.stringify(this.value)) 
-				arr[column] = value
-				if(column === 0 ) {
-						arr[1] = 0
-						arr[2] = 0
+		},
+
+		/**
+		 * 更新源数据
+		 * */
+		updateSourceDate() {
+			// console.log(AllAddress, '>>>>>>>AllAddress');
+			this.array = []
+			// this.array[0] = AllAddress.map(obj => {
+			// 	return { name: obj.name }
+			// })
+			// this.array[1] = AllAddress[this.value[0]].city.map(obj => {
+			// 	return { name: obj.name }
+			// })
+			// this.array[2] = AllAddress[this.value[0]].city[this.value[1]].area.map(obj => { 
+			// 	return { name: obj }
+			// })
+
+
+			this.array[0] = AllAddress.map(obj => {
+				return {
+					name: obj.name,
+					code: obj.code
+				}
+			})
+			this.array[1] = AllAddress[this.value[0]].children.map(obj => {
+				return {
+					name: obj.name,
+					code: obj.code
 				}
-				if(column === 1 ) {
-						arr[2] = 0
+			})
+			this.array[2] = AllAddress[this.value[0]].children[this.value[1]].children.map(obj => {
+				return {
+					name: obj.name,
+					code: obj.code
 				}
-				this.value = arr
-				return this
-			},
-			
-			/**
-			 * 更新结果数据 
-			 * */
-			updateAddressDate() {
-				selectVal[0] = this.array[0][this.value[0]].name
-				selectVal[1] = this.array[1][this.value[1]].name 
-				selectVal[2] = this.array[2][this.value[2]].name 
-				return this
-			},
-			
-			/**
-			 * 点击确定
-			 * */
-			bindPickerChange(e) {
-				this.$emit('change', {
-					index: this.value,
-					data: selectVal
-				})
-				return this
+			})
+			return this
+		},
+
+		/**
+		 * 更新索引
+		 * */
+		updateSelectIndex(column, value) {
+			let arr = JSON.parse(JSON.stringify(this.value))
+			arr[column] = value
+			if (column === 0) {
+				arr[1] = 0
+				arr[2] = 0
+			}
+			if (column === 1) {
+				arr[2] = 0
 			}
+			this.value = arr
+			return this
+		},
+
+		/**
+		 * 更新结果数据 
+		 * */
+		updateAddressDate() {
+			selectVal[0] = this.array[0][this.value[0]].name
+			selectVal[1] = this.array[1][this.value[1]].name
+			selectVal[2] = this.array[2][this.value[2]].name
+
+			selectCode[0] = this.array[0][this.value[0]].code
+			selectCode[1] = this.array[1][this.value[1]].code
+			selectCode[2] = this.array[2][this.value[2]].code
+
+
+			return this
+		},
+
+		/**
+		 * 点击确定
+		 * */
+		bindPickerChange(e) {
+			this.$emit('change', {
+				index: this.value,
+				data: selectVal,
+				code: selectCode
+			})
+			return this
 		}
+	}
 }
 </script>
 
-<style>
-</style>
-
+<style></style>

+ 1 - 1
config.js

@@ -2,7 +2,7 @@
 const config = {
 	// baseUrl: 'https://vue.ruoyi.vip/prod-api',
 	//cloud后台网关地址
-	baseUrl: 'http://192.168.100.133:9527',
+	baseUrl: 'http://192.168.100.121:9527',
 	// baseUrl: 'https://zybooks.tech/prod-api',
 	mapKey:'KFEBZ-P2GKZ-A5PX4-7Q6Y7-KXOBF-XCB4C',
 	appName: '金邻助家',

+ 106 - 10
pages_home/components/cust-form/index.vue

@@ -59,7 +59,7 @@
                     <up-button size="small" type="primary" text="前往人脸识别" @click="startFace"></up-button>
                 </up-form-item>
 
-                <up-form-item v-if="item.type === 'city'" :label="item.label" :prop="item.key" borderBottom
+                <!-- <up-form-item v-if="item.type === 'city'" :label="item.label" :prop="item.key" borderBottom
                     labelWidth="94" :required="item.required">
                     <view @click.self="() => openCity(item)">
                         <up-input v-model="formData[item.key]" disabled disabledColor="#ffffff" placeholder="省、市、区等地区信息"
@@ -68,6 +68,22 @@
                     <template #right>
                         <up-icon name="map" size="22" @click="onCityWx(item)"></up-icon>
                     </template>
+                </up-form-item> -->
+
+                <up-form-item v-if="item.type === 'city'" :label="item.label" :prop="item.key" borderBottom
+                    labelWidth="94" :required="item.required">
+                        <pickerAddress @change="(info)=>addressChange(info,item)"
+                        :selectValue="[ formData.provinceInd, formData.cityInd, formData.districtInd ]">
+                        <view class="inp"
+                            :class="formData.provinceName&&formData.cityName&&formData.districtName?'':'address-inp'">
+                            {{formData.provinceName ? formData.provinceName:'省'}} /
+                            {{formData.cityName ? formData.cityName:'市'}} /
+                            {{formData.districtName ? formData.districtName:'区'}}
+                        </view>
+                    </pickerAddress>
+                    <template #right>
+                        <up-icon name="map" size="22" @click="onCityWx(item)"></up-icon>
+                    </template>
                 </up-form-item>
 
                 <up-form-item v-if="item.type === 'cascader'" :label="item.label" :prop="item.key" borderBottom
@@ -107,7 +123,10 @@ import {
     onShow,
     onUnload
 } from "@dcloudio/uni-app";
-import { splitAddress } from '@/utils/adress'
+import { splitAddress,getCityCode } from '@/utils/adress'
+
+import pickerAddress from '@/components/pickerAddress/pickerAddress.vue'
+
 const props = defineProps({
     column: {
         type: Array,
@@ -122,6 +141,18 @@ const formData = reactive({
     sex: null,
     city: null,
 
+    provinceName: '', // 省
+		provinceCode: '',
+		provinceInd: 21,
+
+		cityName: '', // 市
+		cityCode: '',
+		cityInd: 0,
+
+		districtName: '',
+		districtCode: '',
+		districtInd: 17,
+
     // address: "永川区",
     // age: "1",
     // city: "重庆",
@@ -293,21 +324,86 @@ function clickPick(row) {
     pickerRef.value.show();
 
 }
+
+
+function addressChange(info,row) {
+        actions.value = row
+		console.log(info, '>>>>data');
+
+		if (!info || !info.data) {
+			console.error('Invalid address change info:', info);
+			return;
+		}
+
+		if (!Array.isArray(info.data) || info.data.length < 3) {
+			console.error('Invalid address data:', info.data);
+			return;
+		}
+
+		const code = Array.isArray(info.code) ? info.code : ['', '', ''];
+
+		let indexArray;
+		if (Array.isArray(info.index)) {
+			indexArray = info.index;
+		} else if (info.index && typeof info.index[Symbol.iterator] === 'function') {
+			indexArray = Array.from(info.index);
+		} else {
+			indexArray = [0, 0, 0];
+		}
+
+    
+        Object.assign(formData, {
+            provinceName: info.data[0],
+            provinceCode: info.code[0],
+            provinceInd:indexArray[0] || 0,
+            cityName: info.data[1],
+            cityCode:info.code[1],
+            cityInd:indexArray[1] || 0,
+            districtName: info.data[2],
+            districtCode:info.code[2],
+            districtInd:indexArray[2] || 0
+        })
+        console.log('formData===>',formData);
+        
+    }
 function onCityWx(row) {
     console.log('地区选点',row);
     wx.chooseLocation({
         success: function (res) {
             const result = splitAddress(res.address);
-            console.log(res,result);
-            Object.assign(cityData, {     
-                province: result.province,
-                city: result.city,
-                area:result.district,
-            })
-            Object.assign(formData, {
-                [row.key]: `${result.province}${result.city}${result.district}`,
+            const handlecityData = getCityCode([result.province,result.city,result.district].join(' '))
+            console.log(res,handlecityData);
+            addressChange(handlecityData,row)
+
+             Object.assign(formData, {
+                // [row.key]: `${result.province}${result.city}${result.district}`,
                 address:result.detail
             })
+
+            // Object.assign(cityData, {     
+            //     province: result.province,
+            //     city: result.city,
+            //     area:result.district,
+            // })
+
+            // Object.assign(formData, {
+            // provinceName: result.province,
+            // provinceCode: info.code[0],
+            // provinceInd:indexArray[0] || 0,
+            // cityName: result.city,
+            // cityCode:info.code[1],
+            // cityInd:indexArray[1] || 0,
+            // districtName: result.district,
+            // districtCode:info.code[2],
+            // districtInd:indexArray[2] || 0,
+
+            // address:result.detail
+            // })
+            
+            // Object.assign(formData, {
+            //     [row.key]: `${result.province}${result.city}${result.district}`,
+            //     address:result.detail
+            // })
         },
         fail: function (err) {
             console.log(err);

+ 3 - 2
pages_home/pages/details/index.vue

@@ -13,8 +13,9 @@
                 <view class="card-title">基本信息</view>
                 <view class="card-item" v-for="item in list" :key="item.key">
                     <view class="card-lable">{{ item.label }}</view>
-                    <view class="card-text"> {{ item.key === 'sex' ? sex_status[details[item.key]] || '-' :
-                        details[item.key] || '-'}} </view>
+                    <view class="card-text" v-if=" item.key === 'sex'"> {{ sex_status[details[item.key]] || '-'}} </view>
+                    <view class="card-text" v-else-if=" item.key === 'city'"> {{details['provinceName']+ details['cityName']+details['districtName']}} </view>
+                    <view class="card-text" v-else> {{  details[item.key] || '-'}} </view>
                 </view>
             </view>
 

+ 3 - 3
pages_home/pages/register/data.js

@@ -62,7 +62,7 @@ const rules = {
             trigger: ['blur', 'change']
         }
     ],
-    city: [
+    districtName: [
         {
             type: 'string',
             required: true,
@@ -127,10 +127,10 @@ const column = [
     },
     {
         label: "地区",
-        key: "city",
+        key: "districtName",
         type: "city",
         option: city_option,
-        rules: rules.city,
+        rules: rules.districtName,
         required:true
     },
     {

+ 120 - 37
utils/adress.js

@@ -2,15 +2,17 @@ import config from '@/config'
 const mapKey = config.mapKey;
 const appName = config.appName;
 
+import addressData from '@/components/pickerAddress/address'
+
 /**
  * 腾讯位置服务地图选点
  */
 const chooseLocationInit = () => {
-    const key = mapKey; //使用在腾讯位置服务申请的key
-    const referer = appName; //调用插件的app的名称
-    wx.navigateTo({
-        url: `plugin://chooseLocation/index?key=${key}&referer=${referer}`,
-    });
+  const key = mapKey; //使用在腾讯位置服务申请的key
+  const referer = appName; //调用插件的app的名称
+  wx.navigateTo({
+    url: `plugin://chooseLocation/index?key=${key}&referer=${referer}`,
+  });
 
 }
 
@@ -19,43 +21,124 @@ const chooseLocationInit = () => {
  * @param {*} city 城市名称
  */
 const citySelectorNavigateTo = (city) => {
-    const key = mapKey; // 使用在腾讯位置服务申请的key
-    const referer = appName; // 调用插件的app的名称
-    const hotCitys = '重庆'; // 用户自定义的的热门城市
+  const key = mapKey; // 使用在腾讯位置服务申请的key
+  const referer = appName; // 调用插件的app的名称
+  const hotCitys = '重庆'; // 用户自定义的的热门城市
 
-    wx.navigateTo({
-        url: `plugin://citySelector/index?key=${key}&referer=${referer}&hotCitys=${hotCitys}`,
-    })
+  wx.navigateTo({
+    url: `plugin://citySelector/index?key=${key}&referer=${referer}&hotCitys=${hotCitys}`,
+  })
 }
 
 function splitAddress(address) {
-    // 处理直辖市(如北京市朝阳区)
-    const directCityRegex = /^(北京|天津|上海|重庆)(市)?(.+?区)/;
-    const directMatch = address.match(directCityRegex); 
-    if (directMatch) {
-      return {
-        province: directMatch[1],
-        city: directMatch[1]+'市',
-        district: directMatch[3],
-        detail: address.replace(directCityRegex,  '')
-      }
+  // 处理直辖市(如北京市朝阳区)
+  const directCityRegex = /^(北京|天津|上海|重庆)(市)?(.+?区)/;
+  const directMatch = address.match(directCityRegex);
+  if (directMatch) {
+    return {
+      province: directMatch[1],
+      city: directMatch[1] + '市',
+      district: directMatch[3],
+      detail: address.replace(directCityRegex, '')
     }
-  
-    // 常规拆分逻辑 
-    const provinceRegex = /(.+?(省|自治区|行政区|特别行政区))/;
-    const cityRegex = /(.+?(市|自治州|州|盟))/;
-    
-    const province = address.match(provinceRegex)?.[1]  || '';
-    const city = address.replace(province,  '').match(cityRegex)?.[1] || '';
-    const remaining = address.replace(province  + city, '');
-    const district = remaining.match(/(.+?( 区|县|市|旗))/)?.[1] || '';
-    const detail = remaining.replace(district,  '').trim();
-   
-    return {province, city, district, detail};
   }
 
-export  { 
-    chooseLocationInit,
-    citySelectorNavigateTo,
-    splitAddress
+  // 常规拆分逻辑 
+  const provinceRegex = /(.+?(省|自治区|行政区|特别行政区))/;
+  const cityRegex = /(.+?(市|自治州|州|盟))/;
+
+  const province = address.match(provinceRegex)?.[1] || '';
+  const city = address.replace(province, '').match(cityRegex)?.[1] || '';
+  const remaining = address.replace(province + city, '');
+  const district = remaining.match(/(.+?( 区|县|市|旗))/)?.[1] || '';
+  const detail = remaining.replace(district, '').trim();
+
+  return { province, city, district, detail };
+}
+
+
+function normalizeAddress(str) {
+  return str.replace(/(市|区|省)/g, '').trim();
+}
+/**
+ * 根据地址字符串返回 name 数组、code 数组、index 路径
+ * @param {string} address 例如:"重庆 重庆市 永川区"
+ * @returns {Object|null} 包含 data/name、code、index 的对象
+ */
+const getCityCode = (address) => {
+  // //address:重庆市永川区人民大道191号
+  // const names = normalizeAddress(address).split(/\s+/);
+  // let result = [];
+
+  // // 查找省份
+  // let province = addressData.find(p => p.name.includes(names[0]));
+  // if (!province) return [];
+
+  // result.push(province.code);
+
+  // if (names.length < 2) return result;
+
+  // // 查找城市
+  // let city = province.children?.find(c => c.name.includes(names[1]));
+  // if (!city) return result;
+
+  // result.push(city.code);
+
+  // if (names.length < 3) return result;
+
+  // // 查找区县
+  // let district = city.children?.find(d => d.name.includes(names[2]));
+  // if (!district) return result;
+
+  // result.push(district.code);
+
+  // return result;
+
+  const names = address.split(/\s+/)
+  const result = {
+    data: [],
+    code: [],
+    index: []
+  }
+
+  // 查找省份
+  const provinceIndex = addressData.findIndex(p => p.name.includes(names[0]))
+  if (provinceIndex === -1) return null
+
+  const province = addressData[provinceIndex]
+  result.data.push(province.name)
+  result.code.push(province.code)
+  result.index.push(provinceIndex)
+
+  if (names.length < 2) return result
+
+  // 查找城市
+  const cityIndex = province.children.findIndex(c => c.name.includes(names[1]))
+  if (cityIndex === -1) return result
+
+  const city = province.children[cityIndex]
+  result.data.push(city.name)
+  result.code.push(city.code)
+  result.index.push(cityIndex)
+
+  if (names.length < 3) return result
+
+  // 查找区县
+  const districtIndex = city.children.findIndex(d => d.name.includes(names[2]))
+  if (districtIndex === -1) return result
+
+  const district = city.children[districtIndex]
+  result.data.push(district.name)
+  result.code.push(district.code)
+  result.index.push(districtIndex)
+
+  return result
+
+
+}
+export {
+  chooseLocationInit,
+  citySelectorNavigateTo,
+  splitAddress,
+  getCityCode
 }