Skip to content

M
mr-julyedu
Commit 89915984 by wangshuo
Options

分享弹框 测试记录

parent 7707bad1
Showing with 272 additions and 3 deletions
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 0 → 100644
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 0 → 100644
.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 0 → 100644
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 0 → 100644
.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
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment