城市选择器组件

调用

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

   <CityChoose
          className="city-choose-box"
          isOpened={this.state.cityRequireOpen}
          getUserSub={false}
          limit={3}
          onClose={this.handleCityRequireClose.bind(this)}
        ></CityChoose>

import Taro, { Component } from "@tarojs/taro";
import { View, Button, ScrollView } from "@tarojs/components";
import { AtSearchBar } from "taro-ui";
import classNames from "classnames";
import api from "../../utils/network/request";
import user from "../../utils/auth/user";
import "./index.less";

export default class Index extends Component {
  state = {
    searchName: "",
    current: [],
    currentName: [],
    currentLength: 0,
    cityData: [],
    hotCityData: [],
    searchCityData: [],
    scrollTop: 0,
    nowScrollTop: 0
  };

  componentWillMount() {
    this.getData();
  }

  componentDidMount() {}

  componentWillUnmount() {}

  getData() {
    const that = this;
    api.request({
      url: this.props.getUserSub
        ? "/bo/subCitysByFirstLetter"
        : "/public/citysByFirstLetter",
      data: {
        access_token: user.getToken()
      },
      success: function(res) {
        that.setState({ cityData: res.data.result });
      },
      error: function(error) {}
    });

    if (!this.props.getUserSub) {
      api.request({
        url: "/public/hotCitys",
        data: {
          access_token: user.getToken()
        },
        success: function(res) {
          that.setState({ hotCityData: res.data.result });
        },
        error: function(error) {}
      });
    }
  }

  handleSearchChange(value) {
    this.setState({
      searchName: value
    });
  }

  handleSearch() {
    const searchName = this.state.searchName;
    if (searchName === "") {
      return false;
    }
    this.setState({
      scrollTop: 0
    });
    api.request({
      url: "/public/citys",
      data: {
        name: searchName
      },
      success: res => {
        const result = res.data.result;
        if (result.length === 0) {
          Taro.showToast({
            title: "没有搜索到该城市，换个名字搜一下吧",
            icon: "none",
            duration: 1500
          });
        } else {
          this.setState({ searchCityData: result, scrollTop: -200 });
        }
      },
      error: function(error) {}
    });
  }
  onScroll(e) {
    this.setState({
      nowScrollTop: e.detail.scrollTop
    });
  }

  gotoAnchor(indexes) {
    const that = this;
    Taro.createSelectorQuery()
      .in(this.$scope)
      .select(`#${indexes}`)
      .boundingClientRect(rect => {
        that.setState({
          scrollTop: that.state.nowScrollTop + rect.top - 200
        });
      })
      .exec();
  }

