<template>
? <view>
? ? <!-- uni的搜索框 -->
? ? <view class="search-box">
? ? ? <uni-search-bar @input="input" :radius="100" cancelButton="none"></uni-search-bar>
? ? </view>
? ? <!-- 搜索建議列表 -->
? ? <view class="sugg-list" v-if="searchResults.length !== 0">
? ? ? <view class="sugg-item" v-for="(item,i) in searchResults" :key="i" @click="gotoDatail(item)">
? ? ? ? <view class="goos-name"> {{item.goods_name}} </view>
? ? ? ? <uni-icons type="arrowright" size="17" ></uni-icons>
? ? ? </view>
? ? </view>
? ? <!-- 搜索歷史盒子 -->
? ? <view class="history-box" v-else>
? ? ? <!-- 歷史標(biāo)題區(qū)域 -->
? ? ? <view class="history-title">
? ? ? ? <text>搜索歷史</text>
? ? ? ? <uni-icons type="trash" size="17" @click="cleanHistory"></uni-icons>
? ? ? </view>
? ? ? <!-- 歷史記錄列表區(qū)域 -->
? ? ? <view class="history-list">
? ? ? ? <uni-tag :text="item" v-for="(item,i) in historyList" :key="i"></uni-tag>
? ? ? </view>
? ? </view>
? </view>
</template>

<style lang="scss">
? .search-box {
? ? position: sticky; //搜索框黏性定位
? ? top: 0;
? ? z-index: 999;
? ??
? ? .uni-searchbar {
? ? ? background-color: #C00000 !important;
? ? }
? }
//搜索列表樣式
? .sugg-list {
? ? padding: 0 5px;

? ? .sugg-item {
? ? ? display: flex;
? ? ? align-items: center;
? ? ? justify-content: space-between; //兩端對(duì)其
? ? ? font-size: 12px;
? ? ? padding: 13px 0;
? ? ? border-bottom: 1px solid #EEEEEE;

? ? ? .goos-name {
? ? ? ? white-space: nowrap; // 文字不允許換行
? ? ? ? overflow: hidden;
? ? ? ? text-overflow: ellipsis; //文本超出內(nèi)容用。。。隱藏
? ? ? }
? ? }
? }
//搜索歷史樣式
? .history-box {
? ? padding: 0 5px;

? ? .history-title {
? ? ? display: flex;
? ? ? justify-content: space-between; //兩側(cè)對(duì)齊
? ? ? height: 40px;
? ? ? align-items: center;
? ? ? font-size: 13px;
? ? ? border: 1px solid #efefef;

? ? ? .history-list {
? ? ? ? display: flex;
? ? ? ? flex-wrap: wrap;

? ? ? ? .uni-tag {
? ? ? ? ? margin: 0 2px;
? ? ? ? }
? ? ? }
? ? }
? }
</style>

<script>
? export default {
? ? data() {
? ? ? return {
? ? ? ? timer: null, //接收定時(shí)器
? ? ? ? kw: '', //input的最新值
? ? ? ? searchResults: [], // 搜索的結(jié)果列表
? ? ? ? historyList: [], // 搜索歷史的數(shù)組
? ? ? };
? ? },
? ? onLoad() { // 頁面開始加載獲取本地搜索歷史存儲(chǔ)數(shù)據(jù)
? ? ?this.historyList = JSON.parse(uni.getStorageSync('kw') || '[]') //頁面加載獲取搜索歷史
? ? },
? ? methods: {
? ? ? input(e) { // input 輸入事件的處理函數(shù)
? ? ? ? // console.log(e) //可以拿到最新的值
? ? ? ? clearTimeout(this.timer) // 清除定時(shí)器
? ? ? ? // 節(jié)流處理
? ? ? ? this.timer = setTimeout(() => { //開啟定時(shí)器
? ? ? ? ? // console.log(e)
? ? ? ? ? this.kw = e // 輸入框最新值 賦值給kw
? ? ? ? ? this.getSearchList() // 調(diào)用獲取搜索
? ? ? ? }, 500)
? ? ? },
? ? ? // 獲取搜索聯(lián)想建議方法
? ? ? async getSearchList() {
? ? ? // 判斷input的值是否為空
? ? ? ? if (this.kw.length === 0) {
? ? ? ? ? this.searchResults = [] // 清空搜索結(jié)果
? ? ? ? ? return // 停止執(zhí)行
? ? ? ? }
? ? ? ? // 獲取搜索結(jié)果
? ? ? ? const {
? ? ? ? ? data: res
? ? ? ? } = await uni.$http.get('/api/.....', {
? ? ? ? ? query: this.kw
? ? ? ? })
? ? ? ? // 判斷是否成功獲取數(shù)據(jù)
? ? ? ? if (res.meta.status !== 200) return uni.$showMsg()
? ? ? ? // 獲取成功把結(jié)果賦值
? ? ? ? this.searchResults = res.message
? ? ? ? this.saveSearchHistory() // 調(diào)用保存搜索歷史記錄
? ? ? },
? ? ? // 搜索聯(lián)想列表詳細(xì)頁跳轉(zhuǎn)方法
? ? ? gotoDatail(item) {
? ? ? ? uni.navigateTo({
? ? ? ? ? url: '/subpkg/goods_detail/goods_detail?goods_id=' + item.goods_id
? ? ? ? })
? ? ? },
? ? ? // 保存搜索歷史記錄并持久化歷史搜索方法
? ? ? saveSearchHistory() {?
? ? ? // 查找搜索歷史結(jié)果數(shù)組中，重復(fù)的搜索
? ? ? ? const index = this.historyList.findIndex(x => x === this.kw) // 返回結(jié)果 ?-1代表沒有
? ? ? ? // 判斷是否大于0 大于等于存在
? ? ? ? if (index >= 0) {
? ? ? ? // 刪除找到記錄
? ? ? ? ? this.historyList.splice(index, 1)
? ? ? ? }
? ? ? ? // 把input新值向數(shù)組開頭添加
? ? ? ? this.historyList.unshift(this.kw)
? ? ? ? //持久化搜索歷史
? ? ? ? uni.setStorageSync('kw', this.historyList)
? ? ? },
? ? ? // 清空搜索歷史記錄方法
? ? ? cleanHistory() {?
? ? ? ? // 清空 data 中保存的搜索歷史
? ? ? ? this.historyList = []
? ? ? ? // 清空本地存儲(chǔ)中記錄的搜索歷史
? ? ? ? uni.setStorageSync('kw', '[]')
? ? ? }
? ? }
? }
</script>