小程序二级联动

 <picker mode="multiSelector" range="{{ edit_cateArray_temp }}" range-key="name" value="{{ edit_cateSelectIndex }}" bindchange="changeCate" bindcolumnchange="bindMultiCateColumnChange">
          <view class="flex j-s a-c box-border padding-primary" style="padding-left: 0;padding-top: 0;">
            <view>所属类别</view>
            <view class="flex a-c j-s">
              <view wx:if="{{ edit_cateSelectIndex !== null }}" class="flex-1 pl-10 color-555"> 
                {{edit_cateArray[0][edit_cateSelectIndex[0]].name}}
                {{edit_cateArray[1][edit_cateSelectIndex[1]].name}}
              </view>
              
              <view wx:else class="placeholder-class fc pl-10">点击选择</view>
              <pic class="icon-input-arrow-right" src="/assets/images/common/icon_nav_right.png" />
            </view>
          </view>
        </picker>

  

Router({

    /**
     * 页面的初始数据
     */
    data: {
        
        allCates: [], //所有分类
         
        edit_cateArray: [
            [],
            []
        ], //编辑可选值
        edit_cateArray_temp: [
            [],
            []
        ], //编辑可选值,此源用于选择,因为要在没确定选择之前不需要更新edit_cateArray
        edit_cateSelectIndex: null, //编辑选中分类,同样是数组,第一个值对应第一级分类...
       

    },
 
    //加载详情
    loadDetail: function() {
        const that = this;
        getEventDetail({ id: this.data.id }).then(function(detail) { 
 
            //分类相关
            const cates = detail.cates || [];
            let cateArray = [
                [],
                []
            ];
            let parentCates = cates.filter(t => t.parentId == null || t.parentId == 0) || [];

            cateArray[0] = parentCates.map(c => { return { id: c.id, name: c.name } }) || []; 
            if (parentCates.length > 0) {
                let childCates = cates.filter(t => t.parentId == parentCates[0].id) || [];
                cateArray[1] = childCates.map(c => { return { id: c.id, name: c.name } }) || [];
            }

            that.$sd("edit_cateArray", cateArray);
            that.$sd("edit_cateArray_temp", cateArray);

            //初始选中分类
            const cateSelectIndex = [];
            const parentCateId = detailResult.eventCateParentId || 0;
            if (parentCateId > 0) {
                cateSelectIndex[0] = cateArray[0].map(x => x.id).indexOf(parentCateId);
                if ((detailResult.eventCateId || 0) > 0) {
                    let childCates = cates.filter(t => t.parentId == parentCateId) || [];
                    cateArray[1] = childCates.map(c => { return { id: c.id, name: c.name } }) || [];
                    cateSelectIndex[1] = childCates.map(x => x.id).indexOf(detailResult.eventCateId);
                }
                that.$sd("edit_cateArray", cateArray);
                that.$sd("edit_cateArray_temp", cateArray);
                that.$sd("edit_cateSelectIndex", cateSelectIndex); 
            } 
        })
    },  
    changeCate: function(e) {
        //确定选定分类
        this.$sd("edit_cateArray", this.data.edit_cateArray_temp);
        const index = e.detail.value;
        this.$sd("edit_cateSelectIndex", index);
    },
    bindMultiCateColumnChange: function(e) {
        const column = e.detail.column;
        const val = e.detail.value
        let cateArray = this.data.edit_cateArray_temp;

        if (column == 0) {
            var firstSelectCateId = cateArray[0][val].id;
            let childCates = this.data.allCates.filter(t => t.parentId == firstSelectCateId) || [];
            cateArray[1] = childCates.map(c => { return { id: c.id, name: c.name } }) || [];

            this.$sd("edit_cateArray_temp", cateArray);
        } else if (column == 1) {
            //no
        }
    }  

})

  

posted @ 2021-12-10 10:35  evemen  阅读(554)  评论(0)    收藏  举报