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

添加商品页面筛选器

Browse Source
This commit is contained in:
郑茂强 2018-12-28 17:29:42 +08:00
parent 156d9ee407
commit 6084030925
4 changed files with 322 additions and 129 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/pages/allDemanding/allDemanding.js
View File

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

2
src/pages/index/index.js
View File

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

6
src/pages/mySupplyDemand/mySupplyDemand.scss
View File

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

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

@ -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,
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([]),
goodsParam: JSON.stringify([]),
goodsParamExt: JSON.stringify([]),
goodsSpec: JSON.stringify(goodsSpec),
goodsParam: JSON.stringify(goodsParam),
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([]),
goodsParam: JSON.stringify([]),
goodsParamExt: JSON.stringify([]),
goodsSpec: JSON.stringify(goodsSpec),
goodsParam: JSON.stringify(goodsParam),
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) {
for (let item in this.state.cate) {
if (value === item) {
this.setState(prevState => ({
cate: {
...prevState.cate,
[item]: !this.state.cate[item]
selectTag(name) {
const id = name.name
console.log('clicked ID', id)
this.setState({ isLoading: true })
// 处理分类筛选项
const newMainType = this.state.mainType.map((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);
}
}), () => {
this.getSearchParams({ goods_class_id: value, class_filter: 1 })
return item
})
// 处理商品类型筛选项
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() {
@ -336,6 +476,35 @@ class Shop extends Component {
this.goodsSearch({ shop_class_id: id, shop_id: this.$router.params.id })
}
// 确认筛选
submitFilter() {
this.setState({ isShowFilter: false })
}
//重置按键筛选
resetFilterList() {
this.setState({
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
@ -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.FilterText.goods_class ? this.state.FilterText.goods_class.map((item, index) => {
let isTrue = this.state.cate[item.class_id]
const goodsClassElementsArray = this.state.mainType.map((item, index) => {
return <AtTag style='margin-left:5px' key={index}
name={JSON.stringify(item)}
name={item.id}
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}
active={item.checked}
onClick={this.selectTag.bind(this)}
>{object[key].goods_type_ch_name}</AtTag>
}) : null
>{item.name}</AtTag>
})
// 侧边筛选的商品类型项
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 = 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'>
const goodsParamElementsArray = this.state.otherType.map((item, index) => {
let titleKey = Object.keys(item)[0]
let values = item[titleKey]
return <View key={index}><View className='title' >{titleKey}</View>
{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>
<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>
{this.state.widthType.length?<View className='title'>宽度</View>:null}
<View className='button-box'>{widthnessElementsArray}</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:#5cb85c'>重置</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' onClick={this.resetFilterList.bind(this)}>重置</Button>
<View className='gap'></View>
</View>
</View>
@ -510,7 +699,7 @@ class Shop extends Component {
})
return (
<View className='shop' >
{loadingElement}
<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; ' />