From 8fb2c4eaa7a0f8eb15f06d11802118e38164ec50 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=BC=A0=E6=88=90?= Date: Tue, 9 Dec 2025 13:59:02 +0800 Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9=20=E7=90=83=E5=B1=80?= =?UTF-8?q?=E8=AF=A6=E6=83=85=EF=BC=8C=E6=B7=BB=E5=8A=A0=20=E9=A1=B5?= =?UTF-8?q?=E9=9D=A2=E4=B8=8D=E9=80=82=E7=94=A8=E7=BB=84=E4=BB=B6?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/app.config.ts | 1 + src/game_pages/detail/index.tsx | 40 +++---- src/other_pages/emptyState/index.config.ts | 5 + src/other_pages/emptyState/index.scss | 116 +++++++++++++++++++++ src/other_pages/emptyState/index.tsx | 91 ++++++++++++++++ src/services/detailService.ts | 2 + src/services/httpService.ts | 8 +- src/services/loginService.ts | 1 + 8 files changed, 233 insertions(+), 31 deletions(-) create mode 100644 src/other_pages/emptyState/index.config.ts create mode 100644 src/other_pages/emptyState/index.scss create mode 100644 src/other_pages/emptyState/index.tsx diff --git a/src/app.config.ts b/src/app.config.ts index 4726a01..5b5af4f 100644 --- a/src/app.config.ts +++ b/src/app.config.ts @@ -56,6 +56,7 @@ export default defineAppConfig({ "favorites/index", // 收藏页 "ntrp-evaluate/index", // NTRP评估页 "enable_notification/index", // 开启消息通知 + "emptyState/index", // 空状态页面 ], }, ], diff --git a/src/game_pages/detail/index.tsx b/src/game_pages/detail/index.tsx index a25d79e..41f0ec5 100644 --- a/src/game_pages/detail/index.tsx +++ b/src/game_pages/detail/index.tsx @@ -22,7 +22,6 @@ import Participants from "./components/Participants"; import SupplementalNotes from "./components/SupplementalNotes"; import OrganizerInfo from "./components/OrganizerInfo"; import SharePopup from "./components/SharePopup"; -import EmptyState from "./components/EmptyState"; import { navto, toast } from "@/utils/helper"; import ArrowLeft from "@/static/detail/icon-arrow-left.svg"; // import Logo from "@/static/detail/icon-logo-go.svg"; @@ -30,7 +29,6 @@ import styles from "./index.module.scss"; function Index() { const [detail, setDetail] = useState({}); - const [showEmptyState, setShowEmptyState] = useState(false); const { params } = useRouter(); const [currentLocation, setCurrentLocation] = useState<[number, number]>([ 0, 0, @@ -92,18 +90,20 @@ function Index() { const fetchDetail = async () => { if (!id) return; - try { - const res = await DetailService.getDetail(Number(id)); - if (res.code === 0) { - setDetail(res.data); - fetchUserInfoById(res.data.publisher_id); - setShowEmptyState(false); - } - } catch (e) { - if (e.message === "球局不存在") { - setShowEmptyState(true); - } + + const res = await DetailService.getDetail(Number(id)).catch(e => { + // 跳转到空状态页面 + (Taro as any).redirectTo({ + url: '/other_pages/emptyState/index', + }); + return e; + }); + + if (res.code === 0) { + setDetail(res.data); + fetchUserInfoById(res.data.publisher_id); } + // Taro.hideLoading(); }; @@ -175,20 +175,6 @@ function Index() { setGlass(top > 20); }, 16); - // 如果显示空状态，渲染空状态页面 - if (showEmptyState) { - return ( - { - Taro.switchTab({ - url: "/main_pages/index", - }); - }} - onGoToHome={handleBack} - /> - ); - } - const [scrollToTarget, setScrollToTarget] = useState(""); return ( diff --git a/src/other_pages/emptyState/index.config.ts b/src/other_pages/emptyState/index.config.ts new file mode 100644 index 0000000..f8662af --- /dev/null +++ b/src/other_pages/emptyState/index.config.ts @@ -0,0 +1,5 @@ +export default definePageConfig({ + navigationBarTitleText: '', + navigationStyle: 'custom', +}); + diff --git a/src/other_pages/emptyState/index.scss b/src/other_pages/emptyState/index.scss new file mode 100644 index 0000000..66ab5ed --- /dev/null +++ b/src/other_pages/emptyState/index.scss @@ -0,0 +1,116 @@ +.empty_state_page { + width: 100%; + min-height: 100vh; + // 白色渐变背景（从设计稿参考） + background: linear-gradient(180deg, #FFFFFF 0%, #F5F5F5 100%); + position: relative; + display: flex; + flex-direction: column; + overflow: hidden; + + &__content { + flex: 1; + display: flex; + flex-direction: column; + align-items: center; + justify-content: flex-start; + padding: 0; + position: relative; + min-height: calc(100vh - 98px); + } + + // 空状态图片 + &__icon { + position: absolute; + top: 178px; + left: 50%; + transform: translateX(-50%); + width: 221.17px; + height: 200px; + opacity: 0.8; // 图片透明度 + z-index: 0; + } + + // 提示文字 + &__tip { + position: absolute; + top: 418px; + left: 50%; + transform: translateX(-50%); + z-index: 1; + padding: 8px 16px; + background: rgba(0, 0, 0, 0.5); // 白色背景下使用浅色背景 + border-radius: 4px; + white-space: nowrap; + + &_text { + font-family: 'PingFang SC'; + font-weight: 400; + font-size: 15px; + line-height: 1.6; + color: #ffffff; // 白色背景下使用深色文字 + text-align: center; + } + } + + // 按钮区域 + &__buttons { + position: absolute; + bottom: 110px; + left: 0; + right: 0; + display: flex; + flex-direction: column; + gap: 10px; + padding: 0 20px; + z-index: 1; + align-items: center; + } + + // 按钮 + &__button { + display: flex; + justify-content: center; + align-items: center; + width: 251px; + height: 52px; + border-radius: 16px; + box-shadow: 0px 8px 64px 0px rgba(0, 0, 0, 0.1), + 0px 4px 36px 0px rgba(0, 0, 0, 0.25); + backdrop-filter: blur(32px); + cursor: pointer; + transition: opacity 0.3s; + + &:active { + opacity: 0.8; + } + + // 按钮文字样式 + &_text { + font-family: 'DingTalk JinBuTi'; + font-weight: 400; + font-size: 18px; + line-height: 1.11; + letter-spacing: -0.05em; + text-align: center; + color: #000000; + } + + // 主要按钮（去看看其他球局） + &--primary { + background: #000000; + border: 2px solid rgba(0, 0, 0, 0.06); + + .empty_state_page__button_text { + color: #ffffff; // 黑色背景下使用白色文字 + } + } + + // 次要按钮（返回首页） + &--secondary { + background: linear-gradient(154deg, rgba(255, 255, 255, 1) 0%, rgba(234, 234, 234, 1) 100%); + border: 2px solid rgba(0, 0, 0, 0.06); + } + } +} + diff --git a/src/other_pages/emptyState/index.tsx b/src/other_pages/emptyState/index.tsx new file mode 100644 index 0000000..3da481b --- /dev/null +++ b/src/other_pages/emptyState/index.tsx @@ -0,0 +1,91 @@ +/** + * 空状态页面 + * 当球局不存在或已删除时显示的独立页面 + */ +import React, { useState, useEffect } from 'react'; +import { View, Text, Image } from '@tarojs/components'; +import Taro from '@tarojs/taro'; +import { useGlobalState } from '@/store/global'; +import { GeneralNavbar } from '@/components'; +import emptyStateIcon from '@/static/emptyStatus/game-detail-empty.svg'; +import './index.scss'; + +function Index() { + const { statusNavbarHeightInfo } = useGlobalState() || {}; + const { totalHeight = 98 } = statusNavbarHeightInfo || {}; + const [countdown, setCountdown] = useState(5); + + // 倒计时自动返回 + useEffect(() => { + if (countdown <= 0) { + handle_go_to_home(); + return; + } + + const timer = setTimeout(() => { + setCountdown(countdown - 1); + }, 1000); + + return () => clearTimeout(timer); + }, [countdown]); + + // 跳转到其他球局 - 返回首页列表 + const handle_go_to_other_games = () => { + (Taro as any).redirectTo({ + url: '/main_pages/index', + }); + }; + + // 返回首页 + const handle_go_to_home = () => { + const pages = Taro.getCurrentPages(); + if (pages.length <= 1) { + Taro.redirectTo({ + url: '/main_pages/index', + }); + } else { + Taro.navigateBack(); + } + }; + + return ( + + + + + {/* 空状态图片 */} + + + {/* 提示文字 */} + + + 页面将在 {countdown}s 后自动返回球局首页 + + + + {/* 按钮区域 */} + + + 去看看其他球局 + + + 返回首页 + + + + + ); +} + +export default Index; + diff --git a/src/services/detailService.ts b/src/services/detailService.ts index 0467c65..17e3317 100644 --- a/src/services/detailService.ts +++ b/src/services/detailService.ts @@ -76,6 +76,7 @@ export interface GameData { max_participants: number; weather: Weather[]; user_action_status: UserActionStatus; + is_disabled: number; } export enum MATCH_STATUS { @@ -107,6 +108,7 @@ class GameDetailService { { id }, { showLoading: false, + showToast: false, }, ); } diff --git a/src/services/httpService.ts b/src/services/httpService.ts index 3b57279..664f331 100644 --- a/src/services/httpService.ts +++ b/src/services/httpService.ts @@ -159,7 +159,7 @@ class HttpService { if (statusCode !== HTTP_STATUS.SUCCESS) { this.handleHttpError(statusCode) reject(new Error(`HTTP Error: ${statusCode}`)) - return + return response.data } // 业务状态码检查 @@ -175,7 +175,7 @@ class HttpService { url: '/login_pages/index/index' }) reject(new Error('用户不存在')) - return + return response.data } @@ -187,13 +187,13 @@ class HttpService { } else { reject(response.data) } - return + return response.data } } - resolve(data) + resolve(response.data) }) } diff --git a/src/services/loginService.ts b/src/services/loginService.ts index de46e72..cae9d8e 100644 --- a/src/services/loginService.ts +++ b/src/services/loginService.ts @@ -397,6 +397,7 @@ export const getUserInfoById = async (id) => { { id }, { showLoading: false, + showToast: false, // 不显示错误弹窗 } ); return response;