Skip to content

严立 / mini-shimao

Go to a project
Commit d8395238 by 严立
Options

LL - 商品列表结构调整

parent da3177ca
Inline Side-by-side
Showing with 129 additions and 44 deletions
pages/commodity/menu-food/menu-food.js
let App = getApp() let App = getApp()
Page({ Page({
scrollLock: false,
scrollTimer: 0,
data: { data: {
imageBase: App.globalData.appImageBase, imageBase: App.globalData.appImageBase,
resourcesBase: App.globalData.appResourcesBase, resourcesBase: App.globalData.appResourcesBase,
...@@ -16,7 +19,11 @@ Page({ ...@@ -16,7 +19,11 @@ Page({
shopInfo: {}, shopInfo: {},
sideBar: [], // 侧边菜单 sideBar: [], // 侧边菜单
sideBarHeight: [], // 分类商品起始高度
sideBarTopPadding: 0, sideBarTopPadding: 0,
sideBarIndex: 0,
menuTitle: '', // 商品列表标题 menuTitle: '', // 商品列表标题
commodityList: [], // 商品列表 commodityList: [], // 商品列表
commodityDetail: {}, // 商品详情 commodityDetail: {}, // 商品详情
...@@ -25,7 +32,7 @@ Page({ ...@@ -25,7 +32,7 @@ Page({
currentIndex: 0,
scrollTop: 0, scrollTop: 0,
winToast: false, winToast: false,
...@@ -177,7 +184,7 @@ Page({ ...@@ -177,7 +184,7 @@ Page({
for (let i = 0, l = funcSideBar.length; i < l; i++) { for (let i = 0, l = funcSideBar.length; i < l; i++) {
if (funcSideBar[i].id === this.data.option.sideBarId) { if (funcSideBar[i].id === this.data.option.sideBarId) {
this.setData({ this.setData({
currentIndex: i sideBarIndex: i
}) })
break break
} }
...@@ -208,7 +215,7 @@ Page({ ...@@ -208,7 +215,7 @@ Page({
url: '/api/v1/commodity/getCommoditys', url: '/api/v1/commodity/getCommoditys',
data: { data: {
'officeId': this.data.shopInfo.id, '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, 'genre': this.data.shopInfo.shopType,
}, },
success: (response) => { success: (response) => {
...@@ -264,37 +271,78 @@ Page({ ...@@ -264,37 +271,78 @@ Page({
funcCommodityList.push(funcItem) 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({ // }
winLoading: false, // // 查询之后参数失效，避免返回页面时继续查询
commodityList: funcCommodityList, // this.setData({
// option: {}
// })
// this.onCommodityDetail(funcEvent)
// break
// }
// }
// }
},
}) })
},
// 判断是否从推荐菜单进入，主动查询商品详情 /**
if (this.data.option.commodityId) { * 分类商品列表
for (let i = 0, l = funcCommodityList.length; i < l; i++) { * @function
if (funcCommodityList[i].id === this.data.option.commodityId) { * @param
let funcEvent = { * @returns
currentTarget: { */
dataset: { setCommodityClassification: function (funcCommodityList) {
item: funcCommodityList[i] 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({ this.setData({
option: {} winLoading: false,
commodityList: funcList,
}) })
this.onCommodityDetail(funcEvent)
break // 获取商品分类高度，用于判断滚动位置自动选择标签
} 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({ ...@@ -308,7 +356,7 @@ Page({
let funcIndex = event.currentTarget.dataset.index let funcIndex = event.currentTarget.dataset.index
let funcMenuTitle = this.data.sideBar[funcIndex].tab let funcMenuTitle = this.data.sideBar[funcIndex].tab
this.setData({ this.setData({
currentIndex: funcIndex, sideBarIndex: funcIndex,
menuTitle: funcMenuTitle, menuTitle: funcMenuTitle,
scrollTop: 0 scrollTop: 0
}) })
...@@ -446,4 +494,36 @@ Page({ ...@@ -446,4 +494,36 @@ Page({
url: '/pages/commodity/shopping-cart/shopping-cart', 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,67 +21,70 @@ ...@@ -21,67 +21,70 @@
<view class="row"> <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"> <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> <text>{{item.tab}}</text>
</view> </view>
</block> </block>
</view> </scroll-view>
<!-- 商品列表 --> <!-- 商品列表 -->
<view class="menu-list"> <scroll-view class="menu-list" scroll-y bindscroll="onPageScroll">
<view class="right-content-title">{{menuTitle}}</view>
<block wx:for="{{commodityList}}" wx:for-index="index" wx:for-item="item" wx:key="index"> <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="right-content-title">{{item.tab}}</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"> <view class="item-img">
<image src="{{item.cover}}" mode="widthFix"></image> <image src="{{itemCommodity.cover}}" mode="widthFix"></image>
</view> </view>
<view class="item-info"> <view class="item-info">
<view class="item-info-title">{{item.name}}</view> <view class="item-info-title">{{itemCommodity.name}}</view>
<view class="item-info-text-wrap"> <view class="item-info-text-wrap">
<view wx:if="{{item.describe}}">{{item.describe}}</view> <view wx:if="{{itemCommodity.describe}}">{{itemCommodity.describe}}</view>
<view wx:else class="item-info-content"></view> <view wx:else class="item-info-content"></view>
</view> </view>
<view class="item-other row con-b"> <view class="item-other row con-b">
<!-- 活动价样式 --> <!-- 活动价样式 -->
<view wx:if="{{item.priceType === 1}}"> <view wx:if="{{itemCommodity.priceType === 1}}">
<view class="item-price row align-c"> <view class="item-price row align-c">
<text>￥</text> <text>￥</text>
<text>{{item.priceDiscountText}}</text> <text>{{itemCommodity.priceDiscountText}}</text>
<text class="item-price-discount">活动价</text> <text class="item-price-discount">活动价</text>
</view> </view>
<view class="item-info-old-price row align-c"> <view class="item-info-old-price row align-c">
<text>￥</text> <text>￥</text>
<text>{{item.priceText}}</text> <text>{{itemCommodity.priceText}}</text>
</view> </view>
</view> </view>
<!-- 业主价样式 --> <!-- 业主价样式 -->
<view wx:if="{{item.priceType === 2}}"> <view wx:if="{{itemCommodity.priceType === 2}}">
<view class="item-price row align-c"> <view class="item-price row align-c">
<text>￥</text> <text>￥</text>
<text>{{item.priceSpecialText}}</text> <text>{{itemCommodity.priceSpecialText}}</text>
<text class="item-price-special">业主价</text> <text class="item-price-special">业主价</text>
</view> </view>
<view class="item-info-old-price row align-c"> <view class="item-info-old-price row align-c">
<text>￥</text> <text>￥</text>
<text>{{item.priceText}}</text> <text>{{itemCommodity.priceText}}</text>
</view> </view>
</view> </view>
<!-- 普通价样式 --> <!-- 普通价样式 -->
<view wx:if="{{item.priceType === 3}}"> <view wx:if="{{itemCommodity.priceType === 3}}">
<view class="item-price row align-c"> <view class="item-price row align-c">
<text>￥</text> <text>￥</text>
<text>{{item.priceText}}</text> <text>{{itemCommodity.priceText}}</text>
<text></text> <text></text>
</view> </view>
</view> </view>
<view class="item-operation-add"> <view class="item-operation-add">
<button class="row con-c align-c" data-item="{{item}}" catchtap="onCommodityAdd"> <button class="row con-c align-c" data-item="{{itemCommodity}}" catchtap="onCommodityAdd">
<image mode="widthFix" src="{{imageBase + 'icon/cart-3.png'}}"></image> <image mode="widthFix" src="{{imageBase + 'icon/cart-3.png'}}"></image>
</button> </button>
</view> </view>
...@@ -89,6 +92,7 @@ ...@@ -89,6 +92,7 @@
</view> </view>
</view> </view>
</block> </block>
</block>
<!-- 购物车按钮 --> <!-- 购物车按钮 -->
<view id="cart" class="cart row con-c align-c" bindtap="onShoppingCart"> <view id="cart" class="cart row con-c align-c" bindtap="onShoppingCart">
...@@ -100,7 +104,7 @@ ...@@ -100,7 +104,7 @@
<image src="../../../image/cart.png" mode="widthFix"></image> <image src="../../../image/cart.png" mode="widthFix"></image>
</view> </view>
</view> </view>
</view> </scroll-view>
</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