小程序

alipay/components/goods-category-nav/goods-category-nav.acss

+.category-list {
+    overflow: hidden;
+}
+.category-list .items {
+    width: 25%;
+    padding-bottom: 20rpx;
+    float: left;
+}
+.items-content {
+    margin: 20rpx;
+}
+.category-list .items:nth-child(4n+1) {
+    
+}
+.category-list .items image {
+    width: 50px !important;
+    height: 50px !important;
+}
+.category-list .items .title {
+    margin-top: 10rpx;
+    font-size: 32rpx;
+}
\ No newline at end of file

alipay/components/goods-category-nav/goods-category-nav.axml

+<view a:if="{{category_list.length > 0}}">
+  <view class="category-list">
+    <view class="items" a:for="{{category_list}}">
+      <view class="items-content" style="background-color:{{item.bg_color}}">
+        <navigator url="/pages/goods-search/goods-search?category_id={{item.id}}" hover-class="none">
+          <image class="wh-auto" src="{{item.icon}}" mode="aspectFit" />
+          <view class="title tc single-text">{{item.name}}</view>
+        </navigator>
+      </view>
+    </view>
+  </view>
+</view>
+
+<view a:if="{{category_list.length == 0}}">
+  <import src="/pages/common/nodata.axml" />
+  <template is="nodata" data="{{status: data_list_loding_status}}"></template>
+</view>

alipay/components/goods-category-nav/goods-category-nav.js

+const app = getApp();
+Component({
+  mixins: [],
+  props: {},
+  data: {
+    data_list_loding_status: 1,
+    data_bottom_line_status: false,
+    category_list: [],
+  },
+  didMount() {
+    this.init();
+  },
+  didUpdate(){},
+  didUnmount(){},
+  methods:{
+    init() {
+      // 加载loding
+      this.setData({
+        data_list_loding_status: 1,
+      });
+
+      // 加载loding
+      my.httpRequest({
+        url: app.get_request_url("GoodsCategoryNav", "Index"),
+        method: "POST",
+        data: {},
+        dataType: "json",
+        success: res => {
+          if (res.data.code == 0) {
+            var data = res.data.data;
+            this.setData({
+              category_list: data,
+              data_list_loding_status: data.length == 0 ? 0 : 3,
+              data_bottom_line_status: true,
+            });
+          } else {
+            this.setData({
+              data_list_loding_status: 0,
+              data_bottom_line_status: true,
+            });
+
+            my.showToast({
+              type: "fail",
+              content: res.data.msg
+            });
+          }
+        },
+        fail: () => {
+          this.setData({
+            data_list_loding_status: 2,
+            data_bottom_line_status: true,
+          });
+
+          my.showToast({
+            type: "fail",
+            content: "服务器请求出错"
+          });
+        }
+      });
+    },
+  }
+});

alipay/components/goods-category-nav/goods-category-nav.json

+{
+  "component": true
+}
\ No newline at end of file

alipay/components/home-banner/home-banner.acss

+.banner {
+    height: 320rpx!important;
+}
\ No newline at end of file

alipay/components/home-banner/home-banner.axml

+<swiper
+  indicator-dots="{{indicator_dots}}"
+  indicator-color="{{indicator_color}}"
+  indicator-active-color="{{indicator_active_color}}"
+  autoplay="{{autoplay}}"
+  circular="{{circular}}"
+  class="banner bg-white spacing-mb"
+  a:if="{{banner_list.length > 0}}">
+  <block a:for="{{banner_list}}">
+    <swiper-item>
+      <image class="wh-auto" src="{{item.images_url}}" mode="widthFix" data-value="{{item.jump_url}}" data-type="{{item.jump_url_type}}" onTap="banner_event" />
+    </swiper-item>
+  </block>
+</swiper>
+
+<view a:if="{{banner_list.length == 0}}">
+    <import src="/pages/common/nodata.axml" />
+    <template is="nodata" data="{{status: data_list_loding_status}}"></template>
+</view>
\ No newline at end of file

alipay/components/home-banner/home-banner.js

