小程序侧边栏左右联动

  {{classify.name}}

  
  {{classify.name}}
  
    
      
    
    
       {{cake.goods_name}}
      
       ￥{{cake.spec[0].goods_price}}
      

        -
        
        +
      
      
     

    

  

/goods/
.content-container{
display: flex;
}
.classify-container{
flex:1;
height: 80vh;
text-align: center;
/* border:solid 1px orange; /
}
/ /
.classify{
/ border:solid 1px blue; /
/ line-height: 40px; /
padding-top:15rpx;
/ padding-bottom: 15rpx; /
}
.active{
color:red;
font-weight: 600;
}
.goods-container{
flex:3.8;
height: 90vh;
/ border:solid 1px red; /
}
.goods{
min-height: 100px;
margin-bottom: 30rpx;
display: flex;
width:100%;
position: relative;
align-items:center;
/ background:orange; /
/ border-bottom:1rpx solid #f5f5f5; /
/ padding-bottom:10rpx; */
}

.goods-name{
margin-bottom: 20rpx;
/*关键属性（必须有的） */
display: -webkit-box;
/*规定子元素的排列方向 */
-webkit-box-orient: vertical;
/*限制文本显示的行数 */
-webkit-line-clamp:2;
/*实现多余的文字隐藏并用省略号来代表被隐藏的文字 */
overflow: hidden;
text-overflow:ellipsis;
}
.goods image{
width: 150rpx;
height:150rpx;
margin-right:10rpx
}

// let App = getApp();
// Page({

// /**
// * 页面的初始数据
// */
// data: {
// goods_list: [],
// curNav: 0, //当前项ID
// curIndex: 0 ,//当前项
// height:0,

// curNav: 0,
// curIndex: 0,

// rigId:0,
// classfiySelect:0,
// height:0,
// heightArr: 0,
// classfiySelect: “”,
// leftText: [
// // {
// // id: “01”,
// // text1: “标题1”,
// // img_url: “http://img4.imgtn.bdimg.com/it/u=3209370120,2008812818&fm=26&gp=0.jpg”,
// // },

// ],
// rightData: [
// // {
// // id: “01”,
// // title: “内容1”,
// // frist: [{
// // url: “https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=2018939532,1617516463&fm=26&gp=0.jpg”,
// // text: “文字说明1”,
// // },
// // {
// // url: “https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=2018939532,1617516463&fm=26&gp=0.jpg”,
// // text: “文字说明2”,
// // },

// // ],

// // },
// ],

// text: ‘’,
// fromDetail:false

// },
// //事件处理函数
// switchRightTab: function(e) {

// // 获取item项的id，和数组的下标值
// let id = e.target.dataset.id,
// index = parseInt(e.target.dataset.index);

// // 把点击到的某一项，设为当前index
// this.setData({
// curNav: id,
// curIndex: index,

// })

// },
// /**
// * 生命周期函数–监听页面加载
// */
// onLoad: function(options) {
// var sysInfo = wx.getSystemInfoSync();

// },

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

// },

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

// this.getCartList()
// this.getPrice()

// if(this.data.fromDetail==false){
// this.getLeftData()
// }

// },
// /** 购物车列表 */
// getCartList: function() {
// let that = this;
// App._post(‘category/getGoodsList’, {}, function(result) {

// that.setData({
// rightData: result.data,
// curNav: result.data[0].id,
// curIndex:0
// })

// });
// },
// // 初始化价格
// getPrice() {

// let that = this;
// App._post(‘cart/getCartLists’, {}, function(result) {
// that.setData({
// order_total_price: result.data.order_total_price,
// num: result.data.order_total_num
// })
// });
// },
// /**
// * 生命周期函数–监听页面隐藏
// */
// onHide: function() {

// },

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

// },

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

// },

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

// },

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

// },

// chooseType(e) {
// let id = e.currentTarget.dataset.id;
// let index = e.currentTarget.dataset.index;
// this.setData({
// contentActive: id,
// navActive: index
// })

// },

// onplus: function(e) {

// var cur = parseInt(e.currentTarget.dataset.indexx)
// let that = this,

// index = parseInt(e.currentTarget.dataset.index),
// goodsSkuId = e.currentTarget.dataset.goods_sku_id,
// goods = that.data.rightData[index].goods[cur],

