美文网首页
行业选择器组件

行业选择器组件

作者: 逸笛 | 来源:发表于2020-09-03 11:17 被阅读0次

    页面型，单选


    图片.png 
    import Taro, { Component } from "@tarojs/taro";
import { View, ScrollView, Text } from "@tarojs/components";
import { AtIcon, AtActionSheet } from "taro-ui";
import "./index.less";
import api from "../../../utils/network/request";
import user from "../../../utils/auth/user";

export default class Index extends Taro.Component {
  config = {
    navigationBarTitleText: "选择经营类目",
    navigationBarBackgroundColor: "#EAC880"
  };

  state = {
    treeData: [],
    fisrtIndex: -1,
    selectList: [], // 选中的item
    selectListIds: [], // 选中的ids
    visbled: false,
    dataLists: []
  };
  componentWillMount() {
    if (this.$router.params.isChange) {
      const value = Taro.getStorageSync("boIndustry_choose_list");
      console.log(value);
      this.setState({
        selectListIds: [value[0].id, value[0].pid],
        selectList: value
      });
    }
    api.request({
      url: "/public/simpleIndustries",
      data: {
        access_token: user.getToken()
      },
      success: res => {
        this.setState({ treeData: res.data.result });
      },
      error: error => {}
    });
  }

  componentDidMount() {}

  componentDidShow() {
    this.setState({
      boIndustryChooseOpen: true
    });
  }

  componentDidHide() {}

  options = {
    addGlobalClass: false
  };
  // 行业类目
  // 关闭事件
  handleBoIndustryChooseClose = chooseData => {
    Taro.setStorageSync("boIndustry_choose_list", chooseData);
    if (this.$router.params.isChange == 1) {
      Taro.navigateBack({
        detail: 1
      });
    } else {
      const type = Taro.getStorageSync("bo_type");
      if (type == 3) {
        Taro.navigateTo({
          url: "/opportunity/pages/pull_supply/pull_supply"
        });
      }
      if (type == 1 || type == 2) {
        Taro.navigateTo({
          url: `/opportunity/pages/pullBuyNeed/index?typeFlag=${type}`
        });
      }
    }

    this.setState({ boIndustryChooseOpen: false });
  };

  onClickItem = (item, index) => {
    const {
      treeData,
      fisrtIndex,
      selectList,
      selectListIds,
      dataLists
    } = this.state;
    if (!item.pid) {
      this.setState({
        fisrtIndex: index
      });
    } else {
      this.setState({
        selectList: [item],
        selectListIds: [item.id]
      });
    }
  };

  onClickTab = () => {
    const { selectList, treeData, fisrtIndex, selectListIds } = this.state;
    this.setState({
      fisrtIndex: -1
    });
    if (selectList.length == 0) {
      this.setState({
        fisrtIndex: -1
      });
    } else {
      console.log(selectList[0], treeData[fisrtIndex].id);
      if (selectList[0].pid == treeData[fisrtIndex].id) {
        this.setState({
          fisrtIndex: -1,
          selectListIds: [...selectListIds, treeData[fisrtIndex].id]
        });
      }
    }
  };

