sourcecode/front/project/admin/routes/user/detail/page.js

import React from 'react';
import { Form, Row, Col, Avatar, Button, Modal, Input, Upload } from 'antd';
import './index.less';
import Page from '@src/containers/Page';
import Block from '@src/components/Block';
import TableLayout from '@src/layouts/TableLayout';
import { formatDate, getMap, formatMoney, formatSeconds } from '@src/services/Tools';
import { asyncSMessage, asyncForm, asyncDelConfirm } from '@src/services/AsyncTools';
import { UserUrl, PrepareStatus, PrepareExaminationTime, ServiceKey } from '../../../../Constant';
import { User } from '../../../stores/user';
import { System } from '../../../stores/system';
import { Exercise } from '../../../stores/exercise';

const PrepareStatusMap = getMap(PrepareStatus, 'value', 'label');
const PrepareExaminationTimeMap = getMap(PrepareExaminationTime, 'value', 'label');
const ServiceKeyMap = getMap(ServiceKey, 'value', 'label');

export default class extends Page {
  init() {
    this.categoryMap = {};
    this.moneyList = [{
      key: 'id',
      type: 'hidden',
    }, {
      key: 'money',
      type: 'number',
      name: '增加金额',
    }];
    this.columns = [{
      title: '订单时间',
      dataIndex: 'createTime',
      render: (text) => {
        return formatDate(text);
      },
    }, {
      title: '购买',
      dataIndex: 'service',
      render: (text, record) => {
        return `${ServiceKeyMap[text]} ${record.isUse ? '已使用' : ''}`;
      },
    }, {
      title: '消费金额',
      dataIndex: 'money',
      render: (text) => {
        return formatMoney(text);
      },
    }];
    Exercise.allStruct().then(result => {
      this.categoryMap = getMap(result.filter(row => row.level === 2).map(row => { row.title = `${row.titleZh}/${row.titleEn}`; row.value = row.id; return row; }), 'id', 'title');
      this.setState({ exercise: result });
    });
  }

  initData() {
    const { id } = this.params;
    let handler;
    if (id) {
      handler = User.get({ id });
    } else {
      handler = Promise.resolve();
    }
    handler
      .then(result => {
        this.setState({ data: result });
        this.refreshService(this.state.search.page, this.state.search.size);
      });
  }

  realAction() {
    this.open({ id: this.state.data.id }, 'real');
  }

  changeInfo(field, value) {
    const { real = {} } = this.state;
    real[field] = value;
    this.setState({ real });
  }

  addMoneyAction() {
    asyncForm('增加金额', this.moneyList, { id: this.state.data.id }, data => {
      return User.addMoney(data).then(() => {
        asyncSMessage('添加成功!');
        this.refresh();
      });
    });
  }

  frozenAction() {
    asyncDelConfirm('操作确认', '是否要封禁账户?封禁后账户无法使用网站', () => {
      return User.frozen({ id: this.state.data.id })
        .then(() => {
          asyncSMessage('操作成功!');
          this.refresh();
        });
    });
  }

  refreshService(p, size) {
    const { id } = this.params;
    const { page } = this.state;
    page.current = p || 1;
    page.pageSize = size || 20;
    this.setState({ page });
    User.listService({ user_id: id, page: page.current, size: page.pageSize })
      .then(result => {
        this.setTableData(result.list, result.total);
      });
  }

  renderBase() {
    const { data = {} } = this.state;
    return <Block>
      <h1>用户基本信息{data.isFrozen === 0 && <Button type='danger' onClick={() => {
        this.frozenAction();
      }}>封禁账户</Button>}
        {data.isFrozen === 1 && '已封禁'}</h1>

      <Form>
        <div className="group">
          <h2>个人资料</h2>
          <Row>
            <Col span={12}>
              <Form.Item labelCol={{ span: 5 }} wrapperCol={{ span: 16 }} label='用户ID'>
                {data.id}
              </Form.Item>
            </Col>
            <Col span={12}>
              <Form.Item labelCol={{ span: 5 }} wrapperCol={{ span: 16 }} label='用户昵称'>
                {data.nickname}
              </Form.Item>
            </Col>
            <Col span={12}>
              <Form.Item labelCol={{ span: 5 }} wrapperCol={{ span: 16 }} label='用户手机'>
                {data.mobile}
              </Form.Item>
            </Col>
            <Col span={12}>
              <Form.Item labelCol={{ span: 5 }} wrapperCol={{ span: 16 }} label='用户微信'>
                {data.wechatUnionid ? '已绑定' : '未绑定'}
              </Form.Item>
            </Col>
            <Col span={12}>
              <Form.Item labelCol={{ span: 5 }} wrapperCol={{ span: 16 }} label='邮箱'>
                {data.email ? '已绑定' : '未绑定'}
              </Form.Item>
            </Col>
            <Col span={12}>
              <Form.Item labelCol={{ span: 5 }} wrapperCol={{ span: 16 }} label='注册时间'>
                {formatDate(data.createTime)}
              </Form.Item>
            </Col>
            <Col span={12}>
              <Form.Item labelCol={{ span: 5 }} wrapperCol={{ span: 16 }} label='头像'>
                <Avatar src={data.avatar} />
              </Form.Item>
            </Col>
          </Row>
        </div>

        <div className="group">
          <h2>实名认证{data.realStatus === 0 && <Button onClick={() => {
            this.realAction();
          }}>人工认证</Button>}</h2>

          {data.realStatus > 0 && <Row>
            <Col span={12}>
              <Form.Item labelCol={{ span: 5 }} wrapperCol={{ span: 16 }} label='身份证id'>
                {data.realIdentity}
              </Form.Item>
            </Col>
            <Col span={12}>
              <Form.Item labelCol={{ span: 5 }} wrapperCol={{ span: 16 }} label='真实姓名'>
                {data.realName}
              </Form.Item>
            </Col>
            <Col span={12}>
              <Form.Item labelCol={{ span: 5 }} wrapperCol={{ span: 16 }} label='地区'>
                {data.realAddress}
              </Form.Item>
            </Col>
            <Col span={12}>
              <Form.Item labelCol={{ span: 5 }} wrapperCol={{ span: 16 }} label='身份证照片'>
                <Avatar src={data.realPhotoFront} />
                <Avatar src={data.realPhotoBack} />
              </Form.Item>
            </Col>
          </Row>}
        </div>
        <div className="group">
          <h2>备考信息</h2>
          {data.prepareTime && <Row>
            <Col span={12}>
              <Form.Item labelCol={{ span: 5 }} wrapperCol={{ span: 16 }} label='身份'>
                {PrepareStatusMap[data.prepareStatus]}
              </Form.Item>
            </Col>
            <Col span={12}>
              <Form.Item labelCol={{ span: 5 }} wrapperCol={{ span: 16 }} label='考试时间'>
                {PrepareExaminationTimeMap[data.PrepareExaminationTime]}
              </Form.Item>
            </Col>
            <Col span={12}>
              <Form.Item labelCol={{ span: 5 }} wrapperCol={{ span: 16 }} label='出分时间'>
                {data.prepareScoreTime ? formatDate(data.prepareScoreTime) : ''}
              </Form.Item>
            </Col>
            <Col span={12}>
              <Form.Item labelCol={{ span: 5 }} wrapperCol={{ span: 16 }} label='目标成绩'>
                {data.prepareGoal}
              </Form.Item>
            </Col>
          </Row>}
        </div>
      </Form>
    </Block>;
  }

