mqzheng/cf-wx-app
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

add sidebar filter

Browse Source
This commit is contained in:
郑茂强 2018-12-05 17:30:18 +08:00
parent 57d165ebbf
commit d1d31e00d5
4 changed files with 281 additions and 67 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

108
src/component/sideBarFilterComponent/sideBarFilterComponent.js
View File

@ -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
@ -30,19 +98,19 @@ class sideBarFilterComponent extends Component {
// 分类
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>
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)}
name={item.goods_type_ch_name}
type='primary'
active={this.state.isActive}
onClick={this.onClick.bind(this)}
>{item.goods_type_ch_name}</AtTag>
})
//---------
@ -50,19 +118,15 @@ class sideBarFilterComponent extends Component {
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>
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>
@ -73,10 +137,10 @@ class sideBarFilterComponent extends Component {
<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)}
name={widthness.value_desc}
type='primary'
active={this.state.isActive}
onClick={this.onClick.bind(this)}
>{widthness.value_desc}</AtTag>
</View>

209
src/pages/shop/shop.js
View File

@ -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" })
})
}
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 <View key={index} className='shop-item' >
@ -124,27 +184,70 @@ 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'>
<AtSearchBar className='search-button'
showActionButton
value={this.state.value}
onChange={this.onChange.bind(this)}
onActionClick={this.onActionClick.bind(this)}
/>
showActionButton
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'} style='height:120px' />
@ -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>
<View className={this.state.isShow ? 'side-filter show' :'side-filter'}>
<View className='left' onClick={this.isShowFilter.bind(this)}></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>

22
src/pages/shop/shop.scss
View File

@ -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
}
}
}
}
}

3
src/serviceAPI.config.js
View File

@ -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',// 得到搜索结果
}