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() ...@@ -3,16 +3,19 @@ const app = getApp()
const wxService = require('../../utils/wxService') const wxService = require('../../utils/wxService')
import { Integer } from '../../utils/integerDigitalConvertion' import { Integer } from '../../utils/integerDigitalConvertion'
const { memberId, member } = wx.getStorageSync('_baseUserInfo') 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({ wxService.page({
/** /**
* 页面的初始数据 * 页面的初始数据
*/ */
data: { data: {
curMenu: [0, 0], currentFirstCategory : {},
navData: [], navData: [],
secondCategory : [],
defaultCategoryImg : defaultCategoryImg,
defaultWidthCategoryImg : defaultWidthCategoryImg,
}, },
/** /**
...@@ -60,70 +63,75 @@ wxService.page({ ...@@ -60,70 +63,75 @@ wxService.page({
title: '加载中' title: '加载中'
}) })
wxService.get(`/sale/product/mallCategory/buyer/findCategoryTree`).then(res => { wxService.get(`/sale/product/mallCategory/buyer/findCategoryTree`).then(res => {
const { result, data } = res.data let { result, data } = res.data
if (result == 0) { 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({ this.setData({
navData: data navData: data,
}) secondCategory : this.data.secondCategory,
currentFirstCategory : this.data.currentFirstCategory,
});
} }
}).finally(() => { }).finally(() => {
wx.hideLoading() wx.hideLoading()
}) })
}, },
selectMenu: function (event) { selectMenu: function (e) {
const { id1, id2, name1, name2 } = event.target.dataset let index = e.currentTarget.dataset.index;
// xm_bi.Event.stat("classClick", { this.data.navData.forEach(item => {
// "className": name2, item.active = false;
// "classType": "中类", });
// "classID": id2 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({ this.setData({
curMenu: [event.target.dataset.i, event.target.dataset.j] navData: this.data.navData,
}) secondCategory : this.data.secondCategory,
// app.sr.track('browse_category_detail', { currentFirstCategory : this.data.currentFirstCategory,
// first_category: { });
// id: id1,
// name: name1
// },
// second_category: {
// id: id2,
// name: name2
// }
// })
}, },
//处理二级分类下的三级 如果没有三级则children 设置为空数组
handleSecondCategoryChildren(secondCategory){
secondCategory.forEach(item => {
item.children = item.children ? item.children : [];
});
return secondCategory;
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
}, },
/** //处理某一级是不是都有三级分类
* 生命周期函数--监听页面卸载 handleFirstCategoryHasThirdChildren(navData){
*/ navData.forEach(first => {
onUnload: function () { 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;
onPullDownRefresh: function () { break;
}
}
}
});
}, },
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
},
/** /**
* 用户点击右上角分享 * 用户点击右上角分享
......
src/pages/category/category.json
{ {
"navigationBarTitleText": "分类", "navigationBarTitleText": "分类",
"disableScroll" : true,
"usingComponents": { "usingComponents": {
"go-home": "/component/goHome/goHome", "go-home": "/component/goHome/goHome",
"go-guid": "/component/goGuid/goGuid" "go-guid": "/component/goGuid/goGuid"
......
src/pages/category/category.wxml
...@@ -2,39 +2,55 @@ ...@@ -2,39 +2,55 @@
<view class="nav-container search-top"> <view class="nav-container search-top">
<scroll-view class="nav-menu" scroll-y="true"> <scroll-view class="nav-menu" scroll-y="true">
<view wx:for="{{navData}}" wx:key="*this" wx:for-index="j" wx:for-item="menuSec" <view wx:for="{{navData}}" wx:key="*this" wx:for-index="index" wx:for-item="item" class="menu-item">
class="menu-item {{j == curMenu[1] ? ' active' : ''}}"> <view class="menu-name {{ item.active ? ' theme-text-color' : ''}}"
<view class="menu-name {{j == curMenu[1] ? ' theme-text-color' : ''}}" data-index="{{index}}" data-name="{{item.label}}" data-id="{{item.id}}" bindtap="selectMenu">
data-j="{{j}}" {{item.label}}
data-name="{{menuSec.label}}"
data-id="{{menuSec.id}}"
bindtap="selectMenu">
{{menuSec.label}}
</view> </view>
</view> </view>
</scroll-view> </scroll-view>
<scroll-view class="nav-contents" scroll-y="true"> <scroll-view class="nav-contents clear-box" scroll-y="true" wx:if="{{currentFirstCategory.id}}">
<view wx:for="{{navData}}" wx:key="{{j}}" wx:for-index="j" wx:for-item="menuSec" <!-- 二级分类 -->
class="nav-content{{j == curMenu[1] ? ' active' : ''}}"> <view class="second-category" wx:if="{{!currentFirstCategory.hasThirdChildren}}">
<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" /> <view class="img-con">
</navigator> <image src="{{currentFirstCategory.image ? currentFirstCategory.image : defaultWidthCategoryImg}}" mode="widthFix"></image>
</view>
<view class="menu-list"> <view class="menu-list">
<view wx:for="{{menuSec.children}}" wx:key="{{k}}" wx:for-index="k" wx:for-item="menuThr" class="menu-third"> <view wx:for="{{secondCategory}}" wx:key="*this" wx:for-index="k" wx:for-item="second" class="menu-third">
<view data-id="{{menuThr.id}}" data-name="{{menuThr.label}}" bindtap="navPage"> <view data-id="{{second.id}}" data-name="{{second.label}}" bindtap="navPage">
<navigator hover-class="none" class="sec-menu-image" open-type="navigate" <image src="{{second.image ? second.image : defaultCategoryImg}}" class="thr-menu-image" mode="aspectFill"/>
url="/subPackage/page/pages/categoryPro/categoryPro?id={{menuThr.id}}&name={{menuThr.label}}"> <view class="thr-menu-name">{{second.label}}</view>
<image src="{{menuThr.image}}" class="thr-menu-image" /> </view>
<view class="thr-menu-name">{{menuThr.label}}</view> </view>
</navigator> </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> </view>
</view> </view>
</scroll-view> </scroll-view>
</view> </view>
<!--goHome--> <!--goHome-->
......
src/pages/category/category.wxss
...@@ -50,10 +50,16 @@ page { ...@@ -50,10 +50,16 @@ page {
width: 100%; width: 100%;
} }
.clear-box{
box-sizing: border-box;
-webkit-box-sizing: border-box;
}
.nav-contents { .nav-contents {
flex: 1; flex: 1;
width: 75%; } width: 75%;
padding: 30rpx;
}
.nav-content { .nav-content {
display: none; display: none;
...@@ -83,19 +89,20 @@ page { ...@@ -83,19 +89,20 @@ page {
} }
.menu-list:after{ .menu-list:after{
content: ''; content: '';
width: 150rpx; width: 140rpx;
} }
.menu-third { .menu-third {
width: 150rpx; width: 140rpx;
text-align: center; text-align: center;
padding-bottom: 32rpx; } padding-bottom: 32rpx;
}
.menu-third image { .menu-third image {
width: 150rpx; width: 140rpx;
height: 150rpx; height: 140rpx;
border-radius: 2rpx; border-radius: 2rpx;
} }
.thr-menu-name { .thr-menu-name {
font-size: 24rpx; font-size: 24rpx;
...@@ -105,3 +112,59 @@ page { ...@@ -105,3 +112,59 @@ page {
font-stretch: normal; font-stretch: normal;
letter-spacing: -1px; letter-spacing: -1px;
color: #333; } 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