54、订单查询页面_获取订单接口数据
订单查询页面的业务逻辑
1 页面被打开的时候 onShow
onshow不同于onLoad 无法在形参上接收options参数
判断缓存中有没有token （1 没有直接跳转到授权页面，2 有直接往下进行）
获取url上的参数type
根据type去发送请求获取订单数据
渲染页面
2 点击不同的标题重新发送请求来获取和渲染数据
历史订单查询接口文档
pages\order\index.js
// pages/order/index.js
Page({
/**
* 页面的初始数据
*/
data: {
tabs:[
{
id: 0,
value:"全部",
isActive: true
},
{
id: 1,
value:"待付款",
isActive: false
},
{
id: 2,
value:"代发货",
isActive: false
},
{
id: 3,
value:"退款/退货",
isActive: false
}
]
},
onShow(options){
const token = wx.getStorageSync("token");
if (!token) {
wx.navigateTo({
url: '/pages/auth/index'
});
return;
}
// 1 获取当前的小程序的页面栈-数组长度最大是10页面
let pages = getCurrentPages();
// 2 数组中索引最大的页面就是当前页面
let currentPage=pages[pages.length-1];
console.log(currentPage.options);
// 3 获取url上的type参数
const {
type}=currentPage.options;
this.getorders(type);
},
// 获取订单列表的方法
async getOrders(type){
const res=await request({
url:"/my/orders/all", data:{
type}});
console.log(res);
},
handleTabsItemChange(e){
// 1 获取被点击的标题索引
const {
index}=e.detail;
// 2 修改源数组
let {
tabs}=this.data;
tabs.forEach((v,i)=>i===index?v.isActive=true:v.isActive=false);
// 3 赋值到data中
this.setData({
tabs
})
}
})
pages\order\index.js
点全部订单——>调到授权页面——>点获取授权
将数组放到data中给下一步骤进行渲染
// pages/order/index.js
Page({
/**
* 页面的初始数据
*/
data: {
orders:[],
tabs:[
{
id: 0,
value:"全部",
isActive: true
},
{
id: 1,
value:"待付款",
isActive: false
},
{
id: 2,
value:"代发货",
isActive: false
},
{
id: 3,
value:"退款/退货",
isActive: false
}
]
},
onShow(options){
const token = wx.getStorageSync("token");
if (!token) {
wx.navigateTo({
url: '/pages/auth/index'
});
return;
}
// 1 获取当前的小程序的页面栈-数组长度最大是10页面
let pages = getCurrentPages();
// 2 数组中索引最大的页面就是当前页面
let currentPage=pages[pages.length-1];
console.log(currentPage.options);
// 3 获取url上的type参数
const {
type}=currentPage.options;
this.getorders(type);
},
// 获取订单列表的方法
async getOrders(type){
const res=await request({
url:"/my/orders/all", data:{
type}});
this.setData({
orders:res.orders
})
},
handleTabsItemChange(e){
// console.log(e);
// 1 获取被点击的标题索引
const {
index}=e.detail;
// 2 修改源数组
let {
tabs}=this.data;
tabs.forEach((v,i)=>i===index?v.isActive=true:v.isActive=false);
// 3 赋值到data中
this.setData({
tabs
})
}
})
点全部订单——>点AppData
