Commit aa0771a8 authored by 李硕's avatar 李硕

动画

parent 1b837f3d
......@@ -14,7 +14,7 @@ export const index = {
"code": "",
"data": {
"newHandFlg": false,
"nicknameFlg": true,
"nicknameFlg":true,
"wishCountFlg": false
},
"message": "",
......@@ -76,7 +76,7 @@ export const wishIndex = {
* wishIds 愿望列表
*/
export const join = {
"code": "",
"code": "600020",
"data": {
"optionId": "",
"prizeId": "",
......@@ -85,7 +85,7 @@ export const join = {
"icon": "12312"
},
"message": "",
"success": true
"success": false
};
/**
* 许愿结果
......
......@@ -8,7 +8,8 @@
<script src="getTokenKey" id="scriptkey"></script>
<script id="scriptjs" src="//yun.duiba.com.cn/js-libs/px-token/0.0.4/px-token.min.js"></script>
<title>广州工行心愿清单</title>
<script>
<script src="//yun.duiba.com.cn/js-libs/rem/1.1.0/rem.min.js"></script>
<!-- <script>
!(function (e, i) {
var t = e.documentElement,
n = navigator.userAgent.match(/iphone|ipod|ipad/gi),
......@@ -37,7 +38,7 @@
};
s(), e.addEventListener && i.addEventListener(m, s, !1);
})(document, window);
</script>
</script> -->
<script src="//yun.duiba.com.cn/h5/lib/zepto.min.js"></script>
<script>
function getApp() {
......
......@@ -14,8 +14,8 @@ export class BaseRouter extends Component {
return (
<Router history={mHistory}>
<Switch>
<Route path="/" exact component={Pagemainscene} />
<Route path="/a" exact component={Pagewishscene} />
<Route path="/a" exact component={Pagemainscene} />
<Route path="/" exact component={Pagewishscene} />
<Route path="/b" exact component={Pageresultscene} />
</Switch>
</Router>
......
......@@ -15,6 +15,7 @@ class Comguidepanel extends Component {
<div className="guidepanel ">
<div className="guide ">
<img className="guidebg " src={this.state.resList['7a698ace-ce6e-4602-9a87-6535e80c087a'].url} />
<label className="guideLable">点击即可点亮心愿签哦</label>
<img className="guidebtn " onClick={onClose} src={this.state.resList['c60ec7de-fe4e-4c4d-9038-f249b078c456'].url} />
<img className="hand " src={this.state.resList['1d1f4740-ef77-4f46-a74b-d7fd786cb69f'].url} />
</div>
......
......@@ -21,6 +21,19 @@
transform-origin: 0px 0px 0px;
}
.guideLable {
width: 300px;
height: 50px;
opacity: 1;
left: 225px;
top: 480px;
position: absolute;
color: white;
font-size: 28px;
text-align: center;
transform-origin: 0px 0px 0px;
}
.guidebtn {
width: 286px;
height: 78px;
......@@ -40,17 +53,20 @@
position: absolute;
transform-origin: 0px 0px 0px;
animation: move 1s linear infinite;
}
@keyframes move {
0% {
transform: translate(60px,90px);
transform: translate(60px, 90px);
}
50% {
transform: translate(15px,40px);
transform: translate(15px, 40px);
}
100% {
transform: translate(60px,90px);
transform: translate(60px, 90px);
}
}
}
......
......@@ -2,7 +2,6 @@
import React, { Component } from 'react';
import resList from '../../resconfig/resList';
import './comloadingscene.less';
class Comloadingscene extends Component {
constructor(props) {
......@@ -25,7 +24,7 @@ class Comloadingscene extends Component {
// console.log('----');
} else {
console.log('加载完毕');
onClose();
// onClose();
}
});
}
......
......@@ -5,6 +5,7 @@
height: 1624px;
display: block;
position: absolute;
.load {
width: 750px;
height: 1624px;
......@@ -12,6 +13,7 @@
position: absolute;
transform-origin: 0px 0px 0px;
}
.loadings {
width: 543px;
height: 39px;
......@@ -20,6 +22,7 @@
top: 961px;
position: absolute;
transform-origin: 0px 0px 0px;
.loadingbg {
width: 543px;
height: 39px;
......@@ -27,16 +30,19 @@
position: absolute;
transform-origin: 0px 0px 0px;
}
.loading {
width: 390px;
width:528px;
height: 27px;
opacity: 1;
left: 6px;
top: 6px;
position: absolute;
transform-origin: 0px 0px 0px;
animation: loadMove 2s linear 1;
}
}
.loadingdesc {
width: 516px;
height: 110px;
......@@ -49,4 +55,19 @@
color: rgba(255, 255, 255, 1);
text-align: center;
}
}
@keyframes loadMove {
0% {
transform: scaleX(0);
}
50% {
transform: scaleX(0.5);
}
100% {
transform: scaleX(1);
}
}
}
\ No newline at end of file
......@@ -10,12 +10,14 @@ class Comregretpanel extends Component {
this.state = { resList: resList };
}
render() {
let { onClose } = this.props;
return (
<div className="regretpanel ">
<div className="regretmodal ">
<img className="regretShadow " />
<img className="regretbg " src={this.state.resList['8e48e42e-1f93-4f1c-bf11-a5acc6144054'].url} />
<img className="prizeknowbtn " src={this.state.resList['91235e12-0608-450c-82ce-2cb50f2e8806'].url} />
<img className="regretclose " src={this.state.resList['ad393b2f-4146-4f93-83f8-9c76a933daff'].url} />
<img className="prizeknowbtn " onClick={onClose} src={this.state.resList['91235e12-0608-450c-82ce-2cb50f2e8806'].url} />
<img className="regretclose " onClick={onClose} src={this.state.resList['ad393b2f-4146-4f93-83f8-9c76a933daff'].url} />
<span className="regretdesc ">奖品与你错过啦 明天再来~</span>
</div>
</div>
......
......@@ -21,6 +21,16 @@
position: absolute;
transform-origin: 0px 0px 0px;
}
.regretShadow {
width: 760px;
height: 1630px;
background-color: black;
opacity: 0.9;
top: -5px;
left: -5px;
position: fixed;
}
.prizeknowbtn {
width: 373px;
height: 102px;
......
'use strict';
import React, { Component } from 'react';
import { rule } from '../../../mock/common';
import resList from '../../resconfig/resList';
import './comrulepanel.less';
......
......@@ -32,7 +32,7 @@
top: 295px;
position: absolute;
transform-origin: 50% 50% 0px;
animation: openPrize 1s linear infinite;
animation: openPrize 0.4s linear 2;
}
.awardcontent {
......@@ -50,13 +50,13 @@
@keyframes openPrize {
0% {
transform: rotate(-30deg);
transform: rotate(-30deg) scale(1);
}
50% {
transform: rotate(30deg);
transform: rotate(30deg) scale(1.2);
}
100% {
transform: rotate(-30deg);
transform: rotate(-30deg) scale(1);
}
}
......
......@@ -6,12 +6,11 @@ export const MODAL_TYPE = {
"guide": 4,
"loading": 5,
"openPrize": 6,
"prizeResult": 7
"prizeResult": 7,
"regret": 8
}
export const JUMP_URL = {
AWARD_URL: CFG.recordUrl || "http://www.baidu.com",
AWARD_URL: CFG.recordUrl || "http://www.taobao.com",
}
export const MODAL_NAME = {
......@@ -21,7 +20,8 @@ export const MODAL_NAME = {
P_GUIDE: "guide",
P_LOADING: "loading",
P_PRIZE_OPEN: "openPrize",
P_PRIZE_RESULT: "prizeResult"
P_PRIZE_RESULT: "prizeResult",
P_PRIZE_REGRET: "regret"
}
export const USE_IMG_RES = {
......@@ -33,70 +33,70 @@ export const USE_IMG_RES = {
export function ERROR_MESSSAGE(errorCode) {
let message = "";
switch (errorCode) {
case 200000:
case "200000":
message = "活动时间未开始";
break;
case 200001:
case "200001":
message = "活动时间已结束";
break;
case 500000:
case "500000":
message = "请稍后再试";
break;
case 600001:
case "600001":
message = "昵称未填写";
break;
case 600002:
case "600002":
message = "昵称已填写过";
break;
case 600003:
case "600003":
message = "昵称不合法";
break;
case 600004:
case "600004":
message = "昵称存在敏感词";
break;
case 600009:
case "600009":
message = "今日已超许愿次数";
break;
case 600010:
case "600010":
message = "许愿提交参数有误";
break;
case 600011:
case "600011":
message = "愿望个数限制";
break;
case 600012:
case "600012":
message = "愿望id不合法";
break;
case 600013:
case "600013":
message = "愿望id重复";
break;
case 600014:
case "600014":
message = "匹配愿望类型错误";
break;
case 600015:
case "600015":
message = "获取愿望祝福语错误";
break;
case 600016:
case "600016":
message = "我的愿望不合法";
break;
case 600017:
case "600017":
message = "我的愿望有敏感词汇";
break;
case 600020:
message = "不在可完成任务时间内";
case "600020":
message = "抽奖失败,稍后再试";
break;
default:
message = "抽奖失败,稍后再试";
message = "网络故障,请重试";
break;
}
return message;
......
......@@ -81,6 +81,7 @@ class Pagemainscene extends Component {
<img className="bg12 " src={this.state.resList['0086550d-2ac4-4217-be82-bab2fb4587fe'].url} />
<div className="mainpage ">
<img className="mainbg " src={this.state.resList['264a6134-1735-43c6-87ae-4143bf11ffde'].url} />
<img className="bankLogo" src={this.state.resList['66e62244-e960-45ce-9ae6-09a3efab360d'].url} />
<img className="awardbtn " onClick={() => { this.jumpUrl(JUMP_URL.AWARD_URL); }} src={this.state.resList['03f842be-59cf-42e9-b845-71aec8da2ef7'].url} />
<img className="rulebtn " onClick={() => { this.modalControl(MODAL_NAME.P_RULE) }} src={this.state.resList['f38cd0ee-a25a-49d7-b526-105c4129edbe'].url} />
<img className="startbtn " onClick={() => { this.scenceJump() }} src={this.state.resList['fd891b60-f234-44f2-a6a8-0e759f5e4a77'].url} />
......
......@@ -6,6 +6,7 @@
display: block;
position: absolute;
overflow-x: hidden;
.bg12 {
width: 750px;
height: 1624px;
......@@ -13,6 +14,7 @@
position: absolute;
transform-origin: 0px 0px 0px;
}
.mainpage {
width: 1065px;
height: 1624px;
......@@ -20,6 +22,7 @@
left: 0px;
position: absolute;
transform-origin: 0px 0px 0px;
.mainbg {
width: 750px;
height: 1624px;
......@@ -29,6 +32,17 @@
top: 0px;
left: 0px;
}
.bankLogo {
width: 369px;
height: 32px;
opacity: 1;
left: 5px;
top: 130px;
position: absolute;
transform-origin: 0px 0px 0px;
}
.awardbtn {
width: 150px;
height: 53px;
......@@ -38,6 +52,7 @@
position: absolute;
transform-origin: 0px 0px 0px;
}
.rulebtn {
width: 150px;
height: 53px;
......@@ -47,6 +62,7 @@
position: absolute;
transform-origin: 0px 0px 0px;
}
.startbtn {
width: 408px;
height: 112px;
......@@ -57,4 +73,4 @@
transform-origin: 0px 0px 0px;
}
}
}
}
\ No newline at end of file
......@@ -99,25 +99,26 @@ class Pageresultscene extends Component {
}
}
async getRuleInfo() {
let { data, success, code } = await API.getRule();
async setRuleData() {
let { success, data, message, code } = await API.getRule();
console.log('data-----', data);
if (success) {
this.setState({ rule: data });
this.modalControl(MODAL_NAME.P_RULE)
}
else {
Toast(ERROR_MESSSAGE(code));
this.setState({
rule: data
})
} else {
Toast(ERROR_MESSSAGE(code))
}
}
render() {
let { modalType, resultList, resultObj, shareImg, rule } = this.state;
return (
<div className="resultscene ">
<img className="bg " src={this.state.resList['93ef9977-c6a5-4e96-ad2b-47b5b717dc19'].url} />
<img className="awardbtn2 " onClick={() => { this.jumpUrl(JUMP_URL); }} src={this.state.resList['df88f4c3-4e66-4936-84dc-654eb165ae93'].url} />
<img className="rulebtn2 " onClick={() => { this.getRuleInfo() }} src={this.state.resList['1b800919-334c-4223-a299-3946e453fc80'].url} />
<img className="rulebtn2 " onClick={() => { this.setRuleData() }} src={this.state.resList['1b800919-334c-4223-a299-3946e453fc80'].url} />
<img className="againbtn " onClick={() => { this.againWish() }} src={this.state.resList['442a4667-1ae0-43f7-b1f9-37a6cedf138f'].url} />
<img className="sharebtn " onClick={() => { Toast("快截图分享给好友吧!") }} src={this.state.resList['73f4c449-b3e1-4797-90ce-438b9ba415de'].url} />
<div className="wishresult ">
......
......@@ -12,12 +12,14 @@ import nicknameModal from '../../components/comnickpanel/comnickpanel.jsx';
import guideModal from '../../components/comguidepanel/comguidepanel.jsx';
import openPrize from '../../components/comshowprizepanel/comshowprizepanel.jsx';
import prizePanel from '../../components/comprizepanel/comprizepanel.jsx';
import prizeRegret from '../../components/comregretpanel/comregretpanel.jsx';
import { getPxToken } from '../../libs/spark_gettoken';
const NicknameModal = getModalHoc(nicknameModal);
const GuideModal = getModalHoc(guideModal);
const LoadingModal = getModalHoc(loading);
const OpenPrize = getModalHoc(openPrize);
const PrizePanel = getModalHoc(prizePanel);
const PrizeRegret = getModalHoc(prizeRegret);
class Pagewishscene extends Component {
constructor(props) {
super(props);
......@@ -54,61 +56,55 @@ class Pagewishscene extends Component {
loadingTime: 0,
indexData: {},
showGuide: "",
prizeData: {}
prizeData: {},
prizeResult: {}
};
}
componentDidMount() {
//动画调试
// this.modalControl(MODAL_NAME.P_GUIDE);
this.modalControl(MODAL_NAME.P_PRIZE_OPEN);
this.modalControl(MODAL_NAME.P_LOADING);
// this.modalControl(MODAL_NAME.P_PRIZE_OPEN);
// this.initPagesData();
// this.getWishTagsList();
}
/**
* 初始化该页数据
*/
async initPagesData() {
Loading.show();
let { data, success, message } = await API.getIndexInfo();
let { data, success, message, code } = await API.getIndexInfo();
console.log(data);
if (!success) {
//失败
Loading.hide();
Toast(ERROR_MESSSAGE(code));
} else {
//接口调用成功
Loading.hide();
this.setState({
indexData: data
})
console.log('data>>>>>>>>', data);
let { nicknameFlg, newHandFlg, wishCountFlg } = data;
console.log();
//是否达到许愿上限
if (wishCountFlg) {
Toast('每天可以许2次愿望,看看之前的许愿结果吧~')
setTimeout(() => {
mHistory.push({ pathname: '/b' });
},1000)
Loading.hide();
if (!nicknameFlg) {
//新手
this.modalControl(MODAL_NAME.P_NICK);
} else {
//是否填了昵称
if (!nicknameFlg) {
console.log('未填写昵称');
//是否为新手
//接口调用成功
this.setState({
indexData: data
})
console.log('data>>>>>>>>', data);
//是否达到许愿上限
if (wishCountFlg) {
Toast('每天可以许2次愿望,看看之前的许愿结果吧~')
setTimeout(() => {
mHistory.push({ pathname: '/b' });
}, 1000)
} else {
//是否填了昵称
if (newHandFlg) {
this.setState({
showGuide: MODAL_NAME.P_GUIDE
})
console.log('为新手');
//是否为新手
this.modalControl(MODAL_NAME.P_GUIDE);
} else {
this.setState({
showGuide: ""
})
this.modalControl();
this.getWishTagsList();
}
this.modalControl(MODAL_NAME.P_NICK);
} else {
this.modalControl();
}
}
}
......@@ -142,11 +138,9 @@ class Pagewishscene extends Component {
else {
Toast(ERROR_MESSSAGE(code));
}
//接口获取心愿信息
// let data = ["一字成语", "二字成语", "三字成语", "四字成语", "五字成语", "六字成语", "七字成语", "八字成语", "九字成语", "十字成语", "11字成语", "12字成语", "13字成语", "14字成语"];
// this.setWishTagsPosition(data, this.state.wishTagsPositionList); , "15字成语", "16字成语"
}
/**
* 点击当前的心愿tag
......@@ -173,7 +167,6 @@ class Pagewishscene extends Component {
}
}
}
onInputChangeValue() {
let { chooseList, wishName } = this.state;
if (chooseList.length < 5 || chooseList.includes(-1)) {
......@@ -213,18 +206,6 @@ class Pagewishscene extends Component {
})
}
// postWishsList() {
// console.log(")))))))))))))")
// let time = Date.now() + 2 * 1000;
// console.log('.....', Date.now(), time);
// this.setState({
// loadingTime: time
// })
// this.showResultScene()
// }
/**
* 展示加载
*/
......@@ -238,15 +219,27 @@ class Pagewishscene extends Component {
this.modalControl(MODAL_NAME.P_LOADING);
}
/**
* 加载完毕进行场景跳转
* 加载完毕播放开奖动画
*/
showOpenPrize() {
console.log('场景跳转---*********---');
// this.startOpenPrize();
this.modalControl(MODAL_NAME.P_PRIZE_OPEN);//动画播放
setTimeout(() => {
this.modalControl(MODAL_NAME.P_PRIZE_RESULT);//出奖弹窗
}, 2000)
let { success, data, code } = this.state.prizeResult;
if (success) {
this.setState({
prizeData: data
})
this.modalControl(MODAL_NAME.P_PRIZE_RESULT);//出奖弹窗
} else {
if (code == "600020") {
this.modalControl(MODAL_NAME.P_PRIZE_REGRET);
} else {
Toast(ERROR_MESSSAGE(code));
}
}
}, 1500)
}
/**
......@@ -258,32 +251,46 @@ class Pagewishscene extends Component {
let wishIds = chooseList.filter((item) => { return item != -1 }).join(',');
console.log('{{{{{{{{{', wishIds);
getPxToken(async token => {
let postObj = {};
let postObj = { token: "" };
postObj.token = token;
postObj.wishIds = wishIds;
if (chooseList.includes(-1) && wishName) {
postObj.userWishName = wishName;
}
console.log('/////////////', postObj);
let { success, data, code, message } = await API.getOpenPrize({ token: token, userWishName: "", wishIds: "" });
if (success) {
this.setState({
prizeData: data
})
this.showLoading();
} else {
Toast(ERROR_MESSSAGE(code));
}
let result = await API.getOpenPrize(postObj);
this.setState({
prizeResult: result
})
this.showLoading();
// if (success) {
// this.setState({
// prizeData: data
// })
// } else {
// if (code == "600020") {
// this.modalControl(MODAL_NAME.P_PRIZE_REGRET);
// } else {
// Toast(ERROR_MESSSAGE(code));
// }
// }
})
}
jumpResultScene() {
mHistory.push({ pathname: "/b" })
}
/**
* 关闭新手指导
*/
closeGuidePanel() {
this.modalControl();
this.getWishTagsList();
}
render() {
let { wishTagsList, clickNum, chooseList, wishName, modalType, loadingTime, showGuide, prizeData } = this.state;
console.log('showGuide====', showGuide);
// console.log('showGuide====', showGuide);
return (
<div className="wishscene ">
<div className="wishpage ">
......@@ -313,10 +320,11 @@ class Pagewishscene extends Component {
</div>
</div>
{modalType == MODAL_TYPE[MODAL_NAME.P_LOADING] && <LoadingModal time={loadingTime} onClose={() => { this.showOpenPrize() }}></LoadingModal>}
{modalType == MODAL_TYPE[MODAL_NAME.P_GUIDE] && <GuideModal time={loadingTime} onClose={() => { this.modalControl() }}></GuideModal>}
{modalType == MODAL_TYPE[MODAL_NAME.P_NICK] && <NicknameModal time={loadingTime} onClose={() => { this.modalControl(showGuide); console.log('{{{{{{{{{'); }}></NicknameModal>}
{modalType == MODAL_TYPE[MODAL_NAME.P_GUIDE] && <GuideModal time={loadingTime} onClose={() => { this.closeGuidePanel() }}></GuideModal>}
{modalType == MODAL_TYPE[MODAL_NAME.P_NICK] && <NicknameModal time={loadingTime} onClose={() => { this.modalControl(MODAL_NAME.P_GUIDE); console.log('{{{{{{{{{'); }}></NicknameModal>}
{modalType == MODAL_TYPE[MODAL_NAME.P_PRIZE_OPEN] && <OpenPrize></OpenPrize>}
{modalType == MODAL_TYPE[MODAL_NAME.P_PRIZE_RESULT] && <PrizePanel onClose={() => { this.modalControl(); this.jumpResultScene() }} data={prizeData}></PrizePanel>}
{modalType == MODAL_TYPE[MODAL_NAME.P_PRIZE_REGRET] && <PrizeRegret onClose={() => { this.modalControl(); this.jumpResultScene() }} data={prizeData}></PrizeRegret>}
</div>
);
}
......
......@@ -30,9 +30,10 @@
margin-left: -10.7vw;
margin-top: -7.5vw;
position: absolute;
transform-origin: 0px 0px 0px;
transform-origin: 50% 50% 0px;
// z-index:-1
pointer-events: none;
animation: clickTag 1s linear infinite;
}
.tagshadow {
......@@ -132,5 +133,24 @@
// background-image: "";
}
}
@keyframes clickTag {
0% {
transform: scale(1);
opacity: 0.9;
}
50% {
transform: scale(1.05);
opacity: 1;
}
100% {
opacity: 0.9;
transform: scale(1);
}
}
}
}
\ No newline at end of file
......@@ -112,7 +112,7 @@ const resList = {
name: 'guideBg',
ext: '.png',
uuid: '7a698ace-ce6e-4602-9a87-6535e80c087a',
url: '//yun.duiba.com.cn/spark/assets/12ae695e5b840908da4a21a1d57705e22786f3d7.png',
url: '//yun.duiba.com.cn/spark/assets/553ea0458c46ec8f2b62ecca639a45303d326456.png',
},
'c60ec7de-fe4e-4c4d-9038-f249b078c456': {
name: 'guideBtn',
......@@ -263,6 +263,12 @@ const resList = {
ext: '.png',
url: '//yun.duiba.com.cn/spark/assets/9e0fb73c8eb48d4c72f61561398a97e6aed38f32.png',
uuid: 'f19f3428-2f8b-4aa3-afab-db779b616020'
},
'66e62244-e960-45ce-9ae6-09a3efab360d': {
name: 'bankLogo',
ext: '.png',
url: '//yun.duiba.com.cn/spark/assets/ca59928d2182c92b3dedb3f19600df8ab3795bc4.png',
uuid: '66e62244-e960-45ce-9ae6-09a3efab360d'
}
};
export default resList;
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