  handleChooseCity(id, name) {
    let current = this.state.current;
    let currentName = this.state.currentName;

    const index = current.indexOf(id);
    if (index === -1) {
      if (this.props.limit == 1) {
        current = [id];
        currentName = [name];
      } else {
        if (this.props.limit == current.length) {
          Taro.showToast({
            title: `最多选择${this.props.limit}项`,
            icon: "none"
          });
          return;
        }
        current.push(id);
        currentName.push(name);
      }
    } else {
      current.splice(index, 1);
      currentName.splice(index, 1);
    }
    this.setState({
      current: current,
      currentName: currentName,
      currentLength: current.length
    });
  }
  componentWillReceiveProps(nextProps) {
    if (nextProps.cityrefresh) {
      this.setState({
        current: [],
        currentName: [],
        currentLength: 0
      });
    }
  }
  handleClose(e, status) {
    const data = [];
    const current = this.state.current;
    const currentName = this.state.currentName;

    for (const i in current) {
      data.push({
        id: current[i],
        name: currentName[i],
        cityrefresh: status == 1 ? false : true
      });
    }

    this.props.onClose(data);
  }
  render() {
    const { isOpened, getUserSub } = this.props;
    const {
      current,
      currentLength,
      searchCityData,
      hotCityData,
      cityData,
      scrollTop
    } = this.state;
    const character = [
      "A",
      "B",
      "C",
      "D",
      "E",
      "F",
      "G",
      "H",
      "J",
      "K",
      "L",
      "M",
      "N",
      "P",
      "Q",
      "R",
      "S",
      "T",
      "W",
      "X",
      "Y",
      "Z"
    ];

    const cName = classNames("city-modal", {
      "city-modal--active": isOpened
    });

    return (
      <View className={cName}>
        <View
          className="city-modal__overlay"
          onClick={this.handleClose.bind(this)}
        ></View>
        <View className="city-modal__container">
          <View className="city_change">
            {!getUserSub && (
              <AtSearchBar
                showActionButton
                value={this.state.searchName}
                onChange={this.handleSearchChange.bind(this)}
                onActionClick={this.handleSearch.bind(this)}
              />
            )}
            <ScrollView
              className="city_bottom"
              scrollY
              scrollWithAnimation
              scrollTop={scrollTop}
              onScroll={this.onScroll}
            >
              {!getUserSub && (
                <View>
                  {searchCityData.length > 0 && (
                    <View className="place_city">
                      <View className="place_city_head">
                        <View className="location">搜索记录</View>
                      </View>
                      <View className="at-row at-row--wrap place_city_bottom">
                        {searchCityData.map((item, index) => {
                          const searchBoxClass = classNames(
                            "at-col",
                            "at-col-4",
                            {
                              potch_city: current.includes(item.id),
                              city: !current.includes(item.id)
                            }
                          );

                          return (
                            <View
                              key={item.id}
                              className={searchBoxClass}
                              onClick={this.handleChooseCity.bind(
                                this,
                                item.id,
                                item.name
                              )}
                            >
                              {item.name}
                            </View>
                          );
                        })}
                      </View>
                    </View>
                  )}

                  {/* <View className='place_city'>
                                        <View className='place_city_head'>
                                            <View className='location'>定位城市</View>
                                            <View>
                                                <Image src={positioning} className="picter" />
                                                <Text className='new_place'>重新定位</Text>
                                            </View>
                                        </View>
                                        <View className='at-row at-row--wrap place_city_bottom'>
                                        {current.indexOf(2) === -1 ?
                                                <View className='at-col at-col-4 city' onClick={this.choose_city.bind(this, 2)}>长沙长沙长沙</View>
                                                :
                                                <View className='at-col at-col-4 potch_city' onClick={this.choose_city.bind(this, 2)}>长沙长沙长沙</View>
                                            }
                                        </View>
                                    </View> */}
                  <View className="place_city">
                    <View className="place_city_head">
                      <View className="location">热门城市</View>
                    </View>
                    <View className="at-row at-row--wrap place_city_bottom">
                      {hotCityData.map((item, index) => {
                        const searchBoxClass = classNames(
                          "at-col",
                          "at-col-4",
                          {
                            potch_city: current.includes(item.id),
                            city: !current.includes(item.id)
                          }
                        );

                        return (
                          <View
                            key={item.id}
                            className={searchBoxClass}
                            onClick={this.handleChooseCity.bind(
                              this,
                              item.id,
                              item.name
                            )}
                          >
                            {item.name}
                          </View>
                        );
                      })}
                    </View>
                  </View>
                </View>
              )}

              <View className="place_city">
                <View className="place_city_head">
                  <View className="location">字母索引</View>
                </View>
                <View className="at-row at-row--wrap place_city_bottom">
                  {character.map((item, index) => {
                    return (
                      <View
                        key={item}
                        className="at-col at-col-1 citys"
                        onClick={this.gotoAnchor.bind(this, item)}
                      >
                        {item}
                      </View>
                    );
                  })}
                </View>
              </View>

              <View>
                {cityData.map(letterItem => {
                  return (
                    <View className="place_city" key={letterItem.key}>
                      <View className="place_city_head">
                        <View className="location" id={letterItem.key}>
                          {letterItem.title}
                        </View>
                      </View>
                      <View className="at-row at-row--wrap place_city_bottom">
                        {letterItem.items.map(item => {
                          const searchBoxClass = classNames(
                            "at-col",
                            "at-col-4",
                            {
                              potch_city: current.includes(item.id),
                              city: !current.includes(item.id)
                            }
                          );

                          return (
                            <View
                              key={item.id}
                              className={searchBoxClass}
                              onClick={this.handleChooseCity.bind(
                                this,
                                item.id,
                                item.name
                              )}
                            >
                              {item.name}
                            </View>
                          );
                        })}
                      </View>
                    </View>
                  );
                })}
              </View>
            </ScrollView>
            <View>
              {currentLength === 0 ? (
                <Button
                  className="no_choose"
                  onClick={this.handleClose.bind(this)}
                >
                  取消
                </Button>
              ) : (
                <Button
                  className="choose"
                  onClick={this.handleClose.bind(this, 1)}
                >
                  确定（已选：{currentLength}）
                </Button>
              )}
            </View>
          </View>
        </View>
      </View>
    );
  }
}

