【商品分类】

1. 实现完成
pull/1/MERGE
YunaiV 2023-06-23 23:53:53 +08:00
parent 0a575e92d0
commit 335146ed94
3 changed files with 91 additions and 71 deletions

View File

@ -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"
placeholder-class='placeholder'></input>
<input type='text' placeholder='点击搜索商品信息' @confirm="searchSubmitValue" confirm-type='search'
name="search" placeholder-class='placeholder' />
</view>
</view>
<!-- 商品分类 -->
<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='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'}">
<image :src='itemn.extra'></image>
<view class='picture' :style="{'background-color':itemn.picUrl?'none':'#f7f7f7'}">
<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 {
getCategoryList
} from '@/api/store.js';
import ClipboardJS from "@/plugin/clipboard/clipboard.js";
import * as CategoryApi from '@/api/product/category.js';
import * as Util from '@/utils/util.js';
export default {
data() {
return {
navlist: [],
productList: [],
productList: [], //
navActive: 0,
number: "",
height: 0,
@ -64,22 +62,19 @@
onLoad(options) {
this.getAllCategory();
},
onShow(){
},
methods: {
infoScroll: function() {
let that = this;
let len = that.productList.length;
let child = that.productList[len - 1]&&that.productList[len - 1].child?that.productList[len - 1].child:[];
let len = this.productList.length;
let child = this.productList[len - 1] && this.productList[len - 1].child ? this.productList[len - 1].child : [];
this.number = child ? child.length:0;
//
let that = this;
uni.getSystemInfo({
success: function(res) {
that.height = (res.windowHeight) * (750 / res.windowWidth) - 98;
},
});
let height = 0;
let hightArr = [];
for (let i = 0; i < len; i++) {
//
@ -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;
getCategoryList().then(res => {
that.productList = res.data;
setTimeout(function(){
that.infoScroll();
CategoryApi.getCategoryList().then(res => {
this.productList = Util.handleTree(res.data);
setTimeout(() => {
this.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({
url: '/pages/goods_list/index?searchValue=' + e.detail.value
})
else
} else {
return this.$util.Tips({
title: '请填写要搜索的产品信息'
});
},
}
}
}
}
</script>
<style scoped lang="scss">
.productSort .header {
width: 100%;

View File

@ -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)
});
},
//
@ -229,9 +228,6 @@
that.loadTitle = '加载更多';
});
},
},
onPullDownRefresh() {
},
onReachBottom() {
if (this.productList.length > 0) {
@ -239,7 +235,6 @@
} else {
this.get_host_product();
}
}
}
</script>

View File

@ -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;
}