第59讲订单数据下拉实现

import com.baomidou.mybatisplus.extension.plugins.pagination.Page;

    /*** 订单查询 type值 0 全部订单  1待付款  2 待收货  3 退款/退货* @param type* @return*/@RequestMapping("/list")public R list(Integer type,Integer page,Integer pageSize){System.out.println("type="+type);List<Order> orderList=null;Map<String,Object> resultMap=new HashMap<String,Object>();Page<Order> pageOrder=new Page<>(page,pageSize);if(type==0){  // 全部订单查询// orderList=orderService.list(new QueryWrapper<Order>().orderByDesc("id"));Page<Order> orderResult = orderService.page(pageOrder, new QueryWrapper<Order>().orderByDesc("id"));System.out.println("总记录数："+orderResult.getTotal());System.out.println("总页数："+orderResult.getPages());System.out.println("当前页数据："+orderResult.getRecords());orderList=orderResult.getRecords();resultMap.put("total",orderResult.getTotal());resultMap.put("totalPage",orderResult.getPages());}else{// orderList = orderService.list(new QueryWrapper<Order>().eq("status", type).orderByDesc("id"));Page<Order> orderResult = orderService.page(pageOrder, new QueryWrapper<Order>().eq("status", type).orderByDesc("id"));System.out.println("总记录数："+orderResult.getTotal());System.out.println("总页数："+orderResult.getPages());System.out.println("当前页数据："+orderResult.getRecords());orderList=orderResult.getRecords();resultMap.put("total",orderResult.getTotal());resultMap.put("totalPage",orderResult.getPages());}resultMap.put("orderList",orderList);return R.ok(resultMap);}

前端定义分页参数：

 // 接口参数QueryParams:{type:0,page:1,// 第几页pageSize:10 // 每页记录数},// 总页数totalPage:1,

触底获取下一页数据：

  /*** 页面上拉触底事件的处理函数*/onReachBottom: function () {console.log("触底")if(this.QueryParams.page>=this.totalPage){// 没有下一页数据console.log("没有下一页数据");wx.showToast({title: '没有下一页数据了'})}else{console.log("有下一页数据");this.QueryParams.page++;this.getOrders();}},

拼接下一页数据：

  /*** 获取订单*/async getOrders(){const res=await requestUtil({url:'/my/order/list',data:this.QueryParams});console.log(res)this.totalPage=res.totalPage;this.setData({orders:[...this.data.orders,...res.orderList]})},

重置请求参数：

  // 根据标题索引来激活选中的数据changeTitleByIndex(index){// 切换标题let {tabs}=this.data;tabs.forEach((v,i)=>i==index?v.isActive=true:v.isActive=false);this.setData({tabs})},/*** tab点击事件处理* @param {*} e */handleItemTap(e){const {index}=e.currentTarget.dataset;this.changeTitleByIndex(index);// console.log("index="+index)// 获取订单列表this.QueryParams.type=index;this.QueryParams.page=1;this.setData({orders:[]})this.getOrders();},

下拉刷新实现：

开启下拉刷新：

{"usingComponents": {},"navigationBarTitleText": "订单查询","enablePullDownRefresh":true,"backgroundTextStyle":"dark"
}

下拉刷新事件

    /*** 页面相关事件处理函数--监听用户下拉动作*/onPullDownRefresh: function () {console.log("下拉刷新")this.QueryParams.page=1;this.setData({orders:[]})this.getOrders();// 手动关闭等待效果wx.stopPullDownRefresh({})}

进入页面加载信息：

  /*** 生命周期函数--监听页面显示*/onShow: function () {console.log("onShow")let pages=getCurrentPages();console.log(pages)let currentPage=pages[pages.length-1];const {type}=currentPage.options;this.changeTitleByIndex(type);this.QueryParams.type=type;this.QueryParams.page=1;this.getOrders();},

报错

2024-02-08 14:33:15.723  WARN 26256 --- [nio-8080-exec-2] .m.m.a.ExceptionHandlerExceptionResolver : Resolved [org.springframework.web.method.annotation.MethodArgumentTypeMismatchException: Failed to convert value of type 'java.lang.String' to required type 'java.lang.Integer'; nested exception is java.lang.NumberFormatException: For input string: "undefined"]

链接

http://localhost:8080/my/order/list?type=undefined&page=1&pageSize=10

http://localhost:8080/my/order/list?type=0&page=1&pageSize=10