动态数据渲染订单查询实现
/**
* 订单查询 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);
}
// 导入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{
}
}
}
}
}
}