/**
* 页面的初始数据
*/
data: {
// 左侧菜单的数据
leftMenuList:[],
// 右侧的商品数据
rightContent:[],
// 被点击的 左侧的菜单
currentIndex:0
},
// 接口的返回数据
Cates:[],
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
/**
* 1 判断缓存有没有数据
* 2 如果没有 就直接发送请求
* 3 有旧数据 同时 旧的数据 也没有过期 就使用 本地存储中的数据
*/
// 1 获取本地存储数据
const cates = wx.getStorageSync("cates");
// 2 判断
if(!cates){
console.log(‘第一次发送请求‘)
this.getCates()
}else{
// 有旧的数据 10s 改成 5分钟
if(Date.now() - cates.time > 1000 * 10){
console.log(‘重新发送请求‘)
// 重新发送请求
this.getCates()
}else{
// 可以使用旧的数据
console.log(‘可以使用旧的数据‘)
this.Cates = cates.data;
// 构造左侧的大菜单数据
let leftMenuList = this.Cates.map(v=>v.cat_name)
// 构造右侧的商品数据
let rightContent = this.Cates[0].children
this.setData({
leftMenuList,
rightContent
})
}
}
},
// 获取分类数据
getCates(){
request({
url:""
})
.then((res)=>{
// console.log(res)
this.Cates = res.data.message
// 把接口数据存储到本地存储中
wx.setStorageSync(‘cates‘, {time:Date.now(),data:this.Cates});
// 构造左侧的大菜单数据
let leftMenuList = this.Cates.map(v=>v.cat_name)
// 构造右侧的商品数据
let rightContent = this.Cates[0].children
this.setData({
leftMenuList,
rightContent
})
})
},
// 左侧菜单的点击事件
handleItemTap(e){
// 1 获取被点击的索引
const {index} = e.currentTarget.dataset;
// 构造右侧的商品数据
let rightContent = this.Cates[index].children
// 2 设置点击索引 根据不同的索引 渲染右侧的商品内容
this.setData({
currentIndex: index,
rightContent
})
},