  renderService() {
    const { data = {} } = this.state;
    return <Block>
      <h1>服务开通</h1>
      <div className="group">
        <h2>累计消费金额</h2>
        <span>{data.totalMoney}</span>
        <Button onClick={() => {
          this.addMoneyAction();
        }}>增加线下金额</Button>
      </div>
      <div className="group">
        <h2>已开通服务</h2>
        {(data.services || []).map(service => {
          return <p>{ServiceKeyMap[service.service]}: {formatDate(service.startTime)} - {formatDate(service.expireTime)}</p>;
        })}
      </div>
      <div className="group">
        <h2>消费记录</h2>
        <TableLayout
          columns={this.tableSort(this.columns)}
          list={this.state.list}
          pagination={this.state.page}
          loading={this.props.core.loading}
          onChange={(pagination) => this.refreshService(pagination.current, pagination.pageSize)}
        />
      </div>
    </Block>;
  }

  renderStudy() {
    const { data = {} } = this.state;
    return <Block>
      <h1>学习统计</h1>
      <div className="group">
        <h2>累计学习时间</h2>
        <p>{formatSeconds(data.totalTime)}</p>
      </div>
      <div className="group">
        <h2>学习数据</h2>
        <Button onClick={() => {
          User.locationUser(this.params.id, `${UserUrl}/my/data`);
        }}>查看</Button>
      </div>
    </Block>;
  }

  renderView() {
    return <div flex>
      {this.renderBase()}
      {this.renderService()}
      {this.renderStudy()}

      {this.state.real && <Modal visible closable title='实名认证' onCancel={() => {
        this.close(false, 'real');
      }} onOk={() => {
        this.submitReal();
      }}>
        <Form>
          <Form.Item labelCol={{ span: 5 }} wrapperCol={{ span: 16 }} label='身份id'>
            <Input value={this.state.real.realIdentity || ''} placeholder='输入身份id' onChange={e => {
              this.changeInfo('realIdentity', e.target.value);
            }} />
          </Form.Item>
          <Form.Item labelCol={{ span: 5 }} wrapperCol={{ span: 16 }} label='真实姓名'>
            <Input value={this.state.real.realName || ''} placeholder='输入真实姓名' onChange={e => {
              this.changeInfo('realName', e.target.value);
            }} />
          </Form.Item>
          <Form.Item labelCol={{ span: 5 }} wrapperCol={{ span: 16 }} label='地址'>
            <Input value={this.state.real.realAddress || ''} placeholder='输入地址' onChange={e => {
              this.changeInfo('realAddress', e.target.value);
            }} />
          </Form.Item>
          <Form.Item labelCol={{ span: 5 }} wrapperCol={{ span: 16 }} label='正面照'><Upload
            showUploadList={false}
            beforeUpload={(file) => System.uploadImage(file).then((result) => {
              this.changeInfo('realFront', result.url);
              return Promise.reject();
            })}
          >
            <Button>上传正面{(this.state.real || {}).realFront ? '(已上传)' : ''}</Button>
          </Upload></Form.Item>
          <Form.Item labelCol={{ span: 5 }} wrapperCol={{ span: 16 }} label='反面照'><Upload
            showUploadList={false}
            beforeUpload={(file) => System.uploadImage(file).then((result) => {
              this.changeInfo('realBack', result.url);
              return Promise.reject();
            })}
          >
            <Button>上传反面{(this.state.real || {}).realBack ? '(已上传)' : ''}</Button>
          </Upload></Form.Item>
        </Form>
      </Modal>}
    </div>;
  }
}