美文网首页
Taro/微信小程序 swiper

Taro/微信小程序 swiper

作者: 逸笛 | 来源:发表于2021-08-31 11:32 被阅读0次

实战1：


WPS图片编辑.png

实战2：


图片.png

实战1：

/* eslint-disable indent */
import Taro from "@tarojs/taro";
import {
  View,
  Text,
  Image,
  Swiper,
  SwiperItem,
  Button
} from "@tarojs/components";
import api from "../../../utils/network/request";
import user from "../../../utils/auth/user";
import book from "./asset/book.png";
import website from "./asset/website.png";
import invite from "./asset/invite.png";
import check from "./asset/check.png";
import editCompany from "./asset/editCompany.png";
import editCard from "./asset/editCard.png";
import review from "./asset/review.png";
import share from "./asset/share.png";
import bg from "./asset/cardBg.svg";
import phone from "./asset/phone.png";
import look from "./asset/look.png";
import defaultImg from "./asset/default.png";
import unselect from "./asset/unselect.png";
import _ from "lodash";
import "./index.less";

export default class Index extends Taro.Component {
  config = {
    navigationBarTitleText: "我的名片",
    navigationBarBackgroundColor: "#FFFFFF",
    navigationBarTextStyle: "black"
  };
  state = {
    list: [],
    nowIdx: 0,
    defaultCardId: 0,
    companyOpen: false,
    cardData: {},
    isSected: false
  };
  componentDidShow() {
    if (Taro.getStorageSync("setCard")) {
      this.getMyCardList();
    }
  }
  componentWillMount() {
    this.getMyCardList();
  }
  componentWillUnmount() {
    Taro.removeStorageSync("setCardId");
  }
  getMyCardList() {
    api.request({
      methods: "POST",
      url: "/card/myList",
      data: {
        access_token: user.getToken()
      },
      success: response => {
        let defaultCardId = "";
        let dataList = [];
        let newsState = [];
        let newItem = {};
        for (const i in response.data.result) {
          //默认名片
          if (response.data.result[i].top == 1) {
            defaultCardId = response.data.result[i].id;
            newItem = response.data.result[i];
            this.setState({
              isSected: true,
              cardData: response.data.result[i]
            });
          } else {
            //2.没有默认名片
            if (response.data.result[i].state == 2) {
              dataList.push(_.clone(response.data.result[i]));
            } else {
              newsState.push(_.clone(response.data.result[i]));
            }
          }
        }
        dataList = [..._.clone(dataList), ..._.clone(newsState)];
        if (newItem.id !== undefined) {
          dataList = [_.clone(newItem), ..._.clone(dataList)];
        }
        if (defaultCardId == "") {
          if (dataList.length !== 0) defaultCardId = dataList[0].id;
          this.setState({ isSected: true, cardData: dataList[0] });
          this.handleSetDefaultCard(dataList[0].id);
        }
        this.setState({ indentList: dataList, defaultCardId: defaultCardId });
      },
      error: e => {}
    });
  }
  goToAddressBooks = id => {
    Taro.navigateTo({
      url: `/pages/user/company/book?company_id=${id}`
    });
  };
  // 名片设置
  gotoRevision = card_id => {
    if (this.state.defaultCardId == card_id) {
      Taro.navigateTo({
        url: `/pages/user/company/set?card_id=${card_id}&&isDefault=${1}`
      });
      return;
    }
    Taro.navigateTo({
      url: `/pages/user/company/set?card_id=${card_id}`
    });
  };
  // 推荐产品
  goProductRec = (card_id, company_id) => {
    Taro.navigateTo({
      url: `/pages/mall/index?card_id=${card_id}&company_id=${company_id}`
    });
  };
  // 名片预览
  goToCard = card_id => {
    Taro.navigateTo({
      url: `/pages/vein/card/card?id=${card_id}&typesgo=wo`
    });
  };
  // 员工审核
  goToCheck = () => {
    Taro.showToast({
      title: "等待升级中！",
      icon: "none",
      duration: 1500
    });
  };
  goEditCompany = () => {
    Taro.showToast({
      title: "等待升级中！",
      icon: "none",
      duration: 1500
    });
  };
  goWebsite() {
    Taro.navigateTo({
      url: `/pages/vein/card/index?&&company_url=${this.state.cardData.company_url}`
    });
  }
  handleSetDefaultCard(card_id) {
    api.request({
      methods: "POST",
      url: "/card/setDefault",
      data: {
        access_token: user.getToken(),
        card_id: card_id
      },
      success: response => {
        if (response.data.code === 1000) {
          this.setState({
            defaultCardId: card_id,
            isSected: true
          });
          user.flushDefaultCard();
          Taro.showToast({
            title: "设置默认名片成功",
            icon: "none",
            duration: 2000
          });
        } else {
          Taro.showToast({
            title: "设置失败，请重试",
            icon: "none",
            duration: 2000
          });
        }
      },
      error: e => {}
    });
  }
  // 菜单提示
  stateTips(state) {
    if (state !== 2) {
      Taro.showToast({
        title: `抱歉，您目前处于${
          state === 1
            ? "待审核"
            : state === 3
            ? "已冻结"
            : state === 4
            ? "已注销"
            : ""
        }状态，无法使用此功能`,
        icon: "none",
        duration: 1500
      });
    }
  }
  // swiper滑动事件
  swiperChange = e => {
    const { indentList } = this.state;
    indentList.map((item, index) => {
      if (index == e.detail.current) {
        this.setState({
          nowIdx: index,
          cardData: item,
          isSected: item.id == this.state.defaultCardId
        });
      }
    });
  };
  /**
   * 用户点击右上角分享
   */
  onShareAppMessage(res) {
    if (res.from === "button") {
      // 来自页面内转发按钮
      if (res.target.id == 1) {
        return {
          title: `欢迎浏览${this.state.cardData.name}的名片哦！`,
          path: `/pages/vein/card/card?id=${this.state.cardData.id}&typesgo=wo`
        };
      }
      if (res.target.id == 2) {
        return {
          title: `${this.state.cardData.name}邀请您加入公司`,
          path: `/pages/join_company/index?company_id=${this.state.cardData.company_id}&card_id=${this.state.cardData.id}`
        };
      } else {
        return {
          title: "欢迎浏览我的名片哦！",
          path: "pages/user/company/index"
        };
      }
    }
  }
  // 复制公司地址
  setClipboardData() {
    Taro.setClipboardData({
      data: "http://company.chief-info.com/",
      success(res) {
        Taro.getClipboardData();
      }
    });
  }
  render() {
    const { cardData, indentList, nowIdx, isSected } = this.state;
    return (
      <View className="myCardPage">
        <Swiper
          previousMargin="25px"
          nextMargin="25px"
          onChange={this.swiperChange}
          className="swiper-style"
          circular
          interval="2000"
          autoplay={false}
        >
          {/* state状态 1待审核 2正常 3冻结 4离职  */}
          {indentList &&
            indentList.map((item, index) => {
              return (
                <SwiperItem>
                  <View
                    className={`content ${
                      nowIdx === index ? "swiper-active" : ""
                    }`}
                  >
                    <Image className="bg" src={bg} />
                    <View className="cardInfos">
                      {item.state != 2 && (
                        <View className="state">
                          {item.state === 1
                            ? "待审核"
                            : item.state === 3
                            ? "已冻结"
                            : item.state === 4
                            ? "已注销"
                            : ""}
                        </View>
                      )}

                      <View className="cardInfo">
                        <Image src={item.avatar} className="logo"></Image>
                        <Text className="companyName">{item.company.name}</Text>
                        <Text className="post">{item.company.position}</Text>
                        <View className="phonePrivacy">
                          <View className="cardBox">
                            <Image src={phone} className="cardIcon"></Image>
                            <Text className="txt">{item.phone}</Text>
                          </View>
                          <View className="cardBox">
                            <Image src={look} className="cardIcon"></Image>
                            <Text className="txt">
                              {item.privacy === 0
                                ? "所有人可见"
                                : item.privacy === 1
                                ? "仅同商会可见"
                                : item.privacy === 2
                                ? "仅有名片者可见"
                                : item.privacy === 3
                                ? "仅申请查看通过后可见"
                                : ""}
                            </Text>
                          </View>
                        </View>
                      </View>
                    </View>
                  </View>
                </SwiperItem>
              );
            })}
        </Swiper>
        <View className="setDefault">
          <Text className="tips">设为首页默认名片</Text>
          <Image
            className="defaultImg"
            onClick={
              cardData.state !== 2
                ? this.stateTips.bind(this, cardData.state)
                : this.handleSetDefaultCard.bind(this, cardData.id)
            }
            src={isSected ? defaultImg : unselect}
          ></Image>
        </View>
        <View className="cardManage">
          <Text className="title">名片管理</Text>
          <View className="menu">
            <View
              className="itemView"
              onClick={
                cardData.state !== 2
                  ? this.stateTips.bind(this, cardData.state)
                  : this.gotoRevision.bind(this, cardData.id)
              }
            >
              <Image className="cardImg" src={editCard}></Image>
              <Text className="itemTxt">编辑名片</Text>
            </View>

            <View
              className="itemView"
              onClick={
                cardData.state !== 2
                  ? this.stateTips.bind(this, cardData.state)
                  : this.goToCard.bind(this, cardData.id)
              }
            >
              <Image className="cardImg" src={review}></Image>
              <Text className="itemTxt">预览</Text>
            </View>
            {cardData.state !== 2 ? (
              <View
                className="itemView"
                onClick={
                  cardData.state !== 2
                    ? this.stateTips.bind(this, cardData.state)
                    : ""
                }
              >
                <Image className="cardImg" src={share}></Image>
                <Text className="itemTxt">分享名片</Text>
              </View>
            ) : (
              <Button className="itemView" openType="share" plain="true" id="1">
                <Image className="cardImg" src={share}></Image>
                <Text className="itemTxt">分享名片</Text>
              </Button>
            )}
          </View>
        </View>
        <View className="companyManage">
          <Text className="title">公司管理</Text>
          <View className="menu">
            <View
              className="itemView"
              onClick={
                cardData.state !== 2
                  ? this.stateTips.bind(this, cardData.state)
                  : this.goEditCompany.bind(this, cardData.company_id)
              }
            >
              <Image className="companyImg" src={editCompany}></Image>
              <Text className="itemTxt">编辑公司</Text>
            </View>
            <View
              className="itemView"
              onClick={
                cardData.state !== 2
                  ? this.stateTips.bind(this, cardData.state)
                  : this.goToCheck.bind(this, cardData.company_id)
              }
            >
              <Image className="companyImg" src={check}></Image>
              <Text className="itemTxt">员工审核</Text>
            </View>

            <View
              className="itemView"
              onClick={
                cardData.state !== 2
                  ? this.stateTips.bind(this, cardData.state)
                  : this.goToAddressBooks.bind(this, cardData.company_id)
              }
            >
              <Image className="companyImg" src={book}></Image>
              <Text className="itemTxt">通讯录</Text>
            </View>
            <View
              className="itemView"
              onClick={
                cardData.state !== 2
                  ? this.stateTips.bind(this, cardData.state)
                  : this.goWebsite
              }
            >
              <Image className="companyImg" src={website}></Image>
              <Text className="itemTxt">微官网</Text>
            </View>
            {cardData.state !== 2 ? (
              <View
                className="itemView"
                onClick={
                  cardData.state !== 2
                    ? this.stateTips.bind(this, cardData.state)
                    : ""
                }
              >
                <Image className="companyImg" src={invite}></Image>
                <Text openType="share" className="itemTxt">
                  邀请人员
                </Text>
              </View>
            ) : (
              <Button className="itemView" openType="share" plain="true" id="2">
                <Image className="companyImg" src={invite}></Image>
                <Text openType="share" className="itemTxt">
                  邀请人员
                </Text>
              </Button>
            )}
          </View>
        </View>
        <View className="line"></View>
        <View
          className="companyLink"
          onClick={this.setClipboardData.bind(this)}
        >
          <Text className="link">
            公司管理地址：http://company.chief-info.com/
          </Text>
          <View className="clone">复制</View>
        </View>
      </View>
    );
  }
}


