tuns-mobile-components/src/pages/demo/bottom/index.js

Tuns Design UI

import React from "react";
import { Icon, Button } from "antd-mobile";
import p from "tuns-class-prefix";
import Bottom from "../../../components/mobile/src/bottom";

import "./index.less";

const CLS_PREFIX = "tuns-mobile-bottombtndemo";
const addPrefix = p(CLS_PREFIX);

class BottomDemo extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      total: 18722.325,
      scale: 2,
    };
  }

  domRender = () => {
    return (
      <div>
        <Icon type="check" style={{ width: "36.9px", height: "36.9px" }} />
        <p
          style={{
            fontFamily: "PingFangSC-Regular",
            fontSize: 24,
            color: "#999999",
            lineHeight: 0,
          }}
        >
          客服
        </p>
      </div>
    );
  };

  insureFunc = () => {};

  btns = () => {
    return (
      <div className={addPrefix("btnbox")}>
        <Button className={addPrefix("btn")}>保存</Button>
        <Button className={addPrefix("btn")}>下一步</Button>
      </div>
    );
  };

  render() {
    const { total, scale } = this.state;
    return (
      <div className={addPrefix("root")}>
        <h2>Bottom Demo </h2>

        <Bottom
          total={total}
          buttonText="立即投保"
          buttonClick={this.insureFunc}
          leftRender={this.domRender}
          className="style"
          scale={scale}
        />

        <Bottom
          totalText="合计保费:"
          total={total}
          buttonText="立即投保"
          buttonClick={this.insureFunc}
          scale={scale}
        />

        <Bottom
          total={total}
          buttonText="立即投保"
          buttonClick={this.insureFunc}
          leftRender={this.domRender}
          className="style"
          scale={scale}
          organization
          totalUnit="元/人"
        />

        <Bottom
          totalText="预计总保费"
          total={total}
          buttonText="立即投保"
          buttonClick={this.insureFunc}
          scale={scale}
          organization
          totalUnit="元"
        />

        <Bottom
          totalText="预计总保费"
          total={total}
          leftRender={this.domRender}
          renderAction={this.btns()}
          scale={scale}
          organization
          totalUnit="元"
        />

        <Bottom leftRender={this.domRender} renderAction={this.btns()} />
      </div>
    );
  }
}

export default BottomDemo;