  render() {
    const {
      treeData,
      fisrtIndex,
      selectListIds,
      selectList,
      visbled,
      dataLists,
      noSelectId = []
    } = this.state;
    console.log(selectListIds);

    const type = Taro.getStorageSync("bo_type");
    return (
      <View className="modalIntr">
        {/* 上部分 */}
        <View className="modalIntrTitle">
          <View>请选择经营类目</View>
        </View>
        <View
          className="selectList"
          style={{
            display: selectList.length == 0 ? "none" : "flex"
          }}
        >
          <View style={{ whiteSpace: "nowrap" }}>已选择：</View>
          <ScrollView scrollX style={{ width: "100vw" }}>
            <View scrollX className="selectLists">
              {selectList.map((item, index) => (
                <View
                  key={item.id}
                  className="selectListItem"
                  style={{ zIndex: 999 }}
                >
                  <Text style={{ marginRight: "10rpx" }}>{item.name}</Text>
                </View>
              ))}
            </View>
          </ScrollView>
        </View>
        <View className="tab">
          {fisrtIndex !== -1 && (
            <View onClick={e => this.onClickTab()} className="title">
              {treeData[fisrtIndex].name}
            </View>
          )}
          <View className="title selectTab">请选择</View>
        </View>
        {/* 中部分 */}
        <ScrollView
          style={{
            height: selectList.length == 0 ? "65vh" : "55vh"
          }}
          scrollY
          className="modalIntrTop"
        >
          <View className="modalIntrContaner">
            <View className="treeList">
              {(fisrtIndex !== -1 ? treeData[fisrtIndex].child : treeData).map(
                (item, index) => (
                  <View
                    key={item.id}
                    style={{
                      display:
                        noSelectId.indexOf(item.id) != -1 ? "none" : "flex"
                    }}
                    className={
                      selectListIds.indexOf(item.id) == -1
                        ? "treeItem"
                        : "treeItem SelectTreeItem"
                    }
                    onClick={e => this.onClickItem(item, index)}
                  >
                    {item.name}
                  </View>
                )
              )}
            </View>
          </View>
        </ScrollView>
        {/* 下部分 */}
        <View className="modalIntrBottom">
          <View
            className="resetBtn"
            onClick={e => {
              this.setState({
                fisrtIndex: -1,
                selectList: [], // 选中的item
                selectListIds: [] // 选中的ids
              });
            }}
          >
            重置
          </View>
          <View
            className="yesBtn"
            onClick={e => {
              if (selectList.length == 0) {
                Taro.showToast({
                  title: `请选择`,
                  icon: "none",
                  duration: 2000
                });
                return;
              }
              this.handleBoIndustryChooseClose(selectList);
            }}
          >
            确定
          </View>
        </View>
      </View>
    );
  }
}


    .modalIntr {
  width          : 100%;
  height         : 100vh;
  border-radius  : 12px 12px 0px 0px;
  display        : flex;
  flex-direction : column;
  justify-content: space-between;

  .modalIntrTitle {
    width          : 100%;
    font-size      : 36px;
    font-weight    : bold;
    color          : rgba(51, 51, 51, 1);
    display        : flex;
    justify-content: space-between;
    box-sizing     : border-box;
    padding-top    : 40px;
    padding-left   : 35px;
    padding-right  : 25px;
  }

  .tab {
    display     : flex;
    padding-left: 35px;
  }

  .selectTab {
    border-bottom: 5px solid #FFB100;
  }

  .title {
    font-size   : 30px;
    font-weight : bold;
    color       : rgba(51, 51, 51, 1);
    margin-right: 65px;
  }

  // 中
  .modalIntrTop {

    box-sizing: border-box;


    .modalIntrContaner {
      width         : 100%;
      display       : flex;
      flex-direction: column;

      .treeList {
        display      : flex;
        flex-wrap    : wrap;
        margin-top   : 8px;
        padding      : 0 15px;
        padding-right: 35px;

        .treeItem {
          padding      : 14px 20px;
          background   : rgba(244, 245, 246, 1);
          border-radius: 6px;
          margin-top   : 20px;
          margin-left  : 20px;
          font-size    : 26px;
          color        : rgba(51, 51, 51, 1);
          box-sizing   : border-box;
        }

        .SelectTreeItem {
          color     : #FFB100;
          border    : 1px solid #FFB100;
          background: #fff;
          padding   : 14px 20px;
        }
      }




    }
  }


  // 下
  .modalIntrBottom {
    // height         : 10vh;
    padding        : 30px 25px;
    width          : 100%;
    display        : flex;
    justify-content: space-between;
    font-size      : 30px;
    font-weight    : 550;
    box-sizing     : border-box;

    .resetBtn {
      width             : 335px;
      height            : 80px;
      border-radius     : 41px;
      border            : 2px solid rgba(255, 177, 0, 1);
      color             : rgba(255, 177, 0, 1);
      display           : flex;
      justify-content   : center;
      align-items       : center;
      // margin-right   : 30px;
    }

    .yesBtn {
      width          : 335px;
      height         : 80px;
      background     : rgba(255, 177, 0, 1);
      color          : #FFF;
      border-radius  : 41px;
      display        : flex;
      justify-content: center;
      align-items    : center;
    }
  }
}

.selectList {
  display      : flex;
  flex-wrap    : nowrap;
  align-items  : center;
  font-size    : 26px;
  color        : rgba(51, 51, 51, 1);
  padding-left : 35px;
  padding-right: 25px;
  margin-top   : 30px;
  margin-bottom: 30px;

  .selectLists {
    display: flex;
    width  : 100vw;
  }

  .selectListItem {
    height          : 46px;
    background      : rgba(255, 177, 0, 0.15);
    border-radius   : 23px;
    // opacity      : 0.15;
    display         : flex;
    justify-content : center;
    align-items     : center;
    font-size       : 26px;
    font-weight     : bold;
    color           : rgba(255, 177, 0, 1);
    padding         : 0 20px;
    margin-right    : 20px;
    white-space     : nowrap;
  }

  .selectListItemIcon {
    margin-left: 10px;
  }
}

.indexPages {
  width : 100%;
  height: 100%;
}

