init

miniprogram/pages/goods/search/index.js

@@ -0,0 +1,299 @@
+import {
+  getSearchHistory,
+  getSearchPopular,
+} from '../../../services/good/fetchSearchHistory';
+
+Page({
+  data: {
+    historyWords: [],
+    popularWords: [],
+    searchValue: '',
+    searchSuggestions: [],
+    showSuggestions: false,
+    dialog: {
+      title: '确认删除当前历史记录',
+      showCancelButton: true,
+      message: '',
+    },
+    dialogShow: false,
+  },
+
+  deleteType: 0,
+  deleteIndex: '',
+  searchTimer: null,
+
+  onShow() {
+    this.loadLocalHistory();
+    this.queryPopular();
+  },
+
+  onLoad() {
+    this.loadLocalHistory();
+  },
+
+  // 加载本地历史记录
+  loadLocalHistory() {
+    try {
+      const historyWords = wx.getStorageSync('searchHistory') || [];
+      this.setData({
+        historyWords: historyWords.slice(0, 10), // 最多显示10条历史记录
+      });
+    } catch (error) {
+      console.error('加载搜索历史失败:', error);
+    }
+  },
+
+  // 保存搜索历史到本地
+  saveSearchHistory(keyword) {
+    try {
+      let historyWords = wx.getStorageSync('searchHistory') || [];
+      
+      // 移除重复项
+      historyWords = historyWords.filter(item => item !== keyword);
+      
+      // 添加到开头
+      historyWords.unshift(keyword);
+      
+      // 限制历史记录数量
+      historyWords = historyWords.slice(0, 20);
+      
+      wx.setStorageSync('searchHistory', historyWords);
+      this.setData({
+        historyWords: historyWords.slice(0, 10),
+      });
+    } catch (error) {
+      console.error('保存搜索历史失败:', error);
+    }
+  },
+
+  // 清空本地历史记录
+  clearLocalHistory() {
+    try {
+      wx.removeStorageSync('searchHistory');
+      this.setData({
+        historyWords: [],
+      });
+    } catch (error) {
+      console.error('清空搜索历史失败:', error);
+    }
+  },
+
+  // 删除单条历史记录
+  deleteHistoryItem(index) {
+    try {
+      let historyWords = wx.getStorageSync('searchHistory') || [];
+      historyWords.splice(index, 1);
+      wx.setStorageSync('searchHistory', historyWords);
+      this.setData({
+        historyWords: historyWords.slice(0, 10),
+      });
+    } catch (error) {
+      console.error('删除历史记录失败:', error);
+    }
+  },
+
+  async queryHistory() {
+    try {
+      const data = await getSearchHistory();
+      const code = 'Success';
+      if (String(code).toUpperCase() === 'SUCCESS') {
+        const { historyWords = [] } = data;
+        this.setData({
+          historyWords,
+        });
+      }
+    } catch (error) {
+      console.error(error);
+    }
+  },
+
+  async queryPopular() {
+    try {
+      const data = await getSearchPopular();
+      const code = 'Success';
+      if (String(code).toUpperCase() === 'SUCCESS') {
+        const { popularWords = [] } = data;
+        this.setData({
+          popularWords,
+        });
+      }
+    } catch (error) {
+      console.error(error);
+    }
+  },
+
+  // 搜索输入处理
+  onSearchInput(e) {
+    const value = e.detail.value || '';
+    this.setData({
+      searchValue: value,
+    });
+
+    // 清除之前的定时器
+    if (this.searchTimer) {
+      clearTimeout(this.searchTimer);
+    }
+
+    if (value.trim()) {
+      // 延迟搜索建议
+      this.searchTimer = setTimeout(() => {
+        this.getSearchSuggestions(value.trim());
+      }, 300);
+    } else {
+      this.setData({
+        showSuggestions: false,
+        searchSuggestions: [],
+      });
+    }
+  },
+
+  // 获取搜索建议
+  getSearchSuggestions(keyword) {
+    const { historyWords, popularWords } = this.data;
+    const allWords = [...historyWords, ...popularWords];
+    
+    // 过滤出包含关键词的建议
+    const suggestions = allWords
+      .filter(word => word.toLowerCase().includes(keyword.toLowerCase()))
+      .filter((word, index, arr) => arr.indexOf(word) === index) // 去重
+      .slice(0, 8); // 最多显示8条建议
+
+    this.setData({
+      searchSuggestions: suggestions,
+      showSuggestions: suggestions.length > 0,
+    });
+  },
+
+  // 点击搜索建议
+  onSuggestionTap(e) {
+    const { suggestion } = e.currentTarget.dataset;
+    this.performSearch(suggestion);
+  },
+
+  // 清空搜索输入
+  onSearchClear() {
+    this.setData({
+      searchValue: '',
+      showSuggestions: false,
+      searchSuggestions: [],
+    });
+  },
+
+  // 搜索输入获得焦点
+  onSearchFocus() {
+    const { searchValue } = this.data;
+    if (searchValue.trim()) {
+      this.getSearchSuggestions(searchValue.trim());
+    }
+  },
+
+  // 搜索输入失去焦点
+  onSearchBlur() {
+    // 延迟隐藏建议，让点击事件能够触发
+    setTimeout(() => {
+      this.setData({
+        showSuggestions: false,
+      });
+    }, 200);
+  },
+
+  confirm() {
+    if (this.deleteType === 0) {
+      // 清空所有历史记录
+      this.clearLocalHistory();
+    } else {
+      // 删除单条历史记录
+      this.deleteHistoryItem(this.deleteIndex);
+    }
+    this.setData({
+      dialogShow: false,
+    });
+  },
+
+  close() {
+    this.setData({ dialogShow: false });
+  },
+
+  handleClearHistory() {
+    const { dialog } = this.data;
+    this.deleteType = 1;
+    this.setData({
+      dialog: {
+        ...dialog,
+        message: '确认删除所有历史记录',
+      },
+      dialogShow: true,
+    });
+  },
+
+  deleteCurr(e) {
+    const { index } = e.currentTarget.dataset;
+    this.deleteIndex = index;
+    this.deleteType = 1;
+    this.setData({
+      dialogShow: true,
+      'dialog.message': '确认删除这条搜索记录？',
+    });
+  },
+
+  handleHistoryTap(e) {
+    const { historyWords } = this.data;
+    const { dataset } = e.currentTarget;
+    const _searchValue = historyWords[dataset.index || 0] || '';
+    if (_searchValue) {
+      this.performSearch(_searchValue);
+    }
+  },
+
+  handlePopularTap(e) {
+    const { popularword } = e.currentTarget.dataset;
+    this.performSearch(popularword);
+  },
+
+  // 执行搜索
+  performSearch(keyword) {
+    if (!keyword || !keyword.trim()) {
+      wx.showToast({
+        title: '请输入搜索关键词',
+        icon: 'none',
+      });
+      return;
+    }
+
+    const searchValue = keyword.trim();
+    
+    // 保存到搜索历史
+    this.saveSearchHistory(searchValue);
+    
+    // 跳转到搜索结果页
+    wx.navigateTo({
+      url: `/pages/goods/result/index?searchValue=${encodeURIComponent(searchValue)}`,
+    });
+  },
+
+  handleSubmit(e) {
+    // 安全地获取搜索值
+    const value = e?.detail?.value || this.data.searchValue;
+    
+    // 确保value是字符串类型
+    const searchValue = typeof value === 'string' ? value.trim() : '';
+    
+    // 使用统一的搜索方法
+    this.performSearch(searchValue);
+  },
+
+  // 分享功能
+  onShareAppMessage() {
+    return {
+      title: '商品搜索 - 查找你想要的商品',
+      path: '/pages/goods/search/index'
+    };
+  },
+
+  // 分享到朋友圈
+  onShareTimeline() {
+    return {
+      title: '商品搜索 - 查找你想要的商品'
+    };
+  }
+});

