add sidebar filter

src/component/sideBarFilterComponent/sideBarFilterComponent.js

@@ -3,6 +3,7 @@ import { View,Button } from '@tarojs/components'
 import { AtTag, AtButton} from 'taro-ui'
 
 
+import URL from '../../serviceAPI.config'
 
 import './sideBarFilterComponent.scss'
 
@@ -20,6 +21,73 @@ class sideBarFilterComponent extends Component {
     onClick(value){
         console.log(value)
     }
+    getSearchParam(){
+        Taro.request({
+            url: URL.GetSearchParam,
+            method: 'POST',
+            dataType: 'json',
+            data: {
+                goods: JSON.stringify({
+                    shop_name: false,
+                    shop_id: 808,
+                    shop_class_id: "",
+                    goods_type: 12
+                }),
+                goodsSpec: JSON.stringify([]),
+                goodsParam: JSON.stringify([]),
+                goodsParamExt: JSON.stringify([]),
+
+            },
+            header: {
+                'content-type': 'application/x-www-form-urlencoded',
+                'X-Requested-With': 'XMLHttpRequest'
+            }
+        })
+            .then(res => {
+                console.log('param',res)
+            })
+    }
+    getSearchResult(){
+        Taro.request({
+            url: URL.SearchResult,
+            method: 'POST',
+            dataType: 'json',
+            data: {
+                goods: JSON.stringify({
+                    curr_page: 1,
+                    page_count: 50,
+                    shop_name: false,
+                    shop_id: 808,
+                    config_id: 4,
+                    shop_class_id: '',
+                    goods_type:12
+                }),
+                goodsSpec: JSON.stringify([]),
+                goodsParam: JSON.stringify([]),
+                goodsParamExt: JSON.stringify([]),
+
+            },
+            header: {
+                'content-type': 'application/x-www-form-urlencoded',
+                'X-Requested-With': 'XMLHttpRequest'
+            }
+        })
+            .then(res => {
+                console.log('result',res)
+            })
+    }
+
+    componentWillMount() {
+        
+    }
+    componentDidMount() {
+        this.getSearchParam()
+        this.getSearchResult()
+    }
+
+    componentDidShow() { }
+
+    componentDidHide() { }
     render() {
         
         const goodsClass = this.props.FilterText?this.props.FilterText.goods_class:null
@@ -55,14 +123,10 @@ class sideBarFilterComponent extends Component {
                   active={this.state.isActive}
                   onClick={this.onClick.bind(this)}
                 >{item.param_value[0]}</AtTag>
-                
                 </View>
             </View> 
         })
 // 宽度
-            
-        
-
         return (
             <View className='filter-box'>
                 <View className='title'>分类</View>

src/pages/shop/shop.js

@@ -1,11 +1,11 @@
 import Taro, { Component } from '@tarojs/taro'
 import { View, Button, Text, Swiper, SwiperItem, Image } from '@tarojs/components'
-import { AtSearchBar, AtSegmentedControl, AtTabBar, AtDrawer  } from 'taro-ui'
+import { AtSearchBar, AtTag, AtIcon ,AtSegmentedControl, AtTabBar, AtDrawer  } from 'taro-ui'
 import URL from '../../serviceAPI.config'
 
 import './shop.scss'
 import ShopItem from '../../component/shopItemComponent/shopItemComponent'
-import SideBarFilter from '../../component/sideBarFilterComponent/sideBarFilterComponent'
+
 class Shop extends Component {
     // 项目配置
     config = {
@@ -18,10 +18,25 @@ class Shop extends Component {
             value: '',
             shopId:'',
             shopName:'',
-            filterBar: ['综合排序','销量','新品','价格','人气','筛选'],
             FilterText:'',
+            filterBar:['综合排序','销量','新品','价格','人气'],
             selectedFilterValue:0,
-            isShow:true
+            isShowFilter:true,
+            综合排序:true,
+            销量:false,
+            新品:false,
+            价格:false,
+            人气:false,
+            cate:{
+                10101: false,// "橱柜"
+                10102: false,// "衣柜"
+                10106: false,// "装饰柜"
+                20101: false,// "定制设计"
+                20103: false,// "产品设计"
+                30101: false,// "橱柜"
+                30102: false,// "衣柜"
+            }
+           
         }
     }
     onChange(value) {
@@ -33,17 +48,20 @@ class Shop extends Component {
     onActionClick() {
         console.log('开始搜索')
     }
-    getSearchParams(){
+    getSearchParams({shop_name = false, shop_id = 1305, shop_class_id = "", goods_class_id=0,class_filter=0}){
         Taro.request({
-            url: URL.FilterText,
+            url: URL.GetSearchParam,
             method: 'POST',
             dataType: 'json',
             data: {
                 goods: JSON.stringify({
-                     shop_name: false, 
+                    shop_name: shop_name, 
-                     shop_id: 808, 
+                    shop_id: shop_id, 
-                     shop_class_id: "" }),
+                    shop_class_id: shop_class_id,
+                    goods_class_id: goods_class_id,
+                    class_filter: class_filter,
 
+                }),
                 goodsSpec: JSON.stringify([]),
                 goodsParam: JSON.stringify([]),
                 goodsParamExt: JSON.stringify([]),
@@ -59,21 +77,22 @@ class Shop extends Component {
             })
     }
     
-
+   // get goods info
-    getShopInfo() {
+    goodsSearch({ curr_page = 1, page_count = 50, shop_name = false, shop_id = 1305, config_id = 4, shop_class_id = '', order = '', currPage = 1 }) {
         Taro.request({
             url: URL.GoodsSearch,
             method:'POST',
             dataType: 'json',
             data:{
                 goods: JSON.stringify({ 
-                    curr_page: 1,
+                    curr_page: curr_page,
-                     page_count: 50,
+                    page_count: page_count,
-                     shop_name: false,
+                    shop_name: shop_name,
-                    shop_id: 1305,
+                    shop_id: shop_id,
-                     config_id: 4,
+                    config_id: config_id,
-                     shop_class_id: ''
+                    shop_class_id: shop_class_id,
-                    
+                    order: order,
+                    currPage: currPage
             }),
                 goodsRegion: JSON.stringify({}),
                 goodsSpec: JSON.stringify([]),
@@ -91,23 +110,63 @@ class Shop extends Component {
                 this.setState({ shopItem:res.data})
             })
     }
-    onClickFilter(value){
+    accendingDescending(value){
         this.setState({selectedFilterValue:value})
-        const sideFilter=5
+       if(value==0){
-        if (value === sideFilter){
+           this.setState({ 综合排序: !this.state.综合排序 })
-            this.setState({ isShow:true})
+           this.goodsSearch({})
+       }
+       if(value==1){
+           this.setState({ 销量: !this.state.销量 },()=>{
+               this.state.销量 ? this.goodsSearch({ order: "g.sales_volume desc" }) : this.goodsSearch({ order: "g.sales_volume" }) 
+           })
+    }
+       if(value==2){
+           this.setState({ 新品: !this.state.新品 },()=>{
+               this.state.新品 ? this.goodsSearch({ order: "g.create_date desc" }) : this.goodsSearch({ order: "g.create_date" }) 
+           })
+       }
+       if(value==3){
+           this.setState({ 价格: !this.state.价格 },()=>{
+               this.state.价格 ? this.goodsSearch({ order: "g.goods_price desc" }) : this.goodsSearch({ order: "g.goods_price" })
+
+           })
+
+       }
+       if(value==4){
+           this.setState({ 人气: !this.state.人气 },()=>{
+               this.state.人气 ? this.goodsSearch({ order: "g.browse_times desc" }) : this.goodsSearch({ order: "g.browse_times" })
+
+           })
+       }
+    }
+    
+    showAndHideFilter(){
+        this.setState({ isShowFilter: !this.state.isShowFilter })
+    }
+    selectTag(value){
+      for(let item in this.state.cate){
+          if(value===item){
+              this.setState(prevState => ({
+                  cate: {
+                      ...prevState.cate,
+                      [item]:!this.state.cate[item]
+                  }
+              }),()=>{
+                  
+                   this.getSearchParams({ goods_class_id: value , class_filter :1})
+                //   this.goodsSearch({ shop_id: 808 })
+              })
           }
       }
-    isShowFilter(){
-        this.setState({ isShow: false })
     }
    
     componentWillMount() {
         this.setState({ shopId: this.$router.params.id, shopName: this.$router.params.name}) // 输出 { id: 2, type: 'test' }
     }
     componentDidMount(){
-        this.getShopInfo()
+        this.goodsSearch({})
-        this.getSearchParams()
+         this.getSearchParams({})
     }
 
     componentDidShow() { }
@@ -116,6 +175,7 @@ class Shop extends Component {
 
     render() {
         
+        console.log(this.state.FilterText)
         const shopName= this.state.shopName
         const ShopItemElementsArray =this.state.shopItem? this.state.shopItem.goods.map((item,index)=>{
             return <View key={index} className='shop-item' >
@@ -124,18 +184,61 @@ class Shop extends Component {
         }):null
          
         const filterElementsArray=this.state.filterBar.map((item,index)=>{
-            return <View className={index === this.state.selectedFilterValue ? 'filter-title actived' :'filter-title'} key={index} onClick={this.onClickFilter.bind(this,index)}>
+           let isTure=this.state[item]
+            return <View key={index} onClick={this.accendingDescending.bind(this, index)} className={index===this.state.selectedFilterValue ? 'filter-title actived' : 'filter-title'}>
                 <Text className='text'>
                     {item}
                 </Text>
-                <Text className='icon'>
+                {index!==0&&index!==5&&(isTure? <AtIcon value='chevron-down' size='10' color='#F00'></AtIcon> : <AtIcon value='chevron-up' size='10' color='#F00'></AtIcon>)}
-
-                </Text>
-
             </View>
         })
 
        
+        
+       // const widthness = this.state.FilterText ? this.state.FilterText.goodsParamExt[5].param_value[0] : null // filter 宽度选项
+        // 分类 
+       
+        const goodsClassElementsArray = this.state.FilterText.goods_class ? this.state.FilterText.goods_class.map((item, index) => {
+            
+            let isTrue = this.state.cate[item.class_id]
+            return <AtTag style='margin-left:5px' key={index}
+              name={JSON.stringify(item)}
+              type='primary'
+              active={isTrue}
+              onClick={this.selectTag.bind(this, item.class_id)}
+            >{item.class_name}</AtTag>
+        }):null
+        // 商品类型
+        
+        // const goodsTypeElementsArray = this.state.FilterText.goods_type ? Object.keys(this.state.FilterText.goods_type).map((key, index) => {
+        //     let object = this.state.FilterText.goods_type
+        //     return <AtTag style='margin-left:5px' key={index}
+        //       name={JSON.stringify(object[key])}
+        //       type='primary'
+        //       active={this.state.isActive}
+        //       onClick={this.selectTag.bind(this)}
+        //     >{object[key].goods_type_ch_name}</AtTag>
+        // }):null
+        
+        //---------
+      
+        // const goodsParamElementsArray = this.state.FilterText.goodsParam ? Object.keys(this.state.FilterText.goodsParam).map((key, index) => {
+        //     console.log(Object.keys(this.state.FilterText.goodsParam))
+        //     let object = this.state.FilterText.goodsParam
+        //    return <View key={index}><View className='title' >{object[key].param_name}</View>
+        //         <View className='button-box'>
+        //             <AtTag style='margin-left:5px'
+        //               name={JSON.stringify(object[key])}
+        //               type='primary'
+        //               active={this.state.isActive}
+        //               onClick={this.selectTag.bind(this)}
+        //             >{object[key].param_value[0]}</AtTag>
+        //         </View>
+        //     </View>
+        // }):null
+
+
+
         return (
            <View className='shop'>
              <View className='searchBar-box'>
@@ -172,11 +275,37 @@ class Shop extends Component {
              </View>
             <View className='filter-box'>
                     {filterElementsArray}
+                    <View onClick={this.showAndHideFilter.bind(this)} className='filter-title' >
+                        <Text className='text'>
+                            筛选
+                        </Text>
+                
                     </View> 
-            <View className={this.state.isShow ? 'side-filter show' :'side-filter'}>
+            </View>
-                    <View className='left' onClick={this.isShowFilter.bind(this)}></View>
+            <View className={this.state.isShowFilter ? 'side-filter show' :'side-filter'}>
+                    <View className='left' onClick={this.showAndHideFilter.bind(this)}></View>
+ {/* sidebar 筛选 */}
                 <View className='right'>
-                        <SideBarFilter FilterText={this.state.FilterText}></SideBarFilter>
+                        <View className='filter-box'>
+                            <View className='title'>分类</View>
+                            <View className='button-box'>{goodsClassElementsArray}</View>
+                            <View className='title'>商品类型</View>
+                            <View className='button-box'>{goodsTypeElementsArray}</View>
+                            {goodsParamElementsArray}
+                            <View className='title'>宽度</View>
+                            <View className='button-box'>
+                                {/* <AtTag style='margin-left:5px'
+                                  name={JSON.stringify(widthness)}
+                                  type='primary'
+                                  active={this.state.isActive}
+                                  onClick={this.selectTag.bind(this)}
+                                >{widthness.value_desc}</AtTag> */}
+                            </View>
+                            <View className='confirm-button'>
+                                <Button className='button' type='primary' size='mini' style='background-color:#FF9900' >确认</Button>
+                                <Button className='button' type='primary' size='mini' style='background-color:#FF9900'>重置</Button>
+                            </View>
+                        </View>
                 </View>
                 
             </View>

src/pages/shop/shop.scss

@@ -69,7 +69,27 @@
     }
     .right{
         width: 70%;
-        background: white
+        background: white;
+        .filter-box{
+            height: 100%;
+            width: 100%;
+            margin-top: 30px;
+            overflow: scroll;
+            display: block;
+            .title{
+                margin-left: 20px;
+                font-size: 30px;
+            }
+            .button-box{
+                margin:20px
+            }
+            .confirm-button{
+                margin: 80px;
+                .button{
+                margin:0 20px
+                }
+            }
+        }
     }
   
 }

src/serviceAPI.config.js

@@ -5,7 +5,8 @@ const URL = {
     ShopWxStore: LOCALURL + 'Shop-wxStore',    //商城首页信息
     ShopSupplyShops: LOCALURL + 'Shop-supplyShops',// 商城店铺信息
     GoodsSearch: LOCALURL + 'GoodsSearch-search',// 店铺页面的信息
-    FilterText: LOCALURL + 'GoodsSearch-getSearchParam',// sidebar筛选的字段
+    GetSearchParam: LOCALURL + 'GoodsSearch-getSearchParam',// sidebar筛选的字段
+    SearchResult: LOCALURL + 'GoodsSearch-search',// 得到搜索结果
    
 }