352 lines
14 KiB
JavaScript
352 lines
14 KiB
JavaScript
import Taro, { Component } from '@tarojs/taro'
|
|
import { View, Button, Text, Image } from '@tarojs/components'
|
|
import { AtSearchBar, AtTag, AtIcon } from 'taro-ui'
|
|
import URL from '../../serviceAPI.config'
|
|
|
|
import './shop.scss'
|
|
import ShopItem from '../../component/shopItemComponent/shopItemComponent'
|
|
import bottomNav from '../../component/bottomNav/bottomNav'
|
|
import copyrightComponent from '../../component/copyrightComponent/copyrightComponent'
|
|
|
|
class Shop extends Component {
|
|
// 项目配置
|
|
config = {
|
|
navigationBarTitleText: '店铺'
|
|
}
|
|
constructor() {
|
|
super(...arguments)
|
|
this.state = {
|
|
isShopDetailsOn:false, // 是否显示店铺说明页面
|
|
shopItem:'', // 所有商品
|
|
value: '', // 搜索框的值
|
|
shopId:'', // 店铺的id
|
|
shopName:'', // 店铺名
|
|
FilterText:'', // 筛选的可选项
|
|
filterBar:['综合排序','销量','新品','价格','人气'],
|
|
selectedFilterValue:0, //筛选项
|
|
isShowFilter:false, //是否显示侧边筛选
|
|
综合排序:true,
|
|
销量:false,
|
|
新品:false,
|
|
价格:false,
|
|
人气:false,
|
|
cate:{
|
|
10101: false,// "橱柜"
|
|
10102: false,// "衣柜"
|
|
10106: false,// "装饰柜"
|
|
20101: false,// "定制设计"
|
|
20103: false,// "产品设计"
|
|
30101: false,// "橱柜"
|
|
30102: false,// "衣柜"
|
|
}
|
|
|
|
}
|
|
}
|
|
// 搜索栏值的改变方法
|
|
onChange(value) {
|
|
|
|
this.setState({
|
|
value: value
|
|
},()=>{
|
|
console.log(this.state.value)
|
|
})
|
|
}
|
|
// 搜索栏的方法
|
|
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)
|
|
})
|
|
|
|
}
|
|
|
|
// 得到筛选的标签
|
|
getSearchParams({shop_name = false, shop_id = 1305, shop_class_id = "", goods_class_id=0,class_filter=0}){
|
|
Taro.request({
|
|
url: URL.GetSearchParam,
|
|
method: 'POST',
|
|
dataType: 'json',
|
|
data: {
|
|
goods: JSON.stringify({
|
|
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([]),
|
|
|
|
},
|
|
header: {
|
|
'content-type': 'application/x-www-form-urlencoded',
|
|
'X-Requested-With': 'XMLHttpRequest'
|
|
}
|
|
})
|
|
.then(res => {
|
|
this.setState({ FilterText: res.data })
|
|
})
|
|
}
|
|
|
|
// 得到所有的产品
|
|
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: 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([]),
|
|
goodsParam: JSON.stringify([]),
|
|
goodsParamExt: JSON.stringify([]),
|
|
|
|
},
|
|
header: {
|
|
'content-type': 'application/x-www-form-urlencoded',
|
|
'X-Requested-With':'XMLHttpRequest'
|
|
}
|
|
})
|
|
.then(res => {
|
|
// console.log(res)
|
|
this.setState({ shopItem:res.data})
|
|
})
|
|
}
|
|
// 产品排序
|
|
accendingDescending(value){
|
|
this.setState({selectedFilterValue:value})
|
|
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})
|
|
})
|
|
}
|
|
}
|
|
}
|
|
|
|
componentWillMount() {
|
|
this.setState({ shopId: this.$router.params.id, shopName: this.$router.params.name}) // 输出 { id: 2, type: 'test' }
|
|
}
|
|
componentDidMount(){
|
|
//页面加载之后 得到指定店铺的商品 和 筛选标签
|
|
this.goodsSearch({})
|
|
this.getSearchParams({})
|
|
// this.getSearchBarkeyWords()
|
|
}
|
|
|
|
componentDidShow() { }
|
|
|
|
componentDidHide() { }
|
|
|
|
render() {
|
|
// const shopName= this.state.shopName
|
|
const ShopItemElementsArray =this.state.shopItem? this.state.shopItem.goods.map((item,index)=>{
|
|
return <View key={index} className='shop-item' >
|
|
<ShopItem item={item}></ShopItem>
|
|
</View>
|
|
}):null
|
|
|
|
const filterElementsArray=this.state.filterBar.map((item,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>
|
|
{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 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>
|
|
}):null
|
|
|
|
// 侧边筛选的其他项
|
|
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'>
|
|
<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'
|
|
actionName='搜索'
|
|
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'} mode='aspectFill' style='height:120px' />
|
|
{/* <View className='shop-name'>{shopName}</View> */}
|
|
</View>
|
|
<View className='nav-box'>
|
|
<View className='nav'>
|
|
<View className='shop-cate'>
|
|
<Text className='text'>
|
|
店铺全部分类
|
|
</Text>
|
|
<AtIcon value='menu' size='10' color='white'></AtIcon>
|
|
|
|
</View>
|
|
<View className='homepage-link'>
|
|
<Text className='text'>
|
|
首页
|
|
</Text>
|
|
</View>
|
|
<View className='shoppage-link'>
|
|
<Text className='text'>
|
|
店铺说明
|
|
</Text>
|
|
</View>
|
|
</View>
|
|
</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.isShowFilter ? 'side-filter show' :'side-filter'}>
|
|
<View className='left' onClick={this.showAndHideFilter.bind(this)}></View>
|
|
{/* 侧边筛选 */}
|
|
<View className='right'>
|
|
<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 className='gap'></View>
|
|
</View>
|
|
</View>
|
|
</View>
|
|
|
|
</View>
|
|
{/* 店铺的商品列表 */}
|
|
<View className='container'>
|
|
{ShopItemElementsArray}
|
|
|
|
</View>
|
|
<copyrightComponent></copyrightComponent>
|
|
|
|
<View className='bottom-nav-box'>
|
|
<bottomNav otherData={{menu:[{ name: '首页' }, { name: '分类' }, { name: '购物车' }, { name: '教程软件' }, { name:'更多'}]}} />
|
|
</View>
|
|
</View>
|
|
)
|
|
}
|
|
}
|
|
|
|
export default Shop
|