This commit is contained in:
张成
2025-12-07 00:25:38 +08:00
parent 82b6b6f80e
commit d8a949c7ea
3 changed files with 73 additions and 20 deletions

View File

@@ -1,7 +1,8 @@
.empty_state_page {
width: 100%;
min-height: 100vh;
background: #3f3f3f;
// 白色渐变背景(从设计稿参考)
background: linear-gradient(180deg, #FFFFFF 0%, #F5F5F5 100%);
position: relative;
display: flex;
flex-direction: column;
@@ -18,18 +19,15 @@
min-height: calc(100vh - 98px);
}
// 背景图片
&__bg_image {
// 空状态图片
&__icon {
position: absolute;
top: 178px;
left: 84px;
left: 50%;
transform: translateX(-50%);
width: 221.17px;
height: 200px;
background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjIyIiBoZWlnaHQ9IjIwMCIgdmlld0JveD0iMCAwIDIyMiAyMDAiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxyZWN0IHdpZHRoPSIyMjIiIGhlaWdodD0iMjAwIiBmaWxsPSIjRkZGRkZGIiBmaWxsLW9wYWNpdHk9IjAuMiIvPgo8L3N2Zz4K');
background-size: contain;
background-repeat: no-repeat;
background-position: center;
opacity: 0.2;
opacity: 0.8; // 图片透明度
z-index: 0;
}
@@ -41,7 +39,7 @@
transform: translateX(-50%);
z-index: 1;
padding: 8px 16px;
background: rgba(0, 0, 0, 0.5);
background: rgba(0, 0, 0, 0.05); // 白色背景下使用浅色背景
border-radius: 4px;
white-space: nowrap;
@@ -50,7 +48,7 @@
font-weight: 400;
font-size: 15px;
line-height: 1.6;
color: #ffffff;
color: rgba(0, 0, 0, 0.65); // 白色背景下使用深色文字
text-align: center;
}
}
@@ -89,8 +87,9 @@
// 主要按钮(去看看其他球局)
&--primary {
background: linear-gradient(154deg, rgba(255, 255, 255, 1) 0%, rgba(234, 234, 234, 1) 100%);
background:#000000;
border: 2px solid rgba(0, 0, 0, 0.06);
color: #FFFFFF;
}
// 次要按钮(返回首页)

View File

@@ -1,8 +1,23 @@
/**
* 球局详情页 - 空状态(兜底页面)
* 当球局不存在或已删除时显示的页面
*
* Figma 设计稿参考:
* https://www.figma.com/design/EWQlX5wM2lhiSLfFQp8qKT/小程序设计稿V1开发协作版
*/
/**
* 球局详情页 - 空状态(兜底页面)
* 当球局不存在或已删除时显示的页面
*
* Figma 设计稿参考:
* https://www.figma.com/design/EWQlX5wM2lhiSLfFQp8qKT/小程序设计稿V1开发协作版?node-id=7183-68082&t=pFQxnqJSKzz9ls8h-0
*/
import React, { useState, useEffect } from 'react';
import { View, Text } from '@tarojs/components';
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';
interface EmptyStateProps {
@@ -29,12 +44,13 @@ const EmptyState: React.FC<EmptyStateProps> = ({ onGoToOtherGames, onGoToHome })
return () => clearTimeout(timer);
}, [countdown]);
// 跳转到其他球局
// 跳转到其他球局 - 返回首页列表
const handle_go_to_other_games = () => {
if (onGoToOtherGames) {
onGoToOtherGames();
} else {
Taro.switchTab({
// 使用 redirectTo 跳转到首页列表页main_pages/index 默认显示 list tab
(Taro as any).redirectTo({
url: '/main_pages/index',
});
}
@@ -45,13 +61,14 @@ const EmptyState: React.FC<EmptyStateProps> = ({ onGoToOtherGames, onGoToHome })
if (onGoToHome) {
onGoToHome();
} else {
const pages = Taro.getCurrentPages();
const pages = (Taro as any).getCurrentPages();
if (pages.length <= 1) {
Taro.switchTab({
// 使用 redirectTo 跳转到首页列表页
(Taro as any).redirectTo({
url: '/main_pages/index',
});
} else {
Taro.navigateBack();
(Taro as any).navigateBack();
}
}
};
@@ -61,8 +78,12 @@ const EmptyState: React.FC<EmptyStateProps> = ({ onGoToOtherGames, onGoToHome })
<GeneralNavbar title="" showBack={true} />
<View className="empty_state_page__content">
{/* 背景图片 */}
<View className="empty_state_page__bg_image" />
{/* 空状态图片 */}
<Image
className="empty_state_page__icon"
src={emptyStateIcon}
mode="aspectFit"
/>
{/* 提示文字 */}
<View className="empty_state_page__tip">