lucky_shop/pages_tool/seal/medium/search.vue

<template>
  <view>
    <view class="content">
      <view class="cate-search">
        <view class="search-box">
          <input class="uni-input" maxlength="50" confirm-type="search" :focus="true" placeholder="请输入介质名称 '如汽油'" v-model="inputValue" @focus="inputFocus" @confirm="search" @input="inputChange" />
          <text @tap="search" class="iconfont icon-sousuo3"></text>
        </view>
      </view>
      <view class="search-content">
        <block v-if="g0">
          <view class="history">
            <view class="history-box">
              <view class="history-top">
                <view class="title">搜索结果</view>
              </view>
              <view class="history-bottom">
                <block v-for="(item, index) in list" :key="index">
                  <view @tap="otherSearch(item, index)" @longtap="deleteItem(item, index)" class="history-li">
                    <view>{{item.name}}</view>
                  </view>
                </block>
              </view>
            </view>
          </view>
        </block>
        <view>
          <ns-empty v-if="list.length === 0" isIndex="false" text="暂无数据"></ns-empty>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import nsEmpty from '@/components/ns-empty/ns-empty';

export default {
  components: {
    nsEmpty
  },
  data() {
    return {
      inputValue: "",
      historyList: [],
      searchList: [],
      alikeList: [],
      isIndex: false,
      searchWords: "",
      hotList: [],
      isAllHistory: false,
      list: []
    };
  },
  computed: {
    themeColor() {
      return '#ffffff';
    },
    g0() {
      return this.list.length;
    }
  },
  onLoad(options) {
    if (options.keyword) {
      this.inputValue = options.keyword;
    }
    // 初始化搜索历史记录
    if (!uni.getStorageSync("search")) {
      uni.setStorageSync("search", []);
    }
    this.findHistoryList();
    // 可以在这里调用获取热门搜索列表的方法
    this.findHotList();
  },
  onShow() {
    this.$nextTick(() => {
      this.getHistoryHeight();
    });
  },
  methods: {
    findHistoryList() {
      this.historyList = uni.getStorageSync("search").reverse();
    },
    deleteHistoryList() {
      uni.showModal({
        title: "提示",
        content: "确认删除全部历史记录？",
        success: (res) => {
          if (res.confirm) {
            uni.setStorageSync("search", []);
            this.findHistoryList();
          }
        }
      });
    },
    deleteItem(item, index) {
      uni.showModal({
        title: "提示",
        content: "确认删除该条历史记录？",
        success: (res) => {
          if (res.confirm) {
            let search = uni.getStorageSync("search");
            search = search.filter((val) => val != item);
            uni.setStorageSync("search", search);
            this.findHistoryList();
          }
        }
      });
    },
    findHotList() {
      // 获取热门搜索列表
      this.$api.sendRequest({
        url: '/api/seal/hotlist',
        success: (res) => {
          this.hotList = res.data;
        }
      });
    },
    inputFocus() {
      // 输入框聚焦事件
    },
    inputChange(e) {
      this.inputValue = e.target.value;
    },
    search() {
      if (!this.inputValue.trim()) {
        uni.showToast({ title: '请输入搜索关键词', icon: 'none' });
        return;
      }
      // 保存搜索历史
      this.saveSearchHistory(this.inputValue);
      // 执行搜索
      this.$api.sendRequest({
        url: '/api/seal/search',
        data: { keyword: this.inputValue },
        success: (res) => {
          this.list = res.data;
        }
      });
    },
    otherSearch(item, index) {
      // 其他搜索方式处理
      this.inputValue = item.name;
      this.search();
    },
    saveSearchHistory(keyword) {
      let search = uni.getStorageSync("search");
      // 去重
      search = search.filter((val) => val != keyword);
      search.unshift(keyword);
      // 限制历史记录数量
      if (search.length > 20) {
        search = search.slice(0, 20);
      }
      uni.setStorageSync("search", search);
      this.findHistoryList();
    },
    getHistoryHeight() {
      // 获取历史记录高度（如果需要）
    }
  }
};
</script>

<style lang="scss" scoped>
.content {
  padding: 20rpx;
  background-color: #f8f8f8;
  min-height: 100vh;
}

.cate-search {
  padding: 20rpx;
  background-color: #fff;
  border-radius: 10rpx;
  margin-bottom: 20rpx;
}

.search-box {
  display: flex;
  align-items: center;
  background-color: #f5f5f5;
  border-radius: 25rpx;
  padding: 10rpx 20rpx;
}

.uni-input {
  flex: 1;
  height: 60rpx;
  font-size: 28rpx;
  color: #333;
  padding: 0 20rpx;
}

.iconfont.icon-sousuo3 {
  font-size: 32rpx;
  color: #999;
}

.search-content {
  background-color: #fff;
  border-radius: 10rpx;
  padding: 20rpx;
}

.history {
  margin-bottom: 20rpx;
}

.history-box {
  border: 1rpx solid #f1f1f1;
  border-radius: 10rpx;
  overflow: hidden;
}

.history-top {
  padding: 20rpx;
  border-bottom: 1rpx solid #f1f1f1;
}

.history-top .title {
  font-size: 30rpx;
  font-weight: 600;
  color: #333;
}

.history-bottom {
  padding: 20rpx;
}

.history-li {
  padding: 20rpx;
  border-bottom: 1rpx solid #f1f1f1;
  font-size: 28rpx;
  color: #666;
}

.history-li:last-child {
  border-bottom: 0;
}

.history-li:active {
  background-color: #f5f5f5;
}
</style>