.myCardPage {
  width: 100%;
  overflow: hidden;
  background: rgba(255, 255, 255, 1);

  image {
    display: inline-block;
  }
  Text {
    display: inline-block;
  }
  .swiper-style {
    height: 378px;
    padding-top: 40px;
  }
  button[plain] {
    border: 0;
    margin: 0;
    padding: 0;
    line-height: 1.2;
  }
  .content {
    position: relative;
    width: 100%;
    height: 378px;
    transform: scale(0.9);
    transition: all 0.3s ease;
    .bg {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 378px;
    }
    .cardInfos {
      position: relative;
      left: 0;
      top: 0;
      .state {
        position: absolute;
        top: 2.5vh;
        right: 2.5vw;
        width: 100px;
        height: 48px;
        font-size: 24px;
        color: #ff4444;
        line-height: 48px;
        text-align: center;
        border-radius: 6px;
        border: 1px solid rgba(255, 68, 68, 1);
      }
      .cardInfo {
        display: flex;
        align-items: center;
        flex-direction: column;
        .logo {
          border-radius: 50%;
          margin-top: 30px;
          width: 120px;
          height: 120px;
          border: 2px solid rgba(255, 255, 255, 1);
        }
        .companyName {
          margin: 20px auto;
          color: #333333;
          font-size: 36px;
          font-weight: bold;
        }
        .post {
          color: #333333;
          font-size: 28px;
          margin-bottom: 30px;
        }
        .phonePrivacy {
          display: flex;
          align-items: center;
          .cardBox {
            display: flex;
            align-items: center;
            .cardIcon {
              margin-right: 10px;
              width: 30px;
              height: 30px;
            }
            .txt {
              color: #333333;
              font-size: 24px;
            }
          }
          .cardBox:first-child {
            margin-right: 90px;
          }
        }
      }
    }
  }

  .content.swiper-active {
    transform: scale(1); //放大缩放的效果
  }
  .setDefault {
    margin: 20px auto 50px auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 602px;
    .tips {
      color: #666666;
      font-size: 26px;
    }
    .defaultImg {
      width: 50px;
      height: 30px;
    }
  }
  //  名片管理
  .cardManage {
    margin-left: 24px;
    display: flex;
    flex-direction: column;
    .title {
      font-weight: bold;
      color: #333333;
      font-size: 36px;
    }
    .menu {
      width: 602px;
      margin: 40px auto 50px auto;
      display: flex;
      align-items: center;
      justify-content: space-between;
      .itemView {
        display: flex;
        flex-direction: column;
        align-items: center;

        .cardImg {
          width: 100px;
          height: 100px;
        }

        .itemTxt {
          margin-top: 24px;
          font-size: 26px;
          color: #333333;
        }
      }
    }
  }
  //  公司管理
  .companyManage {
    margin-left: 24px;
    display: flex;
    flex-direction: column;
    .title {
      font-weight: bold;
      color: #333333;
      font-size: 36px;
    }
    .menu {
      width: 642px;
      margin: 40px auto 50px auto;
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      .itemView {
        display: flex;
        flex-direction: column;
        align-items: center;

        .companyImg {
          width: 60px;
          height: 60px;
        }

        .itemTxt {
          margin-top: 24px;
          font-size: 26px;
          color: #333333;
        }
      }
      .itemView:nth-child(1) {
        margin-right: 76px;
      }
      .itemView:nth-child(2) {
        margin-right: 88px;
      }
      .itemView:nth-child(3) {
        margin-right: 114px;
      }
      .itemView:nth-child(5) {
        margin-top: 50px;
      }
    }
  }
  .line {
    height: 20px;
    background: #f5f5f5;
  }
  .companyLink {
    padding: 30px 24px 156px 30px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    .link {
      color: #666666;
      font-size: 26px;
    }
    .clone {
      font-size: 26px;
      color: #333333;
      text-align: center;
      width: 88px;
      height: 48px;
      line-height: 48px;
      background: rgba(255, 177, 0, 0.4);
      border-radius: 6px;
    }
  }
}

