diff --git a/src/component/sideBarFilterComponent/sideBarFilterComponent.js b/src/component/sideBarFilterComponent/sideBarFilterComponent.js index e7dae8f..f5c2bae 100644 --- a/src/component/sideBarFilterComponent/sideBarFilterComponent.js +++ b/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,8 +21,75 @@ 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 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 @@ -30,19 +98,19 @@ class sideBarFilterComponent extends Component { // 分类 const goodsClassElementsArray=goodsClass.map((item,index)=>{ return {item.class_name} + name={item.class_name} + type='primary' + active={this.state.isActive} + onClick={this.onClick.bind(this)} + >{item.class_name} }) // 商品类型 const goodsTypeElementsArray=goodsType.map((item,index)=>{ return {item.goods_type_ch_name} }) //--------- @@ -50,19 +118,15 @@ class sideBarFilterComponent extends Component { return {item.param_name} {item.param_value[0]} - + name={item.param_value[0]} + type='primary' + active={this.state.isActive} + onClick={this.onClick.bind(this)} + >{item.param_value[0]} }) // 宽度 - - - return ( 分类 @@ -73,10 +137,10 @@ class sideBarFilterComponent extends Component { 宽度 {widthness.value_desc} diff --git a/src/pages/shop/shop.js b/src/pages/shop/shop.js index fd74fb7..fe7a36d 100644 --- a/src/pages/shop/shop.js +++ b/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_id: 808, - shop_class_id: "" }), - + 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([]), @@ -58,22 +76,23 @@ class Shop extends Component { this.setState({ FilterText: res.data }) }) } - - - getShopInfo() { + + // get goods info + 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, - page_count: 50, - shop_name: false, - shop_id: 1305, - config_id: 4, - shop_class_id: '' - + 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([]), @@ -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 === sideFilter){ - this.setState({ isShow:true}) - } + 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" }) + }) } - isShowFilter(){ - this.setState({ isShow: false }) + 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 }) + }) + } + } } componentWillMount() { this.setState({ shopId: this.$router.params.id, shopName: this.$router.params.name}) // 输出 { id: 2, type: 'test' } } componentDidMount(){ - this.getShopInfo() - this.getSearchParams() + this.goodsSearch({}) + 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 @@ -124,27 +184,70 @@ class Shop extends Component { }):null const filterElementsArray=this.state.filterBar.map((item,index)=>{ - return + let isTure=this.state[item] + return {item} - - - - + {index!==0&&index!==5&&(isTure? : )} }) + + + // 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 {item.class_name} + }):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 {object[key].goods_type_ch_name} + // }):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 {object[key].param_name} + // + // {object[key].param_value[0]} + // + // + // }):null + + return ( + showActionButton + value={this.state.value} + onChange={this.onChange.bind(this)} + onActionClick={this.onActionClick.bind(this)} + /> @@ -172,11 +275,37 @@ class Shop extends Component { {filterElementsArray} + + + 筛选 + + + - - + + + {/* sidebar 筛选 */} - + + 分类 + {goodsClassElementsArray} + 商品类型 + {goodsTypeElementsArray} + {goodsParamElementsArray} + 宽度 + + {/* {widthness.value_desc} */} + + + + + + diff --git a/src/pages/shop/shop.scss b/src/pages/shop/shop.scss index 79be805..5b88075 100644 --- a/src/pages/shop/shop.scss +++ b/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 + } + } + } } } diff --git a/src/serviceAPI.config.js b/src/serviceAPI.config.js index b97f7f0..9c5a00e 100644 --- a/src/serviceAPI.config.js +++ b/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',// 得到搜索结果 }