租赁页面地址选取的精简
This commit is contained in:
WindowBird
parent
e326254bd6
commit
b34801c6b6
|
|
@ -6,43 +6,39 @@
|
|||
<view class="address-input-wrapper">
|
||||
<input
|
||||
v-model="addressValue"
|
||||
class="address-input"
|
||||
:placeholder="placeholder || '请输入或选择收货地址'"
|
||||
class="address-input"
|
||||
@focus="onAddressFocus"
|
||||
@input="onAddressInput"
|
||||
/>
|
||||
<view
|
||||
class="map-icon-wrapper"
|
||||
title="点击获取定位并打开地图"
|
||||
@click="openMapWithLocation"
|
||||
>
|
||||
<view class="map-icon-wrapper" title="点击获取定位并打开地图" @click="openMapWithLocation">
|
||||
<text class="map-icon">🗺️</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 当前定位 -->
|
||||
<view class="location-suggestion">
|
||||
<view v-if="currentLocation" class="location-card">
|
||||
<view class="location-content">
|
||||
<view class="location-header">
|
||||
<text class="location-title">当前定位</text>
|
||||
</view>
|
||||
<text class="location-address">{{ currentLocation.address }}</text>
|
||||
</view>
|
||||
<button class="use-location-btn" @click="useCurrentLocation">使用</button>
|
||||
</view>
|
||||
<view v-else class="location-card">
|
||||
<view class="location-content">
|
||||
<view class="location-header">
|
||||
<text class="location-title">获取位置</text>
|
||||
<text class="location-company">点击获取当前位置</text>
|
||||
</view>
|
||||
<text class="location-address">需要定位权限</text>
|
||||
</view>
|
||||
<button class="get-location-btn" @click="getCurrentLocation">获取</button>
|
||||
</view>
|
||||
</view>
|
||||
<!-- <view class="location-suggestion">-->
|
||||
<!-- <view v-if="currentLocation" class="location-card">-->
|
||||
<!-- <view class="location-content">-->
|
||||
<!-- <view class="location-header">-->
|
||||
<!-- <text class="location-title">当前定位</text>-->
|
||||
<!-- </view>-->
|
||||
<!-- <text class="location-address">{{ currentLocation.address }}</text>-->
|
||||
<!-- </view>-->
|
||||
<!-- <button class="use-location-btn" @click="useCurrentLocation">使用</button>-->
|
||||
<!-- </view>-->
|
||||
<!-- <view v-else class="location-card">-->
|
||||
<!-- <view class="location-content">-->
|
||||
<!-- <view class="location-header">-->
|
||||
<!-- <text class="location-title">获取位置</text>-->
|
||||
<!-- <text class="location-company">点击获取当前位置</text>-->
|
||||
<!-- </view>-->
|
||||
<!-- <text class="location-address">需要定位权限</text>-->
|
||||
<!-- </view>-->
|
||||
<!-- <button class="get-location-btn" @click="getCurrentLocation">获取</button>-->
|
||||
<!-- </view>-->
|
||||
<!-- </view>-->
|
||||
</view>
|
||||
</template>
|
||||
|
||||
|
|
@ -55,29 +51,29 @@ export default {
|
|||
// 表单标签
|
||||
label: {
|
||||
type: String,
|
||||
default: '地址'
|
||||
default: '地址',
|
||||
},
|
||||
// 输入框占位符
|
||||
placeholder: {
|
||||
type: String,
|
||||
default: '请输入或选择收货地址'
|
||||
default: '请输入或选择收货地址',
|
||||
},
|
||||
// 地址值
|
||||
value: {
|
||||
type: String,
|
||||
default: ''
|
||||
default: '',
|
||||
},
|
||||
// 是否显示位置建议卡片
|
||||
showLocationCard: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
}
|
||||
default: true,
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
currentLocation: null,
|
||||
isMapTriggered: false,
|
||||
addressValue: this.value
|
||||
addressValue: this.value,
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
|
|
@ -86,7 +82,7 @@ export default {
|
|||
},
|
||||
addressValue(newVal) {
|
||||
this.$emit('input', newVal)
|
||||
}
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
// 获取当前位置信息
|
||||
|
|
@ -262,8 +258,8 @@ export default {
|
|||
// 清空位置信息
|
||||
clearLocation() {
|
||||
this.currentLocation = null
|
||||
}
|
||||
}
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
|
|
|
|||
|
|
@ -23,11 +23,7 @@
|
|||
<!-- 姓名 -->
|
||||
<view class="form-item">
|
||||
<text class="field-label">姓名</text>
|
||||
<input
|
||||
v-model="formData.name"
|
||||
class="field-input"
|
||||
placeholder="请输入姓名"
|
||||
/>
|
||||
<input v-model="formData.name" class="field-input" placeholder="请输入姓名" />
|
||||
</view>
|
||||
|
||||
<!-- 手机号 -->
|
||||
|
|
@ -46,11 +42,11 @@
|
|||
v-model="formData.address"
|
||||
label="地址"
|
||||
placeholder="请输入或选择收货地址"
|
||||
@input="onAddressInput"
|
||||
@location-success="onLocationSuccess"
|
||||
@location-error="onLocationError"
|
||||
@use-location="onUseLocation"
|
||||
@map-opened="onMapOpened"
|
||||
@input="onAddressInput"
|
||||
/>
|
||||
|
||||
<!-- 详细位置 -->
|
||||
|
|
@ -159,8 +155,14 @@ export default {
|
|||
const packageSelected = !!this.formData.periodId
|
||||
const amountValid = parseFloat(this.totalAmount) > 0
|
||||
|
||||
const canPayResult = nameValid && phoneValid && addressValid && detailAddressValid &&
|
||||
equipmentSelected && packageSelected && amountValid
|
||||
const canPayResult =
|
||||
nameValid &&
|
||||
phoneValid &&
|
||||
addressValid &&
|
||||
detailAddressValid &&
|
||||
equipmentSelected &&
|
||||
packageSelected &&
|
||||
amountValid
|
||||
|
||||
// 实时调试信息
|
||||
console.log('🔍 canPay 实时检查:', {
|
||||
|
|
@ -175,7 +177,7 @@ export default {
|
|||
equipmentSelected,
|
||||
packageSelected,
|
||||
amountValid,
|
||||
canPay: canPayResult
|
||||
canPay: canPayResult,
|
||||
})
|
||||
|
||||
return canPayResult
|
||||
|
|
@ -201,9 +203,9 @@ export default {
|
|||
'formData.periodId'() {
|
||||
console.log('🔍 套餐ID变化:', this.formData.periodId)
|
||||
},
|
||||
'totalAmount'() {
|
||||
totalAmount() {
|
||||
console.log('🔍 总金额变化:', this.totalAmount)
|
||||
}
|
||||
},
|
||||
},
|
||||
onLoad() {
|
||||
// 页面加载时获取设备类型列表
|
||||
|
|
@ -230,8 +232,6 @@ export default {
|
|||
}
|
||||
},
|
||||
methods: {
|
||||
|
||||
|
||||
// 地址输入处理
|
||||
onAddressInput(value) {
|
||||
console.log('🔍 地址输入变化:', value)
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user