// order_total_price = that.data.order_total_price;
// console.log(goods, order_total_price,’++++++++++++’)
// if (goods.count > goods.spec[0].stock_num) {
// return
// }
// wx.showLoading({
// title: ‘加载中’,
// mask: true
// })
// App._post(‘cart/add’, {
// goods_id: e.currentTarget.dataset.goods_id,
// goods_num: 1,
// goods_sku_id: goodsSkuId,
// }, function(result) {
// var num = parseInt(that.data.num) + 1
// var count = goods.count+1
// goods.count = count;
// var money = (Number(order_total_price) + Number(goods.spec[0].goods_price)).toFixed(2)
// that.setData({
// [‘rightData[’ + index + ‘].goods[’ + cur + ‘]’]: goods,
// // order_total_price:money,
// // num: num
// });
// that.getPrice()
// });

// },
// mathadd: function(arg1, arg2) {
// return (Number(arg1) + Number(arg2)).toFixed(2);
// },
// onsub: function(e) {

// var cur = parseInt(e.currentTarget.dataset.indexx)
// let that = this,
// index = parseInt(e.currentTarget.dataset.index),
// goodsSkuId = e.currentTarget.dataset.goods_sku_id,
// goods = that.data.rightData[index].goods[cur],
// order_total_price = that.data.order_total_price;
// console.log(goods, order_total_price, ‘----------’)
// if (goods.count == 0 || e.currentTarget.dataset.value == 0) {

// return
// }
// wx.showLoading({
// title: ‘加载中’,
// mask: true
// })
// App._post(‘cart/sub’, {
// goods_id: e.currentTarget.dataset.goods_id,
// goods_sku_id: goodsSkuId,
// }, function(result) {
// wx.showLoading({
// title: ‘加载中’,
// mask: true
// })

// goods.count–;
// var money = (Number(order_total_price) + Number(goods.spec[0].goods_price)).toFixed(2)
// var num = that.data.num - 1
// goods.count >= 0 &&
// that.setData({
// [‘rightData[’ + index + ‘].goods[’ + cur + ‘]’]: goods,
// order_total_price: money,

// });
// that.getPrice()
// wx.hideLoading();
// });
// },
// mathsub: function(arg1, arg2) {
// console.log((Number(arg1) - Number(arg2)).toFixed(2))
// return (Number(arg1) - Number(arg2)).toFixed(2);
// },

// onSubmit: function(e) {
// if (this.data.num == 0) {
// App.showError(‘请至少选择一个商品’);
// return;
// }
// wx.navigateTo({
// url: ‘/pages/cart/checout?type=cart’
// })
// },

// //滚动触发
// scroll: function (e) {
// var scrollTop = e.detail.scrollTop,
// h = 0,
// classfiySelect;
// var that = this;

// that.data.leftText.forEach(function (clssfiy, i) {
// var _h = that.length(clssfiy[‘id’]);

// if (scrollTop >= h) {
// classfiySelect = clssfiy[‘id’];
// }
// h += _h;
// that.setData({
// curIndex: i,
// })
// })

// that.setData({
// classfiySelect: classfiySelect,
// })
// },
// //求每一栏高度
// length: function (e) {
// var query = wx.createSelectorQuery();
// //选择id
// var that = this;
// var rightData = that.data.rightData;
// var heightArr = [];
// for (var i = 0; i < rightData.length; i++) {
// if (rightData[i][‘id’] == e) {
// query.selectAll(’.listHeight’).boundingClientRect(function (n) {
// var s = 0;
// n.forEach((res) => {
// s += res.height;
// heightArr.push(s)
// });
// var arr1 = heightArr;
// var arr2 = [];
// arr2.push(arr1[0]);
// for (var j = 1; j <= arr1.length - 1; j++) {
// arr2.push(arr1[j] - arr1[j - 1])
// }

// that.setData({
// heightArr: arr2
// })
// }).exec()
// return that.data.heightArr[i]
// }
// }
// },
// //点击左边事件
// left_list: function (e) {
// var that = this;
// var l_id = e.currentTarget.dataset.id;
// var index = parseInt(e.target.dataset.index);
// that.setData({
// rigId: l_id,
// classfiySelect: l_id,
// curIndex:index
// })

// },
// getLeftData() {
// var that = this
// App._post(‘category/getCatelist’, {}, function (result) {

// that.setData({
// leftText: result.data.categorydata,

// })
// var sysInfo = wx.getSystemInfoSync();
// that.setData({
// classfiySelect: that.data.leftText[0].id,
// screenHeight: sysInfo.windowHeight
// })

