xs/xs-app/pages/search/search.vue

<template>
	<view class="content">
		<searchNav :height='search_nav_height' :searchContent='search_content' @onInput='searchOnInput' @clickSearch='searchNavClickSearch'></searchNav>
		<view class="" :style="{marginTop:search_nav_height + 'rpx'}">
			<record v-if="!is_search" :data_list='data_record_list'
			@clickDeleteAll='recordClickDeleteAll'
			@clickItem='recordClickItem'></record>
			<list v-else></list>
		</view>
	</view>
</template>

<script setup lang="ts">
	import searchNav from '../search/search-nav.vue'
	import record from '../search/search-record.vue'
	import list from '../search/search-list.vue'
	
    import { ref } from 'vue';
    import { http } from '../../framework/http';
    import { config } from '../../config/config';
    import { util } from '../../framework/util';
    import { SearchManager } from '../../stores/searchManager';
    import { search_item_data } from '../../data/data';
	
	let search_nav_height = ref(100)
	let search_content = ref('')
	let is_search = ref(false)
	let data_record_list = ref([])
	
	initData()
	
	function initData() {
		data_record_list.value = SearchManager.getList()
	}
	
	function recordClickDeleteAll() {
		if(data_record_list.value.length<=0) {
			return
		}
		util.showModal('清空历史记录', '', ()=>{
			data_record_list.value = []
			SearchManager.resetData(data_record_list.value)
		})
	}
		
	function recordClickItem(item:search_item_data) {
		search_content.value = item.name
		searchNavClickSearch(item.name)
	}
	
	function searchOnInput(r:string) {
		if(r.length<=0) {
			is_search.value = false
		}
	}
		
	function searchNavClickSearch(r:string) {
		// console.log('searchNavClickSearch=',r)
		if(r.length<=0) {
			util.showInfoToast('请输入搜索关键字')
			return
		}
		is_search.value = true
		
		data_record_list.value = SearchManager.addName(r)
		searchBook(r)
	}
	
	function searchBook(kw:string) {
		util.showLoading()
		let opt = {'kw': kw}
		http.DynamicRequest(config.url_confg.Dynamic.book_search, opt, (err=null,data=null)=>{
			util.hideLoading()
			if(!err&&data) {
				if(data.code==config.url_confg.StatesCode.SUCCESS){
					// console.log('data=',data)
				}
			}
		})
	}
	
</script>

<style lang="scss">
	.content{
		display: flex;
		flex-direction: column;
	}

</style>