通过微信开发者工具 商城模板 创建新小程序

mini-program/pages/goods/search/index.js

@@ -0,0 +1,119 @@
+import {
+  getSearchHistory,
+  getSearchPopular,
+} from '../../../services/good/fetchSearchHistory';
+
+Page({
+  data: {
+    historyWords: [],
+    popularWords: [],
+    searchValue: '',
+    dialog: {
+      title: '确认删除当前历史记录',
+      showCancelButton: true,
+      message: '',
+    },
+    dialogShow: false,
+  },
+
+  deleteType: 0,
+  deleteIndex: '',
+
+  onShow() {
+    this.queryHistory();
+    this.queryPopular();
+  },
+
+  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);
+    }
+  },
+
+  confirm() {
+    const { historyWords } = this.data;
+    const { deleteType, deleteIndex } = this;
+    historyWords.splice(deleteIndex, 1);
+    if (deleteType === 0) {
+      this.setData({
+        historyWords,
+        dialogShow: false,
+      });
+    } else {
+      this.setData({ historyWords: [], 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;
+    const { dialog } = this.data;
+    this.deleteIndex = index;
+    this.setData({
+      dialog: {
+        ...dialog,
+        message: '确认删除当前历史记录',
+        deleteType: 0,
+      },
+      dialogShow: true,
+    });
+  },
+
+  handleHistoryTap(e) {
+    const { historyWords } = this.data;
+    const { dataset } = e.currentTarget;
+    const _searchValue = historyWords[dataset.index || 0] || '';
+    if (_searchValue) {
+      wx.navigateTo({
+        url: `/pages/goods/result/index?searchValue=${_searchValue}`,
+      });
+    }
+  },
+
+  handleSubmit(e) {
+    const { value } = e.detail.value;
+    if (value.length === 0) return;
+    wx.navigateTo({
+      url: `/pages/goods/result/index?searchValue=${value}`,
+    });
+  },
+});

mini-program/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"
+  }
+}

mini-program/pages/goods/search/index.wxml

@@ -0,0 +1,61 @@
+<view class="search-page">
+  <t-search
+    t-class-input-container="t-class__input-container"
+    t-class-input="t-search__input"
+    value="{{searchValue}}"
+    leftIcon=""
+    placeholder="iPhone12pro"
+    bind:submit="handleSubmit"
+    focus
+  >
+    <t-icon slot="left-icon" prefix="wr" name="search" size="40rpx" color="#bbb" />
+  </t-search>
+  <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}}"
+          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="handleHistoryTap"
+          data-index="{{index}}"
+          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>

mini-program/pages/goods/search/index.wxss

@@ -0,0 +1,79 @@
+.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-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;
+}