educoder/public/react/src/modules/competitions/Competitioncommon/CompetitionCommonChild/CompetitionContentspdfChild/CompetitionContentspdfdownload.js

import React, {Component} from 'react';
import {Button, Layout, Row, Col, Divider, Table} from 'antd';
import axios from 'axios';
import {getImageUrl} from 'educoder';
import './CompetitionContentspdfdownload.css';

// import NoneData from "../../../courses/shixunHomework/shixunHomework";


class CompetitionContentspdfdownload extends Component {
	constructor(props) {
		super(props)
		this.state = {
			data: undefined,
			teams: undefined
		}
	}

	componentDidMount() {
		window.document.title = '竞赛';
		let url = `/competitions/${this.props.match.params.identifier}/prize.json`;
		axios.get(url).then((response) => {
			if (response.status === 200) {

				let datas = response.data.teams;
				if (datas.length > 0) {
					datas.map((item, key) => {
						let lista = item.team_members;
						if (lista.length > 0) {
							console.log(lista)
							lista.map((i, k) => {
								i["bank_account"] = item.bank_account;
							})
						}
					})
				}

				this.setState({
					data: response.data,
					teams: datas,
				})
			}
		}).catch((error) => {
			console.log(error)
		})
	}

	render() {


		let {data, teams} = this.state;

		const columns = [
			{
				title: '角色',
				dataIndex: 'type',
				key: 'type',
				render: (text, record) => (
					<span>
					{record.role}
      </span>
				),
			},
			{
				title: '姓名',
				dataIndex: 'name',
				key: 'name',
				render: (text, record) => (
					<span>
				{record.name}
      </span>
				),
			},
			{
				title: '实名认证',
				dataIndex: 'namecertify',
				key: 'namecertify',
				render: (text, record) => (
					<span>
				{record.real_name_auth === "authed" ?
					<span className={"pdfdownloadfont00CC5F"}>已认证</span> : record.real_name_auth === "authing" ?
						<span className={"pdfdownloadfontFF6602"}>待审核</span> : record.real_name_auth === "not_authed" ?
							<span className={"color-red"}>未认证</span> : ""}
      </span>
				),
			},
			{
				title: '职业认证',
				key: 'certify',
				dataIndex: 'certify',
				render: (text, record) => (
					<span>
				{record.professional_auth === "authed" ?
					<span className={"pdfdownloadfont00CC5F"}>已认证</span> : record.real_name_auth === "authing" ?
						<span className={"pdfdownloadfontFF6602"}>待审核</span> : record.real_name_auth === "not_authed" ?
							<span className={"color-red"}>未认证</span> : ""}
      </span>
				),
			},
			{
				title: '手机绑定',
				key: 'mobile',
				dataIndex: 'mobile',
				render: (text, record) => (
					<span>
				{record.phone_binded === true ? <span className={"pdfdownloadfont00CC5F"}>已绑定</span> :
					<span className={"color-red"}>未绑定</span>}
      </span>
				),
			},
			{
				title: '邮箱绑定',
				key: 'mail',
				dataIndex: 'mail',
				render: (text, record) => (
					<span>
					{record.email_binded === true ? <span className={"pdfdownloadfont00CC5F"}>已绑定</span> :
						<span className={"color-red"}>未绑定</span>}
      </span>
				),
			},
			{
				title: '开户行及银行卡号信息（队长填写）',
				key: 'idcard',
				dataIndex: 'idcard',
				render: (value, record, index) => {
					if (index === 0 && record.bank_account != null) {
						return {
							children:
								<span>{record.bank_account.bank + record.bank_account.second_bank + record.bank_account.card_no}</span>,
						};
					}

				},
			},
		];


		let people = [{url: '/api/competitions/xxxxx/certificates/1/personal'},
			{url: '/api/competitions/xxxxx/certificates/2/personal'},]
		return (
			<React.Fragment>
				<Row>
					<Col className={"pdfdownload"}>温馨提示：填写的个人信息经审批后，将提供个人获奖证书下载；团队队员信息全部审批后，将提供团队获奖证书下载。</Col>
				</Row>

				<Row className={"mt30"}>
					<Col className={"pdfpicture"}>证书情况</Col>
				</Row>

				<Row className={"mt30"}>
					<Col>个人证书： {data && data.personal_certifications.length === 0 ?
						<span><span className={"pdfpicture font-14"}>暂未生成</span>  <span className={"ml20"}>原因：<span
							className={"pdfpicture font-14"}>还未认证个人信息，</span><a className={"pdfdownloadfont4CACFF"}
																																	onClick={() => this.props.Competitioncallback("2")}>立即查看</a></span></span> :
						data && data.personal_certifications.map((item, key) => {
							return (
								<span className={"mr10"} key={key}>
									<img src={getImageUrl(`images/educoder/pdfs.png`)}/>
									<a className={"pdfdownloadfont4CACFF ml10"} href={item.url} download=""
										 title="下载" mce_href="#">立即下载</a>
								</span>
							)
						})}</Col>
				</Row>

				<Row className={"mt30"}>
					<Col>团队证书：
						{data && data.team_certifications.length === 0 ? <span className={"pdfpicture font-14"}>暂未生成</span>
							: data && data.team_certifications.map((item, key) => {
							return (
								<span className={"mr10"} key={key}>
									<img src={getImageUrl(`images/educoder/pdfs.png`)}/>
									<a className={"pdfdownloadfont4CACFF ml10"} href={item.url} download=""
										 title="下载" mce_href="#">立即下载</a>
								</span>
							)
						})}
					</Col>
				</Row>
				<Divider/>
				<style>
					{
						`
						.pdfdownloadTable .ant-table-column-title{
						 color:#000;
						}
						.pdfdownloadTable .ant-table-tbody > tr > td{
							color:#666666;
				      border-bottom: 1px solid transparent;
						}
						.pdfdownloadTable .ant-table-thead > tr > th, .ant-table-tbody > tr > td{
  					  text-align: center;
			      }
						`
					}
				</style>
				{teams && teams.map((item, key) => {
					return (
						<Row className={"mt30"} key={key}>
							<Col className={"pdfpicture mb20"}>{item.name}战队信息填报概况</Col>

							<Table columns={columns} dataSource={item.team_members} className={"pdfdownloadTable"}
										 pagination={false}/>
						</Row>
					)
				})
				}


			</React.Fragment>
		)
	}
}

export default CompetitionContentspdfdownload;