实战2：

/* eslint-disable indent */
import Taro, { Component } from "@tarojs/taro";
import { View, Image, Text, Swiper, SwiperItem } from "@tarojs/components";
import "./myBusiness.less";
import api from "../../utils/network/request";
import user from "../../utils/auth/user";
import tips from "./images/tips.png";
import Chevron_pre from "./images/Chevron_pre.png";
import Chevron_next from "./images/Chevron_next.png";
import defaultIcon from "./images/default.png";
import book from "./images/book.png";
import phone from "./images/phone.png";
import address from "./images/address.png";
import edit from "./images/edit.png";
import next from "./images/next.png";
import bg from "./images/bg.png";
import getTimes from "../../utils/time/time";
import QQMapWX from "../../utils/location/qqmap-wx-jssdk.js";

const qqmapsdk = new QQMapWX({
  key: "MP3BZ-T75WO-LYRWB-S45IC-B7THZ-RUFMT"
});
export default class Index extends Component {
  state = {
    isSetHidden: false,
    cocList: [],
    defaultCoc: {},
    cocID: "",
    current: 0,
    cocUserInfo: {}
  };

  config = {
    navigationBarTitleText: "我的商会",
    navigationBarBackgroundColor: "#EBC87F"
  };

  options = {
    addGlobalClass: false
  };