// that.length(‘06’)
// });
// },

// toDetails(e){
// wx.navigateTo({
// url: ‘/pages/goods/index?goods_id=’+e.currentTarget.dataset.goods_id,
// })
// },

// //获取通告消息
// getAnnouncement() {
// let that = this
// var screenW = wx.getSystemInfoSync().windowWidth; //获取屏幕宽度
// App._post(‘user/getNotice’, {}, res => {
// if (!res.data.content){
// return
// }
// that.setData({
// text:res.data.content
// })

// })
// },

// onChange(value) {
// console.log(value);
// // Toast.loading({ forbidClick: true });

// setTimeout(() => {
// // Toast.clear();
// this.setData({ value });
// }, 500);
// },

// onHide() {
// this.setData({
// fromDetail: false
// })
// }

// })

//index.js
//获取应用实例
let App = getApp();

var scrollTimer
Page({
data: {
classifySeleted: ‘1’, //默认为第一个
cakeTypesTitle: [
{
typeId: 1,
typeName: ‘第一’
},],
cakeTypes: [
{
typeName: ‘第一’,
typeId: 1,
productIds: [{
imgsrc: ‘https://minstech-mp.oss-cn-hangzhou.aliyuncs.com/addons/yuniudao/timg.jpg’
}, {
imgsrc: ‘https://minstech-mp.oss-cn-hangzhou.aliyuncs.com/addons/yuniudao/timg.jpg’
}, {
imgsrc: ‘https://minstech-mp.oss-cn-hangzhou.aliyuncs.com/addons/yuniudao/timg.jpg’
}, {
imgsrc: ‘https://minstech-mp.oss-cn-hangzhou.aliyuncs.com/addons/yuniudao/timg.jpg’
}, {
imgsrc: ‘https://minstech-mp.oss-cn-hangzhou.aliyuncs.com/addons/yuniudao/timg.jpg’
}, {
imgsrc: ‘https://minstech-mp.oss-cn-hangzhou.aliyuncs.com/addons/yuniudao/timg.jpg’
}, {
imgsrc: ‘https://minstech-mp.oss-cn-hangzhou.aliyuncs.com/addons/yuniudao/timg.jpg’
}]
},

],
typeIndex:0,
titleItemH:[],
fromDetail:false,
goods_list:[],
show:false,
order_total_price:0,
height:0,
 num:0

},
onLoad:function(){
this.setData({
height: wx.getSystemInfoSync().windowHeight
})

console.log('onLoad')

},
onShow: function () {
console.log(‘onShow’)
this.getCartList()
console.log(‘ggggggggggggggggggggg’)
//这里先默认标题高度为30 item高度为100
this.getPrice()

this.getAnnouncement()
    if(this.data.fromDetail==false){
      this.getLeftData()
}

},
onGoodsScroll: function (e) {
let self = this
if (scrollTimer) {
clearTimeout(scrollTimer)
}

//e.detail.scrollTop 滚动距离
var scrollTop = e.detail.scrollTop;
var h = 0;
//左边菜单那个要亮 点个全局变量classifySeleted 根据滚动高度去置换它，决定哪边亮
var classifySeleted = this.data.classifySeleted;
// 当前元素 当前元素的索引值 这个cakeTypes是右边的数据


this.data.titleItemH.forEach(function (classify, i) {

 
  //标题高度+加整个元素的高度
  var _h = classify.titleItemH;
 
  // 这可通过调节高度决定滚到哪里
  if (scrollTop >= h - 10) {
    classifySeleted = classify.id;
  }
  //得到所有的高度
  h += _h;
});

// this.setData({
//   classifySeleted: classifySeleted
// });
//isTap只是判断它是否点击过
if (this.data.isTap) {
  this.setData({
    isTap: false,
    classifySeleted: classifySeleted
  })
} else {
  this.setData({
    classifySeleted: classifySeleted
  });
}

},

tapClassify: function (e) {

let id = e.currentTarget.dataset.id
this.setData({
  isTap: true,
  classifySeleted: id,
  typeIndex: id
});

},

// /** 购物车列表 */
getCartList: function() {
let that = this;
App._post(‘category/getGoodsList’, {}, function(result) {

  // that.setData({
  //   cakeTypes: result.data,
  //   // curNav: result.data[0].id,
  //   // curIndex:0
  // })
  let titleItemH = []
  for (let i = 0; i < result.data.length; i++) {
    let titleH = 30
    let itemH = result.data[i].goods.length * 100
    let dd = {}
    dd.id = result.data[i].id
    dd.titleItemH = titleH + itemH
    titleItemH.push(dd)
  }
 
  that.setData({
    titleItemH: titleItemH,
    cakeTypes: result.data,
  })

});

},
getLeftData() {
var that = this
App._post(‘category/getCatelist’, {}, function (result) {

  that.setData({
    cakeTypesTitle: result.data.categorydata,
    classifySeleted: result.data.categorydata[0].id,
  })
 
});

},
// // 初始化价格
getPrice() {
console.log(this.data.order_total_price, ‘ffffffffffffffffff’)
let that = this;
App._post(‘cart/getCartLists’, {}, function(result) {
console.log(result.data.order_total_price,‘ffffffffffffffffff’)
that.setData({
order_total_price: result.data.order_total_price,
num: result.data.order_total_num
})
});
},

// //获取通告消息
getAnnouncement() {
let that = this
var screenW = wx.getSystemInfoSync().windowWidth; //获取屏幕宽度
App._post(‘user/getNotice’, {}, res => {
if (!res.data.content){
return
}
that.setData({
text:res.data.content
})

})

},
toDetails(e){
wx.navigateTo({
url: ‘/pages/goods/index?goods_id=’+e.currentTarget.dataset.goods_id,
})
},

onplus: function(e) {

var cur = parseInt(e.currentTarget.dataset.indexx)
let that = this,

  index =  parseInt(e.currentTarget.dataset.index),
  goodsSkuId = e.currentTarget.dataset.goods_sku_id,
  goods = that.data.cakeTypes[index].goods[cur],

  order_total_price = that.data.order_total_price;
console.log(index)
if (goods.count > goods.spec[0].stock_num) {
  return
}
wx.showLoading({
  title: '加载中',
  mask: true
})
App._post('cart/add', {
  goods_id: e.currentTarget.dataset.goods_id,
  goods_num: 1,
  goods_sku_id: goodsSkuId,
}, function(result) {
  var num = parseInt(that.data.num) + 1
  var count = goods.count+1
  goods.count = count;
  var money = (Number(order_total_price) + Number(goods.spec[0].goods_price)).toFixed(2)
  that.setData({
    ['cakeTypes[' + index + '].goods[' + cur + ']']: goods,
    // order_total_price:money,
    // num: num
  });
  that.getPrice()
});

},
mathadd: function(arg1, arg2) {
return (Number(arg1) + Number(arg2)).toFixed(2);
},
onsub: function(e) {

var cur = parseInt(e.currentTarget.dataset.indexx)
let that = this,
  index =  parseInt(e.currentTarget.dataset.index),
  goodsSkuId = e.currentTarget.dataset.goods_sku_id,
  goods = that.data.cakeTypes[index].goods[cur],
  order_total_price = that.data.order_total_price;

if (goods.count == 0 || e.currentTarget.dataset.value == 0) {

  return
}
wx.showLoading({
  title: '加载中',
  mask: true
})
App._post('cart/sub', {
  goods_id: e.currentTarget.dataset.goods_id,
  goods_sku_id: goodsSkuId,
}, function(result) {
  wx.showLoading({
    title: '加载中',
    mask: true
  })

  goods.count--;
  var money = (Number(order_total_price) + Number(goods.spec[0].goods_price)).toFixed(2)
  var num = that.data.num - 1
  goods.count >= 0 &&
    that.setData({
    ['cakeTypes[' + index + '].goods[' + cur + ']']: goods,
      // order_total_price: money,

    });
  that.getPrice()
  wx.hideLoading();  
});

},
mathsub: function(arg1, arg2) {

return (Number(arg1) - Number(arg2)).toFixed(2);

},

onSubmit: function(e) {
if (this.data.num == 0) {
App.showError(‘请至少选择一个商品’);
return;
}
wx.navigateTo({
url: ‘/pages/cart/checout?type=cart’
})
},

/** 已选列表 */
getList: function () {
this.setData({
show:true
})
let that = this;
App._get(‘cart/getlists’, {}, function (result) {

  that.setData({
    goods_list: result.data.goods_list
    });
  //提示下架的商品
  if (result.data.error_msg != '') {
    //App.showError(result.data.error_msg);
  }
});

},

onClose() {
this.setData({ show: false });
}
})