Commit 306122e3 authored by wildfirecode13's avatar wildfirecode13

1

parent 98e2183a
This diff is collapsed.
const {projectId} = CFG;
const apiCfg = {
getRule: `/projectx/${projectId}/projectRule.query`,
doJoin: {
uri: `join.do`,
method: "post"
},
}
export default apiCfg;
import apiCfg from './apicfg';
import {getPxToken} from "@spark/projectx";
import {callApi} from '@spark/api-base'
import {isFromShare, newUser} from 'duiba-utils';
let mergeData = {
user_type: newUser ? '0' : '1',
is_from_share: isFromShare ? '0' : '1',
}
const apiList = {
...apiCfg
}
const API = generateAPI(apiList);
export default API;
function getRequestParams(value) {
if (typeof value === 'string') {
return {
uri: value,
method: 'get'
}
} else if (typeof value === 'object') {
const {uri, method = 'post', headers, withToken, secret, secretKey} = value;
return {
uri,
method,
headers,
withToken,
secret,
secretKey,
}
} else {
console.error('getRequestParams: 传参有误');
}
}
function generateAPI(apiList) {
const api = {};
for (let key in apiList) {
let value = apiList[key];
const {method, uri, headers: mHeaders, withToken, secret, secretKey} = getRequestParams(value);
api[key] = async (params = {}, headers) => {
let token;
if (withToken) {
const {type, payload} = await getPxToken();
switch (type) {
case 'success':
token = payload.token;
break;
case 'failed':
location.reload();
break;
}
}
let mergedHeaders = {...mHeaders, ...headers}
if (withToken && token) {
params.token = token;
}
params = {...params, ...mergeData};
const result = await callApi(uri, params, method, mergedHeaders, false, secret, secretKey);
if (result.type === 'success') {
return result.payload;
}
throw new Error(result.payload);
}
}
return api;
}
import Qs from "qs";
import axios from "axios";
// 分享召回工具类
import { isFromShare, newUser } from 'duiba-utils';
let mergeData = {
user_type: newUser ? '0' : '1',
is_from_share: isFromShare ? '0' : '1',
_t: Date.now()
}
const TIMEOUT = 10000;
const instance = axios.create({
timeout: TIMEOUT, // 请求超时时间
});
instance.interceptors.request.use(
(config) => {
if (config.method === "get") {
config.data = true;
}
config.method === "post"
? (config.data = Qs.stringify({ ...config.data, ...mergeData }))
: (config.params = { ...config.params, ...mergeData });
config.headers["Content-Type"] = "application/x-www-form-urlencoded";
return config;
},
(error) => {
//请求错误处理
Promise.reject(error);
}
);
// 响应拦截器
instance.interceptors.response.use(
// 请求成功
(res) => {
const { status } = res || -1000;
return (status >= 200 && status <= 400) ? res.data : res
}
);
export default instance;
import React, { Component } from "react";
import ReactDOM from "react-dom";
import MD from '../MD';
import { MOCK_STATUS } from '../sparkrc';
import "./app.less";
import Detail2 from "./pages/detail2/detail2.jsx";
//此处为spark-cli动态生成
import Loading from "./pages/loading/loading.jsx";
import Main3 from "./pages/main3/main3.jsx";
import { AUPOP, AUP_MBX_STATE } from './pop';
MOCK_STATUS && (require('../mock/index'));
MD();
class App extends Component {
constructor(props) {
super(props);
this.state = {
page: 'loading',
};
}
// componentDidMount() {
// setTimeout(() => {
// Aup.show('PopRule', {}, this)
// }, 1000);
// }
navigateTo = (page, pagedata) => {
this.setState({ page, pagedata })
}
render() {
const { page, pagedata } = this.state;
return (
<>
{page == 'loading' && <Loading data={pagedata} navigateTo={this.navigateTo}></Loading>}
{page == 'mainpage' && <Main3 data={pagedata} navigateTo={this.navigateTo}></Main3>}
{page == 'detail' && <Detail2 data={pagedata} navigateTo={this.navigateTo}></Detail2>}
<AUPOP AUPopState={AUP_MBX_STATE} ></AUPOP>
</>
);
}
}
ReactDOM.render(<App />, document.getElementById("root"));
* {
margin: 0;
padding: 0;
}
html,
body {
font-size: 24px;
width: 100%;
height: 100%;
}
#toast_container * {
box-sizing: border-box;
}
.toast-list {
box-sizing: border-box;
position: fixed;
top: 50%;
left: 50%;
z-index: 2001;
line-height: 1.5;
text-align: center;
transform: translate(-50%, -50%);
}
.toast-message {
opacity: 1;
margin-bottom: 10px;
font-size: 0;
transition: height 0.3s, opacity 0.3s, transform 0.3s;
}
.toast-content {
display: inline-block;
overflow: hidden;
min-width: 520px;
padding: 50px 22px;
background: rgba(0, 0, 10, 0.75);
box-shadow: 1px 2px 5px 1px rgba(0, 0, 0, 0.2);
border-radius: 10px;
font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
color: #fff;
font-size: 24px;
text-align: center;
line-height: 1.5;
}
.toast-enter {
height: 0;
}
.toast-enter-active {
opacity: 1;
}
.toast-enter-done {
opacity: 1;
}
.toast-exit-active {
transform: translateY(-10px);
}
.btn_heartbeats {
transform-origin: center center;
animation: heartbeats 0.775s infinite;
}
\ No newline at end of file
'use strict';
import React, { Component } from 'react';
import resList from '../../resconfig/resList'; //import API from '../../api';
import './rule.less';
class Rule extends Component {
constructor(props) {
super(props);
this.state = {
resList: resList,
};
}
render() {
return (
<div className="rule " uuid="099305aa-5cb6-4428-85b7-a6498169b9d0">
<img
className="rule_bg "
uuid="7f53d222-559f-4c28-9a4e-7feff72991aa"
src={this.state.resList['8fbd72d3-7dcf-40b4-a22d-0ec8499725f8'].url}
/>
<span className="rule_txt " uuid="b1275bdd-01e4-42f2-81c2-12a732f7f38c">
1.活动规则活动规则活动规则活动规则活动规则活动规则活动规则活动规则活动规则活动规则
2.活动规则活动规则活动规则活动规则活动规则活动规则活动规则
3.活动规则活动规则活动规则活动规则活动规则活动规则活动规则活动规则活动规则活动规则
4.活动规则活动规则活动规则活动规则活动规则活动规则活动规则活动规则活动规则活动规则
</span>
<img
onClick={this.props.onClose}
className="rule_close "
uuid="af9001ed-b3c5-404d-ab2a-34939510ea61"
src={this.state.resList['3814359c-5889-4ffa-8b76-bc52f58ebd5d'].url}
/>
</div>
);
}
}
export default Rule;
.rule {
width: 612px;
height: 784px;
left: 71px;
top: 386px;
position: absolute;
.rule_bg {
width: 609px;
height: 779px;
top: 5px;
position: absolute;
}
.rule_txt {
width: 452px;
height: 515px;
left: 70px;
top: 183px;
position: absolute;
font-size: 26px;
color: #535353;
}
.rule_close {
width: 48px;
height: 48px;
left: 564px;
position: absolute;
}
}
'use strict';
import React, { Component } from 'react';
import resList from '../../resconfig/resList'; //import API from '../../api';
import './select.less';
class Select extends Component {
constructor(props) {
super(props);
this.state = {
resList: resList,
};
}
componentDidMount() {
setTimeout(() => {
console.log('关闭这个弹窗');
this.props.onClose();
}, 1000);
}
render() {
return (
<div className="select " uuid="298ea3b7-efbb-42ac-adea-ee68aa1db627">
<img
className="select_role1 "
uuid="76f06526-a55d-4f2a-b817-d450126bdf54"
src={this.state.resList['8872d3a6-1d19-4a83-a07d-ae084b8a1392'].url}
/>
<img
className="select_role2 "
uuid="cb643df1-dd96-4249-ac24-04136f106467"
src={this.state.resList['61eeafb1-d01e-4f8c-b7a8-5ee9432efb9b'].url}
/>
<img
className="select_role3 "
uuid="f26ff0c9-78dc-47b8-970b-dfe5a6938464"
src={this.state.resList['9da0a542-17dc-4c4c-bcc3-2ee8fba66ffa'].url}
/>
<img
className="select_bg "
uuid="b7fef7c6-cc6d-4147-baa2-1b836b23f5cf"
src={this.state.resList['710e2c56-2ed1-4b25-a5c7-787edde76ded'].url}
/>
<img
className="select_btn "
uuid="553dac18-d798-4eeb-a64e-dd850711d44e"
src={this.state.resList['2f3d6f0d-0695-4acf-ae87-4e6743772531'].url}
/>
<img
className="select_btndisabled "
uuid="b5ffc84d-26e8-4c5a-aa13-b450672682e2"
src={this.state.resList['fa7ec292-bf36-4ca1-bf04-2e2360176044'].url}
/>
<img
className="select_right "
uuid="c98966a6-06b5-4262-98b9-aca82095b372"
src={this.state.resList['5b40f5cf-2a46-4a68-9a79-40c8179ce379'].url}
/>
<img
className="select_left "
uuid="01088a9b-53d1-43f3-b09d-3eabfe156c0f"
src={this.state.resList['a4412ebd-65be-4908-8894-b0aea8cbd4cf'].url}
/>
</div>
);
}
}
export default Select;
.select {
width: 656px;
height: 1140px;
left: 47px;
top: 228px;
position: absolute;
.select_role1 {
width: 535px;
height: 614px;
left: 68px;
top: 229px;
position: absolute;
}
.select_role2 {
width: 535px;
height: 614px;
left: 68px;
top: 229px;
position: absolute;
}
.select_role3 {
width: 535px;
height: 614px;
left: 68px;
top: 229px;
position: absolute;
}
.select_bg {
width: 502px;
height: 998px;
left: 77px;
position: absolute;
}
.select_btn {
width: 446px;
height: 99px;
left: 105px;
top: 1041px;
position: absolute;
}
.select_btndisabled {
width: 446px;
height: 99px;
left: 105px;
top: 1041px;
position: absolute;
}
.select_right {
width: 42px;
height: 97px;
left: 614px;
top: 491px;
position: absolute;
}
.select_left {
width: 42px;
height: 97px;
top: 491px;
position: absolute;
}
}
This diff is collapsed.
This diff is collapsed.
'use strict';
import React, { Component } from 'react';
import { Aup } from '../../pop';
import resList from '../../resconfig/resList';
import './userinfo.less';
class Userinfo extends Component {
constructor(props) {
super(props);
this.state = {
resList: resList,
};
}
render() {
return (
<div className="userinfo " uuid="a9143822-c421-48d3-92c3-de9eafe5c234">
<img
className="userinfo_bg "
uuid="cf852278-516f-48f3-bad2-0e38a1431c4e"
src={this.state.resList['868f4d36-e5ff-4bf9-9d7e-3c01ce4bb380'].url}
/>
<img
className="userinfo_avatar "
uuid="1addc1b2-f339-4f8b-81c8-21153b03653a"
src={this.state.resList['5406c697-b889-4062-8910-343038c4dc93'].url}
/>
<img
onClick={this.props.onClose}
className="userinfo_close "
uuid="4f217b43-8438-451e-b28f-0e9d611fce2b"
src={this.state.resList['c7826e1a-8b74-44da-922f-0fe078587999'].url}
/>
<img
className="userinfo_btn "
uuid="dbbad0c1-ead1-4515-ae55-144e26640415"
src={this.state.resList['2208dc94-a012-4a45-8f4e-64468993e652'].url}
/>
</div>
);
}
}
export default Userinfo;
.userinfo {
width: 514px;
height: 555px;
left: 121px;
top: 486px;
position: absolute;
.userinfo_bg {
width: 509px;
height: 459px;
top: 96px;
position: absolute;
}
.userinfo_avatar {
width: 212px;
height: 211px;
left: 148px;
top: 10px;
position: absolute;
}
.userinfo_close {
width: 48px;
height: 48px;
left: 466px;
position: absolute;
}
.userinfo_btn {
width: 401px;
height: 99px;
left: 53px;
top: 389px;
position: absolute;
}
}
'use strict';
import React, { Component } from 'react';
import resList from '../../resconfig/resList'; //import API from '../../api';
import './detail2.less';
class Detail2 extends Component {
constructor(props) {
super(props);
this.state = {
resList: resList
};
}
componentDidMount(){
setTimeout(() => {
this.props.navigateTo('mainpage')
}, 2000);
}
render() {
const arr = [];
for(let i=0; i < 10;i++) {
arr.push(i)
}
return (
<div className="detail2 " uuid="c5abc304-1a0b-4804-956a-d61c1d5b75ed">
<div className="detail2_wrapper" uuid="583667d9-e382-49d8-bfc9-50b6d800c794">
<img
className="detail2_bg"
uuid="2b6c5d97-e458-42a0-b49b-49e9efc6abbc"
src={this.state.resList['9d6135a5-469f-4293-b931-17786c977974'].url}
/>
<div className="detail2_item_list" uuid="3804f60d-697f-4d68-98b5-ca8cf2e2d3ba">
{
arr.map((i) => (
<div key={i} className="detail2_item " uuid="4d8289ea-9464-4a92-a81c-3e24c364e707">
<span className="detail2_item_title " uuid="48b63d65-a3d8-4b94-b979-3fcb19c9d89c">
每日签到{i}
</span>
<span className="detail2_item_day " uuid="5e6c50df-f25c-4b91-acc7-95d4829ff7db">
2020-12-25 09:54:30
</span>
<span className="detail2_item_num " uuid="e576e938-d57d-4101-82bc-c0b0782033c9">
+418
</span>
<img
className="detail2_item_bg "
uuid="46e8b6fd-f561-445c-85eb-be7136ea5183"
src={this.state.resList['eed0f2f8-74ef-4680-a29c-d5db6818738f'].url}
/>
</div>
))
}
</div>
</div>
</div>
);
}
}
export default Detail2;
.detail2 {
width: 100vw;
height: 100vh;
position: absolute;
left: 0px;
top: 0px;
transform-origin: 0 0 0;
overflow: hidden;
.detail2_wrapper {
width: 100%;
height: 100%;
overflow: hidden;
display: flex;
flex-direction: row;
background-color: transparent;
.detail2_bg {
width: 750px;
height: 1624px;
position: absolute;
left: 0px;
top: 0px;
z-index: -1;
transform-origin: 0 0 0;
}
.detail2_item_list {
// background-color: red;
width: 100%;
// height: 100%;
flex: 1;
margin-top: 214px;
display: flex;
flex-flow: row wrap;
align-content: flex-start;
overflow-y: scroll;
.detail2_item {
margin-left:63px;
position: relative;
box-sizing: border-box;
width: 618px;
height: 91px;
padding: 25px 0 0 ;
// width: 618px;
// height: 91px;
// left: 65px;
// top: 235px;
// position: absolute;
.detail2_item_title {
width: 193px;
height: 23px;
left: 53px;
position: absolute;
font-size: 24px;
color: #474747;
}
.detail2_item_day {
width: 284px;
height: 16px;
left: 52px;
top: 42px;
position: absolute;
font-size: 20px;
color: #949494;
}
.detail2_item_num {
width: 88px;
height: 31px;
left: 455px;
top: 8px;
position: absolute;
font-size: 40px;
color: #474747;
}
.detail2_item_bg {
width: 618px;
height: 1px;
bottom: 0px;
position: absolute;
}
}
}
}
}
'use strict';
import { appID } from 'duiba-utils';
import React, { Component } from 'react';
import { Timer } from 'teddi';
import resList from '../../resconfig/resList'; //import API from '../../api';
import API from '../../api';
import './loading.less';
class Loading extends Component {
constructor(props) {
super(props);
this.state = {
resList: resList,
};
}
componentDidMount() {
Promise.all([this.getCountdown(), API.getRule()]).then(([, res]) => {
this.oncomplete(res);
});
}
getCountdown() {
return new Promise((r) => {
const delta = 30;
const timer = new Timer(1 * 30, 1000 / 30);
timer.on('timer', this.onupdate, this);
timer.on('complete', r, this);
timer.start(); // r();
});
}
onupdate() {
console.log('update');
}
oncomplete(res) {
this.props.navigateTo('mainpage', {
info: res.data,
});
}
render() {
return (
<div className="loading " uuid="b325d068-5750-48c1-8447-29b6f572e955">
<img
className="loading_bg "
uuid="caa1574c-edd4-4b5c-8332-18002df91464"
src={this.state.resList['486d644d-196a-4d71-99fe-bbaf06ecacbf'].url}
/>
<img
className="loading_front "
uuid="0fadc807-1e4c-45df-9cb8-db801c1a5426"
src={this.state.resList['042d5356-2585-46db-889d-664a8100598e'].url}
/>
<img
className="loading_progress "
uuid="19f75998-1403-415a-a816-090af61cfc2e"
src={this.state.resList['97cb2a19-7bb9-4b41-ad0d-2b0f757b97ad'].url}
/>
<img
className="loading_icon "
uuid="fe96070d-8add-43d9-8575-a519d4981222"
src={this.state.resList['c2df1a83-e9ea-4627-b376-1ac7f3e87b5c'].url}
/>
</div>
);
}
}
export default Loading;
.loading {
width: 750px;
height: 1624px;
position: absolute;
.loading_bg {
width: 750px;
height: 1624px;
position: absolute;
}
.loading_front {
width: 679px;
height: 163px;
left: 27px;
top: 693px;
position: absolute;
}
.loading_progress {
width: 557px;
height: 37px;
left: 88px;
top: 755px;
position: absolute;
}
.loading_icon {
width: 101px;
height: 133px;
left: 336px;
top: 623px;
position: absolute;
}
}
'use strict';
import React, { Component } from 'react';
import resList from '../../resconfig/resList'; //import API from '../../api';
import { Aup, AUPOP, AUP_MBX_STATE } from '../../pop';
import './main3.less';
class Main3 extends Component {
constructor(props) {
super(props);
this.state = {
resList: resList,
nickname: 'd9813k',
avatar: 1,
num: '1123',
};
}
componentDidMount() {
if (this.props.data) {
setTimeout(() => {
// Aup.show('PopRule', {}, this)
// Aup.show('Userinfo', {}, this);
// Aup.show('Sign', {}, this); // Aup.show('Select', {}, this);
}, 200);
}
}
render() {
const { avatar, nickname, num } = this.state;
return (
<div className="main3 " uuid="8754a9d1-7453-474b-b722-7cb71483ae85">
<img
className="main3_bg "
uuid="25a6c3f8-3f78-4758-b2ab-5bcbfaa0d8bc"
src={this.state.resList['caebeec6-fe80-4c78-a132-d911f97a81b6'].url}
/>
<div className="main3_top " uuid="257105ac-5616-4e29-a4dc-302ed2604193">
<div className="main3_userinfo " uuid="25d45126-3476-4d8e-9756-34e2ccf96163">
<img
className="main3_userinfo_bg "
uuid="5316b02a-5b8e-4355-b556-cd801852df7e"
src={this.state.resList['31522099-3ea6-4d2b-ae84-99e2877bd2d0'].url}
/>
{avatar == 1 && (
<img
className="main3_avatar1 "
uuid="f2277018-36fd-4f47-9124-d73324505dff"
src={this.state.resList['6dda365e-565e-4e15-9fc9-89b5e173dcd9'].url}
/>
)}
{avatar == 2 && (
<img
className="main3_avatar2 "
uuid="07d1620b-d31e-4ef7-a63a-9b0ef49497da"
src={this.state.resList['6ff31046-e036-4218-8cc9-5d715dfa64a1'].url}
/>
)}
{avatar == 3 && (
<img
className="main3_avatar3 "
uuid="dc2306b9-90e0-4e98-a967-e0f263a3217a"
src={this.state.resList['b4aa3a56-6a4f-4984-9aa2-1932c35de3b4'].url}
/>
)}
<span className="main3_num " uuid="018875e0-9592-4854-ba0b-2cd58464a6a2">
欢趣豆:12352
</span>
<span className="main3_nick " uuid="a7518930-17cc-427a-a6e5-27a593b309c4">
用户昵称
</span>
<img
onClick={() => {
this.props.navigateTo('detail');
}}
className="main3_btn_detail "
uuid="2021e306-1521-4373-a890-5a4feb45c7cb"
src={this.state.resList['25098e28-9948-4954-9bf3-c884fdcd230a'].url}
/>
</div>
<img
className="main3_sign "
uuid="fdb364dd-23db-46fe-8ab4-df733ce0596b"
src={this.state.resList['e4ba9074-781a-4dc1-a696-34753b57f924'].url}
/>
<img
className="main3_rule "
uuid="46338849-e102-41a8-9298-43639f634bcf"
src={this.state.resList['98666530-5e40-49d7-8b86-8397e3ee0889'].url}
/>
<img
className="main3_share "
uuid="def4d721-bfe0-4c42-970c-40d99e1c2944"
src={this.state.resList['82a28387-28f0-4e49-856a-dbe5e981bbb1'].url}
/>
<img
className="main3_btn_jingcai "
uuid="de6b0150-9221-439d-adf7-ec3e3ad5466e"
src={this.state.resList['8d1cc843-b298-42e1-a092-954edfcf93e2'].url}
/>
</div>
<img
className="main3_btn5 "
uuid="72de3087-a678-4c8e-90f0-98174bb08c70"
src={this.state.resList['bd2d0b8b-f567-4146-be92-dc1704f06b4a'].url}
/>
<img
className="main3_btn4 "
uuid="031a922c-6690-49a4-9659-2055ef8c174f"
src={this.state.resList['197b83b3-3d8a-47ed-bede-dd07bf533edc'].url}
/>
<img
className="main3_btn3 "
uuid="06d08e49-d168-4d83-93cb-422e8053ffa1"
src={this.state.resList['febc6038-d4f1-48ad-a855-b45656bdc9f9'].url}
/>
<img
className="main3_btn2 "
uuid="7bd21565-f46e-4c72-ad2c-d978d90ff4b3"
src={this.state.resList['b1c1b1ea-7d5e-40b5-b95f-e66ed468ac18'].url}
/>
<img
className="main3_btn1 "
uuid="cbdb75d5-b009-403b-98b2-056b8bdfaa71"
src={this.state.resList['3e030f90-a5de-4c99-b717-9b9e89b7eaa1'].url}
/>
<img
className="main3_cursor "
uuid="58323460-dc19-4377-b25c-fb1cabf8a29b"
src={this.state.resList['d86e633a-b211-4d24-b56b-90da3da4a4e5'].url}
/>
<img
className="main3_role "
uuid="9aec4461-b6d4-47fb-a08d-99453aff3567"
src={this.state.resList['6a414fa5-00f2-4c42-b444-f95dc9d774f2'].url}
/>
<img
className="main3_rolepop "
uuid="c27fef65-4506-42f8-85df-207999e11de1"
src={this.state.resList['56b64b91-4e9a-49bd-bfd0-20d10b6e6556'].url}
/>
</div>
);
}
}
export default Main3;
.main3 {
width: 750px;
height: 1624px;
position: absolute;
.main3_bg {
width: 750px;
height: 1624px;
position: absolute;
}
.main3_top {
width: 709px;
height: 401px;
left: 22px;
top: 38px;
position: fixed;
display: block;
.main3_userinfo {
width: 375px;
height: 97px;
position: absolute;
.main3_userinfo_bg {
width: 375px;
height: 97px;
position: absolute;
}
.main3_avatar1 {
width: 76px;
height: 76px;
left: 17px;
top: 10px;
position: absolute;
}
.main3_avatar2 {
width: 76px;
height: 76px;
left: 17px;
top: 10px;
position: absolute;
}
.main3_avatar3 {
width: 76px;
height: 76px;
left: 17px;
top: 10px;
position: absolute;
}
.main3_num {
width: 164px;
height: 22px;
left: 105px;
top: 57px;
position: absolute;
font-size: 24px;
color: #ffffff;
}
.main3_nick {
width: 96px;
height: 24px;
left: 105px;
top: 20px;
position: absolute;
font-size: 24px;
color: #ffffff;
}
.main3_btn_detail {
width: 50px;
height: 19px;
left: 295px;
top: 59px;
position: absolute;
}
}
.main3_sign {
width: 126px;
height: 118px;
left: 583px;
top: 283px;
position: absolute;
}
.main3_rule {
width: 126px;
height: 120px;
left: 583px;
position: absolute;
}
.main3_share {
width: 126px;
height: 119px;
left: 583px;
top: 143px;
position: absolute;
}
.main3_btn_jingcai {
width: 140px;
height: 88px;
left: 11px;
top: 130px;
position: absolute;
}
}
.main3_btn5 {
width: 477px;
height: 405px;
top: 1073px;
position: absolute;
}
.main3_btn4 {
width: 279px;
height: 338px;
left: 440px;
top: 925px;
position: absolute;
}
.main3_btn3 {
width: 320px;
height: 315px;
top: 680px;
position: absolute;
}
.main3_btn2 {
width: 383px;
height: 332px;
left: 351px;
top: 419px;
position: absolute;
}
.main3_btn1 {
width: 283px;
height: 303px;
top: 308px;
position: absolute;
}
.main3_cursor {
width: 88px;
height: 104px;
left: 540px;
top: 610px;
position: absolute;
}
.main3_role {
width: 124px;
height: 165px;
left: 417px;
top: 1337px;
position: absolute;
}
.main3_rolepop {
width: 402px;
height: 131px;
left: 287px;
top: 1212px;
position: absolute;
}
}
import React, { Component } from 'react';
import popMap from '../PopMap.js'
import { observer } from 'mobx-react-lite'
import { toJS } from "mobx";
import { Aup } from "../index.js"
import { ConsoleStyleComponents, ConsoleStyleFlagColor } from '../api/tools.js';
import './AUPopMobx.less'
class AUPopMobx extends Component {
constructor (props) {
super(props)
this.state = this.state || {
popArr: []
}
this.auPopRef = React.createRef()
this.closeFlagRef = React.createRef()
}
static getDerivedStateFromProps(nextProprs, preState) {
console.log(`%c AUPopMobx nextProprs is: \n`, ConsoleStyleComponents, nextProprs)
if (nextProprs.popArr.length === 0) {
allowScroll()
} else if (nextProprs.popArr.length && preState.popArr.length == 0) {
disableScroll()
}
return {
popArr: nextProprs.popArr
}
}
closePop = (index) => {
// TODO: not complete
// TODO: inject some animation function in there:
if (!this.state.popArr.length) return
else if (this.state.popArr.length == 1) {
if (this.auPopRef.current) {
this.auPopRef.current.style.transition = `opacity 350ms`
this.auPopRef.current.style.opacity = '0'
this.closeFlagRef.current && (this.closeFlagRef.current.style.display = 'block')
setTimeout(() => {
Aup.close()
this.closeFlagRef.current && (this.closeFlagRef.current.style.display = 'none')
}, 400);
} else {
Aup.close()
this.closeFlagRef.current.style.display = 'none'
}
}
else if (this.state.popArr.length > 1) {
this.closeFlagRef.current && (this.closeFlagRef.current.style.display = 'block')
setTimeout(() => {
Aup.close()
this.closeFlagRef.current && (this.closeFlagRef.current.style.display = 'none')
}, 400);
}
}
render() {
console.log('%c ----------------- AUtest - RENDER RUN FLAG ----------------- ----------------- ----------------- -----------------', ConsoleStyleFlagColor)
const { popArr } = this.state
let Pop = []
popArr.forEach((item, index) => {
const { showPop, popData, fn, ctx } = item
let PItem = popMap.get(showPop)
if(!PItem)console.error(`没有类型为${showPop}的弹窗`)
Pop.push(
<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>
{/* 关闭-禁止点击 */}
<div ref={this.closeFlagRef} className='compop_transparent'></div>
{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
);
}
}
export const AUPOP = observer(({ AUPopState }) => {
console.log(AUPopState)
return <AUPopMobx popArr={toJS(AUPopState.popArr)}/>
})
const debounce = (fn, wait, immediate = false) => {
let timer
return function () {
if (timer) clearTimeout(timer)
if (immediate) {
// 如果已经执行过,不再执行
var callNow = !timer
timer = setTimeout(() => {
timer = null
}, wait)
if (callNow) {
fn()
}
} else {
timer = setTimeout(() => {
fn()
}, wait)
}
}
}
let top = 0
const disableScroll = debounce(() => {
var top_ = window.scrollY;
// console.log('ScrollScroll disableScroll', top_)
document.body.style.position = "fixed";
document.body.style.overflow = "hidden";
top = top_
document.body.style.top = -top + "px";
}, 300, 1)
const allowScroll = debounce(() => {
// console.log('ScrollScroll allowScroll', top)
document.body.style.top = "0px";
document.body.style.position = "relative";
document.body.style.overflow = "auto";
window.scrollTo(0, top);
}, 300, 1)
.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;
display: 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
'use strict';
import { makeAutoObservable, observable, computed, action, runInAction, autorun, reaction, configure, toJS } from 'mobx'
import { CONSO_START_mark, ConsoleStyleTitle, ConsoFunc } from './api/tools'
// configure({
// useProxies: "never"
// })
class PopState {
nowShow
popArr
constructor() {
this.popArr = []
this.nowShow = arguments[0]
// makeAutoObservable(this)
makeAutoObservable(this, {
nowShow: observable,
popArr: observable,
addPop: action.bound,
changePop: action.bound,
popArrLength: computed
})
}
// 添加一个弹窗
addPop = (data) => {
this.nowShow = data.type
this.popArr.push(data)
// console.log(`${CONSO_START_mark}\n addPop:`, ConsoleStyleTitle, toJS(this.popArr))
}
// 改变数组中的第一个弹窗
changePop = (data) => {
this.nowShow = data.type
this.popArr.push(data)
// console.log(`${CONSO_START_mark}\n changePop:`, ConsoleStyleTitle, toJS(this.popArr))
// this.popArr = [data]
}
// 删除弹窗
delePop = (long) => {
this.popArr.splice(this.popArr.length - long, long)
if (this.popArr.length) this.nowShow = this.popArr[this.popArr.length - 1].type
}
// 清空 弹窗
clearPop = () => {
this.popArr = []
}
get popArrLength () {
// console.log(`${CONSO_START_mark}\n this.popArr:`, ConsoleStyleTitle, toJS(this.popArr))
return this.popArr.length
}
}
export const AUP_MBX_STATE = new PopState('init')
autorun(() => {
let tempLastComPop = toJS(AUP_MBX_STATE.popArr)
let last = tempLastComPop.length ? tempLastComPop[tempLastComPop.length - 1] : undefined
console.log(`${CONSO_START_mark}\n AUTORUN::: the last Pop`, ConsoleStyleTitle, last)
return last
})
// ready code for mobx can't use
// author: 沈阳楠
// export const EventDispatcher = (function () {
// function EventDispatcher() {
// this._events = {}
// }
// EventDispatcher.ins = function () {
// if (EventDispatcher.ins == null) {
// EventDispatcher.ins = new EventDispatcher()
// }
// return EventDispatcher.ins
// }()
// EventDispatcher.prototype.dispatch = function (eventName, data) {
// for (let i in this._events[eventName]) {
// var _event = this._events[eventName][i]
// _event.callback.call(_event.target.context, data)
// }
// }
// EventDispatcher.prototype.addEventListener = function (eventName, callback, target) {
// var _events = this._events[eventName]
// if (_events) {
// _events.push({
// callback: callback,
// target: target
// })
// } else {
// this._events[eventName] = [{
// callback: callback,
// target: target
// }]
// }
// }
// EventDispatcher.prototype.removeEventListener = function (eventName, callback, target) {
// for (let i = this._events[eventName].length - 1; i >= 0; i--) {
// var _event = this._events[eventName][i]
// if (_event.callback == callback && _event.target == target) {
// this._events[eventName].splice(i, 1)
// }
// }
// }
// EventDispatcher.prototype.removeAllEventListener = function (eventName) {
// this._events[eventName] = null
// }
// return EventDispatcher
// }())
// EventDispatcher.ins.addEventListener("aaaa", this.isStart, this)
// EventDispatcher.ins.addEventListener("aaaa", () => {
// EventDispatcher.ins.removeEventListener("aaaa", this.isStart, this)
// }, this)
// EventDispatcher.ins.dispatch("aaaa", 3213123)
\ No newline at end of file
// import PopGetPiece from '../components/pop/PopGetPiece/PopGetPiece.jsx'
// import PopInfiniteA from '../components/pop/PopInfiniteA/PopInfiniteA.jsx'
// import PopRegret from '../components/pop/PopRegret/PopRegret.jsx'
// import PopRotate from '../components/pop/PopRotate/PopRotate.jsx'
// import PopInput from '../components/pop/PopInput/PopInput.jsx'
// import PopDefault from '../components/pop/PopDefault/PopDefault.jsx'
import PopRule from '../components/rule/rule.jsx'
import Select from '../components/select/select.jsx'
import Sign from '../components/sign/sign.jsx'
import Userinfo from '../components/userinfo/userinfo.jsx'
// import PopLightCard from '../components/pop/PopLightCard/PopLightCard.jsx'
let popMap = new Map()
popMap.set("PopRule", PopRule)
popMap.set("Select", Select)
popMap.set("Sign", Sign)
popMap.set("Userinfo", Userinfo)
// 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
'use strict';
import { AUP_MBX_STATE } from '../AUState'
import { CONSO_START_mark, ConsoleStyleTitle } from './tools'
/**
* 清空页面弹窗
*/
export const clear = () => {
if (AUP_MBX_STATE.popArrLength === 0) return
else AUP_MBX_STATE.clearPop()
}
'use strict';
import { AUP_MBX_STATE } from '../AUState'
import { CONSO_START_mark, ConsoleStyleTitle } from './tools'
/**
* 关闭弹窗
* @param {Number} length 关闭的数量
*/
export const close = (length = 1) => {
if (AUP_MBX_STATE.popArrLength === 0) {
console.warn(`弹窗数组无储存的弹窗, \n 勿重复调用 close()`)
return
}
else if (AUP_MBX_STATE.popArrLength >= length) {
AUP_MBX_STATE.delePop(length)
}
else {
console.warn(`传入的关闭弹窗数量 ${length},大于弹窗数组所储存的数量 ${AUP_MBX_STATE.popArrLength}, \n 执行清空操作`)
AUP_MBX_STATE.clearPop()
}
}
'use strict';
import { AUP_MBX_STATE } from '../AUState'
import { CONSO_START_mark, ConsoleStyleTitle } from './tools'
/**
* 显示弹窗
* @param {String} type 弹窗类型
* @param {Object} data 传递数据
* @param {Fucntion} fn 定义更多 需要执行的方法 (context 来自父组件)
* @param {Context} ctx 传递 父组件 Context
*/
export const cover = (type, data = {}, option = null) => {
const pData = {
showPop: type,
popData: data || null,
fn: fn || null,
ctx: ctx || null
}
// console.log(`${CONSO_START_mark}\n AupopShow data is:`, ConsoleStyleTitle, data)
// 覆盖弹窗
if (type && AUP_MBX_STATE.popArrLength) AUP_MBX_STATE.addPop(pData)
// 出现弹窗 - ps: 首个弹窗
else AUP_MBX_STATE.addPop(pData)
}
'use strict';
import { AUP_MBX_STATE } from '../AUState'
import { CONSO_START_mark, ConsoleStyleTitle } from './tools'
/**
* 获取弹窗数组
*/
export const getArr = () => {
return new Promise((resolve, reject) => {
let popArrTmp = deepCopy(AUP_MBX_STATE.popArr)
resolve(popArrTmp)
})
}
function deepCopy(source){
if (typeof source != "object") {
return source
}
if (source == null) {
return source
}
var newObj = source.constructor === Array ? [] : {} //开辟一块新的内存空间
for (var i in source) {
newObj[i] = deepCopy(source[i])
}
return newObj
}
// IntersectionObserver
\ No newline at end of file
export { show } from './show'
export { cover } from './cover'
export { close } from './close'
export { clear } from './clear'
export { getArr } from './getArr'
\ No newline at end of file
'use strict';
import { AUP_MBX_STATE } from '../AUState'
import { CONSO_START_mark, ConsoleStyleTitle } from './tools'
/**
* 显示弹窗
* @param {String} type 弹窗类型
* @param {Object} data 传递数据
* @param {Fucntion} fn 定义更多 需要执行的方法 (context 来自父组件)
* @param {Context} ctx 传递 父组件 Context
*/
export const show = (type, data = {}, ctx, fn) => {
const pData = {
showPop: type,
popData: data || null,
fn: fn || null,
ctx: ctx || null
}
// console.log(`${CONSO_START_mark}\n AupopShow data is:`, ConsoleStyleTitle, data)
// 添加弹窗 没有弹窗
if (type && !AUP_MBX_STATE.popArrLength) AUP_MBX_STATE.addPop(pData)
// 替换弹窗
else if (type && AUP_MBX_STATE.popArrLength) AUP_MBX_STATE.changePop(pData)
}
export function ConsoFunc() {
console.log(
CONSO_START_mark, ConsoleStyleTitle,
...arguments
)
// console.log(END_mark, ConsoleStyleDetail)
}
export const ConsoleStyleTitle = [
'color: #94c902',
'font-size: 12px',
'font-weight: 500',
'text-shadow: 1px 1px rgba(200, 200, 200, 0.2)',
].join(';')
export const ConsoleStyleDetail = [
'color: #94c902',
'font-size: 8px',
'font-weight: 200'
].join(';')
export const ConsoleStyleComponents = [
'color: #a591ff',
'font-size: 12px',
'font-weight: 400'
].join(';')
export const ConsoleStyleFlagColor = [
'color: #fda300',
'font-size: 6px',
'font-weight: 900'
].join(';')
export const CONSO_END_mark = `%c end --------\n`
export const CONSO_START_mark = `%c------- ~ (๑• . •๑) ~ ------- AUPOP -------- \n`
\ No newline at end of file
export * as Aup from './api'
export { AUP_MBX_STATE } from './AUState'
export { AUPOP } from './AUPopMobx/AUPopMobx.jsx'
\ No newline at end of file
/**
* 目前没有用到
* @param {*} resList
* @param {*} uuid
*/
const getSrcByUuid = (resList, uuid) => {
resList = resList || [];
for (let i = 0; i < resList.length; i++) {
if (resList[i].uuid == uuid) {
return resList[i].url
}
}
}
module.exports = {
getSrcByUuid
}
\ No newline at end of file
This diff is collapsed.
const SVGA = require("svgaplayerweb");
var svgaParser = new SVGA.Parser();
/**
* 快速加载svga资源,但不装载
* @param url 资源URL
*/
export const loadSVGA = (url) => {
return new Promise((resolve, reject) => {
svgaParser.load(url, (videoItem) => {
resolve(videoItem)
}, (err) => {
reject(err)
})
})
}
/**
* 快速装载一个svga动画
* @param url 资源URL
* @param className 挂载元素的class name
* @param loops 播放次数。默认为空,循环播放。
* @param clearsAfterStop
*/
export const getSVGA = async (url, className, loops, clearsAfterStop) => {
const videoItem = await loadSVGA(url);
var svga = new SVGA.Player(className);
if (loops)
svga.loops = loops;
if (clearsAfterStop)
svga.clearsAfterStop = clearsAfterStop;
svga.setVideoItem(videoItem);
svga.startAnimation();
return svga
}
\ No newline at end of file
This source diff could not be displayed because it is too large. You can view the blob instead.
......@@ -14,10 +14,10 @@ class Detail2 extends Component {
}
componentDidMount(){
setTimeout(() => {
// setTimeout(() => {
this.props.navigateTo('mainpage')
}, 2000);
// this.props.navigateTo('mainpage')
// }, 2000);
}
render() {
......@@ -27,12 +27,14 @@ class Detail2 extends Component {
}
return (
<div className="detail2 " uuid="c5abc304-1a0b-4804-956a-d61c1d5b75ed">
<div className="detail2_wrapper" uuid="583667d9-e382-49d8-bfc9-50b6d800c794">
<img
className="detail2_bg"
uuid="2b6c5d97-e458-42a0-b49b-49e9efc6abbc"
src={this.state.resList['9d6135a5-469f-4293-b931-17786c977974'].url}
/>
<img onClick={()=>this.props.navigateTo('mainpage')} className="detail2_back" uuid="detail2_back" src="//yun.duiba.com.cn/spark/assets/805d9455ffa59e37f0f0f19249959c3a9c458f96.png"></img>
<div className="detail2_item_list" uuid="3804f60d-697f-4d68-98b5-ca8cf2e2d3ba">
{
arr.map((i) => (
......
......@@ -6,6 +6,7 @@
top: 0px;
transform-origin: 0 0 0;
overflow: hidden;
.detail2_wrapper {
width: 100%;
height: 100%;
......@@ -22,6 +23,16 @@
z-index: -1;
transform-origin: 0 0 0;
}
.detail2_back{
width: 74px;
height: 74px;
position: absolute;
left: 34px;
top: 34px;
transform-origin: 0 0 0;
}
.detail2_item_list {
// background-color: red;
width: 100%;
......
This diff is collapsed.
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