.city-modal {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  visibility: hidden;
  -webkit-transition: visibility 200ms ease-in;
  -o-transition: visibility 200ms ease-in;
  transition: visibility 200ms ease-in;
  z-index: 99999;

  .city-modal__overlay {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    position: absolute;
    background-color: rgba(0, 0, 0, 0.3);
    // z-index: 2000;
    opacity: 0;
    display: none;
  }

  .city-modal__container {
    height: 85vh;
    width: 98vw;
    position: absolute;
    left: 1vw;
    bottom: 0;
    -webkit-transform: unset;
    -ms-transform: unset;
    transform: unset;
    border-radius: 12px;
    background-color: #fff;
    overflow: hidden;
    -webkit-transition: opacity 200ms ease-in;
    -o-transition: opacity 200ms ease-in;
    transition: opacity 200ms ease-in;
    z-index: 999;
    opacity: 0;
    display: none;

    .city_change {
      // height: 5000px;
      .city_bottom {
        margin-bottom: 20px;
        overflow: scroll;
        position: relative;
        height: 71vh;

        .place_city {
          padding: 0 25px;
          margin-top: 10px;

          :after {
            content: "";
            width: 215px;
          }

          .place_city_head {
            display: flex;

            .location {
              font-size: 30px;
              color: #333333;
              font-weight: bold;
              flex: 1;
            }

            .picter {
              width: 26px;
              height: 36px;
            }

            .new_place {
              font-size: 30px;
              color: #ebc87f;
              margin-left: 18px;
            }
          }

          .place_city_bottom {
            display: flex;
            justify-content: space-between;
            flex-flow: row wrap;

            .city {
              font-size: 30px;
              color: #333333;
              background-color: #f7f7f7;
              min-width: 200px;
              text-align: center;
              margin-top: 23px;
              padding: 10px;
            }

            .citys {
              font-size: 30px;
              color: #333333;
              background-color: #f7f7f7;
              min-width: 76px;
              text-align: center;
              margin-top: 10px;
              margin-left: 10px;
            }

            .potch_city {
              font-size: 30px;
              color: #ffffff;
              background-color: #ebc87f;
              min-width: 200px;
              text-align: center;
              padding: 15px 5px;
              margin-top: 23px;
              padding: 10px;
            }
          }
        }
      }
      .no_choose&&.choose::after {
        display: none;
      }
      .no_choose {
        font-size: 35.75px;
        color: #ffffff;
        background-color: #d2d2d2;
        width: 90%;
        border-radius: 50px;
        bottom: 40px;
        margin: 10px auto 30px auto;
        border-radius: 50px;
        z-index: 99999;
      }

      .choose {
        font-size: 35.75px;
        color: #ffffff;
        background-color: #ebc87f;
        width: 90%;
        bottom: 40px;
        margin: 10px auto 30px auto;
        border-radius: 50px;
        z-index: 99999;
      }
    }
  }
}

.city-modal--active {
  visibility: visible;

  .city-modal__overlay {
    opacity: 1;
    display: block;
  }

  .city-modal__container {
    opacity: 1;
    display: block;
  }
}

.at-search-bar__placeholder-wrap {
  display: block;
  line-height: 30px;
}