绚火健康

pages/search/search.js

@@ -0,0 +1,72 @@
+/*
+ * 手太欠
+ * 肥督督商城
+ */
+
+const app = getApp()
+Page({
+
+    /**
+     * 页面的初始数据
+     */
+    data: {
+        searchHistory   : []
+    },
+
+    /**
+     * 生命周期函数--监听页面加载
+     */
+    onLoad (options) {
+        if (wx.getStorageSync('searchHistory')) {
+            this.setData({
+                searchHistory: wx.getStorageSync('searchHistory')
+            })
+        }
+    },
+
+    /**
+     * 搜索
+     */
+    searchForm(e) {
+        // 存入历史搜索
+        let searchHistory = this.data.searchHistory,
+            searchValue   = e.detail.value.search,
+            newsearchHistory
+
+        if (searchValue != '') {
+            searchHistory.push(searchValue)
+            newsearchHistory = Array.from(new Set(searchHistory))
+            // 写入缓存
+            wx.setStorageSync('searchHistory', newsearchHistory)
+            // 转跳搜索结果页
+            wx.navigateTo({
+                url: '/pages/mall/goods/goods?title=' + searchValue
+            })
+        }
+    },
+
+    /**
+     * 历史记录搜索
+     */
+    bindSearch(e) {
+        wx.navigateTo({
+            url: '/pages/mall/goods/goods?title=' + e.currentTarget.dataset.value
+        })
+    },
+
+    /**
+     * 清理搜索结果
+     */
+    removeSearchHistory() {
+        wx.removeStorage({
+            key: 'searchHistory',
+            success: res => {
+                if (res.errMsg == "removeStorage:ok") {
+                    this.setData({
+                        searchHistory: []
+                    })
+                }
+            }
+        })
+    }
+})

pages/search/search.json

@@ -0,0 +1,4 @@
+{
+  "usingComponents"       : {},
+  "navigationBarTitleText": "商品搜索"
+}

pages/search/search.wxml

@@ -0,0 +1,23 @@
+
+<!-- 搜索 -->
+<view class="search">
+    <!-- search -->
+    <form bindsubmit="searchForm">
+        <view class="search-input">
+            <input class="search-navigator" placeholder="输入关键字" name="search" value="{{searchTitle}}" focus></input>
+            <button class="search-btn" form-type="submit">搜索</button>
+        </view>
+    </form>
+</view>
+
+<!-- 搜索历史 -->
+<view class="search-history" wx:if="{{searchHistory != ''}}" style="padding-top: {{systemInfo.barHeight + 90}}px">
+    <view class="search-history-title">搜索历史
+        <text bindtap="removeSearchHistory">清理</text>
+    </view>
+    <view class="search-history-tag">
+        <view wx:for="{{searchHistory}}" wx:key="searchHistory" bindtap="bindSearch" data-value="{{item}}">{{item}}</view>
+    </view>
+</view>
+
+<view class="search-history-null" wx:else style="padding-top: {{systemInfo.barHeight + 90}}px">无历史搜索</view>

pages/search/search.wxss

@@ -0,0 +1,79 @@
+/* 搜索 */
+
+.search {
+    padding: 30rpx;
+    box-sizing: border-box;
+    position: relative;
+    left: 0;
+    top: 0;
+    width: 100%;
+    background: #fff;
+    color: #999;
+    z-index: 999;
+}
+
+.search-input {
+    display: flex;
+    width: 100%;
+    height: 90rpx;
+    line-height: 90rpx;
+    background: #f7f7f7;
+}
+
+.search-input input {
+    padding: 0 30rpx;
+    box-sizing: border-box;
+    height: 90rpx;
+    color: #000;
+    font-size: 28rpx;
+    flex: 1;
+    width: calc(100% - 150rpx);
+}
+
+.search-btn {
+    font-size: 28rpx;
+    background: #f1f1f1;
+    color: #4c4c4c;
+    width: 150rpx !important;
+    padding: 0 !important;
+    line-height: 90rpx;
+    border-radius: 0;
+}
+
+.search-btn::after {
+    border: none;
+}
+
+/* 搜索历史 */
+
+.search-history{
+    padding: 20rpx 20rpx 0 20rpx;
+}
+
+.search-history-title{
+    padding: 0 10rpx 20rpx 10rpx;
+}
+
+.search-history-title text{
+    float: right;
+    font-size: 26rpx;
+    color: #a2a7ba;
+}
+
+.search-history-tag{
+    overflow: hidden;
+}
+
+.search-history-tag view{
+    display: inline-block;
+    margin: 0 10rpx 20rpx 10rpx;
+    background: #f5f6fa;
+    padding: 10rpx 20rpx;
+    font-size: 26rpx;
+}
+
+.search-history-null{
+    text-align: center;
+    padding: 50rpx 0;
+    color: #747788;
+}