Skip to content

L
LuzhouLaojiaoSnake_250428
Commit fc9e9d74 authored by wangzhujun's avatar wangzhujun
Browse files
Options

奖品领取链路

parent 937e90c1
Show whitespace changes
Inline Side-by-side
Showing with 1277 additions and 495 deletions
mock/home.ts
View file @ fc9e9d74
...@@ -3,7 +3,7 @@ import { AESDecrypt, AESEncrypt } from "./Crypto"; ...@@ -3,7 +3,7 @@ import { AESDecrypt, AESEncrypt } from "./Crypto";
export default [ export default [
{ {
url: '/tcs/index.do', url: '/tcs/index.do',
response: ({query}) => { response: ({ query }) => {
return { return {
"success": true, "success": true,
"code": "", "code": "",
...@@ -20,7 +20,7 @@ export default [ ...@@ -20,7 +20,7 @@ export default [
}, },
{ {
url: '/tcs/start.do', url: '/tcs/start.do',
response: ({query}) => { response: ({ query }) => {
return { return {
"success": true, "success": true,
"code": "", "code": "",
...@@ -35,7 +35,7 @@ export default [ ...@@ -35,7 +35,7 @@ export default [
}, },
{ {
url: '/tcs/submit.do', url: '/tcs/submit.do',
response: ({query}) => { response: ({ query }) => {
return { return {
success: true, success: true,
code: "", code: "",
...@@ -61,4 +61,237 @@ export default [ ...@@ -61,4 +61,237 @@ export default [
} }
}, },
}, },
{
url: "/gaw/address/getChildrenByParentCode",
response: ({ query }) => {
return {
"success": true,
"code": "0000000000",
"desc": "OK",
"timestamp": 1736580360076,
"data": [{
"name": "东华门街道",
"adCode": "110101001",
"level": 4
},
{
"name": "景山街道",
"adCode": "110101002",
"level": 4
},
{
"name": "交道口街道",
"adCode": "110101003",
"level": 4
},
{
"name": "安定门街道",
"adCode": "110101004",
"level": 4
},
{
"name": "北新桥街道",
"adCode": "110101005",
"level": 4
},
{
"name": "东四街道",
"adCode": "110101006",
"level": 4
},
{
"name": "朝阳门街道",
"adCode": "110101007",
"level": 4
},
{
"name": "建国门街道",
"adCode": "110101008",
"level": 4
},
{
"name": "东直门街道",
"adCode": "110101009",
"level": 4
},
{
"name": "和平里街道",
"adCode": "110101010",
"level": 4
},
{
"name": "前门街道",
"adCode": "110101011",
"level": 4
},
{
"name": "崇文门外街道",
"adCode": "110101012",
"level": 4
},
{
"name": "东花市街道",
"adCode": "110101013",
"level": 4
},
{
"name": "龙潭街道",
"adCode": "110101014",
"level": 4
},
{
"name": "体育馆路街道",
"adCode": "110101015",
"level": 4
},
{
"name": "天坛街道",
"adCode": "110101016",
"level": 4
},
{
"name": "永定门外街道",
"adCode": "110101017",
"level": 4
}
]
}
},
},
{
url: '/draw/myPrizeRecord.do',
response: ({ query }) => {
return {
"success": true,
"code": "",
"message": "",
"data": [
{
extra: {
name: "一等奖",
icon: 'https://yun.duiba.com.cn/polaris/shareImg.721503d9417b09af6346ae018493aec558ca31af.png',
},
needFillAddress: true,
prizeId: '',
boolThirdObject: true
},
{
extra: {
name: "一等奖",
icon: 'https://yun.duiba.com.cn/polaris/shareImg.721503d9417b09af6346ae018493aec558ca31af.png',
},
needFillAddress: true,
prizeId: '',
boolThirdObject: false
},
{
extra: {
name: "一等奖",
icon: 'https://yun.duiba.com.cn/polaris/shareImg.721503d9417b09af6346ae018493aec558ca31af.png',
},
needFillAddress: false,
prizeId: '',
boolThirdObject: true
},
{
extra: {
name: "一等奖",
icon: 'https://yun.duiba.com.cn/polaris/shareImg.721503d9417b09af6346ae018493aec558ca31af.png',
},
needFillAddress: true,
prizeId: ''
},
{
extra: {
name: "一等奖",
icon: 'https://yun.duiba.com.cn/polaris/shareImg.721503d9417b09af6346ae018493aec558ca31af.png',
},
needFillAddress: true,
prizeId: ''
},
{
extra: {
name: "一等奖",
icon: 'https://yun.duiba.com.cn/polaris/shareImg.721503d9417b09af6346ae018493aec558ca31af.png',
},
needFillAddress: true,
prizeId: ''
},
{
extra: {
name: "一等奖",
icon: 'https://yun.duiba.com.cn/polaris/shareImg.721503d9417b09af6346ae018493aec558ca31af.png',
},
needFillAddress: true,
prizeId: ''
},
{
extra: {
name: "一等奖",
icon: 'https://yun.duiba.com.cn/polaris/shareImg.721503d9417b09af6346ae018493aec558ca31af.png',
},
needFillAddress: true,
prizeId: ''
},
{
extra: {
name: "一等奖",
icon: 'https://yun.duiba.com.cn/polaris/shareImg.721503d9417b09af6346ae018493aec558ca31af.png',
},
needFillAddress: true,
prizeId: ''
},
{
extra: {
name: "一等奖",
icon: 'https://yun.duiba.com.cn/polaris/shareImg.721503d9417b09af6346ae018493aec558ca31af.png',
},
needFillAddress: true,
prizeId: ''
},
{
extra: {
name: "一等奖",
icon: 'https://yun.duiba.com.cn/polaris/shareImg.721503d9417b09af6346ae018493aec558ca31af.png',
},
needFillAddress: true,
prizeId: ''
},
{
extra: {
name: "一等奖",
icon: 'https://yun.duiba.com.cn/polaris/shareImg.721503d9417b09af6346ae018493aec558ca31af.png',
},
needFillAddress: true,
prizeId: ''
},
{
extra: {
name: "一等奖",
icon: 'https://yun.duiba.com.cn/polaris/shareImg.721503d9417b09af6346ae018493aec558ca31af.png',
},
needFillAddress: true,
prizeId: ''
},
{
extra: {
name: "一等奖",
icon: 'https://yun.duiba.com.cn/polaris/shareImg.721503d9417b09af6346ae018493aec558ca31af.png',
},
needFillAddress: true,
prizeId: ''
},
{
extra: {
name: "四等奖",
icon: 'https://yun.duiba.com.cn/polaris/shareImg.721503d9417b09af6346ae018493aec558ca31af.png',
},
needFillAddress: true,
prizeId: ''
}
]
}
}
}
] ]
package.json
View file @ fc9e9d74
...@@ -29,6 +29,7 @@ ...@@ -29,6 +29,7 @@
"emittery": "^1.1.0", "emittery": "^1.1.0",
"gsap": "^3.12.7", "gsap": "^3.12.7",
"howler": "^2.2.4", "howler": "^2.2.4",
"html2canvas": "^1.4.1",
"intersection-observer": "^0.12.2", "intersection-observer": "^0.12.2",
"less": "^4.3.0", "less": "^4.3.0",
"mobx": "^6.13.7", "mobx": "^6.13.7",
...@@ -43,6 +44,7 @@ ...@@ -43,6 +44,7 @@
"react": "^18.3.1", "react": "^18.3.1",
"react-dom": "^18.3.1", "react-dom": "^18.3.1",
"spark-utils": "^1.1.2", "spark-utils": "^1.1.2",
"swiper": "8.4.5",
"tailwindcss": "^4.1.4" "tailwindcss": "^4.1.4"
}, },
"devDependencies": { "devDependencies": {
......
pnpm-lock.yaml
View file @ fc9e9d74
...@@ -62,6 +62,9 @@ importers: ...@@ -62,6 +62,9 @@ importers:
howler: howler:
specifier: ^2.2.4 specifier: ^2.2.4
version: 2.2.4 version: 2.2.4
html2canvas:
specifier: ^1.4.1
version: 1.4.1
intersection-observer: intersection-observer:
specifier: ^0.12.2 specifier: ^0.12.2
version: 0.12.2 version: 0.12.2
...@@ -104,6 +107,9 @@ importers: ...@@ -104,6 +107,9 @@ importers:
spark-utils: spark-utils:
specifier: ^1.1.2 specifier: ^1.1.2
version: 1.1.10 version: 1.1.10
swiper:
specifier: 8.4.5
version: 8.4.5
tailwindcss: tailwindcss:
specifier: ^4.1.4 specifier: ^4.1.4
version: 4.1.4 version: 4.1.4
...@@ -1425,6 +1431,10 @@ packages: ...@@ -1425,6 +1431,10 @@ packages:
balanced-match@1.0.2: balanced-match@1.0.2:
resolution: {integrity: sha1-6D46fj8wCzTLnYf2FfoMvzV2kO4=} resolution: {integrity: sha1-6D46fj8wCzTLnYf2FfoMvzV2kO4=}
base64-arraybuffer@1.0.2:
resolution: {integrity: sha512-I3yl4r9QB5ZRY3XuJVEPfc2XhZO6YweFPI+UovAzn+8/hb3oJ6lnysaFcjVpkCPfVWFUDvoZ8kmVDP7WyRtYtQ==}
engines: {node: '>= 0.6.0'}
binary-extensions@2.3.0: binary-extensions@2.3.0:
resolution: {integrity: sha512-Ceh+7ox5qe7LJuLHoY0feh3pHuUDHAcRUeyL2VYghZwfpkNIy/+8Ocg0a3UuSoYzavmylwuLWQOf3hl0jjMMIw==} resolution: {integrity: sha512-Ceh+7ox5qe7LJuLHoY0feh3pHuUDHAcRUeyL2VYghZwfpkNIy/+8Ocg0a3UuSoYzavmylwuLWQOf3hl0jjMMIw==}
engines: {node: '>=8'} engines: {node: '>=8'}
...@@ -1576,6 +1586,9 @@ packages: ...@@ -1576,6 +1586,9 @@ packages:
peerDependencies: peerDependencies:
postcss: ^8.0.9 postcss: ^8.0.9
css-line-break@2.1.0:
resolution: {integrity: sha512-FHcKFCZcAha3LwfVBhCQbW2nCNbkZXn7KVUJcsT5/P8YmfsVja0FMPJr0B903j/E69HUphKiV9iQArX8SDYA4w==}
css-select@5.1.0: css-select@5.1.0:
resolution: {integrity: sha512-nwoRF1rvRRnnCqqY7updORDsuqKzqYJ28+oSMaJMMgOauh3fvwHqMS7EZpIPqK8GL+g9mKxF1vP/ZjSeNjEVHg==} resolution: {integrity: sha512-nwoRF1rvRRnnCqqY7updORDsuqKzqYJ28+oSMaJMMgOauh3fvwHqMS7EZpIPqK8GL+g9mKxF1vP/ZjSeNjEVHg==}
...@@ -1678,6 +1691,9 @@ packages: ...@@ -1678,6 +1691,9 @@ packages:
dom-serializer@2.0.0: dom-serializer@2.0.0:
resolution: {integrity: sha512-wIkAryiqt/nV5EQKqQpo3SToSOV9J0DnbJqwK7Wv/Trc92zIAYZ4FlMu+JPFW1DfGFt81ZTCGgDEabffXeLyJg==} resolution: {integrity: sha512-wIkAryiqt/nV5EQKqQpo3SToSOV9J0DnbJqwK7Wv/Trc92zIAYZ4FlMu+JPFW1DfGFt81ZTCGgDEabffXeLyJg==}
dom7@4.0.6:
resolution: {integrity: sha512-emjdpPLhpNubapLFdjNL9tP06Sr+GZkrIHEXLWvOGsytACUrkbeIdjO5g77m00BrHTznnlcNqgmn7pCN192TBA==}
domelementtype@2.3.0: domelementtype@2.3.0:
resolution: {integrity: sha512-OLETBj6w0OsagBwdXnPdN0cnMfF9opN69co+7ZrbfPGrdpPVNBUj02spi6B1N7wChLQiPn4CSH/zJvXw56gmHw==} resolution: {integrity: sha512-OLETBj6w0OsagBwdXnPdN0cnMfF9opN69co+7ZrbfPGrdpPVNBUj02spi6B1N7wChLQiPn4CSH/zJvXw56gmHw==}
...@@ -1982,6 +1998,10 @@ packages: ...@@ -1982,6 +1998,10 @@ packages:
howler@2.2.4: howler@2.2.4:
resolution: {integrity: sha512-iARIBPgcQrwtEr+tALF+rapJ8qSc+Set2GJQl7xT1MQzWaVkFebdJhR3alVlSiUf5U7nAANKuj3aWpwerocD5w==} resolution: {integrity: sha512-iARIBPgcQrwtEr+tALF+rapJ8qSc+Set2GJQl7xT1MQzWaVkFebdJhR3alVlSiUf5U7nAANKuj3aWpwerocD5w==}
html2canvas@1.4.1:
resolution: {integrity: sha512-fPU6BHNpsyIhr8yyMpTLLxAbkaK8ArIBcmZIRiBLiDhjeqvXolaEmDGmELFuX9I4xDcaKKcJl+TKZLqruBbmWA==}
engines: {node: '>=8.0.0'}
humanize-ms@1.2.1: humanize-ms@1.2.1:
resolution: {integrity: sha1-xG4xWaKT9riW2ikxbYtv6Lt5u+0=} resolution: {integrity: sha1-xG4xWaKT9riW2ikxbYtv6Lt5u+0=}
...@@ -2850,6 +2870,9 @@ packages: ...@@ -2850,6 +2870,9 @@ packages:
spark-utils@1.1.10: spark-utils@1.1.10:
resolution: {integrity: sha512-zhEvK5a0/ep27fHvVM+/se4ExZo/8sgVX2zJbFw+Rn7ZXuB1oz8DqMFFZcyvcrZWirUK2b6zrhHpWAkzMVf17A==} resolution: {integrity: sha512-zhEvK5a0/ep27fHvVM+/se4ExZo/8sgVX2zJbFw+Rn7ZXuB1oz8DqMFFZcyvcrZWirUK2b6zrhHpWAkzMVf17A==}
ssr-window@4.0.2:
resolution: {integrity: sha512-ISv/Ch+ig7SOtw7G2+qkwfVASzazUnvlDTwypdLoPoySv+6MqlOV10VwPSE6EWkGjhW50lUmghPmpYZXMu/+AQ==}
statuses@1.5.0: statuses@1.5.0:
resolution: {integrity: sha1-Fhx9rBd2Wf2YEfQ3cfqZOBR4Yow=} resolution: {integrity: sha1-Fhx9rBd2Wf2YEfQ3cfqZOBR4Yow=}
engines: {node: '>= 0.6'} engines: {node: '>= 0.6'}
...@@ -2898,6 +2921,10 @@ packages: ...@@ -2898,6 +2921,10 @@ packages:
engines: {node: '>=14.0.0'} engines: {node: '>=14.0.0'}
hasBin: true hasBin: true
swiper@8.4.5:
resolution: {integrity: sha512-zveyEFBBv4q1sVkbJHnuH4xCtarKieavJ4SxP0QEHvdpPLJRuD7j/Xg38IVVLbp7Db6qrPsLUePvxohYx39Agw==}
engines: {node: '>= 4.7.0'}
systemjs@6.15.1: systemjs@6.15.1:
resolution: {integrity: sha512-Nk8c4lXvMB98MtbmjX7JwJRgJOL8fluecYCfCeYBznwmpOs8Bf15hLM6z4z71EDAhQVrQrI+wt1aLWSXZq+hXA==} resolution: {integrity: sha512-Nk8c4lXvMB98MtbmjX7JwJRgJOL8fluecYCfCeYBznwmpOs8Bf15hLM6z4z71EDAhQVrQrI+wt1aLWSXZq+hXA==}
...@@ -2916,6 +2943,9 @@ packages: ...@@ -2916,6 +2943,9 @@ packages:
engines: {node: '>=10'} engines: {node: '>=10'}
hasBin: true hasBin: true
text-segmentation@1.0.3:
resolution: {integrity: sha512-iOiPUo/BGnZ6+54OsWxZidGCsdU8YbE4PSpdPinp7DeMtUJNJBoJ/ouUSTJjHkh1KntHaltHl/gDs2FC4i5+Nw==}
thenify-all@1.6.0: thenify-all@1.6.0:
resolution: {integrity: sha1-GhkY1ALY/D+Y+/I02wvMjMEOlyY=} resolution: {integrity: sha1-GhkY1ALY/D+Y+/I02wvMjMEOlyY=}
engines: {node: '>=0.8'} engines: {node: '>=0.8'}
...@@ -3029,6 +3059,9 @@ packages: ...@@ -3029,6 +3059,9 @@ packages:
resolution: {integrity: sha1-n5VxD1CiZ5R7LMwSR0HBAoQn5xM=} resolution: {integrity: sha1-n5VxD1CiZ5R7LMwSR0HBAoQn5xM=}
engines: {node: '>= 0.4.0'} engines: {node: '>= 0.4.0'}
utrie@1.0.2:
resolution: {integrity: sha512-1MLa5ouZiOmQzUbjbu9VmjLzn1QLXBhwpUa7kdLUQK+KQ5KA9I1vk5U4YHe/X2Ch7PYnJfWuWT+VbuxbGwljhw==}
vite-plugin-mock@3.0.2: vite-plugin-mock@3.0.2:
resolution: {integrity: sha512-bD//HvkTygGmk+LsIAdf0jGNlCv4iWv0kZlH9UEgWT6QYoUwfjQAE4SKxHRw2tfLgVhbPQVv/+X3YlNWvueGUA==} resolution: {integrity: sha512-bD//HvkTygGmk+LsIAdf0jGNlCv4iWv0kZlH9UEgWT6QYoUwfjQAE4SKxHRw2tfLgVhbPQVv/+X3YlNWvueGUA==}
engines: {node: '>=16.0.0'} engines: {node: '>=16.0.0'}
...@@ -4441,6 +4474,8 @@ snapshots: ...@@ -4441,6 +4474,8 @@ snapshots:
balanced-match@1.0.2: {} balanced-match@1.0.2: {}
base64-arraybuffer@1.0.2: {}
binary-extensions@2.3.0: {} binary-extensions@2.3.0: {}
boolbase@1.0.0: {} boolbase@1.0.0: {}
...@@ -4590,6 +4625,10 @@ snapshots: ...@@ -4590,6 +4625,10 @@ snapshots:
dependencies: dependencies:
postcss: 8.5.3 postcss: 8.5.3
css-line-break@2.1.0:
dependencies:
utrie: 1.0.2
css-select@5.1.0: css-select@5.1.0:
dependencies: dependencies:
boolbase: 1.0.0 boolbase: 1.0.0
...@@ -4702,6 +4741,10 @@ snapshots: ...@@ -4702,6 +4741,10 @@ snapshots:
domhandler: 5.0.3 domhandler: 5.0.3
entities: 4.5.0 entities: 4.5.0
dom7@4.0.6:
dependencies:
ssr-window: 4.0.2
domelementtype@2.3.0: {} domelementtype@2.3.0: {}
domhandler@5.0.3: domhandler@5.0.3:
...@@ -5031,6 +5074,11 @@ snapshots: ...@@ -5031,6 +5074,11 @@ snapshots:
howler@2.2.4: {} howler@2.2.4: {}
html2canvas@1.4.1:
dependencies:
css-line-break: 2.1.0
text-segmentation: 1.0.3
humanize-ms@1.2.1: humanize-ms@1.2.1:
dependencies: dependencies:
ms: 2.1.3 ms: 2.1.3
...@@ -5820,6 +5868,8 @@ snapshots: ...@@ -5820,6 +5868,8 @@ snapshots:
transitivePeerDependencies: transitivePeerDependencies:
- debug - debug
ssr-window@4.0.2: {}
statuses@1.5.0: {} statuses@1.5.0: {}
stream-http@2.8.2: stream-http@2.8.2:
...@@ -5872,6 +5922,11 @@ snapshots: ...@@ -5872,6 +5922,11 @@ snapshots:
csso: 5.0.5 csso: 5.0.5
picocolors: 1.1.1 picocolors: 1.1.1
swiper@8.4.5:
dependencies:
dom7: 4.0.6
ssr-window: 4.0.2
systemjs@6.15.1: {} systemjs@6.15.1: {}
tailwindcss@4.0.6: {} tailwindcss@4.0.6: {}
...@@ -5887,6 +5942,10 @@ snapshots: ...@@ -5887,6 +5942,10 @@ snapshots:
commander: 2.20.3 commander: 2.20.3
source-map-support: 0.5.21 source-map-support: 0.5.21
text-segmentation@1.0.3:
dependencies:
utrie: 1.0.2
thenify-all@1.6.0: thenify-all@1.6.0:
dependencies: dependencies:
thenify: 3.3.1 thenify: 3.3.1
...@@ -5994,6 +6053,10 @@ snapshots: ...@@ -5994,6 +6053,10 @@ snapshots:
utils-merge@1.0.1: {} utils-merge@1.0.1: {}
utrie@1.0.2:
dependencies:
base64-arraybuffer: 1.0.2
vite-plugin-mock@3.0.2(esbuild@0.25.3)(mockjs@1.1.0)(vite@6.3.3(@types/node@22.13.4)(jiti@2.4.2)(less@4.3.0)(lightningcss@1.29.1)(terser@5.39.0)): vite-plugin-mock@3.0.2(esbuild@0.25.3)(mockjs@1.1.0)(vite@6.3.3(@types/node@22.13.4)(jiti@2.4.2)(less@4.3.0)(lightningcss@1.29.1)(terser@5.39.0)):
dependencies: dependencies:
bundle-require: 4.2.1(esbuild@0.25.3) bundle-require: 4.2.1(esbuild@0.25.3)
......
src/api/index.ts
View file @ fc9e9d74
...@@ -52,11 +52,21 @@ const API = generateAPI({ ...@@ -52,11 +52,21 @@ const API = generateAPI({
getInviteCode: { getInviteCode: {
uri: 'inviteAssist_1/getInviteCode.do', uri: 'inviteAssist_1/getInviteCode.do',
withToken: true, withToken: true,
method: 'post',
}, },
doAssist: { doAssist: {
uri: 'inviteAssist_1/doAssist.do', uri: 'inviteAssist_1/doAssist.do',
withToken: true, withToken: true,
method: 'post',
}, },
getPrizeList: 'draw/myPrizeRecord.do',
receivePrize: {
uri: "draw/objectReceive.do",
withToken: true,
method: "post"
},
/** 获取地区 */
getParentCode: "/gaw/address/getChildrenByParentCode",
}) })
......
src/components/homepage/homepage.jsx deleted 100644 → 0
View file @ 937e90c1
'use strict';
import React from 'react';
import { observer } from 'mobx-react';
import './homepage.less';
@observer
class Homepage extends React.Component {
constructor(props) {
super(props);
}
render() {
return (
<div className="homepage modal_center">
<span className="bg"></span>
<div className="infobox">
<span className="infobg"></span>
<div className="prizeingo">
<span className="prizename">奖品名称文案占位</span>
<span className="prizerank">前50名可得</span>
<span className="prizeimg"></span>
</div>
<div className="rankinfo">
<span className="rankarr"></span>
<span className="ranklab">我的排名</span>
<span className="ranknum">86名</span>
</div>
</div>
<span className="title"></span>
<span className="prizebtn"></span>
<span className="rulebtn"></span>
<span className="musicon"></span>
<span className="musicf"></span>
<div className="mainbtn">
<span className="mainimg"></span>
<span className="mainnum">剩余次数：3</span>
</div>
<span className="shopbtn"></span>
<div className="drawbtn">
<span className="drawimg"></span>
<div className="drawnum">
<span className="drawnumbg"></span>
<span className="drawnumlab">1</span>
</div>
</div>
<div className="tasklist">
<div className="taskitem">
<span className="taskbg"></span>
<span className="taskscanbtn"></span>
<span className="taskinvitebtn"></span>
<span className="taskgetbtn"></span>
<span className="taskfinishbtn"></span>
<span className="tasktit">每日登录</span>
<span className="tasksub">游戏次数*1</span>
<span className="taskicon"></span>
</div>
<span className="taskitem2"></span>
</div>
<span className="tasktitle"></span>
<span className="ip"></span>
<span className="leaves"></span>
<span className="logo"></span>
</div>
);
}
}
export default Homepage;
src/components/homepage/homepage.less deleted 100644 → 0
View file @ 937e90c1
@import "../../res.less";
.homepage {
width: 750px;
height: 1624px;
left: 0px;
top: 0px;
position: absolute;
.bg {
width: 750px;
height: 1705px;
left: 0px;
top: 0px;
position: absolute;
.sparkBg("homePage/bg.png");
}
.infobox {
width: 502px;
height: 148px;
left: 124px;
top: 412px;
position: absolute;
.infobg {
width: 502px;
height: 148px;
left: 0px;
top: 0px;
position: absolute;
.sparkBg("homePage/infobg.png");
}
.prizeingo {
width: 257px;
height: 65px;
left: 58px;
top: 47px;
position: absolute;
.prizename {
width: 172px;
height: 18px;
left: 95px;
top: 38px;
position: absolute;
font-size: 18px;
line-height: 18px;
color: rgba(255, 255, 255, 1);
}
.prizerank {
width: 120px;
height: 23px;
left: 95px;
top: 8px;
position: absolute;
font-size: 17px;
line-height: 23px;
color: rgba(255, 255, 255, 1);
}
.prizeimg {
width: 80px;
height: 65px;
left: 0px;
top: 0px;
position: absolute;
.sparkBg("homePage/prizeimg.png");
}
}
.rankinfo {
width: 103px;
height: 47px;
left: 347px;
top: 56px;
position: absolute;
.rankarr {
width: 25px;
height: 39px;
left: 78px;
top: 7px;
position: absolute;
.sparkBg("homePage/rankarr.png");
}
.ranklab {
width: 74px;
height: 15px;
left: 0px;
top: 32px;
position: absolute;
font-size: 15px;
line-height: 15px;
color: rgba(255, 255, 255, 1);
}
.ranknum {
width: 74px;
height: 28px;
left: 0px;
top: 0px;
position: absolute;
font-size: 35px;
line-height: 28px;
color: rgba(243, 225, 27, 1);
}
}
}
.title {
width: 484px;
height: 243px;
left: 120px;
top: 174px;
position: absolute;
.sparkBg("homePage/title.png");
}
.prizebtn {
width: 159px;
height: 60px;
left: 12px;
top: 79px;
position: absolute;
.sparkBg("homePage/prizebtn.png");
}
.rulebtn {
width: 115px;
height: 60px;
left: 624px;
top: 80px;
position: absolute;
.sparkBg("homePage/rulebtn.png");
}
.musicon {
width: 55px;
height: 57px;
left: 684px;
top: 155px;
position: absolute;
.sparkBg("homePage/musicon.png");
}
.musicf {
width: 41px;
height: 43px;
left: 691px;
top: 162px;
position: absolute;
.sparkBg("homePage/musicoff.png");
}
.mainbtn {
width: 474px;
height: 134px;
left: 140px;
top: 932px;
position: absolute;
.mainimg {
width: 474px;
height: 134px;
left: 0px;
top: 0px;
position: absolute;
.sparkBg("homePage/mainimg.png");
}
.mainnum {
width: 182px;
height: 24px;
left: 151px;
top: 80px;
position: absolute;
font-size: 25px;
line-height: 24px;
color: rgba(240, 35, 96, 1);
}
}
.shopbtn {
width: 92px;
height: 95px;
left: 20px;
top: 957px;
position: absolute;
.sparkBg("homePage/shopbtn.png");
}
.drawbtn {
width: 98px;
height: 100px;
left: 635px;
top: 953px;
position: absolute;
.drawimg {
width: 98px;
height: 100px;
left: 0px;
top: 0px;
position: absolute;
.sparkBg("homePage/drawimg.png");
}
.drawnum {
width: 28px;
height: 28px;
left: 70px;
top: 0px;
position: absolute;
.drawnumbg {
width: 28px;
height: 28px;
left: 0px;
top: 0px;
position: absolute;
.sparkBg("homePage/drawNumbg.png");
}
.drawnumlab {
width: 20px;
height: 16px;
left: 9px;
top: 6px;
position: absolute;
font-size: 21px;
line-height: 16px;
color: rgba(255, 255, 255, 1);
}
}
}
.tasklist {
width: 695px;
height: 529px;
left: 30px;
top: 1145px;
position: absolute;
.taskitem {
width: 695px;
height: 172px;
left: 0px;
top: 0px;
position: absolute;
.taskbg {
width: 695px;
height: 172px;
left: 0px;
top: 0px;
position: absolute;
.sparkBg("homePage/taskbg.png");
}
.taskscanbtn {
width: 157px;
height: 57px;
left: 451px;
top: 51px;
position: absolute;
.sparkBg("homePage/taskscanbtn.png");
}
.taskinvitebtn {
width: 157px;
height: 57px;
left: 451px;
top: 51px;
position: absolute;
.sparkBg("homePage/taskinvitebtn.png");
}
.taskgetbtn {
width: 157px;
height: 57px;
left: 451px;
top: 51px;
position: absolute;
.sparkBg("homePage/taskgetbtn.png");
}
.taskfinishbtn {
width: 157px;
height: 57px;
left: 451px;
top: 51px;
position: absolute;
.sparkBg("homePage/taskfinishbtn.png");
}
.tasktit {
width: 149px;
height: 29px;
left: 168px;
top: 56px;
position: absolute;
font-size: 34px;
line-height: 29px;
color: rgba(255, 255, 255, 1);
}
.tasksub {
width: 121px;
height: 21px;
left: 170px;
top: 95px;
position: absolute;
font-size: 22px;
line-height: 21px;
color: rgba(255, 255, 255, 1);
}
.taskicon {
width: 65px;
height: 69px;
left: 89px;
top: 49px;
position: absolute;
.sparkBg("homePage/taskicon.png");
}
}
.taskitem2 {
width: 695px;
height: 348px;
left: 0px;
top: 181px;
position: absolute;
.sparkBg("homePage/taskitem2.png");
}
}
.tasktitle {
width: 676px;
height: 32px;
left: 39px;
top: 1098px;
position: absolute;
.sparkBg("homePage/tasktitle.png");
}
.ip {
width: 373px;
height: 326px;
left: 192px;
top: 585px;
position: absolute;
.sparkBg("homePage/ip.png");
}
.leaves {
width: 750px;
height: 447px;
left: 0px;
top: 541px;
position: absolute;
.sparkBg("homePage/leaves.png");
}
.logo {
width: 170px;
height: 55px;
left: 291px;
top: 85px;
position: absolute;
.sparkBg("homePage/logo.png");
}
}
src/components/inputinfomodal/inputinfomodal.less 0 → 100644
View file @ fc9e9d74
@import "../../res.less";
.inputinfomodal {
width: 538px;
height: 809px;
left: 0px;
top: 0px;
position: absolute;
.inputinfomodalclosebtn {
width: 70px;
height: 70px;
left: 233px;
top: 739px;
position: absolute;
// opacity: 0.7;
.sparkBg("inputInfoModal/inputInfoModalCloseBtn.png");
}
.inputinfomodalbg {
width: 538px;
height: 712px;
left: 0px;
top: 0px;
position: absolute;
.sparkBg("inputInfoModal/inputInfoModalBg.png");
}
.inputinfomodalconfirmbtn {
width: 349px;
height: 90px;
left: 94px;
top: 554px;
position: absolute;
.sparkBg("inputInfoModal/inputInfoModalConfirmBtn.png");
}
.inputinfomodaldetailcon {
width: 468px;
height: 82px;
left: 34px;
top: 428px;
position: absolute;
.inputinfomodaldetailconbg {
width: 468px;
height: 82px;
left: 0px;
top: 0px;
position: absolute;
.sparkBg("inputInfoModal/inputInfoModalDetailConBg.png");
}
.inputinfomodaldetailconplaceholder {
width: 304px;
height: 34px;
left: 130px;
top: 21px;
outline: none;
border: 0;
position: absolute;
opacity: 0.5;
font-size: 34px;
line-height: 34px;
color: #fff;
}
}
.inputinfomodalphonecon {
width: 468px;
height: 82px;
left: 34px;
top: 232px;
position: absolute;
.inputinfomodalphoneconbg {
width: 468px;
height: 82px;
left: 0px;
top: 0px;
position: absolute;
.sparkBg("inputInfoModal/inputInfoModalPhoneConBg.png");
}
.inputinfomodalphoneconplaceholder {
width: 304px;
height: 34px;
left: 130px;
top: 21px;
outline: none;
border: 0;
position: absolute;
opacity: 0.5;
font-size: 34px;
line-height: 34px;
color: #fff;
}
}
.inputinfomodalnamecon {
width: 468px;
height: 82px;
left: 34px;
top: 134px;
position: absolute;
.inputinfomodalnameconbg {
width: 468px;
height: 82px;
left: 0px;
top: 0px;
position: absolute;
.sparkBg("inputInfoModal/inputInfoModalNameConBg.png");
}
.inputinfomodalnameconplaceholder {
width: 304px;
height: 34px;
left: 130px;
top: 21px;
outline: none;
border: 0;
position: absolute;
opacity: 0.5;
font-size: 34px;
line-height: 34px;
color: #fff;
}
}
.inputinfomodalareacon {
width: 468px;
height: 82px;
left: 34px;
top: 330px;
position: absolute;
.inputinfomodalareaconbg {
width: 468px;
height: 82px;
left: 0px;
top: 0px;
position: absolute;
.sparkBg("inputInfoModal/inputInfoModalAreaConBg.png");
}
.inputinfomodalareaprovinceconplaceholder {
width: 100px;
height: 34px;
left: 170px;
top: 21px;
outline: none;
border: 0;
position: absolute;
opacity: 0.5;
font-size: 34px;
line-height: 34px;
color: #fff;
}
.inputinfomodalareacityconplaceholder {
width: 100px;
height: 34px;
left: 321px;
top: 21px;
outline: none;
border: 0;
position: absolute;
opacity: 0.5;
font-size: 34px;
line-height: 34px;
color: #fff;
}
.inputinfomodalareacountryconplaceholder {
width: 100px;
height: 34px;
left: 441px;
top: 21px;
outline: none;
border: 0;
position: absolute;
opacity: 0.5;
font-size: 34px;
line-height: 34px;
color: #fff;
}
}
}
src/components/inputinfomodal/inputinfomodal.tsx 0 → 100644
View file @ fc9e9d74
'use strict';
import React from 'react';
import { observer } from 'mobx-react';
import './inputinfomodal.less';
import { Toast } from '@grace/ui';
import API from '@/api';
import { ModalCtrl } from '@/core/ctrls/ModalCtrl';
import Selectmodal from '../selectmodal/selectmodal';
import store from '@/store/store';
// 定义 state 的类型
interface InputInfoModalState {
name: string;
phone: string;
detail: string;
province: string;
city: string;
area: string;
}
// 定义 props 的类型
interface InputInfoModalProps {
id?: string; // 原代码中使用了 this.props?.id
receiveSuc?: () => void; // 定义 receiveSuc 方法，可选类型
}
@observer
class Inputinfomodal extends React.Component<InputInfoModalProps, InputInfoModalState> {
constructor(props) {
super(props);
this.state = {
name: '',
phone: '',
detail: '',
province: '',
city: '',
area: ''
};
}
// handleChange = (field: keyof InputInfoModalState, value: string) => {
// this.setState({ [field]: value });
// }
// 指定 field 的类型为 InputInfoModalState 的键名
handleChange = (field: keyof InputInfoModalState, value: string) => {
// 这里使用类型断言确保类型匹配
this.setState({ [field]: value } as Pick<InputInfoModalState, typeof field>);
}
confirm = async () => {
/**判空 */
if (!this.state.name || !this.state.phone || !this.state.detail || !store.province || !store.city) {
Toast.show("请输入完整信息")
return
}
/**只判断11位手机号 */
if (!/^1[3456789]\d{9}$/.test(this.state.phone)) {
Toast.show("请输入正确的手机号")
return
}
let { name, phone, detail } = this.state
let { province, city, area } = store
if (province == '北京市' || province == '上海市' || province == '天津市' || province == '重庆市') {
city = province
}
const resp = await API.receivePrize({
prizeRecordId: this.props?.id,
collectUser: name,
collectProvince: province,
collectCity: city,
collectAddr: detail,
collectCounty: area,
collectPhone: phone
})
if (resp.success && resp.data) {
Toast.show("领取成功")
ModalCtrl.closeModal()
this.props?.receiveSuc && this.props?.receiveSuc()
} else {
Toast.show("领取失败，请联系客服")
ModalCtrl.closeModal()
}
console.warn(this.state)
}
doSelect = ({ province, city, area }) => {
console.log('doSelect 方法被调用，传入参数：', province, city, area);
// this.setState({
// province,
// city,
// area
// }, () => {
// console.log("选择地址后拿到的值", this.state.province, this.state.city, this.state.area);
// });
store.province = province
store.city = city
store.area = area
}
select = () => {
// modalStore.pushPop("Selectmodal", { doSelect: this.doSelect.bind(this) }, true)
ModalCtrl.showModal(Selectmodal, { doSelect: this.doSelect.bind(this) })
}
render() {
return (
<div className="inputinfomodal modal_center">
<span className="inputinfomodalclosebtn" onClick={() => {
ModalCtrl.closeModal()
}}></span>
<span className="inputinfomodalbg"></span>
<span className="inputinfomodalconfirmbtn" onClick={() => {
this.confirm()
}}></span>
<div className="inputinfomodaldetailcon">
<span className="inputinfomodaldetailconbg"></span>
<input
type="text"
className="inputinfomodaldetailconplaceholder"
placeholder="请输入详细地址"
value={this.state.detail}
onChange={(e) => this.handleChange('detail', e.target.value)}
/>
</div>
<div className="inputinfomodalphonecon">
<span className="inputinfomodalphoneconbg"></span>
<input
type="tel"
className="inputinfomodalphoneconplaceholder"
placeholder="请输入手机号"
value={this.state.phone}
onChange={(e) => this.handleChange('phone', e.target.value)}
/>
</div>
<div className="inputinfomodalnamecon">
<span className="inputinfomodalnameconbg"></span>
<input
type="text"
className="inputinfomodalnameconplaceholder"
placeholder="请输入姓名"
value={this.state.name}
onChange={(e) => this.handleChange('name', e.target.value)}
/>
</div>
<div className="inputinfomodalareacon" onClick={this.select.bind(this)}>
<span className="inputinfomodalareaconbg"></span>
<input
type="text"
className="inputinfomodalareaprovinceconplaceholder"
placeholder="请输入"
value={store.province}
onChange={(e) => this.handleChange('province', e.target.value)}
/>
<input
type="text"
className="inputinfomodalareacityconplaceholder"
placeholder="请输入"
value={store.city}
onChange={(e) => this.handleChange('city', e.target.value)}
/>
<input
type="text"
className="inputinfomodalareacountryconplaceholder"
placeholder="请输入"
value={store.area}
onChange={(e) => {
console.log(e.target.value)
this.handleChange('area', e.target.value)
}
}
/>
</div>
</div>
);
}
}
export default Inputinfomodal;
src/components/posterpop/posterpop.less
View file @ fc9e9d74
...@@ -5,6 +5,14 @@ ...@@ -5,6 +5,14 @@
left: 0px; left: 0px;
top: 0px; top: 0px;
position: absolute; position: absolute;
.show {
width: 596px;
height: 983px;
left: 77px;
top: 286px;
position: absolute;
border-radius: 20px;
}
.poster { .poster {
width: 596px; width: 596px;
height: 983px; height: 983px;
...@@ -19,6 +27,14 @@ ...@@ -19,6 +27,14 @@
position: absolute; position: absolute;
.sparkBg("posterPop/posteriimg.png"); .sparkBg("posterPop/posteriimg.png");
} }
.qrcode {
width: 175px;
height: 175px;
left: 46px;
top: 748px;
position: absolute;
border-radius: 20px;
}
} }
.tips { .tips {
width: 604px; width: 604px;
......
src/components/posterpop/posterpop.tsx
View file @ fc9e9d74
...@@ -5,25 +5,53 @@ import { observer } from 'mobx-react'; ...@@ -5,25 +5,53 @@ import { observer } from 'mobx-react';
import './posterpop.less'; import './posterpop.less';
import QRCode from 'qrcode'; import QRCode from 'qrcode';
import html2canvas from 'html2canvas';
import API from '@/api';
type PosterpopState = {
codeImg: string;
shareImg: string;
};
@observer @observer
class Posterpop extends React.Component { class Posterpop extends React.Component<{}, PosterpopState> {
constructor(props) { constructor(props) {
super(props); super(props);
this.state = {
codeImg: '',
shareImg: ''
}
} }
async componentDidMount() { async componentDidMount() {
// https://98570-activity.m.dexfu.cn/projectx/p6534784b/index.html?appKey=2vujqg1MJ4A4vogq9e22RzTa7C8S&openBs=openbs&appID=98570 const { success, data } = await API.getInviteCode();
let url = location.origin + "/projectx/"+CFG.projectId+"/index.html?appKey=2vujqg1MJ4A4vogq9e22RzTa7C8S&openBs=openbs&appID="+CFG.appID; if (!success) { return }
alert('公众号免登还没拼上 要记得加上')
let url = location.origin + "/projectx/" + CFG.projectId + "/index.html?appID=" + CFG.appID + "&inviteCode=" + data.inviteCode;
const qrcodeSrc = await QRCode.toDataURL(url); const qrcodeSrc = await QRCode.toDataURL(url);
console.info(qrcodeSrc); console.info(qrcodeSrc);
this.setState({ codeImg: qrcodeSrc });
} }
render() { render() {
return ( return (
<div className="posterpop modal_center"> <div className="posterpop modal_center">
<div className="poster"> <div className="poster" id='poster'>
<span className="posteriimg"></span> <span className="posteriimg"></span>
{
this.state.codeImg && <img className='qrcode' src={this.state.codeImg} onLoad={() => {
// 开始截图
html2canvas(document.querySelector(".poster"), { allowTaint: true }).then(canvas => {
const base64 = canvas.toDataURL()
console.log(base64)
this.setState({
shareImg: base64
})
})
}}></img>
}
</div> </div>
{
this.state.shareImg && <img className='show' src={this.state.shareImg}></img>
}
<span className="tips"></span> <span className="tips"></span>
</div> </div>
); );
......
src/components/selectmodal/selectmodal.less 0 → 100644
View file @ fc9e9d74
@import "../../res.less";
.selectmodal {
width: 750px;
height: 614px;
left: 0px;
bottom: 614px;
position: absolute;
animation: frombottom 300ms forwards;
.bg {
width: 750px;
height: 614px;
left: 0px;
top: 0;
position: absolute;
// .sparkBg("areaPop/bg.png");
background-color: #fff;
border-radius: 10px 10px 0 0;
}
.confirmbtn {
width: 349px;
height: 90px;
left: 0px;
right: 0px;
top: 500px;
margin: auto;
position: absolute;
.sparkBg("inputInfoModal/inputInfoModalConfirmBtn.png");
}
.dateCont {
width: 685px;
display: flex;
position: absolute;
top: 30px;
left: calc(50% - 685px / 2);
text-align: center;
flex-direction: row;
&::after {
content: "";
width: 722px;
height: 71px;
left: -20px;
top: calc(50% - 60px / 2);
position: absolute;
}
.dates {
width: calc(100% / 4);
flex: 1;
z-index: 1;
}
.hours {
width: calc(100% / 4);
flex: 1;
z-index: 1;
}
.minutes {
width: calc(100% / 4);
flex: 1;
z-index: 1;
}
.street {
width: calc(100% / 4);
flex: 1;
z-index: 1;
}
._date {
width: 100%;
height: 380px;
.dateItem {
width: 100%;
height: 79px;
line-height: 79px;
color: rgb(116, 116, 116);
font-size: 36px;
text-align: center;
div {
width: 100%;
display: inline-block;
.lineClamp1();
}
&.swiper-slide-active {
font-size: 42px;
color: black;
font-weight: 700;
}
}
}
}
.close {
width: 49px;
height: 49px;
right: 10px;
top: -70px;
position: absolute;
// background-color: #000;
.sparkBg("selectModal/closeBtn.png");
}
@keyframes frombottom {
0% {
bottom: -614px;
}
100% {
bottom: 0px;
}
}
}
src/components/selectmodal/selectmodal.tsx 0 → 100644
View file @ fc9e9d74
'use strict';
import React from 'react';
import { observer } from 'mobx-react';
import './selectmodal.less';
import { Swiper, SwiperSlide } from 'swiper/react';
import 'swiper/swiper-bundle.css';
import API from '@/api';
import { _throttle } from '@/utils/utils';
import { ModalCtrl } from '@/core/ctrls/ModalCtrl';
// 定义 state 的类型
interface SelectModalState {
provinceList: any[]; // 假设 provinceList 是数组类型，可按需调整
cityList: any[];
areaList: any[];
provinceCode: number;
cityCode: number;
areaCode: number;
}
// 定义 props 的类型
interface SelectModalProps {
doSelect?: (data: { province: string; city: string; area: string }) => void; // 可选的 doSelect 方法
}
// 定义 params 类型
interface GetParentCodeParams {
parentCode?: string | null;
}
@observer
class Selectmodal extends React.Component<SelectModalProps, SelectModalState> {
constructor(props) {
super(props);
this.state = {
provinceList: [],
cityList: [],
areaList: [],
provinceCode: 0,
cityCode: 0,
areaCode: 0,
};
}
swiperRef;
swiperRef2;
// getParentCode
async componentDidMount() {
//获取省
await this.getCodeList(null, "provinceList");
//获取市
const { provinceList, provinceCode } = this.state;
await this.getCodeList(provinceList[provinceCode]?.adCode, "cityList");
//获取区
const { cityList, cityCode } = this.state;
await this.getCodeList(cityList[cityCode]?.adCode, "areaList");
//获取街道
const { areaList, areaCode } = this.state;
await this.getCodeList(areaList[areaCode]?.adCode, "streetList");
}
/**获取省市区接口 */
async getCodeList(parentCode, type) {
const params: GetParentCodeParams = {};
if (parentCode) {
params.parentCode = parentCode;
}
const { success, data } = await API.getParentCode(params);
if (success) {
this.setState({
[type]: data,
} as Pick<SelectModalState, typeof type>);
}
}
/**
* 省选择
* @param {*} swiper
*/
onProvinceSwiper = (swiper) => {
if (swiper) {
swiper.on("slideChange", (swiper) => {
console.error("Slide changed!", swiper.activeIndex);
this.setState(
{
provinceCode: swiper.activeIndex,
},
async () => {
//获取市
const { provinceList } = this.state;
await this.getCodeList(provinceList[swiper.activeIndex]?.adCode, "cityList");
//获取区
const { cityList, cityCode } = this.state;
await this.getCodeList(cityList[cityCode]?.adCode, "areaList");
}
);
this.swiperRef?.slideTo(0);
this.swiperRef2?.slideTo(0);
});
}
};
/**
* 市选择
*/
onCitySwiper = (swiper) => {
console.error("Slide changed!", swiper.activeIndex);
this.setState(
{
cityCode: swiper.activeIndex,
},
async () => {
//获取区
const { cityList } = this.state;
await this.getCodeList(cityList[swiper.activeIndex]?.adCode, "areaList");
}
);
this.swiperRef2?.slideTo(0);
};
/**
* 区选择
* @param {*} swiper
*/
onAreaSwiper = (swiper) => {
console.error("Slide changed!", swiper.activeIndex);
this.setState(
{
areaCode: swiper.activeIndex,
}
);
};
/**
* 确认选择
*/
doSelect = _throttle(() => {
const { provinceList, cityList, areaList, provinceCode, cityCode, areaCode, } = this.state;
const province = provinceList[provinceCode]?.name;
const city = cityList[cityCode]?.name;
const area = areaList[areaCode]?.name;
console.log(province + "" + city + "" + area + "");
//确定展示到页面
const { doSelect } = this.props;
doSelect && doSelect({ province, city, area });
ModalCtrl.closeModal();
});
onClose() {
ModalCtrl.closeModal();
}
render() {
const { provinceList, cityList, areaList } = this.state;
return (
<div className="selectmodal">
<span className="bg"></span>
<div className="confirmbtn" onClick={this.doSelect}></div>
<div className="dateCont">
<div className="dates">
<Swiper
slidesPerView={5}
initialSlide={0}
centeredSlides={true}
direction="vertical"
className="_date"
onSwiper={this.onProvinceSwiper}>
{provinceList?.map((item, index) => (
<SwiperSlide className="dateItem" key={index}>
<div>{item?.name}</div>
</SwiperSlide>
))}
</Swiper>
</div>
<div className="hours">
<Swiper
slidesPerView={5}
initialSlide={0}
centeredSlides={true}
direction="vertical"
className="_date"
onSwiper={(swiper) => (this.swiperRef = swiper)}
onSlideChange={(swiper) => this.onCitySwiper(swiper)}>
{cityList?.map((item, index) => (
<SwiperSlide className="dateItem" key={index}>
<div>{item?.name}</div>
</SwiperSlide>
))}
</Swiper>
</div>
<div className="minutes">
<Swiper
slidesPerView={5}
initialSlide={0}
centeredSlides={true}
direction="vertical"
className="_date"
onSwiper={(swiper) => (this.swiperRef2 = swiper)}
onSlideChange={(swiper) => this.onAreaSwiper(swiper)}>
{areaList?.map((item, index) => (
<SwiperSlide className="dateItem" key={index}>
<div>{item?.name}</div>
</SwiperSlide>
))}
</Swiper>
</div>
</div>
<span className="close" onClick={this.onClose}></span>
</div>
);
}
}
export default Selectmodal;
src/pages/HomePage/HomePage.tsx
View file @ fc9e9d74
...@@ -2,7 +2,7 @@ import React from 'react'; ...@@ -2,7 +2,7 @@ import React from 'react';
import { observer } from 'mobx-react'; import { observer } from 'mobx-react';
import './HomePage.less'; import './HomePage.less';
import { Button, Toast } from "@grace/ui"; import { Button, Toast } from "@grace/ui";
import { _asyncThrottle, miniGoUrl } from "@/utils/utils.ts"; import { _asyncThrottle, getUrlParam, miniGoUrl } from "@/utils/utils.ts";
import store from "@/store/store.ts"; import store from "@/store/store.ts";
import { SvgaPlayer } from "@grace/svgaplayer"; import { SvgaPlayer } from "@grace/svgaplayer";
import homeSvga from "../../../src/assets/svga/2输出首页氛围.svga"; import homeSvga from "../../../src/assets/svga/2输出首页氛围.svga";
...@@ -20,6 +20,7 @@ import Posterpop from '@/components/posterpop/posterpop'; ...@@ -20,6 +20,7 @@ import Posterpop from '@/components/posterpop/posterpop';
import API from '@/api'; import API from '@/api';
import Rankpage from '../rankpage/rankpage'; import Rankpage from '../rankpage/rankpage';
import Rulepop from '@/components/rulepop/rulepop'; import Rulepop from '@/components/rulepop/rulepop';
import Prizepage from '../prizepage/prizepage';
@observer @observer
class HomePage extends React.Component<any, any> { class HomePage extends React.Component<any, any> {
...@@ -29,18 +30,21 @@ class HomePage extends React.Component<any, any> { ...@@ -29,18 +30,21 @@ class HomePage extends React.Component<any, any> {
componentDidMount() { componentDidMount() {
store.updateIndex(); store.updateIndex();
store.queryTask() store.queryTask()
if (getUrlParam('inviteCode')) {
store.doAssist()
}
} }
/** 开始游戏按钮*/ /** 开始游戏按钮*/
startGame = _asyncThrottle(async () => { startGame = _asyncThrottle(async () => {
// if (!store.judgeActTime()) return; if (!store.judgeActTime()) return;
// if (store.indexData.remainTimes == 0) { if (store.indexData.remainTimes == 0) {
// Toast.show("暂无游戏次数哦") Toast.show("暂无游戏次数哦")
// return; return;
// } }
// const suc = await gameStore.start(); const suc = await gameStore.start();
// if (!suc) return; if (!suc) return;
PageCtrl.changePage(GamePage); PageCtrl.changePage(GamePage);
}) })
...@@ -48,9 +52,7 @@ class HomePage extends React.Component<any, any> { ...@@ -48,9 +52,7 @@ class HomePage extends React.Component<any, any> {
/** 奖品按钮*/ /** 奖品按钮*/
clickPrize = _asyncThrottle(() => { clickPrize = _asyncThrottle(() => {
if (!store.judgeActTime(true, false)) return; if (!store.judgeActTime(true, false)) return;
ModalCtrl.showModal(PrizePanel, { PageCtrl.changePage(Prizepage)
prizeVO: {},
});
}) })
/** 规则按钮*/ /** 规则按钮*/
...@@ -95,6 +97,7 @@ class HomePage extends React.Component<any, any> { ...@@ -95,6 +97,7 @@ class HomePage extends React.Component<any, any> {
PageCtrl.changePage(Rankpage); PageCtrl.changePage(Rankpage);
}) })
render() { render() {
const { remainTimes, remainDrawTimes, rank } = store.indexData const { remainTimes, remainDrawTimes, rank } = store.indexData
return <div className="homepage" ref={(el) => this.root = el}> return <div className="homepage" ref={(el) => this.root = el}>
...@@ -115,8 +118,8 @@ class HomePage extends React.Component<any, any> { ...@@ -115,8 +118,8 @@ class HomePage extends React.Component<any, any> {
</div> </div>
</div> </div>
<span className="title"></span> <span className="title"></span>
<span className="prizebtn"></span> <Button className="prizebtn" onClick={this.clickPrize}></Button>
<span className="rulebtn" onClick={this.clickRule}></span> <Button className="rulebtn" onClick={this.clickRule}></Button>
{/* <span className="musicon"></span> {/* <span className="musicon"></span>
<span className="musicf"></span> */} <span className="musicf"></span> */}
<MusicBtn className={`${musicStore.mute ? 'musicf' : 'musicon'}`}></MusicBtn> <MusicBtn className={`${musicStore.mute ? 'musicf' : 'musicon'}`}></MusicBtn>
......
src/pages/prizepage/prizepage.less
View file @ fc9e9d74
...@@ -15,16 +15,18 @@ ...@@ -15,16 +15,18 @@
} }
.list { .list {
width: 668px; width: 668px;
height: 802px; // height: 802px;
left: 42px; left: 42px;
top: 448px; top: 448px;
position: absolute; position: absolute;
overflow-y: scroll;
.item { .item {
width: 668px; width: 668px;
height: 175px; height: 175px;
left: 0px; left: 0px;
top: 0px; top: 0px;
position: absolute; position: relative;
margin-bottom: 30px;
.itembg { .itembg {
width: 668px; width: 668px;
height: 175px; height: 175px;
...@@ -41,33 +43,59 @@ ...@@ -41,33 +43,59 @@
position: absolute; position: absolute;
.sparkBg("prizePage/arrow.png"); .sparkBg("prizePage/arrow.png");
} }
.gotbtn {
width: 197px;
height: 76px;
left: 426px;
top: 47px;
position: absolute;
.sparkBg("prizePage/已领取.png");
}
.checkbtn {
width: 197px;
height: 76px;
left: 426px;
top: 47px;
position: absolute;
.sparkBg("prizePage/去查看.png");
}
.bindbtn {
width: 197px;
height: 76px;
left: 426px;
top: 47px;
position: absolute;
.sparkBg("prizePage/去领取.png");
}
.name { .name {
width: 154px; width: 204px;
height: 35px; height: 40px;
left: 208px; left: 208px;
top: 67px; top: 67px;
position: absolute; position: absolute;
font-size: 36px; font-size: 36px;
line-height: 35px; line-height: 36px;
color: rgba(255, 255, 255, 1); color: rgba(255, 255, 255, 1);
.lineClamp1();
} }
.prizeimg { .prizeimg {
width: 76px; width: 116px;
height: 116px; height: 116px;
left: 63px; left: 43px;
top: 30px; top: 30px;
position: absolute; position: absolute;
.sparkBg("prizePage/prizeImg.png"); // .sparkBg("prizePage/prizeImg.png");
} img {
} width: 116px;
.item2 { height: 116px;
width: 668px;
height: 595px;
left: 0px; left: 0px;
top: 207px; top: 0px;
position: absolute; position: absolute;
.sparkBg("prizePage/item2.png"); object-fit: contain;
}
}
} }
} }
.title { .title {
width: 436px; width: 436px;
......
src/pages/prizepage/prizepage.tsx
View file @ fc9e9d74
...@@ -3,28 +3,68 @@ ...@@ -3,28 +3,68 @@
import React from 'react'; import React from 'react';
import { observer } from 'mobx-react'; import { observer } from 'mobx-react';
import './prizepage.less'; import './prizepage.less';
import store from '@/store/store';
import { _asyncThrottle } from '@/utils/utils';
import { ModalCtrl } from '@/core/ctrls/ModalCtrl';
import Inputinfomodal from '@/components/inputinfomodal/inputinfomodal';
import { PageCtrl } from '@/core/ctrls/PageCtrl';
import { Button } from '@grace/ui';
@observer @observer
class Prizepage extends React.Component { class Prizepage extends React.Component {
constructor(props) { constructor(props) {
super(props); super(props);
} }
async componentDidMount() {
await store.getPrizeList()
}
receive = _asyncThrottle((item) => {
// modalStore.pushPop("Inputinfomodal", { item, receiveSuc: this.receiveSuc.bind(this) })
ModalCtrl.showModal(Inputinfomodal, { ...item, receiveSuc: this.receiveSuc.bind(this) })
})
async receiveSuc() {
await store.getPrizeList()
}
jumpUrl(item) {
console.log('jumpUrl',item)
location.href = `/aaw/projectx/takePrize?projectOrderNo=${item.id}`;
}
back = () => {
PageCtrl.backPage()
}
render() { render() {
return ( return (
<div className="prizepage modal_center"> <div className="prizepage modal_center">
<span className="bg"></span> <span className="bg"></span>
<div className="list"> <div className="list" style={{ height: `${(1176 - (1624 - document.body.clientHeight * 750 / document.body.clientWidth) / 2) / 100}rem` }}>
<div className="item"> {
store.prizeList.map((item, index) => {
return (
<div className="item" key={"prize" + index}>
<span className="itembg"></span> <span className="itembg"></span>
<span className="arrow"></span> {
<span className="name">奖品名称</span> item.boolThirdObject ? item.needFillAddress ? <Button className='bindbtn' onClick={()=>this.receive(item)}></Button>
<span className="prizeimg"></span> : <Button className='gotbtn' ></Button>
: <Button className='checkbtn' onClick={()=>this.jumpUrl(item)}></Button>
}
<span className="name">{item.extra.name}</span>
<span className="prizeimg">
<img src={item.extra.icon} />
</span>
</div> </div>
<span className="item2"></span> )
})
}
</div> </div>
<span className="title"></span> <span className="title"></span>
<span className="empty"></span> {
<span className="back"></span> store.prizeList.length == 0 && <span className="empty"></span>
}
<Button className="back" onClick={this.back}></Button>
</div> </div>
); );
} }
......
src/store/store.ts
View file @ fc9e9d74
...@@ -5,6 +5,7 @@ import { IWxShareInfo } from "@/built-in/share/weixin/weixin.ts"; ...@@ -5,6 +5,7 @@ import { IWxShareInfo } from "@/built-in/share/weixin/weixin.ts";
import { ModalCtrl } from '@/core/ctrls/ModalCtrl'; import { ModalCtrl } from '@/core/ctrls/ModalCtrl';
import Ranknoprizepop from '@/components/ranknoprizepop/ranknoprizepop'; import Ranknoprizepop from '@/components/ranknoprizepop/ranknoprizepop';
import Rankprizepop from '@/components/rankprizepop/rankprizepop'; import Rankprizepop from '@/components/rankprizepop/rankprizepop';
import { getUrlParam } from '@/utils/utils';
class Store { class Store {
...@@ -95,50 +96,31 @@ class Store { ...@@ -95,50 +96,31 @@ class Store {
} }
return true; return true;
} }
taskList = [ 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() { async queryTask() {
// const { success, data } = await API.queryTasks(); const { success, data } = await API.queryTasks();
// if (success) { if (success) {
// this.taskList = data.item; this.taskList = data.item;
// } }
}
async doAssist() {
let code = getUrlParam('inviteCode')
const { success, data } = await API.doAssist({ inviteCode: code });
if (success) {
Toast.show("成功为好友助力，一起来参与活动吧～");
}
history.replaceState({}, '', location.href.replace(new RegExp(`[?&]inviteCode=[^&]*`), ''));
}
prizeList = [];
async getPrizeList() {
const resp = await API.getPrizeList();
if (resp.success) {
this.prizeList = resp.data;
}
} }
province :string = '';
city :string = '';
area :string = '';
} }
......
src/store/活动时间校验 1h---ok.ini 0 → 100644
View file @ fc9e9d74
活动时间校验 1h---ok
首页 3h----设计稿----ok
动效
音乐（全局）
排行榜信息展示
开始游戏 次数校验
积分商城 跳转对方链接 对接 1h---这个还没
任务列表 3h---设计稿----ok
每日登录
邀请助力
扫码
助力流程 2h--ok
助力反馈 + 助力成功/助力失败toast 1h----ok
分享海报 3h---设计稿----ok
生成二维码
长按保存海报
确认退出弹窗 1h---设计稿----ok
游戏结束弹窗-未中奖 2h----设计稿----ok
排名
分数
距离奖励文案
游戏结束弹窗-中奖 1h----设计稿----ok
排名
分数
盲盒抽奖页面 3h----设计稿--ok
动效
奖品轮播
点击抽奖 动效 次数判断
中奖弹窗 1h----设计稿--ok
未中奖弹窗 0.5h----设计稿--ok
排行榜 4h----设计稿----ok
倒计时
奖品轮播
列表
排行榜开奖弹窗 1h -------设计稿---ok
排行榜未中奖弹窗 ----设计稿---ok
活动规则 0.5h---设计稿----ok
奖品页 3h---设计稿
跳转对方链接
列表
缺省页
埋点 2h
自测联调 6
总计 41
\ No newline at end of file
src/utils/errorHandler.ts
View file @ fc9e9d74
import {Toast} from "@grace/ui"; import { Toast } from "@grace/ui";
// 需要过滤的错误码 // 需要过滤的错误码
export const filterCode = ["600002"]; export const filterCode = ["600002"];
...@@ -8,6 +8,11 @@ export const errMessageMap = { ...@@ -8,6 +8,11 @@ export const errMessageMap = {
1021: "活动已结束", 1021: "活动已结束",
1007: "活动太火爆了，奖品已抢完咯～", 1007: "活动太火爆了，奖品已抢完咯～",
100001: "登录过期啦，请重新登录哦～", 100001: "登录过期啦，请重新登录哦～",
200306: "助力失败，不能给自己助力哦～",
200303: '助力机会已用完，一起来参与活动吧～',
200304: "好友今日任务已完成，明天再来助力吧～",
200305: "已为好友助力哦～",
20002: "活动已结束，感谢您的关注～"
}; };
/** /**
......
vite.config.ts
View file @ fc9e9d74
...@@ -27,7 +27,7 @@ export default defineConfig(({mode}): UserConfig => { ...@@ -27,7 +27,7 @@ export default defineConfig(({mode}): UserConfig => {
// console.log(UPLOAD_DIR, NODE_ENV, CDN_DOMAIN, OSS_REGION, OSS_BUCKET, OSS_ACCESS_KEY_ID, OSS_ACCESS_SECRET) // console.log(UPLOAD_DIR, NODE_ENV, CDN_DOMAIN, OSS_REGION, OSS_BUCKET, OSS_ACCESS_KEY_ID, OSS_ACCESS_SECRET)
const isDev = NODE_ENV == "development"; const isDev = mode == "development";
const versionStamp = Date.now(); const versionStamp = Date.now();
......
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