第58讲 动态数据渲染订单查询实现

动态数据渲染订单查询实现

/**
     * 订单查询 type值 0 全部订单  1 待付款  2 待收货 3 退款/退货
     * @param type
     * @return
     */
    @RequestMapping("/list")
    public R list(Integer type){
        System.out.println("type="+type);

        List<Order> orderList=null;
        Map<String,Object> resultMap=new HashMap<>();

        if(type==0){ // 全部订单查询
            orderList=orderService.list(new QueryWrapper<Order>().orderByDesc("id"));
        }else{
            orderList=orderService.list(new QueryWrapper<Order>().eq("status",type).orderByDesc("id"));
        }

        resultMap.put("orderList",orderList);
        return R.ok(resultMap);
    }

• 订单查询 type值 0 全部订单 1待付款 2 待收货 3 退款/退货
• @param type
• @return

// 导入request请求工具类
import {
  getBaseUrl,
  requestUtil
} from '../../utils/requestUtil.js';
import regeneratorRuntime from '../../lib/runtime/runtime';
Page({

  /**
   * 页面的初始数据
   */
  data: {
    orders:[],
    tabs:[
      {
        id:0,
        value:"全部订单",
        isActive:true
      },
      {
        id:1,
        value:"待付款",
        isActive:false
      },
      {
        id:2,
        value:"待收货",
        isActive:false
      },
      {
        id:3,
        value:"退款/退货",
        isActive:false
      },
    ]
  },

  // 接口参数
  QueryParams:{
    type:0
  },

  /**
   * tab点击事件处理
   * @param {} e 
   */
  handleItemTap(e){
    const {index}=e.currentTarget.dataset;
    console.log(index)
    // 切换标题
    let {tabs}=this.data;
    tabs.forEach((v,i)=>i==index?v.isActive=true:v.isActive=false);

    // 获取订单列表
    this.QueryParams.type=index;
    this.getOrders();

    this.setData({
      tabs
    })
  },

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

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {

  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {

  }
})

请求后端：

<view class="tabs">
  <view class="tabs_title">
    <view
      bindtap="handleItemTap"
      data-index="{{index}}"
      wx:for="{{tabs}}"
      wx:key="id"
      class="title_item {{item.isActive?'active':''}}">
      {{item.value}}
    </view>
   
  </view>
  <view class="tabs_content">
    <view class="order_main">
      <view 
        wx:for="{{orders}}"
        wx:key="id"
      class="order_item">
        <view class="order_no_row">
          <view class="order_no_text">订单编号</view>
          <view class="order_no_value">{{item.orderNo}}</view>
        </view>
        <view class="order_price_row">
          <view class="order_price_text">订单价格</view>
          <view class="order_price_value">¥{{item.totalPrice}}</view>
        </view>
        <view class="order_time_row">
          <view class="order_time_text">订单日期</view>
          <view class="order_time_value">{{item.createDate}}</view>
        </view>
      </view>
    </view>
  </view>
</view>

.tabs{
  .tabs_title{
    display: flex;
    .title_item{
      display: flex;
      justify-content: center;
      align-items: center;
      flex:1;
      padding: 15rpx 0;
    }
    .active{
      color: var(--themeColor);
      border-bottom: 5rpx solid currentColor;
    }
  }
  .tabs_content{
    .order_main{
      .order_item{
        padding: 20rpx;
        border-bottom: 1rpx solid #ccc;
        color: #666;
        .order_no_row{
          display: flex;
          justify-content: space-between;
          padding: 10rpx 0;
          .order_no_text{

          }
          .order_no_value{

          }
        }
        .order_price_row{
          display: flex;
          justify-content: space-between;
          padding: 10rpx 0;
          .order_price_text{

          }
          .order_price_value{
            color: var(--themeColor);
            font-size: 32rpx;
          }
        }
        .order_time_row{
          display: flex;
          justify-content: space-between;
          padding: 10rpx 0;
          .order_time_text{

          }
          .order_time_value{

          }
        }
      }
    }
  }
}