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

import Taro, { Component } from '@tarojs/taro'
import { View, Text, Image, Swiper, SwiperItem } from '@tarojs/components'

import { AtTabs, AtTabsPane, AtSegmentedControl, AtIcon, Picker } from 'taro-ui'
import CopyrightComponent from '../../component/copyrightComponent/copyrightComponent'

import LoginService from '../../util/LoginService'
import URL from '../../serviceAPI.config'
import './goods.scss'
import { getGlobalStorage } from '../../util/getSetStoage';
import { showLoading } from '../../util/hideShowLoading';
import onClickValueService from '../../util/onClickValueService'

class Goods extends Component {

    config = {
        navigationBarTitleText: '商品详情'
    }
    constructor() {
        super(...arguments)
        this.state = {
            current: 0, // 当前大类评论区
            subCurrent: 0, // 当前小类评论区
            selector: ['0', '1', '2', '3'], // 数量或者规格选择
            selectorChecked: '0', // 已选择的数量或规格
            productImagesUrl: '', // 图片地址
            productName: '',// 商品名字
            productDes: '',// 商品简介
            oldPirce: '',// 原价
            specialPrice: '',//促销价
            productType: '',//商品类型
            serviceArea: '',//服务区域
            monthSold: '',//月销量
            totalSold: '',//总销量
            browsingCount: '',// 浏览数
            shopId: '',
            actived: 0,// 默认tab
            subActived:0,//默认sub-tab
        }
    }

    // 商品详情api
    getGoodDescription() {
        Taro.request({
            url: URL.GetShopItemDetail,
            method: 'POST',
            dataType: 'json',
            data: {
                goodsID: escape(this.$router.params.id).replace('+', '%2B'),
            },
            header: {
                'content-type': 'application/x-www-form-urlencoded',
                'Cookie': 'PFWSSS=' + getGlobalStorage('session_id'),
            }
        })
            .then(res => {
                Taro.hideLoading()
                console.log('商品详情：', res)
                if (res.data.err_msg === "success") {
                    this.setState({
                        productImagesUrl: res.data.goods.goods_pic,
                        productName: res.data.goods.goods_name,
                        productDes: res.data.goods.goods_profiles,
                        oldPirce: res.data.goods.goods_org_price,
                        specialPrice: res.data.goods.goods_price,
                        productType: res.data.goods.goods_type_name,
                        serviceArea: res.data.goodsRegionName[0],
                        monthSold: res.data.goods.month_sales,
                        totalSold: res.data.goods.sales_volume,
                        browsingCount: res.data.goods.browse_times,
                        shopId: res.data.goods.shop_id
                    })

                } else {
                    Taro.showToast({
                        title: res.data.err_msg,
                        icon: 'none',
                        duration: 1000
                    })
                }
            }
            )
    }

    // 大类评论区方法
    handleClick(value) {
        this.setState({
            current: value
        })
    }
    // 小磊评论区方法
    onClick(value) {
        this.setState({
            subCurrent: value
        })
    }
    // 去其他页面
    goShopPage() {
        Taro.navigateTo({
            url: '/pages/shop/shop?id=' + this.state.shopId
        })
    }
    // 收藏商品
    saveItem() {
        if (!getGlobalStorage('userInfo').user_id) {
            LoginService()
            return
        }
        Taro.showToast({
            title: '收藏成功',
            icon: 'success',
            duration: 1500
        })
    }
    //添加到购物车
    addToCart() {
        if (!getGlobalStorage('userInfo').user_id) {
            LoginService()
            return
        }
        Taro.showToast({
            title: '添加成功',
            icon: 'success',
            duration: 1500
        })

    }
    clickTabHandler(e) {
        let value = onClickValueService(e)
        this.setState({
            actived: value
        })
    }
    clickSubTabHandler(e) {
        let value = onClickValueService(e)
        this.setState({
           subActived: value
        })
    }
    // 数量或者规格方法
    onChange = e => {
        this.setState({
            selectorChecked: this.state.selector[e.detail.value]
        })
    }

    componentDidMount() {
        showLoading({
            title: '加载中'
        })
        this.getGoodDescription()
    }
    componentWillReceiveProps(nextProps) {
        console.log(this.props, nextProps)
    }

    componentWillUnmount() { }

    componentDidShow() { }

    componentDidHide() { }

