cf-wx-app/src/pages/shop/shop.js

import Taro, { Component } from '@tarojs/taro'
import { View, Button, Text, Image } from '@tarojs/components'
import { AtSearchBar, AtTag, AtIcon  } from 'taro-ui'
import URL from '../../serviceAPI.config'

import './shop.scss'
import ShopItem from '../../component/shopItemComponent/shopItemComponent'
import bottomNav from '../../component/bottomNav/bottomNav'
import copyrightComponent from '../../component/copyrightComponent/copyrightComponent'

class Shop extends Component {
    // 项目配置
    config = {
        navigationBarTitleText: '店铺'
    }
    constructor() {
        super(...arguments)
        this.state = {
            isShopDetailsOn:false, // 是否显示店铺说明页面
            shopItem:'',         // 所有商品
            value: '',           // 搜索框的值   
            shopId:'',          // 店铺的id
            shopName:'',          // 店铺名
            FilterText:'',        // 筛选的可选项  
            filterBar:['综合排序','销量','新品','价格','人气'],
            selectedFilterValue:0,   //筛选项
            isShowFilter:false,        //是否显示侧边筛选
            综合排序:true,      
            销量:false,
            新品:false,
            价格:false,
            人气:false,
            cate:{
                10101: false,// "橱柜"
                10102: false,// "衣柜"
                10106: false,// "装饰柜"
                20101: false,// "定制设计"
                20103: false,// "产品设计"
                30101: false,// "橱柜"
                30102: false,// "衣柜"
            }
           
        }
    }
    // 搜索栏值的改变方法
    onChange(value) {
       
        this.setState({
            value: value
        },()=>{
            console.log(this.state.value)
        })
    }
    // 搜索栏的方法
   getSearchBarkeyWords(){
    Taro.request({
        url: URL.SearchBarKeyWords,
        method: 'POST',
        dataType: 'json',
        data:{
            searchContent: '背板',
            searchType: 1
        },
        header: {
            'content-type': 'application/x-www-form-urlencoded',
            'X-Requested-With': 'XMLHttpRequest'
        }
    }).then(res => {
        console.log('搜索栏的搜索结果',res)
    })

   }

   // 得到筛选的标签
    getSearchParams({shop_name = false, shop_id = 1305, shop_class_id = "", goods_class_id=0,class_filter=0}){
        Taro.request({
            url: URL.GetSearchParam,
            method: 'POST',
            dataType: 'json',
            data: {
                goods: JSON.stringify({
                    shop_name: shop_name, 
                    shop_id: shop_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([]),

            },
            header: {
                'content-type': 'application/x-www-form-urlencoded',
                'X-Requested-With': 'XMLHttpRequest'
            }
        })
            .then(res => {
                this.setState({ FilterText: res.data })
            })
    }
    
   // 得到所有的产品
    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: curr_page,
                    page_count: page_count,
                    shop_name: shop_name,
                    shop_id: shop_id,
                    config_id: config_id,
                    shop_class_id: shop_class_id,
                    order: order,
                    currPage: currPage
            }),
                goodsRegion: JSON.stringify({}),
                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(res)
                this.setState({ shopItem:res.data})
            })
    }
    // 产品排序
    accendingDescending(value){
        this.setState({selectedFilterValue:value})
       if(value==0){
           this.setState({ 综合排序: !this.state.综合排序 })
           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})
              })
          }
      }
    }
   
    componentWillMount() {
        this.setState({ shopId: this.$router.params.id, shopName: this.$router.params.name}) // 输出 { id: 2, type: 'test' }
    }
    componentDidMount(){
        //页面加载之后 得到指定店铺的商品 和 筛选标签
        this.goodsSearch({})
        this.getSearchParams({})
        // this.getSearchBarkeyWords()
    }

    componentDidShow() { }

    componentDidHide() { }

    render() {
        // const shopName= this.state.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)=>{
           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>
                {index!==0&&index!==5&&(isTure? <AtIcon value='chevron-down' size='10' color='#F00'></AtIcon> : <AtIcon value='chevron-up' size='10' color='#F00'></AtIcon>)}
            </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 goodsTypeKeyArray = this.state.FilterText.goods_type ? Object.keys(this.state.FilterText.goods_type):null
        const goodsTypeElementsArray = goodsTypeKeyArray ? goodsTypeKeyArray.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 goodsParamKeyArray = this.state.FilterText.goodsParam ? Object.keys(this.state.FilterText.goodsParam):null
        const goodsParamElementsArray = goodsParamKeyArray ? goodsParamKeyArray.map((key, index) => {
            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'>
                    <AtSearchBar className='search-button'
                      actionName='搜索'
                      value={this.state.value}
                      onChange={this.onChange.bind(this)}
                      onActionClick={this.onActionClick.bind(this)}
                    />
             </View>
             <View className='banner-box'>
                    <Image src={URL.Base + 'Public/visual_editing/img/ksh_bg.jpg'} mode='aspectFill' style='height:120px' />
                    {/* <View className='shop-name'>{shopName}</View> */}
             </View>
            <View className='nav-box'>
                <View className='nav'>
                        <View className='shop-cate'>
                            <Text className='text'>
                                店铺全部分类  
                            </Text>
                            <AtIcon value='menu' size='10' color='white'></AtIcon>

                        </View>
                        <View className='homepage-link'>
                            <Text className='text'>
                                首页
                            </Text>
                        </View>
                        <View className='shoppage-link'>
                            <Text className='text'>
                                店铺说明
                            </Text>
                        </View>
                </View>
             </View>
            <View className='filter-box'>
                    {filterElementsArray}
                    <View onClick={this.showAndHideFilter.bind(this)} className='filter-title' >
                        <Text className='text'>
                            筛选
                        </Text>
                
                    </View> 
            </View>
            <View className={this.state.isShowFilter ? 'side-filter show' :'side-filter'}>
                    <View className='left' onClick={this.showAndHideFilter.bind(this)}></View>
        {/* 侧边筛选 */}
                <View className='right'>
                        <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 className='gap'></View>
                            </View>
                        </View>
                </View>
                
            </View>
                {/* 店铺的商品列表 */}
            <View className='container'>
                    {ShopItemElementsArray}
                    
            </View>
                <copyrightComponent></copyrightComponent>

                <View className='bottom-nav-box'>
                    <bottomNav otherData={{menu:[{ name: '首页' }, { name: '分类' }, { name: '购物车' }, { name: '教程软件' }, { name:'更多'}]}} />
                </View>
           </View> 
        )
    }
}

export default Shop