Skip to content

M
mr-julyedu
Commit 2b3e9680 by zhanghaozhe
Options

更新popup通用组件

parent 0814d87a
Showing with 94 additions and 118 deletions
src/common/closable-popup/index.js
import React, { Component } from 'react'
import React from 'react'
import ReactDOM from 'react-dom'
import './index.scss'
import classnames from 'classnames'
import propTypes from 'prop-types'
class ClosablePopup extends Component {
state = {
visible: this.props.visible
function ClosablePopup({
title, content, className, closable = true, close = function () {
}
} = {}) {
close = () => {
const {close} = this.props
close ? close() : this.setState({visible: false})
function unmountComponent() {
ReactDOM.unmountComponentAtNode(div)
if (div && div.parentNode) {
div.parentNode.removeChild(div)
}
}
componentDidUpdate(prevProps, prevState) {
const {visible} = this.props
if (prevState.visible !== this.props.visible) {
this.setState({
visible
function _close() {
let _c = close()
if (_c && _c.then) {
_c.then(() => {
unmountComponent()
})
} else {
unmountComponent()
}
}
render() {
const {title, className, children, closable = true} = this.props
return (
this.state.visible
?
const closablePopup = (
<div className={'closable-popup-mask'}>
<div className={classnames(['popup-container', className])}>
<div className="title">{title}</div>
<div className="content">
{children}
{content}
</div>
{
closable && <i className={'close iconfont iconiconfront-2'} onClick={this.close}/>
closable && <i className={'close iconfont iconiconfront-2'} onClick={_close}/>
}
</div>
</div>
: null
)
}
}
const div = document.createElement('div')
document.body.appendChild(div)
ClosablePopup.propTypes = {
title: propTypes.string.isRequired,
visible: propTypes.bool,
closable: propTypes.string,
close: propTypes.func
ReactDOM.render(closablePopup, div)
}
export default ClosablePopup
src/components/blessingPreheat/index.js
import React, {Component} from 'react'
import React, { Component } from 'react'
import QRCode from 'qrcode'
import {http, SendMessageToApp, wxShare, is_weixin, getParam} from '@/utils';
import {Link} from 'react-router-dom'
import {throttle, findIndex, debounce} from 'lodash'
import { http, SendMessageToApp, wxShare, is_weixin, getParam } from '@/utils'
import { Link } from 'react-router-dom'
import { throttle, findIndex, debounce } from 'lodash'
import RulePopup from './rulePopup/index'
import CoursePopup from './coursePopup/index'
import RecordPopup from './recordPopup/index'
......@@ -15,16 +15,16 @@ import ListHeader from './listHeader/index'
import LevelTest from './levelTest/index'
import RankList from './rankList/index'
import './index.scss'
import {Popup} from '@/common'
import {CopyToClipboard} from 'react-copy-to-clipboard'
import {Toast} from "antd-mobile"
import { Popup } from '@/common'
import { CopyToClipboard } from 'react-copy-to-clipboard'
import { Toast } from "antd-mobile"
import Live from './live'
import Banner from './banner'
import cookie from "js-cookie";
import {setCurrentUser, startFetchUser} from "@/store/userAction"
import {addDays} from "date-fns";
import {compose} from "redux";
import {connect} from "react-redux";
import cookie from "js-cookie"
import { setCurrentUser, startFetchUser } from "@/store/userAction"
import { addDays } from "date-fns"
import { compose } from "redux"
import { connect } from "react-redux"
class BlessingPreheat extends Component {
......@@ -43,14 +43,11 @@ class BlessingPreheat extends Component {
// }],
isRule: false,
isCourse: false,
inviteUrl: '',
inviteVisible: false,
joinLotteryVisible: false,
timelineShareVisible: false,
showRecordList: false,
isFormal: false, // 1正式 0 预热
isServer: false,
serverUrl: '',
shareMark: false,
userInfo: {},
isSign: false,
......@@ -86,9 +83,9 @@ class BlessingPreheat extends Component {
}
componentDidMount() {
this.fetchUserBlessing();
this.fetchUserBlessing()
this.setInitialNavActiveStatus()
window.addEventListener('scroll', throttle(this.calcNavActive, 100));
window.addEventListener('scroll', throttle(this.calcNavActive, 100))
if (is_weixin()) {
wxShare({
title: 'AI充电节，积福气享1折秒课，超10万元奖品来就送！！',
......@@ -104,10 +101,10 @@ class BlessingPreheat extends Component {
}
window['getNewData'] = result => {
this.fetchUserBlessing();
this.fetchUserBlessing()
}
window['QQWXWBshare'] = result => {
this.handleToAddBlessing(result);
this.handleToAddBlessing(result)
}
......@@ -129,12 +126,12 @@ class BlessingPreheat extends Component {
let expires = addDays(new Date(), 90)
this.state.userInfoList.map((item, index) => {
Toast.info(item.uid)
cookie.set("token", item.token, {expires, path: '/', domain: 'julyedu.com'});
cookie.set("plat", item.plat, {expires, path: '/', domain: 'julyedu.com'});
cookie.set("uid", item.uid, {expires, path: '/', domain: 'julyedu.com'});
cookie.set("uname", item.uname, {expires, path: '/', domain: 'julyedu.com'});
cookie.set("avatar_file", item.avatar_file, {expires, path: '/', domain: 'julyedu.com'});
});
cookie.set("token", item.token, {expires, path: '/', domain: 'julyedu.com'})
cookie.set("plat", item.plat, {expires, path: '/', domain: 'julyedu.com'})
cookie.set("uid", item.uid, {expires, path: '/', domain: 'julyedu.com'})
cookie.set("uname", item.uname, {expires, path: '/', domain: 'julyedu.com'})
cookie.set("avatar_file", item.avatar_file, {expires, path: '/', domain: 'julyedu.com'})
})
this.props.setCurrentUser(this.transformUser(this.state.userInfoList))
}
transformUser = res => {
......@@ -157,8 +154,6 @@ class BlessingPreheat extends Component {
}
getActiveIndex = (arr, n) => {
for (let i = 0, len = arr.length; i < len; i++) {
if (arr[i] > n) {
......@@ -206,7 +201,7 @@ class BlessingPreheat extends Component {
}
fetchUserBlessing() {
const {userInfo} = this.state;
const {userInfo} = this.state
http.get(`${API.home}/sys/user/blessing`).then(res => {
const {code, data} = res.data
if (code === 200) {
......@@ -233,11 +228,11 @@ class BlessingPreheat extends Component {
share_platform: key, // 1 朋友圈 2 微博 3 qq
type: 3 // 1：签到；3：分享；4：浏览课程；
}).then(res => {
const {code } = res.data;
const {code} = res.data
if (code === 200) {
Toast.info('+2点福气值~', 2, null, false);
Toast.info('+2点福气值~', 2, null, false)
}
});
})
}
......@@ -289,9 +284,18 @@ class BlessingPreheat extends Component {
margin: 1
})
.then(url => {
this.setState({
inviteUrl: url,
inviteVisible: true
const content = (
<>
<img src={url} alt="barcode" className="qr-code"/>
<CopyToClipboard text={`${API.m}/invite"`} onCopy={this.onCopy}>
<button>一键复制网址</button>
</CopyToClipboard>
</>
)
Popup({
title: '扫码邀请好友注册+10点福气值',
content,
className: 'invite-popup'
})
})
.catch(err => {
......@@ -307,7 +311,7 @@ class BlessingPreheat extends Component {
SendMessageToApp("toShare", data)
}
} else {
this.toLogin();
this.toLogin()
}
}
......@@ -320,9 +324,10 @@ class BlessingPreheat extends Component {
height: 120,
margin: 1
}).then(url => {
this.setState({
isServer: true,
serverUrl: url,
Popup({
title: '',
content: <img src={url} alt="barcode" className="qr-code"/>,
className: 'invite-popup'
})
})
.catch(err => {
......@@ -406,17 +411,13 @@ class BlessingPreheat extends Component {
userInfo,
isRule,
isCourse,
inviteUrl,
inviteVisible,
isFormal,
isServer,
serverUrl,
isSign,
showRecordList,
shareMark,
index
} = this.state;
const {history} = this.props;
} = this.state
const {history} = this.props
const isLogin = !this.props.user.hasError
return (
<div id={'blessing-preheat'}>
......@@ -490,23 +491,8 @@ class BlessingPreheat extends Component {
shareMark &&
<SharePopup/>
}
<Popup
visible={inviteVisible}
title={'扫码邀请好友注册+10点福气值'}
className={'invite-popup'}
>
<img src={inviteUrl} alt="barcode" className="qr-code"/>
<CopyToClipboard text={`${API.m}/invite"`} onCopy={this.onCopy}>
<button>一键复制网址</button>
</CopyToClipboard>
</Popup>
<Popup
visible={isServer}
title="扫码关注“七月在线”服务号"
className={'invite-popup'}
>
<img src={serverUrl} alt="barcode" className="qr-code"/>
</Popup>
{/*
<Popup visible={this.state.joinLotteryVisible}
title={'你已成功参与本时段抽奖'}
......@@ -531,7 +517,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>
</Popup>*/}
<ListHeader id={'ai-test'} text="全国AI工程师水平测试" styles={{margin: '30px 0 15px'}}/>
......
src/components/blessingPreheat/live/index.js
......@@ -16,8 +16,6 @@ class Live extends Component {
tabs: [],
lives: {},
preheatLives: [],
visible: false,
qrcode: '',
today: '',
isApp: getParam('version')
}
......@@ -80,9 +78,9 @@ class Live extends Component {
const {data} = res
if (data.code == 200) {
QRCode.toDataURL(data.data.url, (err, url) => {
this.setState({
qrcode: url,
visible: true
Popup({
title: '扫码关注“七月在线”服务号即可预约',
content: <img id={'live-qr-code'} src={url} alt=""/>
})
})
} else {
......@@ -92,14 +90,9 @@ class Live extends Component {
}
render() {
const {tabs, lives, visible, qrcode, preheatLives, today} = this.state
const {tabs, lives, preheatLives, today} = this.state
return (
<div id={'live'}>
<Popup title={'扫码关注“七月在线”服务号即可预约'}
visible={visible}
>
<img id={'live-qr-code'} src={qrcode} alt=""/>
</Popup>
<div className="title">
<img src="https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/active19_1111/title-decorate-left.png" alt=""/>
<span>大咖直播</span>
......
src/components/blessingPreheat/live/index.scss
#live {
margin-top: 30px;
.title {
display: flex;
justify-content: center;
......@@ -175,22 +176,6 @@
}
.popup-container {
.title {
color: #525C65;
}
.content {
display: flex;
justify-content: center;
img {
width: 120px;
height: 120px;
}
}
}
.am-tabs {
width: 330px;
margin: 0 auto;
......@@ -234,3 +219,20 @@
}
}
.popup-container {
.title {
color: #525C65;
}
.content {
display: flex;
justify-content: center;
img {
width: 120px;
height: 120px;
}
}
}
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