init

wx05cb767e6530b48f/pages/search/index.js

@@ -0,0 +1,37 @@
+getApp();
+
+Page({
+    data: {
+        recentSearch: [],
+        searchValue: ""
+    },
+    onLoad: function(e) {},
+    onShow: function() {
+        this.getRecentSearch();
+    },
+    getRecentSearch: function() {
+        var e = wx.getStorageSync("recentSearch");
+        this.setData({
+            recentSearch: e
+        });
+    },
+    getSearchContent: function(e) {
+        this.data.searchValue = e.detail.value;
+    },
+    search: function() {
+        if (this.data.searchValue) {
+            var e = wx.getStorageSync("recentSearch") || [];
+            e.unshift(this.data.searchValue), wx.setStorageSync("recentSearch", e), wx.navigateTo({
+                url: "../category/list?search=" + this.data.searchValue
+            });
+        }
+    },
+    clearSearch: function() {
+        wx.removeStorageSync("recentSearch"), this.getRecentSearch();
+    },
+    goSearch: function(e) {
+        wx.navigateTo({
+            url: "../category/list?search=" + e.target.dataset.text
+        });
+    }
+});

wx05cb767e6530b48f/pages/search/index.json

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

wx05cb767e6530b48f/pages/search/index.wxml

@@ -0,0 +1,28 @@
+<view class="container">
+    <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="warn"> 搜索 </button>
+            </view>
+        </view>
+        <view class="search-cont-box" wx:if="{{recentSearch.length}}">
+            <view class="title-box">最近搜索 <text bindtap="clearSearch" class="iconfont icon-lajixiang col-7"></text>
+            </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>
+</view>

wx05cb767e6530b48f/pages/search/index.wxss

@@ -0,0 +1,102 @@
+.seconds-kill-li {
+    float: left;
+    width: 33.3%;
+}
+
+.title-box .icon-lajixiang {
+    float: right;
+}
+
+.sale-button-box {
+    overflow: hidden;
+    padding: 10px 0;
+}
+
+.recent-button,.sale-button {
+    border: 1px solid #eee;
+}
+
+.serch-button button {
+    background: #ff495e;
+}
+
+.search-input-box {
+    height: 64rpx;
+}
+
+.search-input {
+    background: #fff;
+    border-radius: 5px 0 0 5px;
+    box-sizing: border-box;
+    overflow: hidden;
+    padding-left: 10rpx;
+    width: 80%;
+}
+
+.search-input input {
+    font-size: 30rpx;
+    height: 64rpx;
+    line-height: 64rpx;
+}
+
+.serch-button {
+    box-sizing: border-box;
+    width: 20%;
+}
+
+.serch-button button {
+    border-radius: 0 5px 5px 0;
+    font-size: 28rpx;
+    height: 64rpx;
+    line-height: 64rpx;
+}
+
+.seconds-kill-li {
+    box-sizing: border-box;
+    padding: 10rpx;
+}
+
+.title-box {
+    color: #777;
+    font-size: 10pt;
+    padding: 50rpx 0 0;
+}
+
+.recent-button,.sale-button {
+    background: #fff;
+    border: 1px solid #ccc;
+    border-radius: 50px;
+    font-size: 26rpx;
+    height: 30rpx;
+    justify-content: center;
+    line-height: 30rpx;
+    overflow: hidden;
+    padding: 10rpx;
+    text-align: center;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.search-cont {
+    background: #fff;
+    padding: 0 15px;
+}
+
+.search-box .left {
+    width: 28px;
+}
+
+.search-box .right {
+    flex: 1;
+}
+
+.sale-button-box .seconds-kill-li {
+    float: left;
+    width: 33.3%;
+}
+
+.title-box image {
+    float: right;
+    height: 35rpx;
+    width: 35rpx;
+}