add sidebar filter
This commit is contained in:
parent
57d165ebbf
commit
d1d31e00d5
@ -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>
|
||||
|
||||
@ -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([]),
|
||||
@ -59,21 +77,22 @@ class Shop extends Component {
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
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" })
|
||||
})
|
||||
}
|
||||
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.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 <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'>
|
||||
|
||||
</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 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 className='left' onClick={this.isShowFilter.bind(this)}></View>
|
||||
</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>
|
||||
|
||||
@ -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
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@ -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',// 得到搜索结果
|
||||
|
||||
}
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user