todo list：
首页：
商品发布页面：

供求发布页面
全部业主需求页面：
我的供求页面：
我的商品列表页面
 商品编辑页面

我的需求列表页面:
接口问题：
优惠卷和询价
bug： 商品编辑 增加图片后 图片顺序乱了




等待后台--- 单个我的商品页面的图片顺序，单个我的需求页面的接口, 当个我哦的需求编辑页面的接口


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

import { Picker } from 'taro-ui'

import './goodsTypeInteractionComp.scss'
import loginExpired from '../../util/loginExpired'

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

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

        this.state = {
            ///---行业分类 开始
            initailMultiArray: [[{ class_name: '选择商品分类', class_id: '' }], [], []], // 初始化底部数据
            multiIndex: [0, 0, 0, 0],// 默认联动列数为4个并且每一列都是第一行
            interactionMultiArray: [],// 联动


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

    }
    //商品目录请求api GetShopCategoryList
    getProductCateList(url) {
        Taro.request({
            url: url,
            method: 'POST',
            dataType: 'json',
            header: {
                'content-type': 'application/x-www-form-urlencoded',
                'Cookie': 'PFWSSS=' + Taro.getStorageSync('session_id'),
                'X-Requested-With': 'XMLHttpRequest'
            }
        })
            .then(res => {
                if (res.data.err_code === 0) {
                    console.log('商品分类目录', res)
                    
                    const recursionInteractionData=this.recursionInteraction(res.data.data)
                    this.recursionInitialized(res.data.data)  // 
                    console.log('initialDataArray',initialDataArray.reverse())
                    this.setState({
                        interactionMultiArray: recursionInteractionData,
                        multiIndex: this.recursionDepth(res.data.data),
                        initailMultiArray:initialDataArray.reverse()
                    }, () => {
                       initialDataArray=[]// 把全局变变量赋值给state之后，初始化商品分类为空， 不然第二次进去的时候会自动添加进去
                       //  console.log('联动数据', this.state.interactionMultiArray)
                       //  console.log('初始化数据', this.state.initailMultiArray)
                     

                    }) // 用递归来整理无限层次的数据
                //     console.log('联动数据', this.recursionInteraction(res.data.data))
                //    console.log('初始数据', this.recursionInitialized(res.data.data).reverse())
                }else if (res.data.err_code === 88888) {
                   loginExpired(res)
                } else {
                    Taro.showToast({
                        title: res.data.err_msg,
                        icon: 'none'
                      })
                }
            }
            )
            .catch(error => {
                console.log('商品分类请求错误', error)
            })
    }



    
    //联动确认
    bindMultiPickerChange(e) {
        // 如果没有上商品 那就不执行
        if(Taro.getStorageSync('shopInfo').shop_id){
            this.setState({
                multiIndex: e.detail.value.map(item => { if (item === null) { item = 0 } return item })
            }, () => {
               // console.log('picker发送选择改变，携带值为', this.state.multiIndex)
                this.returnResultToParent()
    
            })
        }
    }
    returnResultToParent() {
        let selected = this.state.interactionMultiArray
        for (let index of this.state.multiIndex) {
            if (selected[index].children[0].id) {
                selected = selected[index].children
            } else {
                this.props.onPassDataToChild(selected[index])
                break
            }
        }
    }
        // 递归整理无限层初始数据,将整理好的数据赋值给initialDataArray
    recursionInitialized(data) {
        const arrayTem = []
        if (data.length) {
            for (let item of data) {
                arrayTem.push({ name: item.class_name, id: item.class_id })
            }
        }
        if(data[0].children.length){
            this.recursionInitialized(data[0].children)
        }
        initialDataArray.push(arrayTem) 
        return arrayTem
    }



    // 递归整理无限层联动数据
    recursionInteraction(data) {
        let arrayTem = []
        for (let items of data) {
            arrayTem.push({ name: items.class_name, id: items.class_id })
            if (items.children) {
                arrayTem[arrayTem.length - 1].children = this.recursionInteraction(items.children)
            } 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.children ? childrenHolderArray.push(...item.children) : 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.children ? childrenHolderArray.push(...item.children) : 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
                    // data.multiArray[2] = this.state.interactionMultiArray[indexNumber].children[0].children
                    // data.multiArray[3] = this.state.interactionMultiArray[indexNumber].children[0].children[0].children
                    data.multiArray[1] = this.state.interactionMultiArray[indexNumber].children
                    data.multiArray[2] = this.state.interactionMultiArray[indexNumber].children[data.multiIndex[1]].children
                    data.multiArray[3] = this.state.interactionMultiArray[indexNumber].children[data.multiIndex[1]].children[data.multiIndex[2]].children
                }
            }
        } else if (e.detail.column == 1) {
            for (let index in data.multiArray[1]) {
                const indexNumber = Number(index)
                if (indexNumber === data.multiIndex[1]) {
                    data.multiArray[2] = this.state.interactionMultiArray[data.multiIndex[0]].children[indexNumber].children
                }
            }
        }
        else if (e.detail.column == 2) {
            for (let index in data.multiArray[2]) {
                const indexNumber = Number(index)
                if (indexNumber === data.multiIndex[2]) {
                    data.multiArray[3] = this.state.interactionMultiArray[data.multiIndex[0]].children[data.multiIndex[1]].children[indexNumber].children
                }
            }
        }

        // switch (e.detail.column) {// 移动了第几列
        //     case 0:
        //         switch (data.multiIndex[0]) { // 第一个index 是多少
        //             case 0:
        //                 data.multiArray[1] = this.state.interactionMultiArray[0].children
        //                 data.multiArray[2]=this.state.interactionMultiArray[0].children[0].children
        //                 break
        //             case 1:
        //                 data.multiArray[1] = this.state.interactionMultiArray[1].children
        //                 break
        //             case 2:
        //                 data.multiArray[1] = this.state.interactionMultiArray[2].children
        //                 break
        //             case 3:
        //                 data.multiArray[1] = this.state.interactionMultiArray[3].children
        //                 break
        //             case 4:
        //                 data.multiArray[1] = this.state.interactionMultiArray[4].children
        //                 break
        //         }
        //         data.multiIndex[1] = 0
        //         data.multiIndex[2] = 0
        //         data.multiIndex[3] = 0
        //         break
        //     case 1:
        //         switch (data.multiIndex[0]) {
        //             case 0:

        //                 break
        //             case 1:
        //                 switch (data.multiIndex[1]) {
        //                     case 0:
        //                         data.multiArray[2] = this.state.interactionMultiArray[1].children[0].children
        //                         break
        //                     case 1:
        //                         data.multiArray[2] = this.state.interactionMultiArray[1].children[1].children
        //                         break
        //                     case 2:
        //                         data.multiArray[2] = this.state.interactionMultiArray[1].children[2].children
        //                         break
        //                     case 3:
        //                         data.multiArray[2] = this.state.interactionMultiArray[1].children[3].children ? this.state.interactionMultiArray[1].children[3].children : [{ class_name: '' }]
        //                         break
        //                 }
        //                 break
        //             case 2:
        //                 switch (data.multiIndex[1]) {
        //                     case 0:
        //                         data.multiArray[2] = this.state.interactionMultiArray[2].children[0].children
        //                         break
        //                     case 1:
        //                         data.multiArray[2] = this.state.interactionMultiArray[2].children[1].children
        //                         break
        //                     case 2:
        //                         data.multiArray[2] = this.state.interactionMultiArray[2].children[2].children
        //                         break
        //                     case 3:
        //                         data.multiArray[2] = this.state.interactionMultiArray[2].children[3].children
        //                         break
        //                     case 4:
        //                         data.multiArray[2] = this.state.interactionMultiArray[2].children[4].children
        //                         break
        //                     case 5:
        //                         data.multiArray[2] = this.state.interactionMultiArray[2].children[5].children
        //                         break
        //                 }
        //                 break
        //             case 3:
        //                 switch (data.multiIndex[1]) {
        //                     case 0:
        //                         data.multiArray[2] = this.state.interactionMultiArray[3].children[0].children
        //                         break
        //                     case 1:
        //                         data.multiArray[2] = this.state.interactionMultiArray[3].children[1].children
        //                         break
        //                     case 2:
        //                         data.multiArray[2] = this.state.interactionMultiArray[3].children[2].children
        //                         break
        //                     case 3:
        //                         data.multiArray[2] = this.state.interactionMultiArray[3].children[3].children
        //                         break
        //                     case 3:
        //                         data.multiArray[2] = this.state.interactionMultiArray[3].children[3].children
        //                         break
        //                 }
        //                 break
        //             case 4:
        //                 switch (data.multiIndex[1]) {
        //                     case 0:
        //                         data.multiArray[2] = this.state.interactionMultiArray[4].children[0].children
        //                         break
        //                     case 1:
        //                         data.multiArray[2] = this.state.interactionMultiArray[4].children[1].children
        //                         break
        //                     case 2:
        //                         data.multiArray[2] = this.state.interactionMultiArray[4].children[2].children
        //                         break

        //                 }
        //                 break

        //         }
        //         data.multiIndex[2] = 0
        //         data.multiIndex[3] = 0
        //         break
        // }
        this.setState({ multiIndex: data.multiIndex })
    }

    componentDidMount() {

        if(Taro.getStorageSync('shopInfo').shop_id){
            this.getProductCateList(this.props.url)
        }else{
         
        }
        
    }
    // 当然父组件有新的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='require'>*</Text>
                            <Text className='title'>商品分类：</Text>
                            <Text className='first-col'>
                                {this.props.selectedValue.name}
                            </Text>

                            {/* {this.state.initailMultiArray[0].length?<Text className='first-col'> {this.state.initailMultiArray[0][this.state.multiIndex[0]].name}</Text>:null}
                                {this.state.initailMultiArray[1].length?<Text className='second-col'>{this.state.initailMultiArray[1][this.state.multiIndex[1]].name}</Text>:null}
                                {this.state.initailMultiArray[2].length?<Text className='third-col'>{this.state.initailMultiArray[2][this.state.multiIndex[2]].name}</Text>:null} */}

                        </View>
                    </View>
                </Picker>
            </View>


        )
    }
}

export default GoodsTypeInteractionComp