flossom-miniapp/src/pages/entry/entry.tsx

import classnames from "classnames";
import { Component } from "react";
import Taro from "@tarojs/taro";
import { Block, Image, Swiper, SwiperItem, View } from "@tarojs/components";
/*** redux ***/
import { connect } from "react-redux";
import { userRefresh } from "@/store/features/userInfo";
/*** redux end ***/

import Navbar from "@/components/navbar/navbar";

import "taro-ui/dist/style/components/button.scss"; // 按需引入
import "./entry.less";
import "./Animista.less";
import "./fade.css";

/*** redux end ***/

class Entry extends Component<any, any> {
  constructor(props) {
    super(props);
    this.state = {
      name: "entry",
      menu: {
        top: 0,
        height: 0,
      },
      current: 0,
      toRight: false,
      isClick: false,
      welcomeList: [],
    };
  }

  async onLoad() {
    this.setStatusBar();

    this.initData();
  }
  componentDidMount() {}

  componentWillUnmount() {}

  componentDidShow() {}

  componentDidHide() {}

  setStatusBar() {
    // const menu = Taro.getMenuButtonBoundingClientRect();
    // this.setState({ menu });
    Taro.getSystemInfoAsync({
      success: (res) => {
        const statusBarHeight = res.statusBarHeight || 0;
        // 获取微信胶囊的位置信息 width,height,top,right,left,bottom
        const custom = Taro.getMenuButtonBoundingClientRect();
        // 导航栏高度(标题栏高度) = 胶囊高度 + (顶部距离 - 状态栏高度) * 2
        const navigationBarHeight =
          custom.height + (custom.top - statusBarHeight) * 2;
        // 总体高度 = 状态栏高度 + 导航栏高度
        const navHeight = navigationBarHeight + statusBarHeight;

        this.setState({
          statusBarHeight,
          navigationBarHeight,
          navHeight,
        });
      },
    });
  }

  async initData() {
    let MpSplashDetail_type1 =
      Taro.getStorageSync("MpSplashDetail_type1") || undefined;
    if (MpSplashDetail_type1) {
      let detail = JSON.parse(MpSplashDetail_type1);
      let list = detail.filter((item: any) => item.fileSuffix === "images");
      if (list.length === 0) {
        Taro.reLaunch({ url: "/pages/index/index" });
        return;
      }
      let welcomeList = list.map((item) => {
        return {
          image: item.filePath,
          title: item.title,
          desc: item.content,
        };
      });
      this.setState({ welcomeList });
    } else {
      Taro.reLaunch({ url: "/pages/index/index" });
    }
  }

  onChange(event) {
    const current = event.detail.current;
    const { current: curCurrent, welcomeList } = this.state;
    if (
      curCurrent + 2 === welcomeList.length &&
      current + 1 === welcomeList.length
    ) {
      this.setState({ toRight: true });
    }
    this.setState({ current });
  }
  onClickSwiperItem() {
    const { current, welcomeList } = this.state;
    if (current < welcomeList.length - 1) {
      this.setState({
        current: current + 1,
        isClick: true,
      });
    } else {
      this.toHomePage();
    }
  }
  toHomePage() {
    Taro.reLaunch({ url: "/pages/index/index" });
  }

  onFinish(event) {
    const { current } = event.detail;
    const { toRight, isClick, welcomeList } = this.state;
    if (current === welcomeList.length - 1) {
      if (toRight || isClick) {
        this.setState({ toRight: false, isClick: false });
      } else {
        // this.toHomePage();
      }
    }
  }

  render() {
    let { menu, current, welcomeList } = this.state;
    return (
      <Block>
        <Navbar />
        <View className="main entry-main">
          {/* <View
            className="logo"
            style={"top:" + menu.top + "px; height:" + menu.height + "px"}
          >
            <Image src="https://oss.flossom.com/logo2.png" mode="widthFix" />
          </View> */}
          <Swiper
            className="absolutely"
            current={current}
            onChange={this.onChange.bind(this)}
            onAnimationFinish={this.onFinish.bind(this)}
            duration={800}
            indicatorDots={false}
            indicatorColor="#999"
            indicatorActiveColor="#333"
            previousMargin="32rpx"
            nextMargin="32rpx"
          >
            {welcomeList.map((item, index) => {
              return (
                <SwiperItem key={"swiper_" + index}>
                  <View
                    // FadeInFrame fadein
                    className="body entry-body"
                    style={{
                      top: menu.top + "px",
                      height: "calc(" + (100 % -menu.height) + "px)",
                    }}
                  >
                    <View>
                      <Image
                        className="cover"
                        src={item.image}
                        mode="aspectFill"
                      />
                    </View>
                    <View className="bottom-card">
                      <View>
                        <View
                          className={classnames("text", "text-animation", {
                            fadeOut: current !== index,
                            fadeIn: current === index,
                          })}
                        >
                          {item.title}
                        </View>
                        <View
                          className={classnames("txt", "text-animation", {
                            fadeOut: current !== index,
                            fadeIn: current === index,
                          })}
                        >
                          {item.desc}
                        </View>
                      </View>
                    </View>
                  </View>
                </SwiperItem>
              );
            })}
          </Swiper>

          <View className="btn-box">
            <View className="btn" onClick={this.toHomePage.bind(this)}>
              前往主页
            </View>

            <View className="indicator">
              {welcomeList.map((_item, index) => {
                return (
                  <View
                    key={"indicator_" + index}
                    className={classnames("dot", {
                      "bg-show": current === index,
                    })}
                  />
                );
              })}
            </View>
          </View>
        </View>
      </Block>
    );
  }
}

const mapStateToProps = (state) => ({
  mobile: state.userInfo.mobile,
});
const mapDispatchToProps = (dispatch) => ({
  userRefresh(value) {
    dispatch(userRefresh(value));
  },
});
export default connect(mapStateToProps, mapDispatchToProps)(Entry);