index.js 3.62 KB
Newer Older
zhanghaozhe committed
1 2 3 4 5
import React, { PureComponent } from "react"
import "./aist-share.scss"
import withFullSize from "src/HOCs/WithFullSize"
import { http, wxShare } from "src/utils"
import { Link } from "react-router-dom"
6 7

class AistShare extends PureComponent {
zhanghaozhe committed
8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25
  state = {
    course: {
      title: "",
      des: "",
      img: "",
      id: "",
    },
    progress: {
      days: 0,
      action: 0,
    },
    showShareCover: true,
    user: {
      avatar: "",
      name: "",
      time: "",
    },
  }
26

zhanghaozhe committed
27 28 29 30 31 32 33 34 35
  componentDidMount() {
    const search = new URLSearchParams(this.props.location.search)
    http
      .get(
        `${API["base-api"]}/m/aist/share_ground_data/${search.get(
          "id"
        )}/${search.get("vId")}`
      )
      .then((res) => {
zhanghaozhe committed
36
        if (res.data.errno === 200) {
zhanghaozhe committed
37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58
          const data = res.data.data
          this.setState({
            course: {
              title: data.course_title,
              des: data.course_desc,
              img: data.image_name,
              id: data.course_id,
            },
            user: {
              avatar: data.avatar,
              name: data.username,
              time: data.create_time,
            },
            progress: {
              days: data.learn_day_num,
              action: data.action_power,
            },
          })
          wxShare({
            title: data.share_title,
            desc: data.share_desc,
            imgUrl: data.image_name,
zhanghaozhe committed
59
            link: window.location.href,
zhanghaozhe committed
60 61 62 63
          })
        }
      })
  }
64

zhanghaozhe committed
65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120
  render() {
    const { user, course, progress } = this.state
    return (
      <div className="aist-share">
        <div className="content">
          <div className="user">
            <img src={user.avatar} alt="头像" />
            <span className="username">{user.name}</span>
            <span className="time">{user.time}</span>
          </div>
          <Link
            to={{ pathname: "/detail", search: `?id=${this.state.course.id}` }}
          >
            <div className="course">
              <div className="course-cover">
                <img src={course.img} alt="课程封面" />
              </div>
              <div className="course-info">
                <div className="title">{course.title}</div>
                <div className="des">{course.des}</div>
              </div>
            </div>
          </Link>
          <ul className="progress">
            <li>
              <div className="title">累计学习</div>
              <div className="progress-value">
                <span className="num">{progress.days}</span>
              </div>
            </li>
            <li>
              <div className="title">行动力超过</div>
              <div className="progress-value">
                <span className="num">{progress.action}</span>%
              </div>
            </li>
          </ul>
          <div className="recommend-app">
            <div className="text">
              <div className="bold">
                <div>立即下载【七月在线】</div>
                <div>众多好课免费学</div>
              </div>
              <div className="light">
                长按识别右侧二维码
                <img
                  src="https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/active19_717/m/aist/arrow.png"
                  alt=""
                />
              </div>
            </div>
            <div className="qrcode">
              <img
                src="https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/tinypng-common/right_app.png"
                alt=""
              />
121
            </div>
zhanghaozhe committed
122 123 124 125 126
          </div>
        </div>
      </div>
    )
  }
127 128
}

zhanghaozhe committed
129
export default withFullSize(AistShare)