feat 首页添加搜索框

Author: tumobi

pages/index/index.js

@@ -6,6 +6,7 @@ const user = require('../../services/user.js');
 const app = getApp()
 Page({
   data: {
+    goodsCount: 0,
     newGoods: [],
     hotGoods: [],
     topics: [],
@@ -40,6 +41,11 @@ Page({
   },
   onLoad: function (options) {
     this.getIndexData();
+    util.request(api.GoodsCount).then(res => {
+      this.setData({
+        goodsCount: res.data.goodsCount
+      });
+    });
   },
   onReady: function () {
     // 页面渲染完成

pages/index/index.wxml

@@ -1,6 +1,11 @@
-
 <!--index.wxml-->
 <view class="container">
+  <view class="search">
+    <navigator url="/pages/search/search" class="input">
+      <image class="icon"></image>
+      <text class="txt">商品搜索, 共{{goodsCount}}款好物</text>
+    </navigator>
+  </view>
   <swiper class="banner" indicator-dots="true" autoplay="true" interval="3000" duration="1000">
     <swiper-item wx:for="{{banner}}" wx:key="{{item.id}}">
       <navigator url="{{item.link}}">
@@ -9,7 +14,7 @@
     </swiper-item>
   </swiper>
   <view class="m-menu">
-    <navigator  class="item" url="{{item.url}}" wx:for="{{channel}}" wx:key="{{item.id}}">
+    <navigator class="item" url="{{item.url}}" wx:for="{{channel}}" wx:key="{{item.id}}">
       <image src="{{item.icon_url}}" background-size="cover"></image>
       <text>{{item.name}}</text>
     </navigator>
@@ -79,8 +84,8 @@
   <view class="a-section a-topic" wx:if="topics.length > 0">
     <view class="h">
       <view>
-      <navigator url="../topic/topic" open-type="switchTab">
-        <text class="txt">专题精选</text>
+        <navigator url="../topic/topic" open-type="switchTab">
+          <text class="txt">专题精选</text>
         </navigator>
       </view>
     </view>

pages/index/index.wxss

@@ -1,3 +1,38 @@
+
+.search {
+  height: 88rpx;
+  width: 100%;
+  padding: 0 30rpx;
+  background: #fff;
+  display: flex;
+  align-items: center;
+}
+
+.search .input {
+  width: 690rpx;
+  height: 56rpx;
+  background: #ededed;
+  border-radius: 8rpx;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.search .icon {
+  background: url(http://yanxuan.nosdn.127.net/hxm/yanxuan-wap/p/20161201/style/img/icon-normal/search2-2fb94833aa.png) center no-repeat;
+  background-size: 100%;
+  width: 28rpx;
+  height: 28rpx;
+}
+
+.search .txt {
+  height: 42rpx;
+  line-height: 42rpx;
+  color: #666;
+  padding-left: 10rpx;
+  font-size: 30rpx;
+}
+
 .banner {
   width: 750rpx;
   height: 417rpx;