|
|
@@ -25,13 +25,20 @@ import {
|
|
|
|
|
|
import Util from '../../utils/util.js';
|
|
|
|
|
|
+const CATE_BLACKHOLE_ID = 199
|
|
|
+const PAGE_LIMIT = 20
|
|
|
+const THROTTLE_TIME = 100
|
|
|
+const HEIGHT_OF_ROW = 500 // 摘抄自 css, 商品高度,包含图片文字 margin.
|
|
|
+const ITEM_NUM_OF_ROW = 2 // 设计为一行 2 个元素
|
|
|
+
|
|
|
Page({
|
|
|
/**
|
|
|
* 页面的初始数据
|
|
|
*/
|
|
|
data: {
|
|
|
+ CATE_BLACKHOLE_ID: CATE_BLACKHOLE_ID,
|
|
|
logoUrl: '', // 左上方 logo
|
|
|
- categoryOne: [], // 分类列表/活动列表 (目前只有一个,就是“活动”)
|
|
|
+ prodCates: [], // 分类列表/活动列表 (目前只有一个,就是“活动”)
|
|
|
banner: [], // 顶部 banner
|
|
|
itemNew: [], // 跑马灯列表
|
|
|
menus: [],
|
|
|
@@ -71,7 +78,6 @@ Page({
|
|
|
isAuto: true, // 是否自动授权;
|
|
|
iShidden: true, // 是否隐藏;
|
|
|
isGoIndex: false, // 是否返回首页;
|
|
|
- navH: "", // 标题栏高度
|
|
|
recommend: {
|
|
|
loadend: false,
|
|
|
loading: false,
|
|
|
@@ -79,16 +85,14 @@ Page({
|
|
|
page: 1,
|
|
|
limit: 20,
|
|
|
},
|
|
|
- where: {
|
|
|
- page: 1,
|
|
|
- limit: 20,
|
|
|
- cid: 0, //一级分类id
|
|
|
- sid: 0 //二级分类id
|
|
|
- },
|
|
|
- loadend: false, // 是否已全部加载
|
|
|
- loading: false, // 是否正在加载
|
|
|
- loadTitle: '加载更多',
|
|
|
- productList: [],
|
|
|
+ /// 以下为拉洋片算法参数
|
|
|
+ navH: 0, // 标题栏高度
|
|
|
+ navPxH: 0, //
|
|
|
+ rowHeight: HEIGHT_OF_ROW,
|
|
|
+ rowPxHeight: HEIGHT_OF_ROW,
|
|
|
+ rowProdNum: ITEM_NUM_OF_ROW,
|
|
|
+ rowCacheNum: 5, // 拉洋片缓冲商品: 3 行
|
|
|
+ ///
|
|
|
activeTabIndex: 0,
|
|
|
countDownHour: "00",
|
|
|
countDownMinute: "00",
|
|
|
@@ -125,11 +129,22 @@ Page({
|
|
|
url: '/pages/goods_details/index?id=' + options.id + '&spid=' + options.spid,
|
|
|
})
|
|
|
}
|
|
|
+ let query = wx.createSelectorQuery()
|
|
|
+ query.select('.indexs').boundingClientRect((rect) => {
|
|
|
+ let width = rect.width
|
|
|
+ let ratio = 750 / width
|
|
|
+ this.setData({
|
|
|
+ rowPxHeight: Math.floor(this.data.rowHeight / ratio),
|
|
|
+ navH: app.globalData.navHeight,
|
|
|
+ navPxH: Math.floor(app.globalData.navHeight / ratio),
|
|
|
+ })
|
|
|
+ }).exec()
|
|
|
+
|
|
|
wxh.selfLocation(1);
|
|
|
this.getCategoryData();
|
|
|
// this.getCoupon();
|
|
|
this.get_hot_product();
|
|
|
- this.get_product_list();
|
|
|
+ // this.get_product_list();
|
|
|
this.setData({
|
|
|
navH: app.globalData.navHeight
|
|
|
});
|
|
|
@@ -286,10 +301,10 @@ Page({
|
|
|
/**
|
|
|
* 获取我的推荐
|
|
|
*/
|
|
|
- get_hot_product: function (isPage) {
|
|
|
+ get_hot_product: function (isReload) {
|
|
|
if (this.data.recommend.loadend) return;
|
|
|
if (this.data.recommend.loading) return;
|
|
|
- if (isPage === true) {
|
|
|
+ if (isReload) {
|
|
|
this.setData({
|
|
|
hotProducts: []
|
|
|
});
|
|
|
@@ -313,8 +328,8 @@ Page({
|
|
|
});
|
|
|
}).catch(err => {
|
|
|
that.setData({
|
|
|
- loading: false,
|
|
|
- loadTitle: '加载更多'
|
|
|
+ 'recommend.loading': false,
|
|
|
+ 'recommend.loadTitle': '加载更多'
|
|
|
});
|
|
|
});
|
|
|
},
|
|
|
@@ -322,11 +337,14 @@ Page({
|
|
|
/** 点击上方活动标签按钮 */
|
|
|
onTapCategoryTabItem: function (event) {
|
|
|
let tabIndex = event.detail.index;
|
|
|
- if (tabIndex <= 0 || tabIndex > this.data.categoryOne.children.length) {
|
|
|
+ if (tabIndex <= 0 || tabIndex > this.data.prodCates.children.length) {
|
|
|
+ this.setData({
|
|
|
+ activeTabIndex: tabIndex
|
|
|
+ })
|
|
|
return
|
|
|
}
|
|
|
|
|
|
- if (this.data.categoryOne.children[tabIndex - 1].id === 199) {
|
|
|
+ if (this.data.prodCates.children[tabIndex - 1].id === CATE_BLACKHOLE_ID) {
|
|
|
// 黑洞
|
|
|
let mine = null
|
|
|
if (this.data.cpnMine == null) {
|
|
|
@@ -344,14 +362,15 @@ Page({
|
|
|
}
|
|
|
|
|
|
this.setData({
|
|
|
- activeTabIndex: tabIndex,
|
|
|
- 'where.page': 1,
|
|
|
- loadend: false,
|
|
|
- loading: false,
|
|
|
- 'where.cid': this.data.categoryOne.id,
|
|
|
- 'where.sid': this.data.categoryOne.children[tabIndex - 1].id,
|
|
|
+ activeTabIndex: tabIndex
|
|
|
+ })
|
|
|
+ // 首屏
|
|
|
+ if (this.data.prodCates.children[tabIndex - 1].page <= 1) {
|
|
|
+ this.get_product_list(tabIndex);
|
|
|
+ }
|
|
|
+ wx.pageScrollTo({
|
|
|
+ scrollTop: this.data.prodCates.children[tabIndex - 1].scrollPos
|
|
|
})
|
|
|
- this.get_product_list(true);
|
|
|
},
|
|
|
|
|
|
// productTap: function (e) {
|
|
|
@@ -360,41 +379,79 @@ Page({
|
|
|
// 'where.page': 1,
|
|
|
// loadend: false,
|
|
|
// loading: false,
|
|
|
- // 'where.sid': this.data.categoryOne[this.data.activeTabIndex - 1].children[index].id
|
|
|
+ // 'where.sid': this.data.prodCates[this.data.activeTabIndex - 1].children[index].id
|
|
|
// })
|
|
|
// this.get_product_list(true);
|
|
|
// },
|
|
|
|
|
|
- get_product_list: function (isPage) {
|
|
|
- if (this.data.loading) return;
|
|
|
- if (this.data.loadend) return;
|
|
|
- if (isPage) {
|
|
|
+ get_product_list: function (tabIndex, isReload) {
|
|
|
+ if (tabIndex <= 0 || tabIndex >= this.data.prodCates.children.length) {
|
|
|
+ return
|
|
|
+ }
|
|
|
+ let cid = this.data.prodCates.id
|
|
|
+ let act = this.data.prodCates.children[tabIndex - 1]
|
|
|
+
|
|
|
+ if (act.loading) return
|
|
|
+ if (act.loaded && !isReload) return
|
|
|
+
|
|
|
+ let cindex = tabIndex - 1
|
|
|
+ if (isReload) {
|
|
|
+ act.products = []
|
|
|
+ act.page = 1
|
|
|
this.setData({
|
|
|
- productList: []
|
|
|
- });
|
|
|
+ [`prodCates.children[${cindex}].page`]: 1,
|
|
|
+ [`prodCates.children[${cindex}].products`]: []
|
|
|
+ })
|
|
|
}
|
|
|
|
|
|
this.setData({
|
|
|
- loading: true,
|
|
|
- loadTitle: ''
|
|
|
+ [`prodCates.children[${cindex}].loading`]: true,
|
|
|
+ [`prodCates.children[${cindex}].loadTitle`]: ''
|
|
|
});
|
|
|
+ act.loading = true
|
|
|
+ act.loadTitle = ''
|
|
|
|
|
|
var that = this;
|
|
|
- getProductslist(this.data.where).then(res => {
|
|
|
- let list = res.data;
|
|
|
- let productList = app.SplitArray(list, that.data.productList);
|
|
|
- let loadend = list.length < that.data.where.limit;
|
|
|
+ getProductslist({
|
|
|
+ page: act.page,
|
|
|
+ limit: PAGE_LIMIT,
|
|
|
+ cid: cid,
|
|
|
+ sid: act.id,
|
|
|
+ }).then(res => {
|
|
|
+ let list = [] // res.data
|
|
|
+ // 过滤产品列表, 只保留本页用的字段
|
|
|
+ let counter = act.products.length
|
|
|
+ res.data.forEach((item) => {
|
|
|
+ counter += 1
|
|
|
+ list.push({
|
|
|
+ id: item.id,
|
|
|
+ image: item.image,
|
|
|
+ activity: item.activity,
|
|
|
+ store_name: item.store_name,
|
|
|
+ price: item.price,
|
|
|
+ vip_price: item.vip_price,
|
|
|
+ sales: item.sales,
|
|
|
+ isShow: counter / 2 - act.aboveShowRowIndex <= 2 * this.data.rowCacheNum, // 是否显示
|
|
|
+ })
|
|
|
+ })
|
|
|
+ let firstPage = act.products.length <= 0
|
|
|
+ act.products = app.SplitArray(list, act.products)
|
|
|
+ act.loaded = list.length < PAGE_LIMIT
|
|
|
+ act.loading = false
|
|
|
+ act.loadTitle = act.loaded ? '已全部加载' : '加载更多'
|
|
|
+ act.page += 1
|
|
|
that.setData({
|
|
|
- loadend: loadend,
|
|
|
- loading: false,
|
|
|
- loadTitle: loadend ? '已全部加载' : '加载更多',
|
|
|
- productList: productList,
|
|
|
- ['where.page']: that.data.where.page + 1
|
|
|
+ [`prodCates.children[${cindex}].loaded`]: act.loaded,
|
|
|
+ [`prodCates.children[${cindex}].loading`]: false,
|
|
|
+ [`prodCates.children[${cindex}].loadTitle`]: act.loaded ? '已全部加载' : '加载更多',
|
|
|
+ [`prodCates.children[${cindex}].products`]: act.products,
|
|
|
+ [`prodCates.children[${cindex}].page`]: act.page + 1
|
|
|
});
|
|
|
}).catch(err => {
|
|
|
+ console.log(err)
|
|
|
that.setData({
|
|
|
- loading: false,
|
|
|
- loadTitle: '加载更多'
|
|
|
+ [`prodCates.children[${cindex}].loading`]: false,
|
|
|
+ [`prodCates.children[${cindex}].loadTitle`]: '加载更多'
|
|
|
});
|
|
|
});
|
|
|
},
|
|
|
@@ -462,12 +519,33 @@ Page({
|
|
|
getCategoryData: function () {
|
|
|
let that = this;
|
|
|
getCategoryList().then(res => {
|
|
|
+ let cates = res.data.length > 0 ? res.data[0] : {}
|
|
|
that.setData({
|
|
|
- categoryOne: res.data.length > 0 ? res.data[0] : []
|
|
|
+ prodCates: that._rebuildProdCates(cates)
|
|
|
})
|
|
|
});
|
|
|
},
|
|
|
|
|
|
+ // 整理 this.data.prodCates
|
|
|
+ _rebuildProdCates: function (cates) {
|
|
|
+ cates.children.forEach(cate => {
|
|
|
+ // 不处理黑洞星球
|
|
|
+ if (cate.id == CATE_BLACKHOLE_ID) {
|
|
|
+ return
|
|
|
+ }
|
|
|
+ // 增加属性
|
|
|
+ cate.loading = false
|
|
|
+ cate.loaded = false
|
|
|
+ cate.loadTitle = '加载更多'
|
|
|
+ cate.products = []
|
|
|
+ cate.page = 1 // 当前第几页
|
|
|
+ cate.scrollPos = 0 // 上次滚动条位置
|
|
|
+ cate.aboveShowRowIndex = 0 // 可见区域上部行索引
|
|
|
+ cate.belowShowRowNum = 0 // 底部隐藏行数
|
|
|
+ })
|
|
|
+ return cates;
|
|
|
+ },
|
|
|
+
|
|
|
/** 获取优惠券列表 不再触发*/
|
|
|
// getCoupon: function () {
|
|
|
// var that = this;
|
|
|
@@ -545,7 +623,15 @@ Page({
|
|
|
* 页面相关事件处理函数--监听用户下拉动作
|
|
|
*/
|
|
|
onPullDownRefresh: function () {
|
|
|
- this.getIndexConfig();
|
|
|
+ let tabIndex = this.data.activeTabIndex
|
|
|
+ if (tabIndex == 0) {
|
|
|
+ this.getIndexConfig();
|
|
|
+ } else if (tabIndex == this.data.prodCates.children.length) { // 黑洞星球不处理
|
|
|
+
|
|
|
+ } else {
|
|
|
+ this.get_product_list(tabIndex, true)
|
|
|
+ }
|
|
|
+
|
|
|
wx.stopPullDownRefresh();
|
|
|
},
|
|
|
|
|
|
@@ -554,7 +640,109 @@ Page({
|
|
|
*/
|
|
|
onReachBottom: function () {
|
|
|
this.get_hot_product();
|
|
|
- this.get_product_list();
|
|
|
+ this.get_product_list(this.data.activeTabIndex);
|
|
|
+ },
|
|
|
+
|
|
|
+ onPageScroll: throttle(function (obj) {
|
|
|
+ if (this.data.activeTabIndex <= 0 || this.data.activeTabIndex >= this.data.prodCates.children.length) {
|
|
|
+ return
|
|
|
+ }
|
|
|
+
|
|
|
+ let pos = obj[0].scrollTop
|
|
|
+ let calcPos = pos //- this.data.navPxH
|
|
|
+ calcPos = calcPos > 0 ? calcPos : 0
|
|
|
+ let rowNum = Math.floor(calcPos / this.data.rowPxHeight) // 滚动过去的总行数, 也是当前 viewport 的开始索引位置
|
|
|
+ let clearRowNum = rowNum - this.data.rowCacheNum// 隐藏总行数
|
|
|
+
|
|
|
+ let cindex = this.data.activeTabIndex - 1
|
|
|
+ let tabData = this.data.prodCates.children[cindex]
|
|
|
+ // console.log('pos:', pos, 'rowPxHeight', this.data.rowPxHeight,
|
|
|
+ // 'rowNum:', rowNum, 'clearRowNum:', clearRowNum, 'aboveShowRowIndex:', tabData.aboveShowRowIndex)
|
|
|
+ let changingData = {}
|
|
|
+ if (pos - tabData.scrollPos > 0) { // 向下
|
|
|
+ if (clearRowNum > 0) {
|
|
|
+ // aboveShowRowIndex 索引的行之前都不显示
|
|
|
+ for (let i = tabData.aboveShowRowIndex; i < clearRowNum; i++) {
|
|
|
+ let leftIndex = i * 2
|
|
|
+ changingData[[`prodCates.children[${cindex}].products[${leftIndex}].isShow`]] = false
|
|
|
+ changingData[[`prodCates.children[${cindex}].products[${leftIndex + 1}].isShow`]] = false
|
|
|
+ let belowShowRowIndex = i + 2 * this.data.rowCacheNum
|
|
|
+ if (belowShowRowIndex < Math.floor(tabData.products.length / 2)) {
|
|
|
+ leftIndex = belowShowRowIndex * 2
|
|
|
+ changingData[[`prodCates.children[${cindex}].products[${leftIndex}].isShow`]] = true
|
|
|
+ changingData[[`prodCates.children[${cindex}].products[${leftIndex + 1}].isShow`]] = true
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ } else { // 向上
|
|
|
+ if (clearRowNum >= 0) {
|
|
|
+ for (let i = tabData.aboveShowRowIndex - 1; i >= clearRowNum; i--) {
|
|
|
+ let leftIndex = i * 2
|
|
|
+ changingData[[`prodCates.children[${cindex}].products[${leftIndex}].isShow`]] = true
|
|
|
+ changingData[[`prodCates.children[${cindex}].products[${leftIndex + 1}].isShow`]] = true
|
|
|
+ let belowShowRowIndex = i + 2 * this.data.rowCacheNum
|
|
|
+ if (belowShowRowIndex < tabData.products.length / 2) {
|
|
|
+ leftIndex = belowShowRowIndex * 2
|
|
|
+ changingData[[`prodCates.children[${cindex}].products[${leftIndex}].isShow`]] = false
|
|
|
+ changingData[[`prodCates.children[${cindex}].products[${leftIndex + 1}].isShow`]] = false
|
|
|
+ }
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ if (tabData.aboveShowRowIndex > 0) {
|
|
|
+ for (let i = 0; i < tabData.aboveShowRowIndex; i++) {
|
|
|
+ this.setData({
|
|
|
+ [`prodCates.children[${cindex}].products[${i * 2}].isShow`]: true,
|
|
|
+ [`prodCates.children[${cindex}].products[${i * 2 + 1}].isShow`]: true,
|
|
|
+ })
|
|
|
+ // changingData[[`prodCates.children[${cindex}].products[${i * 2}].isShow`]] = true
|
|
|
+ // changingData[[`prodCates.children[${cindex}].products[${i * 2 + 1}].isShow`]] = true
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ } //
|
|
|
+ clearRowNum = clearRowNum > 0 ? clearRowNum : 0;
|
|
|
+ if (clearRowNum >= 0 && !(clearRowNum > 0 && clearRowNum == tabData.aboveShowRowIndex)) {
|
|
|
+ changingData[[`prodCates.children[${cindex}].aboveShowRowIndex`]] = clearRowNum
|
|
|
+
|
|
|
+ let belowShowRowNum = tabData.products.length / 2 - (2 * this.data.rowCacheNum + clearRowNum)
|
|
|
+ belowShowRowNum = belowShowRowNum > 0 ? belowShowRowNum : 0
|
|
|
+ // console.log('belowShowRowNum:', belowShowRowNum, 'tabData.products.length:', tabData.products.length, 'clearRowNum:', clearRowNum)
|
|
|
+ if (belowShowRowNum >= 0) {
|
|
|
+ changingData[[`prodCates.children[${cindex}].belowShowRowNum`]] = belowShowRowNum
|
|
|
+
|
|
|
+ // for (let i = 0; i < belowShowRowNum; i++) {
|
|
|
+ // let leftIndex = (tabData.products.length / 2 - i - 1) * 2;
|
|
|
+ // changingData[[`prodCates.children[${cindex}].products[${leftIndex}].isShow`]] = false
|
|
|
+ // changingData[[`prodCates.children[${cindex}].products[${leftIndex + 1}].isShow`]] = false
|
|
|
+ // }
|
|
|
+ }
|
|
|
+ this.setData(changingData)
|
|
|
+ }
|
|
|
+
|
|
|
+ if (cindex >= 0 && cindex < this.data.prodCates.children.length - 1) {
|
|
|
+ this.setData({
|
|
|
+ ['prodCates.children[' + cindex + '].scrollPos']: pos
|
|
|
+ })
|
|
|
+ }
|
|
|
+ // this._debugProducts()
|
|
|
+ }),
|
|
|
+
|
|
|
+ _debugProducts: function () {
|
|
|
+ let all = [],
|
|
|
+ display = [],
|
|
|
+ tabIndex = this.data.activeTabIndex
|
|
|
+ if (tabIndex <= 0 || tabIndex > this.data.prodCates.children.length) {
|
|
|
+ return
|
|
|
+ }
|
|
|
+ let tabData = this.data.prodCates.children[tabIndex - 1]
|
|
|
+ for (let i = 0; i < tabData.products.length; i++) {
|
|
|
+ if (tabData.products[i].isShow) {
|
|
|
+ display.push(i)
|
|
|
+ }
|
|
|
+ all.push(i)
|
|
|
+ }
|
|
|
+ console.debug('all:', all)
|
|
|
+ console.debug('display:', display)
|
|
|
},
|
|
|
|
|
|
/**
|
|
|
@@ -563,4 +751,20 @@ Page({
|
|
|
onShareAppMessage: function () {
|
|
|
|
|
|
}
|
|
|
-})
|
|
|
+})
|
|
|
+
|
|
|
+function throttle(fn) {
|
|
|
+ let valid = true
|
|
|
+
|
|
|
+ return function () {
|
|
|
+ if (!valid) {
|
|
|
+ return false
|
|
|
+ }
|
|
|
+
|
|
|
+ valid = false
|
|
|
+ return setTimeout(() => {
|
|
|
+ fn.call(this, arguments)
|
|
|
+ valid = true
|
|
|
+ }, THROTTLE_TIME)
|
|
|
+ }
|
|
|
+}
|