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

import Taro, { Component } from '@tarojs/taro'
import { View, Button, Text, Image } from '@tarojs/components'
import { AtSearchBar, AtTabs, AtTabsPane,AtSegmentedControl } from 'taro-ui'
import copyrightComponent from '../../component/copyrightComponent/copyrightComponent'



import './goods.scss'



class Goods extends Component {

    config = {
        navigationBarTitleText: '商品'
    }
    constructor() {
        super(...arguments)
        this.state = {
            value:'',
            current: 0,
            subCurrent:0,
        }}

   

    handleClick(value) {
        this.setState({
            current: value
        })
    }
    subHandleClick(value) {
        this.setState({
            subCurrent: value
        })
    }

    componentDidMount() {
       
    }
    componentWillReceiveProps(nextProps) {
        console.log(this.props, nextProps)
    }

    componentWillUnmount() { }

    componentDidShow() { }

    componentDidHide() { }

    render() {
        const mainTabList = [{ title: '宝贝详情' }, { title: '全部评价' }, { title: '猜你喜欢' }]
        const subTabList = [{ title: '全部' }, { title: '好评' }, { title: '差评' }, { title: '公开' }, { title: '匿名' }]

        return (
            <View className='gooods=container'>
                <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='img-box'>
                        <Image  className='img' src='http://192.168.1.230/Uploads/zone/user_1041/201808/thumb/e10a0bfea09a3078a800af8054bc80ce_400X400.jpg'></Image>
  
                </View>
                <View className='title-box'>
                    <View className='main-title'>
                    11
                    </View>
                    <View className='subtitle-box'>
                    11
                    </View>
                </View>
                <View className='price-box'>
                    <View className='org-box'>
                        <Text className='title'>原价</Text>
                        <Text className='price'>￥11</Text>
                    </View>
                    <View className='spe-price'>
                        <Text className='title'>促销价</Text>
                        <Text className='price'>￥11</Text>
                    </View>
                </View>
                <View className='info-box'>
                    <View className='type'>
                        <Text className='title'>商品类型</Text>
                        <Text className='desc'>设计师商品</Text>

                    </View>
                    <View className='district'>
                        <Text className='title'>服务区域</Text>
                        <Text className='desc'>中国/福建省(全省)</Text>
                    </View>
                </View>
                <View className='counter-box'>
                    <View className='month-sold'>
                        <Text className='title'>月销量</Text>
                        <Text className='amount'>0</Text>
                    </View>
                    <View className='total-sold'>
                        <Text className='title'>总销量</Text>
                        <Text className='amount'>0</Text>
                    </View>
                    <View className='browsing-amount'>
                        <Text className='title'>浏览量</Text>
                        <Text className='amount'>13</Text>

                    </View>
                </View>
                <View className='standard-box'>
                    <View className='title'>
                        可选规格
                    </View>
                    <View className='more'>
                        >点击
                    </View>
                </View>
                <View className='details-box'>
                    <AtTabs  color='green' current={this.state.current} tabList={mainTabList} onClick={this.handleClick.bind(this)}>
                        <AtTabsPane current={this.state.current} index={0} >
                            <View style='padding: 100px 50px;background-color: #FAFBFC;text-align: center;' >标签页一的内容</View>
                        </AtTabsPane>
                        <AtTabsPane current={this.state.current} index={1}>
                            <View style='padding: 1px 0px 100px;background-color: #FAFBFC;text-align: center;'>
                               { /*子标签Tab*/}
                                <AtSegmentedControl
                                  values={['全部', '好评', '中评', '差评', '公开','匿名']}
                                  onClick={this.subHandleClick.bind(this)}
                                  current={this.state.subCurrent}
                                />
                                {
                                    this.state.current === 0
                                        ? <View className='tab-content'>标签1的内容</View>
                                        : null
                                }
                                {
                                    this.state.current === 1
                                        ? <View className='tab-content'>标签2的内容</View>
                                        : null
                                }
                                {
                                    this.state.current === 2
                                        ? <View className='tab-content'>标签3的内容</View>
                                        : null
                                }
                                {
                                    this.state.current === 3
                                        ? <View className='tab-content'>标签4的内容</View>
                                        : null
                                }
                                {
                                    this.state.current === 4
                                        ? <View className='tab-content'>标签5的内容</View>
                                        : null
                                }
                                {
                                    this.state.current === 5
                                        ? <View className='tab-content'>标签6的内容</View>
                                        : null
                                }
                            
                            </View>
                        </AtTabsPane>
                        <AtTabsPane current={this.state.current} index={2}>
                            <View style='padding: 100px 50px;background-color: #FAFBFC;text-align: center;'>标签页三的内容</View>
                        </AtTabsPane>
                    </AtTabs>
                    
                  </View>

                <copyrightComponent></copyrightComponent>

                <View className='shop-bottom-box' >
                    <View className='shop-bottom-nav'>
                        <View className='to-shop'>
                            进店
                        </View>
                        <View className='collection'>
                            收藏商品
                        </View>
                        <View className='add-cart'>
                            加入购物车
                        </View>
                    </View>

                </View>


            </View>
        )
    }
}

export default Goods