跳转到我的宝箱页面

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'
+import { Toast } from 'antd-mobile';
+import {withRouter} from 'react-router-dom';
 
-export default class TeamInfo extends Component {
+class TeamInfo extends Component {
   constructor(props) {
     super(props);
     this.state = {
@@ -17,6 +18,7 @@ export default class TeamInfo extends Component {
         total: 0
       },
       member: [],
+      removable_data: [],
     }
   }
 
@@ -28,13 +30,13 @@ export default class TeamInfo extends Component {
     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;
+        const { prize_info, is_my_team, info, member, removable_data } = data;
         this.setState({
           prize_info,
           is_my_team,
           info,
-          member: this.format(member)
+          member: this.format(member),
+          removable_data
         })
       } else {
         Toast.info(msg);
@@ -42,6 +44,17 @@ export default class TeamInfo extends Component {
     })
   }
 
+  // 跳转到我的宝箱页
+  toYearTreasure = (close) => {
+    let search = '';
+    if(close) {
+      const {removable_data} = this.state;
+      let current = removable_data[0];
+      search = `?team_num=${current.team_num}&owner_uid=${current.captain_uid}`;
+    }
+    this.props.history.push(`/year/yearTreasure${search}`);
+  }
+
   format = (list) => {
     let len = list.length;
     for(let i=0;i<5-len;i++) {
@@ -82,7 +95,11 @@ export default class TeamInfo extends Component {
                           <img className='head__image' src={item.head_img} alt=""/>
                         )
                       }
-                      
+                      {
+                        index === 0 ? (
+                          <img className='caption__flag' src="https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/newyear20/H5/caption.png" alt=""/>
+                        ) : (null)
+                      }
                       <div className='shadow'></div>
                     </div>
                     <div className={`member__join ${item.nobody ? '' : 'join'}`}></div>
@@ -93,11 +110,16 @@ export default class TeamInfo extends Component {
           </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'>
+            <img onClick={() => this.toYearTreasure(true)} src="https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/newyear20/H5/treasure-box-icon.png" alt="" />
+            <p onClick={() => this.toYearTreasure(false)} className='box__text'>
               {Text}
             </p>
             <img className='position__arrow' src="https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/newyear20/H5/arrow_jinzhan.png" alt=""/>
+            {
+              removable > 0 && (
+                <div className='position__number'>{removable}</div>
+              )
+            }
           </div>
         </div>
         <div className='invite__btn'>
@@ -105,8 +127,11 @@ export default class TeamInfo extends Component {
             is_my_team ? ('继续组队') : ('组队开宝箱')
           }
         </div>
-        <p className='stage_prize'>{`第${stage_no}次必中${name}`}</p>
+        {
+          stage_no && name && <p className='stage_prize'>{`第${stage_no}次必中${name}`}</p>
+        }
       </div>
     )
   }
 }
+export default withRouter(TeamInfo)

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

@@ -30,12 +30,12 @@
         margin-left: 1px;
         &:first-child {
           margin-left: 0;
-          .member__join{
+          .member__join {
             border-radius: 2px 0 0 2px;
           }
         }
         &:last-child {
-          .member__join{
+          .member__join {
             border-radius: 0 2px 2px 0;
           }
         }
@@ -58,6 +58,13 @@
             position: absolute;
             bottom: -6px;
           }
+          .caption__flag {
+            position: absolute;
+            width: 18px;
+            height: 10px;
+            left: 50%;
+            top: 0;
+          }
         }
         .member__join {
           width: 40px;
@@ -66,8 +73,9 @@
           box-shadow: 1px 1px 2px 0px rgba(3, 52, 91, 0.35);
         }
         .join {
-          background:rgba(255,221,29,1);
-          box-shadow:1px 2px 2px 0px rgba(253,253,253,0.46) inset, 1px 2px 2px 0px rgba(253,253,253,0.46) inset;
+          background: rgba(255, 221, 29, 1);
+          box-shadow: 1px 2px 2px 0px rgba(253, 253, 253, 0.46) inset,
+            1px 2px 2px 0px rgba(253, 253, 253, 0.46) inset;
         }
       }
     }
@@ -87,7 +95,7 @@
       .box__text {
         width: 1000px;
         font-size: 100px;
-        transform: scale(0.1) ;
+        transform: scale(0.1);
         text-decoration: underline;
         color: rgba(255, 227, 0, 1);
         position: absolute;
@@ -101,6 +109,22 @@
         left: -7px;
         top: 18px;
       }
+      .position__number {
+        min-width: 22px;
+        height: 18px;
+        font-size: 12px;
+        background: rgba(255, 60, 22, 1);
+        border: 1px solid rgba(255, 227, 0, 1);
+        border-radius: 9px 9px 9px 0px;
+        color: rgba(255, 227, 0, 1);
+        position: absolute;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        padding: 0 5px;
+        right: -4px;
+        top: -4px;
+      }
     }
   }
   .invite__btn {