shop page sidebar filter

src/component/bottomNav/bottomNav.js

@@ -41,7 +41,7 @@ class bottomNav extends Component {
 
     render() {
 
-        const otherDataElementsArray = this.props.otherData.menu? this.props.otherData.menu.map((item, index) => {
+        const otherDataElementsArray = this.props.otherData? this.props.otherData.menu.map((item, index) => {
             return { title: item.name, iconType: 'clock' }
         }):null
         return (

src/component/filteredShopComponent/filteredShopComponent.js

@@ -31,21 +31,22 @@ class recommondShop extends Component {
 
     render() {
         
-        const title = this.props.shop.shop_name
+        const title = this.props.shop?this.props.shop.shop_name:null
-        const imgUrl = URL.Base + this.props.shop.goods[0].goods_url
+        const imgUrl = this.props.shop ? URL.Base + this.props.shop.goods[0].goods_url : null
-        const price = this.props.shop.goods[0].goods_price
+        const price = this.props.shop ? this.props.shop.goods[0].goods_price : null
-        const goods = this.props.shop.goods
+        const goods = this.props.shop ? this.props.shop.goods : null
-        const ProductName = this.props.shop.goods[0].goods_name
+        const ProductName = this.props.shop ? this.props.shop.goods[0].goods_name : null
-        const address = this.props.shop.shop_address
+        const address = this.props.shop ? this.props.shop.shop_address : null
-        const distance = this.props.shop.distance
+        const distance = this.props.shop ? this.props.shop.distance : null
-        const ads = this.props.shop.ads
+        const ads = this.props.shop ? this.props.shop.ads:null
        // const consultText = this.props.shop.wx_open
-        const voucherLeft = this.props.shop.left_nums
+        const voucherLeft = this.props.shop?this.props.shop.left_nums:null
-        const goodsElementsArray=goods.slice(1).map((item,index)=>{
+        
+        const goodsElementsArray=goods!==null?goods.slice(1).map((item,index)=>{
             return <View className='goods-img-box' key={index}>
                 <Image className='goods-img' src={URL.Base+item.goods_url} />
             </View>
-        })
+        }):null
         return (
             <View className='shop-list-box' >
                 <View className='header'>

src/component/shopItemComponent/shopItemComponent.js

@@ -0,0 +1,53 @@
+import Taro, { Component } from '@tarojs/taro'
+import { View, Image, Text } from '@tarojs/components'
+
+import eyeIcon from '../../icons/eye.png'
+import cartIcon from '../../icons/cart.png'
+
+import './shopItemComponent.scss'
+import URL from '../../serviceAPI.config'
+
+class ShopItem extends Component {
+
+
+
+    render() {
+        const imgURL =this.props.item? URL.Base +this.props.item.goods_url:null
+        const newPrice = this.props.item ? this.props.item.goods_price : null
+        const oldPrice = this.props.item ? this.props.item.goods_org_price : null
+        const name = this.props.item ? this.props.item.goods_name : null
+        const browseTimes = this.props.item ? this.props.item.browse_times : null
+        
+        return (
+            <View className='shopitem-box'>
+                <View className='image-box'>
+                    <Image className='img' src={imgURL}/>
+                </View>
+                <View className='price-box'>
+                    <Text class='new-price'>￥{newPrice+'  '}</Text>
+                    <Text className='old-price'>   ￥{oldPrice}</Text>
+
+                </View>
+                <View className='itemname-box'>
+                    <View className='name'>{name}</View>
+                </View>
+
+                <View className='addon-box'>
+                    <View className='basket'>
+                        <Image src={cartIcon} style='width:12px; height:12px;'/>
+                        <Text className='title'>0</Text> 
+                    </View>
+                    <View className='browse-time'>
+                        <Image src={eyeIcon} style='width:12px; height:12px;' />
+                        <Text className='title' >{browseTimes}</Text> 
+                    </View>
+
+
+                </View>
+                
+            </View>
+        )
+    }
+}
+
+export default ShopItem

src/component/shopItemComponent/shopItemComponent.scss

@@ -0,0 +1,52 @@
+
+.shopitem-box{
+    padding:5%;
+    border:1px solid #eee;
+        .image-box{
+            text-align: center;
+        .img{
+            width: 80%;
+            height:400px;
+           
+             }    
+        }
+        .price-box{
+            .new-price{
+                color:red;
+                font-size: 28px
+            }
+            .old-price{
+                color:#999;
+                text-decoration: line-through;
+                font-size: 28px
+            }
+        }
+        .itemname-box{
+            .name{
+                font-size: 30px
+            }
+        }
+        .addon-box{
+            display: flex;
+            font-size: 30px;
+            margin-top: 10px;
+            
+            .basket{
+                margin:0 5px;
+                .title{
+                    margin-left: 5px
+                }
+                
+            }
+            .browse-time{
+                margin:0 5px;
+                .title{
+                    margin-left: 5px
+                }
+            }
+
+        }
+
+}
+
+

src/component/sideBarFilterComponent/sideBarFilterComponent.js

@@ -0,0 +1,92 @@
+import Taro, { Component } from '@tarojs/taro'
+import { View,Button } from '@tarojs/components'
+import { AtTag, AtButton} from 'taro-ui'
+
+
+
+import './sideBarFilterComponent.scss'
+
+class sideBarFilterComponent extends Component {
+    // 项目配置
+    config = {
+        navigationBarTitleText: '筛选'
+    }
+    constructor() {
+        super(...arguments)
+        this.state = {
+            isActive:false
+        }
+    }
+    onClick(value){
+        console.log(value)
+    }
+    render() {
+      
+        const goodsClass = this.props.FilterText?this.props.FilterText.goods_class:null
+        const goodsType = this.props.FilterText?this.props.FilterText.goods_type:null
+        const widthness = this.props.FilterText?this.props.FilterText.goodsParamExt['5'].param_value[0]:null
+       
+        const goodsParam = this.props.FilterText? this.props.FilterText.goodsParam:null
+// 分类 
+        const goodsClassElementsArray=goodsClass.map((item,index)=>{
+            return  <AtTag style='margin-left:5px' key={index}
+                        name={item.class_name}
+                        type='primary'
+                        active={this.state.isActive}
+                        onClick={this.onClick.bind(this)}
+                    >{item.class_name}</AtTag>
+                })
+// 商品类型
+        const goodsTypeElementsArray=goodsType.map((item,index)=>{
+            return  <AtTag style='margin-left:5px' key={index}
+                name={item.goods_type_ch_name}
+                        type='primary'
+                        active={this.state.isActive}
+                        onClick={this.onClick.bind(this)}
+            >{item.goods_type_ch_name}</AtTag>
+                })
+//---------
+        const goodsParamElementsArray = goodsParam.map((item,index)=>{
+            return <View key={index}><View className='title' >{item.param_name}</View>
+                <View className='button-box'>
+                <AtTag style='margin-left:5px' 
+                    name={item.param_value[0]}
+                    type='primary'
+                    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>
+                <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={widthness.value_desc}
+                        type='primary'
+                        active={this.state.isActive}
+                        onClick={this.onClick.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>
+        )
+    }
+}
+
+export default sideBarFilterComponent

src/component/sideBarFilterComponent/sideBarFilterComponent.scss

@@ -0,0 +1,18 @@
+.filter-box{
+    height: 100%;
+    margin-top: 30px;
+    overflow: scroll;
+    .title{
+        margin-left: 20px;
+        font-size: 30px;
+    }
+    .button-box{
+        margin:20px
+    }
+    .confirm-button{
+        margin: 80px;
+        .button{
+        margin:0 20px
+        }
+    }
+}

src/pages/index/index.js

@@ -29,7 +29,7 @@ class Index extends Component {
 //http://ihome6.com/Shop-supplyShops
   componentDidMount(){
     Taro.navigateTo({
-      url: '/pages/home/home'
+      url: '/pages/shop/shop'
     })
 
     // Taro.request({

src/pages/shop/shop.js

@@ -1,10 +1,11 @@
 import Taro, { Component } from '@tarojs/taro'
 import { View, Button, Text, Swiper, SwiperItem, Image } from '@tarojs/components'
-import { AtSearchBar, Picker  } from 'taro-ui'
+import { AtSearchBar, 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 = {
@@ -13,9 +14,14 @@ class Shop extends Component {
     constructor() {
         super(...arguments)
         this.state = {
+            shopItem:'',
             value: '',
             shopId:'',
-            shopName:''
+            shopName:'',
+            filterBar: ['综合排序','销量','新品','价格','人气','筛选'],
+            FilterText:'',
+            selectedFilterValue:0,
+            isShow:true
         }
     }
     onChange(value) {
@@ -23,9 +29,36 @@ class Shop extends Component {
             value: value
         })
     }
+ 
     onActionClick() {
         console.log('开始搜索')
     }
+    getSearchParams(){
+        Taro.request({
+            url: URL.FilterText,
+            method: 'POST',
+            dataType: 'json',
+            data: {
+                goods: JSON.stringify({
+                     shop_name: false, 
+                     shop_id: 808, 
+                     shop_class_id: "" }),
+               
+                goodsSpec: JSON.stringify([]),
+                goodsParam: JSON.stringify([]),
+                goodsParamExt: JSON.stringify([]),
+
+            },
+            header: {
+                'content-type': 'application/x-www-form-urlencoded',
+                'X-Requested-With': 'XMLHttpRequest'
+            }
+        })
+            .then(res => {
+                this.setState({ FilterText: res.data })
+            })
+    }
+   
 
     getShopInfo() {
         Taro.request({
@@ -37,12 +70,10 @@ class Shop extends Component {
                     curr_page: 1,
                      page_count: 50,
                      shop_name: false,
-                     shop_id: 1254,
+                    shop_id: 1305,
                      config_id: 4,
-                     shop_class_id: '',
+                     shop_class_id: ''
-                     order: 'g.browse_times desc',
+                    
-                     currPage: 1,
-                     goods_class_id: 10401
             }),
                 goodsRegion: JSON.stringify({}),
                 goodsSpec: JSON.stringify([]),
@@ -56,39 +87,67 @@ class Shop extends Component {
             }
         })
             .then(res => {
-                console.log('res--',res)
+               // console.log(res)
-              
+                this.setState({ shopItem:res.data})
             })
     }
+    onClickFilter(value){
+        this.setState({selectedFilterValue:value})
+        const sideFilter=5
+        if (value === sideFilter){
+            this.setState({ isShow:true})
+        }
+    }
+    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.getSearchParams()
     }
 
-
-
     componentDidShow() { }
 
     componentDidHide() { }
 
     render() {
+        
         const shopName= this.state.shopName
-        console.log(shopName)
+        const ShopItemElementsArray =this.state.shopItem? this.state.shopItem.goods.map((item,index)=>{
+            return <View key={index} className='shop-item' >
+                <ShopItem item={item}></ShopItem>
+            </View> 
+        }):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)}>
+                <Text className='text'>
+                    {item}
+                        </Text>
+                <Text className='icon'>
+
+                </Text>
+
+            </View>
+        })
+
+
         return (
            <View className='shop'>
              <View className='searchBar-box'>
-                <AtSearchBar
+                    <AtSearchBar className='search-button'
-                    showActionButton
+                  showActionButton
-                    value={this.state.value}
+                  value={this.state.value}
-                    onChange={this.onChange.bind(this)}
+                  onChange={this.onChange.bind(this)}
-                    onActionClick={this.onActionClick.bind(this)}
+                  onActionClick={this.onActionClick.bind(this)}
                 />
              </View>
              <View className='banner-box'>
-                    <Image src={URL.Base + 'Public/visual_editing/img/ksh_bg.jpg'} style='height:120px'/>
+                    <Image src={URL.Base + 'Public/visual_editing/img/ksh_bg.jpg'} style='height:120px' />
                     <View className='shop-name'>{shopName}</View>
              </View>
             <View className='nav-box'>
@@ -103,27 +162,28 @@ class Shop extends Component {
                             <Text className='text'>
                                 首页
                             </Text>
-
                         </View>
                         <View className='home-link'>
                             <Text className='text'>
                                 店铺说明
                             </Text>
-
                         </View>
-                    
-
                 </View>
-
-                       
              </View>
             <View className='filter-box'>
-            
+                    {filterElementsArray}
-
+            </View>
+            <View className={this.state.isShow ? 'side-filter show' :'side-filter'}>
+                    <View className='left' onClick={this.isShowFilter.bind(this)}></View>
+                <View className='right'>
+                        <SideBarFilter FilterText={this.state.FilterText}></SideBarFilter>
+                </View>
+                
+            </View>
+            <View className='container'>
+                    {ShopItemElementsArray}
+                    
             </View>
-                    <View className='container'>
-
-                    </View>
            </View> 
         )
     }

src/pages/shop/shop.scss

@@ -1,4 +1,11 @@
 
+.shop{
+    .search-button{
+        .at-search-bar__action{
+ background-color:#FF9900
+        }
+    }
+}
 .banner-box{
     position: relative;
     .shop-name{
@@ -27,4 +34,59 @@
         }
     }
     
-}
+}
+.filter-box{
+    display: flex;
+    flex-wrap: nowrap;
+    flex-direction: row;
+    
+    .filter-title{
+        box-sizing:border-box;
+        flex:1;
+        text-align: center;
+        font-size: 28px;
+        margin: 5px;
+        color:#999;
+        border: 1px solid #999
+    }
+    .actived{
+        color:#b10000
+    }
+
+}
+.side-filter{
+    z-index: 10;
+    position: fixed;
+    top:0;
+    right:0;
+    width:0%;
+    height:100%;
+    transition:width 1s;
+    display: flex;
+    .left{
+        width:30%;
+        
+    }
+    .right{
+        width: 70%;
+        background: white
+    }
+  
+}
+.show{
+    width: 100%
+}
+
+
+.container{
+    display: flex;
+    flex-wrap: wrap;
+    flex-direction: row;
+    .shop-item{
+        box-sizing:border-box;
+        width: 50%;
+        padding:5px;
+    
+    }
+   
+}

src/serviceAPI.config.js

@@ -5,6 +5,7 @@ const URL = {
     ShopWxStore: LOCALURL + 'Shop-wxStore',    //商城首页信息
     ShopSupplyShops: LOCALURL + 'Shop-supplyShops',// 商城店铺信息
     GoodsSearch: LOCALURL + 'GoodsSearch-search',// 店铺页面的信息
+    FilterText: LOCALURL + 'GoodsSearch-getSearchParam',// sidebar筛选的字段
    
 }