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'


let maxDepth = 0
let initialDataArray = []
class Interaction extends Component {

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

        this.state = {
            ///---行业分类 开始
            initailMultiArray: '',// 初始化底部数据
            multiIndex: [0, 0],
            interactionMultiArray: [],// 联动
            ///---行业分类 结束

        }

    }
    // 行业分类筛选列表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 => {
            if (res.data.err_msg === 'success') {
                console.log('行业分类目录', res)
                let initailMultiArray = this.recursionInitialized(res.data.data)
                initialDataArray[1].unshift({ name: '全部', id: '-1' }) // 默认
                this.setState({
                    initailMultiArray: [initailMultiArray[1]],                //initailMultiArray.reverse(),
                    interactionMultiArray: [{ name: '全部', id: '-1', children: [{ name: '', id: '' }] }, ...this.recursionInteraction(res.data.data)],
                    multiIndex: this.recursionDepth(res.data.data),

                }, () => {
                    initialDataArray = []// 把全局变变量赋值给state之后，初始化商品分类为空， 不然第二次进去的时候会自动添加进去
                    // console.log('联动数据', this.state.interactionMultiArray)
                    // console.log('初始化数据', this.state.initailMultiArray)


                }) // 用递归来整理无限层次的数据

            } else {
                console.log('行业分类请求没有成功', res)
            }
        }
        )
            .catch(error => {
                console.log('行业分类请求错误', error)
            })
    }
    // 递归整理无限层联动数据
    recursionInteraction(data) {
        let arrayTem = []
        for (let items of data) {
            arrayTem.push({ name: items.class_name, id: items.class_id })
            if (items.child.length) {
                arrayTem[arrayTem.length - 1].children = [{ name: '可选', id: '' }, ...this.recursionInteraction(items.child)]
            } else {
                arrayTem[arrayTem.length - 1].children = [{ name: '', id: '' }]
            }
        }
        return arrayTem  // 返回联动数据
        //  return arrayTem
    }
    // 递归整理无限层初始数据
    recursionInitialized(data) {
        const arrayTem = []
        const childrenHolderArray = []
        if (data.length) {
            for (let item of data) {
                arrayTem.push({ name: item.class_name, id: item.class_id })
                item.child.length ? childrenHolderArray.push(...item.child) : null
            }
            this.recursionInitialized(childrenHolderArray)
        }

        arrayTem.length ? initialDataArray.push(arrayTem) : null // 数组为空则不添加
        return initialDataArray
    }
    // 递归整理无限层层次
    recursionDepth(data) {
        const arrayTem = []
        const childrenHolderArray = []
        if (data.length) {
            for (let item of data) {
                arrayTem.push({ name: item.class_name, id: item.class_id })
                item.child.length ? childrenHolderArray.push(...item.child) : null
            }
            this.recursionDepth(childrenHolderArray)
            maxDepth += 1
        }
        return new Array(maxDepth).fill(0)
    }
    bindMultiPickerCol(e) {
        console.log('修改的列为', e.detail.column, '，值为', e.detail.value)
        console.log(this.state.initailMultiArray)
        const data = {
            multiArray: this.state.initailMultiArray,
            multiIndex: this.state.multiIndex
        }
        data.multiIndex[e.detail.column] = e.detail.value
        if (e.detail.column == 0) {
            for (let index in data.multiArray[0]) {
                const indexNumber = Number(index)
                if (indexNumber === data.multiIndex[0]) {
                    data.multiArray[1] = this.state.interactionMultiArray[indexNumber].children
                }
            }
        }
        this.setState({ multiIndex: data.multiIndex })

    }

    //--------------------开始-行业分类picker
    bindMultiPickerChange(e) {
        this.setState({
            multiIndex: e.detail.value,
        }, () => {
            this.returnResultToParent()
        })

    }


    //--------------------结束-行业分类picker
    returnResultToParent() {
        const parent = this.state.interactionMultiArray[this.state.multiIndex[0]]
        const child = this.state.interactionMultiArray[this.state.multiIndex[0]].children[this.state.multiIndex[1]]
        child.id ? this.props.onPassDataToChild(child) : this.props.onPassDataToChild(parent)
    }


    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.bindMultiPickerCol.bind(this)}
                    value={this.state.multiIndex}
                    range={this.state.initailMultiArray}
                >
                    <View class='picker type'>
                        <View className='title-box'>
                            <Text className='title'>行业分类：</Text>

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


        )
    }
}

export default Interaction