react-app-shell/activity/src/views/feedback-report/index.js

react打包脚本和example, 这里的版本请忽略

import React, { Component } from 'react';
import { inject, observer } from 'mobx-react';
import moment from 'moment';

import { monitor, tools } from '../../utils';
import { WechatConfig, DocumentTitle, checkUserAuth } from '../../components';
import { ServiceError, Loading } from '../common';
import VideoPlayer from './component/video-player';
import AudioPlayer from '../../components/audio/audio-player';
import ShareBtn from './component/share-btn';
import { appConfig } from '../../config';

import { AccountsType } from '../../constants';

import styles from './index.less';
import classNames from 'classnames';

import Item1 from '../../public/images/feedback/item-1.png';
import Item2 from '../../public/images/feedback/item-2.png';
import Item3 from '../../public/images/feedback/item-3.png';
import Item4 from '../../public/images/feedback/item-4.png';

/**
 * 反馈报告
 * */
@inject(({ feedbackStore, audioStore }) => {
  return {
    init: audioStore.init,
    serviceError: feedbackStore.serviceError,
    feedback: feedbackStore.feedback,
    shareOptions: feedbackStore.shareOptions,
    getFeedBackData: feedbackStore.getFeedBackData,
    playFinish: audioStore.playFinish
  };
})
@observer
@checkUserAuth({
  account: AccountsType.MAIN,
  support: 'all'
}) // 微信授权--魔力耳朵公众号
export default class FeedBackReport extends Component {
  constructor(props) {
    super(props);
    this.state = {
      poster: ''
    };
    const isShare = tools.getQueryString('feedbacksharing');

    props.getFeedBackData(this.props.match.params.id, isShare ? true : false);
  }

  componentDidMount() {
    const { feedback, playFinish } = this.props;
    if (feedback.recordId) {
      this.initAudio(feedback);
    }
    monitor.log('', 'feedback >> 浏览课后反馈报告页面');
    document.addEventListener('visibilitychange', () => {
      playFinish();
    });
  }

  componentDidUpdate(prevProps, prevState, snapshot) {
    const { feedback, playFinish } = this.props;
    if (prevProps.feedback.recordId !== feedback.recordId) {
      this.initAudio(feedback);
    }
    document.removeEventListener('visibilitychange', () => {
      playFinish();
    });
  }

  /**
   * 初始化音频
   * @param feedback 页面数据 Object
   */
  initAudio = (feedback) => {
    const { init } = this.props;
    const poster = tools.getOssVideoPoster(feedback.videoUrl);
    this.setState({
      poster: poster
    });
    const voiceMaps = JSON.parse(feedback.keyVoiceUrlMap);
    const audioMap = [feedback.evaluationVoiceUrl];
    Object.keys(voiceMaps).forEach((word) => {
      audioMap.push(voiceMaps[word]);
    });
    init(audioMap);
  };

  /**
   * 有道翻译
   */
  handleClickTranslate = () => {
    const { feedback } = this.props;
    const id = feedback.recordId;
    window.location.href = `${appConfig.basename}/feedback/translate/${id}`;
  };

