处理搜索

pages/search/index.js

@@ -0,0 +1,82 @@
+let App = getApp();
+
+Page({
+
+    /**
+     * 页面的初始数据
+     */
+    data: {
+        recentSearch: [],
+        searchValue: '',
+    },
+
+    /**
+     * 生命周期函数--监听页面加载
+     */
+    onLoad: function (options) {
+
+    },
+
+    /**
+     * 生命周期函数--监听页面显示
+     */
+    onShow: function () {
+        // 获取历史搜索
+        this.getRecentSearch();
+    },
+
+    /**
+     * 获取历史搜索
+     */
+    getRecentSearch: function () {
+        let recentSearch = wx.getStorageSync('recentSearch');
+        this.setData({
+            recentSearch
+        });
+    },
+
+    /**
+     * 绑定输入值
+     */
+    getSearchContent: function (e) {
+        this.data.searchValue = e.detail.value;
+    },
+
+    /**
+     * 搜索提交
+     */
+    search: function () {
+        if (this.data.searchValue) {
+            // 记录最近搜索
+            let recentSearch = wx.getStorageSync('recentSearch') || [];
+            let searchValue = this.data.searchValue.trim(); // 去掉前后的空格
+            if (searchValue && !recentSearch.includes(searchValue)) {
+                recentSearch.unshift(searchValue);
+            }
+            // recentSearch.unshift(this.data.searchValue);
+            wx.setStorageSync('recentSearch', recentSearch)
+            // 跳转到列表页
+            wx.navigateTo({
+                url: '../s-list/s-list?search=' + this.data.searchValue,
+            })
+        }
+    },
+
+    /**
+     * 清空最近搜索记录
+     */
+    clearSearch: function () {
+        wx.removeStorageSync('recentSearch');
+        this.getRecentSearch();
+    },
+
+    /**
+     * 跳转到最近搜索
+     */
+    goSearch: function (e) {
+        console.log(e.target.dataset.text);
+        wx.navigateTo({
+            url: '../s-list/s-list?search=' + e.target.dataset.text,
+        })
+    },
+})

pages/search/index.json

@@ -0,0 +1,5 @@
+{
+    "usingComponents": {
+      "list-nav-bar": "/components/list-nav-bar/list-nav-bar"
+    }
+  }

pages/search/index.wxml

@@ -0,0 +1,29 @@
+<list-nav-bar title="WeixinWeixinWeixin" background="#3c8bf6" showNavBtn="{{true}}"></list-nav-bar>
+<view class="cont-box">
+    <view class="dis-flex search-input-box">
+        <view class="search-input">
+            <view class="dis-flex search-box">
+                <view class="left">
+                    <icon color="rgba(180,180,180,1)" size="15" type="search"></icon>
+                </view>
+                <view class="right">
+                    <input bindinput="getSearchContent" class="input" focus="true" placeholder="请输入您搜索的商品" placeholderStyle="color:#aba9a9" type="text"></input>
+                </view>
+            </view>
+        </view>
+        <view class="serch-button">
+            <button bindtap="search" type="default" hover-class="none">搜索</button>
+        </view>
+    </view>
+    <view wx:if="{{recentSearch.length}}">
+        <view class="title-box">
+            <view class="title-box-title ">最近搜索</view>
+            <image  src="../../images/del.png" bindtap="clearSearch" class="title-box-image"></image>
+        </view>
+        <view class="sale-button-box">
+            <view class="seconds-kill-li" wx:for="{{recentSearch}}" wx:for-index="idx" wx:for-item="recent" wx:key="hotrecent">
+                <view bindtap="goSearch" class="recent-button" data-text="{{recent}}">{{recent}}</view>
+            </view>
+        </view>
+    </view>
+</view>

pages/search/index.wxss

@@ -0,0 +1,127 @@
+page {
+    background: #f7f7f7;
+}
+
+
+.cont-box {
+    padding: 20rpx;
+}
+
+.dis-flex {
+    display: flex;
+}
+
+
+.search-input-box {
+    height: 64rpx;
+}
+
+
+.search-input {
+    width: 80%;
+    background: #fff;
+    border-radius: 10rpx 0 0 10rpx;
+    padding-left: 10rpx;
+    box-sizing: border-box;
+    overflow: hidden;
+}
+
+
+.search-box .left {
+    width: 60rpx;
+}
+
+.search-box .left icon {
+    padding: 18rpx;
+}
+
+.search-box .right {
+    flex: 1;
+}
+
+
+
+
+
+.search-input input {
+    font-size: 30rpx;
+    height: 64rpx;
+    line-height: 64rpx;
+}
+
+.serch-button {
+    width: 25%;
+    box-sizing: border-box;
+}
+
+.serch-button button {
+    color: #fff;
+    background: #3c8bf6;
+    width: 100%;
+    line-height: 64rpx;
+    height: 64rpx;
+    font-size: 28rpx;
+    border-radius: 0 10rpx 10rpx 0;
+}
+
+
+
+
+
+.title-box {
+    display: flex;
+    justify-content: space-between; 
+    padding: 50rpx 0 0 0;
+}
+
+.title-box-title {
+    color: #777;
+    font-size: 28rpx;
+}
+
+.title-box-image {
+    width: 30rpx;
+    height: 30rpx;
+}
+
+
+.sale-button-box {
+    display: flex;
+    padding: 10rpx 0;
+    flex-flow: wrap;
+    overflow: hidden;
+}
+/* .seconds-kill-li {
+    padding: 10rpx;
+    box-sizing: border-box;
+} */
+
+
+.seconds-kill-li {
+    display: block;
+    padding: 10rpx;
+    box-sizing: border-box;
+    /* width: 33.3%; */
+    min-width: 33.3%;
+    float: left;
+}
+
+
+.recent-button {
+    background: #fff;
+    /* padding:10rpx 10rpx 10rpx 10rpx; */
+    padding-left: 15rpx;
+    padding-right: 15rpx;
+    color: #777;
+    border-radius: 50rpx;
+    justify-content: center;
+    text-align: center;
+    font-size: 26rpx;
+    border: 1rpx solid #eee;
+    overflow: hidden!important;
+    white-space: nowrap!important;
+    text-overflow: ellipsis!important;
+    height: 60rpx;
+    line-height: 60rpx;
+    
+}