flossom-miniapp/src/components/popup/popup-step-tips.tsx

import classnames from "classnames";
import Taro from "@tarojs/taro";
import { Component } from "react";

import {
  Block,
  View,
  Image,
  Text,
  Button,
  PageMeta,
  Swiper,
  SwiperItem,
} from "@tarojs/components";

import { Popup } from "@antmjs/vantui";

import "./popup.less";
import "./popup-step-tips.less";
import "./fade.css";

import { go } from "../../utils/traoAPI";

/** props
 * isLarge            是否大尺寸
 * isShow             是否显示
 * data               数据
 * title              动态标题
 * confirmButtonText  确定关闭按钮
 * @confirm           关闭回调
 * ***/
export default class PopupStepTips extends Component<any, any> {
  constructor(props) {
    super(props);
    this.state = {
      name: "步骤介绍弹窗", // 当前IOT使用
      current: 0,
      isLocal: false, // 是否缓存关闭，以后不再显示准备步骤
    };
  }

  async onLoad() {}
  componentDidMount() {}

  componentWillUnmount() {}

  componentDidShow() {}

  componentDidHide() {}

  initData = () => {
    if (this.props.siteData) {
      let arr = JSON.parse(JSON.stringify(this.props.siteData));
      this.setState({ siteList: arr });
    }
  };

  onClose = () => {
    let { isLocal } = this.state;
    this.props.close({ isLocal });
  };

  onClickStop = (e) => {
    e.stopPropagation();
  };

  // onChange(event) {
  //   const current = event.detail.current;
  //   const { current: curCurrent } = this.state;
  //   const { siteData } = this.props;
  //   if (curCurrent + 2 === siteData.length && current + 1 === siteData.length) {
  //     this.setState({ toRight: true });
  //   }
  //   this.setState({ current });
  // }

  onPrev = async () => {
    let { current } = this.state;
    this.setState({ current: current - 1 });
  };
  onNext = async () => {
    let { current } = this.state;

    if (current === this.props.data.length) {
      this.onClose();
    } else {
      this.setState({ current: current + 1 });
    }
  };

  onChangeLocal = () => {
    let { isLocal } = this.state;
    this.setState({ isLocal: !isLocal });
  };

  render() {
    let { isShow, data, isLarge, title, content, confirmButtonText } =
      this.props;
    let { current, isLocal } = this.state;

    return (
      <Block>
        <PageMeta pageStyle={isShow ? "overflow: hidden;" : ""} />
        <Popup
          style="background-color: #fff;"
          show={isShow}
          closeOnClickOverlay={false}
          round
          overlayStyle="width: 100vw;padding: 0;"
          onClick={this.onClickStop}
        >
          <View
            className="at-icon at-icon-close site-close"
            onClick={this.onClose}
          ></View>
          <View
            className={classnames("common-box", "step-tips-common-box", {
              "common-large": isLarge,
            })}
          >
            <View
              className={classnames("common-popup-title", {
                "margin-samll": isLarge,
              })}
            >
              {data.length > 0 ? data[current].openTitle : "暂无数据"}
            </View>
            {/* {title && (
              <View
                className={classnames("common-popup-title", {
                  "margin-samll": isLarge,
                })}
              >
                {title}
              </View>
            )} */}
            <View className="step-popup-content-box">
              <Swiper
                className="step-absolutely"
                current={current}
                duration={800}
                indicatorDots={false}
                indicatorColor="#999"
                indicatorActiveColor="#333"
                disableTouch={true} // 禁止滑动
              >
                {data.map((item, index) => {
                  return (
                    <SwiperItem className="absolutely" key={"swiper_" + index}>
                      <View className="step-img">
                        <Image
                          className="cover"
                          src={item.openSourceUrl}
                          mode="aspectFit"
                        ></Image>
                      </View>
                      <View className="tips-message">{item.openContent}</View>
                    </SwiperItem>
                  );
                })}
              </Swiper>
            </View>

            <View>
              {data.length === 1 && (
                <View className="popup-btn-one">
                  <Button className="popup-btn" onClick={this.onClose}>
                    {confirmButtonText}
                  </Button>
                </View>
              )}
              {data.length > 1 && current === 0 && (
                <View className="popup-btn-one">
                  <Button className="popup-btn" onClick={this.onPrev}>
                    下一步
                  </Button>
                </View>
              )}
              {data.length > 1 && (
                <View className="common-popup-btns">
                  <Button className="common-popup-btn2" onClick={this.onPrev}>
                    {current > 0 && current < data.length - 1 && "上一步"}
                  </Button>
                  <Button className="common-popup-btn2" onClick={this.onNext}>
                    {current > 0 && current < data.length - 1 && "下一步"}
                    {current > 0 &&
                      current === data.length - 1 &&
                      confirmButtonText}
                  </Button>
                </View>
              )}
            </View>

            <View className="setp-footer-btn" onClick={this.onChangeLocal}>
              {isLocal ? (
                <Image
                  className="checked"
                  src={require("../../img/welcome/checked.png")}
                ></Image>
              ) : (
                <Image
                  className="checked"
                  src={require("../../img/welcome/no-checked.png")}
                ></Image>
              )}

              <Text className="text">以后不再提示准备步骤</Text>
            </View>
          </View>
        </Popup>
      </Block>
    );
  }
}