正式抽奖

src/components/blessingPreheat/formal-draw/index.js

+import React, { Component } from 'react'
+import { http } from "@/utils"
+import { Toast, Tabs } from 'antd-mobile'
+import './index.scss'
+
+class FormalDraw extends Component {
+
+  state = {
+    prizes: [],
+    currentDisplayPrizes: [],
+    tabs: [],
+    today: '',
+    initialPageIndex: 0
+  }
+
+  componentDidMount() {
+    http.get(`${API.home}/sys/activity/prize_data`)
+      .then(res => {
+        const {data} = res
+        if (data.code == 200) {
+          const {data: resData} = data
+          this.setState({
+            tabs: resData.list.map(item => ({title: item.date})),
+            today: '10月30日',
+            initialPageIndex: resData.list.findIndex(item => item.date == resData.value.today) || 0
+          })
+        } else {
+          Toast.info(data.msg, 2, null, false)
+        }
+      })
+  }
+
+  renderStatusText = n => {
+    switch (n) {
+      case 1:
+        return '即将开启'
+    }
+  }
+
+  render() {
+    const {tabs, today, initialPageIndex} = this.state
+    return (
+      <div id={'formal-draw'}>
+        <Tabs
+          tabs={tabs}
+          initialPage={initialPageIndex}
+          tabBarBackgroundColor={'transparent'}
+          tabBarActiveTextColor={'#5600DF'}
+          tabBarInactiveTextColor={'#FFF604'}
+          tabBarUnderlineStyle={{display: 'none'}}
+        >
+          <div className="content">
+            <div className="title">
+              <img src="https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/active19_1111/title-decorate-left.png" alt=""/>
+              <div className="hot-value">中奖热力值：<span className={'grade'}>105分</span></div>
+              <img src="https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/active19_1111/title-decorate-right.png" alt=""/>
+            </div>
+            <div className="progress-bar">
+              <img className={'locator'} src="https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/active19_1111/locator.png"
+                   alt=""/>
+              <div className="progress"></div>
+            </div>
+            <ul className="time-ranges">
+              <li className={'status-3'}>
+                <div className={'status-bar'}>
+                  <div className="time">
+                    <span>00:00～10:00</span>
+                  </div>
+                  <div className="status">
+                    <span>已结束</span>
+                    <a href="">查看中奖记录</a>
+                  </div>
+                </div>
+                <ul className={'prizes'}>
+                  <li>
+                    <img src="" alt=""/>
+                    <span></span>
+                  </li>
+                </ul>
+              </li>
+            </ul>
+          </div>
+        </Tabs>
+      </div>
+    )
+  }
+}
+
+export default FormalDraw

src/components/blessingPreheat/formal-draw/index.scss

+#formal-draw {
+    position: relative;
+    width: 355px;
+    height: 646px;
+    background: rgba(57, 0, 201, 1);
+    border: 1px solid rgba(89, 112, 255, 1);
+    border-radius: 5px;
+    margin: 0 auto;
+
+    &::before {
+        content: '';
+        display: block;
+        width: 233px;
+        height: 90px;
+        position: absolute;
+        top: 0;
+        left: 0;
+        background: url("https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/active19_1111/body-top-bg.png") no-repeat;
+        background-size: contain;
+    }
+
+    &::after {
+        content: '';
+        display: block;
+        position: absolute;
+        bottom: 0;
+        right: 0;
+        width: 250px;
+        height: 57px;
+        background: url("https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/active19_1111/body-bottom-bg.png") no-repeat;
+        background-size: contain;
+    }
+
+    .am-tabs {
+        width: 330px;
+        margin: 0 auto;
+        color: #fff;
+
+        & .am-tabs-default-bar-tab:nth-of-type(3) {
+            &::after {
+                display: none;
+            }
+        }
+
+        .am-tabs-tab-bar-wrap {
+            height: 33px;
+            border: 1px solid rgba(255, 246, 4, 1);
+            border-radius: 0 0 6px 6px;
+        }
+
+        .am-tabs-default-bar-tab {
+            height: auto;
+            line-height: 1;
+
+            &::after {
+                content: '';
+                display: block;
+                position: absolute;
+                right: 0;
+                left: unset;
+                top: 50%;
+                margin-top: -7px;
+                width: 1px;
+                height: 14px;
+                background: #FFF604;
+                transform: none;
+            }
+        }
+
+        .am-tabs-default-bar-tab-active {
+            background: #FFF604;
+            border-radius: 0 0 6px 6px;
+        }
+
+    }
+
+
+    .content {
+        .title {
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            text-align: center;
+            font-size: 16px;
+            color: #FFF3F0;
+            margin: 20px 0 28px;
+            line-height: 1;
+
+            .hot-value {
+                margin: 0 12px;
+            }
+
+            .grade {
+                color: #FFF604;
+            }
+
+            img {
+                width: 24px;
+                height: 11px;
+            }
+
+        }
+    }
+
+    .progress-bar {
+        position: relative;
+        width: 330px;
+        height: 5px;
+        background: linear-gradient(-90deg, rgba(211, 211, 210, 1) 0%, rgba(255, 255, 255, 1) 100%);
+        border-radius: 2px;
+        margin-bottom: 20px;
+
+        .progress {
+            width: 152px;
+            height: 5px;
+            background: linear-gradient(270deg, rgba(255, 76, 5, 1) 0%, rgba(255, 215, 108, 1) 100%);
+            border-radius: 2px;
+        }
+
+        .locator {
+            position: absolute;
+            top: -16px;
+            left: 146px;
+            width: 11px;
+            height: 14px;
+        }
+    }
+
+    .time-ranges {
+
+    }
+
+    .status-bar {
+        display: flex;
+        width: 330px;
+        height: 44px;
+        text-align: center;
+        border-radius: 2px;
+        background: #fff;
+        .time {
+            position: relative;
+            width: 220px;
+            color: #999;
+            font-size: 18px;
+            padding-left: 45px;
+            line-height: 44px;
+        }
+
+        .status {
+            width: 110px;
+            color: #fff;
+            font-size: 12px;
+        }
+    }
+
+    .status-4 {
+        .status {
+            display: flex;
+            flex-flow: column;
+            justify-content: center;
+            background: linear-gradient(-90deg, rgba(204, 204, 204, 1) 0%, rgba(221, 221, 221, 1) 100%);
+            a{
+                font-size: 10px;
+                color: #5327FA;
+                text-decoration: underline;
+            }
+        }
+    }
+
+
+}

src/components/blessingPreheat/index.js

@@ -5,6 +5,7 @@ import './index.scss'
 import { Popup } from '@/common'
 import {CopyToClipboard} from 'react-copy-to-clipboard'
 import { Toast } from "antd-mobile"
+import FormalDraw from "./formal-draw"
 
 
 class BlessingPreheat extends Component {
@@ -15,7 +16,7 @@ class BlessingPreheat extends Component {
       isCourse: false,
       inviteVisible: false,
       joinLotteryVisible: false,
-      timelineShareVisible: true
+      timelineShareVisible: false
     }
   }
 
@@ -75,6 +76,7 @@ class BlessingPreheat extends Component {
         >
           <img src="https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/tinypng-common/right_weixin.png" alt="" className="qr-code"/>
         </Popup>
+        <FormalDraw/>
       </div>
     )
   }