.indexPagese {
  width      : 100%;
  height     : 100%;
  display    : flex;
  flex-wrap  : nowrap;
  align-items: center;

  .indexPageses {
    display  : flex;
    flex-wrap: nowrap;

    .box {
      padding      : 10px 20px;
      height       : 56px;
      background   : rgba(255, 177, 0, 0.15);
      border-radius: 6px;
      font-size    : 26px;
      color        : #FEBB15;
      box-sizing   : border-box;
      margin-right : 30px;
      white-space  : nowrap;

    }
  }

  .boxAdd {
    display         : flex;
    align-items     : center;
    width           : 48px;
    height          : 48px;
    box-sizing      : border-box;
    background-color: #FFB100;
    border-radius   : 50%;
    justify-content : center;
    min-width       : 48px;
    padding-bottom  : 5px;
    margin-left     : 16px;
  }

}

.placehoder {
  font-size: 28px;
  color    : #ccc;
}
    图片.png

    调用：

    import SelectIntr from "../../components/AllSelectIntr/index";

        <View className="trade">
            <View
              className="tradeContent"
              style={industryChooseList.length > 0 ? "padding:0" : ""}
            >
              <View className="borbtn" onClick={this.handleIndustryChooseOpen}>
                <View className="words title-text-justify">选择经营类目</View>
                <ScrollView scrollX style={{ width: "58vw" }}>
                  <View scrollX className="selectLists">
                    {industryChooseList.map((item, index) => (
                      <View className="selectListItem" key={item.id}>
                        {item.name}
                        {industryChooseList.length - 1 === index ? null : "、"}
                      </View>
                    ))}
                  </View>
                </ScrollView>

                {!industryChooseList.length && (
                  <Image src={next} className="icon_next" />
                )}
              </View>
            </View>
            <SelectIntr
              onChange={e => {
                this.setState({
                  industryChooseList: e,
                  industryChooseOpen: false
                });
              }}
              dataList={industryChooseList}
              visbled={industryChooseOpen}
              onClose={e => this.setState({ industryChooseOpen: false })}
              limit={3}
            />
          </View>

    import Taro, { Component } from "@tarojs/taro";
import { View, ScrollView, Text } from "@tarojs/components";
import { AtIcon, AtActionSheet } from "taro-ui";
import "./index.less";
import api from "../../utils/network/request";
import user from "../../utils/auth/user";

/*

行业选择器
limit   数量
onOk    确定
placehoder // 提示语
需要包裹的View设置宽
*/

export default class Index extends Component {
  state = {
    treeData: [],
    fisrtIndex: -1,
    selectList: [], // 选中的item
    selectListIds: [], // 选中的ids
    visbled: false,
    dataLists: []
  };
  componentDidMount() {
    api.request({
      url: "/public/simpleIndustries",
      data: {
        access_token: user.getToken()
      },
      success: res => {
        this.setState({ treeData: res.data.result });
      },
      error: error => {}
    });
  }

  componentWillReceiveProps(next) {
    if (next.visbled) {
      const dataListids = next.dataList;
      const value = [];
      dataListids.map(item => {
        value.push(item.id);
        if (item.pid && value.indexOf(item.pid) == -1) {
          value.push(item.pid);
        }
      });
      this.setState({
        visbled: true,
        selectList: next.dataList,
        selectListIds: value
      });
    }
  }

  onClickItem = (item, index) => {
    const { treeData, fisrtIndex, selectList, selectListIds } = this.state;
    const data = selectList;
    const dataIds = selectListIds;
    // 删除
    if (index == -1) {
      const value = [];
      const newData = data.filter(items => items.id != item.id);
      newData.map(items => {
        value.push(items.id);
        if (items.pid && value.indexOf(items.pid) == -1) {
          value.push(items.pid);
        }
      });
      this.setState({
        selectList: newData,
        selectListIds: value
      });
    } else {
      if (
        selectList.length == this.props.limit &&
        selectListIds.indexOf(item.id) == -1
      ) {
        Taro.showToast({
          title: `最多选择${this.props.limit}项`,
          icon: "none",
          duration: 2000
        });
        return;
      }
      if (item.child && item.child.length !== 0) {
        this.setState({
          fisrtIndex: index
        });
        return;
      }
      const newData = [];
      data.map(items => {
        if (items.id !== item.pid) {
          newData.push(items);
        }
      });
      this.setState({
        selectList: [...newData, item],
        selectListIds: [...dataIds, item.id]
      });
    }
  };

  onClickTab = () => {
    const { treeData, fisrtIndex, selectListIds, selectList } = this.state;
    let go = 0;
    selectList.map(item => {
      if (item.pid == treeData[fisrtIndex].id) go = 1;
    });
    this.setState({
      selectList: go == 1 ? selectList : [...selectList, treeData[fisrtIndex]],
      selectListIds:
        selectListIds.indexOf(treeData[fisrtIndex].id) == -1
          ? [...selectListIds, treeData[fisrtIndex].id]
          : selectListIds,
      fisrtIndex: -1
    });
  };

