分享弹框 测试记录

src/components/blessingPreheat/collectBlessing/index.js

@@ -48,7 +48,7 @@ class CollectBlessing extends Component {
   }
   
   render() {
-    const { handleToShowNotice, handleToShowList, handleToShowInvite } = this.props;
+    const { handleToShowNotice, handleToShowList, handleToShowInvite, handleToShow } = this.props;
     const { rules, welfareRuleList } = this.state;
     return (
       <>
@@ -113,7 +113,7 @@ class CollectBlessing extends Component {
               }
               {
                 index === 2 &&
-                <div className="collect-blessing__content" data-layout="column">
+                <div className="collect-blessing__content" data-layout="column" onClick={()=>{handleToShow('shareMark')}}>
                   <p className="collect-blessing__label">去分享</p>
                   <div className="collect-blessing__share">
                     <a className="collect-blessing__share-button" data-type="qq"></a>

src/components/blessingPreheat/index.js

@@ -3,7 +3,9 @@ import QRCode from 'qrcode';
 import { http } from '@/utils';
 import RulePopup from './rulePopup/index'
 import CoursePopup from './coursePopup/index'
+import RecordPopup from './recordPopup/index'
 import CourseList from './courseList/index';
+import SharePopup from './sharePopup/index';
 import LuckDraw from './luckDraw/index';
 import CollectBlessing from './collectBlessing/index';
 import ReserveCourse from './ReserveCourse/index';
@@ -30,6 +32,7 @@ class BlessingPreheat extends Component {
       isFormal: false, // 1正式 0 预热
       isServer: false,
       serverUrl: '',
+      shareMark: false,
     }
   }
 
@@ -57,6 +60,7 @@ class BlessingPreheat extends Component {
   }
 
   handleToShow = (key) => {
+    console.log(key);
     let obj = {};
     obj[key] = true;
     this.setState({
@@ -110,7 +114,7 @@ class BlessingPreheat extends Component {
   }
 
   render() {
-    const {isRule, isCourse, inviteUrl, inviteVisible, isFormal, isServer, serverUrl} = this.state
+    const {isRule, isCourse, inviteUrl, inviteVisible, isFormal, isServer, serverUrl, showRecordList, shareMark} = this.state
     return (
       <div id={'blessing-preheat'}>
         {/* 积福气 */}
@@ -119,6 +123,7 @@ class BlessingPreheat extends Component {
           handleToShowList={() => this.handleToShow('isCourse')} 
           handleToShowInvite={this.handleToShowInvite}
           handleToShowNotice={this.handleToShowNotice}
+          handleToShow={this.handleToShow}
         />
 
         {/* 幸运大抽奖--预热 */}
@@ -148,6 +153,14 @@ class BlessingPreheat extends Component {
           isCourse &&
           <CoursePopup handleToHide={() => this.handleToHide('isCourse')}/>
         }
+        {
+          showRecordList &&
+          <RecordPopup handleToHide={() => this.handleToHide('showRecordList')}/>
+        }
+        {
+          shareMark && 
+          <SharePopup handleToHide={() => this.handleToHide('shareMark')}/>
+        }
         <Popup 
           visible={inviteVisible}
           title={'扫码邀请好友注册+10点福气值'}

src/components/blessingPreheat/recordPopup/index.js

+import React, { Component } from 'react'
+import './index.scss'
+import { http } from '@/utils';
+
+export default class RecordPopup extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      recordList: [],
+    }
+  }
+
+  componentDidMount () {
+    http.get(`${API.home}/sys/ai_test/get_user_testinfo`).then(res => {
+        let {code, data: {user_test_record}} = res.data;
+        if(code === 200) {
+          this.setState({
+            recordList: user_test_record
+          })
+        }
+    });
+  }
+
+
+  render() {
+    let {recordList} = this.state;
+    const { handleToHide } = this.props;
+    return (
+      <div className='record__mark'>
+      <div className="gift__record">
+        <div className="close__button" onClick={handleToHide}>
+          <i className="icon iconfont iconiconfront-77"></i>
+        </div>
+        <p className="mark__title">测试记录</p>
+        <p className="mark__tip">多次测试保留最高分，可查看最近一次答题记录</p>
+        <div>
+          <div className="table__head">
+            <span className="tr">测试时间</span>
+            <span className="tr">分数</span>
+            <span className="tr">操作</span>
+          </div>
+          <div className="table__body">
+          {
+            recordList.map((item, index) => {
+              return (<div className="tr__container" key={index}>
+              <span className="tr">{item.submit_time}</span>
+              <span className="tr">{item.score}</span>
+              <span className="tr">
+                {
+                  index === 0 ? (
+                    <a href={`/levelTest/report?id=${item.id}`}>测试记录</a>
+                  ) : (null)
+                }
+              </span>
+            </div>
+              )
+            })
+          }
+          </div>
+        </div>
+      </div>
+        
+      </div>
+    )
+  }
+}

src/components/blessingPreheat/recordPopup/index.scss

+.record__mark {
+  position: fixed;
+  left: 0;
+  top: 0;
+  bottom: 0;
+  right: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0, 0, 0, .6);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.gift__record {
+  width: 300px;
+  height: 250px;
+  background: rgba(255, 255, 255, 1);
+  border-radius: 5px;
+  padding: 18px 24px 0 24px;
+  position: relative;
+  span.tr {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    display: inline-block;
+    &:first-child {
+      width: 120px;
+      padding-left: 12px;
+      text-align: start;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+    &:nth-child(2n) {
+      width: 55px;
+    }
+    &:last-child {
+      width: 75px;
+      padding-right: 12px;
+      text-align: right;
+      a {
+        font-size: 12px;
+        color: #0099ff;
+        text-decoration: underline;
+      }
+    }
+  }
+  .table__head {
+    width: 250px;
+    height: 34px;
+    background: rgba(82, 92, 101, 0.1);
+    border-radius: 1px 1px 0px 0px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    font-size: 12px;
+    font-weight: 400;
+    color: rgba(82, 92, 101, 1);
+  }
+  .table__body {
+    width: 250px;
+    height: 102px;
+    border: 1px solid rgba(207, 219, 229, 0.4);
+    border-radius: 0px 0px 1px 1px;
+    box-sizing: border-box;
+    overflow: auto;
+
+    .tr__container {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      height: 34px;
+      border-bottom: 1px solid rgba(207, 219, 229, 0.4);
+
+      &:last-child {
+        border-bottom: none;
+      }
+    }
+  }
+
+  .close__button {
+    width: 32px;
+    height: 32px;
+    border-radius: 50%;
+    position: absolute;
+    left: 50%;
+    transform: translateX(-50%);
+    bottom: -56px;
+    border: 1px solid #fff;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    i {
+      font-size: 32px;
+      color: #fff;
+    }
+  }
+
+  .mark__title {
+    width: 100%;
+    font-size: 16px;
+    line-height: 16px;
+    font-weight: 500;
+    color: rgba(82, 92, 101, 1);
+    margin-bottom: 16px;
+    text-align: center;
+    text-align-last: center;
+  }
+  .mark__tip {
+    font-size: 12px;
+    font-weight: 400;
+    color: rgba(153, 153, 153, 1);
+    line-height: 18px;
+    text-align: start;
+    text-align-last: start;
+    margin-bottom: 16px;
+  }
+}
\ No newline at end of file

src/components/blessingPreheat/sharePopup/index.js

+import React, { Component } from 'react'
+import './index.scss'
+
+export default class SharePopup extends Component {
+  render() {
+    return (
+      <div className="share__container" onClick={this.props.handleToHide}>
+        <div className="share__row">
+          <img src='https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/active19_1111/m/throw_icon.png' />
+        </div>
+        <div className="share__content">
+          <p className="share__text">分享活动页到朋友圈、qq分别</p>
+          <div className='share__rule'>
+            <img src='https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/active19_1111/m/add2.png' />
+            <span>（每个平台每天一次）</span>
+          </div>
+        </div>
+      </div>
+    )
+  }
+}

src/components/blessingPreheat/sharePopup/index.scss

+.share__container {
+  position: fixed;
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  width: 100%;
+  height: 100%;
+  background: rgba(0, 0, 0, .6);
+
+  .share__row {
+    width: 60px;
+    height: 44px;
+    position: absolute;
+    right: 16px;
+    top: 10px;
+  }
+
+  .share__content {
+    width:290px;
+    height:71px;
+    background:rgba(255,255,255,1);
+    border-radius:10px;
+    position: absolute;
+    top: 70px;
+    left: 50%;
+    transform: translateX(-50%);
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+
+    .share__text {
+      font-size:16px;
+      font-weight:400;
+      color:rgba(82,92,101,1);
+    }
+    .share__rule {
+      height: 18px;
+      display: flex;
+      flex-direction: row;
+      justify-content: center;
+      align-items: center;
+      font-size: 12px;
+      color: #525C65;
+    }
+  }
+}
\ No newline at end of file