index.js

import React, { PureComponent } from 'react';
import './aist-share.scss'
import withFullSize from 'src/HOCs/WithFullSize'
import { http, wxShare } from "src/utils";
import { getWXObject } from "src/utils/wechat/base";
import {Link} from "react-router-dom";

class AistShare extends PureComponent {
    state = {
        course: {
            title: '',
            des: '',
            img: '',
            id: ''
        },
        progress: {
            days: 0,
            action: 0
        },
        showShareCover: true,
        user: {
            avatar: '',
            name: '',
            time: ''
        }
    }

    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 => {
                if (res.data.errno == 200) {
                    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,
                        link: location.href
                    })
                }

            })
    }


    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=""/>
                        </div>
                    </div>
                </div>
            </div>
        );
    }
}

export default withFullSize(AistShare);