<template>
|
<view class="container">
|
<uv-input
|
style="border: none;padding: 0;width: 100%;flex: 1"
|
v-model="addressKeyword"
|
placeholder="支持地址联想"
|
@input="handleInput"
|
@focus="suggestionsVisible = true"
|
/>
|
<view v-if="suggestionsVisible && suggestions.length > 0" class="suggestions-list">
|
<view
|
v-for="(item, index) in suggestions"
|
:key="index"
|
class="suggestion-item"
|
@click="selectAddress(item)"
|
>
|
{{ item.name }}
|
</view>
|
</view>
|
|
</view>
|
</template>
|
<script>
|
import debounce from '@/uni_modules/uv-ui-tools/libs/function/debounce.js';
|
import {searchAddress} from "@/api/modules/user";
|
|
export default {
|
data() {
|
return {
|
addressKeyword: '', // 输入框内容
|
suggestions: [], // 地址联想列表
|
suggestionsVisible: false, // 是否显示联想列表
|
};
|
},
|
methods: {
|
handleInput(){
|
debounce(()=>{
|
searchAddress({'city':'海口市',query:this.addressKeyword}).then(res=>{
|
this.suggestions = res;
|
})
|
|
})
|
|
},
|
|
// 选择地址
|
selectAddress(item) {
|
this.addressKeyword = item.name+' '+item.address;
|
console.log(addressKeyword);
|
this.suggestionsVisible = false;
|
uni.showToast({
|
title: `已选择：${item.name}`,
|
icon: 'none',
|
});
|
// 触发事件或更新其他相关数据
|
this.$emit('select', item);
|
},
|
},
|
watch: {
|
addressKeyword(newVal) {
|
if (!newVal) this.suggestionsVisible = false;
|
},
|
},
|
};
|
</script>
|
<style scoped>
|
.container {
|
position: relative;
|
}
|
|
.suggestions-list {
|
position: absolute;
|
background: white;
|
z-index: 999999999999;
|
top: 44px;
|
border: 1px solid #eee;
|
border-radius: 4px;
|
max-height: 160px;
|
overflow-y: auto;
|
}
|
|
.suggestion-item {
|
padding: 10px;
|
border-bottom: 1px solid #eee;
|
font-size: 14px;
|
position: relative;
|
z-index: 9999999999;
|
}
|
|
.suggestion-item:last-child {
|
border-bottom: none;
|
}
|
|
|
</style>
|
