mixins

mixins 文件夹中含有两个文件 index.js 和 fetch-list , 分别是全局mixins和单独使用。

• index.js 含有 参数 settings(全局的config配置) 、viewRoutes(当前页面路由信息)
  方法有：handlerClickToPage跳转页面。
• fetch-list 是通用获取列表的mixins，所有含有列表接口的页面都可以使用。
  
  

index.js

全局都可以使用handlerClickToPage 第一个参数 page ，第二个参数是对象, page必填，可以是页面的全路径和可以是 config 中的 routes 别名，具体可以看 Fun.js 文件的 toPage 方法，例如：
跳转首页可以用: handlerClickToPage('index')
跳转商品详情可以用: handlerClickToPage('index',{id:1})

fetch-list.js

export default {
  data() {
    return {
      searchParams: {
        page: 1,
        size: 20
      },
      apiField: {
        module: '', // api目录下的文件名称
        api: '', // api的名称
        searchKey: 'searchParams', // 搜索
        listKey: 'list', //数据
        // 额外处理处理 $data 接口返回， $self -> this
        handler($data, $self) {
          return $data;
        }
      },
      isLast: false,
      isLadingFetch: false,
    };
  }
}

• searchParams 搜索的参数
• apiField api 参数的配置
  module: api模块 详情可以查看 API联调
  module: api模块 详情可以查看 API联调
  searchKey: data中使用的搜索字段 默认是searchParams
listKey: 获取的数据将绑定的字段
  handler 如果需要额外处理完数据后再绑定在listKey那么可以使用该方法，必须要把$data 返回
• isLast 是否已经加载到最后一页
• isLadingFetch 是否正在加载中

使用fetch-list.js

如果有一个列表接口为 uni.$API.Demo.list()

import fetchList from "@/mixins/fetch-list";

export default {
  mixins: [fetchList],
  data() {
    return {
      listData: [],
      search: {
        size: 20,
        page: 1
      },
      apiField: {
        api: 'product',
        model: 'Public',
        searchKey: 'search',
        listKey: 'listData',
        handler($data) {
          // 单独处理完成数据，返回$data 会直接赋值到 listKey
          if ($data.code === 0) {
            $data.data[0].statusName = '前端新增状态名称';
          }
          return $data
        }
      },
    };
  },
  onLoad() {
    // fetch-list.js 获取第一页的方法
    this.refreshData();
  },
  methods: {
    // 下拉刷新
    onPullDownRefresh() {
      this.refreshData();
    },
    // 上拉刷新
    onReachBottom() {
      this.onReachData();
    },
  },
}