taro/微信小程序 每日海报

import Taro, { Component } from "@tarojs/taro";
import { View, Image, SwiperItem, Swiper } from "@tarojs/components";
import "./dayliPosters.less";
import api from "../../utils/network/request";
import user from "../../utils/auth/user";

export default class Index extends Component {
  config = {
    navigationBarTitleText: "每日海报",
    navigationBarBackgroundColor: "#EAC880"
  };

  state = {
    card_id: 0,
    poster_id: 0,
    swiper_current: 0,
    qrcode: "",
    card: {},
    nowIdx: 0
  };

  options = {
    addGlobalClass: false
  };
  componentWillMount() {}
  componentDidMount() {
    const card_id = Taro.getStorageSync("card_id");
    if (card_id == 0 || card_id == "" || card_id == undefined) {
      Taro.showModal({
        title: "温馨提示",
        content: "您还没创建名片，是否创建名片",
        success: res => {
          if (res.confirm) {
            Taro.navigateTo({
              url: "/pages/index/createCard"
            });
          } else if (res.cancel) {
            Taro.navigateBack({
              detail: 1
            });
          }
        }
      });
    }
    this.setState({
      card_id: card_id
    });
    this.getCard(card_id);
    this.getQrCode(card_id);
  }
  getCard = card_id => {
    const _this = this;
    api.request({
      method: "POST",
      url: "/card/info",
      data: {
        access_token: user.getToken(),
        id: card_id
      },
      success: function(res) {
        const card = res.data.result;
        if (card.state === 2) {
          _this.setState({
            card: card
          });
          api.request({
            method: "POST",
            url: "/card/posters",
            data: {
              access_token: user.getToken(),
              company_id: card.company_id
            },
            success: function(res) {
              _this.setState({
                posters: res.data.result,
                poster_id: res.data.result[0].id
              });
            },
            error: function(res) {}
          });
        }
      },
      error: function(res) {}
    });
  };
  getQrCode = card_id => {
    const _this = this;
    api.request({
      method: "POST",
      url: "/card/qrCode",
      data: {
        access_token: user.getToken(),
        card_id: card_id
      },
      success: function(res) {
        if (res.data.code === 1000) {
          _this.setState({
            qrcode: res.data.result
          });
        } else {
          Taro.showToast({
            title: "获取名片码失败，请重试",
            icon: "none",
            duration: 1500
          });
        }
      },
      error: function(res) {}
    });
  };

  createPoster = () => {
    const _this = this;
    api.request({
      method: "POST",
      url: "/card/createPoster",
      data: {
        access_token: user.getToken(),
        card_id: _this.state.card_id,
        poster_id: _this.state.poster_id
      },
      success: function(res) {
        if (res.data.code === 1000) {
          const url = res.data.result;
          Taro.previewImage({
            // 所有图片
            urls: [url],
            // 当前图片
            current: url,
            success: function(res) {
              Taro.showToast({
                title: "海报生成成功，请您自行转发",
                icon: "none",
                duration: 1500
              });
            }
          });
        } else {
          Taro.showToast({
            title: "海报生成失败，请重试",
            icon: "none",
            duration: 1500
          });
        }
      },
      error: function(res) {}
    });
  };
  changePoster = () => {
    let swiper_current = this.state.swiper_current;
    const posters = this.state.posters;
    swiper_current = swiper_current + 1;
    if (swiper_current == posters.length) {
      swiper_current = 0;
    }
    this.setState({
      swiper_current: swiper_current,
      poster_id: posters[swiper_current].id
    });
  };

  handChangePoster = e => {
    const swiper_current = e.target.current;
    const posters = this.state.posters;
    this.setState({
      swiper_current: swiper_current,
      poster_id: posters[swiper_current].id
    });
  };

  render() {
    const { swiper_current, card, posters } = this.state;
    return (
      <View className="page_dayliPosters">
        <View className="page_dayliPosters_ceng">
          <Swiper
            className="test-h"
            vertical={false}
            autoplay={false}
            current={swiper_current}
            circular
            indicatorDots={false}
            onChange={this.handChangePoster}
          >
            {posters.map(poster => {
              return (
                <View>
                  <SwiperItem>
                    <Image className="demo-text-1" src={poster.img}></Image>
                  </SwiperItem>
                </View>
              );
            })}
          </Swiper>
          <View className="page_center">
            <View className="page_center_ceng">
              <Image className="center_img" src={card.avatar}></Image>
              <View className="center_info">
                <View className="center_name">
                  {card.user.name === null ? card.user_nick : card.user.name}
                </View>
                <View className="center_com">公司： {card.company.name}</View>
                <View className="center_phone">电话： {card.phone}</View>
              </View>
              <Image className="center_ma" src={this.state.qrcode}></Image>
            </View>
          </View>
          <View className="page_bot">
            <View className="change" onClick={this.changePoster.bind(this)}>
              换一换
            </View>
            <View className="share" onClick={this.createPoster.bind(this)}>
              分享
            </View>
          </View>
        </View>
      </View>
    );
  }
}

.page_dayliPosters {
  width   : 100%;
  height  : 100vh;
  position: absolute;

  .at-tabs__item--active {
    color: #EBC87F;
  }

  .at-tabs__item-underline {
    background-color: transparent;
  }


  .page_dayliPosters_ceng {
    width : 100%;
    height: 100%;

    .test-h {
      width : 100%;
      height: 87vh;

      .demo-text-1 {
        width : 100%;
        height: 87vh;
      }
    }
  }

  .page_center {
    width   : 100%;
    height  : 220px;
    position: fixed;
    bottom  : 158px;

    .page_center_ceng {
      width         : 100%;
      height        : 220px;
      display       : flex;
      flex-direction: row;
      flex-wrap     : nowrap;
      margin-top    : 52px;

      .center_img {
        width        : 126px;
        height       : 126px;
        border-radius: 50%;
        margin-left  : 32px;
      }

      .center_ma {
        width        : 152px;
        height       : 152px;
        border-radius: 50%;
        margin-top   : -15px;
        margin-right : 10px;
      }

      .center_info {
        width      : 450px;
        height     : 100%;
        margin-left: 20px;

        .center_name {
          font-size  : 40px;
          line-height: 56px;
        }

        .center_com {
          font-size  : 20px;
          line-height: 28px;
        }

        .center_phone {
          font-size  : 20px;
          line-height: 28px;
        }
      }
    }
  }

  .page_bot {
    width   : 100%;
    position: fixed;
    bottom  : 30px;

    .change {
      width           : 334px;
      height          : 88px;
      line-height     : 88px;
      border-radius   : 41px;
      border          : 2px solid rgba(235, 200, 127, 1);
      display         : inline-block;
      margin-left     : 30px;
      text-align: center;
      color           : #EBC87F;
      background-color: #fff;
    }

    .share {
      width        : 334px;
      height       : 88px;
      background   : rgba(235, 200, 127, 1);
      line-height  : 88px;
      border-radius: 41px;
      text-align: center;
      display      : inline-block;
      margin-left  : 30px;
      color        : white;
    }
  }
}