Skip to content

T
teddi
Commit 0bb08a9f authored by AU-PRO's avatar AU-PRO
Browse files
Options

init and beta 1.0 for test, author id AUPRO

parent 9689c8a6
Expand all Show whitespace changes
Inline Side-by-side
Showing with 3721 additions and 0 deletions
project/.gitignore 0 → 100644
View file @ 0bb08a9f
.DS_Store
node_modules/
coverage/
dist/
npm-debug.log
selenium-debug.log
.idea
.builds
.project
.vscode
yarn-error.log
.yarn
.package-lock
yarn.lock
.cache
packages/**/package-lock.json
project/.npmrc 0 → 100755
View file @ 0bb08a9f
package-lock=false
registry = http://registry.npm.taobao.org/
\ No newline at end of file
project/package.json 0 → 100644
View file @ 0bb08a9f
{
"name": "sparkproject-1604506932682",
"version": "1.0.0",
"private": true,
"scripts": {},
"dependencies": {
"axios": "^0.19.2",
"babel-plugin-transform-decorators-legacy": "^1.3.5",
"css-loader": "^3.6.0",
"fyge-tbmini": "^1.3.1",
"postcss-loader": "^3.0.0",
"prettier": "^2.0.5",
"qs": "^6.9.4",
"react": "^16.4.1",
"react-dom": "^16.4.1",
"react-redux": "^5.0.7",
"redux": "^4.0.0",
"redux-thunk": "^2.3.0",
"spark-design": "^0.2.0",
"spark-utils": "git+ssh://git@gitlab2.dui88.com:spark/spark-utils.git",
"style-loader": "^1.2.1",
"svgaplayerweb": "^2.3.1"
},
"devDependencies": {
"mockjs": "^1.1.0"
}
}
project/public/index.html 0 → 100644
View file @ 0bb08a9f
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="theme-color" content="#000000">
<title>React App</title>
<script>
!(function(e, i) {
var t = e.documentElement,
n = navigator.userAgent.match(/iphone|ipod|ipad/gi),
a = n ? Math.min(i.devicePixelRatio, 3) : 1,
m = 'orientationchange' in window ? 'orientationchange' : 'resize';
t.dataset.dpr = a;
for (
var d, l, c = !1, o = e.getElementsByTagName('meta'), r = 0;
r < o.length;
r++
)
(l = o[r]), 'viewport' == l.name && ((c = !0), (d = l));
if (c)
d.content =
'width=device-width,initial-scale=1.0,maximum-scale=1.0, minimum-scale=1.0,user-scalable=no';
else {
var o = e.createElement('meta');
(o.name = 'viewport'),
(o.content =
'width=device-width,initial-scale=1.0,maximum-scale=1.0, minimum-scale=1.0,user-scalable=no'),
t.firstElementChild.appendChild(o);
}
var s = function() {
var e = t.clientWidth;
e / a > 750 && (e = 750 * a),
(window.remScale = e / 750),
(t.style.fontSize = 200 * (e / 750) + 'px');
};
s(), e.addEventListener && i.addEventListener(m, s, !1);
})(document, window);
</script>
<script src="//yun.duiba.com.cn/h5/lib/zepto.min.js"></script>
<script>
function getApp(){
return {
cloud:{},
cloudName:"clientTemplate2C",
requestType:"mock"
}
}
var CFG = CFG || {};
CFG.projectId = location.pathname.split('/')[2] || '1';
function getUrlParam(name) {
const search = window.location.search;
const matched = search
.slice(1)
.match(new RegExp('(^|&)' + name + '=([^&]*)(&|$)', 'i'));
return search.length ? matched && matched[2] : null;
}
CFG.appID = getUrlParam("appID")||1
</script>
</head>
<body>
<noscript>
You need to enable JavaScript to run this app.
</noscript>
<div id="root"></div>
<!--
This HTML file is a template.
If you open it directly in the browser, you will see an empty page.
You can add webfonts, meta tags, or analytics to this file.
The build step will place the bundled scripts into the <body> tag.
To begin the development, run `npm start` or `yarn start`.
To create a production bundle, use `npm run build` or `yarn build`.
-->
</body>
</html>
project/sparkrc.js 0 → 100644
View file @ 0bb08a9f
module.exports = {
OUTPUT_DIR: "dist",
SOURCE_DIR: "src",
TEMP_DIR: "./.temp",
ENTRY: "src/app.jsx",
TEMPLATE: "./public/index.html",
MOCK_STATUS: false
};
project/src/app.jsx 0 → 100644
View file @ 0bb08a9f
import React, { Component } from "react";
import ReactDOM from "react-dom";
import "./app.less";
import store from './redux/store' // Redux --> store
import { Provider } from 'react-redux' // Redux --> Provider
import AUPop from "./components/AUPop/AUPop.jsx" // Redux --> AUPop
//此处为spark-cli动态生成
import PageHome from "./pages/PageHome/PageHome.jsx";
class App extends Component {
render() {
return (
<Provider store={store}>
<>
{/* 页面 */}
<PageHome />
{/* 弹窗 */}
<AUPop/>
</>
</Provider>
);
}
}
ReactDOM.render(<App />, document.getElementById("root"));
project/src/app.less 0 → 100644
View file @ 0bb08a9f
* {
margin: 0;
padding: 0;
}
html,
body {
font-size: 24px;
width: 100%;
height: 100%;
}
// .OUT-WRAPPER {
// width: 100%;
// height: 100%;
// display: block;
// position: fixed;
// top: 0;
// bottom: 0;
// left: 0;
// right: 0;
// overflow-y: scroll;
// }
@baseWith: 12.5px;
.loading-mask {
touch-action: none;
position: fixed;
left: 0;
right: 0;
top: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.6);
z-index: 2000;
.loading-box{
position: absolute;
width: 100%;
top: calc(50% - 50px);
.loading-text{
text-align: center;
margin-top: 30px;
font-size: 28px;
color: #eee;
}
.loading-dot {
position: relative;
width: @baseWith * 5;
height: @baseWith * 5;
margin: 0 auto;
transform: rotate(165deg);
&::after,
&::before{
content: '';
position: absolute;
top: 50%;
left: 50%;
display: block;
width: @baseWith;
height: @baseWith;
border-radius: @baseWith / 2;
transform: translate(-50%, -50%);
}
&::before {
animation: before 2s infinite;
}
&::after {
animation: after 2s infinite;
}
}
}
}
@keyframes before {
0% {
width: @baseWith;
box-shadow: @baseWith * 2 -@baseWith rgba(225, 20, 98, 0.75), -@baseWith * 2 @baseWith rgba(111, 202, 220, 0.75);
}
35% {
width: @baseWith * 5;
box-shadow: 0 -@baseWith rgba(225, 20, 98, 0.75), 0 @baseWith rgba(111, 202, 220, 0.75);
}
70% {
width: @baseWith;
box-shadow: -@baseWith * 2 -@baseWith rgba(225, 20, 98, 0.75), @baseWith * 2 @baseWith rgba(111, 202, 220, 0.75);
}
100% {
box-shadow: @baseWith * 2 -@baseWith rgba(225, 20, 98, 0.75), -@baseWith * 2 @baseWith rgba(111, 202, 220, 0.75);
}
}
@keyframes after {
0% {
height: @baseWith;
box-shadow: @baseWith @baseWith * 2 rgba(61, 184, 143, 0.75), -@baseWith -@baseWith * 2 rgba(233, 169, 32, 0.75);
}
35% {
height: @baseWith * 5;
box-shadow: @baseWith 0 rgba(61, 184, 143, 0.75), -@baseWith 0 rgba(233, 169, 32, 0.75);
}
70% {
height: @baseWith;
box-shadow: @baseWith -@baseWith * 2 rgba(61, 184, 143, 0.75), -@baseWith @baseWith * 2 rgba(233, 169, 32, 0.75);
}
100% {
box-shadow: @baseWith @baseWith * 2 rgba(61, 184, 143, 0.75), -@baseWith -@baseWith * 2 rgba(233, 169, 32, 0.75);
}
}
#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: 460px;
padding: 12px 22px;
background: rgba(0, 0, 10, 0.75);
box-shadow: 1px 2px 5px 1px rgba(0, 0, 0, 0.2);
border-radius: 40px;
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;
}
@keyframes heartbeats {
0% {
transform: scale(1, 1);
}
25% {
transform: scale(0.94, 0.94);
}
50% {
transform: scale(1.02, 1.02);
}
62.5% {
transform: scale(0.98, 0.98);
}
75% {
transform: scale(1.02, 1.02);
}
87.5% {
transform: scale(0.99, 0.99);
}
100%{
transform: scale(1, 1);
}
}
\ No newline at end of file
project/src/components/AUPop/AUPop.jsx 0 → 100644
View file @ 0bb08a9f
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 0 → 100644
View file @ 0bb08a9f
.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 0 → 100644
View file @ 0bb08a9f
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/components/pop/PopDefault/PopDefault.jsx 0 → 100644
View file @ 0bb08a9f
'use strict';
import React, { Component } from 'react';
import resList from '../../../resconfig/resList';
import './PopDefault.less';
class PopDefault extends Component {
constructor(props) {
super(props);
this.state = this.state || {
resList: resList
};
}
doCallBack = () => {
this.props.fn()
}
render() {
const { resList } = this.state
return (
<div className="PopDefault">
<img className='comPop_close_btn' src={resList['95e51d5a-c54c-4e03-9aa6-bfec258bc7d4'].url} onClick={this.props.onClose} alt=""/>
<div className="PopDefault_callback_btn" onClick={this.doCallBack} > DO CALLBACK FN() </div>
<span className="PopDefault_describe">
SIMPLE DEFAULT POP
</span>
</div>
);
}
}
export default PopDefault;
project/src/components/pop/PopDefault/PopDefault.less 0 → 100644
View file @ 0bb08a9f
.PopDefault {
width: 583px;
height: 735px;
opacity: 1;
left: calc(51% - (583px / 2));
top: calc(44% - (735px / 2));
position: absolute;
background-color: #62a1bf;
display: flex;
flex-direction: column;
.PopDefault_callback_btn {
width: 360px;
height: 84px;
left: 154px;
top: 613px;
border-radius: 16px;
background-color: rgb(230, 230, 230);
text-align: center;
line-height: 84px;
align-self: center;
margin-top: 560px;
color: #808080;
font-size: 32px;
font-weight: 900;
}
.PopDefault_describe {
width: 100%;
height: 64px;
line-height: 40px;
opacity: 1;
left: 0;
top: 180px;
position: absolute;
font-size: 40px;
text-align: center;
font-weight: 700;
color: #d8eef8;
}
}
project/src/components/pop/PopGetPiece/PopGetPiece.jsx 0 → 100644
View file @ 0bb08a9f
'use strict';
import React, { Component } from 'react';
import resList from '../../../resconfig/resList';
// Redux
import store from '../../../redux/store';
import * as actions from '../../../redux/action';
import './PopGetPiece.less';
import { debounce } from '../../../utils/debounce';
class PopGetPiece extends Component {
constructor(props) {
super(props);
this.state = this.state || {
resList: resList,
name: this.props.data.name,
icon: this.props.data.icon,
signCardFragment: this.props.data.signCardFragment
};
}
goExchange = () => {
this.props.ctx.toExchange()
}
render() {
const { resList, signCardFragment, name, icon } = this.state
return (
<div className="popgetpiece">
<img className='comPop_close_btn' src={resList['95e51d5a-c54c-4e03-9aa6-bfec258bc7d4'].url} onClick={this.props.onClose} alt=""/>
<img className="c_popgetpiece_bg" src={resList['2c82c3ef-c361-4b9f-a059-797a15c0a0d7'].url} />
<img className="popgetpiece_titleicon" src={resList['53f94099-62dc-4764-9483-fc96ab67a2a4'].url} />
<span className="popgetpiece_describe">3张签到卡碎片可兑换1张签到卡</span>
<div className="popgetpiece_describe popgetpiece_describe_02">
<span>当前有{signCardFragment}张签到卡碎片</span>
{signCardFragment >= 3 ? <span onClick={ debounce(this.goExchange, 300) } className="popgetpiece_describe_goExchange">去兑换</span> : null}
</div>
<img className="popgetpiece_icon" src={icon} />
<span className="popgetpiece_title">抽中{name}</span>
<img onClick={this.props.onClose} className="popgetpiece_iknow_btn dl_md7" src={resList['a0cb5042-c04d-4031-bc11-0b4566aa7184'].url} />
</div>
);
}
}
export default PopGetPiece;
project/src/components/pop/PopGetPiece/PopGetPiece.less 0 → 100644
View file @ 0bb08a9f
.popgetpiece {
width: 583px;
height: 735px;
opacity: 1;
left: calc(51% - (583px / 2));
top: calc(44% - (735px / 2));
position: absolute;
.c_popgetpiece_bg {
width: 576px;
height: 726px;
opacity: 1;
left: 7px;
top: 9px;
position: absolute;
}
.popgetpiece_titleicon {
width: 162px;
height: 49px;
opacity: 1;
left: 208px;
top: 234px;
position: absolute;
}
.popgetpiece_bgback {
width: 567px;
height: 140px;
opacity: 1;
position: absolute;
}
.popgetpiece_describe {
width: 100%;
height: 56px;
line-height: 28px;
opacity: 1;
left: 0px;
text-align: center;
top: 536px;
position: absolute;
font-size: 24px;
color: rgba(84, 128, 183, 1);
text-align: center;
}
.popgetpiece_describe_02 {
top: 566px;
}
.popgetpiece_describe_goExchange {
color: #e87929;
text-decoration: underline;
}
.popgetpiece_icon {
width: 164px;
height: 164px;
opacity: 1;
left: 207px;
top: 356px;
position: absolute;
}
.popgetpiece_title {
width: 100%;
height: 32px;
opacity: 1;
left: 0;
top: 305px;
position: absolute;
font-size: 32px;
text-align: center;
font-weight: 500;
line-height: 32px;
color: rgba(65, 139, 232, 1);
}
.popgetpiece_iknow_btn {
width: 270px;
height: 84px;
opacity: 1;
left: 154px;
top: 613px;
position: absolute;
}
}
project/src/components/pop/PopInfiniteA/PopInfiniteA.jsx 0 → 100644
View file @ 0bb08a9f
'use strict';
import React, { Component } from 'react';
import resList from '../../../resconfig/resList';
// Redux
import store from '../../../redux/store';
import * as actions from '../../../redux/action';
import './PopInfiniteA.less';
import { debounce } from '../../../utils/debounce';
class PopInfiniteA extends Component {
constructor(props) {
super(props);
this.state = this.state || {
resList: resList,
cardNum: sum(0, 1000)
};
}
openNewPop = () => {
store.dispatch(actions.showPop({type: 'PopInfiniteA', data: {text: '未抽到签到卡碎片'}, cover: true, ctx: this}))
}
render() {
const { resList, cardNum } = this.state
return (
<div className="popsignconfirm">
<img className='comPop_close_btn' src={resList['95e51d5a-c54c-4e03-9aa6-bfec258bc7d4'].url} onClick={this.props.onClose} alt=""/>
<span className="rm_describe rm_describe01">THIS'S DIFFRENCE POP</span>
<span className="rm_describe rm_describe02">POP NUMBENR IS </span>
<span className="rm_describe rm_describe03 popsignconfirm_describe_cardNum">{cardNum}</span>
<span onClick={ debounce(this.openNewPop, 200) } className="popsignconfirm_get_btn"> OPEN NEW POP </span>
</div>
);
}
}
function sum (m, n) {
var num = Math.floor(Math.random() * (m - n) + n)
console.log('sum number', num)
return num
}
export default PopInfiniteA;
project/src/components/pop/PopInfiniteA/PopInfiniteA.less 0 → 100644
View file @ 0bb08a9f
.popsignconfirm {
width: 583px;
height: 735px;
opacity: 1;
left: calc(51% - (583px / 2));
top: calc(44% - (735px / 2));
position: absolute;
background-color: #62a1bf;
display: flex;
flex-direction: column;
.popsignconfirm_get_btn {
width: 360px;
height: 84px;
left: 154px;
top: 613px;
border-radius: 16px;
background-color: rgb(230, 230, 230);
text-align: center;
line-height: 84px;
align-self: center;
margin-top: 560px;
color: #808080;
font-size: 32px;
font-weight: 900;
}
.rm_describe {
width: 100%;
height: 64px;
line-height: 40px;
opacity: 1;
left: 0;
position: absolute;
font-size: 40px;
text-align: center;
font-weight: 700;
color: #d8eef8;
}
.rm_describe01 {
top: 120px;
}
.rm_describe02 {
top: 180px;
}
.rm_describe03 {
top: 240px;
}
.popsignconfirm_describe_cardNum {
color: #cf5010;
font-size: 48px;
line-height: 88px;
}
}
project/src/components/pop/PopInput/PopInput.jsx 0 → 100644
View file @ 0bb08a9f
'use strict';
import React, { Component } from 'react';
import resList from '../../../resconfig/resList';
import { debounce } from '../../../utils/debounce';
import { Loading, Toast } from "spark-design"
import './PopInput.less';
class PopInput extends Component {
constructor(props) {
super(props);
this.state = this.state || {
resList: resList,
phone: ''
};
}
phoneInputChange = (event) => {
if (event.target.value.length > 11) return
else if ((event.target.value.length > this.state.phone.length) &&
!Number(event.target.value[event.target.value.length - 1]) &&
!(event.target.value[event.target.value.length - 1] === '0') ) return
this.setState({
phone: event.target.value
})
}
confirmPhoneCode = () => {
if (this.state.phone.length !== 11 || this.state.phone[0] != '1') {
Toast('请输入正确的手机号')
return
}
this.props.ctx.parentConsoleFunction(this.state.phone)
this.props.onClose()
}
render() {
const { resList, phone } = this.state
return (
<div className="popinput">
<img className='comPop_close_btn' src={resList['95e51d5a-c54c-4e03-9aa6-bfec258bc7d4'].url} onClick={this.props.onClose} alt=""/>
<div onClick={ debounce(this.confirmPhoneCode, 300) } className="popinput_confirm_btn" > Input Confirm </div>
<div className="popinput_input_contnet">
<input
value={phone}
type='tel'
maxLength='11'
placeholder='INPUT 11 PHOMENUMBER'
onChange={(event) => {this.phoneInputChange(event)}}
className='popinput_input' />
</div>
<div className="popinput_subtitle">INPUT POP</div>
</div>
);
}
}
export default PopInput;
project/src/components/pop/PopInput/PopInput.less 0 → 100644
View file @ 0bb08a9f
.popinput {
width: 576px;
height: 672px;
opacity: 1;
left: calc(51% - (576px / 2));
top: calc(44% - (672px / 2));
position: absolute;
background-color: #62a1bf;
display: flex;
flex-direction: column;
.popinput_confirm_btn {
width: 360px;
height: 84px;
left: 154px;
border-radius: 16px;
background-color: rgb(230, 230, 230);
text-align: center;
line-height: 84px;
align-self: center;
margin-top: 480px;
color: #808080;
font-size: 32px;
font-weight: 900;
}
.popinput_input_contnet {
width: 415px;
height: 80px;
opacity: 1;
left: 75px;
top: 300px;
position: absolute;
background-color: #fff;
border-radius: 10px;
.popinput_input_placeholder {
width: 314px;
height: 30px;
opacity: 1;
left: 21px;
top: 24px;
position: absolute;
font-size: 37.40584px;
overflow: hidden;
color: rgba(210, 213, 216, 1);
}
.popinput_input {
width: 380px;
height: 60px;
overflow: hidden;
text-align: left;
line-height: 60px;
margin: 10px 16px;
font-size: 32px;
font-weight: 500;
outline: none;
border: none;
}
}
.popinput_subtitle {
width: 100%;
height: 64px;
line-height: 40px;
opacity: 1;
left: 0;
top: 180px;
position: absolute;
font-size: 40px;
text-align: center;
font-weight: 700;
color: #d8eef8;
}
}
input::-webkit-input-placeholder {
color:#d2d5d8;
font-size: 30px;
font-weight: 400;
line-height: 60px;
opacity: 1;
}
input:-moz-placeholder {
color:#d2d5d8;
font-size: 30px;
font-weight: 400;
line-height: 60px;
opacity: 1;
}
input::-moz-placeholder {
color:#d2d5d8;
font-size: 30px;
font-weight: 400;
line-height: 60px;
opacity: 1;
}
input:-ms-input-placeholder {
color:#d2d5d8;
font-size: 30px;
font-weight: 400;
line-height: 60px;
opacity: 1;
}
project/src/components/pop/PopLightCard/PopLightCard.jsx 0 → 100644
View file @ 0bb08a9f
'use strict';
import React, { Component } from 'react';
import resList from '../../../resconfig/resList';
import { debounce } from '../../../utils/debounce'
import { Random } from 'mockjs';
import { spotData } from './spotData'
import SvgaBackLight from '../SvgaBackLight/SvgaBackLight.jsx'
import './PopLightCard.less';
class PopLightCard extends Component {
constructor(props) {
super(props);
this.state = this.state || {
resList: resList,
addSignDays: this.props.data.addSignDays ? this.props.data.addSignDays : 0,
spotName: this.props.data.sindex ? spotData[this.props.data.sindex - 1].spotName : 'SPOT',
cardType: 'a',
detail: this.props.data.sindex ? spotData[this.props.data.sindex - 1].spotDetail : `地标介绍: ${Random.cparagraph(20, 40)}`,
backLightDelay: 360,
showSpotImage: this.props.data.sindex ? spotData[this.props.data.sindex - 1].spotImage : resList['1057e473-9c0a-4923-b943-555eca601782'].url,
canDraw: false
};
this.refA = React.createRef()
this.refB = React.createRef()
}
componentDidMount() {
this.refB.current.className = 'poplight_group poplight_hide'
}
// 换面
turnSide = (type) => {
if (type == 'a') {
this.refA.current.className = 'poplight_group poplight_show'
this.refB.current.className = 'poplight_group poplight_hide'
setTimeout(() => {
this.refA.current.style.zIndex = '1'
this.refB.current.style.zIndex = '-1'
}, 200)
}
if (type == 'b') {
this.refA.current.className = 'poplight_group poplight_hide'
this.refB.current.className = 'poplight_group poplight_show'
setTimeout(() => {
this.refA.current.style.zIndex = '-1'
this.refB.current.style.zIndex = '1'
}, 200)
}
this.setState({ cardType: type, backLightDelay: 100 })
}
gotoRotate = () => {
this.props.ctx.gotoRotateSpot()
}
toShare = () => {
this.props.ctx.shareFunc()
}
render() {
const { resList, spotName, cardType, detail, backLightDelay, showSpotImage, canDraw } = this.state
let detail_ = `
<span>${detail[0]}</span>
<br/>
<br/>
<span style="font-weight: bolder">特色小知识：${detail[1][0]}</span>
<br/>
<span>${detail[1][1]}</span>
`
return (
<div className="poplightcard">
<img className='comPop_close_btn poplightcard_close' src={resList['95e51d5a-c54c-4e03-9aa6-bfec258bc7d4'].url} onClick={this.props.onClose} alt=""/>
<div ref={this.refA} className='poplight_group'>
{cardType == 'a' ? <SvgaBackLight style={{top: '-84px'}} delay={backLightDelay}/> : null }
<div className="poplightcard_content">
<img className="poplightcard_changeSide_btn" onClick={ debounce(this.turnSide.bind(this, 'b'), 300)} src={resList['f799e362-442b-4a1f-a466-e43069ea0af0'].url} alt=""/>
<img className="poplightcard_image" src={showSpotImage} />
</div>
<PopLightHead name={spotName}/>
</div>
<div ref={this.refB} className='poplight_group'>
{cardType == 'b' ? <SvgaBackLight style={{top: '-84px'}} delay={backLightDelay}/> : null }
<div className="poplightcard_content">
<img className="poplightcard_changeSide_btn changeSide_back_btn" onClick={ debounce(this.turnSide.bind(this, 'a'), 300)} src={resList['b46dfde5-2894-439b-985d-f1c180419b3a'].url} alt=""/>
<div className='poplightcard_detail_content'>
<div className="poplightcard_detail_wrapper">
<div className='poplightcard_detail' dangerouslySetInnerHTML={{__html: detail_}}></div>
</div>
</div>
<img className="poplightcard_image" src={showSpotImage} />
</div>
<PopLightHead name={spotName}/>
</div>
<img className="headgroup_goto_turntable" src={resList['e01a55dd-e40f-4f87-a79a-1218f7d5cff0'].url} />
<img className="headgroup_share_btn dl_md11" src={resList['14526a62-17a5-4c81-ac03-3fac4fe26586'].url} />
</div>
);
}
}
function PopLightHead(props) {
return (
<div className="poplightcard_headgroup">
<img className="poplightcard_headback" src={resList['3a8c0bcd-a931-463e-ba2b-e050c6932750'].url} />
<div className="headgroup_name_group">
{/* <img className="headgroup_name_back" src={resList['98ad2dd0-e77f-4590-ac79-90a2fd23fa26'].url} /> */}
<span className="headgroup_name_text">{props.name}</span>
</div>
</div>
)
}
export default PopLightCard;
project/src/components/pop/PopLightCard/PopLightCard.less 0 → 100644
View file @ 0bb08a9f
.poplightcard {
width: 706px;
height: 1159px;
opacity: 1;
left: calc(50% - (706px / 2));
top: calc(42.5% - (1159px / 2));
position: absolute;
.poplight_group {
transition: all 300ms linear;
width: 512px;
height: 720px;
left: 93px;
position: absolute;
top: 197px;
.poplightcard_headgroup {
width: 269px;
height: 132px;
opacity: 1;
left: 122px;
top: -53px;
z-index: 3;
position: absolute;
.poplightcard_headback {
width: 269px;
height: 132px;
opacity: 1;
position: absolute;
}
.headgroup_name_group {
width: 100%;
height: 38px;
opacity: 1;
left: 0;
top: 64px;
position: absolute;
text-align: center;
.headgroup_name_text {
display: inline-block;
padding: 0 10px;
border-radius: 6px;
background: #ed5400;
opacity: 1;
text-align: center;
font-size: 24px;
color: rgba(255, 255, 255, 1);
}
}
}
.poplightcard_content {
width: 512px;
height: 720px;
position: relative;
box-sizing: border-box;
background-color: #3395ff;
border-radius: 24px;
overflow: hidden;
.poplightcard_image {
width: 491px;
height: 700px;
opacity: 1;
left: 10px;
top: 10px;
border-radius: 12px;
overflow: hidden;
position: absolute;
}
.poplightcard_detail_content {
border: 10px solid #3395ff;
box-sizing: content-box;
border-radius: 24px;
width: 491px;
height: 700px;
opacity: 1;
left: 0;
top: 0;
position: absolute;
background-color: rgba(0, 0, 0, .6);
z-index: 3;
.poplightcard_detail_wrapper {
width: 465px;
height: 558px;
position: absolute;
left: 17px;
top: 80px;
overflow-y: scroll;
.poplightcard_detail {
font-size: 30px;
color:#fff;
line-height: 1.42em;
}
}
}
}
}
.poplight_show {
opacity: 1;
transform: scale(1);
// z-index: 1;
}
.poplight_hide {
opacity: 0;
transform: scale(0);
// z-index: -1;
}
.poplightcard_changeSide_btn {
width: 93px;
height: 23px;
position: absolute;
bottom: 20px;
right: 26px;
z-index: 4;
display: block;
}
.changeSide_back_btn {
width: 68px;
height: 23px;
}
.headgroup_goto_turntable {
width: 309px;
height: 96px;
opacity: 1;
left: 195px;
top: 944px;
position: absolute;
}
.headgroup_share_btn {
width: 309px;
height: 95px;
opacity: 1;
left: 195px;
top: 1064px;
position: absolute;
}
}
.poplightcard_close {
bottom: -140px !important;
}
project/src/components/pop/PopLightCard/spotData.js 0 → 100644
View file @ 0bb08a9f
export const spotData = [
{ spotName: '203樱花园', spotImage: '//yun.duiba.com.cn/spark/assets/8a5edc0d0ad96f730750fa92a3690eb15b3c23b9.png',
spotDetail: [
'种植着来自国内外的近30个品种5000余株樱花，是目前东北地区园区面积最大，樱花树最多，品种最全的樱花园。园内种植的樱花以中国樱、日本早樱、山樱等为主，还有朝鲜黄樱、美国绿樱等珍稀品种。',
['大连女子骑警大队', '大连女子骑警大队成立于1994年12月，是世界第一支成编制的女子骑警队。']
]
},
{ spotName: '黄海渤海交界线', spotImage: '//yun.duiba.com.cn/spark/assets/371f3fd03f2d8aff5dda4e5e6b00f7a8d4e9516b.png',
spotDetail: [
'老铁山头入海深，黄海渤海自此分。西去急流如云涌，南来薄雾应风生”。此诗即表述老铁山的黄海和渤海自然分界的壮观景象。老铁山角位于辽东半岛的尖端，延伸至黄海和渤海之中，形成“泾渭分明”的自然分界。黄海水是深蓝色，而渤海水显得浑浊，略呈微黄色。是因为海底地沟形成的自然现象。',
['大连有轨电车', '大连有轨电车共有2条线路，为大连公交201路和大连公交202路。']
]
},
{ spotName: '旅顺白玉山', spotImage: '//yun.duiba.com.cn/spark/assets/8438621bb2f335c5579c50d296dcfd14ab1bb369.png',
spotDetail: [
'白玉山原名西官山。清光绪六年，李鸿章陪同的醇亲王视察旅顺口时说，既有黄金，当有白玉。从此西官山更名白玉山。白玉山在清代曾是军事设施重地。光绪九年，清政府在山之东北麓建筑了十六间房的军械总库。1995年被命名为大连市爱国主义教育基地。',
['噶实', '大连话中表示舍得的意思。']
]
},
{ spotName: '星海湾跨海大桥', spotImage: '//yun.duiba.com.cn/spark/assets/1c97f7ba32f6104d4b83666619bb4af6d429f78b.png',
spotDetail: [
'星海湾大桥西起甘井子区环涛路仁水街交叉口，上跨黄海，东至西岗区滨海西路上的金沙滩东侧。星海湾大桥是中国国内首座海上建造锚碇的大跨度双层悬索桥，现已成为星海湾一个新的旅游景点以及大连市新的地标式建筑。',
['道鸭子', '由一段普通话接线员与大连话司机之间的爆笑对话引发的网络流行语，原意为道牙。']
]
},
{ spotName: '老虎滩', spotImage: '//yun.duiba.com.cn/spark/assets/c690cfd3b6bc0b8b4237f729835b7542488d4568.png',
spotDetail: [
'大连属季风型大陆性气候，但具有海洋性特点。四季分明，气候温和；夏季温暖无酷暑，冬季虽冷但少严寒，春秋不冷不热、气温适中；空气湿润，降雨集中，季风明显，风力较大。2007年5月8日，大连老虎滩海洋公园经国家旅游局正式批准为国家5A级旅游景区。',
['血受', '血受是大连人最常日用语之一，表示特别过瘾，特别爽，特别好的意思。']
]
},
{ spotName: '棒棰岛', spotImage: '//yun.duiba.com.cn/spark/assets/9b3d337a7b3494ecb07905e1f688a21ae037edeb.png',
spotDetail: [
'棒棰岛名字的来历是因离岸500米远处的海面上有一小岛突兀而立，远远望去，极象农家捣衣服用的一根棒槌，故称棒棰岛。毛主席曾手书的“棒棰岛”，是现惟一见到的涉及大连的毛主席墨宝。',
['小棍宁', '大连话中小姑娘，小女孩的意思。']
]
},
{ spotName: '东港音乐喷泉', spotImage: '//yun.duiba.com.cn/spark/assets/f19b8f1bec68aeffeeb00f0f14837657816cbf72.png',
spotDetail: [
'海之梦音乐喷泉广场是东港商务区乃至大连市的标志性广场、全国第二大音乐喷泉广场。另外喷泉池春、夏、秋季作为喷泉，冬季将作为一个大型的溜冰场，为大连市民在冬季里提供一个大型娱乐、健身的冰雪世界，这种创意是首次在国内运用。',
['大连夏季达沃斯论坛', '2009夏季达沃斯年会在大连举行，会议中新思想、新观点层出不穷，是名副其实的思想盛宴。']
]
},
{ spotName: '劳动公园', spotImage: '//yun.duiba.com.cn/spark/assets/2b8f9010b0131ac2085ab4b04ff45b926a0706ec.png',
spotDetail: [
'劳动公园是大连市中心最大的公园。公园建于1898年，因当时大连很小，公园又位于大连的西郊，故称西公园。1926年，因市区逐渐向西扩展，该园已处于市中心，又易名为中央公园。解放后，政府发动群众义务劳动，对该公园进行整修，并在荷花池畔立了一个碑，上书“劳动创造世界”，所以改称劳动公园。',
['歹街', '位于大连市中山区北斗街40号，是一条网红美食街。']
]
},
{ spotName: '星海广场', spotImage: '//yun.duiba.com.cn/spark/assets/c644500ca610e23f110044222f6e42fffd89c653.png',
spotDetail: [
'星海广场位于中国辽宁省大连市沙河口区，是大连市西南部的露天广场。1993年7月16日，为纪念香港回归，星海湾改造工程启幕，大连市政府利用建筑垃圾进行填海造地工程，规划建设星海广场。也是大连市的标志建筑之一。',
['歹饭', '大连话中的歹饭就是吃饭的意思，一般家里人在吃饭的时候都会喊，歹饭啦，意思就是叫你吃饭了。']
]
},
{ spotName: '金石滩', spotImage: '//yun.duiba.com.cn/spark/assets/4a4554a82f74d2929909ff5bcfa096e19dd6d9c9.png',
spotDetail: [
'金石滩国家旅游度假区为大连市四个对外开放先导区之一，由东部半岛、西部半岛及两个半岛之间的开阔腹地和海水浴场组成。诞生于六亿年前震旦纪的岩石散落在绵延13华里的海岸线上，形态各异，巧夺天工，被世界地质学界称为"天然地质博物馆"、"神力雕塑公园"。',
['鲜溜儿', '大连话中表示鲜美、鲜香的意思。']
]
},
{ spotName: '关向英纪念馆', spotImage: '//yun.duiba.com.cn/spark/assets/0f870d1f8aafe1381ea91187c89509e75ed85ffc.png',
spotDetail: [
'关向应是我国老一辈无产阶级革命家，中国工农红军和八路军的高级指挥员，卓越的政治工作领导者。他曾担任团中央书记，中共中央军事委员会书记，红三军政委，红二方面军政委等。他为中国人民的解放事业呕心沥血，鞠躬尽瘁，建立了不朽的功勋。',
['大连国际马拉松', '大连国际马拉松赛从1987年第1届大连万人国际马拉松赛至今已连续成功举办了32届，是国内历史最悠久的马拉松赛事之一。']
]
},
{ spotName: '冰峪沟', spotImage: '//yun.duiba.com.cn/spark/assets/cbae44e9bbbb790e90c9ee4c31db48d72cec2cdf.png',
spotDetail: [
'冰峪沟山清水秀，峰回溪转，有“北国桂林”之誉。“冰峪”名称的来历，相传唐朝薛仁贵东征时，曾在这里安营扎寨。唐太宗李世民到此抚军，见这里确是“一夫当关，万夫莫开”之地，便赐名“兵御”，又称“冰峪”。目前为跑马场的丁香谷即是古战场的遗址，曾发现大批古代行军锅及铸造兵器。',
['连实德足球俱乐部', '大连实德足球俱乐部，起源于1983年11月成立的大连市足球队，1994年改组为职业化俱乐部，是中国顶级足球联赛传统豪门。']
]
}
]
\ No newline at end of file
project/src/components/pop/PopRegret/PopRegret.jsx 0 → 100644
View file @ 0bb08a9f
'use strict';
import React, { Component } from 'react';
import resList from '../../../resconfig/resList';
//import API from '../../api';
import './PopRegret.less';
class PopRegret extends Component {
constructor(props) {
super(props);
this.state = this.state || {
resList: resList,
text: this.props.data.text
};
}
render() {
const { resList, text } = this.state
return (
<div className="popregret">
<img className='comPop_close_btn' src={resList['95e51d5a-c54c-4e03-9aa6-bfec258bc7d4'].url} onClick={this.props.onClose} alt=""/>
<span className="popregret_describe"> REGRET POP </span>
<div onClick={this.props.onClose} className="popregret_iknow_btn" > OK </div>
</div>
);
}
}
export default PopRegret;
project/src/components/pop/PopRegret/PopRegret.less 0 → 100644
View file @ 0bb08a9f
.popregret {
width: 576px;
height: 599px;
opacity: 1;
left: calc(51% - (576px / 2));
top: calc(44% - (599px / 2));
position: absolute;
background-color: #62a1bf;
display: flex;
flex-direction: column;
.popregret_iknow_btn {
width: 360px;
height: 84px;
left: 154px;
border-radius: 16px;
background-color: rgb(230, 230, 230);
text-align: center;
line-height: 84px;
align-self: center;
margin-top: 440px;
color: #808080;
font-size: 32px;
font-weight: 900;
}
.popregret_describe {
width: 100%;
height: 64px;
line-height: 40px;
opacity: 1;
left: 0;
top: 180px;
position: absolute;
font-size: 40px;
text-align: center;
font-weight: 700;
color: #d8eef8;
}
}
project/src/components/pop/PopRotate/PopRotate.jsx 0 → 100644
View file @ 0bb08a9f
'use strict';
import React, { Component } from 'react';
import resList from '../../../resconfig/resList';
import { debounce } from '../../../utils/debounce.js'
import { getPxToken } from '../../../utils/spark_gettoken'
// Redux
import store from '../../../redux/store';
import * as actions from '../../../redux/action';
import './PopRotate.less';
import { Toast } from 'spark-design';
class PopRotate extends Component {
constructor(props) {
super(props);
this.state = this.state || {
resList: resList,
turnTableList: [],
dataReady: false
};
// 按钮ref
this.startBtn = React.createRef()
// 旋转ref
this.rotateRef = React.createRef()
}
// 旋转角度
rotateIndex = 0
// 旋转次数
rotateTimes = 0
// 旋转 FLAG
rotateFlag = true
// 旋转时间 ms
rotateBaseTime = 2300
componentDidMount() {}
// 旋转角度归零
rotateTurnZero () {
this.rotateReg('end')
}
// 计算旋转角度 并 计算
rotateReg (type, index) {
// 开始旋转
let rotateDeg, time
if (type == 'start') {
this.rotateTimes += 3
rotateDeg = (this.rotateTimes * 360) + index * 45 + 22.5
time = this.rotateBaseTime
}
// 结束旋转
else if (type == 'end') {
// console.log('end', (this.rotateTimes + 1) * 360)
rotateDeg = ++this.rotateTimes * 360
time = 500
}
if (this.rotateRef.current) {
this.rotateRef.current.style.transform = `rotate(${rotateDeg}deg)`
this.rotateRef.current.style.transition = `transform ease-out ${time}ms`
}
}
rotateFlag = false
startDraw = () => {
if (this.rotateFlag) return
this.rotateFlag = true
setTimeout(() => {
this.drawCallback({
success: true,
data: {
prizeId: 'thanks'
}
})
}, 300)
}
drawCallback = (res) => {
const { success, message, data } = res
if (success) {
if (data.prizeId == 'thanks') {
this.rotateIndex = 7
}
// 开始动画
setTimeout(() => {
this.rotateReg('start', this.rotateIndex, this.rotateBaseTime)
}, 300)
// 弹窗 结果弹窗
setTimeout(() => {
console.log(this.rotateIndex, data)
this.showRegret()
this.rotateFlag = false
this.rotateTurnZero()
}, this.rotateBaseTime + 600)
} else { Toast(message) }
}
// 未获奖弹窗
showRegret = () => {
store.dispatch(actions.showPop({type: 'PopRegret', data: {text: '未抽到签到卡碎片'}, cover: true, ctx: this}))
}
// 关闭当前转盘
rotateClose = () => {
if (this.rotateFlag) return
this.props.onClose()
}
render() {
const { resList, type, turnTableList } = this.state
return (
<div className={type === 'spot' ? 'pop_commontt pop_spottt' : 'pop_commontt'}>
<img className='comPop_close_btn poprotate_close' src={resList['95e51d5a-c54c-4e03-9aa6-bfec258bc7d4'].url} onClick={this.rotateClose} alt=""/>
<div className="poprotate_back" ></div>
{/* 旋转部分 */}
<div className="poprotate_rotate" >
<div className='poprotate_rotate-rotate' ref={this.rotateRef}>
<img className='poprotate_rotate-backboard' src={resList['866f0e7b-3bc8-4f9e-a571-758ef348dcef'].url} alt=""/>
<div className='poprotate_rotate-rewards'>
{
turnTableList.map((item, index) => {
return (
<div className={`poprotate_rotate-rewards_item poprotate_rotate-rewards_item_${index}`} key={`poprotate_rotate-rewards-item-${index}`}
style={{transform: `rotate(${-(index + 1) * 45 + 22.5}deg)`}}>
<span className='poprotate_rotate-rewards_item_name'>{item.name}</span>
<img className='poprotate_rotate-rewards_item_img' src={item.icon} mode='aspectFill' />
</div>
)
})
}
</div>
</div>
</div>
{/* 开始按钮 */}
<img ref={this.startBtn} onClick={ debounce(this.startDraw, 150) }
src={resList['dcea884e-1fa1-4546-baf9-5dbe7df1d9ae'].url}
className="poprotate_start"/>
</div>
);
}
}
export default PopRotate;
project/src/components/pop/PopRotate/PopRotate.less 0 → 100644
View file @ 0bb08a9f
.pop_commontt {
width: 630px;
height: 906px;
left: calc(50% - (630px / 2));
top: calc(44% - (906px / 2));
position: absolute;
.popcommontt_drawtimes {
width: 100%;
height: 32px;
line-height: 32px;
left: 0;
top: 884px;
position: absolute;
font-size: 24px;
text-align: center;
.popcommontt_drawtimes_span {
color: rgba(255, 255, 255, 1);
}
.popcommontt_drawtimes_y {
color: #ffe400;
font-weight: 500;
}
}
.popcommontt_subtitle {
width: 100%;
height: 36px;
line-height: 36px;
text-align: center;
left: 0;
top: 134px;
position: absolute;
font-size: 24px;
color: rgba(255, 255, 255, 1);
}
.popcommontt_subtitle_02 {
top: 168px;
}
.poprotate_back {
width: 630px;
height: 630px;
top: 222px;
position: absolute;
background-color: #62a1bf;
border-radius: 50%;
}
.poprotate_rotate {
width: 557px;
height: 557px;
left: 37px;
top: 258px;
position: absolute;
transform-origin: center center;
transform: translate3d(0, 0, 0);
}
.poprotate_start {
width: 169px;
height: 206px;
left: 231px;
top: 417px;
position: absolute;
filter: grayscale(1);
}
.popcommontt_tittleicon {
width: 456px;
height: 127px;
left: 85px;
position: absolute;
}
}
.pop_spottt {
width: 630px;
height: 742px;
left: calc(50% - (630px / 2));
top: calc(50% - (842px / 2));
.popspottt_tittleicon {
width: 455px;
height: 127px;
left: calc(50% - (455px / 2));
top: 20px;
position: absolute;
z-index: 1;
}
.poprotate_back {
top: 112px;
position: absolute;
}
.poprotate_rotate {
top: 148px;
}
.poprotate_start {
top: 292px;
}
}
.poprotate_close {
left: calc(50% - (102px / 2)) !important;
}
.poprotate_rotate-rotate {
width: 557px;
height: 557px;
left: 0;
top: 0;
position: absolute;
z-index: 10;
transform-origin: center center;
.poprotate_rotate-backboard {
width: 100%;
height: 100%;
img {
width: 100%;
height: 100%;
}
}
.poprotate_rotate-rewards {
width: 557px;
height: 557px;
left: 0;
top: 0;
position: absolute;
z-index: 2;
.poprotate_rotate-rewards_item {
// background-color: #f45125;
// border-radius: 50%;
// overflow: hidden;
// opacity: 0.5;
width: 130px;
height: 130px;
position: absolute;
transform-origin: center center;
padding-top: 5px;
.poprotate_rotate-rewards_item_name {
display: block;
width: 100%;
line-height: 32px;
font-size: 22px;
color: #f45125;
text-align: center;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
}
.poprotate_rotate-rewards_item_img {
display: block;
width: 106px;
height: 106px;
margin: 4px auto 0;
}
}
.poprotate_rotate-rewards_item_0{
left: 136px;
top: 20px;
}
.poprotate_rotate-rewards_item_1{
left: 20px;
top: 136px;
}
.poprotate_rotate-rewards_item_2{
left: 20px;
bottom: 136px;
}
.poprotate_rotate-rewards_item_3{
left: 136px;
bottom: 20px;
}
.poprotate_rotate-rewards_item_4{
right: 136px;
bottom: 20px;
}
.poprotate_rotate-rewards_item_5{
right: 20px;
bottom: 136px;
}
.poprotate_rotate-rewards_item_6{
right: 20px;
top: 136px;
}
.poprotate_rotate-rewards_item_7{
right: 136px;
top: 20px;
}
}
}
.poprotate_rotate-outside {
width: 648px;
height: 658px;
left: 51px;
top: 302px;
position: absolute;
}
project/src/components/pop/PopRule/PopRule.jsx 0 → 100644
View file @ 0bb08a9f
'use strict';
import React, { Component } from 'react';
import resList from '../../../resconfig/resList';
import './PopRule.less';
class PopRule extends Component {
constructor(props) {
super(props);
this.state = this.state || {
resList: resList,
ruler: this.props.data.ruler
}
}
render() {
const { resList, ruler } = this.state
return (
<div className="poprule">
<img className='comPop_close_btn' src={resList['95e51d5a-c54c-4e03-9aa6-bfec258bc7d4'].url} onClick={this.props.onClose} alt=""/>
<div className="poprule_title"> RULE POP </div>
<div className="poprule_content">
<div className='poprule_ruler_text' dangerouslySetInnerHTML={{__html: ruler}}></div>
</div>
</div>
);
}
}
export default PopRule;
project/src/components/pop/PopRule/PopRule.less 0 → 100644
View file @ 0bb08a9f
.poprule {
width: 611px;
height: 872px;
opacity: 1;
left: calc(51% - (611px / 2));
top: calc(44% - (872px / 2));
position: absolute;
background-color: #62a1bf;
display: flex;
flex-direction: column;
.poprule_bg {
width: 611px;
height: 872px;
opacity: 1;
position: absolute;
}
.poprule_content {
width: 90%;
height: 483px;
opacity: 1;
left: 5%;
top: 279px;
position: absolute;
overflow-y: scroll;
.poprule_ruler_text {
font-size: 28px;
color: #d8eef8;
line-height: 1.2em;
}
}
.poprule_title {
width: 100%;
height: 64px;
line-height: 40px;
opacity: 1;
left: 0;
top: 130px;
position: absolute;
font-size: 40px;
text-align: center;
font-weight: 700;
color: #d8eef8;
}
}
project/src/components/pop/PopShareMask/PopShareMask.jsx 0 → 100644
View file @ 0bb08a9f
'use strict';
import React, { Component } from 'react';
import resList from '../../../resconfig/resList';
import './PopShareMask.less';
class PopShareMask extends Component {
constructor(props) {
super(props);
this.state = this.state || { resList: resList };
}
render() {
return (
<div className="popsharemask" onClick={this.props.onClose}>
<img className="share_mask" src={this.state.resList['d1048489-c312-4ccb-ae39-fccb8dc21a89'].url} />
</div>
);
}
}
export default PopShareMask;
project/src/components/pop/PopShareMask/PopShareMask.less 0 → 100644
View file @ 0bb08a9f
.popsharemask {
top: 0px;
left: 0px;
width: 750px;
height: 1624px;
display: block;
position: absolute;
.share_mask {
width: 554px;
height: 288px;
opacity: 1;
left: 134px;
top: 82px;
position: absolute;
transform-origin: 0px 0px 0px;
}
}
project/src/components/pop/SvgaBackLight/SvgaBackLight.jsx 0 → 100644
View file @ 0bb08a9f
'use strict';
import React, { Component } from 'react';
const SVGA = require('svgaplayerweb')
import './SvgaBackLight.less';
class SvgaBackLight extends Component {
constructor(props) {
super(props);
this.state = this.state || {
style: this.props.style ? this.props.style : null
}
}
componentDidMount() {
this.backLightAnimationPlay()
}
backLightAnimation = null
// 播放花洒动画
backLightAnimationPlay() {
console.log('backLightAnimation_Play function run')
this.backLightAnimation = new SVGA.Player('.comPop_backLight_animation_box')
this.backLightAner = new SVGA.Parser('.comPop_backLight_animation_box')
this.backLightAner.load('//yun.duiba.com.cn/spark/assets/715c1d373e074fef64509996a7e101f896cd3f21.svga', (videoItem) => {
this.backLightAnimation.clearsAfterStop = false
this.backLightAnimation.loops = 1
this.backLightAnimation.setVideoItem(videoItem)
if (this.props.delay) {
setTimeout(() => {
this.backLightAnimation.startAnimation()
}, this.props.delay)
}
else this.backLightAnimation.startAnimation()
}, (e) => { console.log(e) })
}
render() {
const { style } = this.state
return (
<div className="comPop_backLight_animation_content" style={style}>
<div className="comPop_backLight_animation_box" clearsafterstop="true"></div>
</div>
);
}
}
export default SvgaBackLight;
project/src/components/pop/SvgaBackLight/SvgaBackLight.less 0 → 100644
View file @ 0bb08a9f
.comPop_backLight_animation_content {
width: 600px;
height: 400px;
position: absolute;
top: -90px;
left: calc((100% - 600px) / 2);
z-index: -1;
.comPop_backLight_animation_box {
width: 100%;
height: 100%;
}
}
\ No newline at end of file
project/src/components/pop/SvgaShine/SvgaShine.jsx 0 → 100644
View file @ 0bb08a9f
'use strict';
import React, { Component } from 'react';
const SVGA = require('svgaplayerweb')
import './SvgaShine.less';
class SvgaShine extends Component {
constructor(props) {
super(props);
this.state = this.state || {
show: this.props.show ? this.props.show : false
}
}
componentDidMount() {
this.shineAnimationPlay()
}
shineAnimation = null
shineAnimationPlay() {
console.log('shineAnimation_Play function run')
this.shineAnimation = new SVGA.Player('.comPop_shine_animation_box')
this.shineAner = new SVGA.Parser('.comPop_shine_animation_box')
this.shineAner.load('//yun.duiba.com.cn/spark/assets/a002ffff9d9bdfbb380f5d8eb06ea570db5aab43.svga', (videoItem) => {
// this.shineAnimation.clearsAfterStop = false
this.shineAnimation.loops = 1
this.shineAnimation.setVideoItem(videoItem)
this.shineAnimation.startAnimation()
}, (e) => { console.log(e) })
}
render() {
const { show } = this.state
return (
<div className="comPop_shine_animation_content" style={{display: show ? 'block' : 'none'}}>
<div className="comPop_shine_animation_box" clearsafterstop="true"></div>
</div>
);
}
}
export default SvgaShine;
project/src/components/pop/SvgaShine/SvgaShine.less 0 → 100644
View file @ 0bb08a9f
.comPop_shine_animation_content {
width: 750px;
height: 1624px;
position: absolute;
top: calc(50% - (1624px / 2));
left: calc(50% - (750px / 2));
z-index: -1;
.comPop_shine_animation_box {
width: 100%;
height: 100%;
}
}
\ No newline at end of file
project/src/pages/PageHome/PageHome.jsx 0 → 100644
View file @ 0bb08a9f
'use strict';
import React, { Component } from 'react';
import { Random } from 'mockjs';
import { AUConnect } from '../../redux/auConnect';
import { debounce } from '../../utils/debounce';
import './PageHome.less';
class PageHome extends Component {
constructor(props) {
super(props);
this.state = this.state || {
ruleData: `活动规则: ${Random.cparagraph(20, 40)}`
};
}
openDefault = () => {
this.props.showPop({
type: 'PopDefault',
fn: () => {
console.log('simple callback, param "fn" ')
}
})
}
openRule = () => {
this.props.showPop({
type: 'PopRule',
data: {
ruler: this.state.ruleData
}
})
}
openInput = () => {
this.props.showPop({
type: 'PopInput',
data: {},
ctx: this
})
}
parentConsoleFunction = (data) => {
console.log('input data is: ', data)
}
openRotate = () => {
this.props.showPop({
type: 'PopRotate',
ctx: this
})
}
openInfinite = () => {
this.props.showPop({
type: 'PopInfiniteA',
ctx: this
})
}
openColorful = () => {
this.props.showPop({type: 'PopLightCard', data: {sindex: 3, addSignDays: 18}, ctx: this})
}
render() {
return (
<div className="home">
<div className="home_title">pageHome</div>
<div className="home_button_group">
<div onClick={ debounce(this.openDefault, 300) } className="home_button">open pop default</div>
<div onClick={ debounce(this.openRule, 300) } className="home_button">open pop rule</div>
<div onClick={ debounce(this.openInput, 300) } className="home_button">open pop input</div>
<div onClick={ debounce(this.openRotate, 300) } className="home_button">open pop rotate</div>
<div onClick={ debounce(this.openInfinite, 300) } className="home_button">open pop infinite</div>
<div onClick={ debounce(this.openColorful, 300) } className="home_button">open pop colorful</div>
</div>
</div>
);
}
}
export default AUConnect(PageHome)
project/src/pages/PageHome/PageHome.less 0 → 100644
View file @ 0bb08a9f
.home {
top: 0px;
left: 0px;
width: 750px;
height: 1624px;
display: block;
position: absolute;
.home_title {
font-size: 48px;
text-decoration: underline;
color: #515151;
font-weight: 900;
width: 100%;
text-align: center;
line-height: 2em;
}
.home_button_group {
width: 100%;
height: 600px;
margin-top: 20px;
display: flex;
flex-direction: column;
justify-content: space-around;
padding-left: 30px;
box-sizing: border-box;
.home_button {
font-size: 28px;
background-color: gainsboro;
box-sizing: border-box;
border-radius: 8px;
height: 60px;
line-height: 60px;
width: 300px;
text-align: center;
border: 1px solid rgba(20, 20, 20, 0.25);
box-shadow: inset 2px 2px 10px rgba(255, 255, 255, .8);
overflow: hidden;
}
}
}
project/src/redux/action.js 0 → 100644
View file @ 0bb08a9f
import store from './store'
export const ActionType = {
SHOW_POP: 'SHOW_POP'
}
export function showPop(data) {
return {type: 'SHOW_POP', value: data}
}
project/src/redux/auConnect.js 0 → 100644
View file @ 0bb08a9f
import { connect } from 'react-redux'
import { bindActionCreators } from 'redux'
import * as actions from './action.js'
function mapStateToProps(state) {
return { popState: state.changePopStatus }
}
function mapDispatchToProps(dispatch, ownProps) {
return bindActionCreators({
showPop: actions.showPop
}, dispatch)
}
export const AUConnect = (com) => {
return connect( mapStateToProps, mapDispatchToProps )(com)
}
\ No newline at end of file
project/src/redux/reducer.js 0 → 100644
View file @ 0bb08a9f
import { combineReducers } from 'redux'
import { ActionType } from './action';
let stateInitPop = {
popArr: []
}
function changePopStatus (state = stateInitPop, action) {
switch (action.type) {
case ActionType.SHOW_POP:
// console.log('action: ',action)
if (action.value.type && state.popArr.length && action.value.cover) {
state.popArr.push({
showPop: action.value.type,
popData: action.value.data,
cover: action.value.cover,
fn: action.value.fn,
ctx: action.value.ctx
})
return {
...state
}
} else if (!action.value.type && !state.popArr.length) {
break
}
else if (action.value.type && !state.popArr.length) {
state.popArr = [{
showPop: action.value.type,
popData: action.value.data,
cover: action.value.cover,
fn: action.value.fn,
ctx: action.value.ctx
}]
return {
...state
}
}
else if (!action.value.type && state.popArr.length) {
state.popArr.splice(state.popArr.length - 1, 1)
return {
...state
}
} else {
state.popArr = [{
showPop: action.value.type,
popData: action.value.data,
cover: action.value.cover,
fn: action.value.fn,
ctx: action.value.ctx
}]
return {
...state
}
}
default:
return state
}
}
const reducer = combineReducers({
changePopStatus
})
export default reducer
\ No newline at end of file
project/src/redux/store.js 0 → 100644
View file @ 0bb08a9f
import { createStore } from 'redux'
import reducer from './reducer';
const store = createStore(reducer)
export default store
project/src/resconfig/res.js 0 → 100644
View file @ 0bb08a9f
/**
* 目前没有用到
* @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
project/src/resconfig/resList.js 0 → 100644
View file @ 0bb08a9f
This diff is collapsed.
project/src/utils/debounce.js 0 → 100644
View file @ 0bb08a9f
export 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)
}
}
}
export const wechatShare = (data) => {
wx.miniProgram.postMessage({
data: {
title: data.title, // 标题
desc: data.desc, // 描述
imgUrl: data.imgUrl, // 图片
link: data.link // 链接
}
})
// ViewCtrl.showWin(Enum.Com.Comshareguidewin)
}
\ No newline at end of file
project/src/utils/spark_createposter.js 0 → 100644
View file @ 0bb08a9f
/**
* 截图方法封装
*
*
* 使用方法： npm install --save html2canvas
*
*
* import { createrPoster } from '../../libs/spark_createposter';
async createPoster()
{
let url = await createPoster("rule",{
x:window.innerWidth/4,
y:window.innerHeight/4,
width:window.innerWidth/2,
height:window.innerHeight/2
});
this.setState({
img_src:url
})
}
调用：this.createPoster();
jsx:
const {img_src=""} = this.state;
{img_src && <img src={img_src} style={{ width: '50vw', height: '50vw', position: "absolute", left: 0, top: 0 }} />}
*
*
* 注意事项：html2canvas有各种兼容问题
* 1：html2canvas 使用 1.0.0-rc.5 版本， ios 设备上会没有任何显示。then函数不会被回调也不会报错。请降级强制使用 1.0.0-rc.4 版本。（注意package.json 内的 "^1.0.0-rc.4" ^ 符号要去掉）
* 2：所有 dom 内的图片不能跨域，否则会导致白屏等奇怪问题。即使加上useCORS 与 allowTaint也无法解决，浏览器控制台直接会打印CORS相关报错。
* 3：生成的图片清晰度受原始图片的质量与width、height、windowWidth、windowHeight、scale 影响，请根据实际情况来调节这几个参数。
* 4：如果生成的base64图片过大，会导致图片无法显示，请相应减小3中的几个参数值。
* 5：不可将图片转换为Blob的形式，设备虽然可以正常显示图片，但是无法进行长按保存，保存下来的图片可能为一个空白的图像。
* 6：在指定dom来生成图片时，会受offsetTop与offsetLeft影响。例如 offsetTop 为 20 时，生成的图片顶部 20px(不一定为 20px)的距离会被所设置的backgroundColor(默认白色)颜色填充。这时，可使用 x与y参数进行校正。
* 7：如果一直出现跨域的情况，或者图片一直不出现的情况，可考虑将图片资源转换成 base64。例如就遇到二维码图片链接某些设备上一直不出现，则可以考虑接口直接返回二维码内容，由前端根据返回的内容来创建二维码。
* 8：当还出现一些奇奇怪怪的问题时，可尝试切换html2canvas版本。
*/
import html2Canvas from 'html2canvas';
/**
*
* @param {*} domId dom的id名，不传默认是body
* @param {*} options 重写的截图配置，具体参考html2canvas官方示例:http://html2canvas.hertzen.com/configuration
* @param {*} imgType 图片类型，默认是jpg
*/
const createPoster=async (domId,options={},imgType="image/jpeg")=>{
let dom = domId?document.getElementById(domId):document.body;
let defaultOptions={
useCORS:true,
scale:devicePixelRatio||1,
width:window.innerWidth,
height:window.innerHeight,
windowWidth:window.innerWidth,
windowHeight:window.innerHeight
}
options={
...defaultOptions,
...options
}
let canvas = await html2Canvas(dom,options).catch(err=>{console.error("截图失败:",err)})
return canvas.toDataURL(imgType);
}
export default createPoster;
\ No newline at end of file
project/src/utils/spark_gettoken.js 0 → 100644
View file @ 0bb08a9f
/**
* 两种获取token封装（getPxToken和getDuibaToken）
*
*
*/
/**
* @param {} callback
*/
if (!document.getElementById("scriptkey")) {
const scriptkey = document.createElement('script')
scriptkey.async = 'async';
scriptkey.src = `getTokenKey`;
scriptkey.id = "scriptkey";
document.getElementsByTagName('head')[0].appendChild(scriptkey);
const scriptjs = document.createElement('script')
scriptjs.async = 'async';
scriptjs.id = "scriptjs";
scriptjs.src = `//yun.duiba.com.cn/js-libs/px-token/0.0.3/px-token.min.js`;
document.getElementsByTagName('head')[0].appendChild(scriptjs);
scriptjs.onload = () => {
}
}
const getPxToken = (callback) => {
// test - code
// callback('test - code')
// return
if (window.getPxToken) {
__getPxToken(callback);
return;
}
console.log("px-token.min.js尚未加载完成，请稍后再试")
// callback("waiting..."); //这里就不返回，不做处理
}
function __getPxToken(callback) {
if (window.getPxToken) {
window.getPxToken((e, token) => {
console.info('get px token:', e);
switch (e) {
case 'net error':
break;
case 'need reload':
break;
case 'need login':
break;
case 'state invalid':
break;
default:
callback(token);
}
})
}
}
/**
* @param {} resolve
* @param {} reject
* @param {} againOrderId
*/
const getDuibaToken=(resolve, reject,againOrderId)=>{
$.ajax({
url: '/ctoken/getToken',
type: 'post',
dataType: 'json',
success: function (res) {
if (res.success) {
var data = {
actId: CFG?.actId||"",
oaId: CFG?.oaId||""
};
eval(res.token);
var key = '';
data.token = window[key];
if (againOrderId) {
data.againOrderId = againOrderId;
}
resolve && resolve(data);
} else {
reject('systemError', { message: res.message });
}
},
error: function () {
reject('networkError');
}
});
}
module.exports={
getPxToken,
getDuibaToken
}
project/src/utils/spark_requstrolling.js 0 → 100644
View file @ 0bb08a9f
/**
* 接口轮询组件封装
*
* import startRolling from '../../libs/spark_requstrolling.js';
*
* async rollingTest() {
await startRolling(async() => {
return await API.getOrderStatusForThrough({});
}, 5, 1000, "data.lottery.id", 7489, (data) => {
console.log("success:", data);
}, (err) => {
console.log("error:", err);
});
}
调用：this.rollingTest();
*
*
*
* @param {*} fn API请求方法
* @param {*} count 轮询次数
* @param {*} delay 每次轮询的延迟时间（毫秒）
* @param {*} rollKey 断定轮询的条件 采用a.b.c.d结构，例如data.lottery.id
* @param {*} rollValue 断定轮询的值
* @param {*} resolve 成功回调
* @param {*} reject 失败回调
* @param {*} rollingIndex 起始次数，不用传，默认就好
*/
const startRolling = async (fn, count, delay, rollKey, rollValue, resolve, reject, rollingIndex = 1) => {
if (typeof fn !== "function") {
if(reject)reject()
return;
}
console.log("开始轮询，当前轮询次数",rollingIndex)
let result = await fn();
console.log(result);
if (result.success) {
rollingIndex = 1;
if (resolve) resolve(result);
} else {
if (rollKey) {
let rollKeyArr = rollKey.split(".");
let condition = result;
rollKeyArr.map(res => condition = condition[res])
if (condition == rollValue && rollingIndex < count) {
setTimeout(() => {
startRolling(fn, count, delay, rollKey, rollValue, resolve, reject, ++rollingIndex);
}, delay);
} else {
if (reject) reject(result);
}
} else {
if (reject) reject(result);
}
}
}
export default startRolling;
project/src/utils/spark_wxshare.js 0 → 100644
View file @ 0bb08a9f
/**
* 微信分享组件封装
*
* 使用方法：
* import wxShare from '../../libs/spark_wxshare'
* wxShare(options)
*
*
* options 参数(可选)
* appId: (必填) String, 公众号的唯一标识
* timestamp: (必填) String, 生成签名的时间戳
* nonceStr: (必填) String, 生成签名的时间戳
* signature: (必填) String, 签名
* jsApiList: (可选) Array, 调用接口列表，默认 ['onMenuShareTimeline', 'onMenuShareAppMessage', 'onMenuShareQQ']
* title: (可选) String, 分享标题，默认doucment.title
* desc: (可选) String, 分享描述，默认空
* shareUrl: (可选) String, 分享链接, 默认当前链接
* imgUrl: (可选) String, 分享图片，默认空
*
*/
const configBuilder = {
onMenuShareTimeline(config) {
return {
title: config.title,
desc: config.desc,
link: config.shareUrl,
imgUrl: config.imgUrl
}
},
onMenuShareAppMessage(config) {
return {
title: config.title,
desc: config.desc,
link: config.shareUrl,
imgUrl: config.imgUrl
}
},
onMenuShareQQ(config) {
return {
title: config.title,
desc: config.desc,
link: config.shareUrl,
imgUrl: config.imgUrl
}
}
}
export default function (config = {}) {
if (!/MicroMessenger/.test(window.navigator.userAgent)) {
return false
}
if(document.getElementById("jweixin"))
{
__handleReady(config);
return;
}
const script = document.createElement('script')
script.async = 'async';
script.id="jweixin";
script.src = `${document.location.protocol}//res.wx.qq.com/open/js/jweixin-1.2.0.js`
document.getElementsByTagName('head')[0].appendChild(script)
script.onload = () => {
__handleReady(config);
}
}
function __handleReady(config) {
if (typeof wx !== 'undefined') {
config.api = config.api || ['onMenuShareTimeline', 'onMenuShareAppMessage', 'onMenuShareQQ']
// 默认值
config.imgUrl = config.imgUrl || window.location.protocol + '//mmbiz.qpic.cn/mmbiz_png/UUn1BJoX4UlEbDXKVFqFsSLcmmagib3oQ31FewyWkLfIbpHgw0xYv02zKrgQJNPGytLpudpib45dWZbC0hnawu9Q/0?wx_fmt=png'
config.shareUrl = config.shareUrl || window.location.href
config.desc = config.desc || ''
config.title = config.title || document.title
wx.config({
// 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。
debug: config.debug || false,
// 必填,公众号的唯一标识
appId: config.appid || config.appId || '',
// 必填,生成签名的时间戳
timestamp: config.timestamp || '',
// 必填,生成签名的随机串
nonceStr: config.nonceStr || '',
// 必填,签名,见附录1
signature: config.signature || '',
// 必填,需要使用的JS接口列表
jsApiList: [].concat(config.api)
})
wx.ready(() => {
// wx.checkJsApi({
// jsApiList: config.api
// })
config.api.forEach(key => {
wx[key](configBuilder[key](config))
})
})
}
}
project/src/utils/tools.js 0 → 100644
View file @ 0bb08a9f
export function formatTime (time) {
time = parseInt(time)
if (!time) return null
const yy = new Date(time).getFullYear()
const mm = new Date(time).getMonth() + 1
const dd = new Date(time).getDate()
const t1 = `${yy}.${mm}.${dd}`
// console.log(new Date(time).toLocaleDateString())
// const t1 = new Date(time).toLocaleDateString() + ''//获取年月日
// let t2 = new Date(time).getHours() + ''//获取时
// let t3 = new Date(time).getMinutes() + ''//获取分
// const t4 = new Date(time).getMilliseconds() + ''//获取秒
// if (parseInt(t2) < 10) t2 = '0'+t2
// if (parseInt(t3) < 10) t3 = '0'+t3
// time = t1 + ' ' + t2 + ':' + t3
time = t1
// console.log('time', time, t1 + ' ' + t2 + ':' + t3)
return time
}
\ No newline at end of file
project/src/utils/viewCtrl.js 0 → 100644
View file @ 0bb08a9f
const ViewCtrl = {
/**Toast提示 */
showToast: (t = '标题', msg = ['操作成功'], duration = 3000, disappear = 500) => {
duration = isNaN(duration) ? 2000 : duration
disappear = isNaN(disappear) ? 500 : disappear
var m = document.createElement('div')
m.style.height = '108px'
m.style.borderRadius = '15px'
m.style.fontWeight = '300'
m.style.width = '70%'
m.style.background = '#000'
m.style.opacity = '0.8'
m.style.position = 'fixed'
m.style.top = '34%'
m.style.left = '15%'
m.style.zIndex = '9999'
m.style.paddingTop = '14px'
m.style.paddingBottom = '6px'
var title = document.createElement('div')
title.innerHTML = t
title.style.lineHeight = '44px'
title.style.fontSize = '20px'
title.style.fontWeight = '400'
title.style.textAlign = 'center'
title.style.color = '#fff'
title.style.width = '100%'
m.appendChild(title)
var detail01 = document.createElement('div')
var detail02 = document.createElement('div')
detail01.innerHTML = msg[0]
detail01.style.lineHeight = detail02.style.lineHeight = '24px'
detail01.style.fontSize = detail02.style.fontSize = '16px'
detail01.style.textAlign = detail02.style.textAlign = 'center'
detail01.style.color = detail02.style.color = '#fff'
detail01.style.width = detail02.style.width = '100%'
if (msg.length == 2) {
detail02.innerHTML = msg[1]
m.appendChild(detail01)
m.appendChild(detail02)
} else {
detail01.style.lineHeight = '48px'
m.appendChild(detail01)
}
document.body.appendChild(m)
setTimeout(function () {
var d = disappear / 1000
m.style.webkitTransition = 'opacity ' + d + 's ease-in'
m.style.opacity = '0'
setTimeout(function () {
document.body.removeChild(m)
}, disappear)
}, duration)
},
showToast01: () => {
ViewCtrl.showToast('签到卡碎片功能', ['集齐3张签到卡碎片可兑换1张', '签到卡，单独的碎片无法使用'])
},
showToast02: () => {
ViewCtrl.showToast('签到卡功能', ['使用此卡，可多签到一个小站点'])
}
}
export default ViewCtrl
\ No newline at end of file
project/src/utils/wxShare.js 0 → 100644
View file @ 0bb08a9f
export function wechatShareInit () {
initWx(window.location.href)
}
function invokeWX() {
let share = {
title: window.__shareTitle,
desc: window.__shareText,
url: location.href,
imgUrl: window.__shareImgUrl
}
console.log('shareUrl: ', share.url)
wx.onMenuShareTimeline({
title: share.title,
desc: share.desc,
link: location.href,
imgUrl: share.imgUrl,
success: function () {
console.log("suc")
},
cancel: function () {
console.log("cancel")
}
})
wx.onMenuShareAppMessage({
title: share.title,
desc: share.desc,
link: location.href,
imgUrl: share.imgUrl,
success: function () {
},
cancel: function () {
}
})
}
function initWx (url) {
$.ajax({
type: 'get',
url: '/wechatShare/getShareInfo/v2',
data: {
wxdebug: false,
url: url
},
cache: false,
dataType: 'json',
success: function (res) {
if (!res.success) {
console.log("失败")
return
}
wx.config({
debug: false,
appId: res.wxappid,
timestamp: res.wxtimestamp,
nonceStr: res.wxnonceStr,
signature: res.wxsignature,
jsApiList: [ 'checkJsApi', 'onMenuShareTimeline', 'onMenuShareAppMessage' ]
})
wx.error(function (res) {
console.error("wx error", res)
alear("失败")
})
wx.ready(function () {
invokeWX()
})
},
error: function (err) {
console.log('ajax wechat fail')
}
})
}
\ 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