Skip to content

T
teddi
Commit 7ef87b8b authored by AU-PRO's avatar AU-PRO
Browse files
Options

add new code

parent c5b280c8
Hide whitespace changes
Inline Side-by-side
Showing with 24 additions and 296 deletions
project/package.json
View file @ 7ef87b8b
......@@ -2,7 +2,12 @@
"name": "sparkproject-1604506932682",
"version": "1.0.0",
"private": true,
"scripts": {},
"scripts": {
"dev": "spark dev --type h5",
"prod": "spark build --type h5 --env prod",
"build": "spark build --type h5",
"tb": "spark build --type taobao"
},
"dependencies": {
"axios": "^0.19.2",
"babel-plugin-transform-decorators-legacy": "^1.3.5",
......
project/src/components/AUPop/AUPop.jsx deleted 100644 → 0
View file @ c5b280c8
import React, { Component } from 'react';
import SvgaShine from '../pop/SvgaShine/SvgaShine.jsx' // svga - components
import popMap from './popMap.js'
// 引入 connect
import { AUConnect, AUShowPop } from '../../redux/auConnect';
import './AUPop.less'
class AUPop extends Component {
constructor (props) {
super(props)
this.state = this.state || {
popArr: [],
closeFlag: false
}
this.auPopRef = React.createRef()
}
static getDerivedStateFromProps(nextProprs, preState) {
return {
popArr: nextProprs.popState.popArr
}
}
closePop = (index) => {
if (this.state.popArr.length == 1) {
if (this.auPopRef.current) {
this.auPopRef.current.style.transition = `opacity 350ms`
this.auPopRef.current.style.opacity = '0'
this.setState({closeFlag: true})
setTimeout(() => {
this.props.showPop({type: 0})
this.setState({closeFlag: false})
}, 400);
} else {
this.props.showPop({type: 0})
this.setState({closeFlag: false})
}
}
else {
console.log(this.state.popArr)
this.setState({closeFlag: true})
setTimeout(() => {
this.props.showPop({type: 0})
this.setState({closeFlag: false})
}, 400);
}
}
render() {
const { popArr, closeFlag } = this.state
let Pop = []
popArr.forEach((item, index) => {
const { showPop, popData, fn, ctx } = item
let PItem = popMap.get(showPop)
Pop.push(
// <SvgaShine show={showPop === 'PopLightCard' ? true : false}/>
<div className={showPop === 'PopLightCard' ? 'compop_content comPop_zoom_from0' : 'compop_content comPop_zoom'}>
<PItem onClose={this.closePop} data={popData} fn={fn} ctx={ctx} type='spot'/>
</div>
)
})
const Com = (popArr.length && popArr[0].showPop) ? (
<div className='compop_back' ref={this.auPopRef}>
<div className='compop_mask'></div>
{/* 关闭-禁止点击 */}
{ closeFlag ? <div className='compop_transparent'></div> : null }
{Pop.map((It, index) => {
return (
<React.Fragment key={index}>
<div className={(index !== Pop.length - 1) ? 'Fragment-wrapper Fragment-small-opacity' : 'Fragment-wrapper'}>
{(index !== Pop.length - 1) ? <div className="Fragment-wrapper-mask"></div> : null }
{It}
</div>
</React.Fragment>)
})}
</div>
) : null
return (
Com
);
}
}
// 被 connect 包装的组件，共享 state 的状态
export default AUConnect(AUPop)
\ No newline at end of file
project/src/components/AUPop/AUPop.less deleted 100644 → 0
View file @ c5b280c8
.compop_back {
position: fixed;
top: 0;
left: 0;
bottom: 0;
right: 0;
z-index: 99;
touch-action: none;
.compop_mask {
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, .7);
position: absolute;
top: 0;
left: 0;
z-index: -1;
touch-action: none;
}
.compop_transparent {
width: 100%;
height: 100%;
background-color: rgba(255, 255, 255, 0);
position: absolute;
top: 0;
left: 0;
z-index: 9;
touch-action: none;
}
}
.pop_mask {
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 100;
position: fixed;
background: transparent;
}
.compop_content {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
right: 0;
left: 0;
z-index: 2;
}
.comPop_close_btn {
position: absolute;
display: block;
z-index: 1;
width: 102px;
height: 102px;
left: calc(49% - (102px / 2));
bottom: -160px;
z-index: 3;
}
.comPop_back_light {
position: absolute;
display: block;
z-index: -1;
width: 883px;
height: 883px;
left: calc(50% - (883px / 2));
top: -200px;
bottom: -144px;
}
.comPop_back_head {
position: absolute;
display: block;
z-index: 2;
width: 567px;
height: 140px;
left: 5px;
top: 20px;
animation: floatAni 3000ms infinite linear;
transform-origin: center center center;
position: relative;
}
@keyframes floatAni {
0% {
transform: skewX(-1deg) skewY(0.8deg) scaleX(1.05) translateY(-30px) rotate(-3deg);
}
25% {
transform: skewX(-0.5deg) skewY(0.3deg) scaleX(1.02) translateY(-20px) rotate(-2deg);
}
50% {
transform: skewX(0deg) skewY(0deg) scaleX(1) translateY(-15px) rotate(-2deg);
}
75% {
transform: skewX(-0.5deg) skewY(0.3deg) scaleX(1.02) translateY(-20px) rotate(-2deg);
}
100% {
transform: skewX(-1deg) skewY(0.8deg) scaleX(1.05) translateY(-30px) rotate(-3deg);
}
}
.comPop_zoom {
transform-origin: center center;
animation: zoom 0.24s linear 0s 1;
}
.comPop_zoom_from0 {
transform-origin: center center;
opacity: 0;
transform: scale(0);
animation: zoomfrom0 0.22s linear 0.44s 1 forwards;
}
.Fragment-wrapper-mask {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: transparent;
z-index: 99;
touch-action: none;
}
.Fragment-small-opacity {
transition: transform 300ms ease-in, opacity 200ms linear !important;
transform: scale(0.5) !important;
opacity: 0 !important;
}
.Fragment-wrapper {
opacity: 1;
transition: transform 200ms ease-out, opacity 200ms linear;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
transform: scale(1);
transform-origin: center center;
}
@keyframes zoom {
0% {
transform: scale(0.75);
}
50% {
transform: scale(1.08)
}
100% {
transform: scale(1)
}
}
@keyframes zoomfrom0 {
0% {
opacity: 0;
transform: scale(0.2);
}
80% {
opacity: 1;
transform: scale(1.12)
}
100% {
opacity: 1;
transform: scale(1)
}
}
.comPop_fadeout {
opacity: 0;
transition: opacity 300ms linear;
}
\ No newline at end of file
project/src/components/AUPop/popMap.js deleted 100644 → 0
View file @ c5b280c8
import PopGetPiece from '../pop/PopGetPiece/PopGetPiece.jsx'
import PopInfiniteA from '../pop/PopInfiniteA/PopInfiniteA.jsx'
import PopRegret from '../pop/PopRegret/PopRegret.jsx'
import PopRotate from '../pop/PopRotate/PopRotate.jsx'
import PopInput from '../pop/PopInput/PopInput.jsx'
import PopDefault from '../pop/PopDefault/PopDefault.jsx'
import PopRule from '../pop/PopRule/PopRule.jsx'
import PopLightCard from '../pop/PopLightCard/PopLightCard.jsx'
let popMap = new Map()
popMap.set("PopRule", PopRule)
popMap.set("PopGetPiece", PopGetPiece)
popMap.set("PopRegret", PopRegret)
popMap.set("PopInfiniteA", PopInfiniteA)
popMap.set("PopRotate", PopRotate)
popMap.set("PopDefault", PopDefault)
popMap.set("PopInput", PopInput)
popMap.set("PopLightCard", PopLightCard)
export default popMap
\ No newline at end of file
project/src/pages/PageHome/PageHome.jsx
View file @ 7ef87b8b
......@@ -2,7 +2,7 @@
import React, { Component } from 'react';
import { Random } from 'mockjs';
import { AUConnect } from '../../redux/auConnect';
// import { AUConnect } from '../../redux/auConnect';
import { debounce } from '../../utils/debounce';
import { Aup } from '../../pop' // Mobx --> Aup is api
......
project/src/pop/api/insert.js 0 → 100644
View file @ 7ef87b8b
'use strict';
import { AUP_MBX_STATE } from '../AUState'
import { CONSO_START_mark, ConsoleStyleTitle } from './tools'
/**
* 插入弹窗
* @param {Number} index 插入的索引位置
* @param {String} type 弹窗类型
* @param {Object} data 传递数据
* @param {Fucntion} fn 定义更多 需要执行的方法 (context 来自父组件)
* @param {Context} ctx 传递 父组件 Context
*/
export const insert = (index, type, data, fn, ctx) => {
// 未完成
}
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