Skip to content

严立 / mini-shimao

Go to a project
Commit d8395238 by 严立
Options

LL - 商品列表结构调整

parent da3177ca
Inline Side-by-side
Showing with 167 additions and 82 deletions
pages/commodity/menu-food/menu-food.js
let App = getApp()
Page({
scrollLock: false,
scrollTimer: 0,
data: {
imageBase: App.globalData.appImageBase,
resourcesBase: App.globalData.appResourcesBase,
......@@ -16,7 +19,11 @@ Page({
shopInfo: {},
sideBar: [], // 侧边菜单
sideBarHeight: [], // 分类商品起始高度
sideBarTopPadding: 0,
sideBarIndex: 0,
menuTitle: '', // 商品列表标题
commodityList: [], // 商品列表
commodityDetail: {}, // 商品详情
......@@ -25,7 +32,7 @@ Page({
currentIndex: 0,
scrollTop: 0,
winToast: false,
......@@ -177,7 +184,7 @@ Page({
for (let i = 0, l = funcSideBar.length; i < l; i++) {
if (funcSideBar[i].id === this.data.option.sideBarId) {
this.setData({
currentIndex: i
sideBarIndex: i
})
break
}
......@@ -208,7 +215,7 @@ Page({
url: '/api/v1/commodity/getCommoditys',
data: {
'officeId': this.data.shopInfo.id,
'classifyId': this.data.sideBar[this.data.currentIndex].id,
// 'classifyId': this.data.sideBar[this.data.sideBarIndex].id,
'genre': this.data.shopInfo.shopType,
},
success: (response) => {
......@@ -264,37 +271,78 @@ Page({
funcCommodityList.push(funcItem)
}
// 重新根据商品分类区分数据
// for (let i) {
// 分类商品列表
this.setCommodityClassification(funcCommodityList)
// // 判断是否从推荐菜单进入，主动查询商品详情
// if (this.data.option.commodityId) {
// for (let i = 0, l = funcCommodityList.length; i < l; i++) {
// if (funcCommodityList[i].id === this.data.option.commodityId) {
// let funcEvent = {
// currentTarget: {
// dataset: {
// item: funcCommodityList[i]
// }
// }
// }
// // 查询之后参数失效，避免返回页面时继续查询
// this.setData({
// option: {}
// })
// this.onCommodityDetail(funcEvent)
// break
// }
// }
// }
},
})
},
this.setData({
winLoading: false,
commodityList: funcCommodityList,
})
// 判断是否从推荐菜单进入，主动查询商品详情
if (this.data.option.commodityId) {
for (let i = 0, l = funcCommodityList.length; i < l; i++) {
if (funcCommodityList[i].id === this.data.option.commodityId) {
let funcEvent = {
currentTarget: {
dataset: {
item: funcCommodityList[i]
}
}
}
// 查询之后参数失效，避免返回页面时继续查询
this.setData({
option: {}
})
this.onCommodityDetail(funcEvent)
break
}
}
/**
* 分类商品列表
* @function
* @param
* @returns
*/
setCommodityClassification: function (funcCommodityList) {
let funcSideBarId = this.data.sideBar
let funcList = []
for (let i = 0, l = funcSideBarId.length; i < l; i++) {
funcList.push({
'id': funcSideBarId[i].id,
'tab': funcSideBarId[i].tab,
'commodity': [],
})
for (let ii = 0; ii < funcCommodityList.length; ii++) {
if (funcSideBarId[i].id === funcCommodityList[ii].sideBarId) {
funcList[i].commodity.push(funcCommodityList[ii])
funcCommodityList.splice(ii, 1)
ii = ii - 1
}
},
}
}
this.setData({
winLoading: false,
commodityList: funcList,
})
// 获取商品分类高度，用于判断滚动位置自动选择标签
const funcQuery = wx.createSelectorQuery()
funcQuery.selectAll('.right-content-title').boundingClientRect()
funcQuery.exec((response) => {
let funcElement = response[0]
let funcSideBarHeight = []
for (let i = 0, l = funcElement.length; i < l; i++) {
funcSideBarHeight.push(funcElement[i].top)
}
this.setData({
sideBarHeight: funcSideBarHeight
})
console.log(this.data.sideBarHeight)
})
},
......@@ -308,7 +356,7 @@ Page({
let funcIndex = event.currentTarget.dataset.index
let funcMenuTitle = this.data.sideBar[funcIndex].tab
this.setData({
currentIndex: funcIndex,
sideBarIndex: funcIndex,
menuTitle: funcMenuTitle,
scrollTop: 0
})
......@@ -446,4 +494,36 @@ Page({
url: '/pages/commodity/shopping-cart/shopping-cart',
})
},
/**
* 页面滚动事件
* @function
* @param
* @returns
*/
onPageScroll: function (event) {
// 优化滚动事件触发频率
if (this.scrollLock) return
this.scrollLock = true
console.log(event.detail.scrollTop)
let funcIndex = 0
let funcScrollHeight = event.detail.scrollTop
let funcSideBarHeight = this.data.sideBarHeight
for (let i = 0, l = funcSideBarHeight.length; i < l; i++) {
if (funcScrollHeight > funcSideBarHeight[i]) {
funcIndex = i
}
}
this.setData({
sideBarIndex: funcIndex
})
// 恢复滚动事件
this.scrollTimer = setTimeout(() => {
this.scrollLock = false
clearTimeout(this.scrollTimer)
}, 10)
},
})
\ No newline at end of file
pages/commodity/menu-food/menu-food.wxml
......@@ -21,73 +21,77 @@
<view class="row">
<!-- 侧边菜单 -->
<view class="side-bar" style="{{'padding-top: ' + sideBarTopPadding + 'px;'}}">
<scroll-view class="side-bar" scroll-y style="{{'padding-top: ' + sideBarTopPadding + 'px;'}}">
<block wx:for="{{sideBar}}" wx:for-index="index" wx:for-item="item" wx:key="index">
<view class="menu-item {{currentIndex === index ? 'active' : ''}}" data-index="{{index}}" bindtap="onSelectionSideBar">
<view class="menu-item {{sideBarIndex === index ? 'active' : ''}}" data-index="{{index}}" bindtap="onSelectionSideBar">
<text>{{item.tab}}</text>
</view>
</block>
</view>
</scroll-view>
<!-- 商品列表 -->
<view class="menu-list">
<view class="right-content-title">{{menuTitle}}</view>
<scroll-view class="menu-list" scroll-y bindscroll="onPageScroll">
<block wx:for="{{commodityList}}" wx:for-index="index" wx:for-item="item" wx:key="index">
<view class="commodity-item row" data-item="{{item}}" bind:tap="onCommodityDetail">
<view class="item-img">
<image src="{{item.cover}}" mode="widthFix"></image>
</view>
<view class="item-info">
<view class="item-info-title">{{item.name}}</view>
<view class="item-info-text-wrap">
<view wx:if="{{item.describe}}">{{item.describe}}</view>
<view wx:else class="item-info-content"></view>
</view>
<view class="right-content-title">{{item.tab}}</view>
<view class="item-other row con-b">
<!-- 活动价样式 -->
<view wx:if="{{item.priceType === 1}}">
<view class="item-price row align-c">
<text>￥</text>
<text>{{item.priceDiscountText}}</text>
<text class="item-price-discount">活动价</text>
</view>
<view class="item-info-old-price row align-c">
<text>￥</text>
<text>{{item.priceText}}</text>
</view>
<!-- 循环商品列表 -->
<block wx:for="{{item.commodity}}" wx:for-index="indexCommodity" wx:for-item="itemCommodity" wx:key="indexCommodity">
<view class="commodity-item row" data-item="{{itemCommodity}}" bind:tap="onCommodityDetail">
<view class="item-img">
<image src="{{itemCommodity.cover}}" mode="widthFix"></image>
</view>
<view class="item-info">
<view class="item-info-title">{{itemCommodity.name}}</view>
<view class="item-info-text-wrap">
<view wx:if="{{itemCommodity.describe}}">{{itemCommodity.describe}}</view>
<view wx:else class="item-info-content"></view>
</view>
<!-- 业主价样式 -->
<view wx:if="{{item.priceType === 2}}">
<view class="item-price row align-c">
<text>￥</text>
<text>{{item.priceSpecialText}}</text>
<text class="item-price-special">业主价</text>
<view class="item-other row con-b">
<!-- 活动价样式 -->
<view wx:if="{{itemCommodity.priceType === 1}}">
<view class="item-price row align-c">
<text>￥</text>
<text>{{itemCommodity.priceDiscountText}}</text>
<text class="item-price-discount">活动价</text>
</view>
<view class="item-info-old-price row align-c">
<text>￥</text>
<text>{{itemCommodity.priceText}}</text>
</view>
</view>
<view class="item-info-old-price row align-c">
<text>￥</text>
<text>{{item.priceText}}</text>
<!-- 业主价样式 -->
<view wx:if="{{itemCommodity.priceType === 2}}">
<view class="item-price row align-c">
<text>￥</text>
<text>{{itemCommodity.priceSpecialText}}</text>
<text class="item-price-special">业主价</text>
</view>
<view class="item-info-old-price row align-c">
<text>￥</text>
<text>{{itemCommodity.priceText}}</text>
</view>
</view>
</view>
<!-- 普通价样式 -->
<view wx:if="{{item.priceType === 3}}">
<view class="item-price row align-c">
<text>￥</text>
<text>{{item.priceText}}</text>
<text></text>
<!-- 普通价样式 -->
<view wx:if="{{itemCommodity.priceType === 3}}">
<view class="item-price row align-c">
<text>￥</text>
<text>{{itemCommodity.priceText}}</text>
<text></text>
</view>
</view>
</view>
<view class="item-operation-add">
<button class="row con-c align-c" data-item="{{item}}" catchtap="onCommodityAdd">
<image mode="widthFix" src="{{imageBase + 'icon/cart-3.png'}}"></image>
</button>
<view class="item-operation-add">
<button class="row con-c align-c" data-item="{{itemCommodity}}" catchtap="onCommodityAdd">
<image mode="widthFix" src="{{imageBase + 'icon/cart-3.png'}}"></image>
</button>
</view>
</view>
</view>
</view>
</view>
</block>
</block>
<!-- 购物车按钮 -->
......@@ -100,7 +104,7 @@
<image src="../../../image/cart.png" mode="widthFix"></image>
</view>
</view>
</view>
</scroll-view>
</view>
<!-- 商品详情弹窗 -->
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or sign in to comment