uniapp-ZHSQ/packages/homeServer/search/index.vue

<template>
  <view class="container">
    <!-- 搜索栏 -->
    <view class="search-bar">
      <image
        src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/com_communitySearchIcon.png"
        class="search-icon"
        @click="upView"
      ></image>
      <view class="search-input-container">
        <image
          src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/com_communitySearchIcon.png"
          class="search-icon"
        ></image>
        <input
          type="text"
          class="search-input"
          placeholder="请选择搜索指定内容"
          v-model="searchText"
          @confirm="handleSearch"
        />
      </view>
    </view>

    <!-- 搜索指定内容 -->
    <view
      class="specifiedContent"
      v-if="!isLoading && specifiedContent.length > 0 && !hasResult"
    >
      <view class="specifiedContent-title">搜索指定内容</view>
      <view class="specifiedContent-list">
        <view
          class="specifiedContent-item"
          v-for="(item, index) in specifiedContent"
          :key="index"
          @click="handleHistoryClick(item.name)"
        >
          <image class="specifiedContent-img" :src="item.icon"></image>
          <view>{{ item.name }}</view>
        </view>
      </view>
    </view>

    <!-- 搜索历史 -->
    <view
      class="search-history"
      v-if="!isLoading && searchHistory.length > 0 && !hasResult"
    >
      <view class="history-header">
        <view class="history-title">搜索历史</view>
        <u-icon
          name="trash"
          color="#999999"
          size="28"
          class="history-trash"
          @click="deleteHistory"
        ></u-icon>
      </view>
      <view class="history-list">
        <view
          class="history-item"
          v-for="(item, index) in searchHistory"
          :key="index"
          @click="handleHistoryClick(item)"
        >
          {{ item }}
        </view>
      </view>
    </view>

    <!-- 搜索结果 -->
    <view class="search-result" v-if="!isLoading && hasResult">
      <view class="hot-services">
        <view class="service-list">
          <view
            class="service-card"
            v-for="(service, index) in hotServiceList"
            :key="index"
          >
            <image :src="service.image" class="service-image"></image>
            <view class="service-info">
              <view class="service-info-left">
                <text class="service-name">{{ service.name }}</text>
                <text class="service-tag">{{ service.tag }}</text>
                <br />
                <text class="service-desc">{{ service.description }}</text>
              </view>
              <view class="service-info-right">
                <view class="service-footer">
                  <view
                    class="service-button"
                    @click="navigateToReservation(service)"
                  >
                    <text class="button-text" @click="goSubscribe">去预约</text>
                  </view>
                  <text class="service-count">{{ service.count }}</text>
                </view>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>

    <!-- 加载状态 -->
    <view class="loading-container" v-if="isLoading">
      <view class="loading-spinner"></view>
      <text class="loading-text">加载中...</text>
    </view>

    <!-- 回到顶部 -->
    <div class="toUp" v-show="searchHistory.length > 0 && isShowToTop" @click="scrollToTop">
      <u-badge
        numberType="limit"
        type="error"
        max="99"
        :value="value"
      ></u-badge>
      <image
        src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/shop_car_num.png"
      ></image>
    </div>
  </view>
</template>

<script>
import { request, NavgateTo } from "../../../utils/index";

export default {
  data() {
    return {
      isShowToTop: false,
      searchText: "",
      isLoading: false,
      specifiedContent: [
        {
          name: "服务",
          icon: "https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/com_communitySearchIcon.png",
        },
        {
          name: "阿石",
          icon: "https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/com_communitySearchIcon.png",
        },
        {
          name: "阿榴",
          icon: "https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/com_communitySearchIcon.png",
        },
      ],
      searchHistory: [],
      hasResult: false,
      hotServiceList: [
        {
          id: 1,
          name: "空调清洗",
          image: "",
          badge: "推荐",
          tag: "平台保障",
          description: "专业保洁团队，全屋深度清洁，去除顽固污渍，还您清新居所",
          count: "已预约100+",
        },
      ],
    };
  },

  created() {
    const history = uni.getStorageSync("searchHistory") || [];
    this.searchHistory = history;
    window.addEventListener('scroll', this.handleScroll);
  },

  beforeUnmount() {
    window.removeEventListener('scroll', this.handleScroll);
  },
  methods: {
    handleScroll() {
      this.isShowToTop = window.pageYOffset > 200;
    },
    scrollToTop() {
      uni.pageScrollTo({
        scrollTop: 0,
        duration: 300
      });
    },
    upView() {
      NavgateTo("/packages/homeServer/index/index");
    },
    // 处理搜索
    handleSearch() {
      const keyword = this.searchText.trim();
      if (!keyword) return;

      // 添加到搜索历史
      if (!this.searchHistory.includes(keyword)) {
        this.searchHistory.unshift(keyword);
        uni.setStorageSync("searchHistory", this.searchHistory);
      }

      // 显示加载状态
      this.isLoading = true;
      this.hasResult = false;

      // 模拟搜索请求
      setTimeout(() => {
        this.isLoading = false;
        this.hasResult = true; // 假设搜索到结果
      }, 1500);
    },

    // 点击历史记录搜索
    handleHistoryClick(keyword) {
      this.searchText = keyword;
      this.handleSearch();
    },

    // 取消搜索
    handleCancel() {
      uni.navigateBack();
    },

    // 删除搜索历史
    deleteHistory() {
      uni.showModal({
        // title: "提示",
        content: "删除所有搜素历史？",
        success: (res) => {
          if (res.confirm) {
            console.log("用户点击确定");
            uni.removeStorageSync("searchHistory");
            this.getSearchHistory();
          } else if (res.cancel) {
            console.log("用户点击取消");
          }
        },
      });
    },
    // 获取搜索历史数据
    getSearchHistory() {
      this.searchHistory = uni.getStorageSync("searchHistory") || [];
    },

    // 去预约
    goSubscribe(){
        NavgateTo("/packages/homeServer/serverInfo/index")
    }
  },
};
</script>

<style>
@import url("./index.css");
</style>