  render() {
    const {
      treeData,
      fisrtIndex,
      selectListIds,
      selectList,
      visbled
    } = this.state;
    return (
      <AtActionSheet
        isOpened={visbled}
        onCancel={e => {
          this.props.onClose();
          this.setState({
            fisrtIndex: -1,
            selectList: [], // 选中的item
            selectListIds: [], // 选中的ids
            visbled: false
          });
        }}
      >
        <View className="modalIntr">
          {/* 上部分 */}
          <View className="modalIntrTitle">
            <View>
              请选择经营类目(
              <Text style={{ color: "#FFB100" }}>{selectList.length}</Text>/
              {this.props.limit - dataLists.length})
            </View>
            <AtIcon
              value="close"
              color="#CCCCCC"
              onClick={() => {
                this.props.onClose();
                this.setState({
                  fisrtIndex: -1,
                  selectList: [], // 选中的item
                  selectListIds: [], // 选中的ids
                  visbled: false
                });
              }}
            />
          </View>
          <View
            className="selectList"
            style={{
              display: selectList.length == 0 ? "none" : "flex"
            }}
          >
            <View style={{ whiteSpace: "nowrap" }}>已选择：</View>
            <ScrollView scrollX style={{ width: "100vw" }}>
              <View scrollX className="selectLists">
                {selectList.map((item, index) => (
                  <View
                    key={item.id}
                    className="selectListItem"
                    onClick={e => this.onClickItem(item, -1)}
                    style={{ zIndex: 999 }}
                  >
                    <Text style={{ marginRight: "10rpx" }}>{item.name}</Text>
                    <AtIcon value="close" size={14} />
                  </View>
                ))}
              </View>
            </ScrollView>
          </View>
          <View className="tab">
            {fisrtIndex !== -1 && (
              <View onClick={e => this.onClickTab()} className="title">
                {treeData[fisrtIndex].name}
              </View>
            )}
            <View className="title selectTab">请选择</View>
          </View>
          {/* 中部分 */}
          <ScrollView
            style={{
              height: selectList.length == 0 ? "65vh" : "55vh"
            }}
            scrollY
            className="modalIntrTop"
          >
            <View className="modalIntrContaner">
              <View className="treeList">
                {(fisrtIndex !== -1
                  ? treeData[fisrtIndex].child
                  : treeData
                ).map((item, index) => (
                  <View
                    key={item.id}
                    className={
                      selectListIds.indexOf(item.id) == -1
                        ? "treeItem"
                        : "treeItem SelectTreeItem"
                    }
                    onClick={e =>
                      this.onClickItem(
                        item,
                        selectListIds.indexOf(item.id) == -1 || item.child
                          ? index
                          : -1
                      )
                    }
                  >
                    {item.name}
                  </View>
                ))}
              </View>
            </View>
          </ScrollView>
          {/* 下部分 */}
          <View className="modalIntrBottom">
            <View
              className="resetBtn"
              onClick={e => {
                this.setState({
                  fisrtIndex: -1,
                  selectList: [], // 选中的item
                  selectListIds: [] // 选中的ids
                });
              }}
            >
              重置
            </View>
            <View
              className="yesBtn"
              onClick={e => {
                if (selectList.length == 0) {
                  if (fisrtIndex == -1) {
                    this.props.onChange([]);
                    this.setState({
                      fisrtIndex: -1,
                      selectList: [], // 选中的item
                      selectListIds: [], // 选中的ids
                      visbled: false
                    });
                  } else {
                    this.props.onChange([treeData[fisrtIndex]]);
                    this.setState({
                      fisrtIndex: -1,
                      selectList: [], // 选中的item
                      selectListIds: [], // 选中的ids
                      visbled: false
                    });
                  }
                  return;
                }
                if (fisrtIndex == -1) {
                  this.props.onChange(selectList);
                } else {
                  let gp = 0;
                  selectList.map(item => {
                    if (item.pid == treeData[fisrtIndex].id) gp = 1;
                  });
                  this.props.onChange(
                    gp == 1 ? selectList : [...selectList, treeData[fisrtIndex]]
                  );
                }
                this.setState({
                  fisrtIndex: -1,
                  selectList: [], // 选中的item
                  selectListIds: [], // 选中的ids
                  visbled: false
                });
              }}
            >
              确定
            </View>
          </View>
        </View>
      </AtActionSheet>
    );
  }
}


    .modalIntr {
  width          : 100%;
  height         : 90vh;
  border-radius  : 12px 12px 0px 0px;
  display        : flex;
  flex-direction : column;
  justify-content: space-between;

  .modalIntrTitle {
    width          : 100%;
    font-size      : 36px;
    font-weight    : bold;
    color          : rgba(51, 51, 51, 1);
    display        : flex;
    justify-content: space-between;
    box-sizing     : border-box;
    padding-top    : 40px;
    padding-left   : 35px;
    padding-right  : 25px;
  }

  .tab {
    display     : flex;
    padding-left: 35px;
  }

  .selectTab {
    border-bottom: 5px solid #FFB100;
  }

  .title {
    font-size   : 30px;
    font-weight : blod;
    color       : rgba(51, 51, 51, 1);
    margin-right: 65px;
  }

  // 中
  .modalIntrTop {

    box-sizing: border-box;


    .modalIntrContaner {
      width         : 100%;
      display       : flex;
      flex-direction: column;

      .treeList {
        display      : flex;
        flex-wrap    : wrap;
        margin-top   : 8px;
        padding      : 0 15px;
        padding-right: 35px;

        .treeItem {
          padding      : 14px 20px;
          background   : rgba(244, 245, 246, 1);
          border-radius: 6px;
          margin-top   : 20px;
          margin-left  : 20px;
          font-size    : 26px;
          color        : rgba(51, 51, 51, 1);
          box-sizing   : border-box;
        }

        .SelectTreeItem {
          color     : #FFB100;
          border    : 1px solid #FFB100;
          background: #fff;
          padding   : 14px 20px;
        }
      }




    }
  }


  // 下
  .modalIntrBottom {
    // height         : 10vh;
    padding        : 30px 25px;
    width          : 100%;
    display        : flex;
    justify-content: space-between;
    font-size      : 30px;
    font-weight    : 550;
    box-sizing     : border-box;

    .resetBtn {
      width             : 335px;
      height            : 80px;
      border-radius     : 41px;
      border            : 2px solid rgba(255, 177, 0, 1);
      color             : rgba(255, 177, 0, 1);
      display           : flex;
      justify-content   : center;
      align-items       : center;
      // margin-right   : 30px;
    }

    .yesBtn {
      width          : 335px;
      height         : 80px;
      background     : rgba(255, 177, 0, 1);
      color          : #FFF;
      border-radius  : 41px;
      display        : flex;
      justify-content: center;
      align-items    : center;
    }
  }
}

