cf-wx-app/src/pages/shop/shop.js

import Taro, { Component } from '@tarojs/taro'
import { View, Button, Text, Image } from '@tarojs/components'
import { AtSearchBar, AtTag, AtIcon, AtPagination } 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'
import ShopDescription from '../shopDescription/shopDescription';

class Shop extends Component {
    // 项目配置
    config = {
        navigationBarTitleText: '店铺'
    }
    constructor() {
        super(...arguments)
        this.state = {
            isShopDetailsOn: false, // 是否显示店铺说明页面
            shopItem: [],         // 所有商品
            value: '',           // 搜索框的值   
            shopId: '',          // 店铺的id
            shopName: '',          // 店铺名
            FilterText: '',        // 筛选的可选项  
            filterBar: ['all', 'amount', 'newProduct', 'price', 'popularity'], //筛选选项
            filterBarKeys: { all: '综合排序', amount: '销量', newProduct: '新品', price: '价格', popularity: '人气' }, // 筛选选项对应值
            selectedFilterValue: 0,   //筛选项
            isShowFilter: false,        //是否显示侧边筛选
            showShopHomePage: true,// 是否显示首页页面 
            shopDescriptionData: '',// 店铺详情信息
            shopName: '',//店铺名称
            shopAddress: '',//店铺地址
            contactName: '',//联系人
            contactNumber: '',//联系电话
            shopDescription: '',//店铺简介
            filterOptions: {
                all: true,
                amount: false,
                newProduct: false,
                price: false,
                popularity: false,
            },
            cate: {
                10101: false,// "橱柜"
                10102: false,// "衣柜"
                10106: false,// "装饰柜"
                20101: false,// "定制设计"
                20103: false,// "产品设计"
                30101: false,// "橱柜"
                30102: false,// "衣柜"
            },
            filterCondition: '',// 筛选条件
            total: 0,// 信息条数
            currentPage: 1,// 当前页




        }
    }
    // 搜索栏值的改变方法
    onChange(value) {
        this.setState({
            value: value
        }, () => {
            console.log(this.state.value)
        })
    }
    //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 }) {
        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 })
            })
    }

    // api 得到所有的产品请求
    goodsSearch({ curr_page = 1, page_count = 10, 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 => {
                this.setState({ shopItem: res.data.goods, total: res.data.goodsCount, filterCondition: order })

            })
    }
   
    // api 得到店铺详情请求
    getShopDescription({ shopID = 808 }) {
        Taro.request({
            url: URL.ShopDescription,
            method: 'POST',
            dataType: 'json',
            data: {
                shopID: shopID,
            },
            header: {
                'content-type': 'application/x-www-form-urlencoded',
            }
        })
            .then(res => {
                this.setState({
                    shopDescriptionData: res.data,
                    shopName: res.data.data.shop_name,
                    shopAddress: res.data.data.shop_address,
                    contactName: res.data.userRes.name,
                    contactNumber: res.data.userRes.phone,
                    shopDescription: res.data.data.shop_desc
                }, () => {
                   // console.log(this.state.shopDescriptionData)
                })

            }
            )
    }
   
     // 产品排序
     accendingDescending(value) {
        this.setState({ selectedFilterValue: value })
        if (value == 0) {
            this.setState({
                currentPage: 1,
                filterOptions: {
                    all: true,
                    amount: false,
                    newProduct: false,
                    price: false,
                    popularity: false
                }
            }
            )
            this.goodsSearch({})
        }
        if (value == 1) {
            this.setState({
                currentPage: 1,
                filterOptions: {
                    all: false,
                    amount: !this.state.filterOptions.amount,
                    newProduct: false,
                    price: false,
                    popularity: false
                }
            }, () => {
                this.state.filterOptions.amount ? this.goodsSearch({ order: "g.sales_volume desc" }) : this.goodsSearch({ order: "g.sales_volume" })
            }
            )
        }
        if (value == 2) {
            this.setState({
                currentPage: 1,
                filterOptions: {
                    all: false,
                    amount: false,
                    newProduct: !this.state.filterOptions.newProduct,
                    price: false,
                    popularity: false
                }
            }, () => {
                this.state.filterOptions.newProduct ? this.goodsSearch({ order: "g.create_date desc" }) : this.goodsSearch({ order: "g.create_date" })
            }
            )

        }
        if (value == 3) {

            this.setState({
                currentPage: 1,
                filterOptions: {
                    all: false,
                    amount: false,
                    newProduct: false,
                    price: !this.state.filterOptions.price,
                    popularity: false
                }
            }, () => {
                this.state.filterOptions.price ? this.goodsSearch({ order: "g.goods_price desc" }) : this.goodsSearch({ order: "g.goods_price" })
            }
            )

        }
        if (value == 4) {

            this.setState({
                currentPage: 1,
                filterOptions: {
                    all: false,
                    amount: false,
                    newProduct: false,
                    price: false,
                    popularity: !this.state.filterOptions.popularity
                }
            }, () => {
                this.state.filterOptions.popularity ? 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 })
                })
            }
        }
    }
    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() {
        this.setState({ showShopHomePage: true })
    }
    showDescriptionPage() {
        this.setState({ showShopHomePage: false })
    }


    componentWillMount() {

    }
    componentDidMount() {
        this.setState({ shopId: this.$router.params.id, shopName: this.$router.params.name }) // 输出 { id: 2, type: 'test' }
        //页面加载之后 得到指定店铺的商品 和 筛选标签
        this.goodsSearch({})
        this.getSearchParams({})
        this.getShopDescription({})
        // this.getSearchBarkeyWords()

    }

    componentDidShow() { }

    componentDidHide() { }



    render() {


        const ShopItemElementsArray = this.state.shopItem.length ? this.state.shopItem.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.filterOptions[item]

            return <View key={index} onClick={this.accendingDescending.bind(this, index)} className={index === this.state.selectedFilterValue ? 'filter-title actived' : 'filter-title'}>
                <Text className='text'>
                    {this.state.filterBarKeys[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

        // 店铺页面/店铺主页
        const shopHomepageElement = <View className='shop-home-page'>
            <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>
            <View className='pagination'>

                <AtPagination
                    total={Number(this.state.total)}
                    pageSize={10}
                    current={this.state.currentPage}
                    onPageChange={this.handleOnPageChange.bind(this)}
                >
                </AtPagination>
            </View>
        </View>
        // 店铺详情
        const shopDescriptionElement = <View className='shop-description'>
            <View className='img-box'>
                <Image mode='aspectFill' src={URL.Base + 'Public/images/shop/bg_banner.png'} style='height:150px' />
                <View className='content'>
                    <View className='shop-name'>
                        {this.state.shopName}
                    </View>
                    <View className='shop-address'>
                        {this.state.shopAddress}
                    </View>
                    <View className='contact'>
                        <Text className='contact-name'>联系人:{this.state.contactName}</Text>
                        <Text className='contact-number'>联系电话：{this.state.contactNumber}</Text>
                    </View>
                </View>
            </View>
            <View className='shop-description2'>
                <View className='title'>
                    店铺简介
                </View>
                <View className='description'>
                    <Text className='title-sub'>店铺介绍：</Text>
                    <Text className='detail'>{this.state.shopDescription}</Text>
                </View>

            </View>
            <View className='description-img'>
                <View className='img-box'> <Image mode='aspectFit' src={URL.Base + 'Public/images/shop/bg_banner.png'} style='max-width: 100%; max-height:100%;' /></View>
                <View className='img-box'> <Image mode='aspectFit' src={URL.Base + 'Public/images/shop/bg_banner.png'} style='max-width: 100%;max-height:100%;' /></View>
                <View className='img-box'> <Image mode='aspectFit' src={URL.Base + 'Public/images/shop/bg_banner.png'} style='max-width: 100%;max-height:100%;' /></View>

            </View>


        </View>
        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' onClick={this.showHomePage.bind()}>
                            <Text className='text'>
                                首页
                            </Text>
                        </View>
                        <View className='shoppage-link' onClick={this.showDescriptionPage.bind()}>
                            <Text className='text'>
                                店铺说明
                            </Text>
                        </View>
                    </View>
                </View>
                {/* 显示店铺首页或者店铺详情 */}
                {this.state.showShopHomePage ? shopHomepageElement : shopDescriptionElement}
                <copyrightComponent></copyrightComponent>

                <View className='bottom-nav-box'>
                    <bottomNav otherData={{ menu: [{ name: '首页' }, { name: '分类' }, { name: '购物车' }, { name: '教程软件' }, { name: '更多' }] }} />
                </View>
            </View>
        )
    }
}

export default Shop