完成商品列表的数据实现

app.js

@@ -1,4 +1,7 @@
 App({
+  config: {
+    apiBase: 'https://locally.uieee.com/'
+  },
   onLaunch: function () {
 
   },

app.json

@@ -1,6 +1,7 @@
 {
   "pages": [
     "pages/home/home",
+    "pages/list/list",
     "pages/message/message",
     "pages/profile/profile"
   ],

pages/home/home.js

@@ -1,29 +1,40 @@
+const fetch = require('../../utils/fetch.js')
+
 Page({
   data: {
-
+    slides: [],
+    categories: []
   },
-  onLoad: function(options) {
-    //Do some initialize when page load.
-
+  onLoad: function (options) {
+    fetch('slides').then(res => {
+      this.setData({
+        slides: res.data
+      })
+    })
+    fetch('categories').then(res => {
+      this.setData({
+        categories: res.data
+      })
+    })
   },
-  onReady: function() {
+  onReady: function () {
     //Do some when page ready.
-    
+
   },
-  onShow: function() {
+  onShow: function () {
     //Do some when page show.
-    
+
   },
-  onHide: function() {
+  onHide: function () {
     //Do some when page hide.
-    
+
   },
-  onUnload: function() {
+  onUnload: function () {
     //Do some when page unload.
-    
+
   },
-  onPullDownRefresh: function() {
+  onPullDownRefresh: function () {
     //Do some when page pull down.
-    
+
   }
 })

pages/home/home.wxml

@@ -1,48 +1,17 @@
 <swiper class="banner">
-  <swiper-item>
-    <image mode="aspectFill" src="https://static.maizuo.com/pc/v5/h5PicUpload/062a965ab71db31fe0b7ad6f8c529935.jpg"/>
-  </swiper-item>
-  <swiper-item>
-    <image mode="aspectFill" src="https://static.maizuo.com/pc/v5/h5PicUpload/062a965ab71db31fe0b7ad6f8c529935.jpg"/>
+  <swiper-item wx:for="{{slides}}" wx:key="id">
+    <!-- 第一张后台默认就没有给路径的跳转 -->
+    <navigator url="{{item.link}}" wx:if="{{item.link}}">
+        <image mode="aspectFill" src="{{item.image}}"/>
+    </navigator>
+    <!--  mode="aspectFill" 给图片设置剪切效果 高度不满足的时候-->
+    <image wx:else mode="aspectFill" src="{{item.image}}"/>
   </swiper-item>
 </swiper>
 
 <view class="grids">
-  <view class="item">
-    <image src="/assets/icons/grid-01.png" />
-    <text>美食</text>
-  </view>
-  <view class="item">
-    <image src="/assets/icons/grid-02.png" />
-    <text>美食</text>
-  </view>
-  <view class="item">
-    <image src="/assets/icons/grid-03.png" />
-    <text>美食</text>
-  </view>
-  <view class="item">
-    <image src="/assets/icons/grid-04.png" />
-    <text>美食</text>
-  </view>
-  <view class="item">
-    <image src="/assets/icons/grid-05.png" />
-    <text>美食</text>
-  </view>
-  <view class="item">
-    <image src="/assets/icons/grid-06.png" />
-    <text>美食</text>
-  </view>
-  <view class="item">
-    <image src="/assets/icons/grid-07.png" />
-    <text>美食</text>
-  </view>
-  <view class="item">
-    <image src="/assets/icons/grid-08.png" />
-    <text>美食</text>
-  </view>
-  <view class="item">
-    <image src="/assets/icons/grid-09.png" />
-    <text>美食</text>
-  </view>
-
-</view>
+  <navigator  class="item" wx:for="{{categories}}" wx:key="id" url="/pages/list/list?cat={{item.id}}">
+    <image src="{{item.icon}}" />
+    <text>{{item.name}}</text>
+  </navigator>
+</view>

pages/home/home.wxss

@@ -1,7 +1,7 @@
 .banner {
   height: 380rpx;
 }
-
+.banner navigator,
 .banner image {
   width: 100%;
   height: 100%;

pages/list/list.js

@@ -0,0 +1,122 @@
+const fetch = require('../../utils/fetch.js')
+
+
+// pages/list/list.js
+Page({
+
+  /**
+   * 页面的初始数据
+   */
+  data: {
+    categorie: {},
+    shops: [],
+    _page: 0,
+    _limit: 20,
+    hasMore: true
+  },
+  loadMore() {
+
+    let { _page, _limit } = this.data
+    let params = {
+      // 请求那一页的数据
+      _page: ++_page,
+      // 每次显示多少条数据 
+      _limit
+    }
+    // 数据节流
+    if (!this.data.hasMore) return;
+    // 请求所有的商品信息  return 之后这个函数返回的是一个promise对象 
+    return fetch(`categories/${this.data.categorie.id}/shops`, params)
+      .then(res => {
+        // 直接获取后台返回当前条件的总条数  
+        const totalCount = parseInt(res.header['X-Total-Count'])
+        // 判断是否超过了总的条数 如果超过为 false 没有超过为true 
+        const hasMore = this.data._page * this.data._limit < totalCount
+        // 把第一页和下一页的数据进行拼接 
+        const shops = this.data.shops.concat(res.data)
+        this.setData({
+          shops,
+          _page,
+          hasMore
+        })
+      })
+  },
+  /**
+   * 生命周期函数--监听页面加载
+   */
+  onLoad: function (options) {
+    // 取决于请求的速度   
+    fetch(`categories/${options.cat}`)
+      .then(res => {
+        // 先把请求的数据保存到data中  
+        this.setData({
+          categorie: res.data
+        })
+        wx.setNavigationBarTitle({
+          title: this.data.categorie.name
+        })
+        this.loadMore()
+      })
+  },
+
+  /**
+   * 生命周期函数--监听页面初次渲染完成
+   */
+  onReady: function () {
+    if (this.data.categorie.name) {
+      wx.setNavigationBarTitle({
+        title: this.data.categorie.name
+      })
+    }
+  },
+
+  /**
+   * 生命周期函数--监听页面显示
+   */
+  onShow: function () {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面隐藏
+   */
+  onHide: function () {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面卸载
+   */
+  onUnload: function () {
+
+  },
+
+  /**
+   * 页面相关事件处理函数--监听用户下拉动作
+   */
+  onPullDownRefresh: function () {
+    this.setData({
+      shops: [],
+      _page: 0,
+      hasMore: true
+    })
+
+    this.loadMore().then(() => wx.stopPullDownRefresh())
+
+  },
+
+  /**
+   * 页面上拉触底事件的处理函数
+   */
+  onReachBottom: function () {
+    // console.log('触发到底了')
+    this.loadMore()
+  },
+
+  /**
+   * 用户点击右上角分享
+   */
+  onShareAppMessage: function () {
+
+  }
+})

pages/list/list.json

@@ -0,0 +1,6 @@
+{
+  "onReachBottomDistance": 50,
+  "enablePullDownRefresh": true,
+  "backgroundTextStyle": "dark",
+  "backgroundColor": "#535353"
+}

pages/list/list.wxml

@@ -0,0 +1,16 @@
+<view class="cells">
+  <navigator class="item" wx:for="{{shops}}" wx:key="id" url="/pages/detail/detail?item={{item.id}}">
+    <image src="{{item.images[0]}}" mode="aspectFill" />
+    <view class="meta">
+      <text class="name">{{item.name}}</text>
+      <text class="phone">电话：{{item.phone || 'none'}}</text>
+      <text class="address">地址：{{item.address}}</text>
+      <text class="hours">营业时间：{{item.businessHours}}</text>
+    </view>
+    <view class="score">{{item.score || 'none'}}</view>
+  </navigator>
+</view>
+
+<view wx:if="{{hasMore}}" class="loadmore loading">
+  正在加载...</view>
+<view wx:else class="loadmore">没有更多内容了</view>

pages/list/list.wxss

@@ -0,0 +1,79 @@
+.cells {
+  background-color: #fff;
+}
+
+.cells .item {
+  display: flex;
+  align-items: flex-start;
+  border-bottom: 1rpx solid #eee;
+}
+
+.cells .item image {
+  width: 160rpx;
+  height: 160rpx;
+  margin: 20rpx;
+}
+
+.cells .item .meta {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  padding: 10rpx 0;
+  font-size: 30rpx;
+}
+
+.cells .item .meta .name {
+  color: #234;
+  font-size: 28rpx;
+}
+
+.cells .item .meta .phone,
+.cells .item .meta .address {
+  color: #678;
+  font-size: 24rpx;
+}
+
+.cells .item .meta .hours {
+  /*color: #ff69b4;*/
+  color: #456;
+  font-size: 22rpx;
+}
+
+.cells .item .score {
+  margin: 20rpx 20rpx 0 -40rpx;
+  padding: 0 10rpx;
+  background-color: #ee523d;
+  border-radius: 30rpx;
+  color: #fff;
+  font-size: 24rpx;
+  text-align: center;
+}
+
+.loadmore {
+  color: #888;
+  font-size: 30rpx;
+  line-height: 100rpx;
+  text-align: center;
+}
+
+.loadmore.loading::before {
+  content: '';
+  width: 40rpx;
+  height: 40rpx;
+  margin-top: -10rpx;
+  margin-right: 10rpx;
+  display: inline-block;
+  vertical-align: middle;
+  animation: loading 1s steps(12) infinite;
+  background: transparent url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMjAiIGhlaWdodD0iMTIwIiB2aWV3Qm94PSIwIDAgMTAwIDEwMCI+PHBhdGggZmlsbD0ibm9uZSIgZD0iTTAgMGgxMDB2MTAwSDB6Ii8+PHJlY3Qgd2lkdGg9IjciIGhlaWdodD0iMjAiIHg9IjQ2LjUiIHk9IjQwIiBmaWxsPSIjRTlFOUU5IiByeD0iNSIgcnk9IjUiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDAgLTMwKSIvPjxyZWN0IHdpZHRoPSI3IiBoZWlnaHQ9IjIwIiB4PSI0Ni41IiB5PSI0MCIgZmlsbD0iIzk4OTY5NyIgcng9IjUiIHJ5PSI1IiB0cmFuc2Zvcm09InJvdGF0ZSgzMCAxMDUuOTggNjUpIi8+PHJlY3Qgd2lkdGg9IjciIGhlaWdodD0iMjAiIHg9IjQ2LjUiIHk9IjQwIiBmaWxsPSIjOUI5OTlBIiByeD0iNSIgcnk9IjUiIHRyYW5zZm9ybT0icm90YXRlKDYwIDc1Ljk4IDY1KSIvPjxyZWN0IHdpZHRoPSI3IiBoZWlnaHQ9IjIwIiB4PSI0Ni41IiB5PSI0MCIgZmlsbD0iI0EzQTFBMiIgcng9IjUiIHJ5PSI1IiB0cmFuc2Zvcm09InJvdGF0ZSg5MCA2NSA2NSkiLz48cmVjdCB3aWR0aD0iNyIgaGVpZ2h0PSIyMCIgeD0iNDYuNSIgeT0iNDAiIGZpbGw9IiNBQkE5QUEiIHJ4PSI1IiByeT0iNSIgdHJhbnNmb3JtPSJyb3RhdGUoMTIwIDU4LjY2IDY1KSIvPjxyZWN0IHdpZHRoPSI3IiBoZWlnaHQ9IjIwIiB4PSI0Ni41IiB5PSI0MCIgZmlsbD0iI0IyQjJCMiIgcng9IjUiIHJ5PSI1IiB0cmFuc2Zvcm09InJvdGF0ZSgxNTAgNTQuMDIgNjUpIi8+PHJlY3Qgd2lkdGg9IjciIGhlaWdodD0iMjAiIHg9IjQ2LjUiIHk9IjQwIiBmaWxsPSIjQkFCOEI5IiByeD0iNSIgcnk9IjUiIHRyYW5zZm9ybT0icm90YXRlKDE4MCA1MCA2NSkiLz48cmVjdCB3aWR0aD0iNyIgaGVpZ2h0PSIyMCIgeD0iNDYuNSIgeT0iNDAiIGZpbGw9IiNDMkMwQzEiIHJ4PSI1IiByeT0iNSIgdHJhbnNmb3JtPSJyb3RhdGUoLTE1MCA0NS45OCA2NSkiLz48cmVjdCB3aWR0aD0iNyIgaGVpZ2h0PSIyMCIgeD0iNDYuNSIgeT0iNDAiIGZpbGw9IiNDQkNCQ0IiIHJ4PSI1IiByeT0iNSIgdHJhbnNmb3JtPSJyb3RhdGUoLTEyMCA0MS4zNCA2NSkiLz48cmVjdCB3aWR0aD0iNyIgaGVpZ2h0PSIyMCIgeD0iNDYuNSIgeT0iNDAiIGZpbGw9IiNEMkQyRDIiIHJ4PSI1IiByeT0iNSIgdHJhbnNmb3JtPSJyb3RhdGUoLTkwIDM1IDY1KSIvPjxyZWN0IHdpZHRoPSI3IiBoZWlnaHQ9IjIwIiB4PSI0Ni41IiB5PSI0MCIgZmlsbD0iI0RBREFEQSIgcng9IjUiIHJ5PSI1IiB0cmFuc2Zvcm09InJvdGF0ZSgtNjAgMjQuMDIgNjUpIi8+PHJlY3Qgd2lkdGg9IjciIGhlaWdodD0iMjAiIHg9IjQ2LjUiIHk9IjQwIiBmaWxsPSIjRTJFMkUyIiByeD0iNSIgcnk9IjUiIHRyYW5zZm9ybT0icm90YXRlKC0zMCAtNS45OCA2NSkiLz48L3N2Zz4=) no-repeat;
+  background-size: 100%
+}
+
+@keyframes loading {
+  from {
+    transform: rotate(0deg)
+  }
+  to {
+    transform: rotate(-360deg)
+  }
+}