.selectList {
  display      : flex;
  flex-wrap    : nowrap;
  align-items  : center;
  font-size    : 26px;
  color        : rgba(51, 51, 51, 1);
  padding-left : 35px;
  padding-right: 25px;
  margin-top   : 30px;
  margin-bottom: 30px;

  .selectLists {
    display: flex;
    width  : 80vw;
  }

  .selectListItem {
    height          : 46px;
    background      : rgba(255, 177, 0, 0.15);
    border-radius   : 23px;
    // opacity      : 0.15;
    display         : flex;
    justify-content : center;
    align-items     : center;
    font-size       : 26px;
    font-weight     : bold;
    color           : rgba(255, 177, 0, 1);
    padding         : 0 20px;
    margin-right    : 20px;
    white-space     : nowrap;
  }

  .selectListItemIcon {
    margin-left: 10px;
  }
}

.indexPages {
  width : 100%;
  height: 100%;
}

.indexPagese {
  width      : 100%;
  height     : 100%;
  display    : flex;
  flex-wrap  : nowrap;
  align-items: center;

  .indexPageses {
    display  : flex;
    flex-wrap: nowrap;

    .box {
      padding      : 10px 20px;
      height       : 56px;
      background   : rgba(255, 177, 0, 0.15);
      border-radius: 6px;
      font-size    : 26px;
      color        : #FEBB15;
      box-sizing   : border-box;
      margin-right : 30px;
      white-space  : nowrap;

    }
  }

  .boxAdd {
    display         : flex;
    align-items     : center;
    width           : 48px;
    height          : 48px;
    box-sizing      : border-box;
    background-color: #FFB100;
    border-radius   : 50%;
    justify-content : center;
    min-width       : 48px;
    padding-bottom  : 5px;
    margin-left     : 16px;
  }

}

.placehoder {
  font-size: 28px;
  color    : #ccc;
}
    图片.png

    调用：

    import SelectIntr from "../../../../components/SelectIntr/index";

          <View className="trade"  style={
                    industry_choose_list.length > 1 ? "width:82%" : "width:91%"
                  }>
            <SelectIntr
              onChange={e => {
                this.setState({
                  industry_choose_list: e
                });
              }}
              onAdd={e => {
                this.setState({
                  industry_choose_list: [...industry_choose_list, ...e]
                });
              }}
              placehoder="请选择经营类目"
              limit={999}
              dataList={industry_choose_list}
            />
          </View>

    import Taro, { Component } from "@tarojs/taro";
