inputBorder="false" :styles="{width: '100%', height: '100%'}"
placeholder="搜索行程地点名称" @confirm="handleSearch"></uni-easyinput>
</view>
<view class="action">
<view class="row-between">
<view class="" @click="handleSearch(keyword)">
<text class="cuIcon-search line-white"></text>
<text class="text-df text-white">搜索</text>
</view>
<view class="margin-left" @click="cancelSearch">
<!-- <text class="cuIcon-close"></text>-->
<text class="text-df">取消</text>
</view>
</view>
</view>
</view>
<view class="" v-if="searchResult.list"> <!--搜索结果-->
{{searchResult.list.length}}
<scroll-view scroll-y="true" style="max-height: calc(100vh - 52px);" class="">
<u-cell-group>
<u-cell :arrow="false" :isLink="true" v-for="item in searchResult.list" :key="item.id" @click="onSelect(item)">
<view slot="title" class="flex justify-start align-center">
<view class=".cuIcon-location"/>
<um-texthighlight class="margin-left-xs text-df" :text="item.name" :keyword="keyword" color="blue"/>
</view>
<view slot="label" class="text-grey text-sm">
<view class="row-start margin-top-xs">
<text class="margin-left-lg">{{ item.pname }}</text>
<text class="margin-left-sm">{{ item.cityname }}</text>
<text class="margin-left-sm">{{ item.adname }}</text>
</view>
<view class="row-start margin-top-xs">
<view class="margin-left-lg">{{ item.address }}</view>
</view>
</view>
<view slot="right-icon">
<!-- <u-icon name="star" size="20" @clicl.stop="collectLocation(item)"/>-->
<text class="text-grey text-sm" @click.stop="collectLocation(item)" v-show="!inCollect(item)">收藏地址
</text>
</view>
</u-cell>
</u-cell-group>
</scroll-view>
</view>
<view class="" v-show="collect.show">
<view class="padding-sm">
<text class="text-black text-df">收藏过的地址</text>
</view>
<scroll-view scroll-y="true" style="height: calc(100vh - 92px);max-height: calc(100vh - 92px);" class="">
<u-cell-group>
<u-cell :arrow="false" :isLink="true" v-for="(item, index) in collect.list" @click="onSelect(item)">
<view slot="title" class="flex justify-start align-center">
<view class=".cuIcon-location"/>
<um-texthighlight class="margin-left-xs text-df" :text="item.name" :keyword="keyword" color="blue"/>
</view>
<view slot="label" class="text-grey text-sm">
<view class="row-start margin-top-xs">
<text class="margin-left-lg">{{ item.pname }}</text>
<text class="margin-left-sm">{{ item.cityname }}</text>
<text class="margin-left-sm">{{ item.adname }}</text>
</view>
<view class="row-start margin-top-xs">
<view class="margin-left-lg">{{ item.address }}</view>
</view>
</view>
<view slot="right-icon">
<text class="text-grey text-sm" @click.stop="unCollectLocation(index)">取消收藏</text>
</view>
</u-cell>
</u-cell-group>
</scroll-view>
</view>
</view>
</template>
<script>
import debounce from "../../uni_modules/uview-ui/libs/function/debounce";
import {getGaodePlaceSearchV2} from "../../api/common";
import UmTexthighlight from "../../uni_modules/um-texthighlight/components/um-texthighlight/um-texthighlight.vue";
import UniEasyinput from "../../uni_modules/uni-easyinput/components/uni-easyinput/uni-easyinput.vue";
import UIcon from "../../uni_modules/uview-ui/components/u-icon/u-icon.vue";
import {getAppUserPreference, saveAppUserPreference} from "../../api/user";
import {info} from "../../utils/wxlog";
const PREFERENCE_SCENE_COLLECT_ADDRESS = 'app:trip:collect-address';
export default {
name: 'location-search',
props: [],
components: {UIcon, UniEasyinput, UmTexthighlight},
data() {
return {
keyword: undefined,
searchResult: {
show: false, // 展示搜索结果开关，仅在用户输入关键字请求后台数据后展示
list: undefined, // 搜索结果数据
},
collect: {
show: true, // 默认展示收藏地址
list: [],
},
}
},
onLoad(option) {
// console.log(option)
},
computed: {},
created() {
this.refreshCollect()
},
methods: {
/**
- 搜索框获取焦点
*/
inputFocus() {
// console.log('搜索框获取焦点')
// 隐藏收藏地址列表
this.collect.show = false
this.searchResult.show = true
},
/** - 搜索框失去焦点
*/
inputBlur() {
// console.log('搜索框失去焦点')
// 显示收藏地址列表
if (!this.keyword || this.keyword.length === 0) {
this.collect.show = true
this.searchResult.show = false
}
},
/** - 初始化搜索框内容
*/
initSearch(location) {
// 自动填入关键字
this.$set(this, 'keyword', location.name || '')
this.clearSearchResult()
// 自动获取输入框焦点 todo
// 更新收藏地址
this.refreshCollect()
},
/** - 取消搜索
*/
cancelSearch() {
this.$emit('cancel')
},
/** - 处理用户输入的搜索关键字
*/
handleSearch(keyword) {
this.keyword = keyword
if (!keyword || keyword.length === 0) {
// toast：请输入地点名称
uni.$u.toast('请输入地点名称')
return
}
uni.showLoading({
title: '搜索中'
});
// 调后端接口查询地址
getGaodePlaceSearchV2({
keywords: keyword,
}).then(({data}) => {
this.searchResult.list = data.pois;
this.searchResult.show = true
this.collect.show = false
uni.hideLoading();
this.$forceUpdate()
info('高德地点搜索后端返回第一个地点', this.searchResult.list[0])
info('搜索展示开关状态', this.searchResult.show)
info('收藏地址展示开关状态', this.collect.show)
}).catch(err => {
info('高德地点搜索后端报错', err.data)
uni.$u.toast(err.data.msg)
})
},
/** - 清空搜索结果
- @param item
*/
clearSearchResult() {
this.searchResult.show = false
this.collect.show = true
this.searchResult.list = undefined
},
/** - 刷新收藏地址列表
*/
refreshCollect() {
getAppUserPreference(PREFERENCE_SCENE_COLLECT_ADDRESS, list => {
this.collect.list = list
console.log('收藏地址列表：', list)
})
},
/** - 收藏地址
*/
collectLocation(item) {
if (!this.collect.list) {
this.collect.list = []
}
this.collect.list.push(item)
saveAppUserPreference(PREFERENCE_SCENE_COLLECT_ADDRESS, this.collect.list).then(({data}) => {
// toast
uni.$u.toast('收藏成功')
this.refreshCollect()
})
},
/** - 取消收藏
*/
unCollectLocation(index) {
this.collect.list.splice(index, 1)
saveAppUserPreference(PREFERENCE_SCENE_COLLECT_ADDRESS, this.collect.list).then(({data}) => {
// toast
uni.$u.toast('取消成功')
this.refreshCollect()
})
},
/** - 判断某个地址在不在收藏列表
*/
inCollect(location) {
return this.collect.list.findIndex(item => item.id === location.id) > -1
},
/** - 选中搜索出来的地址
*/
onSelect(item) {
this.$emit('select', item)
},
},
}
</script>
<style lang="scss" scoped>
</style>