+const app = getApp();
+Component({
+  mixins: [],
+  data: {
+    indicator_dots: false,
+    indicator_color: 'rgba(0, 0, 0, .3)',
+    indicator_active_color: '#e31c55',
+    autoplay: true,
+    circular: true,
+    data_list_loding_status: 1,
+    data_bottom_line_status: false,
+    banner_list: [],
+  },
+  props: {},
+  didMount() {
+    this.init();
+  },
+  didUpdate() {},
+  didUnmount() {},
+  methods: {
+    // 获取数
+    init() {
+      // 加载loding
+      this.setData({
+        data_list_loding_status: 1,
+      });
+
+      // 加载loding
+      my.httpRequest({
+        url: app.get_request_url("Banner", "Index"),
+        method: "POST",
+        data: {},
+        dataType: "json",
+        success: res => {
+          if (res.data.code == 0) {
+            var data = res.data.data;
+            this.setData({
+              banner_list: data,
+              indicator_dots: (data.length > 1),
+              autoplay: (data.length > 1),
+              data_list_loding_status: data.length == 0 ? 0 : 3,
+              data_bottom_line_status: true,
+            });
+          } else {
+            this.setData({
+              data_list_loding_status: 0,
+              data_bottom_line_status: true,
+            });
+
+            my.showToast({
+              type: "fail",
+              content: res.data.msg
+            });
+          }
+        },
+        fail: () => {
+          this.setData({
+            data_list_loding_status: 2,
+            data_bottom_line_status: true,
+          });
+
+          my.showToast({
+            type: "fail",
+            content: "服务器请求出错"
+          });
+        }
+      });
+    },
+
+    // 轮播图事件
+    banner_event(e) {
+      var value = e.target.dataset.value || null;
+      var type = parseInt(e.target.dataset.type);
+      if (value != null) {
+        switch(type) {
+          // web
+          case 0 :
+            my.navigateTo({url: '/pages/web-view/web-view?url='+value});
+            break;
+
+          // 内部页面
+          case 1 :
+            my.navigateTo({url: value});
+            break;
+
+          // 跳转到外部小程序
+          case 2 :
+            my.navigateToMiniProgram({appId: value});
+            break;
+        }
+      }
+    },
+  },
+});

alipay/components/home-banner/home-banner.json

+{
+  "component": true
+}
\ No newline at end of file

alipay/pages/index/index.acss

-/* 轮播图片 */
-.banner {
-    height: 320rpx!important;
-}
-
-/* 商品分类 */
-.category-list {
-    overflow: hidden;
-}
-.category-list .items {
-    width: calc(50% - 5rpx);
-    margin-bottom: 10rpx;
-    padding-bottom: 20rpx;
-}
-.category-list .items:nth-child(2n) {
-    float: right;
-}
-.category-list .items:nth-child(2n+1) {
-    float: left;
-}
-.category-list .items image {
-    height: 200px !important;
-}
-.category-list .items .title {
-    margin-top: 10rpx;
-    font-size: 32rpx;
-}
\ No newline at end of file

alipay/pages/index/index.axml

-<swiper
-  indicator-dots="{{indicator_dots}}"
-  indicator-color="{{indicator_color}}"
-  indicator-active-color="{{indicator_active_color}}"
-  autoplay="{{autoplay}}"
-  circular="{{circular}}"
-  class="banner bg-white spacing-mb"
-  a:if="{{banner_list.length > 0}}">
-  <block a:for="{{banner_list}}">
-    <swiper-item>
-      <image class="wh-auto" src="{{item.images_url}}" mode="widthFix" data-value="{{item.jump_url}}" data-type="{{item.jump_url_type}}" onTap="banner_event" />
-    </swiper-item>
-  </block>
-</swiper>
+<component-home-banner />
+<component-goods-category-nav />
 
-<view a:if="{{category_list.length > 0}}">
-  <view class="spacing-nav-title">
+
+  <!-- <view class="spacing-nav-title">
     <text class="line"></text>
     <text class="text-wrapper">商品分类</text>
   </view>
@@ -25,7 +13,8 @@
         <view class="title tc single-text">{{item.name}}</view>
       </navigator>
     </view>
-  </view>
+  </view> -->
+
 </view>
 <view a:if="{{category_list.length == 0}}">
     <import src="/pages/common/nodata.axml" />

alipay/pages/index/index.json

 {
-    "pullRefresh": true
+    "pullRefresh": true,
+    "usingComponents": {
+        "component-goods-category-nav": "/components/goods-category-nav/goods-category-nav",
+        "component-home-banner": "/components/home-banner/home-banner"
+    }
 }
\ No newline at end of file

service/Application/Api/Controller/IndexController.class.php

@@ -72,5 +72,31 @@ class IndexController extends CommonController
 		// 返回数据
 		$this->ajaxReturn(L('common_operation_success'), 0, $result);
 	}
+
+	/**
+	 * [GoodsCategoryNav 商品分类导航]
+	 * @author   Devil
+	 * @blog     http://gong.gg/
+	 * @version  1.0.0
+	 * @datetime 2018-05-25T11:03:59+0800
+	 */
+	public function GoodsCategoryNav()
+	{
+		// 返回数据
+		$this->ajaxReturn(L('common_operation_success'), 0, GoodsService::GoodsCategoryList());
+	}
+
+	/**
+	 * [Banner 首页轮播]
+	 * @author   Devil
+	 * @blog     http://gong.gg/
+	 * @version  1.0.0
+	 * @datetime 2018-05-25T11:03:59+0800
+	 */
+	public function Banner()
+	{
+		// 返回数据
+		$this->ajaxReturn(L('common_operation_success'), 0, BannerService::Home());
+	}
 }
 ?>
\ No newline at end of file

service/Application/Service/BannerService.class.php

@@ -33,7 +33,6 @@ class BannerService
                 $v['images_url'] = $images_host.$v['images_url'];
                 $v['jump_url'] = empty($v['jump_url']) ? null : $v['jump_url'];
             }
-            $result['banner'] = $banner;
         }
         return $banner;
     }