import { View, ScrollView, Text } from "@tarojs/components";
import { AtIcon, AtActionSheet } from "taro-ui";
import "./index.less";
import api from "../../utils/network/request";
import user from "../../utils/auth/user";

/*

行业选择器
limit   数量
onOk    确定
placehoder // 提示语
需要包裹的View设置宽
*/

export default class Index extends Component {
  state = {
    treeData: [],
    fisrtIndex: -1,
    selectList: [], // 选中的item
    selectListIds: [], // 选中的ids
    visbled: false,
    dataLists: []
  };
  componentDidMount() {
    this.setState({
      dataLists: this.props.dataList
    });
    api.request({
      url: "/public/simpleIndustries",
      data: {
        access_token: user.getToken()
      },
      success: res => {
        this.setState({ treeData: res.data.result });
      },
      error: error => {}
    });
  }

  componentWillReceiveProps(next) {
    const { treeData } = this.state;
    this.setState({
      dataLists: next.dataList
    });
    // const value = [];
    // next.dataList.map(item => {
    //   value.push(item.id);
    // });
    // const dataList = [];
    // const newDataList = treeData;
    // newDataList.map(item => {
    //    item.child = item.child
    // });
    // for (const i in treeData) {
    //   if (value.indexOf(treeData[i].id) !== -1) {
    //     dataList.push(treeData[i]);
    //   } else {
    //     const child = treeData[i].child || [];
    //     for (const c in child) {
    //       if (value.indexOf(child[c].id) !== -1) {
    //         dataList.push(child[c]);
    //       }
    //     }
    //   }
    // }
    // next.dataList.map(item => {
    //   if (item.pid && value.indexOf(item.pid) == -1) {
    //     value.push(item.pid);
    //   }
    // });
    // this.setState({
    //   selectListIds: value,
    //   selectList: dataList
    // });
  }

  onClickItem = (item, index) => {
    const {
      treeData,
      fisrtIndex,
      selectList,
      selectListIds,
      dataLists
    } = this.state;
    if (
      selectListIds.indexOf(item.id) == -1 &&
      item.child == undefined &&
      this.props.limit - dataLists.length == selectList.length
    ) {
      Taro.showToast({
        title: `最多选择${this.props.limit - dataLists.length}个`,
        icon: "none",
        duration: 2000
      });
      return;
    }
    if (
      index !== -1 &&
      treeData[index].child &&
      treeData[index].child.length !== 0 &&
      fisrtIndex == -1
    ) {
      if (selectList.length !== 0 && selectList[0].pid !== item.id) {
        this.setState({
          selectList: [],
          selectListIds: []
        });
      }
      this.setState({
        fisrtIndex: index
      });
    } else {
      const value = selectList;
      this.setState({
        selectList:
          selectListIds.indexOf(item.id) == -1
            ? [...selectList, item]
            : value.filter(items => items.id != item.id),
        selectListIds:
          selectListIds.indexOf(item.id) == -1
            ? [...selectListIds, item.id]
            : selectListIds.filter(items => items != item.id)
      });
    }
  };

  onClickTab = () => {
    const { treeData, fisrtIndex, selectListIds, selectList } = this.state;
    if (selectListIds.indexOf(treeData[fisrtIndex].id) == -1) {
      this.setState({
        selectListIds: [treeData[fisrtIndex].id, ...selectListIds],
        selectList:
          selectList.length == 0
            ? [treeData[fisrtIndex], ...selectList]
            : selectList
      });
    }
    this.setState({
      fisrtIndex: -1
    });
  };

  onClickViesble = () => {
    const { dataLists } = this.state;
    const selectListIds = [];
    if (dataLists.length == this.props.limit) {
      Taro.showToast({
        title: `最多选择${this.props.limit}个`,
        icon: "none",
        duration: 2000
      });
      return;
    }
    dataLists.map(item => {
      if (selectListIds.indexOf(item.id) == -1) {
        selectListIds.push(item.id);
        // if (item.pid && selectListIds.indexOf(item.pid) == -1) {
        //   selectListIds.push(item.pid);
        // }
      }
    });
    this.setState({
      visbled: true,
      selectListIds
    });

    this.props.onOpen();
  };

