更新 省市区

Laravel/app/Http/Controllers/API/ApiMapController.php

@@ -79,10 +79,19 @@ class ApiMapController extends Controller
       'QuestionLogDelete' => $base_url . '/api/H5/QuestionLog/delete', // 问卷删除记录
       'QuestionLogPush' => $base_url . '/api/H5/QuestionLog/push', // 上次答题记录
       'QuestionChoose' => $base_url . '/api/H5/Question/choose', // 健康问卷列表
+      'AddressData' => $base_url . '/api/H5/Address/data', // 省市区数据
 
     ];
   }
 
+  public function address()
+  {
+    $address_data = file_get_contents(public_path('assets/address.json'));
+    return \Yz::Return(true, '获取成功', [
+      'data' => json_decode($address_data, true)
+    ]);
+  }
+
   public function test()
   {
     return \Yz::Return(true, '获取成功', [

Laravel/routes/web-zhao.php

@@ -27,5 +27,6 @@ Route::any("/api/H5/Config/config", [\App\Http\Controllers\API\H5\HomeController
 Route::any("/api/Demo/pay_back", [\App\Http\Controllers\API\DemoController::class, 'pay_back']);
 Route::any("/api/Demo/pay", [\App\Http\Controllers\API\DemoController::class, 'pay']);
 
+Route::post("/api/H5/Address/data", [\App\Http\Controllers\API\ApiMapController::class, 'address']);
 Route::any("/api/ApiMap/test", [\App\Http\Controllers\API\ApiMapController::class, 'test']);
 Route::post("/api/ApiMap/{type}", [\App\Http\Controllers\API\ApiMapController::class, 'list']);

h5/pages/premarital/form/form.vue

@@ -8,6 +8,7 @@
 		ref
 	} from 'vue'
 	import {
+		$url,
 		$api,
 		$response
 	} from '@/api'
@@ -19,9 +20,36 @@
 	} from '@/store'
 	const $store = useStore()
 	import TitleComponent from '../src/title.vue'
+	const address_data = ref([])
+	const getAddressData = async () => {
+		const response = await $api('AddressData')
+		$response(response, () => {
+			address_data.value = response.data.data.map((i) => {
+				return {
+					text: i.name,
+					value: i.code,
+					children: i.children.map((ii) => {
+						return {
+							text: ii.name,
+							value: ii.code,
+							children: ii.children.map((iii) => {
+								return {
+									text: iii.name,
+									value: iii.code
+								}
+							})
+						}
+					})
+				}
+			})
+		})
+	}
+	// const getAddressData = () => {
+	// 	address_data.value = $address
+	// }
 
 	const mountedAction = () => {
-
+		getAddressData()
 	}
 
 	const config_ref = ref(null)
@@ -66,8 +94,47 @@
 		'姓名': "",
 		'生日': getEndDate(),
 		'民族': "",
+		'现地址省市区': [{
+				value: '11',
+				text: '北京市'
+			},
+			{
+				value: '1101',
+				text: '市辖区'
+			},
+			{
+				value: '110101',
+				text: '东城区'
+			},
+		],
 		'现地址': "",
+		'详细地址省市区': [{
+				value: '11',
+				text: '北京市'
+			},
+			{
+				value: '1101',
+				text: '市辖区'
+			},
+			{
+				value: '110101',
+				text: '东城区'
+			},
+		],
 		'详细地址': "",
+		'户籍地址省市区': [{
+				value: '11',
+				text: '北京市'
+			},
+			{
+				value: '1101',
+				text: '市辖区'
+			},
+			{
+				value: '110101',
+				text: '东城区'
+			},
+		],
 		'户籍地址': "",
 		'工作单位': "",
 		'文化程度': "",
@@ -113,6 +180,10 @@
 		})
 	}
 
+	const addressChange = (e, key) => {
+		input_data.value[key] = e.detail.value
+	}
+
 	onShow(() => {
 		if (!!config_ref.value) {
 			mountedAction()
@@ -146,6 +217,11 @@
 								<view>{{ input_data[k] }}</view>
 							</picker>
 						</template>
+						<template v-else-if="['现地址省市区','详细地址省市区','户籍地址省市区'].includes(k)">
+							<uni-data-picker v-if="address_data.length !== 0" placeholder="请选择地址" popup-title="请选择城市"
+								:localdata="address_data" :step-searh="true" @change="(e)=>{addressChange(e,k)}">
+							</uni-data-picker>
+						</template>
 						<template v-else-if="k === '血缘关系'">
 							<view>
 								<radio-group class="radio_wrapper" @change="(e)=>{radioChange(e, k)}">
@@ -169,7 +245,32 @@
 		</view>
 	</view>
 </template>
+<style>
+	.uni-data-tree-dialog {
+		z-index: 999;
+	}
+
+	.input-value-border {
+		border: none !important;
+	}
+
+	.input-value {
+		padding: 0 !important;
+	}
+
+	.selected-area {
+		font-size: 30rpx !important;
+	}
+
+	.icon-clear {
+		display: none !important;
+	}
+</style>
 <style scoped>
+	.address_item_wrapper {
+		margin-right: 5rpx;
+	}
+
 	.radio_item_wrapper {
 		margin-right: 30rpx;
 		display: flex;
@@ -205,6 +306,7 @@
 	.form_input_wrapper {
 		width: calc(100% - 140rpx - 20px);
 		margin-left: 20px;
+		position: relative;
 	}
 
 	.form_title_wrapper {