ttk-app-core/src/apps/app-demo/home/home-account/app.js

@ttk/recat enterprise develop framework

import React, { useEffect } from "react";
import { useAppData, useData, useActions, useCommit } from "@ttk/app-loader";
import { Card, Button, Carousel, Select, Icon, Skeleton } from "antd";
import "./style.less";
import "../index.less";
export default React.memo(Account);
function Account(props) {
  // 在当前app获取其它app的state
  // const appData = useAppData('app-root')
  // const dateRange = useAppData('app-root/dateRange')

  // 获取当前app的state
  // useData([props, '...', '...'])
  const commit = useCommit();
  const actions = useActions(props);
  const SelectData = useAppData("home/SelectData").toJS();
  const accountList = useData([props, "accountList"]).toJS();
  const accountImg = useData([props, "accountImg"]).toJS();
  const { tempData } = useData([props, "accountNum"]).toJS();
  const { loading } = useData([props, "showState"]).toJS();
  useEffect(() => {
    setTimeout(() => {
      commit([props, "showState"], false);
    }, 1000);
    async function fetchData() {
      await actions.getAccountList();
      await actions.getAccountNum();
      await actions.getAccountImg();
    }
    fetchData();
  }, []);
  function changeSelect(e) {
    console.log(e);
    actions.getAccountNum(e);
  }
  function reload() {
    actions.getAccountNum();
  }
  return (
    <Card className="home-card account-card" bordered={false}>
      <div className="account-item">
        <Skeleton loading={loading}>
          <div className="home-card-title">
            <div>
              <span>视频课程</span>
            </div>
            <div>
              <a href="/#">更多</a>
              <Button icon="reload" className="reload-button" />
            </div>
          </div>
          <div>
            <Carousel autoplay dots={false} effect="fade">
              {accountImg.map((item, index) => (
                <div key={index}>
                  <img alt="logo" src={item.src} width="100%" />
                </div>
              ))}
            </Carousel>
            <ul className="left-list">
              {accountList.map((item, index) => (
                <li key={`${index}${item}`}>
                  <a href="/#" style={{ whiteSpace: "nowrap" }}>
                    {item.title}
                  </a>
                  <span style={{ whiteSpace: "nowrap" }}>{item.date}</span>
                </li>
              ))}
            </ul>
          </div>
        </Skeleton>
      </div>
      <div className="account-item">
        <Skeleton loading={loading}>
          <div className="home-card-title">
            <div>
              <span>资金账户</span>
              <Select
                value={tempData.time}
                style={{ width: 80 }}
                onChange={(e) => changeSelect({ time: e })}
                className="account-select"
              >
                {SelectData.map((item, index) => (
                  <Select.Option value={item.time} key={index}>
                    {item.time}
                  </Select.Option>
                ))}
              </Select>
            </div>
            <div>
              <Button
                icon="reload"
                className="reload-button"
                onClick={reload}
              />
            </div>
          </div>
          <div className="right-list">
            <p>
              <span>合计：</span>
              <span>{tempData.total}</span>
            </p>
            <div className="bank-account">
              <Icon type="credit-card" />
              <span>银行账户：</span>
              <a href="/#">{tempData.bank}</a>
            </div>
            <div className="money-account">
              <Icon type="pay-circle" />
              <span>现金账户：</span>
              <a href="/#">{tempData.cash}</a>
            </div>
          </div>
        </Skeleton>
      </div>
    </Card>
  );
}