diff --git a/pages/lease/lease.vue b/pages/lease/lease.vue index 0564e58..1dbe23e 100644 --- a/pages/lease/lease.vue +++ b/pages/lease/lease.vue @@ -40,9 +40,18 @@ 地址 - - {{ formData.address || '选择收货地址' }} - + + + 🗺️ @@ -151,6 +160,7 @@ export default { currentLocation: null, showDetails: false, totalAmount: '100.10', + isMapTriggered: false, } }, methods: { @@ -172,14 +182,46 @@ export default { } uni.hideLoading() - uni.showToast({ - title: '位置获取成功,点击地图图标查看', - icon: 'success', - duration: 3000, - }) + + // 如果不是通过地图图标触发的,才显示提示 + if (!this.isMapTriggered) { + uni.showToast({ + title: '位置获取成功,点击地图图标查看', + icon: 'success', + duration: 3000, + }) + } + + return this.currentLocation } catch (err) { uni.hideLoading() handleLocationError(err) + throw err + } + }, + + // 地址输入框获得焦点 + onAddressFocus() { + // 可以在这里添加地址输入的相关逻辑 + console.log('地址输入框获得焦点') + }, + + // 点击地图图标,自动获取定位并打开地图 + async openMapWithLocation() { + try { + this.isMapTriggered = true + // 先获取当前位置 + await this.getCurrentLocation() + // 获取成功后自动打开地图 + this.openMap() + } catch (err) { + console.error('获取位置失败:', err) + uni.showToast({ + title: '获取位置失败', + icon: 'error', + }) + } finally { + this.isMapTriggered = false } }, @@ -428,7 +470,62 @@ export default { margin-bottom: 20rpx; } -// 地址选择器 +// 地址输入框包装器 +.address-input-wrapper { + flex: 3; + display: flex; + align-items: center; + height: 80rpx; + padding: 0 20rpx; + border-radius: 12rpx; + background: #fff; + //border: 1rpx solid #e0e0e0; + transition: all 0.3s ease; + + &:focus-within { + border-color: #f15a04; + box-shadow: 0 0 0 2rpx rgba(241, 90, 4, 0.1); + } + + .address-input { + flex: 1; + height: 100%; + font-size: 28rpx; + color: #333; + border: none; + outline: none; + background: transparent; + + &::placeholder { + color: #999; + } + } + + .map-icon-wrapper { + display: flex; + align-items: center; + justify-content: center; + width: 48rpx; + height: 48rpx; + background: #f15a04; + border-radius: 50%; + transition: all 0.3s ease; + //box-shadow: 0 4rpx 12rpx rgba(241, 90, 4, 0.3); + margin-left: 16rpx; + + &:active { + transform: scale(0.9); + box-shadow: 0 2rpx 8rpx rgba(241, 90, 4, 0.4); + } + + .map-icon { + font-size: 28rpx; + color: white; + } + } +} + +// 地址选择器(保留原有样式,以防其他地方使用) .address-selector { flex: 3; display: flex; @@ -533,7 +630,7 @@ export default { } .use-location-btn { - background: #f3f5f5; + background: #f15a04; color: #000000; border: none; border-radius: 24rpx;