【商品分类】

1. 实现完成

pages/goods_cate/goods_cate.vue

@@ -1,35 +1,36 @@
 <template>
 	<view class='productSort'>
+    <!-- 商品搜索 -->
 		<view class='header acea-row row-center-wrapper'>
 			<view class='acea-row row-between-wrapper input'>
 				<text class='iconfont icon-sousuo'></text>
-				<input type='text' placeholder='点击搜索商品信息' @confirm="searchSubmitValue" confirm-type='search' name="search"
+				<input type='text' placeholder='点击搜索商品信息' @confirm="searchSubmitValue" confirm-type='search'
-				 placeholder-class='placeholder'></input>
+               name="search" placeholder-class='placeholder' />
 			</view>
 		</view>
-		<view class='aside' :style="{bottom: tabbarH + 'px',height: height + 'rpx'}">
+    <!-- 商品分类（左） -->
+    <view class='aside' :style="{bottom: tabbarH + 'px',height: height + 'rpx'}">
 			<scroll-view scroll-y="true" scroll-with-animation='true' style="height: 100%;">
 				<view class='item acea-row row-center-wrapper' :class='index==navActive?"on":""' v-for="(item,index) in productList"
 			 :key="index" @click='tap(index,"b"+index)'><text>{{item.name}}</text></view>
 			 </scroll-view>
-			
 		</view>
+    <!-- 商品分类（右） -->
 		<view class='conter'>
 			<scroll-view scroll-y="true" :scroll-into-view="toView" :style='"height:"+height+"rpx;margin-top: 96rpx;"' @scroll="scroll"
 			 scroll-with-animation='true'>
 				<block v-for="(item,index) in productList" :key="index">
-					
 					<view class='listw' :id="'b'+index">
 						<view class='title acea-row row-center-wrapper'>
-							<view class='line'></view>
+							<view class='line' />
-							<view class='name'>{{item.name}}</view>
+							<view class='name'>{{ item.name }}</view>
-							<view class='line'></view>
+							<view class='line' />
 						</view>
 						<view class='list acea-row'>
-							<block v-for="(itemn,indexn) in item.child" :key="indexn">
+							<block v-for="(itemn,indexn) in item.children" :key="indexn">
 								<navigator hover-class='none' :url='"/pages/goods_list/index?cid="+itemn.id+"&title="+itemn.name' class='item acea-row row-column row-middle'>
-							        <view class='picture' :style="{'background-color':itemn.extra?'none':'#f7f7f7'}">
+                  <view class='picture' :style="{'background-color':itemn.picUrl?'none':'#f7f7f7'}">
-										<image :src='itemn.extra'></image>
+										<image :src='itemn.picUrl' />
 									</view>
 									<view class='name line1'>{{itemn.name}}</view>
 								</navigator>
@@ -37,22 +38,19 @@
 						</view>
 					</view>
 				</block>
-				<view :style='"height:"+(height-300)+"rpx;"' v-if="number<15"></view>
+				<view :style='"height:"+(height-300)+"rpx;"' v-if="number < 15" />
 			</scroll-view>
 		</view>
 	</view>
 </template>
-
 <script>
