diff --git a/src/App.css b/src/App.css index 5edae8d..0ee84c7 100644 --- a/src/App.css +++ b/src/App.css @@ -12,6 +12,11 @@ html, src: url("./assets/font/Roboto-Medium.ttf") format("truetype"); } +@font-face { + font-family: "YouSheBiaoTiHei"; + src: url("./assets/font/YouSheBiaoTiHei.ttf") format("truetype"); +} + * { -webkit-overflow-scrolling: touch; } diff --git a/src/App.tsx b/src/App.tsx index 7b3a4c3..beda02a 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,7 +1,7 @@ /* * @LastEditors: John * @Date: 2024-07-13 10:21:58 - * @LastEditTime: 2024-07-18 18:25:39 + * @LastEditTime: 2024-07-19 14:15:42 * @Author: John */ import { MemoryRouter, Route, Routes } from "react-router-dom"; @@ -54,7 +54,7 @@ function App() { return ( <> - {!Token ? ( + {Token ? ( } /> diff --git a/src/assets/big_buttom_bg.svg b/src/assets/big_buttom_bg.svg new file mode 100644 index 0000000..9f4be23 --- /dev/null +++ b/src/assets/big_buttom_bg.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/assets/buttom_bg.svg b/src/assets/buttom_bg.svg new file mode 100644 index 0000000..24961b7 --- /dev/null +++ b/src/assets/buttom_bg.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/assets/buttom_disable.svg b/src/assets/buttom_disable.svg new file mode 100644 index 0000000..ac177c9 --- /dev/null +++ b/src/assets/buttom_disable.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/assets/font/YouSheBiaoTiHei.ttf b/src/assets/font/YouSheBiaoTiHei.ttf new file mode 100644 index 0000000..3729151 Binary files /dev/null and b/src/assets/font/YouSheBiaoTiHei.ttf differ diff --git a/src/assets/kuang.svg b/src/assets/kuang.svg new file mode 100644 index 0000000..72167d6 --- /dev/null +++ b/src/assets/kuang.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/assets/social_task_bg.svg b/src/assets/social_task_bg.svg new file mode 100644 index 0000000..9e7858d --- /dev/null +++ b/src/assets/social_task_bg.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/assets/tg_white.svg b/src/assets/tg_white.svg new file mode 100644 index 0000000..533ba7c --- /dev/null +++ b/src/assets/tg_white.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/assets/tuite_white.svg b/src/assets/tuite_white.svg new file mode 100644 index 0000000..73c60ca --- /dev/null +++ b/src/assets/tuite_white.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/assets/user_rank_bg.svg b/src/assets/user_rank_bg.svg new file mode 100644 index 0000000..1da9711 --- /dev/null +++ b/src/assets/user_rank_bg.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/components/BottomTab-m.module.css b/src/components/BottomTab-m.module.css index c51f12d..832048c 100644 --- a/src/components/BottomTab-m.module.css +++ b/src/components/BottomTab-m.module.css @@ -6,13 +6,14 @@ justify-content: space-between; width: 100%; height: 83px; - padding: 0 39px; background-color: #000000; z-index: 999; li { display: flex; flex-direction: column; align-items: center; + justify-content: center; + flex: 1; span { /* 自动布局子元素 */ opacity: 1; diff --git a/src/components/BottomTab.tsx b/src/components/BottomTab.tsx index 2706721..9254a25 100644 --- a/src/components/BottomTab.tsx +++ b/src/components/BottomTab.tsx @@ -1,7 +1,7 @@ /* * @LastEditors: John * @Date: 2024-07-13 18:07:43 - * @LastEditTime: 2024-07-15 15:36:30 + * @LastEditTime: 2024-07-19 15:42:36 * @Author: John */ import { useLocation, useNavigate } from "react-router-dom"; @@ -27,6 +27,16 @@ export default function () { Home + +
  • navigate("/friends")}> + + + Friends + +
    • +
  • navigate("/leaderboard")}>
    • -
  • navigate("/frends")}> - - - Frends - -
    • ); diff --git a/src/pages/Frends-m.module.css b/src/pages/Frends-m.module.css index 390e1c6..44411a1 100644 --- a/src/pages/Frends-m.module.css +++ b/src/pages/Frends-m.module.css @@ -25,6 +25,9 @@ /* width: 141px; */ height: 149px; margin-top: 31px; + background-image: url("../assets/kuang.svg"); + background-repeat: no-repeat; + background-size: contain; } .tip { /* 自动布局子元素 */ @@ -53,18 +56,25 @@ gap: 30px; margin-top: 17px; padding-bottom: 165px; - .frends_list_title { - opacity: 1; + .frends_list_tabs { + display: flex; + gap: 10px; + .frends_list_title { + opacity: 1; - font-family: Roboto; - font-size: 20px; - font-weight: normal; - line-height: 24px; - letter-spacing: 0em; + font-family: Roboto; + font-size: 20px; + font-weight: normal; + line-height: 24px; + letter-spacing: 0em; - font-variation-settings: "opsz" auto; - font-feature-settings: "kern" on; - color: #ffffff; + font-variation-settings: "opsz" auto; + font-feature-settings: "kern" on; + color: #adadad; + &.frends_list_title_active { + color: #ffffff; + } + } } .frends_list_item { @@ -119,14 +129,16 @@ padding: 17px 15px; position: fixed; bottom: 83px; - background-color: #000000; + /* background-color: #000000; */ z-index: 999; button { width: 345px; height: 48px; - border-radius: 8px; + border-radius: 0px; opacity: 1; - background: #ffffff; + background-image: url("../assets/big_buttom_bg.svg"); + background-repeat: no-repeat; + background-size: contain; > span { opacity: 1; diff --git a/src/pages/Frends.tsx b/src/pages/Frends.tsx index 8342497..f8dd9cb 100644 --- a/src/pages/Frends.tsx +++ b/src/pages/Frends.tsx @@ -1,7 +1,7 @@ /* * @LastEditors: John * @Date: 2024-07-13 16:08:30 - * @LastEditTime: 2024-07-18 18:29:05 + * @LastEditTime: 2024-07-19 15:57:27 * @Author: John */ /* @@ -18,35 +18,72 @@ import useUserStore from "@/store/User"; import { useEffect, useState } from "react"; import { api_homepage_subordinates_users } from "@/server/api"; import { subordinatesUsers } from "@/server/module"; +import { cn } from "@/utils"; export default function () { const WebApp = useWebApp(); const { InvitationCode } = useUserStore(); const [frends, setFrends] = useState(); + const [currentLevel, setCurrentLevel] = useState(1); useEffect(() => { (async () => { - const { data } = await api_homepage_subordinates_users().send({}); - setFrends(data?.data); + updateFriends(1); })(); return () => {}; }, []); + async function updateFriends(level: number) { + const { data } = await api_homepage_subordinates_users().send({ + queryParams: { level }, + }); + setFrends(data?.data); + } + return ( <>
    - Invite friends and get more PIONEER + Invite friends and get more SCTT - - Tap on the button to invite your friends - -
      - 0 friends - {frends?.map((v, i) => ( - - ))} -
    + {frends?.length == 0 ? ( + + Tap on the button to invite your friends + + ) : ( +
      +
      + { + setCurrentLevel(1); + updateFriends(1); + }} + > + Level 1 + + { + setCurrentLevel(2); + updateFriends(2); + }} + > + Level 2 + +
      + {frends?.map((v, i) => ( + + ))} +
    + )} +
    @@ -69,7 +107,7 @@ function FrendsItem({ userName, point }: { userName: string; point: string }) {
  • {userName} - +{point} PIONEER + +{point} SCTT
    • ); } diff --git a/src/pages/Home-m.module.css b/src/pages/Home-m.module.css index b3b6942..5e31cec 100644 --- a/src/pages/Home-m.module.css +++ b/src/pages/Home-m.module.css @@ -59,6 +59,155 @@ margin-top: 14px; } + .social_task { + background-image: url("../assets/social_task_bg.svg"); + background-repeat: no-repeat; + background-size: contain; + width: 345px; + height: 778px; + margin-top: 28px; + + padding: 0 19px; + + display: flex; + flex-direction: column; + + > span { + opacity: 1; + + font-family: Roboto; + font-size: 16px; + font-weight: 600; + line-height: normal; + letter-spacing: 0em; + + font-variation-settings: "opsz" auto; + font-feature-settings: "kern" on; + color: #9292ff; + + margin-top: 21px; + display: block; + } + + > ul { + display: flex; + flex-direction: column; + flex: auto; + gap: 8px; + margin-top: 16px; + li { + display: flex; + flex-direction: column; + justify-content: center; + + width: 315px; + /* height: 108px; */ + border-radius: 12px; + opacity: 1; + background: rgba(132, 132, 144, 0.1); + backdrop-filter: blur(10px); + padding: 0 10px; + .social_task_item_top { + display: flex; + align-items: center; + gap: 8px; + border-bottom: 1px solid #2b2b2e; + height: 59px; + > img { + width: 30px; + height: 30px; + } + > span { + /* 自动布局子元素 */ + opacity: 1; + + font-family: Roboto; + font-size: 14px; + font-weight: normal; + line-height: 24px; + letter-spacing: 0em; + + font-variation-settings: "opsz" auto; + font-feature-settings: "kern" on; + color: #ffffff; + + z-index: 0; + } + + > button { + background-image: url("../assets/buttom_bg.svg"); + background-repeat: no-repeat; + background-size: cover; + width: 86px; + height: 30px; + display: flex; + align-items: center; + justify-content: center; + margin-left: auto; + > span { + opacity: 1; + + font-family: YouSheBiaoTiHei; + font-size: 14px; + font-weight: normal; + line-height: 24px; + text-align: center; + text-transform: capitalize; + letter-spacing: 0em; + + font-variation-settings: "opsz" auto; + color: #ffffff; + } + + &.button_disable { + background-image: url("../assets/buttom_disable.svg"); + > span { + color: #2a2a2a; + } + } + } + } + + .social_task_item_bottom { + display: flex; + align-items: center; + justify-content: space-between; + height: 49px; + > span { + &:nth-of-type(1) { + opacity: 1; + + font-family: Roboto; + font-size: 14px; + font-weight: normal; + line-height: 24px; + letter-spacing: 0em; + + font-variation-settings: "opsz" auto; + font-feature-settings: "kern" on; + color: #adadad; + } + + &:nth-of-type(2) { + opacity: 1; + + font-family: Roboto; + font-size: 14px; + font-weight: bold; + line-height: 24px; + text-align: right; + letter-spacing: 0em; + + font-variation-settings: "opsz" auto; + font-feature-settings: "kern" on; + color: #ffffff; + } + } + } + } + } + } + .join_card { width: 345px; height: 132px; @@ -162,14 +311,14 @@ opacity: 1; - font-family: Roboto; - font-size: 20px; - font-weight: 600; + font-family: YouSheBiaoTiHei; + font-size: 24px; + font-weight: normal; line-height: 24px; + text-transform: uppercase; letter-spacing: 0em; font-variation-settings: "opsz" auto; - font-feature-settings: "kern" on; color: #ffffff; } diff --git a/src/pages/Home.tsx b/src/pages/Home.tsx index 67708d8..def999b 100644 --- a/src/pages/Home.tsx +++ b/src/pages/Home.tsx @@ -1,12 +1,14 @@ /* * @LastEditors: John * @Date: 2024-07-13 10:50:24 - * @LastEditTime: 2024-07-18 18:45:32 + * @LastEditTime: 2024-07-19 17:05:08 * @Author: John */ import classes from "./Home-m.module.css"; import { Routes, useNavigate } from "react-router-dom"; import home_top_bg from "@/assets/home_top_bg.svg"; +import tg_white from "@/assets/tg_white.svg"; +import tuite_white from "@/assets/tuite_white.svg"; import logo from "@/assets/logo.png"; import { CheckOutline, @@ -19,37 +21,48 @@ import { useEffect, useState } from "react"; import { api_follow_twitter, api_homepage_query_user_income, + api_query_task_configuration_list, api_query_whether_the_user_receives_the_registration_reward, + api_start_task, } from "@/server/api"; import { useWebApp } from "@vkruglikov/react-telegram-web-app"; import IconFont from "@/components/iconfont"; +import { taskConfigurationListItem } from "@/server/module"; export default function () { const WebApp = useWebApp(); const navigate = useNavigate(); - const [totalPoint, setTotalPoint] = useState(); + const [totalPoint, setTotalPoint] = useState(0); const [signReward, setSignReward] = useState(); const [tgReward, setTgReward] = useState(); const [xReward, setXReward] = useState(); + + const [myReward, setMyReward] = useState(); + const [inviteReward, setInviteReward] = useState(); + + const [tasksList, setTasksList] = useState(); useEffect(() => { WebApp.setHeaderColor("#000000"); (async () => { UpdateHomeData(); + UpdateTaskList(); })(); return () => {}; }, []); async function UpdateHomeData() { - const { data: totalDataRes } = - await api_query_whether_the_user_receives_the_registration_reward().send( - {} - ); - setTotalPoint(totalDataRes?.data); const { data: incomeRes } = await api_homepage_query_user_income().send({}); - const list = incomeRes?.data || []; - setSignReward(list.find((v) => v.opType == 4)?.opValue); - setTgReward(list.find((v) => v.opType == 5)?.opValue); - setXReward(list.find((v) => v.opType == 6)?.opValue); + setMyReward(incomeRes?.data.wordRewar); + setInviteReward(incomeRes?.data.teamRewar); + setTotalPoint( + parseInt(`${incomeRes?.data.wordRewar || 0}`) + + parseInt(`${incomeRes?.data.teamRewar || 0}`) + ); + } + + async function UpdateTaskList() { + const { data } = await api_query_task_configuration_list().send({}); + setTasksList(data?.data); } return ( <> @@ -60,36 +73,103 @@ export default function () {
    - {totalPoint || 0} PIONEER + {totalPoint || 0} SCTT -
    - PIONEER COMMUNITY - Home for Telegram OGs - -
    +
    + + Complete social media tasks to increase your chances in the raffle. + -
    - Follow X @PioneerPortal - Follow X To Get Reward - +
      + {tasksList?.map((v, i) => ( + <> + {v.type == 1 && ( + { + UpdateHomeData(); + UpdateTaskList(); + }} + /> + )} + {v.type == 2 && ( + { + UpdateHomeData(); + UpdateTaskList(); + }} + /> + )} + {v.type == 5 && ( + { + UpdateHomeData(); + UpdateTaskList(); + }} + /> + )} + {v.type == 6 && ( + { + UpdateHomeData(); + UpdateTaskList(); + }} + /> + )} + {v.type == 7 && ( + { + UpdateHomeData(); + UpdateTaskList(); + }} + /> + )} + {v.type == 8 && ( + { + UpdateHomeData(); + UpdateTaskList(); + }} + /> + )} + + ))} +
    @@ -98,31 +178,62 @@ export default function () {
    Your rewards - +{signReward || 0} PIONEER + +{myReward || 0} SCTT
    - {/* */} - Join Telegram - {tgReward || 0} -
    - -
    - {/* */} - - Follow X @PioneerPortal - {xReward || 0} -
    - -
    - {/* */} - Invite friends - {0} + {inviteReward || 0}
    ); } + +function TaskItem({ + title, + task_id, + task_url, + type, + buttom_text, + button_disable, + onTaskSuccess, +}: { + task_id: string; + task_url: string; + title: string; + type: taskConfigurationListItem["type"]; + buttom_text: string; + button_disable?: boolean; + onTaskSuccess?: () => void; +}) { + const WebApp = useWebApp(); + return ( +
  • +
    + {(type == 1 || type == 2) && } + {(type == 5 || type == 6 || type == 7 || type == 8) && ( + + )} + {title} + +
    +
    + Reward + +1,000 SCTT +
    +
    • + ); +} diff --git a/src/pages/Index.tsx b/src/pages/Index.tsx index f6e924c..fc5d7db 100644 --- a/src/pages/Index.tsx +++ b/src/pages/Index.tsx @@ -25,7 +25,7 @@ const tabs = [ }, { key: "2", - title: "Frends", + title: "friends", icon: , }, ]; @@ -38,7 +38,7 @@ export default function () { } /> } /> - } /> + } />
    diff --git a/src/pages/Leaderboard-m.module.css b/src/pages/Leaderboard-m.module.css index 74a2239..91afbd2 100644 --- a/src/pages/Leaderboard-m.module.css +++ b/src/pages/Leaderboard-m.module.css @@ -30,7 +30,11 @@ align-items: center; padding: 13px 15px; - background: #1e1e1e; + /* background: #1e1e1e; */ + background-image: url("../assets/user_rank_bg.svg"); + background-repeat: no-repeat; + background-size: contain; + border-radius: 0px; gap: 12px; margin-top: 38px; > div { diff --git a/src/pages/Leaderboard.tsx b/src/pages/Leaderboard.tsx index d401c45..cc1e2d7 100644 --- a/src/pages/Leaderboard.tsx +++ b/src/pages/Leaderboard.tsx @@ -1,7 +1,7 @@ /* * @LastEditors: John * @Date: 2024-07-13 16:08:04 - * @LastEditTime: 2024-07-17 09:51:09 + * @LastEditTime: 2024-07-19 14:55:57 * @Author: John */ import { Avatar, Button } from "antd-mobile"; @@ -37,15 +37,11 @@ export default function () {
    {userRank?.tgName} - {userRank?.amount} PIONEER + {userRank?.amount || 0} SCTT
    #{userRank?.ranking} - {totalUser || 0} holders
      {ranks?.map((v, i) => ( @@ -76,7 +72,7 @@ function RankItem({
      {userName} - {point} PIONEER + {point} SCTT
      {index == 1 && ( diff --git a/src/server/api.ts b/src/server/api.ts index 09bb2c0..1ed876d 100644 --- a/src/server/api.ts +++ b/src/server/api.ts @@ -1,11 +1,16 @@ /* * @LastEditors: John * @Date: 2024-07-15 10:35:20 - * @LastEditTime: 2024-07-16 16:04:49 + * @LastEditTime: 2024-07-19 15:50:19 * @Author: John */ import { GET, POST } from "./client"; -import { RewardVo, subordinatesUsers, userBenefits } from "./module"; +import { + RewardVo, + subordinatesUsers, + taskConfigurationListItem, + userBenefits, +} from "./module"; // 登录 export function api_login() { @@ -50,7 +55,7 @@ export function api_ranking() { // 首页查询用户收益 export function api_homepage_query_user_income() { - return GET({ + return GET({ url: "/api/reward/userBenefits", }); } @@ -90,7 +95,7 @@ export function api_get_user_information() { // 首页下级用户 export function api_homepage_subordinates_users() { - return GET({ + return GET<{ level: number }, subordinatesUsers[]>({ url: "/api/reward/subordinateUsers", }); } @@ -101,3 +106,17 @@ export function api_follow_twitter() { url: "/api/reward/followTwitter", }); } + +// 查询任务配置列表 + +export function api_query_task_configuration_list() { + return GET({ + url: "/api/task-config", + }); +} + +export function api_start_task() { + return POST({ + url: "/api/task-config", + }); +} diff --git a/src/server/module.d.ts b/src/server/module.d.ts index 8bf5cc9..39e80ac 100644 --- a/src/server/module.d.ts +++ b/src/server/module.d.ts @@ -30,9 +30,9 @@ export type userBenefits = { export type subordinatesUsers = { account: string; - amount: string; accountType: number; allPid: string; + amount: string; chainType: number; codePrompt: number; createTime: string; @@ -53,3 +53,16 @@ export type subordinatesUsers = { userImg: string; userType: number; }; + +export type taskConfigurationListItem = { + createTime: string; + externalId: string; + flag: 0 | 1; // 标记删除，0 / 1 + id: string; + opValue: string; + status: 0 | 1 | 2; // 0:已下架(前端不在显示) 1:进行中 2:已结束 + taskType: 0 | 1; // 0:任务为完成 1：任务已完成 + taskUrl: string; + type: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8; // 1:加入TG频道 2:加入TG群 3:直推积分 4:间推积分 5:关注推特 6:推特点赞 7:转发推特 8:引用推特 + updateTime: string; +};