第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"><viewbindtap="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{}}}}}
}