课程

src/components/activity/newyear-2019/common/commonContainer/index.scss

@@ -16,6 +16,7 @@
         rgba(254, 228, 29, 0.98) 48%,
         rgba(254, 228, 29, 0) 100%
       );
+      margin: 0 auto;
     }
     p {
       font-size: 18px;

src/components/activity/newyear-2019/preheat/LiveRoom/index.js

 import React, { Component } from 'react';
 import './index.scss';
+import { Toast } from 'antd-mobile';
+import { http } from '@/utils';
 import CommonContainer from './../../common/commonContainer/index'
 
 export default class index extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      list: []
+    }
+  }
+
+  componentDidMount() {
+    http.get(`${API.home}/sys/get_live_info`).then(res => {
+      const { code, data, msg } = res.data;
+      if (code === 200) {
+        this.setState({
+          list: data
+        })
+      } else {
+        Toast.info(msg);
+      }
+    });
+  }
+  // 预约直播
+  subscribe = (id) => {
+    // TODO 检查是否已登录
+    // this.checkLogin();
+    http.get(`${API['base-api']}/sys/createLiveQrcode/${id}`).then(res => {
+      let { errno, data, msg } = res.data;
+      if (errno === 200) {
+        // this.livingUrl = data.url;
+        // this.isSubscribe = true;
+        // TODO 显示二维码地址 并且传递给二维码的图片/地址
+      } else {
+        Toast.info(msg);
+      }
+    });
+  }
+  // 已预约 给提示
+  tip = () => {
+    Toast.info('你已预约该直播');
+  }
+  // 去直播间
+  toLivingRoom = (id) => {
+    // TODO 检查是否已登录
+    // this.checkLogin();
+    window.location.href = `${window.location.protocol}//www.julyedu.com/live/m_room/${id}`
+  }
+  // 查看回放
+  checkVideo = (url) => {
+    // TODO 检查是否已登录
+    // this.checkLogin();
+    // TODO 这里需要课程ID
+    const vCourseId = url.split('/')[0];
+    history.push(`/play/video?id=${vCourseId}`)
+  }
+
   render() {
+    const { list } = this.state;
     return (
-      <div>
+      <div className='live__container'>
         <CommonContainer title='大咖直播'>
-          <div>
+          <ul className='live__list'>
+            {
+              list.length && (
+                list.map((item, index) => {
+                  return <li key={index} className='live_room_item'>
+                    <img className='user__avatar' src={item.avatar} alt="" />
+                    <div className='live__info'>
+                      <div className="theme">
+                        <span>主题：</span>
+                        <p>{item.title}</p>
+                      </div>
+                      <div className="info__item">
+                        <span>时间：</span>
+                        <p>{item.date}</p>
+                      </div>
+                      <div className="info__item">
+                        <span>讲师：</span>
+                        <p>{item.teacher}</p>
+                      </div>
+                      {
+                        item.on_live == 0 && item.is_end == 0 && item.is_subscribe == 0 && (
+                          <span onClick={this.subscribe(item.live_id)} className="order__btn">立即预约</span>
+                        )
+                      }
+                      {
+                        item.on_live == 0 && item.is_end == 0 && item.is_subscribe == 1 && (
+                          <span onClick={this.tip} className="order__btn subscribed">已预约</span>
+                        )
+                      }
+                      {
+                        item.on_live == 1 && item.is_end == 0 && (
+                          <span onClick={this.toLivingRoom(item.room_url)} className="order__btn living">正在直播</span>
+                        )
+                      }
+                      {
+                        item.is_end == 1 && item.transcribe_url != '' && (
+                          <span onClick={this.checkVideo(item.transcribe_url)} className="order__btn check__video">查看回放</span>
+                        )
+                      }
 
                     </div>
+                  </li>
+                })
+              )
+            }
+          </ul>
         </CommonContainer>
       </div>
     )

src/components/activity/newyear-2019/preheat/LiveRoom/index.scss

+.live__container {
+  .live_room_item {
+    width: 330px;
+    height: 100px;
+    margin: 0 auto;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    padding-bottom: 15px;
+    margin-top: 15px;
+
+    &:first-child {
+      border-bottom: 1px solid rgba(13, 77, 43, 1);
+    }
+
+    .user__avatar {
+      width: 73px;
+      height: 85px;
+      flex: 0 0 auto;
+      margin-right: 12px;
+      background: #ddd;
+      border-radius: 4px;
+    }
+
+    .live__info {
+      display: flex;
+      flex-direction: column;
+      justify-content: flex-start;
+      align-items: flex-start;
+      color: #fff;
+      font-size: 14px;
+      width: 246px;
+      height: 85px;
+      position: relative;
+
+      .info__item {
+        display: flex;
+        justify-content: flex-start;
+        align-content: center;
+        &:nth-child(2) {
+          margin: 9px 0;
+        }
+        span {
+          width: 46px;
+          flex: 0 0 auto;
+          color: #eaf787;
+          line-height: 16px;
+        }
+        p {
+          line-height: 16px;
+        }
+      }
+      .theme {
+        span {
+          display: block;
+          width: 46px;
+          float: left;
+          color: #eaf787;
+          line-height: 16px;
+        }
+        p {
+          width: 198px;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          display: -webkit-box;
+          -webkit-line-clamp: 2;
+          float: left;
+          line-height: 16px;
+          color: #fff;
+          /* autoprefixer: off */
+          -webkit-box-orient: vertical;
+        }
+      }
+      .order__btn {
+        position: absolute;
+        right: 0;
+        bottom: 0;
+        width: 89px;
+        height: 28px;
+        border-radius: 4px;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        color: #070F08;
+        background:linear-gradient(90deg,rgba(255,227,0,1) 0%,rgba(255,202,0,1) 100%);
+      }
+      .subscribed {
+        background:rgba(254,228,29,1);
+      }
+      .living {
+        background:rgba(0,153,255,1);
+        color: #FFF;
+      }
+      .check__video {
+        background:rgba(114,220,141,1);
+        color: #FFF;
+      }
+    }
+  }
+}

src/components/activity/newyear-2019/preheat/index.js

@@ -2,6 +2,7 @@ import React, { Component } from 'react'
 import './index.scss'
 import LiveRoom from './LiveRoom/index';
 import YearCourse from './YearCourse/index';
+import TreasureBox from './../treasure-box/index';
 
 export default class index extends Component {
   render() {
@@ -9,6 +10,7 @@ export default class index extends Component {
       <div className={'year-index'}>
         <LiveRoom />
         <YearCourse />
+        <TreasureBox></TreasureBox>
       </div>
     )
   }

src/components/activity/newyear-2019/treasure-box/index.js

+import React, { Component } from 'react';
+import CommonContainer from './../common/commonContainer/index';
+import TreasureRank from './rank';
+
+class TreasureBox extends Component {
+  render() {
+    return (
+      <div>
+        <CommonContainer>
+          <TreasureRank />
+        </CommonContainer>
+      </div>
+    )
+  }
+}
+
+export default TreasureBox;
\ No newline at end of file

src/components/activity/newyear-2019/treasure-box/rank.js

+import React, { Component } from 'react';
+import { http } from '@/utils';
+import './rank.scss'
+
+class TreasureRank extends Component {
+
+  constructor(props) {
+    super(props);
+    this.state = {
+      rank: [],
+      rankList: [],
+      isMore: false,
+    }
+  }
+
+  componentDidMount() {
+    this.fetchRankInfo();
+  }
+
+  fetchRankInfo = () => {
+    http.get(`${API.home}/sys/treasure/ranking`).then(res => {
+      const { code, data } = res.data;
+      if(code === 200) {
+        if(data.length > 5) {
+          this.setState({
+            rank: data.filter((item, index) => index < 5),
+            rankList: data,
+            isMore: true,
+          });
+        }else {
+          this.setState({
+            rank: data,
+            rankList: data,
+            isMore: false,
+          });
+        }
+      }
+    });
+  }
+
+  switchMoreRank = () => {
+    const { rankList, isMore } = this.state;
+    if(isMore) {
+      this.setState({
+        rank: rankList,
+        isMore: false,
+      })
+    }else {
+      this.setState({
+        rank: rankList.filter((item, index) => index < 5),
+        isMore: true,
+      })
+    }
+  }
+
+  render() {
+    const { rank, isMore } = this.state;
+    return (
+      <div data-skip="rank">
+        <div className="rank-title">
+          <i className="rank-title__decorate"></i>
+          <h2 className="rank-title__txt">宝箱达人榜</h2>
+          <i className="rank-title__decorate"></i>
+        </div>
+        <p className="rank-desc">宝箱数量前50名可额外获得一份奖品，数量相同的用时短者排名在前</p>
+        <dl className="rank-header">
+          <dd className="rank-column">排名</dd>
+          <dd className="rank-column">用户</dd>
+          <dd className="rank-column">宝箱数量</dd>
+          <dd className="rank-column">奖品</dd>
+        </dl>
+        <div className="rank-body">
+          {
+            rank.map((item, index) => (
+              <dl className="rank-item" key={index}>
+                <dd className="rank-column">
+                  {
+                    index <= 2
+                    ? <span className="rank-column__number" data-num={index}></span>
+                    : <span>{index+1}</span>
+                  }
+                </dd>
+                <dd className="rank-column">
+                  <span>{item.user_name}</span>
+                </dd>
+                <dd className="rank-column">
+                  <span>{item.num}</span>
+                </dd>
+                <dd className="rank-column">
+                  {
+                    item.url
+                    ? <a className="rank-column__txt" href={item.url}>{item.prize_name}</a>
+                    : <span className="rank-column__txt">{item.prize_name}</span>
+                  }
+                </dd>
+              </dl>
+            ))
+          }
+          <div className="rank-more" onClick={this.switchMoreRank}>
+            <span className="rank-more__txt">展开</span>
+            <i className="rank-more__icon" data-more={isMore}></i>
+          </div>
+        </div>
+      </div>
+    )
+  }
+}
+
+export default TreasureRank;
\ No newline at end of file

src/components/activity/newyear-2019/treasure-box/rank.scss

+[data-skip="rank"] {
+  .rank-title {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .rank-title__decorate {
+    display: inline-block;
+    width: 11px;
+    height: 12px;
+    background-size: cover;
+    background-image: url('https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/newyear20/PC/icon-decorate-0.png');
+  }
+
+  .rank-title__txt {
+    position: relative;
+    margin: 0 8px;
+    font-size: 18px;
+    font-weight: normal;
+    color: #FFE300;
+    text-align: center;
+    line-height: 1;
+
+    &::after {
+      content: '';
+      position: absolute;
+      top: -8px;
+      right: -8px;
+      width: 14px;
+      height: 11px;
+      background-size: cover;
+      background-image: url('https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/newyear20/PC/icon-decorate-1.png');
+    }
+  }
+  
+  .rank-desc {
+    margin: 7px 0 0;
+    padding: 0 48px;
+    font-size: 12px;
+    color: #FFE300;
+    text-align: center;
+    line-height: 16px;
+  }
+
+  .rank-header {
+    margin: 12px 10px 0;
+    border-radius: 5px 5px 0 0;
+    font-size: 0;
+    overflow: hidden;
+
+    .rank-column {
+      color: #1D5432;
+      font-size: 12px;
+      line-height: 30px;
+      background-color: #FFE300;
+    }
+  }
+
+  .rank-body {
+    margin: 0 10px;
+    border-left: 1px solid #81F3AF;
+    border-bottom: 1px solid #81F3AF;
+    border-right: 1px solid #81F3AF;
+    border-radius: 0 0 5px 5px;
+    background-color: #1D5432;
+  }
+
+  .rank-item {
+    border-bottom: 1px solid #0E7442;
+
+    .rank-column {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      height: 40px;
+      font-size: 12px;
+      color: #fff;
+    }
+  }
+
+  .rank-column {
+    display: inline-block;
+    text-align: center;
+    vertical-align: middle;
+
+    &:nth-child(1) {
+      width: 10%;
+    }
+
+    &:nth-child(2) {
+      width: 25%;
+    }
+
+    &:nth-child(3) {
+      width: 20%;
+    }
+
+    &:nth-child(4) {
+      width: 45%;
+    }
+  }
+
+  .rank-column__number {
+    display: inline-block;
+    width: 11px;
+    height: 12px;
+    background-size: cover;
+
+    &[data-num="0"] {
+      background-image: url('https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/active19_717/m/717/-s-diyiming.png');
+    }
+
+    &[data-num="1"] {
+      background-image: url('https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/active19_717/m/717/-s-dierming.png');
+    }
+
+    &[data-num="2"] {
+      background-image: url('https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/active19_717/m/717/-s-disanming.png');
+    }
+  }
+
+  .rank-column__txt {
+    display: inline-block;
+    width: 100%;
+    box-sizing: border-box;
+    padding: 0 5px;
+    text-align: left;
+  }
+
+  a.rank-column__txt {
+    text-decoration: underline;
+  }
+
+  .rank-more {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 40px;
+  }
+
+  .rank-more__txt {
+    font-size: 14px;
+    color: #fff;
+  }
+
+  .rank-more__icon {
+    width: 11px;
+    height: 12px;
+    margin-left: 5px;
+    background-size: cover;
+    background-image: url('https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/newyear20/H5/icon-arrow-double.png');
+
+    &[data-more="false"] {
+      transform: rotate(180deg);
+    }
+  }
+}