优化地址选择,使用chooseLocation,传递经纬度

This commit is contained in:
WindowBird 2025-09-03 18:05:12 +08:00
parent 6c738fb09c
commit c08d860d58
2 changed files with 48 additions and 13 deletions

View File

@ -36,6 +36,7 @@ export default {
data() { data() {
return { return {
addressValue: this.value, addressValue: this.value,
locationData: null, //
} }
}, },
watch: { watch: {
@ -66,8 +67,13 @@ export default {
longitude: longitude || '', longitude: longitude || '',
success: res => { success: res => {
this.addressValue = res.address || res.name this.addressValue = res.address || res.name
this.locationData = res //
//
this.$emit('location-selected', res) this.$emit('location-selected', res)
this.$emit('location-success', res) this.$emit('location-success', res)
this.$emit('update:location', res) //
uni.setStorageSync('currentLocation', res) uni.setStorageSync('currentLocation', res)
}, },
fail: err => { fail: err => {
@ -86,6 +92,17 @@ export default {
}, },
}) })
}, },
//
getLocationData() {
return this.locationData
},
//
clearLocation() {
this.locationData = null
this.addressValue = ''
},
}, },
} }
</script> </script>
@ -98,7 +115,7 @@ export default {
.address-form-item { .address-form-item {
display: flex; display: flex;
align-items: center; /* 改为 center 让标签和内容垂直居中 */ align-items: center;
padding: 20rpx 0; padding: 20rpx 0;
.field-label { .field-label {
@ -106,7 +123,7 @@ export default {
color: #333; color: #333;
font-weight: 400; font-weight: 400;
flex: 1; flex: 1;
line-height: 1.5; /* 确保文本垂直居中 */ line-height: 1.5;
} }
} }
@ -128,7 +145,7 @@ export default {
.address-text { .address-text {
font-size: 28rpx; font-size: 28rpx;
color: #999; /* 改为浅灰色,符合图片中的提示文字颜色 */ color: #999;
line-height: 1.5; line-height: 1.5;
word-break: break-all; word-break: break-all;
white-space: pre-wrap; white-space: pre-wrap;
@ -144,7 +161,7 @@ export default {
justify-content: center; justify-content: center;
width: 48rpx; width: 48rpx;
height: 48rpx; height: 48rpx;
background: #f15a04; /* 橙色背景 */ background: #f15a04;
border-radius: 50%; border-radius: 50%;
margin-left: 16rpx; margin-left: 16rpx;
flex-shrink: 0; flex-shrink: 0;

View File

@ -45,14 +45,13 @@
<!-- 地址 --> <!-- 地址 -->
<map-location <map-location
ref="mapLocation"
v-model="formData.address" v-model="formData.address"
label="地址" label="地址"
placeholder="请输入或选择收货地址" placeholder="请输入或选择收货地址"
@input="onAddressInput" @input="onAddressInput"
@location-success="onLocationSuccess" @location-success="onLocationSuccess"
@location-error="onLocationError" @update:location="onLocationUpdate"
@use-location="onUseLocation"
@map-opened="onMapOpened"
/> />
<!-- 详细位置 --> <!-- 详细位置 -->
@ -178,17 +177,27 @@ export default {
} }
}, },
methods: { methods: {
onLocationSuccess(location) {
//
console.log('定位成功:', location)
this.updateFormLocation(location)
},
onLocationUpdate(location) {
// v-model
this.updateFormLocation(location)
},
updateFormLocation(location) {
//
this.formData.lat = location.latitude
this.formData.lot = location.longitude
},
// //
onAddressInput(value) { onAddressInput(value) {
this.formData.address = value this.formData.address = value
}, },
//
onLocationSuccess(location) {
console.log('位置获取成功:', location)
//
},
onLocationError(error) { onLocationError(error) {
console.error('位置获取失败:', error) console.error('位置获取失败:', error)
// //
@ -380,6 +389,15 @@ export default {
return return
} }
const locationData = this.$refs.mapLocation.getLocationData()
if (locationData) {
this.formData.lat = locationData.latitude
this.formData.lot = locationData.longitude
}
//
console.log('提交的表单数据:', this.formData)
// //
uni.showModal({ uni.showModal({
title: '确认支付', title: '确认支付',