|
@@ -12,77 +12,52 @@
|
|
|
<!-- 省/市/区三级联动选择器 -->
|
|
<!-- 省/市/区三级联动选择器 -->
|
|
|
<view class="form-item">
|
|
<view class="form-item">
|
|
|
<view class="item-label">所在省份 <text class="required">*</text></view>
|
|
<view class="item-label">所在省份 <text class="required">*</text></view>
|
|
|
- <picker
|
|
|
|
|
- :range="provinces"
|
|
|
|
|
- :range-key="'name'"
|
|
|
|
|
- v-model="provinceIndex"
|
|
|
|
|
- @change="onProvinceChange"
|
|
|
|
|
- >
|
|
|
|
|
|
|
+ <picker :range="provinces" :range-key="'name'" v-model="provinceIndex" @change="onProvinceChange">
|
|
|
<view class="picker-view">
|
|
<view class="picker-view">
|
|
|
{{ provinceIndex !== null ? provinces[provinceIndex].name : '请选择省份' }}
|
|
{{ provinceIndex !== null ? provinces[provinceIndex].name : '请选择省份' }}
|
|
|
</view>
|
|
</view>
|
|
|
</picker>
|
|
</picker>
|
|
|
</view>
|
|
</view>
|
|
|
-
|
|
|
|
|
|
|
+
|
|
|
<view class="form-item">
|
|
<view class="form-item">
|
|
|
<view class="item-label">所在城市 <text class="required">*</text></view>
|
|
<view class="item-label">所在城市 <text class="required">*</text></view>
|
|
|
- <picker
|
|
|
|
|
- :range="cities"
|
|
|
|
|
- :range-key="'name'"
|
|
|
|
|
- v-model="cityIndex"
|
|
|
|
|
- @change="onCityChange"
|
|
|
|
|
- :disabled="provinceIndex === null"
|
|
|
|
|
- >
|
|
|
|
|
|
|
+ <picker :range="cities" :range-key="'name'" v-model="cityIndex" @change="onCityChange"
|
|
|
|
|
+ :disabled="provinceIndex === null">
|
|
|
<view class="picker-view">
|
|
<view class="picker-view">
|
|
|
{{ cityIndex !== null && cities.length > 0 ? cities[cityIndex].name : '请先选择省份' }}
|
|
{{ cityIndex !== null && cities.length > 0 ? cities[cityIndex].name : '请先选择省份' }}
|
|
|
</view>
|
|
</view>
|
|
|
</picker>
|
|
</picker>
|
|
|
</view>
|
|
</view>
|
|
|
-
|
|
|
|
|
|
|
+
|
|
|
<view class="form-item">
|
|
<view class="form-item">
|
|
|
<view class="item-label">所在区域 <text class="required">*</text></view>
|
|
<view class="item-label">所在区域 <text class="required">*</text></view>
|
|
|
- <picker
|
|
|
|
|
- :range="districts"
|
|
|
|
|
- :range-key="'name'"
|
|
|
|
|
- v-model="districtIndex"
|
|
|
|
|
- @change="onDistrictChange"
|
|
|
|
|
- :disabled="cityIndex === null || cities.length === 0"
|
|
|
|
|
- >
|
|
|
|
|
|
|
+ <picker :range="districts" :range-key="'name'" v-model="districtIndex" @change="onDistrictChange"
|
|
|
|
|
+ :disabled="cityIndex === null || cities.length === 0">
|
|
|
<view class="picker-view">
|
|
<view class="picker-view">
|
|
|
{{ districtIndex !== null && districts.length > 0 ? districts[districtIndex].name : '请先选择城市' }}
|
|
{{ districtIndex !== null && districts.length > 0 ? districts[districtIndex].name : '请先选择城市' }}
|
|
|
</view>
|
|
</view>
|
|
|
</picker>
|
|
</picker>
|
|
|
</view>
|
|
</view>
|
|
|
-
|
|
|
|
|
|
|
+
|
|
|
<!-- 详细地址信息 -->
|
|
<!-- 详细地址信息 -->
|
|
|
<view class="form-item">
|
|
<view class="form-item">
|
|
|
<view class="item-label">街道/楼宇 <text class="required">*</text></view>
|
|
<view class="item-label">街道/楼宇 <text class="required">*</text></view>
|
|
|
- <u-input
|
|
|
|
|
- placeholder="请输入街道或楼宇名称,例:科技园路1号"
|
|
|
|
|
- v-model="address"
|
|
|
|
|
- clearable
|
|
|
|
|
- class="custom-input"
|
|
|
|
|
- >
|
|
|
|
|
|
|
+ <u-input placeholder="请输入街道或楼宇名称,例:科技园路1号" v-model="address" clearable class="custom-input">
|
|
|
<template #prefix>
|
|
<template #prefix>
|
|
|
<u-icon name="map" size="36rpx" color="#999" marginRight="20rpx"></u-icon>
|
|
<u-icon name="map" size="36rpx" color="#999" marginRight="20rpx"></u-icon>
|
|
|
</template>
|
|
</template>
|
|
|
</u-input>
|
|
</u-input>
|
|
|
</view>
|
|
</view>
|
|
|
-
|
|
|
|
|
|
|
+
|
|
|
<view class="form-item">
|
|
<view class="form-item">
|
|
|
<view class="item-label">楼层/单元室</view>
|
|
<view class="item-label">楼层/单元室</view>
|
|
|
- <u-input
|
|
|
|
|
- placeholder="例:3层302室(选填)"
|
|
|
|
|
- v-model="addressDetail"
|
|
|
|
|
- clearable
|
|
|
|
|
- class="custom-input"
|
|
|
|
|
- >
|
|
|
|
|
|
|
+ <u-input placeholder="例:3层302室(选填)" v-model="addressDetail" clearable class="custom-input">
|
|
|
<template #prefix>
|
|
<template #prefix>
|
|
|
<u-icon name="home" size="36rpx" color="#999" marginRight="20rpx"></u-icon>
|
|
<u-icon name="home" size="36rpx" color="#999" marginRight="20rpx"></u-icon>
|
|
|
</template>
|
|
</template>
|
|
|
</u-input>
|
|
</u-input>
|
|
|
</view>
|
|
</view>
|
|
|
-
|
|
|
|
|
|
|
+
|
|
|
<!-- 地图选点后显示经纬度(可选) -->
|
|
<!-- 地图选点后显示经纬度(可选) -->
|
|
|
<view class="location-info" v-if="latitude && longitude">
|
|
<view class="location-info" v-if="latitude && longitude">
|
|
|
<text>经纬度:{{ latitude }}, {{ longitude }}</text>
|
|
<text>经纬度:{{ latitude }}, {{ longitude }}</text>
|
|
@@ -104,12 +79,12 @@ export default {
|
|
|
provinces: [], // 所有省份
|
|
provinces: [], // 所有省份
|
|
|
cities: [], // 选中省份对应的城市
|
|
cities: [], // 选中省份对应的城市
|
|
|
districts: [], // 选中城市对应的区域
|
|
districts: [], // 选中城市对应的区域
|
|
|
-
|
|
|
|
|
|
|
+
|
|
|
// 选中索引
|
|
// 选中索引
|
|
|
provinceIndex: null, // 选中的省份索引
|
|
provinceIndex: null, // 选中的省份索引
|
|
|
cityIndex: null, // 选中的城市索引
|
|
cityIndex: null, // 选中的城市索引
|
|
|
districtIndex: null, // 选中的区域索引
|
|
districtIndex: null, // 选中的区域索引
|
|
|
-
|
|
|
|
|
|
|
+
|
|
|
// 地址信息
|
|
// 地址信息
|
|
|
address: "", // 街道/楼宇(必填)
|
|
address: "", // 街道/楼宇(必填)
|
|
|
addressDetail: '', // 楼层/单元室(选填)
|
|
addressDetail: '', // 楼层/单元室(选填)
|
|
@@ -125,37 +100,36 @@ export default {
|
|
|
// this.provinces = addr;
|
|
// this.provinces = addr;
|
|
|
// },
|
|
// },
|
|
|
onLoad(options) {
|
|
onLoad(options) {
|
|
|
- this.provinces = addr;
|
|
|
|
|
- // 回显上一页传递的地址信息
|
|
|
|
|
- if (options.address) this.address = decodeURIComponent(options.address);
|
|
|
|
|
- if (options.addressDetail) this.addressDetail = decodeURIComponent(options.addressDetail);
|
|
|
|
|
- if (options.latitude) this.latitude = options.latitude;
|
|
|
|
|
- if (options.longitude) this.longitude = options.longitude;
|
|
|
|
|
-
|
|
|
|
|
- // 如果有省市区信息,进行回显
|
|
|
|
|
- if (options.province && options.city && options.district) {
|
|
|
|
|
|
|
+ this.provinces = addr;
|
|
|
|
|
+ if (options.address) {
|
|
|
|
|
+ let address = JSON.parse(options.address);
|
|
|
|
|
+ console.log(address,'子地址')
|
|
|
|
|
+ // 回显上一页传递的地址信息
|
|
|
|
|
+ // this.address = decodeURIComponent(address.address);
|
|
|
|
|
+ // this.addressDetail = decodeURIComponent(address.addressDetail);
|
|
|
|
|
+ this.latitude = address.latitude;
|
|
|
|
|
+ this.longitude = address.longitude;
|
|
|
|
|
+ // 如果有省市区信息,进行回显
|
|
|
this.setAddressValue(
|
|
this.setAddressValue(
|
|
|
- decodeURIComponent(options.province),
|
|
|
|
|
- decodeURIComponent(options.city),
|
|
|
|
|
- decodeURIComponent(options.district)
|
|
|
|
|
|
|
+ decodeURIComponent(address.province),
|
|
|
|
|
+ decodeURIComponent(address.city),
|
|
|
|
|
+ decodeURIComponent(address.district)
|
|
|
);
|
|
);
|
|
|
}
|
|
}
|
|
|
-
|
|
|
|
|
-
|
|
|
|
|
},
|
|
},
|
|
|
methods: {
|
|
methods: {
|
|
|
// 省份选择改变
|
|
// 省份选择改变
|
|
|
onProvinceChange(e) {
|
|
onProvinceChange(e) {
|
|
|
const index = e.detail.value;
|
|
const index = e.detail.value;
|
|
|
this.provinceIndex = index;
|
|
this.provinceIndex = index;
|
|
|
-
|
|
|
|
|
|
|
+
|
|
|
// 重置城市和区域选择
|
|
// 重置城市和区域选择
|
|
|
this.cityIndex = null;
|
|
this.cityIndex = null;
|
|
|
this.districtIndex = null;
|
|
this.districtIndex = null;
|
|
|
-
|
|
|
|
|
|
|
+
|
|
|
// 加载对应省份的城市
|
|
// 加载对应省份的城市
|
|
|
this.cities = this.provinces[index].children || [];
|
|
this.cities = this.provinces[index].children || [];
|
|
|
-
|
|
|
|
|
|
|
+
|
|
|
// 如果有城市数据,自动加载第一个城市的区域
|
|
// 如果有城市数据,自动加载第一个城市的区域
|
|
|
if (this.cities.length > 0) {
|
|
if (this.cities.length > 0) {
|
|
|
this.districts = this.cities[0].children || [];
|
|
this.districts = this.cities[0].children || [];
|
|
@@ -163,24 +137,24 @@ export default {
|
|
|
this.districts = [];
|
|
this.districts = [];
|
|
|
}
|
|
}
|
|
|
},
|
|
},
|
|
|
-
|
|
|
|
|
|
|
+
|
|
|
// 城市选择改变
|
|
// 城市选择改变
|
|
|
onCityChange(e) {
|
|
onCityChange(e) {
|
|
|
const index = e.detail.value;
|
|
const index = e.detail.value;
|
|
|
this.cityIndex = index;
|
|
this.cityIndex = index;
|
|
|
-
|
|
|
|
|
|
|
+
|
|
|
// 重置区域选择
|
|
// 重置区域选择
|
|
|
this.districtIndex = null;
|
|
this.districtIndex = null;
|
|
|
-
|
|
|
|
|
|
|
+
|
|
|
// 加载对应城市的区域
|
|
// 加载对应城市的区域
|
|
|
this.districts = this.cities[index].children || [];
|
|
this.districts = this.cities[index].children || [];
|
|
|
},
|
|
},
|
|
|
-
|
|
|
|
|
|
|
+
|
|
|
// 区域选择改变
|
|
// 区域选择改变
|
|
|
onDistrictChange(e) {
|
|
onDistrictChange(e) {
|
|
|
this.districtIndex = e.detail.value;
|
|
this.districtIndex = e.detail.value;
|
|
|
},
|
|
},
|
|
|
-
|
|
|
|
|
|
|
+
|
|
|
// 根据省市区名称设置选择器值(用于回显)
|
|
// 根据省市区名称设置选择器值(用于回显)
|
|
|
setAddressValue(provinceName, cityName, districtName) {
|
|
setAddressValue(provinceName, cityName, districtName) {
|
|
|
// 查找省份索引
|
|
// 查找省份索引
|
|
@@ -188,13 +162,13 @@ export default {
|
|
|
if (provinceIndex !== -1) {
|
|
if (provinceIndex !== -1) {
|
|
|
this.provinceIndex = provinceIndex;
|
|
this.provinceIndex = provinceIndex;
|
|
|
this.cities = this.provinces[provinceIndex].children || [];
|
|
this.cities = this.provinces[provinceIndex].children || [];
|
|
|
-
|
|
|
|
|
|
|
+
|
|
|
// 查找城市索引
|
|
// 查找城市索引
|
|
|
const cityIndex = this.cities.findIndex(item => item.name === cityName);
|
|
const cityIndex = this.cities.findIndex(item => item.name === cityName);
|
|
|
if (cityIndex !== -1) {
|
|
if (cityIndex !== -1) {
|
|
|
this.cityIndex = cityIndex;
|
|
this.cityIndex = cityIndex;
|
|
|
this.districts = this.cities[cityIndex].children || [];
|
|
this.districts = this.cities[cityIndex].children || [];
|
|
|
-
|
|
|
|
|
|
|
+
|
|
|
// 查找区域索引
|
|
// 查找区域索引
|
|
|
const districtIndex = this.districts.findIndex(item => item.name === districtName);
|
|
const districtIndex = this.districts.findIndex(item => item.name === districtName);
|
|
|
if (districtIndex !== -1) {
|
|
if (districtIndex !== -1) {
|
|
@@ -203,7 +177,7 @@ export default {
|
|
|
}
|
|
}
|
|
|
}
|
|
}
|
|
|
},
|
|
},
|
|
|
-
|
|
|
|
|
|
|
+
|
|
|
// 打开地图选择地址
|
|
// 打开地图选择地址
|
|
|
openMapSelector() {
|
|
openMapSelector() {
|
|
|
uni.chooseLocation({
|
|
uni.chooseLocation({
|
|
@@ -211,7 +185,7 @@ export default {
|
|
|
this.address = res.name || res.address;
|
|
this.address = res.name || res.address;
|
|
|
this.latitude = res.latitude;
|
|
this.latitude = res.latitude;
|
|
|
this.longitude = res.longitude;
|
|
this.longitude = res.longitude;
|
|
|
-
|
|
|
|
|
|
|
+
|
|
|
uni.showToast({
|
|
uni.showToast({
|
|
|
title: '请确认并补充省/市/区信息',
|
|
title: '请确认并补充省/市/区信息',
|
|
|
icon: 'none',
|
|
icon: 'none',
|
|
@@ -226,7 +200,7 @@ export default {
|
|
|
}
|
|
}
|
|
|
});
|
|
});
|
|
|
},
|
|
},
|
|
|
-
|
|
|
|
|
|
|
+
|
|
|
// 确认地址并回传
|
|
// 确认地址并回传
|
|
|
confirmAddress() {
|
|
confirmAddress() {
|
|
|
// 获取选中的省市区信息
|
|
// 获取选中的省市区信息
|
|
@@ -303,16 +277,16 @@ picker:disabled .picker-view {
|
|
|
bottom: 0;
|
|
bottom: 0;
|
|
|
display: flex;
|
|
display: flex;
|
|
|
flex-direction: column;
|
|
flex-direction: column;
|
|
|
-
|
|
|
|
|
|
|
+
|
|
|
.roles-content {
|
|
.roles-content {
|
|
|
width: 100%;
|
|
width: 100%;
|
|
|
flex: 1;
|
|
flex: 1;
|
|
|
overflow-y: auto;
|
|
overflow-y: auto;
|
|
|
-
|
|
|
|
|
|
|
+
|
|
|
.content {
|
|
.content {
|
|
|
padding: 40rpx;
|
|
padding: 40rpx;
|
|
|
box-sizing: border-box;
|
|
box-sizing: border-box;
|
|
|
-
|
|
|
|
|
|
|
+
|
|
|
.map-selector {
|
|
.map-selector {
|
|
|
display: flex;
|
|
display: flex;
|
|
|
align-items: center;
|
|
align-items: center;
|
|
@@ -324,27 +298,28 @@ picker:disabled .picker-view {
|
|
|
font-size: 28rpx;
|
|
font-size: 28rpx;
|
|
|
cursor: pointer;
|
|
cursor: pointer;
|
|
|
transition: background-color 0.2s;
|
|
transition: background-color 0.2s;
|
|
|
-
|
|
|
|
|
|
|
+
|
|
|
&:active {
|
|
&:active {
|
|
|
background-color: #e8ebf0;
|
|
background-color: #e8ebf0;
|
|
|
}
|
|
}
|
|
|
}
|
|
}
|
|
|
-
|
|
|
|
|
|
|
+
|
|
|
.location-info {
|
|
.location-info {
|
|
|
margin-top: 10rpx;
|
|
margin-top: 10rpx;
|
|
|
font-size: 24rpx;
|
|
font-size: 24rpx;
|
|
|
color: #999;
|
|
color: #999;
|
|
|
padding: 10rpx 0;
|
|
padding: 10rpx 0;
|
|
|
}
|
|
}
|
|
|
-
|
|
|
|
|
|
|
+
|
|
|
.required {
|
|
.required {
|
|
|
- color: #ff4d4f; /* 红色必填标记 */
|
|
|
|
|
|
|
+ color: #ff4d4f;
|
|
|
|
|
+ /* 红色必填标记 */
|
|
|
font-size: 32rpx;
|
|
font-size: 32rpx;
|
|
|
margin-left: 4rpx;
|
|
margin-left: 4rpx;
|
|
|
}
|
|
}
|
|
|
}
|
|
}
|
|
|
}
|
|
}
|
|
|
-
|
|
|
|
|
|
|
+
|
|
|
.submit-btn {
|
|
.submit-btn {
|
|
|
margin: 60rpx 20rpx;
|
|
margin: 60rpx 20rpx;
|
|
|
height: 96rpx;
|
|
height: 96rpx;
|
|
@@ -356,7 +331,7 @@ picker:disabled .picker-view {
|
|
|
justify-content: center;
|
|
justify-content: center;
|
|
|
align-items: center;
|
|
align-items: center;
|
|
|
transition: all 0.2s ease;
|
|
transition: all 0.2s ease;
|
|
|
-
|
|
|
|
|
|
|
+
|
|
|
&:active {
|
|
&:active {
|
|
|
transform: scale(0.98);
|
|
transform: scale(0.98);
|
|
|
opacity: 0.9;
|
|
opacity: 0.9;
|
|
@@ -368,7 +343,7 @@ picker:disabled .picker-view {
|
|
|
box-sizing: border-box;
|
|
box-sizing: border-box;
|
|
|
border: 2rpx solid #9ea1a8;
|
|
border: 2rpx solid #9ea1a8;
|
|
|
border-radius: 100rpx;
|
|
border-radius: 100rpx;
|
|
|
- padding: 8rpx 36rpx;
|
|
|
|
|
|
|
+ padding: 8rpx 36rpx;
|
|
|
height: 96rpx;
|
|
height: 96rpx;
|
|
|
}
|
|
}
|
|
|
|
|
|