cf-wx-app/src/component/interaction/interaction.js

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

import { AtTabBar, Picker, AtButton } from 'taro-ui'
import URL from '../../serviceAPI.config'

import './interaction.scss'

class Interaction extends Component {

    config = {
        navigationBarTitleText: 'bottomNav'
    }
    constructor() {
        super(...arguments);

        this.state = {
            ///---行业分类 开始
            objectMultiArray: [],
            multiIndex: [0, 0],
            formatInWindow: [],
            ///---行业分类 结束

        }

    }


    // 第一种formate 用于底部弹层滚动时的数据
    formatIndustryType(data) {
        const newIndustryType = []
        for (let outter of data) {
            let outterObject = { name: outter.class_name, id: outter.class_id, child: [] }
            if (outter.child.length) {
                for (let inner of outter.child) {
                    outterObject.child.push({ name: inner.class_name, id: inner.class_id })
                }
            } else {
                outterObject.child.push({ name: '', id: '' })
            }
            newIndustryType.push(outterObject)
        }
        this.setState({ formatInWindow: newIndustryType })
        // console.log('newIndustryType1', newIndustryType)

    }
    //第二种format 用于底部弹层的初始化数据
    formatIndustryTypei(data) {
        const firstArray = []
        const secondArray = []
        for (let outter of data) {
            firstArray.push({ name: outter.class_name, id: outter.class_id })
            if (outter.child.length) {
                for (let inner of outter.child) {
                    secondArray.push({ name: inner.class_name, id: inner.class_id })
                }
            }
        }
        this.setState({ objectMultiArray: [firstArray, secondArray] }, () => {
            // console.log('newIndustryType2', this.state.objectMultiArray)
        })

    }
    //--------------------开始-行业分类picker
    bindMultiPickerChange(e) {
        //判断如果formatInWindow 的子类为空 那就取父类， 反之取子类
        let industryTypeSelected
        if (this.state.formatInWindow[e.detail.value[0]].child[e.detail.value[1]].id === '') {
            industryTypeSelected = this.state.formatInWindow[e.detail.value[0]]
        } else {
            industryTypeSelected = this.state.formatInWindow[e.detail.value[0]].child[e.detail.value[1]]
        }

        console.log('picker发送选择改变，携带值为', e.detail.value)
        
        this.setState({
            multiIndex: e.detail.value,
        },()=>{
            this.passDataToParent(industryTypeSelected)
        })

    }
    bindMulPickerColChge(e) {
        console.log('修改的列为', e.detail.column, '，值为', e.detail.value)
        const data = {
            objectMultiArray: this.state.objectMultiArray,
            multiIndex: this.state.multiIndex
        }
        data.multiIndex[e.detail.column] = e.detail.value
        switch (e.detail.column) {
            case 0:
                switch (data.multiIndex[0]) {
                    case 0:
                        data.objectMultiArray[1] = this.state.formatInWindow[0].child
                        break
                    case 1:
                        data.objectMultiArray[1] = this.state.formatInWindow[1].child
                        break
                    case 2:
                        data.objectMultiArray[1] = this.state.formatInWindow[2].child
                        break
                    case 3:
                        data.objectMultiArray[1] = this.state.formatInWindow[3].child
                        break
                    case 4:
                        data.objectMultiArray[1] = this.state.formatInWindow[4].child
                        break
                    case 5:
                        data.objectMultiArray[1] = [{ name: '' }]
                        break
                    case 6:
                        data.objectMultiArray[1] = this.state.formatInWindow[6].child
                        break
                    case 7:
                        data.objectMultiArray[1] = this.state.formatInWindow[7].child
                        break
                    case 8:
                        data.objectMultiArray[1] = this.state.formatInWindow[8].child
                        break
                    case 9:
                        data.objectMultiArray[1] = this.state.formatInWindow[9].child
                        break
                    case 10:
                        data.objectMultiArray[1] = this.state.formatInWindow[10].child
                        break
                    case 11:
                        data.objectMultiArray[1] = this.state.formatInWindow[11].child
                        break
                    case 12:
                        data.objectMultiArray[1] = this.state.formatInWindow[12].child
                        break
                    case 13:
                        data.objectMultiArray[1] = this.state.formatInWindow[13].child
                        break
                    case 14:
                        data.objectMultiArray[1] = this.state.formatInWindow[14].child
                        break
                }
                data.multiIndex[1] = 0
                data.multiIndex[2] = 0
                break

        }
        console.log(data.multiIndex)
        this.setState({
            multiIndex: data.multiIndex,
            objectMultiArray: data.objectMultiArray
        })
    }

    //--------------------结束-行业分类picker


    passDataToParent(industryTypeSelected){
        this.props.onPassDataToChild(industryTypeSelected)
    }
    componentWillMount() {

    }
    componentDidMount() {
    }
// 当然父组件有新的props的 会从新渲染组件
    componentWillReceiveProps(nextProps) {
        if (nextProps.data.length) {
            this.formatIndustryType(nextProps.data)
            this.formatIndustryTypei(nextProps.data)
        }
    }
    clickHandler() {
        this.props.onFunction(33)
    }

    componentWillUnmount() { }

    componentDidShow() { }

    componentDidHide() { }

    render() {
        console.log('我拿到props', this.props)
        console.log('objectMultiArray', this.state.objectMultiArray)
        console.log('objectMultiwindow', this.state.formatInWindow)
        return (
            <View class='page-section'>

                <Picker
                    rangeKey='name'
                    mode='multiSelector'
                    onChange={this.bindMultiPickerChange.bind(this)}
                    onColumnchange={this.bindMulPickerColChge.bind(this)}
                    value={this.state.multiIndex}
                    range={this.state.objectMultiArray}
                >
                    <View class='picker type'>
                        <View className='title-box'>
                            <Text className='title'>行业分类：</Text>
                            {this.state.objectMultiArray.length ? <Text> <Text className='first-col'> {this.state.objectMultiArray[0][this.state.multiIndex[0]].name}</Text>
                                <Text className='second-col'> {this.state.objectMultiArray[1][this.state.multiIndex[1]].name}</Text></Text> : null}
                        </View>
                    </View>
                </Picker>
            </View>


        )
    }
}

export default Interaction