  componentDidShow() {
    this.getCocList();
  }

  getCocList = () => {
    api.request({
      method: "POST",
      url: "/coc/list",
      data: {
        access_token: user.getToken(),
        num: 999
      },
      success: res => {
        let coc = Taro.getStorageSync("temp_coc_info") || {};
        if (res.data.code === 1000) {
          if (coc.id !== undefined) {
            res.data.result.map((item, index) => {
              if (coc.id == item.id) {
                coc = item;
                this.setState({
                  current: index
                });
              }
            });
          } else if (res.data.result.length !== 0) {
            if (res.data.result[0].user_state == 1) {
              coc = res.data.result[0];
            }
          }
          this.setState({
            cocList: res.data.result,
            // 默认商会
            defaultCoc: coc,
            // 默认商会ID
            defaultCocId: coc.id
          });
        } else {
          Taro.showToast({
            title: res.data.message,
            icon: "none",
            duration: 2500
          });
        }
      }
    });
  };
  setDefault(item) {
    if (item.user_state !== 1) {
      Taro.showToast({
        title: `抱歉，您目前处于${
          item.user_state === 0
            ? "待审核"
            : item.user_state === 2
            ? "已冻结"
            : item.user_state === 3
            ? "已注销"
            : item.user_state === 4
            ? "待续费"
            : ""
        }状态，无法设为默认商会`,
        icon: "none",
        duration: 1500
      });
      return;
    }
    // Taro.setStorageSync("temp_coc_info", item);
    this.setState({
      defaultCocId: item.id
    });
    Taro.showToast({
      title: "设置默认商会成功",
      icon: "none",
      duration: 2000
    });
  }
  goBook(item) {
    if (item.canAccessBook == 0) {
      Taro.showToast({
        title: "暂无权限访问通讯录",
        icon: "none",
        duration: 2000
      });
      return;
    }
    Taro.navigateTo({
      url: `/coc/pages/cell/cell?id=${item.id}`
    });
  }
  makePhoneCall(item) {
    // 拨打电话
    if (item.telphone && item.telphone.length === 0) {
      Taro.showToast({
        title: "该商会还未绑定电话号码哦",
        icon: "none",
        duration: 1500
      });
    } else {
      Taro.makePhoneCall({
        phoneNumber: item.telphone,
        success: function() {}
      });
    }
  }
  goMap(item) {
    const loaction = item.address;
    qqmapsdk.geocoder({
      address: loaction,
      success: function(res) {
        res = res.result;
        Taro.openLocation({
          latitude: res.location.lat,
          longitude: res.location.lng,
          name: loaction,
          address: loaction
        });
      }
    });
  }
  goFeedback() {
    Taro.navigateTo({
      url: "/pages/myBusiness/feedBack/index"
    });
  }
  goSocialResume(item) {
    Taro.navigateTo({
      url: `/pages/myBusiness/socialResume/index?coc_id=${item.id}&&coc_user_id=${item.user.id}`
    });
  }
  prevImg(index) {
    const { cocList } = this.state;
    const nowIdx = index == 0 ? cocList.length - 1 : index - 1;
    this.setState({
      current: nowIdx
    });
  }

