Skip to content

K
kww_dayDayGetCredits_250512
Commit 891aeb28 authored by 徐士卿's avatar 徐士卿
Browse files
Options

modify

parent b8f155e0
Hide whitespace changes
Inline Side-by-side
Showing with 1134 additions and 71 deletions
mock/index.ts
View file @ 891aeb28
...@@ -23,6 +23,8 @@ export default [ ...@@ -23,6 +23,8 @@ export default [
"privacyTxt": "privacyTxtprivacyTxtprivacyTxtprivacyTxtprivacyTxtprivacyTxtprivacyTxtprivacyTxt", "privacyTxt": "privacyTxtprivacyTxtprivacyTxtprivacyTxtprivacyTxtprivacyTxtprivacyTxtprivacyTxt",
"prizeInfoAuthTxt": "prizeInfoAuthTxtprizeInfoAuthTxtprizeInfoAuthTxtprizeInfoAuthTxtprizeInfoAuthTxtprizeInfoAuthTxtprizeInfoAuthTxtprizeInfoAuthTxt", "prizeInfoAuthTxt": "prizeInfoAuthTxtprizeInfoAuthTxtprizeInfoAuthTxtprizeInfoAuthTxtprizeInfoAuthTxtprizeInfoAuthTxtprizeInfoAuthTxtprizeInfoAuthTxt",
"test_config_02": "111", "test_config_02": "111",
// 规则长图
"ruleImg":'//yun.duiba.com.cn/polaris/bg.18539c61e0103e01a339dd268558b2559ab178ba.png',
shareInfo: { shareInfo: {
"title": '守护权益对对碰', "title": '守护权益对对碰',
"desc": '2025年“3·15”金融消费者权益保护教育宣传活动', "desc": '2025年“3·15”金融消费者权益保护教育宣传活动',
...@@ -149,7 +151,7 @@ export default [ ...@@ -149,7 +151,7 @@ export default [
}, },
{ {
"extra": { "extra": {
"name": "优惠券-大转盘02", "name": "last",
"icon": "//yun.dui88.com/images/201907/tua0um9jjp.jpg", "icon": "//yun.dui88.com/images/201907/tua0um9jjp.jpg",
"refType": "coupon", "refType": "coupon",
"refId": "49354", "refId": "49354",
......
src/components/assist_fail/assist_fail.less
View file @ 891aeb28
...@@ -23,13 +23,13 @@ ...@@ -23,13 +23,13 @@
} }
.tip { .tip {
width: 580px; width: 580px;
height: 35px; height: 38px;
left: 86px; left: 86px;
top: 788px; top: 788px;
text-align: center; text-align: center;
position: absolute; position: absolute;
font-size: 36px; font-size: 36px;
line-height: 33px; line-height: 36px;
color: rgba(32, 16, 3, 1); color: rgba(32, 16, 3, 1);
.lineClamp1(); .lineClamp1();
} }
......
src/components/assist_succeed/assist_succeed.less
View file @ 891aeb28
...@@ -31,25 +31,25 @@ ...@@ -31,25 +31,25 @@
} }
.tip1 { .tip1 {
width: 580px; width: 580px;
height: 78px; height: 38px;
left: 86px; left: 86px;
top: 714px; top: 714px;
position: absolute; position: absolute;
text-align: center; text-align: center;
font-size: 36px; font-size: 36px;
line-height: 33px; line-height: 36px;
color: rgba(32, 16, 3, 1); color: rgba(32, 16, 3, 1);
.lineClamp1(); .lineClamp1();
} }
.tip2 { .tip2 {
width: 580px; width: 580px;
height: 78px; height: 38px;
left: 86px; left: 86px;
top: 764px; top: 764px;
position: absolute; position: absolute;
text-align: center; text-align: center;
font-size: 36px; font-size: 36px;
line-height: 33px; line-height: 36px;
color: rgba(32, 16, 3, 1); color: rgba(32, 16, 3, 1);
.lineClamp1(); .lineClamp1();
} }
......
src/components/choice_challenge/choice_challenge.jsx
View file @ 891aeb28
...@@ -18,9 +18,9 @@ class Choice_challenge extends React.Component { ...@@ -18,9 +18,9 @@ class Choice_challenge extends React.Component {
//todo //todo
} }
handleclose = () => { // handleclose = () => {
ModalCtrl.closeModal(); // ModalCtrl.closeModal();
} // }
render() { render() {
return ( return (
...@@ -37,7 +37,7 @@ class Choice_challenge extends React.Component { ...@@ -37,7 +37,7 @@ class Choice_challenge extends React.Component {
<span className="title"></span> <span className="title"></span>
<span className="tip"></span> <span className="tip"></span>
<Button className="challenge" onClick={this.handlechallenge} /> <Button className="challenge" onClick={this.handlechallenge} />
<Button className="close" onClick={this.handleclose} /> {/* <Button className="close" onClick={this.handleclose} /> */}
<span className="ditu"></span> <span className="ditu"></span>
</div> </div>
); );
......
src/components/choice_challenge/choice_challenge.less
View file @ 891aeb28
@import "../../res.less"; @import "../../res.less";
.choice_challenge { .choice_challenge {
width: 750px; width: 750px;
height: 1624px; height: 1624px;
left: 0px; left: 0px;
top: 0px; top: 0px;
position: absolute; position: absolute;
.bg { .bg {
width: 626px; width: 626px;
height: 788px; height: 788px;
...@@ -13,12 +15,14 @@ ...@@ -13,12 +15,14 @@
position: absolute; position: absolute;
.sparkBg("choice_challenge/bg.png"); .sparkBg("choice_challenge/bg.png");
} }
.sample { .sample {
width: 453px; width: 453px;
height: 245px; height: 245px;
left: 148px; left: 148px;
top: 503px; top: 503px;
position: absolute; position: absolute;
.s_bg2 { .s_bg2 {
width: 453px; width: 453px;
height: 114px; height: 114px;
...@@ -27,6 +31,7 @@ ...@@ -27,6 +31,7 @@
position: absolute; position: absolute;
.sparkBg("choice_challenge/s_bg2.png"); .sparkBg("choice_challenge/s_bg2.png");
} }
.s_bg { .s_bg {
width: 451px; width: 451px;
height: 112px; height: 112px;
...@@ -35,6 +40,7 @@ ...@@ -35,6 +40,7 @@
position: absolute; position: absolute;
.sparkBg("choice_challenge/s_bg.png"); .sparkBg("choice_challenge/s_bg.png");
} }
.icon { .icon {
width: 97px; width: 97px;
height: 92px; height: 92px;
...@@ -43,6 +49,7 @@ ...@@ -43,6 +49,7 @@
position: absolute; position: absolute;
.sparkBg("choice_challenge/icon.png"); .sparkBg("choice_challenge/icon.png");
} }
.demand { .demand {
width: 320px; width: 320px;
height: 28px; height: 28px;
...@@ -54,6 +61,7 @@ ...@@ -54,6 +61,7 @@
color: rgba(158, 158, 158, 1); color: rgba(158, 158, 158, 1);
.lineClamp1(); .lineClamp1();
} }
.name { .name {
width: 320px; width: 320px;
height: 36px; height: 36px;
...@@ -67,6 +75,7 @@ ...@@ -67,6 +75,7 @@
.lineClamp1(); .lineClamp1();
} }
} }
.zhanwei { .zhanwei {
width: 451px; width: 451px;
height: 233px; height: 233px;
...@@ -75,6 +84,7 @@ ...@@ -75,6 +84,7 @@
position: absolute; position: absolute;
.sparkBg("choice_challenge/zhanwei.png"); .sparkBg("choice_challenge/zhanwei.png");
} }
.title { .title {
width: 621px; width: 621px;
height: 103px; height: 103px;
...@@ -83,6 +93,7 @@ ...@@ -83,6 +93,7 @@
position: absolute; position: absolute;
.sparkBg("choice_challenge/title.png"); .sparkBg("choice_challenge/title.png");
} }
.tip { .tip {
width: 389px; width: 389px;
height: 40px; height: 40px;
...@@ -91,6 +102,7 @@ ...@@ -91,6 +102,7 @@
position: absolute; position: absolute;
.sparkBg("choice_challenge/tip.png"); .sparkBg("choice_challenge/tip.png");
} }
.challenge { .challenge {
width: 420px; width: 420px;
height: 123px; height: 123px;
...@@ -99,14 +111,15 @@ ...@@ -99,14 +111,15 @@
position: absolute; position: absolute;
.sparkBg("choice_challenge/challenge.png"); .sparkBg("choice_challenge/challenge.png");
} }
.close {
width: 79px; // .close {
height: 79px; // width: 79px;
left: 336px; // height: 79px;
top: 1201px; // left: 336px;
position: absolute; // top: 1201px;
.sparkBg("choice_challenge/close.png"); // position: absolute;
} // .sparkBg("choice_challenge/close.png");
// }
.ditu { .ditu {
width: 684px; width: 684px;
height: 150px; height: 150px;
...@@ -115,4 +128,4 @@ ...@@ -115,4 +128,4 @@
position: absolute; position: absolute;
.sparkBg("choice_challenge/ditu.png"); .sparkBg("choice_challenge/ditu.png");
} }
} }
\ No newline at end of file
src/components/consume_credits/consume_credits.jsx 0 → 100644
View file @ 891aeb28
"use strict";
import React from "react";
import { observer } from "mobx-react";
import "./consume_credits.less";
import { Button } from "@grace/ui";
import { PageCtrl } from "@/core/ctrls/PageCtrl";
import { ModalCtrl } from "@/core/ctrls/ModalCtrl";
@observer
class Consume_credits extends React.Component {
constructor(props) {
super(props);
}
handleclock = () => {
ModalCtrl.closeModal();
// todo 成功了弹 finish_task
};
handleclose = () => {
ModalCtrl.closeModal();
};
render() {
return (
<div className="consume_credits modal_center">
<span className="bg"></span>
<span className="tile"></span>
<span className="tip1">消耗10000积分</span>
<span className="tip2">完成打卡</span>
<Button className="close" onClick={this.handleclose} />
<Button className="clock" onClick={this.handleclock} />
<span className="icon"></span>
<span className="ditu"></span>
</div>
);
}
}
export default Consume_credits;
src/components/consume_credits/consume_credits.less 0 → 100644
View file @ 891aeb28
@import "../../res.less";
.consume_credits {
width: 750px;
height: 1624px;
left: 0px;
top: 0px;
position: absolute;
/* 定义字体 */
@font-face {
font-family: "zzgfyht";
src: url('/src/assets/font/zzgfyht.ttf') format('truetype');
// font-display: swap;
}
.bg {
width: 649px;
height: 741px;
left: 39px;
top: 408px;
position: absolute;
.sparkBg("consume_credits/bg.png");
}
.tile {
width: 365px;
height: 107px;
left: 160px;
top: 308px;
position: absolute;
.sparkBg("consume_credits/tile.png");
}
.tip1 {
width: 649px;
height: 50px;
left: 50px;
top: 491px;
text-align: center;
position: absolute;
font-size: 48px;
line-height: 48px;
font-family: "zzgfyht";
.lineClamp1();
background: linear-gradient(to right,
rgb(79, 12, 29),
rgba(132, 20, 57, 0.76));
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
}
.tip2 {
width: 649px;
height: 50px;
left: 39px;
top: 550px;
text-align: center;
position: absolute;
font-size: 48px;
line-height: 48px;
font-family: "zzgfyht";
.lineClamp1();
background: linear-gradient(to right,
rgb(79, 12, 29),
rgba(132, 20, 57, 0.76));
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
}
.close {
width: 79px;
height: 79px;
left: 336px;
// top: 1205px;
top: 1180px;
position: absolute;
.sparkBg("consume_credits/close.png");
}
.clock {
width: 420px;
height: 123px;
left: 164px;
top: 956px;
position: absolute;
.sparkBg("consume_credits/clock.png");
}
.icon {
width: 306px;
height: 202px;
left: 221px;
top: 628px;
position: absolute;
.sparkBg("consume_credits/icon.png");
}
.ditu {
width: 684px;
height: 150px;
left: 33px;
top: 1300px;
position: absolute;
.sparkBg("consume_credits/ditu.png");
}
}
\ No newline at end of file
src/components/consume_qg/consume_qg.jsx 0 → 100644
View file @ 891aeb28
"use strict";
import React from "react";
import { observer } from "mobx-react";
import "./consume_qg.less";
import { Button } from "@grace/ui";
import { PageCtrl } from "@/core/ctrls/PageCtrl";
import { ModalCtrl } from "@/core/ctrls/ModalCtrl";
@observer
class Consume_qg extends React.Component {
constructor(props) {
super(props);
}
handleclock = () => {
ModalCtrl.closeModal();
// todo 成功了弹 finish_task
};
handleclose = () => {
ModalCtrl.closeModal();
};
render() {
return (
<div className="consume_qg modal_center">
<span className="bg"></span>
<span className="tile"></span>
<span className="tip1">消耗100青果</span>
<span className="tip2">完成打卡</span>
<Button className="close" onClick={this.handleclose} />
<Button className="clock" onClick={this.handleclock} />
<span className="icon"></span>
<span className="ditu"></span>
</div>
);
}
}
export default Consume_qg;
src/components/consume_qg/consume_qg.less 0 → 100644
View file @ 891aeb28
@import "../../res.less";
.consume_qg {
width: 750px;
height: 1624px;
left: 0px;
top: 0px;
position: absolute;
/* 定义字体 */
@font-face {
font-family: "zzgfyht";
src: url('/src/assets/font/zzgfyht.ttf') format('truetype');
// font-display: swap;
}
.bg {
width: 649px;
height: 741px;
left: 39px;
top: 408px;
position: absolute;
.sparkBg("consume_qg/bg.png");
}
.tile {
width: 365px;
height: 107px;
left: 160px;
top: 308px;
position: absolute;
.sparkBg("consume_qg/tile.png");
}
.tip1 {
width: 649px;
height: 50px;
left: 50px;
top: 491px;
text-align: center;
position: absolute;
font-size: 48px;
line-height: 48px;
font-family: "zzgfyht";
.lineClamp1();
background: linear-gradient(to right,
rgb(79, 12, 29),
rgba(132, 20, 57, 0.76));
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
}
.tip2 {
width: 649px;
height: 50px;
left: 39px;
top: 550px;
text-align: center;
position: absolute;
font-size: 48px;
line-height: 48px;
font-family: "zzgfyht";
.lineClamp1();
background: linear-gradient(to right,
rgb(79, 12, 29),
rgba(132, 20, 57, 0.76));
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
}
.close {
width: 79px;
height: 79px;
left: 336px;
// top: 1205px;
top: 1180px;
position: absolute;
.sparkBg("consume_qg/close.png");
}
.clock {
width: 420px;
height: 123px;
left: 164px;
top: 956px;
position: absolute;
.sparkBg("consume_qg/clock.png");
}
.icon {
width: 306px;
height: 202px;
left: 221px;
top: 628px;
position: absolute;
.sparkBg("consume_qg/icon.png");
}
.ditu {
width: 684px;
height: 150px;
left: 33px;
top: 1300px;
position: absolute;
.sparkBg("consume_qg/ditu.png");
}
}
\ No newline at end of file
src/components/fail_challenge/fail_challenge.jsx 0 → 100644
View file @ 891aeb28
"use strict";
import React from "react";
import { observer } from "mobx-react";
import "./fail_challenge.less";
import { Button } from "@grace/ui";
import { PageCtrl } from "@/core/ctrls/PageCtrl";
import { ModalCtrl } from "@/core/ctrls/ModalCtrl";
@observer
class Fail_challenge extends React.Component {
constructor(props) {
super(props);
}
handleknow = () => {
ModalCtrl.closeModal();
};
render() {
return (
<div className="fail_challenge modal_center">
<span className="ditu"></span>
<span className="bg"></span>
<span className="title"></span>
<span className="tip1">打卡活动时间已结束</span>
<span className="tip2">打卡失败了！ 下次加油！</span>
<Button className="know" onClick={this.handleknow} />
<span className="ribbon"></span>
</div>
);
}
}
export default Fail_challenge;
src/components/fail_challenge/fail_challenge.less 0 → 100644
View file @ 891aeb28
@import "../../res.less";
.fail_challenge {
width: 750px;
height: 1624px;
left: 0px;
top: 0px;
position: absolute;
.ditu {
width: 684px;
height: 150px;
left: 33px;
top: 1300px;
position: absolute;
.sparkBg("fail_challenge/ditu.png");
}
.bg {
width: 580px;
height: 368px;
left: 86px;
top: 612px;
position: absolute;
.sparkBg("fail_challenge/bg.png");
}
.title {
width: 480px;
height: 61px;
left: 134px;
top: 661px;
position: absolute;
.sparkBg("fail_challenge/title.png");
}
.tip1 {
width: 580px;
height: 38px;
left: 86px;
top: 747px;
text-align: center;
position: absolute;
font-size: 36px;
line-height: 36px;
color: rgba(32, 16, 3, 1);
}
.tip2 {
width: 580px;
height: 38px;
left: 96px;
top: 794px;
text-align: center;
position: absolute;
font-size: 36px;
line-height: 36px;
color: rgba(32, 16, 3, 1);
}
.know {
width: 280px;
height: 69px;
left: 235px;
top: 858px;
position: absolute;
.sparkBg("fail_challenge/know.png");
}
.ribbon {
width: 674px;
height: 308px;
left: 36px;
top: 590px;
position: absolute;
.sparkBg("fail_challenge/ribbon.png");
}
}
\ No newline at end of file
src/components/finish_challenge/finish_challenge.jsx 0 → 100644
View file @ 891aeb28
'use strict';
import React from 'react';
import { observer } from 'mobx-react';
import './finish_challenge.less';
import { Button } from '@grace/ui';
import { PageCtrl } from '@/core/ctrls/PageCtrl';
import { ModalCtrl } from '@/core/ctrls/ModalCtrl';
@observer
class Finish_challenge extends React.Component {
constructor(props) {
super(props);
}
handleclose = () => {
ModalCtrl.closeModal();
}
handlehappy = () => {
ModalCtrl.closeModal();
}
render() {
return (
<div className="finish_challenge modal_center">
<span className="dongxiao"></span>
<span className="bg"></span>
<span className="title"></span>
<span className="tip">获得xxx奖励</span>
<Button className="close" onClick={this.handleclose} />
<Button className="happy" onClick={this.handlehappy} />
<span className="icon"></span>
<span className="ditu"></span>
</div>
);
}
}
export default Finish_challenge;
src/components/finish_challenge/finish_challenge.less 0 → 100644
View file @ 891aeb28
@import "../../res.less";
.finish_challenge {
width: 750px;
height: 1624px;
left: 0px;
top: 0px;
position: absolute;
/* 定义字体 */
@font-face {
font-family: "zzgfyht";
src: url('/src/assets/font/zzgfyht.ttf') format('truetype');
// font-display: swap;
}
.dongxiao {
width: 750px;
height: 1624px;
left: 0px;
top: 0px;
position: absolute;
.sparkBg("finish_challenge/dongxiao.png");
}
.bg {
width: 697px;
height: 792px;
left: 27px;
top: 376px;
position: absolute;
.sparkBg("finish_challenge/bg.png");
}
.title {
width: 580px;
height: 93px;
left: 59px;
top: 267px;
position: absolute;
.sparkBg("finish_challenge/title.png");
}
.tip {
width: 697px;
height: 40px;
left: 27px;
top: 450px;
text-align: center;
position: absolute;
font-size: 41px;
line-height: 40px;
font-family: "zzgfyht";
.lineClamp1();
background: linear-gradient(to right,
rgb(79, 12, 29),
rgba(132, 20, 57, 0.76));
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
}
.close {
width: 79px;
height: 79px;
left: 336px;
// top: 1224px;
top: 1180px;
position: absolute;
.sparkBg("finish_challenge/close.png");
}
.happy {
width: 420px;
height: 123px;
left: 164px;
top: 910px;
position: absolute;
.sparkBg("finish_challenge/happy.png");
}
.icon {
width: 272px;
height: 272px;
left: 238px;
top: 527px;
position: absolute;
.sparkBg("finish_challenge/icon.png");
}
.ditu {
width: 684px;
height: 150px;
left: 33px;
top: 1300px;
position: absolute;
.sparkBg("finish_challenge/ditu.png");
}
}
\ No newline at end of file
src/components/finish_task/finish_task.jsx 0 → 100644
View file @ 891aeb28
'use strict';
import React from 'react';
import { observer } from 'mobx-react';
import './finish_task.less';
import { PageCtrl } from '@/core/ctrls/PageCtrl';
import { ModalCtrl } from '@/core/ctrls/ModalCtrl';
import { Button } from '@grace/ui';
@observer
class Finish_task extends React.Component {
constructor(props) {
super(props);
}
handleknow = () => {
ModalCtrl.closeModal();
}
render() {
return (
<div className="finish_task modal_center">
<span className="dongxiao"></span>
<span className="bg"></span>
<span className="line"></span>
<span className="title">xxx任务完成</span>
<span className="tip1">打卡任务完成啦!</span>
<span className="tip2">继续保持哦！</span>
<Button className="know" onClick={this.handleknow} />
<span className="ribbon"></span>
<span className="ditu"></span>
</div>
);
}
}
export default Finish_task;
src/components/finish_task/finish_task.less 0 → 100644
View file @ 891aeb28
@import "../../res.less";
.finish_task {
width: 750px;
height: 1624px;
left: 0px;
top: 0px;
position: absolute;
/* 定义字体 */
@font-face {
font-family: "zzgfyht";
src: url('/src/assets/font/zzgfyht.ttf') format('truetype');
// font-display: swap;
}
.dongxiao {
width: 750px;
height: 1589px;
left: 0px;
top: 0px;
position: absolute;
.sparkBg("finish_task/dongxiao.png");
}
.bg {
width: 580px;
height: 368px;
left: 86px;
top: 623px;
position: absolute;
.sparkBg("finish_task/bg.png");
}
.line {
width: 327px;
height: 22px;
left: 209px;
top: 711px;
position: absolute;
.sparkBg("finish_task/line.png");
}
.title {
width: 580px;
height: 53px;
left: 86px;
top: 671px;
text-align: center;
position: absolute;
font-size: 53px;
line-height: 53px;
font-family: "zzgfyht";
background: linear-gradient(to right,
rgb(79, 12, 29),
rgba(132, 20, 57, 0.76));
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
}
.tip1 {
width: 580px;
height: 38px;
left: 86px;
top: 755px;
position: absolute;
text-align: center;
font-size: 36px;
line-height: 36px;
color: rgba(32, 16, 3, 1);
.lineClamp1();
}
.tip2 {
width: 580px;
height: 38px;
left: 86px;
top: 805px;
position: absolute;
text-align: center;
font-size: 36px;
line-height: 36px;
color: rgba(32, 16, 3, 1);
.lineClamp1();
}
.know {
width: 280px;
height: 69px;
left: 235px;
top: 869px;
position: absolute;
.sparkBg("finish_task/know.png");
}
.ribbon {
width: 682px;
height: 346px;
left: 18px;
top: 563px;
position: absolute;
.sparkBg("finish_task/ribbon.png");
}
.ditu {
width: 684px;
height: 150px;
left: 33px;
top: 1300px;
position: absolute;
.sparkBg("finish_task/ditu.png");
}
}
\ No newline at end of file
src/components/renewmodule/renewmodule.jsx 0 → 100644
View file @ 891aeb28
"use strict";
import React from "react";
import { observer } from "mobx-react";
import "./renewmodule.less";
import { Button } from "@grace/ui";
import { PageCtrl } from "@/core/ctrls/PageCtrl";
import { ModalCtrl } from "@/core/ctrls/ModalCtrl";
@observer
class Renewmodule extends React.Component {
constructor(props) {
super(props);
this.state = {
activeChoice: "credits", // 默认
};
}
handleClick = (choice) => {
this.setState({ activeChoice: choice });
};
handleUse = (activeChoice) => {
console.log(activeChoice);
if (activeChoice === "credits") {
ModalCtrl.closeModal();
// 执行积分续签逻辑 todo
} else {
ModalCtrl.closeModal();
// 执行青果续签逻辑 todo
}
};
render() {
const { activeChoice } = this.state;
// bg1、bg3 是红色背景 bg2、bg4是白色背景
return (
<div className="renewmodule modal_center">
<span className="bg"></span>
<span className="headline"></span>
<Button className="use" onClick={() => this.handleUse(activeChoice)} />
<div
className="choice_credits"
onClick={() => this.handleClick("credits")}
>
<span className={activeChoice === "credits" ? "bg1" : "bg2"}></span>
<span className="tip1">消耗积分续签</span>
<span className="credits">当前积分：999999999</span>
<span className="consume_credits">
消耗<span className="count1">20000</span>积分进行续签
</span>
</div>
<div className="choice_qg" onClick={() => this.handleClick("qg")}>
<span className={activeChoice === "qg" ? "bg3" : "bg4"}></span>
<span className="tip2">消耗青果续签</span>
<span className="qg">当前青果：999999999</span>
<span className="consume_qg">
消耗<span className="count2">1000</span>青果进行续签
</span>
</div>
<span className="title2">
4月20日 <span className="special">未打卡</span>
</span>
<span className="title1">已累计打卡x天</span>
</div>
);
}
}
export default Renewmodule;
src/components/renewmodule/renewmodule.less 0 → 100644
View file @ 891aeb28
@import "../../res.less";
.renewmodule {
width: 750px;
height: 1624px;
left: 0px;
top: 0px;
position: absolute;
.bg {
width: 750px;
height: 821px;
left: 0px;
top: 803px;
position: absolute;
.sparkBg("renewModule/bg.png");
}
.headline {
width: 351px;
height: 81px;
left: 79px;
top: 854px;
position: absolute;
.sparkBg("renewModule/headline.png");
}
.use {
width: 705px;
height: 137px;
left: 22px;
top: 1443px;
position: absolute;
.sparkBg("renewModule/use.png");
}
.choice_credits {
width: 688px;
height: 201px;
left: 34px;
top: 1060px;
position: absolute;
.bg1 {
width: 688px;
height: 201px;
left: 0px;
top: 0px;
position: absolute;
.sparkBg("renewModule/bg1.png");
}
.bg2 {
width: 688px;
height: 201px;
left: 0px;
top: 0px;
position: absolute;
.sparkBg("renewModule/bg2.png");
}
.tip1 {
width: 143px;
height: 23px;
left: 42px;
top: 30px;
position: absolute;
font-size: 23px;
line-height: 23px;
color: rgba(255, 255, 255, 1);
}
.credits {
width: 688px;
height: 26px;
// left: 229px;
top: 132px;
text-align: center;
position: absolute;
font-size: 23px;
line-height: 23px;
color: rgba(0, 0, 0, 1);
.lineClamp1();
}
.consume_credits {
width: 688px;
height: 40px;
// left: 126px;
top: 88px;
font-weight: bold;
text-align: center;
position: absolute;
font-size: 37px;
line-height: 37px;
color: rgba(0, 0, 0, 1);
.lineClamp1();
.count1 {
color: red;
}
}
}
.choice_qg {
width: 688px;
height: 201px;
left: 34px;
top: 1246px;
position: absolute;
.bg3 {
width: 688px;
height: 201px;
left: 0px;
top: 0px;
position: absolute;
.sparkBg("renewModule/bg1.png");
}
.bg4 {
width: 688px;
height: 201px;
left: 0px;
top: 0px;
position: absolute;
.sparkBg("renewModule/bg2.png");
}
.tip2 {
width: 143px;
height: 23px;
left: 42px;
top: 29px;
position: absolute;
font-size: 23px;
line-height: 23px;
color: rgba(255, 255, 255, 1);
}
.qg {
width: 688px;
height: 26px;
// left: 232px;
top: 131px;
text-align: center;
position: absolute;
font-size: 23px;
line-height: 23px;
color: rgba(0, 0, 0, 1);
.lineClamp1();
}
.consume_qg {
width: 688px;
height: 40px;
// left: 126px;
top: 87px;
font-weight: bold;
text-align: center;
position: absolute;
font-size: 37px;
line-height: 37px;
color: rgba(0, 0, 0, 1);
.lineClamp1();
.count2 {
color: red;
}
}
}
.title2 {
width: 750px;
height: 27px;
// left: 272px;
top: 1025px;
text-align: center;
position: absolute;
font-size: 27px;
line-height: 27px;
color: rgba(0, 0, 0, 1);
.special {
font-weight: bold;
}
}
.title1 {
width: 750px;
height: 53px;
// left: 192px;
top: 960px;
text-align: center;
position: absolute;
font-weight: bold;
font-size: 56px;
line-height: 53px;
color: rgba(0, 0, 0, 1);
}
}
\ No newline at end of file
src/pages/HomePage/Check/Check.less
View file @ 891aeb28
...@@ -232,7 +232,7 @@ ...@@ -232,7 +232,7 @@
} }
} }
.card { .calendar {
border-radius: 20px; border-radius: 20px;
background-color: rgb(255, 250, 234); background-color: rgb(255, 250, 234);
background-image: -moz-linear-gradient(90deg, rgb(255, 250, 234) 0%, rgb(255, 247, 221) 100%); background-image: -moz-linear-gradient(90deg, rgb(255, 250, 234) 0%, rgb(255, 247, 221) 100%);
......
src/pages/HomePage/Check/Check.tsx
View file @ 891aeb28
...@@ -95,14 +95,9 @@ class Check extends React.Component<any, any> { ...@@ -95,14 +95,9 @@ class Check extends React.Component<any, any> {
<div className="card">
</div>
<div className="calendar"> <div className="calendar">
</div> </div>
......
src/pages/MyPrize/MyPrize.less
View file @ 891aeb28
...@@ -14,47 +14,68 @@ ...@@ -14,47 +14,68 @@
top: 0; top: 0;
width: 750px; width: 750px;
height: 1624px; height: 1624px;
.webpBg("common/bg.jpg"); .webpBg("MyPrize/bg.png");
} }
.MyPrizeTitle { .MyPrizeTitle {
position: absolute; position: absolute;
left: 182px; left: 231px;
top: 208px; top: 98px;
width: 386px; width: 289px;
height: 127px; height: 70px;
.webpBg("MyPrize/我的奖品.png"); .webpBg("MyPrize/我的奖品.png");
} }
.MyPrizeBack { .MyPrizeBack {
position: absolute; position: absolute;
left: 0; left: 20px;
top: 208px; top: 110px;
width: 112px; width: 28px;
height: 60px; height: 43px;
.webpBg("common/返回.png"); .webpBg("MyPrize/返回.png");
transform-origin: center left !important; transform-origin: center left !important;
} }
.ditu {
width: 684px;
height: 150px;
left: 33px;
// top: 1450px;
bottom: 30px;
position: fixed;
.sparkBg("choice_challenge/ditu.png");
}
.prizeList { .prizeList {
position: absolute; position: fixed;
left: 57px; left: 38px;
top: 425px; top: 260px;
width: 631px; width: 675px;
height: calc(100% - 425px); // height: 1180px;
overflow: hidden auto; bottom: 200px;
overflow-y: auto;
overflow-x: hidden;
.prizeItem { .prizeItem {
position: relative; position: relative;
width: 631px; width: 675px;
height: 186px; height: 149px;
margin-bottom: 46px; margin-top: 20px;
.webpBg("MyPrize/itemBg.png"); .webpBg("MyPrize/itemBg.png");
.use {
position: absolute;
width: 141px;
height: 44px;
left: 520px;
top: 53px;
.webpBg("MyPrize/use.png");
}
.prizeImg { .prizeImg {
position: absolute; position: absolute;
left: 40px; left: 30px;
top: 40px; top: 20px;
width: 110px; width: 110px;
height: 110px; height: 110px;
border-width: 1px; border-width: 1px;
...@@ -65,14 +86,14 @@ ...@@ -65,14 +86,14 @@
} }
.prizeName { .prizeName {
font-size: 32px; font-size: 28px;
color: rgb(105, 40, 11); color: rgb(105, 40, 11);
text-align: left; text-align: left;
position: absolute; position: absolute;
left: 200px; left: 168px;
top: 50px; top: 40px;
width: 330px; width: 330px;
font-weight: bold; // font-weight: bold;
.lineClamp1(); .lineClamp1();
} }
...@@ -81,8 +102,9 @@ ...@@ -81,8 +102,9 @@
color: rgb(105, 40, 11); color: rgb(105, 40, 11);
text-align: left; text-align: left;
position: absolute; position: absolute;
left: 200px; left: 168px;
top: 110px; top: 82px;
color: rgb(158, 158, 158);
} }
} }
} }
...@@ -95,4 +117,4 @@ ...@@ -95,4 +117,4 @@
height: 326px; height: 326px;
.sparkBg("MyPrize/nothing.png") .sparkBg("MyPrize/nothing.png")
} }
} }
\ No newline at end of file
src/pages/MyPrize/MyPrize.tsx
View file @ 891aeb28
import React from 'react'; import React from 'react';
import {observer} from 'mobx-react'; import { observer } from 'mobx-react';
import './MyPrize.less'; import './MyPrize.less';
import {Button} from "@grace/ui"; import { Button } from "@grace/ui";
import {dateFormatter} from "@/utils/utils.ts"; import { dateFormatter } from "@/utils/utils.ts";
import API from "@/api"; import API from "@/api";
import { PageCtrl } from "@/core/ctrls/PageCtrl.tsx"; import { PageCtrl } from "@/core/ctrls/PageCtrl.tsx";
...@@ -18,7 +18,7 @@ class MyPrize extends React.Component<any, any> { ...@@ -18,7 +18,7 @@ class MyPrize extends React.Component<any, any> {
} }
async initList() { async initList() {
const {success, data} = await API.records({ const { success, data } = await API.records({
ignoreSp: true, ignoreSp: true,
}); });
if (!success) return; if (!success) return;
...@@ -28,7 +28,7 @@ class MyPrize extends React.Component<any, any> { ...@@ -28,7 +28,7 @@ class MyPrize extends React.Component<any, any> {
} }
clickBack = () => { clickBack = () => {
PageCtrl.backPage(); PageCtrl.backPage();
} }
clickItem = (item) => { clickItem = (item) => {
...@@ -41,24 +41,27 @@ class MyPrize extends React.Component<any, any> { ...@@ -41,24 +41,27 @@ class MyPrize extends React.Component<any, any> {
render() { render() {
const {list} = this.state; const { list } = this.state;
return <div className="MyPrize"> return <div className="MyPrize">
<div className="MyPrizeBg"/> <div className="MyPrizeBg" />
<div className="MyPrizeTitle"/> <div className="MyPrizeTitle" />
<div className="prizeList"> <div className="prizeList">
{ {
list.length > 0 ? list.map((item, index) => { list.length > 0 ? list.map((item, index) => {
return <Button className="prizeItem" key={index} onClick={this.clickItem.bind(this, item)}> return <div className="prizeItem" key={index}>
<img className="prizeImg" src={item.extra.icon}/> <img className="prizeImg" src={item.extra.icon} />
<div className="prizeName">{item.extra.name}</div> <div className="prizeName">{item.extra.name}</div>
<div className="getTime">{dateFormatter(item.gmtCreate, "yyyy.MM.dd hh:mm:ss")}</div> <div className="getTime">{dateFormatter(item.gmtCreate, "yyyy.MM.dd")}</div>
</Button> <Button className="use" onClick={this.clickItem.bind(this, item)} />
}) : <div className="nothing"/> </div>
} // }) : <div className="nothing"/>
}) : null
}
</div> </div>
<Button className="MyPrizeBack" onClick={this.clickBack}/> <Button className="MyPrizeBack" onClick={this.clickBack} />
<div className="ditu"></div>
</div>; </div>;
} }
......
src/pages/RulePage/RulePage.less 0 → 100644
View file @ 891aeb28
@import "../../res.less";
.rulepage {
width: 750px;
height: 100%;
left: 0px;
top: 0px;
position: absolute;
overflow-y: auto;
overflow-x: hidden;
.bg {
width: 750px;
height: 4882px;
left: 0px;
top: 0px;
position: absolute;
// .sparkBg("rulePage/bg.png");
}
.back {
width: 69px;
height: 68px;
left: 26px;
top: 46px;
position: absolute;
// .sparkBg("rulePage/back.png");
}
}
\ No newline at end of file
src/pages/RulePage/RulePage.tsx 0 → 100644
View file @ 891aeb28
import React from 'react';
import { observer } from 'mobx-react';
import './RulePage.less';
import API from "@/api";
import { PageCtrl } from "@/core/ctrls/PageCtrl.tsx";
import store from "@/store/store.ts";
import HomePage from '../HomePage/HomePage';
@observer
class RulePage extends React.Component<any, any> {
clickBack = () => {
PageCtrl.changePage(HomePage);
}
render() {
const { ruleImg } = store.frontVariable;
return <div className="rulepage">
<img className="bg"
src={ruleImg}
/>
<span className="back" onClick={this.clickBack}></span>
</div>;
}
}
export default RulePage;
\ No newline at end of file
src/store/store.ts
View file @ 891aeb28
...@@ -17,6 +17,7 @@ class Store { ...@@ -17,6 +17,7 @@ class Store {
shareInfo: IWxShareInfo, shareInfo: IWxShareInfo,
shopUrl?: string, shopUrl?: string,
scanUrl?: string, scanUrl?: string,
ruleImg?: string,
} = { } = {
privacyTxt: "", privacyTxt: "",
prizeInfoAuthTxt: "", prizeInfoAuthTxt: "",
......
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