pull and solve

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

@@ -7,7 +7,6 @@ import TreasureNav from './nav'
 import CommonPopup from './../common/commonPopup/index'
 
 export default class index extends Component {
-
     state = {
         showMark: false,
         banner: 'https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/newyear20/H5/m_banner_bj%402x.png'

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

 import React, { Component } from 'react';
 import CommonContainer from './../common/commonContainer/index';
 import TreasureRank from './rank';
+import TeamInfo from './team'
 
 class TreasureBox extends Component {
   render() {
     return (
       <CommonContainer id="year-treasure">
+        <TeamInfo />
         <TreasureRank />
       </CommonContainer>
     )

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

+import React, { Component } from 'react';
+import './team.scss'
+import { getParam, http, SendMessageToApp, browser } from "@/utils"
+import { Toast } from 'antd-mobile'
+
+export default class TeamInfo extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      is_my_team: true, // 是否有自己的队伍
+      prize_info: {
+        name: '',
+        stage_no: 0,
+      },
+      info: {
+        removable: 0,
+        total: 0
+      },
+      member: [],
+    }
+  }
+
+  componentDidMount() {
+    this.getTeamInfo();
+  }
+
+  getTeamInfo = () => {
+    http.get(`${API.home}/sys/treasure/teamInfo`).then(res => {
+      const { code, data, msg } = res.data;
+      if (code === 200) {
+        console.log(data);
+        const { prize_info, is_my_team, info, member } = data;
+        this.setState({
+          prize_info,
+          is_my_team,
+          info,
+          member,
+        })
+      } else {
+        Toast.info(msg);
+      }
+    })
+  }
+
+  render() {
+    const { prize_info: { name, stage_no }, is_my_team, info: {removable, total}, member } = this.state;
+    // 显示文案控制
+    let Text = '';
+    if(total === 0) {
+      Text = `我的宝箱`;
+    } else if (removable === 0) {
+      Text = `共${total}个宝箱`;
+    } else {
+      Text = `共${total}个宝箱/${removable}个未拆`;
+    }
+
+    return (
+      <div className='team_info__container'>
+        <div className='team__member'>
+          <ul className='member__list'>
+            {
+              member && member.length > 0 && (
+                member.map((item, index) => {
+                  return <li key={index} className='member__item'>
+                    <img className='head__image' src="https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/newyear20/H5/default-member-avatar.png" alt=""/>
+                  </li>
+                })
+              )
+            }
+          </ul>
+
+          <div className='box__number'>
+            <img src="https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/newyear20/H5/treasure-box-icon.png" alt="" />
+            <p className='box__text'>
+              {Text}
+            </p>
+            <img className='position__arrow' src="https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/newyear20/H5/arrow_jinzhan.png" alt=""/>
+          </div>
+        </div>
+        <div className='invite__btn'>
+          {
+            is_my_team ? ('继续组队') : ('组队开宝箱')
+          }
+        </div>
+        <p className='stage_prize'>{`第${stage_no}次必中${name}`}</p>
+      </div>
+    )
+  }
+}

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

+.team_info__container {
+  margin-bottom: 30px;
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-start;
+  align-items: center;
+  .team__member {
+    height: 72px;
+    width: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    margin-bottom: 16px;
+
+    .member__list {
+      height: 50px;
+      width: 224px;
+
+      .member__item {
+
+        width: 44px;
+        display: flex;
+        flex-direction: column;
+        justify-content: space-between;
+        align-items: center;
+
+        .head__image {
+          border: 1px solid #FFF;
+          border-radius: 50%;
+          width: 27px;
+          height: 27px;
+        }
+      }
+    }
+
+    .box__number {
+      width: 108px;
+      height: 100%;
+      display: flex;
+      flex-direction: column;
+      justify-content: space-between;
+      align-items: center;
+      position: relative;
+      img {
+        width: 92px;
+        height: 50px;
+      }
+      .box__text {
+        width: 100%;
+        line-height: 12px;
+        font-size: 12px;
+        text-decoration: underline;
+        color: rgba(255, 227, 0, 1);
+      }
+      .position__arrow {
+        width: 18px;
+        height: 18px;
+        position: absolute;
+        left: -7px;
+        top: 18px;
+      }
+    }
+  }
+  .invite__btn {
+    width: 320px;
+    height: 44px;
+    background: rgba(255, 227, 0, 1);
+    border-radius: 3px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    font-size: 15px;
+    color: rgba(11, 123, 69, 1);
+    margin-bottom: 12px;
+  }
+  .stage_prize {
+    font-size: 12px;
+    line-height: 12px;
+    color: rgba(255, 227, 0, 1);
+    text-align: center;
+  }
+}