estateagents-admin-manager/src/pages/integralMall/verifyList.jsx

import React, { useState, useEffect } from 'react';
import { Form, Input, Button, Icon, Select, message, Table, Divider, Tag, Pagination, Modal, DatePicker } from 'antd';
import { FormattedMessage } from 'umi-plugin-react/locale';
import styles from '../style/GoodsList.less';
import router from 'umi/router';
import moment from 'moment';

import request from '../../utils/request'

const { Option } = Select;
const { MonthPicker, RangePicker, WeekPicker } = DatePicker;

const header = (props) => {
  const [ data, setData ] = useState({})

  useEffect(() => {
    getVerifyList({pageNum: 1,pageSize: 10, phone: props.location.query.telValue });
  },[])

  // 查询列表
  const getVerifyList = (params) => {
    request({
      url: '/api/admin/taPointsExchange',
      method: 'GET',
      params: { ...params },
    }).then((data) => {
        setData(data)
    })
  }

  const changePageNum = (pageNumber) => {
    getVerifyList({ pageNum: 1, pageSize: 10, phone: props.location.query.telValue })
  }

  const toBack = () => {
    router.push({
      pathname: '/integralMall/writeOff',
    });
  }

  const changeStatus = (row) => () => {
    request({
      url: '/api/admin/taPointsExchange/change',
      method: 'PUT',
      data: row
    }).then((data) => {
        message.info("操作成功")
        getVerifyList({ pageNum: pageNumber, pageSize: 10, phone: props.location.query.telValue })
    })
  }
  
  const columns = [
    {
      title: '用户姓名',
      dataIndex: 'personName',
      key: 'personName',
      align: 'center',
    },
    {
      title: '用户类型',
      dataIndex: 'personType',
      key: 'personType',
      align: 'center',
      render: (personType)=> <><span>{personType === 'Realty Consultant' ? '置业顾问' : personType === 'Sales Executive' ? '销售主管' : personType === 'estate agent' ? '经纪人' : ''}</span></>
    },
    {
      title: '手机号',
      dataIndex: 'phone',
      key: 'phone',
      align: 'center',
    },
    {
      title: '商品图片',
      dataIndex: 'image',
      key: 'image',
      align: 'center',
      render: (text, record) => <img src={record.image} className={styles.touxiang} />,
    },
    {
      title: '商品名称',
      dataIndex: 'targetName',
      key: 'targetName',
      align: 'center',
    },
    {
      title: '兑换时间',
      dataIndex: 'createDate',
      key: 'createDate',
      align: 'center',
      render: (createDate) => <><span>{moment(createDate).format('YYYY-MM-DD HH:mm')}</span></>
    },
    {
      title: '领取时间',
      dataIndex: 'verifyDate',
      key: 'verifyDate',
      align: 'center',
      render: (verifyDate) => <><span>{verifyDate != null ? moment(verifyDate).format('YYYY-MM-DD HH:mm') : ''}</span></>
    },
    {
      title: '状态',
      dataIndex: 'status',
      key: 'status',
      align: 'center',
      render: (status)=> <><span>{status == 1 ? '已领取' : '未领取'}</span></>
    },
    {
      title: '操作',
      dataIndex: 'handle',
      key: 'handle',
      align: 'center',
      render: (x,row) => <span style={{ color: '#1990FF' }} onClick={changeStatus(row)}>{ row.status == 1?'':'核销' }</span>
           
    },
  ];

  return (
    <>
      <Button type="primary" className={styles.addBtn} onClick={toBack}>返回</Button>
      <Table dataSource={data.records} columns={columns} pagination={false} />
      <div style={{ display: 'flex', justifyContent: 'flex-end', marginTop: '30px' }}>
        <Pagination showQuickJumper defaultCurrent={1} total={data.total} onChange={changePageNum} />
      </div>
    </>
  )
}
const WrappedHeader = Form.create({ name: 'header' })(header);

export default WrappedHeader