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

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

import { Picker } from 'taro-ui'

import './interactionComponent.scss'

class Interaction extends Component {

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

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

        }

    }
    // 行业分类筛选列表GetIndustryTypeList
    getIndustryTypeList(url) {
        Taro.request({
            url: url,
            method: 'GET',
            dataType: 'json',
            header: {
                'Cookie': 'PFWSSS=' + Taro.getStorageSync('session_id'),
                'content-type': 'application/x-www-form-urlencoded',
                'X-Requested-With': 'XMLHttpRequest'
            }
        }).then(res => {
            //  console.log('行业分类列表', res)
            this.formatIndustryType(res.data.data)
            this.formatIndustTypeInit(res.data.data)

        }).catch(err => {
            console.log('行业分类列表获取失败', err)
        })
    }
    // 第一种formate 用于底部弹层滚动时的数据
    formatIndustryType(data) {
        const newIndustryType = [{ name: '全部', id: '-1', child: [{ name: '', id: '' }] }]
        for (let outter of data) {
            let outterObject = { name: outter.class_name, id: outter.class_id, child: [{name:'可选',id:''}] }
            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 })
    }
    //第二种format 用于底部弹层的初始化数据
    formatIndustTypeInit(data) {
        const firstArray = [{ name: '全部', id: '1' }]
        const secondArray = [{ name: '', id: '' }]
        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] }, () => {
        })

    }
    //--------------------开始-行业分类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] = this.state.formatInWindow[6].child
                        break
                    case 6:
                        data.objectMultiArray[1] = [{ name: '' }]
                        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
                    case 15:
                        data.objectMultiArray[1] = this.state.formatInWindow[15].child
                        break
                    case 15:
                        data.objectMultiArray[1] = this.state.formatInWindow[16].child
                        break

                }
                data.multiIndex[1] = 0
                break

        }
        // console.log(data.multiIndex)
        // console.log('objectMultiArray', data.objectMultiArray)
        this.setState({
            multiIndex: data.multiIndex,
            objectMultiArray: data.objectMultiArray
        }, () => {

        })
    }

    //--------------------结束-行业分类picker
    passDataToParent(industryTypeSelected) {
        this.props.onPassDataToChild(industryTypeSelected)
    }


    componentDidMount() {

        this.getIndustryTypeList(this.props.url)
    }
    // 当然父组件有新的props的 会从新渲染组件
    componentWillReceiveProps(nextProps) {

    }
    componentWillUnmount() { }

    componentDidShow() { }

    componentDidHide() { }

    render() {
        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>

                            <Text className='first-col'> {this.props.selectedValue.name}</Text>
                            {/* {this.state.objectMultiArray[0] ? <Text className='first-col'> {this.state.objectMultiArray[0][this.state.multiIndex[0]].name}</Text> : null}
                            {this.state.objectMultiArray[1] ? <Text className='second-col'> {this.state.objectMultiArray[1][this.state.multiIndex[1]].name}</Text> : null} */}
                        </View>
                    </View>
                </Picker>
            </View>


        )
    }
}

export default Interaction