taro Indexes 索引选择器实战

图片.png
/* eslint-disable prefer-arrow-callback */
import Taro, { Component } from "@tarojs/taro";
import {
  View,
  Image,
  Text,
  ScrollView,
  Button,
  Picker
} from "@tarojs/components";
import {
  AtSearchBar,
  AtFloatLayout,
  AtTag,
  AtModal,
  AtModalAction,
  AtModalContent,
  AtIndexes
} from "taro-ui";
import lookDetail from "./images/lookDetail.png";
import sex_gril from "../../../pages/vein/card/images/sex_gril.png";
import sex_boy from "../../../pages/vein/card/images/sex_boy.png";
import callphone from "./images/phone.svg";
import api from "../../../utils/network/request";
import user from "../../../utils/auth/user";
import close from "../../../assets/images/close.png";
import screen from "../../../pages/user/company/images/screen.png";
import del from "../../../pages/user/company/images/del.svg";
import caret from "./images/caret-down.png";

import "./cell.less";

export default class Index extends Taro.Component {
  config = {
    navigationBarTitleText: "商会通讯录",
    navigationBarBackgroundColor: "#ECC97A"
  };

  state = {
    searchValue: "",
    setLog: "",
    sessionIsOpened: false,
    PostOpened: false,
    active_pos_id: 0,
    phone: "",
    id: 0,
    active_post: {},
    // 届数
    active_session: { member_num: 0, session: 1 },
    lists: [],
    sessionLists: [],
    postList: [],
    session: 0,
    coc_id: 0,
    position_id: 0,
    position: "",
    addressBooksList: [],
    bookList: [],
    scrollTop: "",
    levelName: "全部",
    isShowGetUser: false,
    cityNames: "",
    home_province_id: "",
    home_city_id: "",
    home_district_id: ""
  };

  componentWillMount() {}

  componentDidMount() {
    const coc_id = this.$router.params.id;
    if (coc_id === undefined) {
      return false;
    }
    this.setState({ coc_id: coc_id });
    this.getSessionList(coc_id, 1);
  }

  componentDidShow() {
    this.getScopeUserInfo();
  }
  getScopeUserInfo() {
    Taro.getSetting({
      success: res => {
        if (!res.authSetting["scope.userInfo"]) {
          this.setState({ isShowGetUser: true });
        }
      }
    });
  }

  // 搜索框
  onSearchChange(value) {
    this.setState({
      searchValue: value
    });
  }
  // 届数接口
  getSessionList(coc_id) {
    const _this = this;
    api.request({
      method: "POST",
      url: "/coc/session",
      data: {
        access_token: user.getToken(),
        coc_id: coc_id
      },
      success: function(res) {
        const sessionLists = res.data.result;
        _this.setState({
          sessionLists: sessionLists
        });
        if (sessionLists[0] !== undefined) {
          _this.setState(
            {
              active_session: sessionLists[0]
            },
            () => {
              _this.getCellList();
              _this.getPositionList();
            }
          );
        }
      },
      error: function(res) {}
    });
  }

  // 获取职务列表的接口
  getPositionList = () => {
    const _this = this;
    api.request({
      method: "POST",
      url: "/coc/position",
      data: {
        access_token: user.getToken(),
        session: this.state.active_session.session,
        coc_id: this.state.coc_id
      },
      success: function(res) {
        res.data.result.unshift({
          desc: "",
          equity: null,
          id: 0,
          last_payment_time: 1609372800,
          member_num: 1,
          name: "全部",
          pay_freq: 1,
          price: "0.00",
          unit: 0
        });
        _this.setState({
          postList: res.data.result
        });
      },
      error: function(res) {}
    });
  };