  render() {
    const { poster } = this.state;
    const { feedback, serviceError, shareOptions } = this.props;
    const ItemBg = [Item1, Item2, Item3, Item4];
    if (serviceError.isError) {
      return <ServiceError error={serviceError} id={this.props.match.params.id} />;
    }

    if (!feedback.recordId) {
      return <Loading />;
    }
    const voiceMap = JSON.parse(feedback.keyVoiceUrlMap);
    return (
      <div className={styles.feedback}>
        <div className={styles.bgTop}>
          <div className={styles.logo}></div>
          <div className={styles.title}>魔力耳朵课后反馈报告</div>
          <div className={styles.fedback}>
            <p>
              宝贝：
              <span>
                {feedback.studentName.length > 20
                  ? `${feedback.studentName.substr(0, 12)}...`
                  : feedback.studentName}
              </span>
            </p>
            <p>
              上课时间：<span>{moment(feedback.startTime).format('YYYY-MM-DD HH:mm')}</span>
            </p>
            <p>
              <span>课程名称：</span>
              <span>{feedback.courseName}</span>
            </p>
          </div>
          <div className={styles.teacher}></div>
        </div>
        <div className={styles.con2}>
          <div className={styles.pos}>
            <div className={classNames(styles.part, styles.part1)}>
              <div className={styles.icon}></div>
              <div className={styles.fang}>
                <div className={styles.common}>
                  <div className={classNames(styles.text, styles.text1)}>
                    外教对宝贝说<p className={classNames(styles.titleIcon, styles.icon1)}></p>
                  </div>

                  <div className={styles.teacherSay}>
                    <p className={styles.teacherIcon}></p>
                    <p className={styles.teacherName}>{feedback.teacherName}</p>
                    <p className={styles.trans} onClick={this.handleClickTranslate}>
                      有道翻译 》
                    </p>
                  </div>
                  <div className={classNames(styles.audioBox, styles.voice)}>
                    <AudioPlayer bury="evaluate" url={feedback.evaluationVoiceUrl}>
                      评价录音<span>({feedback.evaluationVoiceLong}S)</span>
                    </AudioPlayer>
                  </div>
                </div>
                <div className={styles.common}>
                  <div className={classNames(styles.text, styles.text2)}>
                    跟着老师练习正确发音
                    <p className={classNames(styles.titleIcon, styles.icon2)}></p>
                  </div>
                  {Object.keys(voiceMap).map((word, index) => {
                    return (
                      <div key={word} className={styles.audioBox}>
                        <AudioPlayer bury="public" url={voiceMap[word]}>
                          {word}
                        </AudioPlayer>
                      </div>
                    );
                  })}
                </div>

                <div className={styles.common}>
                  <div className={classNames(styles.text, styles.text3)}>
                    课程目标
                    <p className={classNames(styles.titleIcon, styles.icon3)}></p>
                  </div>
                  <div className={styles.desc}>
                    {feedback.target.split('\n').map((item, index) => {
                      return (
                        <div key={`item-${index}`} className={styles.item}>
                          <p style={{ backgroundImage: `url(${ItemBg[index % 4]})` }}></p>
                          <div>{item}</div>
                        </div>
                      );
                    })}
                  </div>
                </div>
              </div>
            </div>
            <div className={classNames(styles.part, styles.part2)}>
              <div className={styles.fang}>
                <div className={styles.common}>
                  <div className={classNames(styles.text, styles.text3)}>
                    课程数据
                    <p className={classNames(styles.titleIcon, styles.icon4)}></p>
                  </div>
                  <div className={styles.desc}>
                    <div className={styles.course}>
                      {feedback.isLate === 'YES' ? <div className={styles.lateIcon}></div> : ''}
                      <div className={styles.courseTime}></div>
                      <div className={styles.courseDesc}>
                        上课时长：
                        <span>{`${moment(feedback.firstJoinTime).format('HH:mm')} - ${moment(
                          feedback.lastLeaveTime
                        ).format('HH:mm')}  (${feedback.learnTimeMin}分钟)`}</span>
                      </div>
                    </div>
                    <div className={styles.course}>
                      <div className={styles.coursePre}></div>
                      <div className={styles.courseDesc}>
                        <p>
                          预习次数：<span>{feedback.previewCount}</span>
                        </p>
                        <p>
                          复习次数：<span>{feedback.reviewCount}</span>
                        </p>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>

            {feedback.videoUrl !== '' ? (
              <div className={classNames(styles.part, styles.part3)}>
                <div className={styles.fang}>
                  <div className={styles.common}>
                    <div className={classNames(styles.text, styles.text3)}>
                      上课片段
                      <p className={classNames(styles.titleIcon, styles.icon5)}></p>
                    </div>
                    <div className={styles.desc}>
                      <div className={styles.playVideo}>
                        <div className={styles.single}>
                          <div className={styles.itemWrapper}>
                            <VideoPlayer
                              width="100%"
                              poster={poster}
                              src={feedback.videoUrl}
                              userAgent="userAgent"
                            />
                          </div>
                        </div>
                      </div>
                    </div>
                    <div className={styles.videoDesc}>
                      <div></div>
                      {feedback.studentName.length > 12
                        ? `${feedback.studentName.substr(0, 12)}...`
                        : feedback.studentName}
                      在课堂中的表现节选
                      <div></div>
                    </div>
                  </div>
                </div>
              </div>
            ) : (
              ''
            )}
            <ShareBtn qrCode={feedback.qrCodeImg} />
          </div>
        </div>
        <WechatConfig showShare={true} shareOptions={shareOptions} />
        <DocumentTitle title="魔力耳朵课后反馈报告" />
      </div>
    );
  }
}