antshop/backend/web/src/mini-program-management/ManageTriers.js

import React from "react";
import PropTypes from "prop-types";
import styled from "styled-components";
import {Input, Button, Tag, Alert, message} from "antd";
import {LoadingBar, Reason} from "./common";
import axios from "axios";

const colorList = ['magenta', 'red', 'volcano', 'orange', 'gold', 'lime', 'green', 'cyan', 'blue', 'geekblue', 'purple'];

function getRandomInt(min, max) {
  min = Math.ceil(min);
  max = Math.floor(max);
  return Math.floor(Math.random() * (max - min)) + min; //The maximum is exclusive and the minimum is inclusive
}

export default class ManageTriers extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      trierList: null,
      wechatId: '',
      isAddingTrier: false
    };
  }

  static propTypes = {};

  static defaultProps = {};

  componentWillMount() {
    this.getTrierList();
  }

  getTrierList = () => {
    axios.get('/agent/trier-list').then(data => {
      this.setState({trierList: data.map(trier => ({
          ...trier,
          color: colorList[getRandomInt(0, colorList.length - 1)],
        }))})
    }).catch((err) => this.setState({trierList: err}));
  };

  changeWechatId = (e) => {
    this.setState({wechatId: e.target.value})
  };

  addTrier = () => {
    const {wechatId} = this.state;

    if (wechatId) {
      this.setState({isAddingTrier: true});
      axios.post('/agent/set-trier', {
        wechatId
      }).then(() => {
        message.success('设置体验者成功');
        this.setState({isAddingTrier: false, wechatId: ''});
        this.getTrierList();
      }).catch(() => {
        this.setState({isAddingTrier: false})
      });
    } else {
      message.error('请输入用户微信号')
    }
  };

  render() {
    const {trierList, wechatId, isAddingTrier} = this.state;
    let trierListView;

    if (trierList && trierList.length > 0) {
      trierListView = (
        <TrierList>
          {trierList.map((trier, index) => (
            <Tag
              key={index}
              color={trier.color}
            >{trier.wechatid}</Tag>
          ))}
        </TrierList>
      )
    } else if (trierList && trierList.length === 0) {
      trierListView = <Reason>当前没有体验者</Reason>
    } else if (trierList && typeof trierList === 'string') {
      trierListView = <Reason>{trierList}</Reason>
    } else {
      trierListView = <LoadingBar>加载体验者中</LoadingBar>
    }

    return (
      <Root>
        <Title>体验者微信号列表</Title>
        <Alert message="由于微信限制，只有通过本系统设置的体验者才会在此处显示，在微信公众平台设置的不能在此处显示。" type="info" showIcon />
        <TrierArea>{trierListView}</TrierArea>
        <Handler>
          <Input
            placeholder='请输入用户微信号'
            value={wechatId}
            allowClear
            onChange={this.changeWechatId}
          />
          <Button
            type='primary'
            loading={isAddingTrier}
            style={{marginLeft: '10px'}}
            onClick={this.addTrier}
          >添加体验者</Button>
        </Handler>
      </Root>
    )
  }
}

const Root = styled.div`
  
`;

const Title = styled.div`
  font-size: 1.2em;
  font-weight: bold;
  margin-bottom: 20px;
`;

const TrierArea = styled.div`
  margin: 20px 0;
`;

const Handler = styled.div`
  display: flex;
`;

const TrierList = styled.div`
`;