  // 商会通讯录接口   默认返回当届通讯录
  getCellList(position_id) {
    let position = 0;
    if (position_id !== undefined) {
      position = position_id;
    } else if (this.state.active_post.id !== undefined) {
      position = this.state.active_post.id;
    }
    api.request({
      methods: "POST",
      url: "/coc/book",
      data: {
        access_token: user.getToken(),
        coc_id: this.$router.params.id,
        session:
          this.state.active_session.session === undefined
            ? 1
            : this.state.active_session.session,
        position_id: position,
        home_province_id:
          this.state.home_province_id === undefined
            ? ""
            : this.state.home_province_id,
        home_city_id:
          this.state.home_city_id === undefined ? "" : this.state.home_city_id,
        home_district_id:
          this.state.home_district_id === undefined
            ? ""
            : this.state.home_district_id,
        name:
          this.state.searchValue === undefined ? "" : this.state.searchValue,
        num: 9999
      },
      success: response => {
        if (response.data.code == 1007) {
          Taro.showToast({
            title: "您不是当届商会会员，无权访问该届通讯录",
            icon: "none",
            duration: 1000
          });
          return;
        }
        if (response.data.result.length > 0) {
          if (response.data.result.length > 3) {
            Taro.showLoading({
              title: "加载中"
            });
            setTimeout(function() {
              Taro.hideLoading();
            }, 2000);
          }

          const bookList = [];
          response.data.result.map(item => {
            bookList.push({ key: item.key });
          });
          this.setState({ addressBooksList: response.data.result, bookList });
        } else {
          this.setState({ addressBooksList: [], bookList: [] });
        }
      },
      error: response => {}
    });
  }
  // 打开届数职务筛选界面
  handleSessionOpened() {
    this.setState({
      sessionIsOpened: true
    });
  }
  // 关闭届数职务筛选界面
  handleSessionClose() {
    this.setState({
      sessionIsOpened: false
    });
  }

  // 搜索框
  submitSearch() {
    this.getCellList();
  }

  // 职务选择事件
  onSelectPost(position) {
    const that = this;
    this.setState(
      {
        active_post: position
      },
      () => {
        // this.handleSessionClose();
        // this.getCellList(position.id);
      }
    );
  }

  // 届数选择事件
  onSelectClick(sessiones) {
    const that = this;
    this.setState(
      {
        active_session: sessiones
      },
      () => {
        this.getPositionList();
        // this.handleSessionClose();
        // this.getCellList();
      }
    );
  }
  //重置
  reset() {
    this.setState({
      active_session: { session: 1 },
      active_post: "",
      addressBooksList: [],
      bookList: []
    });
  }
  //确定
  sure() {
    this.handleSessionClose();
    this.getCellList(this.state.active_post.id);
  }
  // 右边icon点击事件
  handleRightIconClick(item, e) {
    e.stopPropagation();
    if (item.phone.length === 0) {
      Taro.showToast({
        title: "该会员还未绑定手机号哦",
        icon: "none",
        duration: 1500
      });
    } else {
      this.makeCall(item.phone);
    }
  }

  // 拨打电话
  makeCall = phone => {
    if (phone.length === 0) {
      Taro.showToast({
        title: "该会员还未绑定手机号哦",
        icon: "none",
        duration: 1500
      });
    } else {
      Taro.makePhoneCall({
        phoneNumber: phone,
        success: function() {}
      });
    }
  };

  goToIndex = key => {
    const { addressBooksList = [] } = this.state;
    let i = 0;
    let child = 0;
    for (let is = 0; is <= addressBooksList.length; is++) {
      if (addressBooksList[is].key === key) {
        break;
      }
      i++;
      child += addressBooksList[is].items.length;
    }
    Taro.showToast({
      title: key,
      icon: "none",
      duration: 1000
    });
    this.setState({
      scrollTop: i * 21 + child * 160
    });
  };

  gotoNameCard = id => {
    // 名片详情的跳转
    Taro.navigateTo({
      url: `/coc/pages/bookMember/index?id=${id}&&coc_id=${this.$router.params.id}`
    });
  };
  getUserInfo = res => {
    user.syncWxUser(res);
  };