  render() {
    const {
      treeData,
      fisrtIndex,
      selectListIds,
      selectList,
      visbled,
      dataLists
    } = this.state;
    let noSelectId = [];
    dataLists.map(item => noSelectId.push(item.id));
    return (
      <View className="indexPages">
        {/* 展位部分 */}
        <View className="indexPagese">
          <ScrollView scrollX>
            <View className="indexPageses">
              <View
                onClick={e => this.onClickViesble()}
                style={{ display: dataLists.length == 0 ? "flex" : "none" }}
                className="placehoder"
              >
                {this.props.placehoder}
              </View>
              {dataLists.map(item => (
                <View
                  onClick={e => {
                    const value = dataLists;
                    this.props.onChange(
                      value.filter(items => items.id !== item.id)
                    );
                  }}
                  key={item.id}
                  className="box"
                >
                  {item.name}
                  <AtIcon value="close" size={14} />
                </View>
              ))}
            </View>
          </ScrollView>
          <View className="boxAdd" onClick={e => this.onClickViesble()}>
            <AtIcon value="add" color="#fff" size={16} />
          </View>
        </View>
        <AtActionSheet
          isOpened={visbled}
          onCancel={e => {
            this.props.onClose();
            this.setState({
              fisrtIndex: -1,
              selectList: [], // 选中的item
              selectListIds: [], // 选中的ids
              visbled: false
            });
          }}
        >
          <View className="modalIntr">
            {/* 上部分 */}
            <View className="modalIntrTitle">
              <View>
                请选择经营类目(
                <Text style={{ color: "#FFB100" }}>{selectList.length}</Text>/
                {this.props.limit - dataLists.length})
              </View>
              <AtIcon
                value="close"
                color="#CCCCCC"
                onClick={() => {
                  this.setState({
                    fisrtIndex: -1,
                    selectList: [], // 选中的item
                    selectListIds: [], // 选中的ids
                    visbled: false
                  });
                  this.props.onClose();
                }}
              />
            </View>
            <View
              className="selectList"
              style={{
                display: "none"
              }}
            >
              <View style={{ whiteSpace: "nowrap" }}>已选择：</View>
              <ScrollView scrollX style={{ width: "100vw" }}>
                <View scrollX className="selectLists">
                  {selectList.map((item, index) => (
                    <View
                      key={item.id}
                      className="selectListItem"
                      onClick={e => this.onClickItem(item, -1)}
                      style={{ zIndex: 999 }}
                    >
                      <Text style={{ marginRight: "10rpx" }}>{item.name}</Text>
                      <AtIcon value="close" size={14} />
                    </View>
                  ))}
                </View>
              </ScrollView>
            </View>
            <View className="tab">
              {fisrtIndex !== -1 && (
                <View onClick={e => this.onClickTab()} className="title">
                  {treeData[fisrtIndex].name}
                </View>
              )}
              <View className="title selectTab">请选择</View>
            </View>
            {/* 中部分 */}
            <ScrollView
              style={{
                height: "60vh"
              }}
              scrollY={true}
              scrollWithAnimation
              className="modalIntrTop"
            >
              <View className="modalIntrContaner">
                <View className="treeList">
                  {(fisrtIndex !== -1
                    ? treeData[fisrtIndex].child
                    : treeData
                  ).map((item, index) => (
                    <View
                      key={item.id}
                      style={{
                        display:
                          noSelectId.indexOf(item.id) != -1 ? "none" : "flex"
                      }}
                      className={
                        selectListIds.indexOf(item.id) == -1
                          ? "treeItem"
                          : "treeItem SelectTreeItem"
                      }
                      onClick={e => this.onClickItem(item, index)}
                    >
                      {item.name}
                    </View>
                  ))}
                </View>
              </View>
            </ScrollView>
            {/* 下部分 */}
            <View className="modalIntrBottom">
              <View
                className="resetBtn"
                onClick={e => {
                  this.setState({
                    fisrtIndex: -1,
                    selectList: [], // 选中的item
                    selectListIds: [] // 选中的ids
                  });
                }}
              >
                重置
              </View>
              <View
                className="yesBtn"
                onClick={e => {
                  if (selectList.length == 0) {
                    if (fisrtIndex == -1) {
                      Taro.showToast({
                        title: `请选择`,
                        icon: "none",
                        duration: 2000
                      });
                    } else {
                      this.props.onAdd([treeData[fisrtIndex]]);
                      this.setState({
                        fisrtIndex: -1,
                        selectList: [], // 选中的item
                        selectListIds: [], // 选中的ids
                        visbled: false
                      });
                    }
                    return;
                  }
                  this.props.onAdd(selectList);
                  this.setState({
                    fisrtIndex: -1,
                    selectList: [], // 选中的item
                    selectListIds: [], // 选中的ids
                    visbled: false
                  });
                }}
              >
                确定
              </View>
            </View>
          </View>
        </AtActionSheet>
      </View>
    );
  }
}


    .modalIntr {
  width          : 100%;
  border-radius  : 12px 12px 0px 0px;
  display        : flex;
  flex-direction : column;
  justify-content: space-between;

  .modalIntrTitle {
    width          : 100%;
    font-size      : 36px;
    font-weight    : bold;
    color          : rgba(51, 51, 51, 1);
    display        : flex;
    justify-content: space-between;
    box-sizing     : border-box;
    margin-top    : 30px;
    padding-left   : 35px;
    padding-right  : 25px;
  }

  .tab {
    display     : flex;
    padding-left: 35px;
  }

  .selectTab {
    border-bottom: 5px solid #FFB100;
  }

  .title {
    font-size   : 30px;
    font-weight : bold;
    color       : rgba(51, 51, 51, 1);
    margin-right: 65px;
  }

  // 中
  .modalIntrTop {
    box-sizing: border-box;
    .modalIntrContaner {
      margin-top: 30px;
      overflow-y: scroll;
      width         : 100%;
      display       : flex;
      flex-direction: column;

      .treeList {
        display      : flex;
        flex-wrap    : wrap;
        padding      : 0 15px;
        .treeItem {
          padding      : 14px 20px;
          background   : rgba(244, 245, 246, 1);
          border-radius: 6px;
          margin-top   : 20px;
          margin-left  : 20px;
          font-size    : 26px;
          color        : rgba(51, 51, 51, 1);
          box-sizing   : border-box;
        }

        .SelectTreeItem {
          color     : #FFB100;
          border    : 1px solid #FFB100;
          background: #fff;
          padding   : 14px 20px;
        }
      }




    }
  }


  // 下
  .modalIntrBottom {
    padding        : 30px 25px;
    width          : 100%;
    display        : flex;
    justify-content: space-between;
    font-size      : 30px;
    font-weight    : 550;
    box-sizing     : border-box;

    .resetBtn {
      width             : 335px;
      height            : 80px;
      border-radius     : 41px;
      border            : 2px solid rgba(255, 177, 0, 1);
      color             : rgba(255, 177, 0, 1);
      display           : flex;
      justify-content   : center;
      align-items       : center;
    }

    .yesBtn {
      width          : 335px;
      height         : 80px;
      background     : rgba(255, 177, 0, 1);
      color          : #FFF;
      border-radius  : 41px;
      display        : flex;
      justify-content: center;
      align-items    : center;
    }
  }
}

