小程序实现搜索效果

Posted 2021-03-16 认真生活、快乐工作 - 马云

首页入口

进入搜索页

搜索结果页

后台提供三个接口

<?php

/**
 * 搜索商品
 */
class SearchAction extends CommonAction{
    public function _initialize(){
        parent::_initialize();
    }

    /**
     * 获取搜索历史和热门搜索
     */
    public function getHotAndHistory() {
        if (!$uid = $_POST[\'uid\']) {
            $this->json->setErr(\'10001\', \'缺少用户id\');
            $this->json->Send();
        }

        // 历史
        $data[\'history\'] = [];
        $search_history = M(\'search_history\');
        $search_history_list = $search_history->where([\'uid\'=>$uid,\'status\'=>1])->order(\'id desc\')->select();
        foreach ($search_history_list as $k=>$v) {
            $data[\'history\'][] = $v[\'keywords\'];
        }
        // 热门
        $configs = M(\'configs\');
        $hot_search = $configs->where([\'this_key\'=>\'hot_search\'])->getField(\'this_value\');
        $data[\'hot\'] = explode(\',\',$hot_search); // 爆炸成数组
        $this->json->S($data);
    }

    /**
     * 搜索数据
     */
    public function searchData() {
        if (!$uid = $_POST[\'uid\']) {
            $this->json->setErr(\'10001\', \'缺少用户id\');
            $this->json->Send();
        }

        if (!$keywords = $_POST[\'keywords\']) {
            $this->json->setErr(\'10001\', \'请输入要查询的内容\');
            $this->json->Send();
        }

        if (!isset($_POST[\'page\']) || $_POST[\'page\'] < 1) {
            $_POST[\'page\'] = 1;
        }

        if (!isset($_POST[\'page_size\']) || $_POST[\'page_size\'] < 1) {
            $_POST[\'page_size\'] = C(\'PAGE_NORMAL_COUNT\');
        }

        $page      = $_POST[\'page\'];
        $page_size = $_POST[\'page_size\'];

        if ($page == 1) {
            // 删除之前的记录
            $search_history = M(\'search_history\');
            $search_history->where([\'uid\'=>$uid,\'keywords\'=>$keywords])->save([\'status\'=>0,\'update_time\'=>time()]);
            // 添加新的记录
            $search_history->add([\'uid\'=>$uid,\'keywords\'=>$keywords,\'update_time\'=>time(),\'create_time\'=>time()]);
        }

        $where[\'title\']    = [\'like\',\'%\'.$keywords.\'%\'];
        $where[\'status\'] = 1; // 显示
        $where[\'is_del\'] = 0; // 未删除
        $where[\'spec_main\'] = 1; // 是否主商品

        // 获取总数
        $product = M(\'product\');
        $count       = $product->where($where)->count();
        $total_page  = ceil($count / $page_size);

        if ($page > $total_page) {
            $return_data = [\'data_list\' => [], \'total_page\' => $total_page, \'current_page\' => $page];
            $this->json->S($return_data, \'没有更多了\');
        }

        $data_list = $product->where($where)
            ->order(\'id desc\')
            ->limit((($page - 1) * $page_size) . \',\' . $page_size)
            ->field(\'id,title,title_img,sales_count,price\')
            ->select();


        if ($data_list) {
            vendor(\'Func.Math\');
            foreach ($data_list as $k => &$v) {
                $v[\'price\']          = Math::div($v[\'price\'], 100);
            }
        }

        $out_data    = $data_list ?: [];
        $return_data = [\'data_list\' => $out_data, \'total_page\' => $total_page, \'current_page\' => $page];
        $this->json->S($return_data);
    }

    /**
     * 清除数据
     */
    public function clearData() {
        if (!$uid = $_POST[\'uid\']) {
            $this->json->setErr(\'10001\', \'缺少用户id\');
            $this->json->Send();
        }
        // 删除之前的记录
        $search_history = M(\'search_history\');
        $clear_res = $search_history->where([\'uid\'=>$uid])->save([\'status\'=>0,\'update_time\'=>time()]);
        if ($clear_res !== false) {
            $this->json->S();
        } else {
            $this->json->E(\'清理失败\');
        }
    }
}

搜索页面

<view class="search">
    <view class="search-container">
        <view class="search-left">
            <image class="search-image" src="/images/index/search.png" />
            <input class="search-input"  placeholder="请输入你喜欢的商品" bindinput=\'watchSearch\'/>
        </view>
        <view class="search-btn" data-keywords="{{keywords}}" bindtap="go_to_search_result">搜索</view>
    </view>
</view>
<view class="history">
    <view class="history-title">
        <view class="history-title-left">搜索历史</view>
        <view class="history-title-right" bindtap="clearSearchHistory">清除历史</view>
    </view>
    <view class="history-content">
        <block wx:if="{{index_data.history != false}}">
            <block wx:for="{{index_data.history}}" wx:key="id">
                <view class="history-item" data-keywords="{{item}}" bindtap="go_to_search_result">{{item}}</view>
            </block>
        </block>
    </view>
</view>
<view class="hot">
    <view class="hot-title">热门搜索</view>
    <view class="hot-content">
         <block wx:if="{{index_data.hot != false}}">
            <block wx:for="{{index_data.hot}}" wx:key="id">
                <view class="hot-item" data-keywords="{{item}}" bindtap="go_to_search_result">{{item}}</view>
            </block>
        </block>
    </view>
</view>

搜索页面业务逻辑

import { initNoPage } from "../../common/requestData";
import Storage from "../../common/auth/Storage";
import tips from "../../common/tips";
import request from "../../common/request";

const app = getApp();

Page({
  /**
   * 页面的初始数据
   */
  data: {
    index_data: [],
    keywords: \'\'
  },
  // 清理
  clearSearchHistory: function () {
    tips.showConfirm("您确认清理搜索历史吗").then(() => {
      const uid = app.globalData.uid || Storage.get().uid;
      request("clearData", { uid: uid })
        .then(() => {
          tips.showMsg("清理成功");
          this.setData({
            "index_data.history": []
          });
        })
        .catch(({ errdesc }) => {
          return tips.showMsg(errdesc);
        });
    });
  },
  // 监听输入
  watchSearch: function (event) {
    console.log(event.detail.value);
    let keywords = event.detail.value;
    // 设置值
    this.setData({
      "keywords": keywords
    });
  },
  go_to_search_result({
    currentTarget: {
      dataset: { keywords }
    }
  }) {
    console.log(keywords);
    if (keywords == \'\') {
      return tips.showMsg("请输入要搜索的内容");
    }
    wx.navigateTo({
      url: "/pages/search/result/index?keywords=" + keywords
    });
  },


  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {

  },

  /**
   * 展示
   */
  onShow: function (options) {
    const uid = app.globalData.uid || Storage.get().uid;
    console.log(uid);
    // 初始化
    initNoPage(this, [
      {
        api: "getHotAndHistory",
        outDataName: "index_data",
        inData: { \'uid\': uid }
      }
    ]);
    setTimeout(() => {
      this.setData({
        wo_title: app.globalData.wo_title
      });
    }, 300);
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () { },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage() { },
});

搜索页面样式

.search {
    height: 124rpx;
    background-color: #F7F7F7;
    display: flex;
    justify-content: center;
    .search-container {
        margin-top: 30rpx;
        height: 64rpx;
        // border:1px solid red;
        margin-left:22rpx;
        margin-right:33rpx;
        width: 695rpx;
        display: flex;
        
        .search-left {
            display: flex;
            background-color: #FFFFFF;
            border-radius: 32rpx;
            .search-input  {
                // border:1px solid blue;
                height: 64rpx;
                line-height: 64rpx;
                font-size: 28rpx;
                width: 500rpx;
            }
            .search-image {
                width:34rpx;
                height: 34rpx;
                margin-left: 30rpx;
                margin-top:15rpx;
                margin-right: 15rpx;
            }
        }
       
        .search-btn {
            font-size: 32rpx;
            line-height: 64rpx;
            font-weight: bold;
            color:#313131;
            text-align: center;
            margin-left:30rpx;
        }
    }
}

.history {
    margin:0 auto;
    width: 710rpx;
    margin-top:30rpx;
    .history-title {
        display: flex;
        justify-content: space-between;
        .history-title-left {
            font-size: 28rpx;
            color:#313131;
        }
        .history-title-right {
            font-size: 28rpx;
            color:#AAAAAA;
        }
        margin-bottom: 15rpx;
    }
    .history-content {
        display: flex;
        flex-wrap: wrap;
        overflow: hidden;
        .history-item {
            margin-top:15rpx;
            margin-left:10rpx;
            margin-right:10rpx;
            padding-left:20rpx;
            padding-right: 20rpx;
            height: 48rpx;
            background-color: #eeeeee;
            border-radius: 24rpx;
            font-size: 24rpx;
            line-height: 48rpx;

        }
    }
}

.hot {
    margin:0 auto;
    width: 710rpx;
    margin-top:50rpx;
    .hot-title {
        display: flex;
        justify-content: space-between;
        font-size: 28rpx;
        color:#313131;
        margin-bottom: 15rpx;
    }
    .hot-content {
        display: flex;
        flex-wrap: wrap;
        overflow: hidden;
        .hot-item {
            margin-top:15rpx;
            margin-left:10rpx;
            margin-right:10rpx;
            padding-left:20rpx;
            padding-right: 20rpx;
            height: 48rpx;
            background-color: #eeeeee;
            border-radius: 24rpx;
            font-size: 24rpx;
            line-height: 48rpx;
        }
    }
}

搜索结果页面

<view class="search">
    <view class="search-container">
        <view class="search-left">
            <image class="search-image" src="/images/index/search.png" />
            <input class="search-input" placeholder="请输入你喜欢的商品" value="{{keywords}}" bindinput=\'watchSearch\' />
        </view>
        <view class="search-btn" data-keywords="{{keywords}}" bindtap="go_to_search_result">搜索</view>
    </view>
</view>
<block wx:if="{{noData == 1}}">
    <view class="no-data">
        <view class="img">
            <image class="search-image" src="/images/search/nodata.png" />
        </view>
        <view class="msg">什么也没搜到哦</view>
    </view>
</block>
<block wx:else>
    <view class="data-list">
        <block wx:for="{{searchResult}}" wx:key="id">
            <view class="data-item">
                <view class="item-img">
                    <image src="{{item.title_img}}" />
                </view>
                <view class="item-content">
                    <view class="item-content-title">{{item.title}}</view>
                    <view class="item-content-property">
                        <view class="property-item">销量:{{item.sales_count}}</view>
                        <!-- <view class="property-item">库存:1970</view> -->
                    </view>
                    <view class="item-content-price">￥{{item.price}}</view>
                    <view class="item-content-add">
                        <image src="/images/common/buy_more.png" catch:tap="openTypeSelect" data-id="{{item.id}}" lazy-load="{{true}}"/>
                    </view>
                </view>
            </view>
        </block>
        <block wx:if="{{noMore==1}}">
        <view class="no-more">无更多结果</view>
        </block>
    </view>
</block>

<goodsType id="goodsType" />

搜索结果页逻辑

import { initInPage } from "../../../common/requestData";
import Storage from "../../../common/auth/Storage";
import tips from "../../../common/tips";


const app = getApp();

Page({
  /**
   * 页面的初始数据
   */
  data: {
    index_data: [],
    keywords: \'\'
  },

  openTypeSelect({
    currentTarget: {
      dataset: { id }
    }
  }) {
    this.selectComponent("#goodsType").openTypeSelect(id);
  },

  // 监听输入
  watchSearch: function (event) {
    console.log(event.detail.value);
    let keywords = event.detail.value;
    // 设置值
    this.setData({
      "keywords": keywords
    });
  },
  go_to_search_result({
    currentTarget: {
      dataset: { keywords }
    }
  }) {
    console.log(keywords);
    if (keywords == \'\') {
      return tips.showMsg("请输入要搜索的内容");
    }

    const uid = app.globalData.uid || Storage.get().uid;
    console.log(uid);
    // 初始化
    initInPage(
      this,
      "searchData",
      { \'uid\': uid, \'keywords\': keywords, page: 1, page_size: 5 },
      { inDataName: "inData", outDataName: "searchResult" }
    );
  },


  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    // 能获取到参数
    console.log(options.keywords);
    // 设置值
    this.setData({
      "keywords": options.keywords
    });
  },

  /**
   * 展示
   */
  onShow: function (options) {
    // 获取不到参数
    let keywords = this.data.keywords;
    const uid = app.globalData.uid || Storage.get().uid;
    console.log(uid);
    // 初始化
    initInPage(
      this,
      "searchData",
      { \'uid\': uid, \'keywords\': keywords, page: 1, page_size: 5 },
      { inDataName: "inData", outDataName: "searchResult" }
    );
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () { },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage() { },
  /**
  * 页面上拉触底事件的处理函数
  */
  onReachBottom: function () {
    return initInPage(this, "searchData", this.inData, { inDataName: "inData", outDataName: "searchResult" });
  },

});

搜索结果页样式

.search {
    height: 124rpx;
    background-color: #F7F7F7;
    display: flex;
    justify-content: center;
    .search-container {
        margin-top: 30rpx;
        height: 64rpx;
        // border:1px solid red;
        margin-left:22rpx;
        margin-right:33rpx;
        width: 695rpx;
        display: flex;
        
        .search-left {
            display: flex;
            background-color: #FFFFFF;
            border-radius: 32rpx;
            .search-input  {
                // border:1px solid blue;
                height: 64rpx;
                line-height: 64rpx;
                font-size: 28rpx;
                width: 500rpx;
            }
            .search-image {
                width:34rpx;
                height: 34rpx;
                margin-left: 30rpx;
                margin-top:15rpx;
                margin-right: 15rpx;
            }
        }
       
        .search-btn {
            font-size: 32rpx;
            line-height: 64rpx;
            font-weight: bold;
            color:#313131;
            text-align: center;
            margin-left:30rpx;
        }
    }
}

.data-list {
    margin-top:16rpx;
    overflow: hidden;
    .data-item {
        height: 240rpx;
        border-bottom: 1rpx solid #E2E2E2;
        padding:30rpx 20rpx;
        display: flex;
        .item-img {
            width: 180rpx;
            height: 180rpx;
            // border: 1rpx solid red;
            image {
                width: 180rpx;
                height: 180rpx;
            }
        }
        .item-content {
            margin-left:20rpx;
            width: 510rpx;
            height: 180rpx;
            // border:1rpx solid blue;
            position: relative;
            .item-content-title {
                font-size:26rpx;
                color:#313131;
            }
            .item-content-property {
                margin-top:20rpx;
                font-size: 24rpx;
                height:24rpx; /* 防止上下空隙 */
                line-height:24rpx;
                color:#AAAAAA;
                display: flex;
                .property-item:nth-child(n+2) {
                    margin-left:20rpx;
                }
            }
            .item-content-price {
                margin-top:46rpx;
                font-size:32rpx;
                font-weight: bold;
                color:#F6001F;
                height:32rpx;
                line-height:32rpx;
            }
            .item-content-add {
                position: absolute;
                right: 0rpx;
                bottom: 0rpx;
                line-height: 46rpx;
                font-size: 46rpx;
                height: 46rpx;
                color: #F6001F;
                image {
                    width: 46rpx;
                    height: 46rpx;
                }
            }
        }
    }

    .no-more {
        text-align: center;
        color:#E2E2E2;
        font-size: 32rpx;
        font-weight: bold;
        margin-top:30rpx;
    }
}

.no-data {
    // display: none; /* 暂时先隐藏 */
    margin:0 auto;
    margin-top:163rpx;
    height: 420rpx;
    // border:1px solid red;
    .img {
        width: 350rpx;
        height: 313rpx;
        // border:1px solid blue;
        margin:0 auto;
        image {
            width: 350rpx;
            height: 313rpx;
        }
    }
    .msg {
        text-align: center;
        font-size: 32rpx;
        color:#BFBFBF;
        margin-top:69rpx;
    }
}