  render() {
    const {
      isShowGetUser,
      bookList,
      scrollTop,
      addressBooksList,
      SelecCty = [],
      cityNames
    } = this.state;
    return (
      <View className="cell">
        {isShowGetUser && (
          <AtModal isOpened>
            <AtModalContent className="app_use">
              获取用户信息授权
            </AtModalContent>
            <AtModalAction>
              <Button
                openType="getUserInfo"
                onGetUserInfo={this.getUserInfo}
                onClick={() => this.setState({ isShowGetUser: false })}
              >
                知道了
              </Button>
            </AtModalAction>
          </AtModal>
        )}
        <View className="header">
          <AtSearchBar
            showActionButton
            placeholder="姓名"
            value={this.state.searchValue}
            onChange={this.onSearchChange.bind(this)}
            onActionClick={this.submitSearch.bind(this)}
          />
        </View>
        <View className="content">
          <View
            className="content-post"
            onClick={this.handleSessionOpened.bind(this)}
          >
            {this.state.active_session.session ? (
              <View className="post-del">
                <View className="post-detail">
                  第{this.state.active_session.session}届
                  {this.state.active_post.name}
                </View>
              </View>
            ) : (
              <View onClick={this.handleSessionOpened.bind(this)}>
                届与职务
              </View>
            )}

            <Image
              src={caret}
              className="caret-img"
              onClick={this.handleSessionOpened.bind(this)}
            />
          </View>
          {/*籍贯 */}
          <View className="content-address">
            <Picker
              custom-item="全部"
              mode="region"
              value={SelecCty}
              onChange={e => {
                this.setState(
                  {
                    cityNames: e.detail.value,
                    home_province_id: e.target.code[0],
                    home_city_id: e.target.code[1],
                    home_district_id: e.target.code[2],
                    SelecCty: e.target.code
                  },
                  () => this.getCellList()
                );
              }}
            >
              {cityNames ? (
                <View className="address">
                  {cityNames[0] == "全部" ? (
                    <Text>籍贯</Text>
                  ) : (
                    <Text>
                      {cityNames[0]}
                      {cityNames[2]}
                    </Text>
                  )}

                  <Image src={caret} className="caret-img" />
                </View>
              ) : (
                <View className="address">
                  <Text>籍贯</Text> <Image src={caret} className="caret-img" />
                </View>
              )}
            </Picker>
          </View>
        </View>
        <AtFloatLayout
          className="pop-up"
          isOpened={this.state.sessionIsOpened}
          onClose={this.handleSessionClose.bind(this)}
        >
          <View>
            <View className="action">
              <View className="title">请选择届与职务</View>
              <Image
                src={close}
                className="close"
                onClick={this.handleSessionClose.bind(this)}
              ></Image>
            </View>
            <View className="navTitle">届别</View>
            <View className="at-row at-row--wrap">
              {this.state.sessionLists &&
                this.state.sessionLists.map((item, index) => {
                  return (
                    <AtTag
                      key={item.id}
                      circle
                      className="at-col at-col-4 min-160"
                      active={
                        this.state.active_session.session === item.session
                      }
                      onClick={this.onSelectClick.bind(this, item)}
                    >
                      第{item.session}届
                    </AtTag>
                  );
                })}
            </View>
            <View className="navTitle">职务</View>
            <View className="at-row at-row--wrap">
              {this.state.postList &&
                this.state.postList.map((item, index) => {
                  return (
                    <AtTag
                      circle
                      className="at-col at-col-4 min-160"
                      active={this.state.active_post.name === item.name}
                      onClick={this.onSelectPost.bind(this, item)}
                      key={item.id}
                    >
                      {item.name}
                    </AtTag>
                  );
                })}
            </View>

            <View className="footerAction">
              <View className="reset" onClick={this.reset.bind(this)}>
                重置
              </View>
              <View className="sure" onClick={this.sure.bind(this)}>
                确定
              </View>
            </View>
          </View>
        </AtFloatLayout>
        <View className="footer">
          <View>
            <ScrollView
              className="scrollview"
              scrollY
              scrollWithAnimation
              scrollTop={scrollTop}
            >
              <View style="height:72vh" className="footer">
                <View>
                  {/* 通讯录 */}
                  <AtIndexes
                    topKey=""
                    rightIcon="phone"
                    isVibrate={false}
                    isShowToast={true}
                    onScroll={e => console.log(e)}
                    onRightIconClick={this.handleRightIconClick.bind(this)}
                  >
                    {addressBooksList.length == 0 && (
                      <View className="tips">暂无数据</View>
                    )}
                    {addressBooksList.map(title => {
                      return (
                        <View key={title.key}>
                          <View className="mail-key">{title.key}</View>
                          {title.items.map(item => {
                            return (
                              <View className="mail" key={item.id}>
                                <View className="mail-top">
                                  <View>
                                    <Image className="logo" src={item.avatar} />
                                  </View>
                                  <View>
                                    <View className="mail-left">
                                      <Text
                                        className="mail-name"
                                        style={{ WebkitBoxOrient: "vertical" }}
                                      >
                                        {item.name}
                                      </Text>
                                      <Text
                                        className="mail-post"
                                        style={{ WebkitBoxOrient: "vertical" }}
                                      >
                                        {item.position.name}
                                      </Text>
                                      <Image
                                        src={
                                          item.sex === 0 ? sex_boy : sex_gril
                                        }
                                        className="sex"
                                      ></Image>
                                    </View>
                                    {item.native_place && (
                                      <View className="words m-10">
                                        籍贯：{item.native_place}
                                      </View>
                                    )}

                                    <View
                                      className="words"
                                      style={{ WebkitBoxOrient: "vertical" }}
                                    >
                                      {item.company.company_name}
                                    </View>
                                  </View>
                                </View>
                                <View className="mail-bottom">
                                  <View
                                    onClick={this.makeCall.bind(
                                      this,
                                      item.telephone
                                    )}
                                    className="detail b-r-1"
                                  >
                                    <Image className="back" src={callphone} />
                                    <View className="look">拨打电话</View>
                                  </View>
                                  <View
                                    className="detail"
                                    onClick={this.gotoNameCard.bind(
                                      this,
                                      item.id
                                    )}
                                  >
                                    <Image className="back" src={lookDetail} />
                                    <View className="look">查看详情</View>
                                  </View>
                                </View>
                              </View>
                            );
                          })}
                        </View>
                      );
                    })}
                  </AtIndexes>
                </View>
              </View>

              <View style="height:8rpx" />
            </ScrollView>
          </View>
        </View>
        {/* 右侧索引英文 */}
        <View className="charterBox">
          {bookList.map(item => {
            return (
              <View key={item.key} onClick={e => this.goToIndex(item.key)}>
                {item.key}
              </View>
            );
          })}
        </View>
      </View>
    );
  }
}