  nextImg(index) {
    const { cocList } = this.state;
    const nowIdx = cocList.length == index + 1 ? 0 : index + 1;
    this.setState({
      current: nowIdx
    });
  }
  goAddResume(item) {
    Taro.navigateTo({
      url: `/pages/myBusiness/addResume/index?coc_id=${item.id}&&coc_user_id=${item.user.id}`
    });
  }
  goSetInfo(tag, item) {
    if (tag == 1) {
      Taro.navigateTo({
        url: `/pages/myBusiness/setMyInfo/index?coc_id=${item.id}&&coc_user_id=${item.user.id}&&describe=${item.user.describe}&&avatar=${item.user.avatar}`
      });
    }
    if (tag == 2) {
      Taro.navigateTo({
        url: `/pages/myBusiness/setMyInfo/setMyInfo?coc_id=${item.id}&&coc_user_id=${item.user.id}&&describe=${item.user.describe}&&&&avatar=${item.user.avatar}`
      });
    }
  }
  goBuyPostion(item) {
    Taro.redirectTo({
      url: `/coc/pages/join_union/identityCut/identityCut?coc_id=${item.id}`
    });
  }
  // 时间戳转换
  getTime = time => {
    return getTimes.getTime(time);
  };
  showTips() {
    Taro.showToast({
      title: "商会还没有给您添加履历，请联系商会！",
      icon: "none",
      duration: 1500
    });
  }
  render() {
    const { defaultCocId, cocList, current } = this.state;
    return (
      <View className="myBusiness_page">
        {/* 商会信息 */}
        <View className="cocViewTop">
          <Swiper className="cocSwiper" circular autoplay={false}>
            {cocList &&
              cocList.map((item, index) => {
                return (
                  <View className="swiperView">
                    {current == index ? (
                      <SwiperItem>
                        <Image className="bg" src={bg} />
                        <View className="cocInfos">
                          {/* <View className="defaultCoc">
                            {defaultCocId == item.id ? (
                              <Image
                                src={defaultIcon}
                                className="defaultIcon"
                              ></Image>
                            ) : (
                              ""
                            )}
                            {defaultCocId == item.id ? (
                              <Text className="defaultTxt">默认商会</Text>
                            ) : (
                              <Text
                                className="setDefaultTxt"
                                onClick={this.setDefault.bind(this, item)}
                              >
                                设为默认商会
                              </Text>
                            )}
                          </View> */}
                          <View className="cocInfo">
                            <Image className="cocLogo" src={item.logo}></Image>
                            <Text className="cocName">{item.name}</Text>
                            <View className="cocAll">
                              <View className="addressPhone">
                                <Image
                                  onClick={this.makePhoneCall.bind(this, item)}
                                  className="addressPhoneImg"
                                  src={phone}
                                ></Image>
                                <View className="line"></View>
                                <Image
                                  onClick={this.goMap.bind(this, item)}
                                  className="addressPhoneImg"
                                  src={address}
                                ></Image>
                              </View>

                              <View
                                onClick={this.goMap.bind(this, item)}
                                className="address"
                                style={{ WebkitBoxOrient: "vertical" }}
                              >
                                {item.address}
                              </View>
                            </View>
                          </View>
                        </View>
                      </SwiperItem>
                    ) : (
                      ""
                    )}
                    <View
                      className="prevView"
                      onClick={this.prevImg.bind(this, current)}
                    >
                      <Image className="prev arrow" src={Chevron_pre}></Image>
                    </View>
                    <View
                      className="nextView"
                      onClick={e => this.nextImg(current)}
                    >
                      <Image className="next arrow" src={Chevron_next}></Image>
                    </View>
                  </View>
                );
              })}
          </Swiper>
        </View>
        {cocList &&
          cocList.map((item, index) => {
            return (
              <View>
                {current == index ? (
                  <View className="bookIdea">
                    <View
                      className="bookIdeaItem"
                      onClick={this.goBook.bind(this, item)}
                    >
                      <View className="bookIdeaItemView">
                        <Image className="bookIdeaItemImg" src={book}></Image>
                        <Text className="bookIdeaItemTitle">通讯录</Text>
                      </View>
                      <View className="bookIdeaItemView">
                        <Text className="bookIdeaItemTxt">
                          共{item.member_count}人
                        </Text>
                        <Image className="next" src={next}></Image>
                      </View>
                    </View>
                    <View className="line"></View>
                    <View
                      className="bookIdeaItem"
                      onClick={this.goFeedback.bind(this)}
                    >
                      <View className="bookIdeaItemView">
                        <Image className="bookIdeaItemImg" src={edit}></Image>
                        <Text className="bookIdeaItemTitle">意见反馈</Text>
                      </View>
                      <View className="bookIdeaItemView">
                        <Text className="bookIdeaItemTxt"></Text>
                        <Image className="next" src={next}></Image>
                      </View>
                    </View>
                  </View>
                ) : (
                  ""
                )}
              </View>
            );
          })}

        {/* 提示 */}
        {cocList &&
          cocList.map((item, index) => {
            return (
              <View>
                {current == index ? (
                  item.user_state != 1 ? (
                    <View className="stateTips">
                      <Image className="tipsImg" src={tips}></Image>
                      <Text className="tipsTxt">
                        您目前处于
                        {item.user_state === 0
                          ? "待审核"
                          : item.user_state === 2
                          ? "已冻结"
                          : item.user_state === 3
                          ? "已注销"
                          : item.user_state === 4
                          ? "待续费"
                          : ""}
                        状态，请及时联系管理员
                      </Text>
                      {/* {item.user_state === 2 ||
                        item.user_state === 3 ||
                        item.user_state === 4 ?
                          <Text
                            className="tipsAction"
                            onClick={this.goBuyPostion.bind(this, item)}
                          >
                            去续费
                          </Text>
                        :""} */}
                    </View>
                  ) : (
                    ""
                  )
                ) : (
                  ""
                )}
              </View>
            );
          })}

        {/* 个人信息 */}
        {cocList &&
          cocList.map((item, index) => {
            return (
              <View>
                {current == index ? (
                  <View className="myInfos">
                    <View className="myInfo"  onClick={this.goSetInfo.bind(this, 1, item)}>
                      <View className="avatarPost">
                        <Image
                          className="avatar"
                          src={item.user.avatar}
                        ></Image>
                        <View className="post">
                          <Text className="name">{item.user.name}</Text>
                          <Text className="postName">
                            {item.user.position && item.user.position.name}
                          </Text>
                        </View>
                      </View>
                      <View className="statusNext">
                        {item.user_state != 1 && (
                          <Text className="status">
                            {item.user_state === 0
                              ? "待审核"
                              : item.user_state === 2
                              ? "已冻结"
                              : item.user_state === 3
                              ? "已注销"
                              : item.user_state === 4
                              ? "待续费"
                              : ""}
                          </Text>
                        )}
                        <Image
                          className="next"
                          src={next}
                          onClick={this.goSetInfo.bind(this, 1, item)}
                        ></Image>
                      </View>
                    </View>
                    <View
                      className="descView"
                      onClick={this.goSetInfo.bind(this, 2, item)}
                    >
                      <View className="titleNext">
                        <Text className="title">个人简介</Text>
                        <Image className="next" src={next}></Image>
                      </View>
                      <View
                        className="desc"
                        style={{ WebkitBoxOrient: "vertical" }}
                      >
                        {item.user.describe}
                      </View>
                    </View>
                    <View
                      className="resumeView"
                      onClick={
                        item.user.user_record.length == 0
                          ? this.showTips.bind(this)
                          : this.goSocialResume.bind(this, item)
                      }
                    >
                      <View
                        className="titleNext"
                        // onClick={this.goAddResume.bind(this, item)}
                      >
                        <Text className="title">社会履历</Text>
                        <Image className="next" src={next}></Image>
                      </View>
                      {item.user &&
                        item.user.user_record.map((items, indexx) => {
                          return (
                            <View
                              className="resume"
                              onClick={this.goSocialResume.bind(this, item)}
                            >
                              <View className="timeTitle">
                                {items.add_time && (
                                  <Text className="time">
                                    {this.getTime(items.add_time)}
                                  </Text>
                                )}

                                <Text
                                  className="title"
                                  style={{ WebkitBoxOrient: "vertical" }}
                                >
                                  {items.title}
                                </Text>
                              </View>
                            </View>
                          );
                        })}
                    </View>
                  </View>
                ) : (
                  ""
                )}
              </View>
            );
          })}
      </View>
    );
  }
}