-	import {
+  import * as CategoryApi from '@/api/product/category.js';
-		getCategoryList
+  import * as Util from '@/utils/util.js';
-	} from '@/api/store.js';
+  export default {
-	import ClipboardJS from "@/plugin/clipboard/clipboard.js";
-	export default {
 		data() {
 			return {
 				navlist: [],
-				productList: [],
+				productList: [], // 商品分类，树形结构
 				navActive: 0,
 				number: "",
 				height: 0,
@@ -64,25 +62,22 @@
 		onLoad(options) {
 			this.getAllCategory();
 		},
-		onShow(){
-		},
 		methods: {
 			infoScroll: function() {
-				let that = this;
+				let len = this.productList.length;
-				let len = that.productList.length;
+				let child = this.productList[len - 1] && this.productList[len - 1].child ? this.productList[len - 1].child : [];
-				let child = that.productList[len - 1]&&that.productList[len - 1].child?that.productList[len - 1].child:[];
+				this.number = child ? child.length:0;
-				this.number = child?child.length:0;
+
-				
+				// 设置商品列表高度
-				//设置商品列表高度
+        let that = this;
-				uni.getSystemInfo({
+        uni.getSystemInfo({
 					success: function(res) {
-						that.height = (res.windowHeight) * (750 / res.windowWidth) - 98;
+            that.height = (res.windowHeight) * (750 / res.windowWidth) - 98;
 					},
 				});
-				let height = 0;
 				let hightArr = [];
 				for (let i = 0; i < len; i++) {
-					//获取元素所在位置
+					// 获取元素所在位置
 					let query = uni.createSelectorQuery().in(this);
 					let idView = "#b" + i;
 					query.select(idView).boundingClientRect();
@@ -91,18 +86,17 @@
 						hightArr.push(top);
 						that.hightArr = hightArr
 					});
-				};
+				}
 			},
 			tap: function(index, id) {
 				this.toView = id;
 				this.navActive = index;
 			},
 			getAllCategory: function() {
-				let that = this;
+        CategoryApi.getCategoryList().then(res => {
-				getCategoryList().then(res => {
+					this.productList = Util.handleTree(res.data);
-					that.productList = res.data;
+					setTimeout(() => {
-					setTimeout(function(){
+						this.infoScroll();
-						that.infoScroll();
 					},500)
 				})
 			},
@@ -120,19 +114,19 @@
 				}
 			},
 			searchSubmitValue: function(e) {
-				if (this.$util.trim(e.detail.value).length > 0)
+				if (this.$util.trim(e.detail.value).length > 0) {
-					uni.navigateTo({
+          uni.navigateTo({
-						url: '/pages/goods_list/index?searchValue=' + e.detail.value
+            url: '/pages/goods_list/index?searchValue=' + e.detail.value
-					})
+          })
-				else
+        } else {
-					return this.$util.Tips({
+          return this.$util.Tips({
-						title: '请填写要搜索的产品信息'
+            title: '请填写要搜索的产品信息'
-					});
+          });
-			},
+        }
+			}
 		}
 	}
 </script>
-
 <style scoped lang="scss">
 	.productSort .header {
 		width: 100%;
@@ -145,7 +139,7 @@
 		z-index: 9;
 		border-bottom: 1rpx solid #f5f5f5;
 	}
-	
+
 	.productSort .header .input {
 		width: 700rpx;
 		height: 60rpx;
@@ -154,22 +148,22 @@
 		box-sizing: border-box;
 		padding: 0 25rpx;
 	}
-	
+
 	.productSort .header .input .iconfont {
 		font-size: 26rpx;
 		color: #555;
 	}
-	
+
 	.productSort .header .input .placeholder {
 		color: #999;
 	}
-	
+
 	.productSort .header .input input {
 		font-size: 26rpx;
 		height: 100%;
 		width: 597rpx;
 	}
-	
+
 	.productSort .aside {
 		position: fixed;
 		width: 180rpx;
@@ -178,18 +172,18 @@
 		background-color: #f7f7f7;
 		overflow-y: scroll;
 		overflow-x: hidden;
-		
+
 		height: auto;
 		margin-top: 96rpx;
 	}
-	
+
 	.productSort .aside .item {
 		height: 100rpx;
 		width: 100%;
 		font-size: 26rpx;
 		color: #424242;
 	}
-	
+
 	.productSort .aside .item.on {
 		background-color: #fff;
 		border-left: 4rpx solid #fc4141;
@@ -198,49 +192,49 @@
 		color: #fc4141;
 		font-weight: bold;
 	}
-	
+
 	.productSort .conter {
 		margin: 96rpx 0 0 180rpx;
 		padding: 0 14rpx;
 		background-color: #fff;
 	}
-	
+
 	.productSort .conter .listw {
 		padding-top: 20rpx;
 	}
-	
+
 	.productSort .conter .listw .title {
 		height: 90rpx;
 	}
-	
+
 	.productSort .conter .listw .title .line {
 		width: 100rpx;
 		height: 2rpx;
 		background-color: #f0f0f0;
 	}
-	
+
 	.productSort .conter .listw .title .name {
 		font-size: 28rpx;
 		color: #333;
 		margin: 0 30rpx;
 		font-weight: bold;
 	}
-	
+
 	.productSort .conter .list {
 		flex-wrap: wrap;
 	}
-	
+
 	.productSort .conter .list .item {
 		width: 177rpx;
 		margin-top: 26rpx;
 	}
-	
+
 	.productSort .conter .list .item .picture {
 		width: 120rpx;
 		height: 120rpx;
 		border-radius: 50%;
 	}
-	
+
 	.productSort .conter .list .item .picture image {
 		width: 100%;
 		height: 100%;
@@ -249,7 +243,7 @@
 			background-color: #f7f7f7;
 		}
 	}
-	
+
 	.productSort .conter .list .item .name {
 		font-size: 24rpx;
 		color: #333;

pages/goods_list/index.vue

@@ -164,7 +164,6 @@
 					that.hotPage++
 					that.hotScroll = res.data.list.length < that.hotLimit
 					that.hostProduct = that.hostProduct.concat(res.data.list)
-					// that.$set(that, 'hostProduct', res.data)
 				});
 			},
 			//点击事件处理
@@ -223,15 +222,12 @@
 					that.$set(that.where, 'page', that.where.page + 1);
 					if (that.productList.length === 0) {
 						this.get_host_product();
-					} 
+					}
 				}).catch(err => {
 					that.loading = false;
 					that.loadTitle = '加载更多';
 				});
 			},
-		},
-		onPullDownRefresh() {
-
 		},
 		onReachBottom() {
 			if (this.productList.length > 0) {
@@ -239,7 +235,6 @@
 			} else {
 				this.get_host_product();
 			}
-
 		}
 	}
 </script>

utils/util.js

@@ -799,3 +799,34 @@ export default {
 export function fen2yuan(price) {
   return (price / 100.0).toFixed(2)
 }
+
+/**
+ * 构造树型结构数据
+ *
+ * @param {*} data 数据源
+ * @param {*} id id字段 默认 'id'
+ * @param {*} parentId 父节点字段 默认 'parentId'
+ * @param {*} children 孩子节点字段 默认 'children'
+ * @param {*} rootId 根Id 默认 0
+ */
+export function handleTree(data, id, parentId, children, rootId) {
+  id = id || 'id'
+  parentId = parentId || 'parentId'
+  children = children || 'children'
+  rootId = rootId || Math.min.apply(Math, data.map(item => {
+    return item[parentId]
+  })) || 0
+  //对源数据深度克隆
+  const cloneData = JSON.parse(JSON.stringify(data))
+  //循环所有项
+  const treeData = cloneData.filter(father => {
+    let branchArr = cloneData.filter(child => {
+      //返回每一项的子级数组
+      return father[id] === child[parentId]
+    });
+    branchArr.length > 0 ? father.children = branchArr : '';
+    //返回第一层
+    return father[parentId] === rootId;
+  });
+  return treeData !== '' ? treeData : data;
+}