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

import Taro, { Component } from '@tarojs/taro'
import { View, Button, Text, Image, Map } from '@tarojs/components'
import { AtTag, AtIcon, } from 'taro-ui'
import URL from '../../serviceAPI.config'


import ShopTypeInteractionComp from '../../component/shopTypeInteractionComp/shopTypeInteractionComp'
import ScrollToTopComponent from '../../component/scrollToTopComponent/scrollToTopComponent'

import './shop.scss'
import ShopItem from '../../component/shopItemComponent/shopItemComponent'
//import BottomNav from '../../component/bottomNav/bottomNav'
import CopyrightComponent from '../../component/copyrightComponent/copyrightComponent'

const locationIcon = require('../../assets/img/location.png')

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,
            },
            filterCondition: '',// 筛选条件
            mainType: [],// 侧边筛选分类
            goodType: [],//侧边商品类型
            otherType: [],//侧边其他类型
            widthType: [],// 侧边宽度类型
            checkedFilterIdList: [],//已选的筛选id
            isAddToList: false,// 请求店铺商品的时候是否添加到旧列表里
            loadMorePageIndex: 1,//上拉加载页面数
            isShowTopNav: false,// 是否显示返回顶部按钮

            // 下面是函数的默认参数
            curr_page: 1,
            page_count: 10,
            shop_name: false,
            shop_id: this.$router.params.id,
            config_id: 4,
            shop_class_id: '',
            order: '',
            goods_class_id: '',
            class_filter: '',
            goods_type: '',
            goodsSpec: [],
            goodsParam: [],
            goodsParamExt: [],
            // 地图的经度和维度
            longitude: '',
            latitude: '',


        }
    }

    // api 得到筛选的标签请求
    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',
            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,
                    goods_type: goods_type,

                }),
                goodsSpec: JSON.stringify(goodsSpec),
                goodsParam: JSON.stringify(goodsParam),
                goodsParamExt: JSON.stringify(goodsParamExt),

            },
            header: {
                'content-type': 'application/x-www-form-urlencoded',
                'X-Requested-With': 'XMLHttpRequest',
                'Cookie': 'PFWSSS=' + Taro.getStorageSync('session_id'),
            }
        })
            .then(res => {
                if (res.statusCode === 200) {
                    console.log('筛选项目成功', res)
                    Taro.hideLoading()
                    this.formatFilterData(res.data).then(data => {
                        console.log('data', data)

                        this.setState({
                            sideFilterdata: data,
                            mainType: data.mainType,
                            goodType: data.goodType,
                            otherType: data.otherType,
                            widthType: data.widthType,
                        })



                        console.log('formated data', data)
                    })
                } else {
                    console.log('筛选项目获取失败')
                }



            })
    }

    async formatFilterData(data) {
        const formatedFilterOptions = {}
        //侧边筛选分类
        if (data.goods_class) {
            let typeArray = []
            // 如果后台返回的筛选项有和checkedFilterIdList重叠的 就不显示.
            if (this.state.checkedFilterIdList.length) {
                data.goods_class.forEach(item => {
                    this.state.checkedFilterIdList.forEach((checkedItem) => {
                        if (checkedItem.id !== item.class_id) {
                            typeArray.push({ id: item.class_id, name: item.class_name, checked: false })
                        }
                    })
                });
            } else {
                data.goods_class.forEach(item => {
                    typeArray.push({ id: item.class_id, name: item.class_name, checked: false })
                }
                )
            }


            formatedFilterOptions.mainType = typeArray
        } else {
            formatedFilterOptions.mainType = []
        }
        //侧边筛选商品类型
        if (data.goods_type) {
            // console.log('数据',data.goods_type)
            let goodTypeArray = []
            Object.keys(data.goods_type).forEach(key => {
                if (data.goods_type[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
        } else {
            formatedFilterOptions.goodType = []

        }
        //侧边筛选其他类型
        if (data.goodsParam) {
            let goodsParamArray = []

            Object.keys(data.goodsParam).forEach(key => {
                if (data.goodsParam[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
        }
        else {
            formatedFilterOptions.otherType = []

        }
        //侧边筛选宽度类型
        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

        } else {
            formatedFilterOptions.widthType = []
        }

        return formatedFilterOptions
    }


    // api 得到所有的产品请求
    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,
        goods_class_id = this.state.goods_class_id,
        currPage = '', // 不知道为什么筛选的时候要加 加这个参数为1
        goodsSpec = this.state.goodsSpec,
        goodsParam = this.state.goodsParam,
        goodsParamExt = this.state.goodsParamExt }) {
        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,
                    goods_class_id: goods_class_id,
                    currPage: currPage
                }),
                goodsRegion: JSON.stringify({}),
                goodsSpec: JSON.stringify(goodsSpec),
                goodsParam: JSON.stringify(goodsParam),
                goodsParamExt: JSON.stringify(goodsParamExt),
            },
            header: {
                // 'content-type': 'application/x-www-form-urlencoded',
                // 'X-Requested-With': 'XMLHttpRequest'
                'content-type': 'application/x-www-form-urlencoded',
                'Cookie': 'PFWSSS=' + Taro.getStorageSync('session_id'),
                'X-Requested-With': 'XMLHttpRequest'
            }
        })
            .then(res => {
                console.log('searchGood', res)
                Taro.hideLoading()
                if (res.data.goods && res.data.goods.length) {
                    if (this.state.isAddToList) {
                        this.setState({
                            shopItem: this.state.shopItem.concat(res.data.goods)
                        }, () => {
                            this.setState({ isAddToList: false })
                        })
                    } else {
                        this.setState({ shopItem: res.data.goods, filterCondition: order })
                    }
                } else {
                    if (this.state.isAddToList) {
                        Taro.showToast({
                            title: '没有更多了',
                            icon: 'none'
                        })
                    } else {
                        this.setState({ shopItem: res.data.goods })
                    }


                }
                this.setState({ isAddToList: false })

            })
    }

    // api 得到店铺详情请求
    getShopDescription({ shopID = this.state.shop_id }) {
        Taro.request({
            url: URL.ShopDescription,
            method: 'POST',
            dataType: 'json',
            data: {
                shopID: shopID,
            },
            header: {
                'content-type': 'application/x-www-form-urlencoded',
                'Cookie': 'PFWSSS=' + Taro.getStorageSync('session_id'),
            }
        })
            .then(res => {
                Taro.hideLoading()

                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,
                    latitude: res.data.data.shop_map.split(',')[1],
                    longitude: res.data.data.shop_map.split(',')[0],

                }, () => {
                    // console.log(this.state.shopDescriptionData)
                })

            }
            )
    }

    getDataFromShopChild(value) {
        console.log('从子组件店铺分类传回来的值', value)
        this.setState({ shop_class_id: value.id }, () => {
            this.goodsSearch({})
        })

    }



    // 产品排序
    accendingDescending(value) {
        Taro.showLoading({ title: '加载中' })
        this.setState({ selectedFilterValue: value })
        if (value == 0) {
            this.setState({
                filterOptions: {
                    all: true,
                    amount: false,
                    newProduct: false,
                    price: false,
                    popularity: false
                },
                curr_page: 1,
                page_count: 10,
                shop_name: false,
                config_id: 4,
                shop_class_id: '',
                order: '',
                goods_class_id: '',
                goodsSpec: [],
                goodsParam: [],
                goodsParamExt: [],
            }, () => {
                this.goodsSearch({})
            }
            )

        }
        if (value == 1) {
            this.setState({

                filterOptions: {
                    all: false,
                    amount: !this.state.filterOptions.amount,
                    newProduct: false,
                    price: false,
                    popularity: false
                }
            }, () => {
                this.state.filterOptions.amount ? this.goodsSearch({ currPage: 1, order: "g.sales_volume desc" }) : this.goodsSearch({ currPage: 1, order: "g.sales_volume" })
            }
            )
        }
        if (value == 2) {
            this.setState({

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

        }
        if (value == 3) {

            this.setState({

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

        }
        if (value == 4) {

            this.setState({

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

            }
            )

        }
    }
    // 是否显示侧边筛选
    showAndHideFilter() {
        this.setState({ isShowFilter: !this.state.isShowFilter })
    }
    // 选择侧边筛选的标签
    selectTag(name) {
        const id = name.name
        Taro.showLoading({ title: '加载中' })
        // 处理分类筛选项
        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);
            }
            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, loadMorePageIndex: 1, goodType: newGoodType, widthType: newWidthType, otherType: newOtherType }, () => {
            // console.log(this.state.mainType)
        })
    }

    handleOnPageChange(value) {
        Taro.showLoading({ title: '加载中' })
        this.goodsSearch({ curr_page: value.current, order: this.state.filterCondition })
    }
    showHomePage() {
        this.setState({ showShopHomePage: true })
    }
    showDescriptionPage() {
        this.setState({ showShopHomePage: false })
    }

    // 确认筛选
    submitFilter() {
        this.setState({ isShowFilter: false })
    }

    //重置按键筛选
    resetFilterList() {

        Taro.showLoading({ title: '加载中' })
        this.setState({
            checkedFilterIdList: [],
            curr_page: 1,
            page_count: 10,
            shop_name: false,
            config_id: 4,
            shop_class_id: '',
            order: '',
            curr_page: 1,
            goods_class_id: '',
            class_filter: '',
            goods_type: '',
            goodsSpec: [],
            goodsParam: [],
            goodsParamExt: [],
        }, () => {
            this.getSearchParams({})
            this.goodsSearch({})
        })


    }
    openNavMap() {
        Taro.openLocation({
            latitude: Number(this.state.latitude),
            longitude: Number(this.state.longitude),
            name: this.state.shopAddress,

        })
    }
    componentDidMount() {
        Taro.showLoading({ title: '加载中' })
        //页面加载之后 得到指定店铺的商品 和 筛选标签
        this.goodsSearch({}) // 加载店铺商品
        this.getSearchParams({})// 加载筛选项
        this.getShopDescription({}) // 加载店铺说明
    }

    componentDidShow() { }

    componentDidHide() { }

    // 底部加载
    onReachBottom() {
        Taro.showLoading({
            title: '加载中'
        })
        this.setState({ isAddToList: true, loadMorePageIndex: this.state.loadMorePageIndex + 1 }, () => {
            this.goodsSearch({ curr_page: this.state.loadMorePageIndex })
        })

    }
    // 页面位置
    onPageScroll(location) {
        if (location.scrollTop <= 300 && this.state.isShowTopNav) {
            this.setState({ isShowTopNav: false })
        } else if (location.scrollTop > 300 && !this.state.isShowTopNav) {
            this.setState({ isShowTopNav: true })
        }
    }
    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 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.mainType.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 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 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={name}
                            type='primary'
                            active={isCheck}
                            onClick={this.selectTag.bind(this)}
                        >{name}</AtTag>
                    </View>
                })}
            </View>
        })

        //  侧边筛选宽度选项
        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'>
                {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'>
                        {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>
                        {this.state.goodType.length ? <View className='title'>商品类型</View> : null}
                        <View className='button-box'>{goodsTypeElementsArray}</View>
                        {goodsParamElementsArray}
                        {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' 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>
                </View>

            </View>
            {/* 店铺的商品列表 */}
            <View className='container'>
                {this.state.shopItem.length ? ShopItemElementsArray : <View className='no-more-title'> 没有更多了</View>}
            </View>

        </View>
        // 店铺详情
        const shopDescriptionElement = <View className='shop-description'>
            <View className='img-box'>
                <Image src={URL.Base + 'Public/images/shop/bg_banner.png'} mode='scaleToFill' style='width: 100%;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> */}
            {/* location.png */}
            <Map
                id='map'
                longitude={this.state.longitude}
                latitude={this.state.latitude}
                scale='14'
                controls='{{controls}}'
                bindcontroltap='controltap'
                markers={[{
                    iconPath: locationIcon,
                    id: 0,
                    latitude: this.state.latitude,
                    longitude: this.state.longitude,
                    width: 30,
                    height: 30
                }]}
                bindmarkertap='markertap'
                polyline='{{polyline}}'
                bindregionchange='regionchange'
                show-location
                style='width: 100%; height: 300px;'
            ></Map>
            <View className='button-box'>
                <Button className='button-blue' onClick={this.openNavMap.bind(this)}>打开地图</Button>
            </View>

            {/* <Map
              id='map'
              longitude={this.state.longitude}
              latitude={this.state.latitude}
              scale='14'
              controls='{{controls}}'
              bindcontroltap='controltap'
              markers='{{markers}}'
              bindmarkertap='markertap'
              polyline='{{polyline}}'
              bindregionchange='regionchange'
              show-location
              style='width: 100%; height: 300px;'
            ></Map> */}
        </View>


        return (
            <View className='shop'  >

                <View className='banner-box'>
                    <Image src={URL.Base + 'Public/visual_editing/img/ksh_bg.jpg'} mode='scaleToFill' style='width: 100%;height:120px; ' />
                    <View className='shop-name'>{this.state.shopName}</View>
                </View>
                <View className='nav-box'>
                    <View className='nav'>
                        <View className='shop-cate'>
                            <View>
                                <ShopTypeInteractionComp url={URL.GetShopCategoryList} style='position:absolute;z-index:2;opacity:0;left:0'
                                    shopId={this.state.shop_id}
                                    onPassDataToChild={this.getDataFromShopChild.bind(this)}
                                ></ShopTypeInteractionComp>
                            </View>
                            <View className='interactive' onClick={this.showPopUp.bind(this)}>
                                <Text className='text'>
                                    店铺全部分类
                                </Text>
                                <AtIcon value='menu' size='10' color='white'></AtIcon>
                            </View>
                        </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}
                {this.state.isShowTopNav ? <ScrollToTopComponent ></ScrollToTopComponent> : null}
                <CopyrightComponent></CopyrightComponent>

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

export default Shop