Commit 6e9ac3d7 authored by wangzhujun's avatar wangzhujun

抽奖

parent a7df5383
......@@ -1052,56 +1052,67 @@ packages:
resolution: {integrity: sha512-ehSKrewwsESPt1TgSE/na9nIhWCosfGSFqv7vwEtjyAqZcvbGIg4JAcV7ZEh2tfj/IlfBeZjgOXm35iOOjadcg==}
cpu: [arm]
os: [linux]
libc: [glibc]
'@rollup/rollup-linux-arm-musleabihf@4.40.1':
resolution: {integrity: sha512-m39iO/aaurh5FVIu/F4/Zsl8xppd76S4qoID8E+dSRQvTyZTOI2gVk3T4oqzfq1PtcvOfAVlwLMK3KRQMaR8lg==}
cpu: [arm]
os: [linux]
libc: [musl]
'@rollup/rollup-linux-arm64-gnu@4.40.1':
resolution: {integrity: sha512-Y+GHnGaku4aVLSgrT0uWe2o2Rq8te9hi+MwqGF9r9ORgXhmHK5Q71N757u0F8yU1OIwUIFy6YiJtKjtyktk5hg==}
cpu: [arm64]
os: [linux]
libc: [glibc]
'@rollup/rollup-linux-arm64-musl@4.40.1':
resolution: {integrity: sha512-jEwjn3jCA+tQGswK3aEWcD09/7M5wGwc6+flhva7dsQNRZZTe30vkalgIzV4tjkopsTS9Jd7Y1Bsj6a4lzz8gQ==}
cpu: [arm64]
os: [linux]
libc: [musl]
'@rollup/rollup-linux-loongarch64-gnu@4.40.1':
resolution: {integrity: sha512-ySyWikVhNzv+BV/IDCsrraOAZ3UaC8SZB67FZlqVwXwnFhPihOso9rPOxzZbjp81suB1O2Topw+6Ug3JNegejQ==}
cpu: [loong64]
os: [linux]
libc: [glibc]
'@rollup/rollup-linux-powerpc64le-gnu@4.40.1':
resolution: {integrity: sha512-BvvA64QxZlh7WZWqDPPdt0GH4bznuL6uOO1pmgPnnv86rpUpc8ZxgZwcEgXvo02GRIZX1hQ0j0pAnhwkhwPqWg==}
cpu: [ppc64]
os: [linux]
libc: [glibc]
'@rollup/rollup-linux-riscv64-gnu@4.40.1':
resolution: {integrity: sha512-EQSP+8+1VuSulm9RKSMKitTav89fKbHymTf25n5+Yr6gAPZxYWpj3DzAsQqoaHAk9YX2lwEyAf9S4W8F4l3VBQ==}
cpu: [riscv64]
os: [linux]
libc: [glibc]
'@rollup/rollup-linux-riscv64-musl@4.40.1':
resolution: {integrity: sha512-n/vQ4xRZXKuIpqukkMXZt9RWdl+2zgGNx7Uda8NtmLJ06NL8jiHxUawbwC+hdSq1rrw/9CghCpEONor+l1e2gA==}
cpu: [riscv64]
os: [linux]
libc: [musl]
'@rollup/rollup-linux-s390x-gnu@4.40.1':
resolution: {integrity: sha512-h8d28xzYb98fMQKUz0w2fMc1XuGzLLjdyxVIbhbil4ELfk5/orZlSTpF/xdI9C8K0I8lCkq+1En2RJsawZekkg==}
cpu: [s390x]
os: [linux]
libc: [glibc]
'@rollup/rollup-linux-x64-gnu@4.40.1':
resolution: {integrity: sha512-XiK5z70PEFEFqcNj3/zRSz/qX4bp4QIraTy9QjwJAb/Z8GM7kVUsD0Uk8maIPeTyPCP03ChdI+VVmJriKYbRHQ==}
cpu: [x64]
os: [linux]
libc: [glibc]
'@rollup/rollup-linux-x64-musl@4.40.1':
resolution: {integrity: sha512-2BRORitq5rQ4Da9blVovzNCMaUlyKrzMSvkVR0D4qPuOy/+pMCrh1d7o01RATwVy+6Fa1WBw+da7QPeLWU/1mQ==}
cpu: [x64]
os: [linux]
libc: [musl]
'@rollup/rollup-win32-arm64-msvc@4.40.1':
resolution: {integrity: sha512-b2bcNm9Kbde03H+q+Jjw9tSfhYkzrDUf2d5MAd1bOJuVplXvFhWz7tRtWvD8/ORZi7qSCy0idW6tf2HgxSXQSg==}
......@@ -1159,24 +1170,28 @@ packages:
engines: {node: '>= 10'}
cpu: [arm64]
os: [linux]
libc: [glibc]
'@tailwindcss/oxide-linux-arm64-musl@4.0.6':
resolution: {integrity: sha512-IoArz1vfuTR4rALXMUXI/GWWfx2EaO4gFNtBNkDNOYhlTD4NVEwE45nbBoojYiTulajI4c2XH8UmVEVJTOJKxA==}
engines: {node: '>= 10'}
cpu: [arm64]
os: [linux]
libc: [musl]
'@tailwindcss/oxide-linux-x64-gnu@4.0.6':
resolution: {integrity: sha512-QtsUfLkEAeWAC3Owx9Kg+7JdzE+k9drPhwTAXbXugYB9RZUnEWWx5x3q/au6TvUYcL+n0RBqDEO2gucZRvRFgQ==}
engines: {node: '>= 10'}
cpu: [x64]
os: [linux]
libc: [glibc]
'@tailwindcss/oxide-linux-x64-musl@4.0.6':
resolution: {integrity: sha512-QthvJqIji2KlGNwLcK/PPYo7w1Wsi/8NK0wAtRGbv4eOPdZHkQ9KUk+oCoP20oPO7i2a6X1aBAFQEL7i08nNMA==}
engines: {node: '>= 10'}
cpu: [x64]
os: [linux]
libc: [musl]
'@tailwindcss/oxide-win32-arm64-msvc@4.0.6':
resolution: {integrity: sha512-+oka+dYX8jy9iP00DJ9Y100XsqvbqR5s0yfMZJuPR1H/lDVtDfsZiSix1UFBQ3X1HWxoEEl6iXNJHWd56TocVw==}
......@@ -1720,7 +1735,7 @@ packages:
engines: {node: '>=0.12'}
errno@0.1.8:
resolution: {integrity: sha512-dJ6oBr5SQ1VSd9qkk7ByRgb/1SH4JZjCHSW/mr63/QcXO9zLVxvJ6Oy13nio03rxpSnVDDjFor75SjVeZWPW/A==}
resolution: {integrity: sha1-i7Ppx9Rjvkl2/4iPdrSAnrwugR8=}
hasBin: true
es-define-property@1.0.1:
......@@ -1979,7 +1994,7 @@ packages:
engines: {node: '>= 4'}
image-size@0.5.5:
resolution: {integrity: sha512-6TDAlDPZxUFCv+fuOkIoXT/V/f3Qbq8e37p+YOiYrUv3v9cc3/6x78VdfPgFVaB9dZYeLUfKgHRebpkm/oP2VQ==}
resolution: {integrity: sha1-Cd/Uq50g4p6xw+gLiZA3jfnjy5w=}
engines: {node: '>=0.10.0'}
hasBin: true
......@@ -2134,24 +2149,28 @@ packages:
engines: {node: '>= 12.0.0'}
cpu: [arm64]
os: [linux]
libc: [glibc]
lightningcss-linux-arm64-musl@1.29.1:
resolution: {integrity: sha512-UKMFrG4rL/uHNgelBsDwJcBqVpzNJbzsKkbI3Ja5fg00sgQnHw/VrzUTEc4jhZ+AN2BvQYz/tkHu4vt1kLuJyw==}
engines: {node: '>= 12.0.0'}
cpu: [arm64]
os: [linux]
libc: [musl]
lightningcss-linux-x64-gnu@1.29.1:
resolution: {integrity: sha512-u1S+xdODy/eEtjADqirA774y3jLcm8RPtYztwReEXoZKdzgsHYPl0s5V52Tst+GKzqjebkULT86XMSxejzfISw==}
engines: {node: '>= 12.0.0'}
cpu: [x64]
os: [linux]
libc: [glibc]
lightningcss-linux-x64-musl@1.29.1:
resolution: {integrity: sha512-L0Tx0DtaNUTzXv0lbGCLB/c/qEADanHbu4QdcNOXLIe1i8i22rZRpbT3gpWYsCh9aSL9zFujY/WmEXIatWvXbw==}
engines: {node: '>= 12.0.0'}
cpu: [x64]
os: [linux]
libc: [musl]
lightningcss-win32-arm64-msvc@1.29.1:
resolution: {integrity: sha512-QoOVnkIEFfbW4xPi+dpdft/zAKmgLgsRHfJalEPYuJDOWf7cLQzYg0DEh8/sn737FaeMJxHZRc1oBreiwZCjog==}
......@@ -2214,7 +2233,7 @@ packages:
resolution: {integrity: sha512-sNPKHvyjVf7gyjwS4xGTaW/mCnF8wnjtifKBEhxfZ7E/S8tQ0rssrwGNn6q8JH/ohItJfSQp9mBtQYuTlH5QnA==}
make-dir@2.1.0:
resolution: {integrity: sha512-LS9X+dc8KLxXCb8dni79fLIIUA5VyZoyjSMCwTluaXA0o27cCK0bhXkpgw+sTXVpPy/lSO57ilRixqk0vDmtRA==}
resolution: {integrity: sha1-XwMQ4YuL6JjMBwCSlaMK5B6R5vU=}
engines: {node: '>=6'}
math-intrinsics@1.1.0:
......@@ -2251,7 +2270,7 @@ packages:
engines: {node: '>= 0.6'}
mime@1.6.0:
resolution: {integrity: sha512-x0Vn8spI+wuJ1O6S7gnbaQg8Pxh4NNHb7KSINmEWKiPE4RKOplvijn+NkmYmmRgP68mc70j2EbeTFRsrswaQeg==}
resolution: {integrity: sha1-Ms2eXGRVO9WNGaVor0Uqz/BJgbE=}
engines: {node: '>=4'}
hasBin: true
......@@ -2825,7 +2844,7 @@ packages:
resolution: {integrity: sha1-BP58f54e0tZiIzwoyys1ufY/bk8=}
source-map@0.6.1:
resolution: {integrity: sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==}
resolution: {integrity: sha1-dHIq8y6WFOnCh6jQu95IteLxomM=}
engines: {node: '>=0.10.0'}
spark-utils@1.1.10:
......
......@@ -3,18 +3,23 @@
import React from 'react';
import { observer } from 'mobx-react';
import './drawnoprizepop.less';
import { ModalCtrl } from '@/core/ctrls/ModalCtrl';
import { Button } from '@grace/ui';
@observer
class Drawnoprizepop extends React.Component {
constructor(props) {
super(props);
}
closePop = () => {
ModalCtrl.closeModal();
};
render() {
return (
<div className="drawnoprizepop modal_center">
<span className="bg"></span>
<span className="close"></span>
<span className="btn"></span>
<Button className="close" onClick={this.closePop}></Button>
<Button className="btn" onClick={this.closePop}></Button>
</div>
);
}
......
......@@ -21,6 +21,13 @@
position: absolute;
.sparkBg("drawPop/boxs.png");
}
.svga {
width: 412px;
height: 362px;
left: 177px;
top: 555px;
position: absolute;
}
.title {
width: 374px;
height: 181px;
......@@ -44,28 +51,33 @@
.sparkBg("drawPop/drawBg.png");
}
.drawnum {
width: 149px;
width: 383px;
height: 20px;
left: 122px;
left: 0px;
top: 67px;
text-align: center;
position: absolute;
font-size: 20px;
line-height: 20px;
color: rgba(240, 35, 96, 1);
color: #fffff9;
}
}
.prizelist {
width: 568px;
width: 625px;
height: 145px;
left: 91px;
left: 63px;
top: 1235px;
position: absolute;
text-align: center;
.prizeitem {
width: 115px;
height: 142px;
left: 0px;
top: 0px;
position: absolute;
position: relative;
display: inline-block;
margin-left: 40px;
margin-right: 40px;
.itembg {
width: 115px;
height: 115px;
......@@ -73,16 +85,27 @@
top: 0px;
position: absolute;
.sparkBg("drawPop/itembg.png");
img {
width: 109px;
height: 109px;
left: 3px;
top: 3px;
position: absolute;
object-fit: contain;
border-radius: 22px;
}
}
.itemname {
width: 92px;
width: 215px;
height: 20px;
left: 17px;
left: -50px;
top: 122px;
position: absolute;
text-align: center;
font-size: 20px;
line-height: 20px;
color: rgba(240, 35, 96, 1);
color: #fffff9;
.lineClamp1();
}
}
.prizeitem2 {
......@@ -103,3 +126,6 @@
.sparkBg("drawPop/back.png");
}
}
.btnBreath {
.breathAnimation();
}
\ No newline at end of file
......@@ -3,32 +3,102 @@
import React from 'react';
import { observer } from 'mobx-react';
import './drawpop.less';
import { ModalCtrl } from '@/core/ctrls/ModalCtrl';
import { Button } from '@grace/ui';
import API from '@/api';
import { _asyncThrottle } from '@/utils/utils';
import Drawnoprizepop from '../drawnoprizepop/drawnoprizepop';
import Drawprizepop from '../drawprizepop/drawprizepop';
import drawSvga from "../../../src/assets/svga/8输出抽奖.svga";
import { SvgaPlayer } from '@grace/svgaplayer';
// 定义 Drawpop 组件的 state 类型
type DrawpopState = {
remainDrawTimes: number;
prizeInfo: any[]; // 若 prizeInfo 有明确类型,可替换 any[]
showSvga: boolean;
};
@observer
class Drawpop extends React.Component {
constructor(props) {
class Drawpop extends React.Component<{}, DrawpopState> {
constructor(props: {}) {
super(props);
this.state = {
remainDrawTimes: 1,
prizeInfo: [
{
prizeName: "谢谢参与",
prizeImg: '//yun.duiba.com.cn/polaris/%E6%95%B0%E6%8D%AE%E5%86%B3%E7%AD%96%E5%B7%A5%E5%85%B7.531c2dae250ab379fd6216eb038e60bc12ab9dd6.png'
},
{
prizeName: "谢谢参与",
prizeImg: '//yun.duiba.com.cn/polaris/%E6%95%B0%E6%8D%AE%E5%86%B3%E7%AD%96%E5%B7%A5%E5%85%B7.531c2dae250ab379fd6216eb038e60bc12ab9dd6.png'
},
{
prizeName: "谢谢参与",
prizeImg: '//yun.duiba.com.cn/polaris/%E6%95%B0%E6%8D%AE%E5%86%B3%E7%AD%96%E5%B7%A5%E5%85%B7.531c2dae250ab379fd6216eb038e60bc12ab9dd6.png'
}
],
showSvga: false,
};
}
async componentDidMount() {
const { success, data } = await API.drawIndex();
if (success && data) {
// 假设 data 包含 remainDrawTimes 和 prizeInfo
this.setState({
remainDrawTimes: data.remainDrawTimes || 0,
prizeInfo: data.prizeInfo || [],
});
}
}
closePop = () => {
ModalCtrl.closeModal();
};
drawInfo;
drawPrize = _asyncThrottle(async () => {
const { success, data } = await API.doDraw();
if (success && data) {
this.drawInfo = data;
this.setState({
showSvga: true
})
}
})
render() {
return (
<div className="drawpop modal_center">
<span className="bg"></span>
<span className="boxs"></span>
{
this.state.showSvga && <SvgaPlayer className='svga' src={drawSvga} loop={1} onEnd={() => {
ModalCtrl.closeModal();
if (this.drawInfo.prizeType == "thanks") {
ModalCtrl.showModal(Drawnoprizepop)
} else {
ModalCtrl.showModal(Drawprizepop, { ...this.drawInfo })
}
}}></SvgaPlayer>
}
<span className="title"></span>
<div className="drawbtn">
<Button className={"drawbtn" + (this.state.remainDrawTimes > 0 ? " btnBreath" : "")} onClick={this.drawPrize}>
<span className="drawbg"></span>
<span className="drawnum">剩余次数:1</span>
</div>
<span className="drawnum">剩余次数:{this.state.remainDrawTimes}</span>
</Button>
<div className="prizelist">
<div className="prizeitem">
<span className="itembg"></span>
<span className="itemname">奖品名称</span>
</div>
<span className="prizeitem2"></span>
{
this.state.prizeInfo.map((item, index) => {
return <div className="prizeitem" key={"prizei" + index}>
<span className="itembg">
<img src={item.prizeImg}></img>
</span>
<span className="itemname">{item.prizeName}</span>
</div>
})
}
</div>
<span className="back"></span>
<Button className="back" onClick={this.closePop}></Button>
</div>
);
}
}
export default Drawpop;
export default Drawpop;
\ No newline at end of file
......@@ -38,28 +38,39 @@
.sparkBg("drawPrizePop/prizelight.png");
}
.prizieimg {
width: 163px;
width: 245px;
height: 245px;
left: 290px;
left: 249px;
top: 577px;
position: absolute;
.sparkBg("drawPrizePop/prizieimg.png");
// .sparkBg("drawPrizePop/prizieimg.png");
img {
width: 245px;
height: 245px;
left: 0px;
top: 0px;
position: absolute;
object-fit: contain
}
}
.prizename {
width: 147px;
height: 33px;
left: 309px;
width: 504px;
height: 38px;
left: 122px;
top: 837px;
text-align: center;
position: absolute;
font-size: 35px;
line-height: 33px;
line-height: 35px;
.lineClamp1();
color: rgba(255, 255, 255, 1);
}
.tips {
width: 340px;
width: 504px;
height: 23px;
left: 209px;
left: 122px;
top: 1009px;
text-align: center;
position: absolute;
opacity: 0.6;
font-size: 23px;
......
......@@ -3,22 +3,38 @@
import React from 'react';
import { observer } from 'mobx-react';
import './drawprizepop.less';
import { ModalCtrl } from '@/core/ctrls/ModalCtrl';
import { PageCtrl } from '@/core/ctrls/PageCtrl';
import Prizepage from '@/pages/prizepage/prizepage';
type DrawprizepopProps = {
prizieimg: string;
optionName: string;
}
@observer
class Drawprizepop extends React.Component {
class Drawprizepop extends React.Component<DrawprizepopProps> {
constructor(props) {
super(props);
}
goPrize = () => {
ModalCtrl.closeModal();
PageCtrl.changePage(Prizepage);
}
closePop = () => {
ModalCtrl.closeModal();
}
render() {
return (
<div className="drawprizepop modal_center">
<span className="bg"></span>
<span className="close"></span>
<span className="btn"></span>
<span className="prizelight"></span>
<span className="prizieimg"></span>
<span className="prizename">奖品名称</span>
<span className="prizieimg">
<img src={this.props.prizieimg}></img>
</span>
<span className="prizename">{this.props.optionName}</span>
<span className="tips">奖品可在首页 我的奖品 中查看</span>
<span className="close" onClick={this.closePop}></span>
<span className="btn" onClick={this.goPrize}></span>
</div>
);
}
......
......@@ -153,6 +153,13 @@
left: 140px;
top: 932px;
position: absolute;
.btnsvga {
width: 474px;
height: 134px;
left: 0px;
top: 0px;
position: absolute;
}
.mainimg {
width: 474px;
height: 134px;
......@@ -161,6 +168,14 @@
position: absolute;
.sparkBg("homePage/mainimg.png");
}
.mianimg {
width: 212px;
height: 48px;
left: 129px;
top: 28px;
position: absolute;
.sparkBg("homePage/main.png");
}
.mainnum {
width: 474px;
height: 24px;
......@@ -285,7 +300,7 @@
line-height: 29px;
color: rgba(255, 255, 255, 1);
font-weight: bold;
// .lineClamp1();
.lineClamp1();
}
.tasksub {
width: 260px;
......@@ -354,4 +369,12 @@
position: absolute;
.sparkBg("homePage/logo.png");
}
.homesvga {
width: 750px;
height: 815px;
left: 0px;
top: 174px;
pointer-events: none;
position: absolute;
}
}
......@@ -5,7 +5,9 @@ import { Button, Toast } from "@grace/ui";
import { _asyncThrottle, miniGoUrl } from "@/utils/utils.ts";
import store from "@/store/store.ts";
import { SvgaPlayer } from "@grace/svgaplayer";
import homeSvga from "@/assets/svga/1输出首页氛围.svga";
import homeSvga from "../../../src/assets/svga/2输出首页氛围.svga";
import btnSvga from "../../../src/assets/svga/3输出按钮.svga";
import taskSvga from "../../../src/assets/svga/1底框.svga";
import gameStore from "@/store/gameStore.ts";
import MusicBtn from "@/core/components/MusicBtn/MusicBtn.tsx";
import { ModalCtrl } from "@/core/ctrls/ModalCtrl.tsx";
......@@ -119,7 +121,8 @@ class HomePage extends React.Component<any, any> {
<span className="musicf"></span> */}
<MusicBtn className={`${musicStore.mute ? 'musicf' : 'musicon'}`}></MusicBtn>
<Button className="mainbtn" onClick={this.startGame}>
<span className="mainimg"></span>
<SvgaPlayer className='btnsvga' src={btnSvga}></SvgaPlayer>
<span className="mianimg"></span>
<span className="mainnum">剩余次数:{remainTimes || 0}</span>
</Button>
<Button className="shopbtn" onClick={this.clickShop}></Button>
......@@ -135,13 +138,14 @@ class HomePage extends React.Component<any, any> {
store.taskList?.map((item: any, index) => {
return (
<div className="taskitem" key={"task" + index}>
<span className="taskbg"></span>
{/* <span className="taskbg"></span> */}
<SvgaPlayer className='taskbg' src={taskSvga}></SvgaPlayer>
{
item.taskStatus == 2 ? <span className="taskfinishbtn"></span>
: item.taskStatus == 1 ? <span className="taskgetbtn" onClick={() => this.getTaskPrize(item)}></span>
: item.code == "invite" ? <span className="taskinvitebtn" onClick={() => this.doTask(item)}></span>
: item.code == "scan" ? <span className="taskscanbtn" onClick={() => this.doTask(item)}></span>
: <span className="taskgetbtn"></span>
: <span className="taskgetbtn">{item.taskStatus}</span>
}
<span className="tasktit">{item.title}({item.completedSize}/{item.intervalLimitSize})</span>
<span className="tasksub">{item.subTitle}</span>
......@@ -154,9 +158,8 @@ class HomePage extends React.Component<any, any> {
}
</div>
<span className="tasktitle"></span>
<span className="ip"></span>
<span className="leaves"></span>
<span className="logo"></span>
<SvgaPlayer className='homesvga' src={homeSvga}></SvgaPlayer>
</div>;
}
}
......
......@@ -75,7 +75,7 @@ class Store {
}
this.indexData = data;
this.indexData.timeStamp = timeStamp;
if (data.rankPopInfo) {
if (data.rankPopInfo.sendPrize) {
ModalCtrl.showModal(Rankprizepop, { ...data.rankPopInfo })
......@@ -95,12 +95,49 @@ class Store {
}
return true;
}
taskList: [];
async queryTask() {
const { success, data } = await API.queryTasks();
if (success) {
this.taskList = data.item;
taskList = [
{
desc: "11111",
title: "进入活动",
subTitle: "12313121",
id: "sign",
code: "sign",
icon: "//yun.duiba.com.cn/polaris/avatar.4279aa28d2b0d5a224eb5babbf5462c371079697.png",
intervalLimitSize: 1,
prizePendingCode: "sign",
completedSize: 0,
taskStatus: 1
},
{
desc: "11111",
title: "邀请助力",
subTitle: "12313121",
id: "invite",
code: "invite",
icon: "//yun.duiba.com.cn/polaris/avatar.4279aa28d2b0d5a224eb5babbf5462c371079697.png",
intervalLimitSize: 1,
prizePendingCode: "invite",
completedSize: 0,
taskStatus: 0
},
{
desc: "11111",
title: "扫码",
subTitle: "12313121",
id: "scan",
code: "scan",
icon: "//yun.duiba.com.cn/polaris/avatar.4279aa28d2b0d5a224eb5babbf5462c371079697.png",
intervalLimitSize: 1,
prizePendingCode: "scan",
completedSize: 0,
taskStatus: 0
}
];
async queryTask() {
// const { success, data } = await API.queryTasks();
// if (success) {
// this.taskList = data.item;
// }
}
}
......
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