Skip to content

7
7-Eleven
Commit f378c3b1 by 谢中龙
Options

分类修改

parent 81021594
Showing with 171 additions and 82 deletions
src/pages/category/category.js
......@@ -3,16 +3,19 @@ const app = getApp()
const wxService = require('../../utils/wxService')
import { Integer } from '../../utils/integerDigitalConvertion'
const { memberId, member } = wx.getStorageSync('_baseUserInfo')
const defaultCategoryImg = 'https://img3.bigaka.com/prd/3001/202004/20200428/30012dfcf171-5140-40fc-babd-4482da4f7a1a.jpg';
const defaultWidthCategoryImg = 'https://img3.bigaka.com/prd/3001/202004/20200428/300168439317-6b28-4947-9054-b6d08b9081ce.jpg';
wxService.page({
/**
* 页面的初始数据
*/
data: {
curMenu: [0, 0],
currentFirstCategory : {},
navData: [],
secondCategory : [],
defaultCategoryImg : defaultCategoryImg,
defaultWidthCategoryImg : defaultWidthCategoryImg,
},
/**
......@@ -60,70 +63,75 @@ wxService.page({
title: '加载中'
})
wxService.get(`/sale/product/mallCategory/buyer/findCategoryTree`).then(res => {
const { result, data } = res.data
let { result, data } = res.data
if (result == 0) {
wx.hideLoading()
wx.hideLoading();
data = data ? data : [];
data.forEach(item => {
item.active = false;
});
// 处理三级标识
this.handleFirstCategoryHasThirdChildren(data);
if(data.length > 0){
data[0].active = true;
this.data.currentFirstCategory = data[0];
this.data.secondCategory = data[0].children ? data[0].children : [];
this.data.secondCategory = this.handleSecondCategoryChildren(this.data.secondCategory);
}
this.setData({
navData: data
})
navData: data,
secondCategory : this.data.secondCategory,
currentFirstCategory : this.data.currentFirstCategory,
});
}
}).finally(() => {
wx.hideLoading()
})
},
selectMenu: function (event) {
const { id1, id2, name1, name2 } = event.target.dataset
// xm_bi.Event.stat("classClick", {
// "className": name2,
// "classType": "中类",
// "classID": id2
// })
selectMenu: function (e) {
let index = e.currentTarget.dataset.index;
this.data.navData.forEach(item => {
item.active = false;
});
this.data.navData[index].active = true;
this.data.currentFirstCategory = this.data.navData[index];
this.data.secondCategory = this.data.navData[index].children ? this.data.navData[index].children : [];
this.data.secondCategory = this.handleSecondCategoryChildren(this.data.secondCategory);
this.setData({
curMenu: [event.target.dataset.i, event.target.dataset.j]
})
// app.sr.track('browse_category_detail', {
// first_category: {
// id: id1,
// name: name1
// },
// second_category: {
// id: id2,
// name: name2
// }
// })
navData: this.data.navData,
secondCategory : this.data.secondCategory,
currentFirstCategory : this.data.currentFirstCategory,
});
},
//处理二级分类下的三级 如果没有三级则children 设置为空数组
handleSecondCategoryChildren(secondCategory){
secondCategory.forEach(item => {
item.children = item.children ? item.children : [];
});
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
return secondCategory;
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
//处理某一级是不是都有三级分类
handleFirstCategoryHasThirdChildren(navData){
navData.forEach(first => {
first.hasThirdChildren = false;
let firstChildren = first.children ? first.children : [];
if(firstChildren.length > 0){
for(let i = 0 ;i < firstChildren.length ; i ++){
firstChildren[i].children = firstChildren[i].children ? firstChildren[i].children : [];
if(firstChildren[i].children.length > 0){
first.hasThirdChildren = true;
break;
}
}
}
});
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
},
/**
* 用户点击右上角分享
......
src/pages/category/category.json
{
"navigationBarTitleText": "分类",
"disableScroll" : true,
"usingComponents": {
"go-home": "/component/goHome/goHome",
"go-guid": "/component/goGuid/goGuid"
......
src/pages/category/category.wxml
......@@ -2,39 +2,55 @@
<view class="nav-container search-top">
<scroll-view class="nav-menu" scroll-y="true">
<view wx:for="{{navData}}" wx:key="*this" wx:for-index="j" wx:for-item="menuSec"
class="menu-item {{j == curMenu[1] ? ' active' : ''}}">
<view class="menu-name {{j == curMenu[1] ? ' theme-text-color' : ''}}"
data-j="{{j}}"
data-name="{{menuSec.label}}"
data-id="{{menuSec.id}}"
bindtap="selectMenu">
{{menuSec.label}}
<view wx:for="{{navData}}" wx:key="*this" wx:for-index="index" wx:for-item="item" class="menu-item">
<view class="menu-name {{ item.active ? ' theme-text-color' : ''}}"
data-index="{{index}}" data-name="{{item.label}}" data-id="{{item.id}}" bindtap="selectMenu">
{{item.label}}
</view>
</view>
</scroll-view>
<scroll-view class="nav-contents" scroll-y="true">
<view wx:for="{{navData}}" wx:key="{{j}}" wx:for-index="j" wx:for-item="menuSec"
class="nav-content{{j == curMenu[1] ? ' active' : ''}}">
<navigator hover-class="none" class="sec-menu-image" open-type="navigate"
url="/subPackage/page/pages/categoryPro/categoryPro?id={{menuSec.id}}&name={{menuSec.label}}">
<image src="{{menuSec.image}}" mode="widthFix" />
</navigator>
<scroll-view class="nav-contents clear-box" scroll-y="true" wx:if="{{currentFirstCategory.id}}">
<!-- 二级分类 -->
<view class="second-category" wx:if="{{!currentFirstCategory.hasThirdChildren}}">
<!-- 无三级分类时 -->
<!-- 显示一级图片 -->
<view class="img-con">
<image src="{{currentFirstCategory.image ? currentFirstCategory.image : defaultWidthCategoryImg}}" mode="widthFix"></image>
</view>
<view class="menu-list">
<view wx:for="{{menuSec.children}}" wx:key="{{k}}" wx:for-index="k" wx:for-item="menuThr" class="menu-third">
<view data-id="{{menuThr.id}}" data-name="{{menuThr.label}}" bindtap="navPage">
<navigator hover-class="none" class="sec-menu-image" open-type="navigate"
url="/subPackage/page/pages/categoryPro/categoryPro?id={{menuThr.id}}&name={{menuThr.label}}">
<image src="{{menuThr.image}}" class="thr-menu-image" />
<view class="thr-menu-name">{{menuThr.label}}</view>
</navigator>
<view wx:for="{{secondCategory}}" wx:key="*this" wx:for-index="k" wx:for-item="second" class="menu-third">
<view data-id="{{second.id}}" data-name="{{second.label}}" bindtap="navPage">
<image src="{{second.image ? second.image : defaultCategoryImg}}" class="thr-menu-image" mode="aspectFill"/>
<view class="thr-menu-name">{{second.label}}</view>
</view>
</view>
</view>
</view>
<!-- 有三级分类时 -->
<view class="second-category" wx:if="{{currentFirstCategory.hasThirdChildren}}">
<view class="category-item" wx:for="{{secondCategory}}" wx:key="*this" wx:for-item="item">
<view class="img-con">
<image src="{{item.image ? item.image : defaultWidthCategoryImg}}" mode="widthFix"></image>
</view>
<view class="more">
<label>{{item.label}}</label>
<view class="right-more">
全部 <image src="/assets/imgs/arrow-right.png" mode="aspectFit"></image>
</view>
</view>
<!-- 具体的布局 -->
<view class="menu-list">
<view wx:for="{{item.children}}" wx:key="*this" wx:for-index="k" wx:for-item="third" class="menu-third">
<view data-id="{{third.id}}" data-name="{{third.label}}" bindtap="navPage">
<image src="{{third.image ? third.image : defaultCategoryImg}}" class="thr-menu-image" mode="aspectFill"/>
<view class="thr-menu-name">{{third.label}}</view>
</view>
</view>
</view>
</view>
</view>
</view>
</scroll-view>
</view>
<!--goHome-->
......
src/pages/category/category.wxss
......@@ -50,10 +50,16 @@ page {
width: 100%;
}
.clear-box{
box-sizing: border-box;
-webkit-box-sizing: border-box;
}
.nav-contents {
flex: 1;
width: 75%; }
width: 75%;
padding: 30rpx;
}
.nav-content {
display: none;
......@@ -83,19 +89,20 @@ page {
}
.menu-list:after{
content: '';
width: 150rpx;
width: 140rpx;
}
.menu-third {
width: 150rpx;
width: 140rpx;
text-align: center;
padding-bottom: 32rpx; }
padding-bottom: 32rpx;
}
.menu-third image {
width: 150rpx;
height: 150rpx;
width: 140rpx;
height: 140rpx;
border-radius: 2rpx;
}
}
.thr-menu-name {
font-size: 24rpx;
......@@ -105,3 +112,59 @@ page {
font-stretch: normal;
letter-spacing: -1px;
color: #333; }
.second-category{
width: 100%;
height: auto;
}
.img-con{
width: 100%;
margin-bottom: 30rpx;
}
.img-con img{
width: 100%;
}
.category-item{
width: 100%;
height: auto;
}
.category-item .more{
width: 100%;
height: auto;
padding: 10rpx 0;
display: flex;
align-items: center;
justify-content: space-between;
color: #333333;
padding-bottom: 20rpx;
border-bottom: solid 1rpx #dddddd;
margin-bottom: 20rpx;
}
.category-item .more label{
font-size: 28rpx;
font-weight: bold;
}
.category-item .more .right-more{
font-size: 24rpx;
color: #999999;
display: flex;
align-items: center;
justify-content: flex-end;
font-weight: 500;
}
.category-item .more .right-more image{
width: 18rpx;
height: 24rpx;
margin-left: 10rpx;
}
\ No newline at end of file
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 to comment