miniprogram/pages/goods/search/index.json

@@ -0,0 +1,8 @@
+{
+  "navigationBarTitleText": "搜索",
+  "usingComponents": {
+    "t-search": "tdesign-miniprogram/search/search",
+    "t-icon": "tdesign-miniprogram/icon/icon",
+    "t-dialog": "tdesign-miniprogram/dialog/dialog"
+  }
+}

miniprogram/pages/goods/search/index.wxml

@@ -0,0 +1,83 @@
+<view class="search-page">
+  <view class="search-input-container">
+    <t-search
+      t-class-input-container="t-class__input-container"
+      t-class-input="t-search__input"
+      value="{{searchValue}}"
+      leftIcon=""
+      placeholder="搜索商品"
+      bind:submit="handleSubmit"
+      bind:change="onSearchInput"
+      bind:focus="onSearchFocus"
+      bind:blur="onSearchBlur"
+      bind:clear="onSearchClear"
+      focus
+    >
+      <t-icon slot="left-icon" prefix="wr" name="search" size="40rpx" color="#bbb" />
+    </t-search>
+    
+    <!-- 搜索建议 -->
+    <view class="search-suggestions" wx:if="{{showSuggestions}}">
+      <view 
+        class="suggestion-item" 
+        wx:for="{{searchSuggestions}}" 
+        wx:key="*this"
+        data-suggestion="{{item}}"
+        bind:tap="onSuggestionTap"
+      >
+        <t-icon prefix="wr" name="search" size="32rpx" color="#999" />
+        <text class="suggestion-text">{{item}}</text>
+      </view>
+    </view>
+  </view>
+  <view class="search-wrap">
+    <view class="history-wrap">
+      <view class="search-header">
+        <text class="search-title">历史搜索</text>
+        <text class="search-clear" bind:tap="handleClearHistory">清除</text>
+      </view>
+      <view class="search-content">
+        <view
+          class="search-item"
+          hover-class="hover-history-item"
+          wx:for="{{historyWords}}"
+          bind:tap="handleHistoryTap"
+          bindlongpress="deleteCurr"
+          data-index="{{index}}"
+          data-historyword="{{item}}"
+          wx:key="*this"
+        >
+          {{item}}
+        </view>
+      </view>
+    </view>
+    <view class="popular-wrap">
+      <view class="search-header">
+        <text class="search-title">热门搜索</text>
+      </view>
+      <view class="search-content">
+        <view
+          class="search-item"
+          hover-class="hover-history-item"
+          wx:for="{{popularWords}}"
+          bind:tap="handlePopularTap"
+          data-index="{{index}}"
+          data-popularword="{{item}}"
+          wx:key="*this"
+        >
+          {{item}}
+        </view>
+      </view>
+    </view>
+  </view>
+  <t-dialog
+    visible="{{dialogShow}}"
+    content="{{dialog.message}}"
+    bindconfirm="confirm"
+    bind:close="close"
+    confirm-btn="确定"
+    cancel-btn="{{dialog.showCancelButton ? '取消' : null}}"
+    t-class-confirm="dialog__button-confirm"
+    t-class-cancel="dialog__button-cancel"
+  />
+</view>