.myBusiness_page {
  width: 100%;
  height: 100vh;
  background: rgba(242, 242, 242, 1);
  image {
    display: inline-block;
  }
  .cocViewTop {
    height: 472px;
    // height: 472px-46=426;
    background: rgba(235, 200, 127, 1);
    border-radius: 0px 0px 55px 55px;
    .cocSwiper {
      position: relative;
      height: 336px;
      padding-top: 46px;
      .swiperView {
        .prevView {
          position: absolute;
          left: 20px;
          top: 0;
          height: 336px;
          width: 30px;
        }
        .nextView {
          position: absolute;
          right: 20px;
          top: 0;
          height: 336px;
          width: 30px;
        }
        .arrow {
          width: 30px;
          height: 43px;
        }
        .prev {
          position: absolute;
          left: 0px;
          top: 50%;
          transform: translate(0, -50%);
        }

        .next {
          position: absolute;
          right: 0px;
          top: 50%;
          transform: translate(0, -50%);
        }
        .bg {
          position: absolute;
          top: 0;
          left: 65px;
          width: 620px;
          height: 336px;
          box-shadow: 1px 4px 20px 0px rgba(192, 145, 48, 0.3);
          border-radius: 6px;
        }
        .cocInfos {
          position: relative;
          left: 0;
          top: 0;
          .defaultCoc {
            position: absolute;
            top: 19px;
            right: 84px;
            width: 162px;
            height: 46px;
            background: rgba(255, 255, 255, 1);
            display: flex;
            align-items: center;
            .defaultIcon {
              margin-left: 10px;
              width: 30px;
              height: 30px;
            }
            .defaultTxt {
              font-size: 26px;
              color: rgba(234, 205, 118, 1);
              margin-left: 10px;
            }
            .setDefaultTxt {
              padding-left: 3px;
              font-size: 26px;
              color: rgba(234, 205, 118, 1);
            }
          }
          .cocInfo {
            display: flex;
            align-items: center;
            flex-direction: column;
            .cocLogo {
              margin-top: 30px;
              width: 120px;
              height: 120px;
              border-radius: 50%;
            }
            .cocName {
              margin: 20px auto;
              font-size: 36px;
              color: #333333;
              font-weight: bold;
            }
            .cocAll {
              display: flex;
              align-items: center;
              .addressPhone {
                display: flex;
                align-items: center;
                height: 44px;
                .addressPhoneImg {
                  width: 44px;
                  height: 44px;
                }
                .line {
                  margin: 0 20px;
                  width: 2px;
                  height: 44px;
                  background-color: #ffffff;
                }
              }
              .address {
                margin-left: 20px;
                overflow: hidden;
                text-overflow: ellipsis;
                display: -webkit-box;
                -webkit-line-clamp: 2;
                /* autoprefixer   : ignore next */
                -webkit-box-orient: vertical;
                width: 400px;
                text-align: left;
                font-size: 26px;
                color: #ffffff;
              }
            }
          }
        }
      }
    }
  }
  .bookIdea {
    width: 690px;
    margin: -51px auto 20px auto;
    height: 102px;
    background: rgba(255, 255, 255, 1);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    .line {
      margin-left: 20px;
      margin-right: 30px;
      width: 2px;
      height: 34px;
      background-color: #dddddd;
    }
    .bookIdeaItem:first-child {
      padding-left: 30px;
    }
    .bookIdeaItem:last-child {
      padding-right: 32px !important;
    }
    .bookIdeaItem {
      width: 314px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      .bookIdeaItemView {
        display: flex;
        align-items: center;
        .bookIdeaItemImg {
          width: 30px;
          height: 30px;
          margin-right: 10px;
        }
        .bookIdeaItemTitle {
          color: #333333;
          font-size: 30px;
        }
        .bookIdeaItemTxt {
          font-size: 22px;
          color: #999999;
          margin-right: 10px;
        }
        .next {
          width: 28px;
          height: 28px;
        }
      }
    }
  }
  // 提示语
  .stateTips {
    margin: 0 30px 20px 30px;
    display: flex;
    align-items: center;
    .tipsImg {
      width: 30px;
      height: 30px;
    }
    .tipsTxt {
      margin: 0 14px 0 10px;
      font-size: 24px;
      color: #999999;
    }
    .tipsAction {
      color: #1890ff;
      font-size: 24px;
      text-decoration: underline;
    }
  }
  // 个人信息
  .myInfos {
    padding: 30px 20px;
    margin: 0 30px;
    background: rgba(255, 255, 255, 1);
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    .myInfo {
      margin-bottom: 20px;
      display: flex;
      justify-content: space-between;
      .avatarPost {
        display: flex;
        align-items: center;
        .avatar {
          border-radius: 50%;
          width: 100px;
          height: 100px;
          margin-right: 20px;
        }
        .post {
          display: flex;
          // align-items: center;
          // text-align: center;
          // justify-content: center;
          flex-direction: column;
          .name {
            font-size: 34px;
            color: #000;
            margin-bottom: 10px;
          }
          .postName {
            font-size: 26px;
            color: #888888;
          }
        }
      }
      .statusNext {
        display: flex;
        .status {
          color: #eacd76;
          font-size: 24px;
          margin-right: 20px;
        }
        .next {
          width: 28px;
          height: 28px;
        }
      }
    }
    .titleNext () {
      margin-top: 20px;
      margin-bottom: 10px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      .title {
        font-size: 34px;
        color: #000000;
      }
      .next {
        width: 28px;
        height: 28px;
      }
    }
    .descView {
      border-top: 1px solid rgba(229, 229, 229, 1);
      border-bottom: 1px solid rgba(229, 229, 229, 1);
      display: flex;
      flex-direction: column;
      .titleNext {
        .titleNext();
      }
      .desc {
        margin-bottom: 20px;
        width: 650px;
        font-size: 26px;
        color: #888888;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 3;
        /* autoprefixer   : ignore next */
        -webkit-box-orient: vertical;
      }
    }
    .resumeView {
      display: flex;
      flex-direction: column;
      .titleNext {
        .titleNext();
      }
      .resume {
        display: flex;
        flex-direction: column;
        .timeTitle {
          display: flex;
          font-size: 26px;
          color: #888888;
        }
        .time {
          min-width: 160px;
        }
        .title {
          margin-bottom: 20px;
          margin-left: 20px;
          width: 497px;
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-line-clamp: 1;
          /* autoprefixer   : ignore next */
          -webkit-box-orient: vertical;
        }
      }
    }
  }
}

相关文章

网友评论

      本文标题：Taro/微信小程序 swiper

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

      延伸阅读

      深度阅读

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

      栏目导航

      热点阅读

      关于我们|服务条款|联系我们|Taro/微信小程序 swiper|投稿指南|网站地图|RSS订阅|排版工具|手机版

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

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

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

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

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