.selectList {
  display      : flex;
  flex-wrap    : nowrap;
  align-items  : center;
  font-size    : 26px;
  color        : rgba(51, 51, 51, 1);
  padding-left : 35px;
  padding-right: 25px;
  margin-top   : 30px;
  margin-bottom: 30px;

  .selectLists {
    display: flex;
    width  : 100vw;
  }

  .selectListItem {
    height          : 46px;
    background      : rgba(255, 177, 0, 0.15);
    border-radius   : 23px;
    display         : flex;
    justify-content : center;
    align-items     : center;
    font-size       : 26px;
    font-weight     : bold;
    color           : rgba(255, 177, 0, 1);
    padding         : 0 20px;
    margin-right    : 20px;
    white-space     : nowrap;
  }

  .selectListItemIcon {
    margin-left: 10px;
  }
}


.indexPagese {
  display    : flex;
  flex-wrap  : nowrap;
  align-items: center;

  .indexPageses {
    display  : flex;
    flex-wrap: nowrap;

    .box {
      padding      : 10px 20px;
      height       : 56px;
      background   : rgba(255, 177, 0, 0.15);
      border-radius: 6px;
      font-size    : 26px;
      color        : #FEBB15;
      box-sizing   : border-box;
      margin-right : 30px;
      white-space  : nowrap;

    }
  }

  .boxAdd {
    display         : flex;
    align-items     : center;
    width           : 48px;
    height          : 48px;
    line-height: 48px;
    box-sizing      : border-box;
    background-color: #FFB100;
    border-radius   : 50%;
    justify-content : center;
    min-width       : 48px;
    padding-bottom  : 5px;
    margin-left     : 16px;
  }

}

.placehoder {
  font-size: 28px;
  color    : #ccc;
}

    相关文章

      网友评论

          本文标题：行业选择器组件

          本文链接：https://www.haomeiwen.com/subject/rvunsktx.html

          延伸阅读

          深度阅读

          • 您也可以注册成为美文阅读网的作者，发表您的原创作品、分享您的心情！

          栏目导航

          热点阅读

          关于我们|服务条款|联系我们|行业选择器组件|投稿指南|网站地图|RSS订阅|排版工具|手机版

          提供经典美文摘抄,优美散文欣赏,现代诗歌精选,短篇小说,心情随笔,表白情书范文,故事会在线阅读欣赏

          Copyright © 2014-2023 Haomeiwen.com All Rights Reserved. 好美文阅读网 版权所有

          备案信息：桂公网安备 45052102000051号 · 桂ICP备13007215号-3

          本站所收录作品、热点评论等信息部分来源互联网，目的只是为了系统归纳学习和传递资讯

          所有作品版权归原创作者所有，与本站立场无关，如不慎侵犯了你的权益，请联系我们告知，我们将做删除处理！