文章目录
前言
一、商品分类
1.业务逻辑
2.涉及的接口数据
3. 关键技术
二、商品分类代码
1.相关代码
2.效果
前言
商品分类是指根据一定的管理目的，为满足商品生产、流通、消费活动的全部或部分需要，将管理范围内的商品集合总体，以所选择的适当的商品基本特征作为分类标志，逐次归纳为若干个范围更小、特质更趋一致的子集合体（类目），例如大类、中类、小类、细类，直至品种、细目等，从而使该范围内所有商品得以明确区分与体系化的过程。
商品种类繁多，据不完全统计，在市场上流通的商品有25万种以上。为了方便消费者购买，有利于商业部门组织商品流通，提高企业经营管理水平，须对众多的商品进行科学分类。商品分类是指为了一定目的，选择适当的分类标志，将商品集合总体科学地、系统地逐级划分为门类、大类、中类、小类、品类以至品种、花色、规格的过程称为商品分类。
对于电商的商品分类主要有两种方法：
一是按照消费者的需求及特征划分，如按消费者的衣、食、住、用、行划分，有食品类、服装类、鞋帽类、日用品类、家具类、家用电器类、纺织品类、‘五金电料类、厨具类等；按照消费者的需要层次划分，有基本生活品类、享受品类和发展品类等；按照消费者购买行为划分，有日用品类、选购品类和特殊品类；按照消费者的年龄和性别分有老年人用品类、中年用品类、青年用品类、儿童及婴儿用品类；女士用品类、男士用品类等。
二是按照商场经营管理商品的角度划分，如按经营重要程度划分，可分为主营商品、一般商品类和辅助商品类。主营商品类在销售额中占主要比重，反映商场的经营特色，是商场的利润的主要来源；一般商品类是为了配合主营商品的销售，满足顾客的连带需要、例外需要的商品，在销售额中的比重较低；辅助商品类是商场为了吸引顾客，提高商场规格，促进主营商品类和一般商品类的销售，在销售额中占有的比重最低；按商品销售的顺畅程度划分，有畅销商品类、平销商品类、滞销商品类和冷背商品类；按商品质量及价格划分，有高档商品类、中档商品类和低档商品类。这种划分有利于商场的经营管理。
以上内容来源于百度百科。
一、商品分类
1.业务逻辑
加载分类⻚⾯数据
点击左侧菜单，右侧数据动态渲染
2.涉及的接口数据
分类⻚⾯数据
代码语言：javascript复制"message": [
{
"cat_id": 1,
"cat_name": "大家电",
"cat_pid": 0,
"cat_level": 0,
"cat_deleted": false,
"cat_icon": "/full/none.jpg",
"children": []
},
]3. 关键技术
scroll–view 组件
es7的 async 和 await
es7的 async 号称是解决回调的最终⽅案
在⼩程序的开发⼯具中，勾选 es6转es5语法
下载 facebook的regenerator库中的 regenerator/packages/regenerator-runtime/runtime.js
在⼩程序⽬录下新建⽂件夹 lib/runtime/runtime.js ，将代码拷⻉进去
在每⼀个需要使⽤async语法的⻚⾯js⽂件中，都引⼊（不能全局引⼊）
代码语言：javascript复制import regeneratorRuntime from '../../lib/runtime/runtime'二、商品分类代码
1.相关代码
代码语言：javascript复制import { request } from "../../request/index.js";
import regeneratorRuntime from '../../lib/runtime/runtime';
Page({
data: {
// 左侧的菜单数据
leftMenuList: [],
// 右侧的商品数据
rightContent: [],
// 被点击的左侧的菜单
currentIndex: 0,
// 右侧内容的滚动条距离顶部的距离
scrollTop: 0
},
// 接口的返回数据
Cates: [],
onLoad: function (options) {
/*
0 web中的本地存储和 小程序中的本地存储的区别
1 写代码的方式不一样了
web: localStorage.setItem("key","value") localStorage.getItem("key")
小程序中: wx.setStorageSync("key", "value"); wx.getStorageSync("key");
2:存的时候 有没有做类型转换
web: 不管存入的是什么类型的数据，最终都会先调用以下 toString(),把数据变成了字符串 再存入进去
小程序: 不存在 类型转换的这个操作 存什么类似的数据进去，获取的时候就是什么类型
1 先判断一下本地存储中有没有旧的数据
{time:Date.now(),data:[...]}
2 没有旧数据 直接发送新请求
3 有旧的数据 同时 旧的数据也没有过期 就使用 本地存储中的旧数据即可
*/
// 1 获取本地存储中的数据 (小程序中也是存在本地存储 技术)
const Cates = wx.getStorageSync("cates");
// 2 判断
if (!Cates) {
// 不存在 发送请求获取数据
this.getCates();
} else {
// 有旧的数据 定义过期时间 10s 改成 5分钟
if (Date.now() - Cates.time > 1000 * 10) {
// 重新发送请求
this.getCates();
} else {
// 可以使用旧的数据
this.Cates = Cates.data;
let leftMenuList = this.Cates.map(v => v.cat_name);
let rightContent = this.Cates[0].children;
this.setData({
leftMenuList,
rightContent
})
}
}
},
// 获取分类数据
async getCates() {
// request({
// url: "/categories"
// })
// .then(res => {
// this.Cates = res.data.message;
// // 把接口的数据存入到本地存储中
// wx.setStorageSync("cates", { time: Date.now(), data: this.Cates });
// // 构造左侧的大菜单数据
// let leftMenuList = this.Cates.map(v => v.cat_name);
// // 构造右侧的商品数据
// let rightContent = this.Cates[0].children;
// this.setData({
// leftMenuList,
// rightContent
// })
// })
// 1 使用es7的async await来发送请求
const res = await request({ url: "/categories" });
// this.Cates = res.data.message;
this.Cates = res;
// 把接口的数据存入到本地存储中
wx.setStorageSync("cates", { time: Date.now(), data: this.Cates });
// 构造左侧的大菜单数据
let leftMenuList = this.Cates.map(v => v.cat_name);
// 构造右侧的商品数据
let rightContent = this.Cates[0].children;
this.setData({
leftMenuList,
rightContent
})
},
// 左侧菜单的点击事件
handleItemTap(e) {
/*
1 获取被点击的标题身上的索引
2 给data中的currentIndex赋值就可以了
3 根据不同的索引来渲染右侧的商品内容
*/
const { index } = e.currentTarget.dataset;
let rightContent = this.Cates[index].children;
this.setData({
currentIndex: index,
rightContent,
// 重新设置 右侧内容的scroll-view标签的距离顶部的距离
scrollTop: 0
})
}
})<view class="cates">
<SearchInput></SearchInput>
<view class="cates_container">
<!-- 左侧菜单 -->
<scroll-view scroll-y class="left_menu">
<view
class="menu_item {{index===currentIndex?'active':''}}"
wx:for="{{leftMenuList}}"
wx:key="*this"
bindtap="handleItemTap"
data-index="{{index}}"
>
{{item}}
</view>
</scroll-view>
<!-- 右侧商品内容 -->
<scroll-view scroll-top="{{scrollTop}}" scroll-y class="right_content">
<view class="goods_group"
wx:for="{{rightContent}}"
wx:for-index="index1"
wx:for-item="item1"
>
<view class="goods_title">
<text class="delimiter">/</text>
<text class="title">{{item1.cat_name}}</text>
<text class="delimiter">/</text>
</view>
<view class="goods_list">
<navigato
wx:for="{{item1.children}}"
wx:for-index="index2"
wx:for-item="item2"
wx:key="cat_id"
url="/pages/goods_list/index?cid={{item2.cat_id}}"
>
<image mode="widthFix" src="{{item2.cat_icon}}"></image>
<view class="goods_name">{{item2.cat_name}}</view>
</navigator>
</view>
</view>
</scroll-view>
</view>
</view>page {
height: 100%;
}
.cates {
height: 100%;
}
.cates .cates_container {
/* less中使用calc的时候要注意 */
height: calc( 100vh - 90rpx );
display: flex;
}
.cates .cates_container .left_menu {
/* 子项 高度 100% flex */
flex: 2;
}
.cates .cates_container .left_menu .menu_item {
height: 80rpx;
display: flex;
justify-content: center;
align-items: center;
font-size: 30rpx;
}
.cates .cates_container .left_menu .active {
color: var(--themeColor);
border-left: 5rpx solid currentColor;
}
.cates .cates_container .right_content {
/* 子项 高度 100% flex */
flex: 5;
}
.cates .cates_container .right_content .goods_group .goods_title {
height: 80rpx;
display: flex;
justify-content: center;
align-items: center;
}
.cates .cates_container .right_content .goods_group .goods_title .delimiter {
color: #ccc;
padding: 0 10rpx;
}
.cates .cates_container .right_content .goods_group .goods_list {
display: flex;
flex-wrap: wrap;
}
.cates .cates_container .right_content .goods_group .goods_list navigator {
width: 33.33%;
text-align: center;
}
.cates .cates_container .right_content .goods_group .goods_list navigator image {
width: 50%;
}2.效果
