优化地址选择,使用chooseLocation,传递经纬度
This commit is contained in:
parent
6c738fb09c
commit
c08d860d58
|
|
@ -36,6 +36,7 @@ export default {
|
|||
data() {
|
||||
return {
|
||||
addressValue: this.value,
|
||||
locationData: null, // 存储完整的定位信息
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
|
|
@ -66,8 +67,13 @@ export default {
|
|||
longitude: longitude || '',
|
||||
success: res => {
|
||||
this.addressValue = res.address || res.name
|
||||
this.locationData = res // 保存完整的定位信息
|
||||
|
||||
// 触发事件传递给父组件
|
||||
this.$emit('location-selected', res)
|
||||
this.$emit('location-success', res)
|
||||
this.$emit('update:location', res) // 新增:传递完整定位数据
|
||||
|
||||
uni.setStorageSync('currentLocation', res)
|
||||
},
|
||||
fail: err => {
|
||||
|
|
@ -86,6 +92,17 @@ export default {
|
|||
},
|
||||
})
|
||||
},
|
||||
|
||||
// 新增方法:获取经纬度数据供父组件调用
|
||||
getLocationData() {
|
||||
return this.locationData
|
||||
},
|
||||
|
||||
// 新增方法:清空定位数据
|
||||
clearLocation() {
|
||||
this.locationData = null
|
||||
this.addressValue = ''
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
|
@ -98,7 +115,7 @@ export default {
|
|||
|
||||
.address-form-item {
|
||||
display: flex;
|
||||
align-items: center; /* 改为 center 让标签和内容垂直居中 */
|
||||
align-items: center;
|
||||
padding: 20rpx 0;
|
||||
|
||||
.field-label {
|
||||
|
|
@ -106,7 +123,7 @@ export default {
|
|||
color: #333;
|
||||
font-weight: 400;
|
||||
flex: 1;
|
||||
line-height: 1.5; /* 确保文本垂直居中 */
|
||||
line-height: 1.5;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -128,7 +145,7 @@ export default {
|
|||
|
||||
.address-text {
|
||||
font-size: 28rpx;
|
||||
color: #999; /* 改为浅灰色,符合图片中的提示文字颜色 */
|
||||
color: #999;
|
||||
line-height: 1.5;
|
||||
word-break: break-all;
|
||||
white-space: pre-wrap;
|
||||
|
|
@ -144,7 +161,7 @@ export default {
|
|||
justify-content: center;
|
||||
width: 48rpx;
|
||||
height: 48rpx;
|
||||
background: #f15a04; /* 橙色背景 */
|
||||
background: #f15a04;
|
||||
border-radius: 50%;
|
||||
margin-left: 16rpx;
|
||||
flex-shrink: 0;
|
||||
|
|
|
|||
|
|
@ -45,14 +45,13 @@
|
|||
|
||||
<!-- 地址 -->
|
||||
<map-location
|
||||
ref="mapLocation"
|
||||
v-model="formData.address"
|
||||
label="地址"
|
||||
placeholder="请输入或选择收货地址"
|
||||
@input="onAddressInput"
|
||||
@location-success="onLocationSuccess"
|
||||
@location-error="onLocationError"
|
||||
@use-location="onUseLocation"
|
||||
@map-opened="onMapOpened"
|
||||
@update:location="onLocationUpdate"
|
||||
/>
|
||||
|
||||
<!-- 详细位置 -->
|
||||
|
|
@ -178,17 +177,27 @@ export default {
|
|||
}
|
||||
},
|
||||
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) {
|
||||
this.formData.address = value
|
||||
},
|
||||
|
||||
// 地图组件事件处理
|
||||
onLocationSuccess(location) {
|
||||
console.log('位置获取成功:', location)
|
||||
// 可以在这里处理位置获取成功后的逻辑
|
||||
},
|
||||
|
||||
onLocationError(error) {
|
||||
console.error('位置获取失败:', error)
|
||||
// 可以在这里处理位置获取失败后的逻辑
|
||||
|
|
@ -380,6 +389,15 @@ export default {
|
|||
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({
|
||||
title: '确认支付',
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user