MissionBoard/web/client/src/sections/homePage/components/activityColumns.js

import React, { useState, useEffect } from "react";
import { connect } from "react-redux";
import { Table } from "antd";
import { push } from "react-router-redux";
import moment from "moment";
import { getDataList } from "../actions/profile";
let xinwen = "../../../../assets/images/xinweng.png";
let BARBG = "../../../../assets/images/barbg.png";
let shangxinli = "../../../../assets/images/shangxinli_title.png";
function ActivityColumns(props) {
  const { dispatch } = props;
  const [activities, setActivities] = useState([]); //活动风采
  const more = (id) => {
    dispatch(push("/more", { type: 0, status: 1 }));
  };
  useEffect(() => {
    dispatch(getDataList({ type: 0, status: 1 })).then((res) => {
      res.payload ? setActivities(res.payload.data.data) : "";
    });
  }, []);
  const renderInfoBar = (title) => {
    return (
      <div
        style={{
          width: "100%",
          backgroundColor: "rgba(255, 201, 122, 0.3)",
          height: 42,
          display: "flex",
          justifyContent: "space-between",
          alignItems: "center",
          marginTop: "10px",
        }}
      >
        <div
          style={{
            width: 131,
            height: 42,
            color: "#fff",
            fontSize: 20,
            fontWeight: "500",
            // backgroundColor: "rgba(175, 37, 27, 1)",
            display: "flex",
            alignItems: "center",
            justifyContent: "flex-start",
            paddingLeft: 10,
            background: `url(${BARBG})  0% 0% / 100% 100%`,
          }}
        >
          {title}
        </div>
        <div
          style={{
            color: "rgba(0, 0, 0, 0.65)",
            fontSize: 14,
            marginRight: 15,
            cursor: "pointer",
            userSelect: "none",
          }}
          onClick={() => {
            more("123");
          }}
        >
          {"更多 >>"}
        </div>
      </div>
    );
  };
  const activityColumns = [
    {
      title: "Name",
      dataIndex: "name",
      key: "name",
      ellipsis: true,
      sorter: (a, b) => {
        const atime = a.createTime
          .slice(0, 10)
          .replace("-", "")
          .replace("-", "");

        const btime = b.createTime
          .slice(0, 10)
          .replace("-", "")
          .replace("-", "");
        return atime - btime;
      },
      defaultSortOrder: "bscend",
      render: (text, record) => (
        <>
          <div
            onClick={() => {
              dispatch(
                push("/particulars", {
                  id: record.id,
                  title: record.title,
                })
              );
            }}
          >
            <span
              style={{
                display: "inline-block",
                width: "5px",
                height: "5px",
                backgroundColor: "#AF251B",
                position: "absolute",
                right: "490px",
                top: "26px",
              }}
            ></span>
            <a
              style={{
                width: "285px",
                overflow: "hidden",
                display: "block",
                float: "left",
                whiteSpace: "nowrap",
                textOverflow: "ellipsis",
                color: "#3c4353",
              }}
            >
              {record?.title || ""}
            </a>
            <span style={{ float: "right", color: "#838a9d" }}>
              [{record?.createTime.slice(0, 10) || ""}]
            </span>
          </div>
        </>
      ),
    },
  ];
  return (
    <div>
      <div
        style={{
          height: 480,
          backgroundColor: "#fff",
          padding: 0,
          paddingLeft: 0,
        }}
      >
        {renderInfoBar("活动风采")}
        <div style={{ display: "flex", width: "100%" }}>
          <div style={{ width: 330, paddingTop: 10, padding: 10 }}>
            <img
              src={xinwen}
              alt="huodong"
              style={{ width: 330, height: 170 }}
            />
            <div style={{ width: 330, marginTop: 10 }}>
              <div
                style={{
                  fontSize: 16,
                  textAlign: "center",
                  fontWeight: "bold",
                  color: "rgba(0, 0, 0, 0.65)",
                }}
              >
                习近平致首届大国工匠创新交流大会的贺信
              </div>
              <div
                style={{
                  fontSize: 12,
                  textAlign: "center",
                  fontWeight: "400",
                  color: "rgba(0, 0, 0, 0.65)",
                  overflow: "hidden",
                  textOverflow: "ellipsis",
                  whiteSpace: "nowrap",
                }}
              >
                值此首届大国工匠创新交流大会召开之际，我向大会的举办…
              </div>
            </div>
          </div>
          <div
            style={{
              width: 500,
              height: 260,
              marginLeft: 15,
              overflowY: "hidden",
            }}
          >
            <Table
              columns={activityColumns}
              dataSource={activities}
              showHeader={false}
              pagination={false}
              rowKey="id"
              bordered={false}
            />
          </div>
        </div>
        <div
          style={{
            width: "100%",
            height: 170,
            padding: 10,
            display: "flex",
            alignItems: "center",
          }}
        >
          <img src={shangxinli} alt="tu" style={{ width: 72, height: 150 }} />
          <div
            style={{
              flex: 1,
              display: "flex",
              alignItems: "center",
              marginRight: 10,
              overflowX: "scroll",
              marginLeft: 15,
              marginRight: 15,
            }}
          >
            {shangxinliArr.map(({ avatar, name, award }, index) => {
              let src = `../../../../assets/images/shangxinli/${avatar}`;
              return (
                <div
                  key={index}
                  style={{
                    flexShrink: 0,
                    width: 80,
                    display: "flex",
                    flexDirection: "column",
                    alignItems: "center",
                  }}
                >
                  <img src={src} style={{ width: 56, height: 80 }} alt="头像" />
                  <div>{name}</div>
                  <div>{award}</div>
                </div>
              );
            })}
          </div>
        </div>
      </div>
    </div>
  );
}
function mapStateToProps(state) {
  const { auth, global, articlesfrom } = state;
  return {
    user: auth.user,
    actions: global.actions,
    articlesfrom: articlesfrom,
  };
}
export default connect(mapStateToProps)(ActivityColumns);
const shangxinliArr = [
  {
    name: "邹全锦",
    avatar: "zouquanjin.png",
    award: "爱岗敬业",
  },
  {
    name: "欧阳华强",
    avatar: "ouyanghuaqiang.png",
    award: "爱岗敬业",
  },
  {
    name: "田汉鑫",
    avatar: "tianhanxin.png",
    award: "爱岗敬业",
  },
  {
    name: "张俊",
    avatar: "zhangjun.png",
    award: "爱岗敬业",
  },
  {
    name: "付兵兵",
    avatar: "fubingbing.png",
    award: "爱岗敬业",
  },
  {
    name: "吴承云",
    avatar: "wuchengyun.png",
    award: "最佳执行",
  },
  {
    name: "周宏晟",
    avatar: "zhouhongsheng.png",
    award: "最佳执行",
  },
  {
    name: "杨威",
    avatar: "yangwei.png",
    award: "最佳执行",
  },
  {
    name: "丁锦",
    avatar: "dingjin.png",
    award: "最佳执行",
  },
  {
    name: "刘琦",
    avatar: "liuqi.png",
    award: "最佳执行",
  },
  {
    name: "张文君",
    avatar: "zhangwenjun.png",
    award: "创新卓越",
  },
  {
    name: "陈涛",
    avatar: "chentao.png",
    award: "创新卓越",
  },
  {
    name: "张文",
    avatar: "zhangwen.png",
    award: "最佳新人",
  },
  {
    name: "胡文惠",
    avatar: "huwenhui.png",
    award: "最佳新人",
  },
  {
    name: "张子扬",
    avatar: "zhangziyang.png",
    award: "最佳新人",
  },
  {
    name: "喻从文",
    avatar: "yucongwen.png",
    award: "最佳新人",
  },
  {
    name: "朱琼",
    avatar: "zhuqiong.png",
    award: "最佳新人",
  },
  {
    name: "黄钰薇",
    avatar: "huangyuwei.png",
    award: "宣传大使",
  },
];