miniprogram/pages/goods/search/index.wxss

@@ -0,0 +1,118 @@
+.search-page {
+  box-sizing: border-box;
+  width: 100vw;
+  height: 100vh;
+  padding: 0 30rpx;
+}
+
+.search-page .t-class__input-container {
+  height: 64rpx !important;
+  border-radius: 32rpx !important;
+}
+
+.search-page .t-search__input {
+  font-size: 28rpx !important;
+  color: #333 !important;
+}
+
+.search-input-container {
+  position: relative;
+}
+
+.search-suggestions {
+  position: absolute;
+  top: 100%;
+  left: 0;
+  right: 0;
+  background: #fff;
+  border-radius: 0 0 16rpx 16rpx;
+  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
+  z-index: 1000;
+  max-height: 400rpx;
+  overflow-y: auto;
+}
+
+.suggestion-item {
+  display: flex;
+  align-items: center;
+  padding: 24rpx 32rpx;
+  border-bottom: 1rpx solid #f5f5f5;
+}
+
+.suggestion-item:last-child {
+  border-bottom: none;
+}
+
+.suggestion-item:active {
+  background-color: #f8f8f8;
+}
+
+.suggestion-text {
+  margin-left: 16rpx;
+  font-size: 28rpx;
+  color: #333;
+  flex: 1;
+}
+
+.search-page .search-wrap {
+  margin-top: 44rpx;
+}
+
+.search-page .history-wrap {
+  margin-bottom: 20px;
+}
+
+.search-page .search-header {
+  display: flex;
+  flex-flow: row nowrap;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.search-page .search-title {
+  font-size: 30rpx;
+  font-family: PingFangSC-Semibold, PingFang SC;
+  font-weight: 600;
+  color: rgba(51, 51, 51, 1);
+  line-height: 42rpx;
+}
+
+.search-page .search-clear {
+  font-size: 24rpx;
+  font-family: PingFang SC;
+  line-height: 32rpx;
+  color: #999999;
+  font-weight: normal;
+}
+
+.search-page .search-content {
+  overflow: hidden;
+  display: flex;
+  flex-flow: row wrap;
+  justify-content: flex-start;
+  align-items: flex-start;
+  margin-top: 24rpx;
+}
+
+.search-page .search-item {
+  color: #333333;
+  font-size: 24rpx;
+  line-height: 32rpx;
+  font-weight: normal;
+  margin-right: 24rpx;
+  margin-bottom: 24rpx;
+  background: #f5f5f5;
+  border-radius: 38rpx;
+  padding: 12rpx 24rpx;
+}
+
+.search-page .hover-history-item {
+  position: relative;
+  top: 3rpx;
+  left: 3rpx;
+  box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.1) inset;
+}
+
+.add-notes__confirm {
+  color: #fa4126 !important;
+}