zhishifufei_uniapp/pages/index/search.vue

<template>
  <BaseContainer class="search-page">
    <NavBar title="搜索" />
    <view class="form">
      <view class="left flex-center-x">
        <i class="iconfont2 iconsousuo"></i>
        <input v-model.trim="search" confirm-type="search" @input="onSearch(search)" placeholder="搜索课程" />
        <i v-show="search" class="iconfont iconguanbi2" @click="search = ''"></i>
      </view>
    </view>
    <view v-if="historyList.length" class="section">
      <view class="title">
        <view class="text">历史记录</view>
        <i class="iconfont iconshanchu" @click="deleteHistory"></i>
      </view>
      <view class="content">
        <text v-for="(item, index) in historyList" :key="index" @click="onSearch(item.search)">{{ item.search }}</text>
      </view>
    </view>
    <view v-if="hotList.length" class="section">
      <view class="title">
        <view class="text">热门搜索</view>
      </view>
      <view class="content">
        <text v-for="(item, index) in hotList" :key="index" @click="onSearch(item)">{{
          item
        }}</text>
      </view>
    </view>
    <view v-if="specialList.length" class="special-section">
      <view class="title">专题</view>
      <view>
        <navigator v-for="item in specialList" :key="item.id" :url="getJumpUrl(item)">
          <view class="image">
            <image :src="item.image" mode="aspectFill" :alt="item.title" />
            <view v-if="item.type == 1" class="type">图文</view>
            <view v-else-if="item.type == 2" class="type">音频</view>
            <view v-else-if="item.type == 3" class="type">视频</view>
            <view v-else-if="item.type == 5" class="type">专栏</view>
          </view>
          <view class="text">
            <view class="special-title">{{ item.title }}</view>
            <view class="label">
              <text v-for="(label, index) in item.label" :key="index">{{ label }}</text>
            </view>
            <view class="money-total">
              <view class="money">
                ￥<text>{{ item.money }}</text>
              </view>
              <view v-if="!item.is_light" class="total">共{{ item.count }}节</view>
            </view>
          </view>
        </navigator>
      </view>
    </view>
    <image v-if="isEmpty" class="empty" mode="aspectFit" :src="getImgPath('/wap/first/zsff/images/no_search.png')"
      alt="暂无搜索结果" />
  </BaseContainer>
</template>

<script>
import {
  getSearchHistory,
  getHotSearch,
  getSearchContent,
  clearSearchHistory,
} from "@/api/index";
import { debounce } from 'lodash'; 

export default {
  data() {
    return {
      search: "",
      historyList: [],
      hotList: [],
      specialList: [],
			page: 1,
      limit: 10,
      singleDetailsURL: "/pages/special/single_details",
      detailsURL: "/pages/special/details",
      isEmpty: false,
    };
  },
  watch: {
    specialList(val) {
      this.isEmpty = !val.length;
    },
  },
  created() {
    this.getSearchHistory();
    this.getHotSearch();
  },
  onShareAppMessage() {
    return {};
  },
  onShareTimeline() {
    return {};
  },
  methods: {
    getJumpUrl(item) {
      return item.is_light ? this.singleDetailsURL : this.detailsURL + "?id=" + item.id;
    },
    // 获取搜索历史
    getSearchHistory() {
      getSearchHistory().then(({ data }) => {
        this.historyList = data;
      });
    },
    // 获取热门搜索
    getHotSearch() {
      getHotSearch().then(({ data }) => {
        this.hotList = data;
      });
    },
    // 搜索内容
    onSearch: debounce(function (search) {
			this.search = search;
      this.getSearchList();
    }, 500),
		async getSearchList() {
			if (!this.search || this.loading) {
			  return;
			}
			this.loading = true;
			uni.showLoading({
			  mask: true,
			});
			
			try {
			  const { data } = await getSearchContent(this.search, this.limit);
			  this.specialList = data.special;
			  if(this.specialList.length == 0){
			    this.$util.showMsg("未查询到相关数据");
			  }
			  uni.hideLoading();
			} catch (err) {
			  this.$util.showMsg(err.message);
			  uni.hideLoading();
			}
			
			this.loading = false;
		},
    // 删除搜索历史
    deleteHistory() {
      clearSearchHistory().then(() => {
        this.historyList = [];
      });
    },
  },
};
</script>