优化地址选择,使用chooseLocation,传递经纬度
This commit is contained in:
parent
6c738fb09c
commit
c08d860d58
|
|
@ -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;
|
||||||
|
|
|
||||||
|
|
@ -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: '确认支付',
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue
Block a user