商城筛选样式修改

pages/index/market/index.js

@@ -13,7 +13,8 @@ Component({
     CustomBar: getApp().globalData.CustomBar,
     typeList: [],
     list: [],
-    filtratelist: []
+    filtratelist: [],
+    popupShow: false
   },
   methods: {
     init() {
@@ -26,19 +27,8 @@ Component({
       this.getTradefie();
       return true;
     },
-    showModal(e) {
-      this.setData({
-        modalName: e.currentTarget.dataset.target
-      })
-    },
-    hideModal(e) {
-      this.setData({
-        modalName: null
-      })
-    },
     /* 获取品牌 */
     getBrand() {
-      getApp().globalData.setTemporaryId = this.handleFiltrate.bind(this);
       _Http.basic({
         "id": 20220924163702,
         content: {
@@ -76,30 +66,48 @@ Component({
         }
       }).then(res => {
         console.log("营销类别", res)
-        if (res.data[0].ttemclass) {
+        if (res.data.length) {
           res.data[0].ttemclass.unshift({
             itemclassid: "",
             itemclassfullname: "全部",
             itemclassname: "全部",
             subdep: []
           })
-          this.data.filtratelist.push({
-            label: "营销分类",
-            index: 0,
-            type: "multilevelClass",
-            showName: "itemclassname", //显示字段
-            valueKey: "itemclassid", //返回Key
-            selectKey: "itemclassid", //传参 代表选着字段 不传参返回整个选择对象
-            value: "", //选中值
-            list: res.data[0].ttemclass
-          })
           this.setData({
-            filtratelist: this.data.filtratelist
+            itemClasss: [res.data[0].ttemclass]
           });
         }
         this.getList(true);
       })
     },
+    itemClasssChange(e) {
+      let detail = e.detail;
+      content.where.itemclassid = detail.item.itemclassid;
+      let itemClasss = this.data.itemClasss,
+        subdep = detail.item.subdep;
+      itemClasss = itemClasss.slice(0, detail.rowIndex + 1);
+      if (subdep.length) {
+        subdep.unshift({
+          itemclassid: detail.item.itemclassid,
+          itemclassfullname: "全部",
+          itemclassname: "全部",
+          subdep: []
+        })
+        itemClasss.push(subdep)
+        this.selectAllComponents('#class' + (detail.rowIndex - 0 + 1)).filter(v => v.setData({
+          active: 0
+        }))
+      }
+      this.setData({
+        itemClasss
+      })
+      this.selectAllComponents('#' + e.target.id).filter(v => {
+        v.setData({
+          active: detail.index
+        })
+      })
+      this.getList(true);
+    },
     /* 获取产品 */
     getList(init = false) {
       if (init.detail != undefined) init = init.detail;
@@ -152,17 +160,8 @@ Component({
             sys_enterprise_tradefieldid: 0,
             tradefield: "全部"
           })
-          this.data.filtratelist.unshift({
-            label: "领域",
-            index: 0,
-            showName: "tradefield", //显示字段
-            valueKey: "tradefield", //返回Key
-            selectKey: "tradefield", //传参 代表选着字段 不传参返回整个选择对象
-            value: "", //选中值
-            list: res.data
-          })
           this.setData({
-            filtratelist: this.data.filtratelist
+            tradefieList: res.data
           });
         }
       })
@@ -171,15 +170,26 @@ Component({
     setListHeight() {
       this.selectComponent("#ListBox").setHeight(".division", this);
     },
-    handleFiltrate({
+    tradefieChange({
       detail
     }) {
-      clearTimeout(downCount);
-      if (detail.tradefield) content.where.tradefield = detail.tradefield == '全部' ? "" : detail.tradefield;
-      content.where.itemclassid = detail.temporaryId || detail.temporaryId == '' ? detail.temporaryId : content.where.itemclassid;
-      downCount = setTimeout(() => {
-        this.getList(true);
-      }, 300);
+      content.where.tradefield = detail.item.tradefield == '全部' ? '' : detail.item.tradefield
+      this.getList(true);
+      this.selectAllComponents('#tradefieList').filter(v => {
+        v.setData({
+          active: detail.index
+        })
+      })
+    },
+    openPopup() {
+      this.setData({
+        popupShow: true
+      })
+    },
+    onClose() {
+      this.setData({
+        popupShow: false
+      })
     }
   }
 })

pages/index/market/index.json

@@ -2,6 +2,6 @@
   "component": true,
   "usingComponents": {
     "List": "./modules/list/index",
-    "Filtrate":"./modules/filtrate/index"
+    "Tabs": "./modules/tabs/index"
   }
 }

pages/index/market/index.scss

@@ -1,4 +1,5 @@
 @import "../../../static/filter.scss";
+
 .search-right {
 	padding: 0 10rpx !important;
 }
@@ -72,3 +73,61 @@ page {
 		}
 	}
 }
+
+.brand-box {
+	margin-left: 30rpx;
+	padding-bottom: 20rpx;
+
+	.brand-tab-class {
+		height: 52rpx;
+		line-height: 52rpx;
+		font-size: 24rpx;
+		color: #666666;
+	}
+
+	.brand-active-class {
+		border-radius: 26rpx;
+		background-color: #FAFAFA;
+		font-weight: bold;
+	}
+}
+
+.title {
+	font-size: 28rpx;
+	width: 100%;
+	text-align: center;
+	line-height: 100rpx;
+	font-weight: bold;
+}
+
+.brand-box1 {
+	margin-left: 30rpx;
+	padding-bottom: 20rpx;
+
+	.brand-tab-class1 {
+		height: 60rpx;
+		line-height: 60rpx;
+		font-size: 30rpx;
+		padding: 0 30rpx !important;
+		color: #4e4e4e;
+	}
+
+	.brand-active-class1 {
+		border-radius: 60rpx;
+		background-color: #FAFAFA;
+		font-weight: bold;
+	}
+}
+
+.but-box {
+	display: flex;
+	justify-content: center;
+
+	.but{
+		width: 290rpx;
+		background-color: #1989FA;
+		color: #fff;
+		font-weight: bold;
+		margin-top: 50rpx;
+	}
+}

pages/index/market/index.wxml

@@ -1,25 +1,19 @@
-<view class="DrawerPage {{modalName=='viewModal'?'show':''}}">
-	<van-search use-action-slot placeholder='请输入搜索关键词' shape='round' bind:search="onSearch" bind:clear="onSearch">
-		<view wx:if="{{filtratelist[0].list.length>1}}" slot="action" class="cuIcon-filter search-right" bindtap="showModal" data-target="viewModal">
-			筛选
-		</view>
-	</van-search>
-	<view class="division" style="height: 20rpx;" />
-	<Yl_ListBox id='ListBox' bind:getlist='getList'>
-		<List list="{{list}}" />
-		<view style="height: 200rpx;" />
-	</Yl_ListBox>
-</view>
-
-
-<view class="DrawerClose {{modalName=='viewModal'?'show':''}}" bindtap="hideModal">
-	<text class="cuIcon-pullright"></text>
-</view>
+<van-search use-action-slot placeholder='请输入搜索关键词' shape='round' bind:search="onSearch" bind:clear="onSearch">
+	<view style="padding: 0 10rpx;" slot="action" bind:tap="openPopup">筛选</view>
+</van-search>
+<Tabs id="tradefieList" list="{{tradefieList}}" wx:if="{{tradefieList.length>1}}" box-class='brand-box' tab-class='brand-tab-class' active-class='brand-active-class' name='tradefield' bind:onChange="tradefieChange" />
+<Tabs wx:for="{{itemClasss}}" id='class{{index}}' rowIndex='{{index}}' wx:key="{{item.rowindex}}" list="{{item}}" box-class='brand-box' tab-class='brand-tab-class' active-class='brand-active-class' name='itemclassname' bind:onChange="itemClasssChange" />
+<view class="division" style="height: 10rpx;" />
+<Yl_ListBox id='ListBox' bind:getlist='getList'>
+	<List list="{{list}}" />
+	<view style="height: 200rpx;" />
+</Yl_ListBox>
 
-<scroll-view scroll-y class="DrawerWindow  {{modalName=='viewModal'?'show':''}}">
-	<view style="height:{{CustomBar}}px" />
-	<view class="cu-list menu card-menu margin-top-xl margin-bottom-xl shadow-lg bg-white">
-		<Filtrate list='{{filtratelist}}' bindhandle='handleFiltrate' />
+<van-popup show="{{ popupShow }}" z-index='999999' round closeable position='bottom' bind:click-overlay='onClose' bind:close="onClose">
+	<view class="title">条件筛选窗口</view>
+	<Tabs id="tradefieList" list="{{tradefieList}}" wx:if="{{tradefieList.length>1}}" box-class='brand-box1' tab-class='brand-tab-class1' active-class='brand-active-class1' name='tradefield' bind:onChange="tradefieChange" />
+	<Tabs wx:for="{{itemClasss}}" id='class{{index}}' rowIndex='{{index}}' wx:key="{{item.rowindex}}" list="{{item}}" box-class='brand-box1' tab-class='brand-tab-class1' active-class='brand-active-class1' name='itemclassname' bind:onChange="itemClasssChange" />
+	<view class="but-box">
+		<van-button custom-class='but' bind:tap="onClose" round>关闭筛选窗口</van-button>
 	</view>
-	<view style="height: 200rpx;" />
-</scroll-view>
+</van-popup>

pages/index/market/modules/tabs/index.js

@@ -0,0 +1,56 @@
+Component({
+  properties: {
+    list: {
+      type: Array
+    },
+    name: {
+      type: String,
+      value: "brandname"
+    },
+    active: {
+      type: String,
+      value: 0
+    },
+    rowIndex: {
+      type: Number,
+      value: 0
+    },
+    onChange: {
+      type: Function
+    }
+  },
+  externalClasses: [
+    "box-class", "tab-class", "active-class"
+  ],
+  data: {
+    scrollLeft: 0,
+  },
+  methods: {
+    onClick(e) {
+      const {
+        index,
+        item
+      } = e.currentTarget.dataset;
+      if (this.data.active != index) {
+        this.setData({
+          active: index
+        });
+        this.triggerEvent("onChange", {
+          item,
+          index,
+          rowIndex: this.data.rowIndex
+        })
+        this.setActive(index);
+      }
+    },
+    setActive(active) {
+      const that = this,
+        query = wx.createSelectorQuery().in(this)
+      query.select('#active' + active).boundingClientRect(function (res) {
+        that.setData({
+          scrollLeft: res.right - res.width
+        })
+      }).exec();
+    },
+  }
+})

pages/index/market/modules/tabs/index.json

@@ -0,0 +1,4 @@
+{
+  "component": true,
+  "usingComponents": {}
+}

pages/index/market/modules/tabs/index.scss

@@ -0,0 +1,16 @@
+.scroll-box {
+	background-color: #fff;
+	.box {
+		display: flex;
+		min-width: 100vw;
+
+		.item {
+			flex-shrink: 0;
+			padding: 0 20rpx;
+		}
+
+		.active {
+			color: var(--assist);
+		}
+	}
+}

pages/index/market/modules/tabs/index.wxml

@@ -0,0 +1,7 @@
+<scroll-view class="scroll-box" scroll-x scroll-left='{{scrollLeft}}' scroll-with-animation enable-passive enhanced show-scrollbar='{{false}}'>
+	<view class="box box-class">
+		<view wx:for="{{list}}" class="item tab-class {{active==index?'active active-class':''}}" id='{{"active"+index}}' wx:key="index" data-item="{{item}}" data-index="{{index}}" bindtap="onClick">
+			{{item[name]}}
+		</view>
+	</view>
+</scroll-view>