diff --git a/src/components/NTRPPopupGuide/index.module.scss b/src/components/NTRPPopupGuide/index.module.scss index e69de29..a277b5d 100644 --- a/src/components/NTRPPopupGuide/index.module.scss +++ b/src/components/NTRPPopupGuide/index.module.scss @@ -0,0 +1,59 @@ +@mixin commonAvatarStyle($multiple: 1) { + .avatar { + flex: 0 0 auto; + width: calc(100px * $multiple); + height: calc(100px * $multiple); + display: flex; + align-items: center; + justify-content: center; + background-color: #fff; + border-radius: 50%; + border: 1px solid #efefef; + overflow: hidden; + box-shadow: 0 0 1px 0 rgba(0, 0, 0, 0.2), 0 8px 20px 0 rgba(0, 0, 0, 0.12); + + .avatarUrl { + width: calc(90px * $multiple); + height: calc(90px * $multiple); + border-radius: 50%; + border: 1px solid #efefef; + } + } + + .addonImage { + flex: 0 0 auto; + width: calc(88px * $multiple); + height: calc(88px * $multiple); + transform: rotate(8deg); + flex-shrink: 0; + aspect-ratio: 1/1; + border-radius: calc(20px * $multiple); + border: 4px solid #fff; + background: linear-gradient( + 0deg, + rgba(89, 255, 214, 0.2) 0%, + rgba(89, 255, 214, 0.2) 100% + ), + #fff; + box-shadow: 0 4px 36px 0 rgba(0, 0, 0, 0.12); + display: flex; + align-items: center; + justify-content: center; + box-sizing: border-box; + margin-left: calc(-1 * 20px * $multiple); + + .docImage { + width: calc(48px * $multiple); + height: calc(48px * $multiple); + transform: rotate(-7deg); + flex-shrink: 0; + } + } +} + +.avatarWrap { + display: flex; + align-items: center; + justify-content: flex-start; + @include commonAvatarStyle(0.5); +} diff --git a/src/components/NTRPPopupGuide/index.tsx b/src/components/NTRPPopupGuide/index.tsx index ef3155d..229b538 100644 --- a/src/components/NTRPPopupGuide/index.tsx +++ b/src/components/NTRPPopupGuide/index.tsx @@ -1,21 +1,75 @@ import React from "react"; -import { View, Text } from "@tarojs/components"; +import { View, Text, Button, Image } from "@tarojs/components"; +import Taro from "@tarojs/taro"; +import { useUserInfo } from "@/store/userStore"; +import ArrwoRight from "@/static/ntrp/ntrp_arrow_right.svg"; +import CloseIcon from "@/static/ntrp/ntrp_popup_close.svg"; +import DocCopy from "@/static/ntrp/ntrp_doc_copy.svg"; import styles from "./index.module.scss"; -function NtrpPopupGuide() { +function NtrpPopupGuide(props: { close: () => void; skipGuide: () => void }) { + const { close, skipGuide } = props; + const userInfo = useUserInfo(); + + function handleTest() { + Taro.redirectTo({ + url: `/other_pages/ntrp-evaluate/index`, + }); + } return ( - - - - - + + + + + + + + + + {/* avatar side */} + + + + + + + 快速测一测✏️ + + + 你的 + ( + NTRP + ) + 水平? + 首次发布球局前,需完善 NTRP 水平信息 + + + + + + + + ); } diff --git a/src/components/PublishMenu/PublishMenu.tsx b/src/components/PublishMenu/PublishMenu.tsx index ce8e9ed..7ad6105 100644 --- a/src/components/PublishMenu/PublishMenu.tsx +++ b/src/components/PublishMenu/PublishMenu.tsx @@ -1,55 +1,53 @@ -import React, { useState } from 'react' -import { View, Text, Image } from '@tarojs/components' -import Taro from '@tarojs/taro' -import styles from './index.module.scss' -import images from '@/config/images' -import AiImportPopup from '@/publish_pages/publishBall/components/AiImportPopup' +import React, { useState } from "react"; +import { View, Text, Image } from "@tarojs/components"; +import Taro from "@tarojs/taro"; +import styles from "./index.module.scss"; +import images from "@/config/images"; +import AiImportPopup from "@/publish_pages/publishBall/components/AiImportPopup"; export interface PublishMenuProps { - onPersonalPublish?: () => void - onActivityPublish?: () => void + onPersonalPublish?: () => void; + onActivityPublish?: () => void; } const PublishMenu: React.FC = () => { - const [isVisible, setIsVisible] = useState(false) - const [aiImportVisible, setAiImportVisible] = useState(false) - + const [isVisible, setIsVisible] = useState(false); + const [aiImportVisible, setAiImportVisible] = useState(false); + const handleIconClick = () => { - setIsVisible(!isVisible) - } + setIsVisible(!isVisible); + }; const handleOverlayClick = () => { - setIsVisible(false) - } - const handleMenuItemClick = (type: 'individual' | 'group' | 'ai') => { + setIsVisible(false); + }; + const handleMenuItemClick = (type: "individual" | "group" | "ai") => { // 跳转到publishBall页面并传递type参数 - console.log(type, 'type'); - if (type === 'ai') { - setAiImportVisible(true) - setIsVisible(false) - return + console.log(type, "type"); + if (type === "ai") { + setAiImportVisible(true); + setIsVisible(false); + return; } Taro.navigateTo({ - url: `/publish_pages/publishBall/index?type=${type}` - }) - setIsVisible(false) - } + url: `/publish_pages/publishBall/index?type=${type}`, + }); + setIsVisible(false); + }; const handleAiImportClose = () => { - setAiImportVisible(false) - } + setAiImportVisible(false); + }; const handleManualPublish = () => { Taro.navigateTo({ - url: '/publish_pages/publishBall/index?type=individual' - }) - } - - + url: "/publish_pages/publishBall/index?type=individual", + }); + }; return ( - {/* 蒙层 */} - {isVisible && ( + {/* 蒙层 */} + {isVisible && ( )} {/* 菜单选项 */} @@ -57,15 +55,21 @@ const PublishMenu: React.FC = () => { handleMenuItemClick('individual')} + onClick={() => handleMenuItemClick("individual")} > - 发布个人约球 + + 发布个人约球 - + - 已订场,找球友;未订场,找搭子 + + 已订场,找球友;未订场,找搭子 + @@ -74,44 +78,53 @@ const PublishMenu: React.FC = () => { handleMenuItemClick('group')} + onClick={() => handleMenuItemClick("group")} > - - 发布畅打活动 + + 发布畅打活动 - + 认证球场官方组织 - - + + - {/* handleMenuItemClick('ai')} + onClick={() => handleMenuItemClick("ai")} > - 智能发布球局 + + 智能发布球局 - + + - - 识别文本/图片,快速导入球局信息 + + 识别文本/图片,快速导入球局信息 + - + - */} + )} {/* 绿色圆形按钮 */} @@ -124,7 +137,7 @@ const PublishMenu: React.FC = () => { onManualPublish={handleManualPublish} /> - ) -} + ); +}; -export default PublishMenu +export default PublishMenu; diff --git a/src/game_pages/detail/index.tsx b/src/game_pages/detail/index.tsx index 60038f8..d73eab5 100644 --- a/src/game_pages/detail/index.tsx +++ b/src/game_pages/detail/index.tsx @@ -315,7 +315,7 @@ function StickyButton(props) { const displayPrice = is_organizer ? 0 : price; // user_action_status.can_assess = true; // user_action_status.can_join = false; - console.log(user_action_status, "user_action"); + // console.log(user_action_status, "user_action"); const { can_assess, can_join, diff --git a/src/static/ntrp/ntrp_popup_close.svg b/src/static/ntrp/ntrp_popup_close.svg new file mode 100644 index 0000000..c2a9b6f --- /dev/null +++ b/src/static/ntrp/ntrp_popup_close.svg @@ -0,0 +1,4 @@ + + + + \ No newline at end of file