    render() {
        const { actived,subActived } = this.state
        const mainTabList = [{ title: '宝贝详情' }, { title: '全部评价' }, { title: '猜你喜欢' }]
        const subTabList = [{ title: '全部' }, { title: '好评' }, { title: '中评' }, { title: '差评' }, { title: '公开' }, { title: '匿名' }]
        const tabArrayElement = mainTabList.map((item, index) => {
            return <View className={actived === index ? 'tab actived' : 'tab'} key={index} onClick={this.clickTabHandler.bind(this, index)}>
                {item.title}
            </View>
        })
        const subTabArrayElement = subTabList.map((item, index) => {
            return <View className={subActived === index ? 'sub-tab sub-actived' : 'sub-tab'} key={index} onClick={this.clickSubTabHandler.bind(this, index)}>
                {item.title}
            </View>
        })


        // const subTabList = [{ title: '全部' }, { title: '好评' }, { title: '差评' }, { title: '公开' }, { title: '匿名' }]
        const itemPicsBannerElementArray = this.state.productImagesUrl.map((item, index) => {
            return <SwiperItem key={index} >

                <Image mode='aspectFit' src={URL.Base + item.file_path} style='max-width: 100%; height:100%;' />

            </SwiperItem >
        })

        const itemDescriptionPicsElementArray = this.state.productImagesUrl.map((item, index) => {
            return <View className='description-img' key={index}>
                <Image mode='widthFix' src={URL.Base + item.file_path} style='width: 100%; max-height:100%;' />

            </View>

        })
        return (
            <View className='gooods=container'>
                <View className='img-box'>
                    {/* <Image className='img' src={URL.Base + this.state.productImagesUrl}></Image> */}
                    <Swiper
                        className='swipper'
                        style='height:100%;'
                        indicatorColor='#999'
                        indicatorActiveColor='#333'
                        hotizontal
                        circular
                        indicatorDots
                    >
                        {itemPicsBannerElementArray}

                    </Swiper>

                </View>
                <View className='title-box'>
                    <View className='main-title'>
                        {this.state.productName}
                    </View>
                    <View className='subtitle-box'>
                        {this.state.productDes}
                    </View>
                </View>
                <View className='price-box'>
                    <View className='org-box'>
                        <Text className='title'>原价</Text>
                        <Text className='price'>￥{this.state.oldPirce}</Text>
                    </View>
                    <View className='spe-price'>
                        <Text className='title'>促销价</Text>
                        <Text className='price'>￥{this.state.specialPrice}</Text>
                    </View>
                </View>
                <View className='info-box'>
                    <View className='type'>
                        <Text className='title'>商品类型</Text>
                        <Text className='desc'>{this.state.productType}</Text>

                    </View>
                    <View className='district'>
                        <Text className='title'>服务区域</Text>
                        <Text className='desc'>{this.state.serviceArea}</Text>
                    </View>
                </View>
                <View className='counter-box'>
                    <View className='month-sold'>
                        <Text className='title'>月销量</Text>
                        <Text className='amount'>{this.state.monthSold}</Text>
                    </View>
                    <View className='total-sold'>
                        <Text className='title'>总销量</Text>
                        <Text className='amount'>{this.state.totalSold}</Text>
                    </View>
                    <View className='browsing-amount'>
                        <Text className='title'>浏览量</Text>
                        <Text className='amount'>{this.state.browsingCount}</Text>

                    </View>
                </View>
                <View className='standard-box'>
                    {/* 规格或者数量  */}
                    <Picker mode='selector' range={this.state.selector} onChange={this.onChange}>
                        <View className='picker'>
                            <View className='title'>
                                可选规格:
                    </View>
                            <View className='more'>
                                {this.state.selectorChecked}
                            </View>

                        </View>
                    </Picker>
                </View>
                {/* 详情和评论区 */}
                <View className='tab-wrapper'>
                <View className='tabs'>
                    {tabArrayElement}
                    
                </View>
                <View className='tab-details'>
                    {actived === 0 && <View className='first-tab' style='background-color: #FAFBFC;' >

                        <View className='description-title'>商品细节：</View>
                        <View className='description-img'>
                            {itemDescriptionPicsElementArray}

                        </View>

                    </View>
                    }
                    {actived===1&& <View className='second-tab'>
                    <View className='tab-header'> {subTabArrayElement}</View>
                    
                    
                     {
                        subActived===0&&<View className='sub-tab-details'>全部</View>
                    }
                    {
                        subActived===1&&<View className='sub-tab-details'>好评</View>
                    }
                    {
                        subActived===2&&<View className='sub-tab-details'>中评</View>
                    }
                    {
                        subActived===3&&<View className='sub-tab-details'>差评</View>
                    }
                    {
                        subActived===4&&<View className='sub-tab-details'>公开</View>
                    }
                    {
                        subActived===5&&<View className='sub-tab-details'>匿名</View>
                    }
                   
                     
                    
                    
                    </View>}
                    {actived === 2 && <View className='third-tab' >标签页三的内容</View>}
                </View>
                </View>
               

                <CopyrightComponent></CopyrightComponent>
                <View className='gap' style='height:150rpx'>
                </View>

                <View className='shop-bottom-box' >
                    <View className='shop-bottom-nav'>
                        <View className='to-shop' onClick={this.goShopPage.bind(this)}>
                            <AtIcon className='icon' value='home' size='12' color='black'></AtIcon>
                            <Text className='title'>进店</Text>
                        </View>
                        <View className='collection' onClick={this.saveItem.bind(this)}>
                            <AtIcon className='icon' value='heart' size='12' color='white'></AtIcon>

                            <Text className='title'>收藏商品</Text>
                        </View>
                        <View className='add-cart' onClick={this.addToCart.bind(this)}>

                            <AtIcon className='icon' value='shopping-cart' size='12' color='white'></AtIcon>



                            <Text className='title'> 加入购物车</Text>
                        </View>
                    </View>

                </View>
            </View >
        )
    }
}

export default Goods