优化样式

This commit is contained in:
2025-10-04 11:42:20 +08:00
parent f6a1568719
commit 2dd634c921
9 changed files with 48 additions and 31 deletions

View File

@@ -5,10 +5,13 @@ import img from "@/config/images";
interface IProps {
reload?: () => void;
text?: string;
errorImg?: string;
btnText?: string;
btnImg?: string;
}
const ListLoadError = (props: IProps) => {
const { reload, text } = props;
const { reload, text, errorImg, btnText, btnImg } = props;
const handleReload = () => {
reload && typeof reload === "function" && reload();
};
@@ -17,13 +20,13 @@ const ListLoadError = (props: IProps) => {
<View className={styles.listLoadError}>
<Image
className={styles.listLoadErrorImg}
src={img.ICON_LIST_LOAD_ERROR}
src={errorImg ? img[errorImg] : img.ICON_LIST_LOAD_ERROR}
/>
{text && <Text className={styles.listLoadErrorText}>{text}</Text>}
{reload && (
<Button className={styles.listLoadErrorBtn} onClick={handleReload}>
<Image src={img?.ICON_LIST_RELOAD} className={styles.reloadIcon} />
<Image src={btnImg ? img[btnImg] : img?.ICON_LIST_RELOAD} className={styles.reloadIcon} />
{btnText ? " " + btnText : "重试"}
</Button>
)}
</View>

View File

@@ -107,7 +107,7 @@
}
.upload-popup-image-list-empty-image {
width: 80%;
width: 52%;
aspect-ratio: 4/3;
height: auto;
}

View File

@@ -49,6 +49,7 @@ export default {
ICON_LIST_PLAYING_GAME: require('@/static/list/icon-paying-game.svg'),
ICON_LIST_LOAD_ERROR: require('@/static/list/icon-load-error.svg'),
ICON_LIST_RELOAD: require('@/static/list/icon-reload.svg'),
ICON_LIST_EMPTY: require('@/static/emptyStatus/publish-empty.png'),
ICON_LIST_SEARCH_SEARCH: require('@/static/search/icon-search.svg'),
ICON_LIST_SEARCH_BACK: require('@/static/search/icon-back.svg'),
ICON_LIST_SEARCH_CLEAR: require('@/static/search/icon-search-clear.svg'),

View File

@@ -18,6 +18,10 @@ const ListContainer = (props) => {
reload,
// recommendList,
loadMoreMatches,
errorImg,
emptyText,
btnText,
btnImg,
} = props;
const timerRef = useRef<NodeJS.Timeout | null>(null);
@@ -78,7 +82,7 @@ const ListContainer = (props) => {
const renderList = (list) => {
// 请求数据为空
if (!loading && (!list || list?.length === 0)) {
return <ListLoadError reload={reload} text="暂无数据" />;
return <ListLoadError reload={reload} errorImg={errorImg} btnText={btnText} btnImg={btnImg} text={emptyText || "暂无数据"} />;
}
// 渲染数据

View File

@@ -392,6 +392,10 @@
justify-content: center;
gap: 12px;
Image {
width: 52vw;
}
.emptyTip {
color: rgba(0, 0, 0, 0.85);
font-feature-settings: "liga" off, "clig" off;

View File

@@ -403,7 +403,7 @@ const OrderList = () => {
)}
{flatList.length === 0 && (
<View className={styles.emptyNotice}>
<Image src={emptyContent} />
<Image mode="widthFix" src={emptyContent} />
<Text className={styles.emptyTip}></Text>
</View>
)}

Binary file not shown.

Before

Width:  |  Height:  |  Size: 13 KiB

After

Width:  |  Height:  |  Size: 15 KiB

View File

@@ -255,6 +255,10 @@ const MyselfPage: React.FC = () => {
recommendList={[]}
loading={loading}
error={null}
errorImg="ICON_LIST_EMPTY"
emptyText="暂未发布球局"
btnText="去发布"
btnImg="ICON_ADD"
reload={load_game_data}
loadMoreMatches={() => {}}
/>
@@ -278,7 +282,7 @@ const MyselfPage: React.FC = () => {
recommendList={[]}
loading={loading}
error={null}
reload={load_game_data}
errorImg="ICON_LIST_EMPTY"
loadMoreMatches={() => {}}
/>
</ScrollView>

View File

@@ -72,9 +72,8 @@ const OtherUserPage: React.FC = () => {
nickname: userData.nickname || "",
avatar: userData.avatar_url || "",
join_date: userData.subscribe_time
? `${new Date(userData.subscribe_time).getFullYear()}${
new Date(userData.subscribe_time).getMonth() + 1
}月加入`
? `${new Date(userData.subscribe_time).getFullYear()}${new Date(userData.subscribe_time).getMonth() + 1
}月加入`
: "",
stats: {
following: userData.stats?.following_count || 0,
@@ -237,16 +236,17 @@ const OtherUserPage: React.FC = () => {
{/* 球局列表 */}
{/* <View className="game_list_section"> */}
<ScrollView scrollY>
<ListContainer
data={game_records}
recommendList={[]}
loading={loading}
error={null}
reload={load_game_data}
loadMoreMatches={() => {}}
/>
</ScrollView>
<ScrollView scrollY>
<ListContainer
data={game_records}
recommendList={[]}
loading={loading}
error={null}
errorImg="ICON_LIST_EMPTY"
emptyText="暂无消息,去互动看看吧"
loadMoreMatches={() => { }}
/>
</ScrollView>
{/* </View> */}
{/* 球局卡片 */}
@@ -272,16 +272,17 @@ const OtherUserPage: React.FC = () => {
{/* 球局列表 */}
{/* <View className="game_list_section"> */}
<ScrollView scrollY>
<ListContainer
data={ended_game_records}
recommendList={[]}
loading={loading}
error={null}
reload={load_game_data}
loadMoreMatches={() => {}}
/>
</ScrollView>
<ScrollView scrollY>
<ListContainer
data={ended_game_records}
recommendList={[]}
loading={loading}
error={null}
errorImg="ICON_LIST_EMPTY"
emptyText="暂无消息,去互动看看吧"
loadMoreMatches={() => { }}
/>
</ScrollView>
{/* </View> */}
{/* 球局卡片 */}