微信小程序-视图与逻辑案例

8. 案例

/*
商铺列表接口：
 - https://www.escook.cn/categories/:cate_id/shops?_page=:page&_limit=:pageSize
 	- 例如：https://www.escook/cn/categories/1/shops?_page=1&_limit=10 
 - URL地址中的：cate id是动态参数，表示分类的Id
 - 请求方式：GET
 - 请求参数：
 	- _page：第几页数据
 	- _limit：每页多少数据

返回
 - {data:Array(10),header{...},statusCode:200,...}
  - header:
  	- Access-Control-Allow-Credentials: "true"
  	- ...
  	- X-Total-Count: "80"
  - data: Array(10)
  	- 0: {id:1, name: "宫廷月饼", phone:"15530810686",address:"任丘市生活广场4楼"，...}
  	- ...
*/

// shopList.js
data: {
   options: {},
   shopList: [],
   page: 1,
   pageSize:10,
   total:0,
   isLoading:false
},

 onLoad(options) {
    console.log(options)
    this.setData({
      options: options
    })
    // 没有传cb，那么默认就是 undefined，不执行cb()
    this.getShopList()
  },
      
  onReady() {
    wx.setNavigationBarTitle({
       title: this.data.options.name,
     })
  },
  
  onPullDownRefresh() {
    // 重置数据
    this.setData({
      page:1,
      shopList:[],
      total:0
    })
    // 按需执行关闭下拉刷新
    this.getShopList(() => {
      wx.stopPullDownRefresh()
    })
  },
      
  onReachBottom() {
    // 判断是否还有数据
    if (this.data.page * this.data.pageSize >= this.data.total) {
      return wx.showToast({
        title: '数据加载完毕',
        icon: 'none'
      })
    }
    // 上拉触底节流阀
    if(this.data.isLoading)return
    this.setData({
      page:this.data.page+1
    })
    this.getShopList()
  },
      
getShopList(cb){
    this.setData({
      isLoading:true
    })
    wx.showLoading({
      title: '数据加载中...',
    })
    wx.request({
      // 向服务器传递 id 数据
      url: 'https://www.escook/cn/categories/${this.data.options.id}/shops',
      method:'GET',
      // 向服务器传递数据
      data:{
        _page:this.data.page,
        _limit:this.data.pageSize
      },
      success:(res)=>{
        this.setData({
          // 分页数据，需要累加拼接
          shopList:[...this.data.shopList,...res.data],
          // 字符串转整形 -0
          total:res.header['X-Total-Count']-0 
        })
      },
       complete:()=>{
       	 wx.hideLoading()
         // 如果有cb，则执行cb()
         cb && cb()
         this.setData({
         	 isLoading:false
         })
       }
    })
  },

<!--pages/shoplist/shoplist.wxml-->
<text>pages/shoplist/shoplist.wxml</text>

<view class="shop-item" wx:for="{{shopList}}" wx:key="id">
  <view class="thumb">
    <image src="{{item.image[0]}}" mode="widthFix"/>
  </view>
  <view class="info">
    <text class="shop-title">{{item.name}}</text>
    <text>电话：{{tools.splitPhone(item.phone)}}</text>
    <text>地址：{{item.address}}</text>
    <text>营业时间：{{item.businessHors}}</text>
  </view>
</view>

<wxs src="tools.wxs" module="tools"/>  

/* pages/shoplist/shoplist.wxss */
.shop-item{
  /* 左右布局 */
  display: flex;
  padding: 15rpx;
  border: 1prx solid #efefef;
  border-radius: 8rpx;
  margin: 15rpx;
  /* 阴影：横向、纵向、扩散、颜色 */
  box-shadow: 1rpx 1rpx 15prx #ddd;
}
.thumb image{
  width: 250rpx;
  height: 250rpx;
  /* 去掉图片底下的白色空隙 */
  display: block;
  margin-right: 15rpx;
}
.info{
  display: flex;
  /* 纵向布局 */
  flex-direction: column;
  /* 分散布局 */
  justify-content: space-around;
  font-size: 24rpx;
}
.shop-title{
  font-weight: bold;
}

// tools.wxs 把15072940924 格式化为 150-7294-0924
function splitPhone(str) {
  if (str.length != 11) return str
  var arr = str.split('')
  // 左起第4个位置插入-
  arr.splice(3,0,'-')
  arr.splice(8,0,'-')
  return str.join('')
}

module.exports = {
  splitPhone: splitPhone
}