中奖页面

src/components/blessingGetPrize/index.js

 import React, { Component } from 'react';
 import './index.scss';
 import ListHeader from './../blessingPreheat/listHeader/index'
-
-export default class BlessingGetPrize extends Component {
+import { http, getParam } from '@/utils';
+import { Toast } from 'antd-mobile';
+import AddressPopup from './../blessingPreheat/addressPopup/index'
+import { Popup } from '@/common'
+import { connect } from 'react-redux'
+@connect(({user}) => (
+  {
+    uid: user.data.uid || ''
+  }
+))
+class BlessingGetPrize extends Component {
+  popupInstance = null
   constructor(props) {
     super(props);
     this.state = {
-      stage: '11.11 00:00～2:00',
-      prize: 'Python特训营优惠券',
-      isGet: true, //是否中奖
-      prizeType: 1, // 实物奖品 虚拟奖品
+      date: '',
+      next_date: '',
+      name: '',
+      is_winning: 1, //是否中奖
+      is_virtual: 1, // 实物奖品 虚拟奖品
+      prize_data: [],
+      address: false,
+    }
+  }
+
+  componentDidMount () {
+    http.get(`${API.home}/sys/lottery_result?id=${getParam('id')}`).then(res => {
+      const {code, msg, data} = res.data;
+      if(code === 200) {
+        this.setState({
+          ...data.info,
+          prize_data: data.prize_data.slice(0, 6),
+        })
+      } else {
+        Toast.info(msg);
+      }
+    });
+  }
+
+  showAddress = (bool) => {
+    const {history, uid} = this.props
+    if (bool && !uid) {
+      history.push('/passport')
+    } else {
+      if (bool && !this.popupInstance) {
+        this.popupInstance = Popup({
+          title: '收货信息',
+          content: <AddressPopup handleToHide={() => this.showAddress(false)}/>
+        })
+      } else {
+        this.popupInstance.close()
+        this.popupInstance = null
+      }
     }
   }
+
   render() {
-    const {stage, prize, isGet, prizeType} = this.state;
+    const {date, next_date, name, is_winning, is_virtual, prize_data, address} = this.state;
     return (
       <div className="blessing_get_prize">
         <div className='is__get_prize'>
           <div className="get_piriz__info">
-            <div className='result'>{stage}中奖结果</div>
+            <div className='result'>{date}中奖结果</div>
             {
-              !isGet && (
+              is_winning === 0 && (
                 <div className='no_prize'>很遗憾，你未中奖～</div>
               )
             }
             {
-              isGet && prizeType === 1 && (
+              is_winning === 1 && is_virtual === 0 && (
                 <div className='real__prize'>
-                  <div>恭喜你，一抽中{prize}奖品</div>
-                  <span className='address'>填写收货地址</span>
+                  <div>恭喜你，一抽中{name}奖品</div>
+                  <span onClick={()=> this.showAddress(true)} className='address'>填写收货地址</span>
                 </div>
               )
             }
             {
-              isGet && prizeType === 2 && (
+              is_winning === 1 && is_virtual === 1 && (
                 <div className='virtual '>
-                  <div>恭喜你抽中{prize}，</div>
+                  <div>恭喜你抽中{name}，</div>
                   <div>奖品已存放到你的账户</div>
                 </div>
               )
@@ -43,14 +88,38 @@ export default class BlessingGetPrize extends Component {
           </div>
         </div>
         <div className='current_stage'>
-          11.11 02:00～04:00 
+          {next_date}
         </div>
-        <ListHeader text="抽奖已开启" styles={{margin: '16px 0 15px'}}/>
+        <ListHeader text="抽奖已开启" styles={{margin: '16px 0 18px'}}/>
 
         <div className='prize_list_container'>
+            {
+              prize_data.length > 0 && prize_data.map((item, index) => {
+                return (<div className='prize__item' key={index}>
+                  <img className='prize__image' src={item.img}></img>
+                  <div className='name__num'>
+                    <span>{item.name}</span>
+                    <span>（{`*${item.num}`}）</span>
+                  </div>
+                </div>)
+              })
+            }
+        </div>
+
+        <a href='/blessingPreheat' className='join__button'>
+          立即参与抽奖
+        </a>
+
 
+        <div className='prize__tip'>
+          <div className='line'></div>
+          <span>中奖小tips</span>
+          <div className='line'></div>
         </div>
+        <div className='blessing__des'>积攒的福气值越高，中奖概率越大哦</div>
+        <a className='to__preheat' href='/blessingPreheat'>积攒更多福气值</a>
       </div>
     )
   }
 }
+export default BlessingGetPrize
\ No newline at end of file

src/components/blessingGetPrize/index.scss

@@ -3,6 +3,7 @@
   height: 100vh;
   overflow: auto;
   background-color: #4B00F3;
+  padding-bottom: 58px;
 
   .is__get_prize {
     width: 100%;
@@ -84,12 +85,111 @@
     color:rgba(255,255,255,1);
     text-align: center;
     text-align-last: center;
+    margin-top: 36px;
   }
 
   .prize_list_container {
     width: 100%;
-height:250px;
-background:rgba(53,0,162,1);
-box-shadow:0px 3px 6px 0px rgba(0, 0, 0, 0.1);
+    height:250px;
+    background:rgba(53,0,162,1);
+    box-shadow:0px 3px 6px 0px rgba(0, 0, 0, 0.1);
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-start;
+    align-items: flex-start;
+    flex-wrap: wrap;
+    padding: 16px;
+
+    .prize__item {
+      width: 106px;
+      display: flex;
+      flex-direction: column;
+      justify-content: flex-start;
+      align-items: center;
+      margin-right: 10px;
+      &:nth-child(3n) {
+        margin-right: 0;
+      }
+      .prize__image {
+        width: 106px;
+        height: 82px;
+      }
+      .name__num {
+        display: flex;
+        flex-direction: row;
+        justify-content: space-around;
+        align-items: center;
+        font-size:12px;
+        font-weight:400;
+        color:rgba(255,255,255,1); 
+        margin-top: 6px;
+        span {
+          &:first-child {
+            width: 70px;
+            flex: 0 0 auto;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+          }
+          &:last-child {
+            width: 36px;
+            flex: 0 0 auto;
+          }
+        }
+      }
+    }
+
+  }
+
+  .join__button {
+    display: block;
+    width:340px;
+    height:50px;
+    background:linear-gradient(90deg,rgba(255,105,5,1) 0%,rgba(255,180,5,1) 100%);
+    font-size:18px;
+    font-weight:500;
+    color:rgba(255,255,255,1);
+    border-radius:5px;
+    margin: 20px auto 32px;
+    line-height: 50px;
+    text-align: center;
+    text-align-last: center;
+  }
+
+  .prize__tip {
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    align-items: center;
+    font-size:14px;
+    font-weight:400;
+    color:rgba(255,255,255,1);
+    margin-bottom: 12px;
+    .line {
+      width: 128px;
+      height: 1px;
+      background: #fff;
+    }
+    span {
+      margin: 0 8px;
+    }
+  }
+
+  .blessing__des {
+    font-size:12px;
+    font-weight:300;
+    color:rgba(255,255,255, .6);
+    text-align: center;
+    margin-bottom: 16px;
+  }
+  
+  .to__preheat {
+    display: inline-block;
+    width: 100%;
+    font-size:14px;
+    font-weight:300;
+    text-decoration:underline;
+    color:rgba(255,255,255, .6);
+    text-align: center;
   }
 }
\ No newline at end of file