小程序分类功能界面布局修改

pages/tabbar/category/index.vue

@@ -1,36 +1,45 @@
 <template>
 	<view>
     <global-loading />
-    <view class="header">
+<!--    <view class="header">
 			<image class="logo" src="https://ceres.zkthink.com//assets/img/logo.png" mode="widthFix"></image>
-		</view>
-		<view class="content">
+		</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">
+<!--			<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-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>{{titem.classifyName}}</text>
+							<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 class="emptyOrder-img" src="https://ceres.zkthink.com/static/images/classRight.png"></image>
-							<text class="s-item" >{{item.classifyName}}</text>
-							<image class="emptyOrder-img" src="https://ceres.zkthink.com/static/images/classLeft.png"></image>
+              <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">
+						<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>{{titem.classifyName}}</text>
+								<text class="cate-name-txt">{{titem.classifyName}}</text>
 							</view>
 						</view>
 					</view>
@@ -42,14 +51,19 @@
 				<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>
-	const NET = require('../../../utils/request')
+  import SlideCate from "./slide-cate";
+  const NET = require('../../../utils/request')
 	const API = require('../../../config/api')
 	export default {
-		data() {
+    components: {SlideCate},
+    data() {
 			return {
 				sizeCalcState: false,
 				tabScrollTop: 0,
@@ -58,8 +72,12 @@
 				flist: [],
 				slist: [],
 				ifEmpty: false,
-				onlyTwoLayer : true
-			}
+				onlyTwoLayer : true,
+        showMenu: false,
+        startTime: null,  // 手势滑动时间
+        startPosition: 0, // 手势进入时
+        endPosition: 0    // 手势离开时
+      }
 		},
 		onLoad() {
 			this.loadData();
@@ -145,7 +163,45 @@
 				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>
@@ -167,31 +223,11 @@
 	.content {
 		display: flex;
 	}
-	.left-aside {
-		flex-shrink: 0;
-		width: 200upx;
-		height: 100vh;
-		background-color: #F8F8F8;
-	}
-	.f-item {
-		display: flex;
-		align-items: center;
-		justify-content: center;
-		width: 100%;
-		height: 100upx;
-		font-size: 28upx;
-		color: $font-color-base;
-		position: relative;
-		&.active{
-			color: $base-color;
-            background: #FFFFFF;
-		}
-	}
 
 	.right-aside{
-		flex: 1;
+    width: 100%;
 		padding: 20upx 0 20upx 0;
-		background: #fff;
+    background-color: #FAFAFA;
 		height: 100vh;
 	}
 	.s-item{
@@ -201,13 +237,14 @@
 		height: 70upx;
 		padding-top: 8upx;
 		font-size: 28upx;
-		color: $font-color-dark;
+		color: #252744;
+    font-weight: bold;
 	}
 	.t-list{
 		display: flex;
 		flex-wrap: wrap;
 		width: 100%;
-		background: #fff;
+    background-color: #FAFAFA;
 		padding-top: 12upx;
 		&:after{
 			content: '';
@@ -225,7 +262,8 @@
 		justify-content: center;
 		align-items: center;
 		flex-direction: column;
-		width: 176upx;
+		//width: 176upx;
+		width: 248upx;
 		font-size: 26upx;
 		color: #666;
 		padding-bottom: 20upx;
@@ -246,11 +284,55 @@
   .classBox {
     image {
       width: 66rpx;
-      height: 4rpx;
+      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>

pages/tabbar/category/slide-cate.vue

@@ -0,0 +1,105 @@
+<template>
+<view>
+  <view class="menu-window" :class="{ 'menu-window-visible': value }">
+    <scroll-view style="height: 100%;" scroll-y="true" class="list">
+        <view v-for="(vo,index) in cateList" :key="index" class="navlist" @click.stop="onCateClick(vo, index)">
+          <span :class="{active:checked == index}">{{vo.classifyName}}</span>
+        </view>
+    </scroll-view>
+  </view>
+  <view class="mask" @touchmove.prevent :hidden="value === false" @click="onClose"></view>
+</view>
+</template>
+
+<script>
+export default {
+  name: "slide-cate",
+  props: {
+    value: Boolean,
+    checked: Number,
+    cateList: Array,
+  },
+
+  methods: {
+    onClose() {
+      this.$emit("input", false);
+    },
+
+    onCateClick(item, index) {
+      this.$emit("checked", item, index);
+      this.$emit("input", false);
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+
+
+.mask {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: 55;
+  background-color: rgba(0, 0, 0, 0.5);
+}
+
+.menu-window {
+  display: block;
+  position: fixed;
+  width: 85%;
+  height: 100%;
+  left: 0;
+  top: 86rpx;
+  //background-color: #fff;
+  background-color: rgba(255, 255, 255, 1);
+  z-index: 999;
+  transform: translateX(calc(-100%));
+  transition: transform 0.3s ease;
+}
+
+.menu-window-visible {
+  //z-index: 999;
+  transform: translateX(0px);
+}
+
+.menu-window .list {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+}
+
+.list{
+  background-color: white;
+  color: #333333;
+  font-size: 14px;
+  padding-bottom: 20rpx;
+  padding-top: 20rpx;
+  width: 710rpx;
+
+.navlist {
+  box-sizing: border-box;
+  border-radius: 10vw;
+  margin-top: 20rpx;
+  margin-right: 3vw;
+  margin-left: 3vw;
+  padding: 1.2vw 3vw;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  transition: all linear 0.2s;
+}
+
+.active {
+  background-color: #252744;
+  border-radius: 10vw;
+  padding: 1.2vw 3vw;
+  color: white;
+  margin-right: -3vw;
+  margin-left: -3vw;
+}
+
+}
+</style>