添加商品页面筛选器

src/pages/allDemanding/allDemanding.js

@@ -1,7 +1,7 @@
 import Taro, { Component } from '@tarojs/taro'
 import { View, Text, Image,Button } from '@tarojs/components'
 import { AtInput, AtButton, Picker, AtIcon, AtLoadMore, AtModal, AtToast,AtModalHeader ,AtModalContent ,AtModalAction } from 'taro-ui'
-import copyrightComponent from '../../component/copyrightComponent/copyrightComponent'
+import CopyrightComponent from '../../component/copyrightComponent/copyrightComponent'
 
 import URL from '../../serviceAPI.config'
 import './allDemanding.scss'
@@ -277,7 +277,7 @@ class AllDemanding extends Component {
                   loadingText='加载中'
                   noMoreText='没有更多了'
                 />
-                <copyrightComponent></copyrightComponent>
+                <CopyrightComponent></CopyrightComponent>
             </View>
         )
     }

src/pages/index/index.js

@@ -30,7 +30,7 @@ class Index extends Component {
   componentDidMount(){
     Taro.navigateTo({
       // url: '/pages/goodsPublish/goodsPublish'
-       url: '/pages/shop/shop'
+       url: '/pages/home/home'
       // url: '/pages/myDemandSupplyEdit/myDemandSupplyEdit'
       // url: '/pages/home/home'
      // url:'/pages/supplyDemandPublish/supplyDemandPublish'

src/pages/mySupplyDemand/mySupplyDemand.scss

@@ -71,9 +71,12 @@ $themeColor:#FF7142;
     flex-direction: row;
     margin: 40px 0;
     padding: 0 120px;
+    
     .button{
         flex:1;
         text-align: center;
+       
+
         .at-button--primary{
             background-color:$themeColor;
             border:1PX solid $themeColor;
@@ -108,7 +111,8 @@ $themeColor:#FF7142;
     .button{
       // flex:1;
         text-align: center;
-        margin: 0 0;
+        margin:1% 1% 0;
+
         .at-button--primary{
             background-color:#FF9500;
             border:1PX solid #FF9500;

src/pages/shop/shop.js

@@ -1,6 +1,6 @@
 import Taro, { Component } from '@tarojs/taro'
 import { View, Button, Text, Image } from '@tarojs/components'
-import { AtTag, AtIcon, AtPagination } from 'taro-ui'
+import { AtTag, AtIcon, AtPagination, AtToast } from 'taro-ui'
 import URL from '../../serviceAPI.config'
 
 
@@ -27,7 +27,7 @@ class Shop extends Component {
             filterBar: ['all', 'amount', 'newProduct', 'price', 'popularity'], //筛选选项
             filterBarKeys: { all: '综合排序', amount: '销量', newProduct: '新品', price: '价格', popularity: '人气' }, // 筛选选项对应值
             selectedFilterValue: 0,   //筛选项
-            isShowFilter: false,        //是否显示侧边筛选
+            isShowFilter: true,        //是否显示侧边筛选
             showShopHomePage: true,// 是否显示首页页面 
             shopDescriptionData: '',// 店铺详情信息
             shopName: '',//店铺名称
@@ -42,47 +42,47 @@ class Shop extends Component {
                 price: false,
                 popularity: false,
             },
-            cate: {
+
-                10101: false,// "橱柜"
-                10102: false,// "衣柜"
-                10106: false,// "装饰柜"
-                20101: false,// "定制设计"
-                20103: false,// "产品设计"
-                30101: false,// "橱柜"
-                30102: false,// "衣柜"
-            },
             filterCondition: '',// 筛选条件
             total: 0,// 信息条数
             currentPage: 1,// 当前页
             isShowShopAllCate: false,
-            shopAllInnerCate: '',
+            shopAllInnerCate: '',// 店铺内部分类
-            isBlurWindow:false,
+            isBlurWindow: false,
+            mainType: [],// 侧边筛选分类
+            goodType: [],//侧边商品类型
+            otherType: [],//侧边其他类型
+            widthType: [],// 侧边宽度类型
+            checkedFilterIdList: [],//已选的筛选id
+            isLoading: false,
+            // 下面是函数的默认参数
+            curr_page: 1,
+            page_count: 10,
+            shop_name: false,
+            shop_id: 1305,
+            config_id: 4,
+            shop_class_id: '',
+            order: '',
+            currPage: 1,
+            goods_class_id: '',
+            goodsSpec: [],
+            goodsParam: [],
+            goodsParamExt: [],
 
         }
     }
 
-    //api 搜索栏的方法请求
-    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)
-        })
-
-    }
-
     // api 得到筛选的标签请求
-    getSearchParams({ shop_name = false, shop_id = 1305, shop_class_id = "", goods_class_id = 0, class_filter = 0 }) {
+    getSearchParams({
+        shop_name = this.state.shop_name,
+        shop_id = this.state.shop_id,
+        shop_class_id = this.state.shop_class_id,
+        goods_class_id = this.state.goods_class_id,
+        class_filter = this.state.class_filter,
+        goods_type = this.state.goods_type,
+        goodsSpec = this.state.goodsSpec,
+        goodsParam = this.state.goodsParam,
+        goodsParamExt = this.state.goodsParamExt }) {
         Taro.request({
             url: URL.GetSearchParam,
             method: 'POST',
@@ -94,11 +94,12 @@ class Shop extends Component {
                     shop_class_id: shop_class_id,
                     goods_class_id: goods_class_id,
                     class_filter: class_filter,
+                    goods_type: goods_type,
 
                 }),
-                goodsSpec: JSON.stringify([]),
+                goodsSpec: JSON.stringify(goodsSpec),
-                goodsParam: JSON.stringify([]),
+                goodsParam: JSON.stringify(goodsParam),
-                goodsParamExt: JSON.stringify([]),
+                goodsParamExt: JSON.stringify(goodsParamExt),
 
             },
             header: {
@@ -107,12 +108,97 @@ class Shop extends Component {
             }
         })
             .then(res => {
-                this.setState({ FilterText: res.data })
+                if (res.statusCode === 200) {
+                    console.log('筛选项目成功', res)
+
+
+                    this.formatFilterData(res.data).then(data => {
+
+                        this.setState({
+                            sideFilterdata: data,
+                            mainType: data.mainType || [],
+                            goodType: data.goodType || [],
+                            otherType: data.otherType || [],
+                            widthType: data.widthType || [],
+                            isLoading: false
+                        })
+                        console.log('formated data', data)
+                    })
+                } else {
+                    console.log('筛选项目获取失败')
+                }
+
+
+
             })
     }
 
+    async formatFilterData(data) {
+        const formatedFilterOptions = {}
+        //侧边筛选分类
+        if (data.goods_class) {
+            let typeArray = []
+            data.goods_class.forEach(item => {
+                typeArray.push({ id: item.class_id, name: item.class_name, checked: false })
+            });
+            formatedFilterOptions.mainType = typeArray
+        }
+        //侧边筛选商品类型
+        if (data.goods_type) {
+            let goodTypeArray = []
+            Object.keys(data.goods_type).forEach(key => {
+                goodTypeArray.push({ id: data.goods_type[key].goods_type_id, name: data.goods_type[key].goods_type_ch_name, checked: false })
+            });
+            formatedFilterOptions.goodType = goodTypeArray
+        }
+        //侧边筛选其他类型
+        if (data.goodsParam) {
+            let goodsParamArray = []
+
+            Object.keys(data.goodsParam).forEach(key => {
+                const value = data.goodsParam[key]
+                const subArray = value.param_value.map(item => {
+                    return { id: value.param_id, name: item, checked: false }
+                })
+                goodsParamArray.push({ [value.param_name]: subArray })
+            });
+            formatedFilterOptions.otherType = goodsParamArray
+        }
+        //侧边筛选宽度类型
+        if (data.goodsParamExt) {
+            let goodsParamExtArray = []
+            Object.keys(data.goodsParamExt).forEach(key => {
+                const value = data.goodsParamExt[key]
+                const keyId = value.param_id
+                Object.keys(value.param_value).forEach(item => {
+                    const name = value.param_value[item].value_desc
+                    const value1 = value.param_value[item]
+
+                    goodsParamExtArray.push({ name: name, value: value1, checked: false, id: keyId })
+                });
+            });
+            formatedFilterOptions.widthType = goodsParamExtArray
+
+        }
+
+        return formatedFilterOptions
+    }
+
+
     // api 得到所有的产品请求
-    goodsSearch({ curr_page = 1, page_count = 10, shop_name = false, shop_id = 1305, config_id = 4, shop_class_id = '', order = '', currPage = 1 }) {
+    goodsSearch({
+        curr_page = this.state.curr_page,
+        page_count = this.state.page_count,
+        shop_name = this.state.shop_name,
+        shop_id = this.state.shop_id,
+        config_id = this.state.config_id,
+        shop_class_id = this.state.shop_class_id,
+        order = this.state.order,
+        currPage = this.state.currPage,
+        goods_class_id = this.state.goods_class_id,
+        goodsSpec = this.state.goodsSpec,
+        goodsParam = this.state.goodsParam,
+        goodsParamExt = this.state.goodsParamExt }) {
         Taro.request({
             url: URL.GoodsSearch,
             method: 'POST',
@@ -126,12 +212,13 @@ class Shop extends Component {
                     config_id: config_id,
                     shop_class_id: shop_class_id,
                     order: order,
-                    currPage: currPage
+                    currPage: currPage,
+                    goods_class_id: goods_class_id,
                 }),
                 goodsRegion: JSON.stringify({}),
-                goodsSpec: JSON.stringify([]),
+                goodsSpec: JSON.stringify(goodsSpec),
-                goodsParam: JSON.stringify([]),
+                goodsParam: JSON.stringify(goodsParam),
-                goodsParamExt: JSON.stringify([]),
+                goodsParamExt: JSON.stringify(goodsParamExt),
             },
             header: {
                 'content-type': 'application/x-www-form-urlencoded',
@@ -139,7 +226,9 @@ class Shop extends Component {
             }
         })
             .then(res => {
-                this.setState({ shopItem: res.data.goods, total: res.data.goodsCount, filterCondition: order })
+                this.setState({ shopItem: res.data.goods, total: res.data.goodsCount, filterCondition: order, isLoading: false }, () => {
+
+                })
 
             })
     }
@@ -195,7 +284,7 @@ class Shop extends Component {
                         each['id'] = item
                         sortedData.push(each)
                     }
-                    console.log('sorteddata', sortedData)
+                    // console.log('sorteddata', sortedData)
                     this.setState({ shopAllInnerCate: sortedData })
 
                 } else {
@@ -299,24 +388,75 @@ class Shop extends Component {
         this.setState({ isShowFilter: !this.state.isShowFilter })
     }
     // 选择侧边筛选的标签
-    selectTag(value) {
+    selectTag(name) {
-        for (let item in this.state.cate) {
+        const id = name.name
-            if (value === item) {
+        console.log('clicked ID', id)
-                this.setState(prevState => ({
+        this.setState({ isLoading: true })
-                    cate: {
+        // 处理分类筛选项
-                        ...prevState.cate,
+        const newMainType = this.state.mainType.map((item) => {
-                        [item]: !this.state.cate[item]
+            if (item.id === id) {
+                item.checked = !item.checked
+                setTimeout(() => {
+                    this.setState({ goods_class_id: id, checkedFilterIdList: this.state.checkedFilterIdList.concat([item]) }, () => {
+                        this.getSearchParams({ goods_class_id: this.state.goods_class_id })
+                        this.goodsSearch({ goods_class_id: this.state.goods_class_id })
+                    })
+                }, 1000);
             }
-                }), () => {
+            return item
-                    this.getSearchParams({ goods_class_id: value, class_filter: 1 })
+        })
+        // 处理商品类型筛选项
+        const newGoodType = this.state.goodType.map((item) => {
+            if (item.id === id) {
+                item.checked = !item.checked
+
+                setTimeout(() => {
+                    this.setState({ goods_type: id, checkedFilterIdList: this.state.checkedFilterIdList.concat([item]) }, () => {
+                        this.getSearchParams({ goods_type: this.state.goods_type })
+                        this.goodsSearch({ goods_type: this.state.goods_type })
+                    })
+
+                }, 1000);
+            }
+            return item
+        })
+        // 处理其他筛选项
+        const newOtherType = this.state.otherType.map(item => {
+            const value = Object.values(item)[0]
+            for (let each in value) {
+                if (value[each].name === id) {
+                    value[each].checked = !value[each].checked
+
+                    setTimeout(() => {
+                        this.setState({ checkedFilterIdList: this.state.checkedFilterIdList.concat(value[each]), goodsParam: [{ param_id: value[each].name.id, param_value: value[each].name }] }, () => {
+                            this.getSearchParams({ goodsParam: this.state.goodsParam })
+                            this.goodsSearch({ goodsParam: this.state.goodsParam })
+                        })
+                    }, 1000);
+                }
+            }
+            return item
+        })
+        // 处理宽度筛选项
+        const newWidthType = this.state.widthType.map((item) => {
+            if (item.name === id) {
+                item.checked = !item.checked
+                setTimeout(() => {
+                    this.setState({ checkedFilterIdList: this.state.checkedFilterIdList.concat(item), goodsParamExt: [{ param_id: item.id, param_ext: [item.value] }] }, () => {
+                        this.getSearchParams({ goodsParamExt: this.state.goodsParamExt })
+                        this.goodsSearch({ goodsParamExt: this.state.goodsParamExt })
+                    })
+                }, 1000);
+            }
+            return item
+        })
+        this.setState({ mainType: newMainType, goodType: newGoodType, widthType: newWidthType, otherType: newOtherType }, () => {
+            // console.log(this.state.mainType)
         })
     }
-        }
-    }
-    handleOnPageChange(value) {
 
+    handleOnPageChange(value) {
         this.setState({ currentPage: value.current })
-        // console.log('currentPage', currentPage ,'condition',this.state.filterCondition)
         this.goodsSearch({ curr_page: value.current, order: this.state.filterCondition })
     }
     showHomePage() {
@@ -326,19 +466,48 @@ class Shop extends Component {
         this.setState({ showShopHomePage: false })
     }
     isShowShopAllCate() {
-        this.setState({ isShowShopAllCate: !this.state.isShowShopAllCate,isBlurWindow:true })
+        this.setState({ isShowShopAllCate: !this.state.isShowShopAllCate, isBlurWindow: true })
 
     }
-    handleShopInnerCate(id){
+    handleShopInnerCate(id) {
         this.setState({
-            isShowShopAllCate: false,isBlurWindow:false
+            isShowShopAllCate: false, isBlurWindow: false
         })
-        this.goodsSearch({shop_class_id:id,shop_id: this.$router.params.id})
+        this.goodsSearch({ shop_class_id: id, shop_id: this.$router.params.id })
 
     }
-    closeBgWindow(){
+    // 确认筛选
+    submitFilter() {
+        this.setState({ isShowFilter: false })
+    }
+
+    //重置按键筛选
+    resetFilterList() {
         this.setState({
-            isShowShopAllCate: false,isBlurWindow:false
+            checkedFilterIdList: [], curr_page: 1,
+            page_count: 10,
+            shop_name: false,
+            shop_id: 1305,
+            config_id: 4,
+            shop_class_id: '',
+            order: '',
+            currPage: 1,
+            goods_class_id: '',
+            goodsSpec: [],
+            goodsParam: [],
+            goodsParamExt: [],
+        }, () => {
+            this.getSearchParams({})
+            this.goodsSearch({})
+        })
+
+
+    }
+
+    // 关闭背景window
+    closeBgWindow() {
+        this.setState({
+            isShowShopAllCate: false, isBlurWindow: false
         })
     }
 
@@ -351,7 +520,7 @@ class Shop extends Component {
         this.getSearchParams({})// 加载筛选项
         this.getShopDescription({ shopID: this.$router.params.id }) // 加载店铺说明
         // this.getSearchBarkeyWords()
-        this.getShopInnerCate({id:this.$router.params.id})
+        this.getShopInnerCate({ id: this.$router.params.id })
     }
 
     componentDidShow() { }
@@ -359,6 +528,11 @@ class Shop extends Component {
     componentDidHide() { }
 
     render() {
+        const loadingElement = <AtToast
+          isOpened={this.state.isLoading}
+          status='loading'
+          text='加载中'
+        ></AtToast>
         const ShopItemElementsArray = this.state.shopItem.length ? this.state.shopItem.map((item, index) => {
             return <View key={index} className='shop-item' >
                 <ShopItem item={item}></ShopItem>
@@ -375,47 +549,66 @@ class Shop extends Component {
                 {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 checkedFilterElementsArray = this.state.checkedFilterIdList.map((item, index) => {
+            return <AtTag style='margin-left:5px' key={index}
+              name={item.id}
+              type='primary'
+              active={item.checked}
+            //onClick={this.selectTag.bind(this)}
+            >{item.name}</AtTag>
+        })
+
+
+
         // 侧边筛选的分类项
-
+        const goodsClassElementsArray = this.state.mainType.map((item, index) => {
-        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)}
+              name={item.id}
               type='primary'
-                active={isTrue}
+              active={item.checked}
-                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>
+            >{item.name}</AtTag>
-        }) : null
+        })
+        // 侧边筛选的商品类型项
+        const goodsTypeElementsArray = this.state.goodType.map((item, index) => {
+            return <AtTag style='margin-left:5px' key={index}
+              name={item.id}
+              type='primary'
+              active={item.checked}
+              onClick={this.selectTag.bind(this)}
+            >{item.name}</AtTag>
+        })
 
         // 侧边筛选的其他项
-        const goodsParamKeyArray = this.state.FilterText.goodsParam ? Object.keys(this.state.FilterText.goodsParam) : null
+        const goodsParamElementsArray = this.state.otherType.map((item, index) => {
-        const goodsParamElementsArray = goodsParamKeyArray ? goodsParamKeyArray.map((key, index) => {
+            let titleKey = Object.keys(item)[0]
-            let object = this.state.FilterText.goodsParam
+            let values = item[titleKey]
-            return <View key={index}><View className='title' >{object[key].param_name}</View>
+            return <View key={index}><View className='title' >{titleKey}</View>
-                <View className='button-box'>
+                {values.map((subItem, subIndex) => {
+                    let name = subItem.name
+                    let isCheck = subItem.checked
+                    return <View className='button-box' key={subIndex}>
                         <AtTag style='margin-left:5px'
-                        name={JSON.stringify(object[key])}
+                          name={name}
                           type='primary'
-                        active={this.state.isActive}
+                          active={isCheck}
                           onClick={this.selectTag.bind(this)}
-                    >{object[key].param_value[0]}</AtTag>
+                        >{name}</AtTag>
                     </View>
+                })}
             </View>
-        }) : null
+        })
 
+        //  侧边筛选宽度选项
+        const widthnessElementsArray = this.state.widthType.map((item, index) => {
+            return <AtTag style='margin-left:5px' key={index}
+              name={item.name}
+              type='primary'
+              active={item.checked}
+              onClick={this.selectTag.bind(this)}
+            >{item.name}</AtTag>
+        })
         // 店铺页面/店铺主页
         const shopHomepageElement = <View className='shop-home-page'>
             <View className='filter-box'>
@@ -432,23 +625,19 @@ class Shop extends Component {
                 {/* 侧边筛选 */}
                 <View className='right'>
                     <View className='filter-box'>
-                        <View className='title'>分类</View>
+                        {this.state.checkedFilterIdList.length ? <View className='title'>已选择</View> : null}
+                        <View className='button-box'>{checkedFilterElementsArray}</View>
+                        {this.state.mainType.length?<View className='title'>分类</View>:null}
                         <View className='button-box'>{goodsClassElementsArray}</View>
-                        <View className='title'>商品类型</View>
+                        {this.state.goodType.length?<View className='title'>商品类型</View>:null}
                         <View className='button-box'>{goodsTypeElementsArray}</View>
                         {goodsParamElementsArray}
-                        <View className='title'>宽度</View>
+                        {this.state.widthType.length?<View className='title'>宽度</View>:null}
-                        <View className='button-box'>
+                        <View className='button-box'>{widthnessElementsArray}</View>
-                            {/* <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:#FF7142' >确认</Button>
+                            <Button className='button' type='primary' size='mini' style='background-color:#FF7142' onClick={this.submitFilter.bind(this)} >确认</Button>
-                            <Button className='button' type='primary' size='mini' style='background-color:#5cb85c'>重置</Button>
+                            <Button className='button' type='primary' size='mini' style='background-color:#5cb85c' onClick={this.resetFilterList.bind(this)}>重置</Button>
                             <View className='gap'></View>
                         </View>
                     </View>
@@ -506,14 +695,14 @@ class Shop extends Component {
         </View>
 
         const shopAllCateElementArray = this.state.shopAllInnerCate.map((item, index) => {
-            return <View key={index} className='item' onClick={this.handleShopInnerCate.bind(this,item.id)}> <Text>{item.n}</Text> </View>
+            return <View key={index} className='item' onClick={this.handleShopInnerCate.bind(this, item.id)}> <Text>{item.n}</Text> </View>
         })
         return (
             <View className='shop'  >
-               
+                {loadingElement}
-                <View onClick={this.state.closeBgWindow.bind(this)} className={this.state.isBlurWindow?'show-blur':''}></View>
+                <View onClick={this.state.closeBgWindow.bind(this)} className={this.state.isBlurWindow ? 'show-blur' : ''}></View>
                 <View className='banner-box'>
-                    <Image src={URL.Base + 'Public/visual_editing/img/ksh_bg.jpg'} mode='scaleToFill'   style='width: 100%;height:120px; '/>
+                    <Image src={URL.Base + 'Public/visual_editing/img/ksh_bg.jpg'} mode='scaleToFill' style='width: 100%;height:120px; ' />
                     <View className='shop-name'>{this.state.shopName}</View>
                 </View>
                 <View className='nav-box'>