ceres-uniapp-v2.0/pages/tabbar/category/index.vue

<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="https://wechat.hnthee.com/ceres-local-file/image/icon_cate_expand.png" @click="openMenu"/>
      <view class="search-content"  @click="handleSearch">
        <image class="input-search" src="https://wechat.hnthee.com/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="https://wechat.hnthee.com/ceres-local-file/image/icon_class_left.png"></image>
              <text class="s-item" >{{item.classifyName}}</text>
              <image src="https://wechat.hnthee.com/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="https://ceres.zkthink.com/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>