You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
338 lines
8.0 KiB
338 lines
8.0 KiB
<template>
|
|
<view>
|
|
<global-loading />
|
|
<!-- <view class="header">
|
|
<image class="logo" src="https://ceres.zkthink.com//assets/img/logo.png" mode="widthFix"></image>
|
|
</view>-->
|
|
|
|
<view class="flex-hor">
|
|
<image class="cate-expand" src="http://36.138.125.206:8081/ceres-local-file/image/icon_cate_expand.png" @click="openMenu"/>
|
|
<view class="search-content" @click="handleSearch">
|
|
<image class="input-search" src="http://36.138.125.206:8081/ceres-local-file/image/icon_input_search.png"/>
|
|
<input class="input-content" type="text" placeholder="搜索商品" disabled/>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="content" @touchstart="touchStart" @touchend="touchEnd">
|
|
<!-- 分类中心 -->
|
|
<!-- <scroll-view scroll-y class="left-aside">
|
|
<view v-for="(item,index) in flist" :key="item.classifyId" class="f-item b-b" :class="{active: index === currentIndex}" @click="tabtap(item,index)">
|
|
{{item.classifyName}}
|
|
</view>
|
|
</scroll-view>-->
|
|
<scroll-view scroll-with-animation scroll-y class="right-aside" v-if="!ifEmpty">
|
|
<view v-if="onlyTwoLayer">
|
|
<view class="t-list" v-if="slist.length>0">
|
|
<view @click="navToList(titem.classifyPid, titem.classifyId)" class="t-item" v-for="titem in slist" :key="titem.classifyId">
|
|
<image :src="titem.classifyImage" class="pic-img"></image>
|
|
<text class="cate-name-txt">{{titem.classifyName}}</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view v-if="!onlyTwoLayer">
|
|
<view v-for="item in slist" :key="item.classifyId" class="s-list">
|
|
<view class="classBox flex-items-plus">
|
|
<image src="http://36.138.125.206:8081/ceres-local-file/image/icon_class_left.png"></image>
|
|
<text class="s-item" >{{item.classifyName}}</text>
|
|
<image src="http://36.138.125.206:8081/ceres-local-file/image/icon_class_right.png"></image>
|
|
</view>
|
|
<view class="t-list" style="margin-top: 20rpx">
|
|
<view @click="navToList(item.classifyId, titem.classifyId)" class="t-item" v-for="titem in item.childs" :key="titem.classifyId">
|
|
<image :src="titem.classifyImage" class="pic-img"></image>
|
|
<text class="cate-name-txt">{{titem.classifyName}}</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
</scroll-view>
|
|
<view v-if="ifEmpty" class="emptyOrder-box flex-items-plus flex-column">
|
|
<image class="emptyOrder-img" src="http://36.138.125.206:8081/ceres-local-file/static/img/bgnull.png"></image>
|
|
<label class="font-color-999 fs26 mar-top-30">{{$t('common.classifyproductempty')}}</label>
|
|
</view>
|
|
</view>
|
|
|
|
<slide-cate v-model="showMenu" @checked="tabtap" :checked="currentIndex" :cate-list="flist"></slide-cate>
|
|
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import SlideCate from "./slide-cate";
|
|
const NET = require('../../../utils/request')
|
|
const API = require('../../../config/api')
|
|
export default {
|
|
components: {SlideCate},
|
|
data() {
|
|
return {
|
|
sizeCalcState: false,
|
|
tabScrollTop: 0,
|
|
currentIndex: 0,
|
|
currentId:'',
|
|
flist: [],
|
|
slist: [],
|
|
ifEmpty: false,
|
|
onlyTwoLayer : true,
|
|
showMenu: false,
|
|
startTime: null, // 手势滑动时间
|
|
startPosition: 0, // 手势进入时
|
|
endPosition: 0 // 手势离开时
|
|
}
|
|
},
|
|
onLoad() {
|
|
this.loadData();
|
|
},
|
|
methods: {
|
|
loadData(){
|
|
// uni.showLoading({
|
|
// mask: true,
|
|
// title:'加载中...'
|
|
// })
|
|
NET.request(API.FindCategoryListByDepth, {
|
|
classifyId: "",
|
|
}, 'GET').then(res => {
|
|
this.flist = res.data
|
|
this.currentId = this.flist[0].classifyId
|
|
uni.hideLoading()
|
|
this.getChildCategory()
|
|
}).catch(res => {
|
|
uni.hideLoading()
|
|
})
|
|
},
|
|
getChildCategory(){
|
|
// uni.showLoading({
|
|
// mask: true,
|
|
// title:'加载中...'
|
|
// })
|
|
NET.request(API.FindCategoryListByDepth,{
|
|
classifyId:this.currentId
|
|
},'GET').then(res => {
|
|
uni.hideLoading()
|
|
|
|
if (res.data.length === 0) {
|
|
this.ifEmpty = true
|
|
}
|
|
this.slist = res.data
|
|
this.onlyTwoLayer = !this.slist.some(function(item){
|
|
return item.childs.length>0
|
|
});
|
|
|
|
}).catch(res => {
|
|
uni.hideLoading()
|
|
})
|
|
},
|
|
//一级分类点击
|
|
tabtap(item,index){
|
|
this.ifEmpty = false
|
|
if(this.currentIndex == index){
|
|
return;
|
|
}
|
|
|
|
this.currentId = item.classifyId;
|
|
|
|
this.currentIndex = index
|
|
this.getChildCategory()
|
|
},
|
|
//右侧栏滚动
|
|
asideScroll(e){
|
|
if(!this.sizeCalcState){
|
|
this.calcSize();
|
|
}
|
|
let scrollTop = e.detail.scrollTop;
|
|
let tabs = this.slist.filter(item=>item.top <= scrollTop).reverse();
|
|
if(tabs.length > 0){
|
|
this.currentId = tabs[0].pid;
|
|
}
|
|
},
|
|
//计算右侧栏每个tab的高度等信息
|
|
calcSize(){
|
|
let h = 0;
|
|
this.slist.forEach(item=>{
|
|
let view = uni.createSelectorQuery().select("#main-" + item.id);
|
|
view.fields({
|
|
size: true
|
|
}, data => {
|
|
item.top = h;
|
|
h += data.height;
|
|
item.bottom = h;
|
|
}).exec();
|
|
})
|
|
this.sizeCalcState = true;
|
|
},
|
|
navToList(sid, tid){
|
|
uni.navigateTo({
|
|
url: `../../../pages_category_page1/goodsModule/goodsList?category3Id=${tid}`
|
|
})
|
|
},
|
|
|
|
// 查询产品
|
|
handleSearch() {
|
|
uni.navigateTo({
|
|
url: `/pages_category_page1/search/index/index`
|
|
})
|
|
},
|
|
|
|
openMenu() {
|
|
this.showMenu = true;
|
|
//this.$refs.slideCate.open()
|
|
},
|
|
|
|
closeMenu() {
|
|
this.showMenu = false;
|
|
//this.$refs.slideCate.open()
|
|
},
|
|
|
|
// 手势进入时
|
|
touchStart(e) {
|
|
this.startTime = Date.now()
|
|
this.startPosition = e.changedTouches[0].clientX
|
|
},
|
|
// 手势离开时
|
|
touchEnd(e){
|
|
const endTime = Date.now()
|
|
if (endTime - this.startTime > 2000){
|
|
return;
|
|
}
|
|
this.endPosition = e.changedTouches[0].clientX;
|
|
var slideDistance = this.endPosition - this.startPosition;
|
|
if( slideDistance > 50){
|
|
this.openMenu()
|
|
}
|
|
if(slideDistance < -50){
|
|
this.closeMenu()
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang='scss'>
|
|
page,
|
|
.content {
|
|
height: 100%;
|
|
/* background-color: #f8f8f8; */
|
|
}
|
|
.header{
|
|
border-bottom: 1px solid #F3F4F5FF;
|
|
}
|
|
.logo {
|
|
width: 280rpx;
|
|
height: 42rpx;
|
|
}
|
|
|
|
.content {
|
|
display: flex;
|
|
}
|
|
|
|
.right-aside{
|
|
width: 100%;
|
|
padding: 20upx 0 20upx 0;
|
|
background-color: #FAFAFA;
|
|
height: 100vh;
|
|
}
|
|
.s-item{
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
height: 70upx;
|
|
padding-top: 8upx;
|
|
font-size: 28upx;
|
|
color: #252744;
|
|
font-weight: bold;
|
|
}
|
|
.t-list{
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
width: 100%;
|
|
background-color: #FAFAFA;
|
|
padding-top: 12upx;
|
|
&:after{
|
|
content: '';
|
|
flex: 99;
|
|
height: 0;
|
|
}
|
|
image{
|
|
width: 140rpx;
|
|
height: 140rpx;
|
|
}
|
|
}
|
|
.t-item{
|
|
flex-shrink: 0;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
flex-direction: column;
|
|
//width: 176upx;
|
|
width: 248upx;
|
|
font-size: 26upx;
|
|
color: #666;
|
|
padding-bottom: 20upx;
|
|
|
|
image{
|
|
width: 140upx;
|
|
height: 140upx;
|
|
}
|
|
}
|
|
.emptyOrder-box{
|
|
margin-left: 280upx;
|
|
.emptyOrder-img{
|
|
margin-top: 310upx;
|
|
width: 113upx;
|
|
height: 98upx;
|
|
}
|
|
}
|
|
.classBox {
|
|
image {
|
|
width: 66rpx;
|
|
height: 20rpx;
|
|
margin-top: 10rpx;
|
|
}
|
|
.s-item {
|
|
margin: 0 10rpx;
|
|
}
|
|
}
|
|
|
|
.flex-hor{
|
|
width: 100%;
|
|
display: flex;
|
|
align-items: center;
|
|
background-color: #FAFAFA;
|
|
flex-direction: row;
|
|
padding: 20rpx 30rpx;
|
|
}
|
|
|
|
.cate-expand{
|
|
width: 32rpx;
|
|
height: 30rpx;
|
|
margin-right: 20rpx;
|
|
}
|
|
|
|
.search-content{
|
|
display: flex;
|
|
align-items: center;
|
|
height: 55rpx;
|
|
flex-grow: 1;
|
|
padding-left: 17rpx;
|
|
flex-direction: row;
|
|
background-color: white;
|
|
border-radius: 50rpx;
|
|
}
|
|
|
|
.input-search{
|
|
width: 28rpx;
|
|
height: 28rpx;
|
|
}
|
|
|
|
.input-content{
|
|
font-size: 20rpx;
|
|
flex-grow: 1;
|
|
margin-left: 15rpx;
|
|
}
|
|
|
|
.cate-name-txt{
|
|
margin-top: 12rpx;
|
|
color: #252744;
|
|
font-size: 14rpx;
|
|
}
|
|
|
|
</style>
|