.at-modal__content {
  padding: 50px 24px 72px 24px;
  min-height: 0px !important;
  color: #353535;
  font-size: 30px;
  box-sizing: content-box;
  width: auto;
}
.at-float-layout__container{
  min-height: 80vh;
}
.app_use {
  text-align: center;
}
.at-search-bar__action {
  background-color: #ffffff;
  color: #333333;
}

.at-accordion__header::after {
  border: 0 solid #f3f3f3;
}

// 手风琴居中
.at-accordion__info__title {
  text-align: center;
  color: #333333;
  font-size: 30px;
  font-weight: bold;
}

// 届数筛选弹框样式
.min-160 {
  min-width: 195px !important;
  margin-right: 30px !important;
  border-radius: 6px;
  color: #999999;
  border: 1px solid rgba(221, 221, 221, 1);
}
.at-tag {
  height: 60px;
  line-height: 60px;
  background: #ffffff;
}
// 届数筛选按钮颜色
.at-tag--active {
  background-color: #ebc87f;
  border: 0;
  color: #ffffff;
  font-size: 28px;
  border-radius: 6px;
  border: 1px solid rgba(235, 200, 127, 1);
}

.pop-up {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.action {
  width: 695px;
  height: 100px;
  margin: 0 auto;
  line-height: 100px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  .title {
    font-size: 30px;
    color: #333333;
  }
  .close {
    width: 25px;
    height: 25px;
    display: inline-block;
  }
}
.navTitle {
  width: 695px;
  height: 100px;
  margin: 0 auto;
  line-height: 100px;
}
.at-col {
  flex: 1;
  width: 90%;
  min-width: 25%;
  max-width: 100%;
  margin: 15px 15px;
}
.footerAction {
  position: fixed;
  left: 205px;
  bottom: 40px;
  width: 350px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  .reset {
    width: 146px;
    height: 60px;
    line-height: 60px;
    text-align: center;
    border-radius: 41px;
    border: 1px solid rgba(235, 200, 127, 1);
    font-size: 30px;
    color: #ebc87f;
  }
  .sure {
    width: 146px;
    height: 60px;
    line-height: 60px;
    text-align: center;
    border-radius: 41px;
    font-size: 30px;
    background: #ebc87f;
    color: #ffffff;
  }
}
.cell {
  .at-row {
    font-size: 36px;
    color: #333333;
  }

  .content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 22px 30px;
    border-bottom: 1px solid #f3f3f3;
    font-size: 30px;

    .content-post {
      display: flex;
      align-items: center;

      .post-del {
        position: relative;

        .caret-del {
          width: 18px;
          height: 18px;
          position: absolute;
          top: 0px;
          right: -8px;
        }
      }

      .caret-img {
        width: 15px;
        height: 9px;
        padding: 12px 20px;
      }
    }
    .content-address {
      .address {
        display: flex;
        align-items: center;
        .caret-img {
          width: 15px;
          height: 9px;
          padding: 12px 20px;
        }
      }
    }
    .session-detail {
      display: flex;
      align-items: center;

      .personnel {
        flex: 1;
        color: #111111;
      }

      .screen-img {
        width: 30px;
        height: 30px;
      }
    }
  }

  .footer {
    padding: 0 15px;
    padding-bottom: 160px;

    .mail {
      width: 647px;
      height: 294px;
      box-shadow: 0px 3px 10px 0px rgba(0, 0, 0, 0.1);
      border-radius: 12px;
      margin: 0 0 26px 10px;

      .mail-top {
        display: flex;
        height: 219px;
        align-items: center;
        border-bottom: 1px solid #e6e6e6;

        .logo {
          width: 160px;
          height: 160px;
          border-radius: 100%;
          margin: 0 20px;
        }

        .mail-left {
          display: flex;
          align-items: center;

          .mail-name {
            font-size: 32px;
            color: #333333;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 1;
            -webkit-box-orient: vertical;
            max-width: 230px;
          }

          .mail-post {
            font-size: 24px;
            color: #666666;
            margin: 0 10px;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 1;
            -webkit-box-orient: vertical;
            max-width: 150px;
          }

          .sex {
            width: 30px;
            height: 30px;
          }
        }

        .m-10 {
          margin: 10px 0;
        }

        .words {
          font-size: 22px;
          color: #999999;
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-line-clamp: 2;
          -webkit-box-orient: vertical;
        }
      }

      .mail-bottom {
        display: flex;
        height: 74px;
        align-items: center;

        .b-r-1 {
          border-right: 1px solid #e6e6e6;
        }

        .detail {
          display: flex;
          align-items: center;
          width: 323px;
          justify-content: center;

          .back {
            width: 40px;
            height: 40px;
            margin-right: 21px;
          }

          .look {
            font-size: 28px;
            color: #999999;
          }
        }
      }
    }
  }
  .charterBox {
    position: fixed;
    right: 0;
    top: 168px;
    width: 30px;
    font-size: 24px;
    line-height: 2;
    background-color: #ffffff;
    z-index: 100;
    height: 100vh;
  }
  .tips {
    padding-top: 50%;
    font-size: 28px;
    color: #888888;
    text-align: center;
  }
}
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 217,509评论 6赞 504
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 92,806评论 3赞 394
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 163,875评论 0赞 354
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 58,441评论 1赞 293
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 67,488评论 6赞 392
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 51,365评论 1赞 302
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 40,190评论 3赞 418
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 39,062评论 0赞 276
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 45,500评论 1赞 314
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,706评论 3赞 335
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,834评论 1赞 347
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 35,559评论 5赞 345
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 41,167评论 3赞 328
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,779评论 0赞 22
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,912评论 1赞 269
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 47,958评论 2赞 370
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 44,779评论 2赞 354