index.js

/* eslint-disable eqeqeq */
import React, { Component } from "react"
import "./index.scss"
import { HeaderBar, VList } from "../../common"
import { http } from "src/utils"
import { Link } from "react-router-dom"
import { Toast } from "antd-mobile"
import { connect } from "react-redux"
import Loading from "src/common/Loading"

class Purchased extends Component {
  constructor(props) {
    super(props)
    this.state = {
      data: [],
      isLoading: true,
    }
  }

  componentDidMount() {
    this.getList()
  }

  // 获取订单
  getList = () => {
    http.get(`${API.home}/m/my/courses`).then((res) => {
      if (res.data.code === 200) {
        this.setState({
          data: res.data.data,
          isLoading: false,
        })
      } else {
        Toast.info(res.data.msg, 2)
      }
    })
  }

  toCourseDetail = (id) => {
    const { history } = this.props
    history.push(`/detail?id=${id}`)
  }
  render() {
    const { user } = this.props
    const uid = user && user.data && user.data.uid
    return (
      <div className="purchased-box">
        <HeaderBar arrow={true} title="已购课程" cart={false} toHref="/my" />
        <Loading isLoading={this.state.isLoading}>
          {this.state.data && this.state.data.length > 0 ? (
            <div className="purchased-body">
              <div className="tip">加群请备注您的学号：{uid}</div>
              {this.state.data.map((item, index) => {
                const Info = (
                  <div className="info">
                    <p
                      className="title text-overflow-2"
                      onClick={() => this.toCourseDetail(item.course_id)}
                    >
                      {item.course_title}
                    </p>
                    <p className="contact text-overflow-1">
                      {item.simpledescription}
                    </p>

                    {item.is_aist && (
                      <div className="des">助教微信：{item.assist_weixin}</div>
                    )}
                    {!item.is_aist &&
                      item.contact_type == 1 &&
                      item.course_qq && (
                        <div className="des">QQ群：{item.course_qq}</div>
                      )}
                    {!item.is_aist &&
                      item.contact_type == 2 &&
                      item.course_qq && (
                        <div className="des">班主任微信：{item.course_qq}</div>
                      )}
                  </div>
                )
                const status = item.is_aist && (
                  <span className="status">返现</span>
                )
                const courseExpire = item.course_expire &&
                  item.course_expire != "" && (
                    <span className="course-expire">{item.course_expire}</span>
                  )
                return (
                  <VList
                    key={index}
                    img={item.image_name}
                    id={item.course_id}
                    info={Info}
                    status={status}
                    courseExpire={courseExpire}
                    toDetail={this.toCourseDetail}
                  />
                )
              })}
            </div>
          ) : (
            <div className="cart-tip">
              <p className="cart-mess">您还没有课程哦，快去逛逛吧~</p>
              <Link to="/classify">去逛逛</Link>
            </div>
          )}
        </Loading>
      </div>
    )
  }
}

export default connect((state) => ({ user: state.user }), null)(Purchased)