优化样式

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 { interface IProps {
reload?: () => void; reload?: () => void;
text?: string; text?: string;
errorImg?: string;
btnText?: string;
btnImg?: string;
} }
const ListLoadError = (props: IProps) => { const ListLoadError = (props: IProps) => {
const { reload, text } = props; const { reload, text, errorImg, btnText, btnImg } = props;
const handleReload = () => { const handleReload = () => {
reload && typeof reload === "function" && reload(); reload && typeof reload === "function" && reload();
}; };
@@ -17,13 +20,13 @@ const ListLoadError = (props: IProps) => {
<View className={styles.listLoadError}> <View className={styles.listLoadError}>
<Image <Image
className={styles.listLoadErrorImg} 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>} {text && <Text className={styles.listLoadErrorText}>{text}</Text>}
{reload && ( {reload && (
<Button className={styles.listLoadErrorBtn} onClick={handleReload}> <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> </Button>
)} )}
</View> </View>

View File

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

View File

@@ -49,6 +49,7 @@ export default {
ICON_LIST_PLAYING_GAME: require('@/static/list/icon-paying-game.svg'), ICON_LIST_PLAYING_GAME: require('@/static/list/icon-paying-game.svg'),
ICON_LIST_LOAD_ERROR: require('@/static/list/icon-load-error.svg'), ICON_LIST_LOAD_ERROR: require('@/static/list/icon-load-error.svg'),
ICON_LIST_RELOAD: require('@/static/list/icon-reload.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_SEARCH: require('@/static/search/icon-search.svg'),
ICON_LIST_SEARCH_BACK: require('@/static/search/icon-back.svg'), ICON_LIST_SEARCH_BACK: require('@/static/search/icon-back.svg'),
ICON_LIST_SEARCH_CLEAR: require('@/static/search/icon-search-clear.svg'), ICON_LIST_SEARCH_CLEAR: require('@/static/search/icon-search-clear.svg'),

View File

@@ -18,6 +18,10 @@ const ListContainer = (props) => {
reload, reload,
// recommendList, // recommendList,
loadMoreMatches, loadMoreMatches,
errorImg,
emptyText,
btnText,
btnImg,
} = props; } = props;
const timerRef = useRef<NodeJS.Timeout | null>(null); const timerRef = useRef<NodeJS.Timeout | null>(null);
@@ -78,7 +82,7 @@ const ListContainer = (props) => {
const renderList = (list) => { const renderList = (list) => {
// 请求数据为空 // 请求数据为空
if (!loading && (!list || list?.length === 0)) { 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; justify-content: center;
gap: 12px; gap: 12px;
Image {
width: 52vw;
}
.emptyTip { .emptyTip {
color: rgba(0, 0, 0, 0.85); color: rgba(0, 0, 0, 0.85);
font-feature-settings: "liga" off, "clig" off; font-feature-settings: "liga" off, "clig" off;

View File

@@ -403,7 +403,7 @@ const OrderList = () => {
)} )}
{flatList.length === 0 && ( {flatList.length === 0 && (
<View className={styles.emptyNotice}> <View className={styles.emptyNotice}>
<Image src={emptyContent} /> <Image mode="widthFix" src={emptyContent} />
<Text className={styles.emptyTip}></Text> <Text className={styles.emptyTip}></Text>
</View> </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={[]} recommendList={[]}
loading={loading} loading={loading}
error={null} error={null}
errorImg="ICON_LIST_EMPTY"
emptyText="暂未发布球局"
btnText="去发布"
btnImg="ICON_ADD"
reload={load_game_data} reload={load_game_data}
loadMoreMatches={() => {}} loadMoreMatches={() => {}}
/> />
@@ -278,7 +282,7 @@ const MyselfPage: React.FC = () => {
recommendList={[]} recommendList={[]}
loading={loading} loading={loading}
error={null} error={null}
reload={load_game_data} errorImg="ICON_LIST_EMPTY"
loadMoreMatches={() => {}} loadMoreMatches={() => {}}
/> />
</ScrollView> </ScrollView>

View File

@@ -72,8 +72,7 @@ const OtherUserPage: React.FC = () => {
nickname: userData.nickname || "", nickname: userData.nickname || "",
avatar: userData.avatar_url || "", avatar: userData.avatar_url || "",
join_date: userData.subscribe_time join_date: userData.subscribe_time
? `${new Date(userData.subscribe_time).getFullYear()}${ ? `${new Date(userData.subscribe_time).getFullYear()}${new Date(userData.subscribe_time).getMonth() + 1
new Date(userData.subscribe_time).getMonth() + 1
}月加入` }月加入`
: "", : "",
stats: { stats: {
@@ -243,8 +242,9 @@ const OtherUserPage: React.FC = () => {
recommendList={[]} recommendList={[]}
loading={loading} loading={loading}
error={null} error={null}
reload={load_game_data} errorImg="ICON_LIST_EMPTY"
loadMoreMatches={() => {}} emptyText="暂无消息,去互动看看吧"
loadMoreMatches={() => { }}
/> />
</ScrollView> </ScrollView>
{/* </View> */} {/* </View> */}
@@ -278,8 +278,9 @@ const OtherUserPage: React.FC = () => {
recommendList={[]} recommendList={[]}
loading={loading} loading={loading}
error={null} error={null}
reload={load_game_data} errorImg="ICON_LIST_EMPTY"
loadMoreMatches={() => {}} emptyText="暂无消息,去互动看看吧"
loadMoreMatches={() => { }}
/> />
</ScrollView> </ScrollView>
{/* </View> */} {/* </View> */}