列表

src/components/ListLoadError/index.module.scss

@@ -0,0 +1,44 @@
+.listLoadError {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  min-height: 400px;
+
+  .listLoadErrorImg {
+    width: 154px;
+    height: 154px;
+  }
+
+  .listLoadErrorText {
+    margin-top: 35px;
+    margin-bottom: 12px;
+    font-weight: 500;
+    font-style: Medium;
+    font-size: 14px;
+    line-height: 24px;
+    letter-spacing: 0px;
+  }
+
+  .listLoadErrorBtn {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 76px;
+    background: #00000008;
+    border: 0.5px solid #0000001F;
+    border-radius: 12px;
+    padding: 12px 0;
+    font-weight: 500;
+    font-style: Medium;
+    font-size: 14px;
+    line-height: 24px;
+    letter-spacing: 0px;
+
+  }
+
+  .reloadIcon {
+    width: 16px;
+    height: 16px;
+  }
+}

src/components/ListLoadError/index.tsx

@@ -0,0 +1,24 @@
+import { Image, View, Text, Button } from "@tarojs/components";
+import styles from "./index.module.scss";
+import img from "@/config/images";
+
+const ListLoadError = ({ reload }: { reload: () => void }) => {
+  const handleReload = () => {
+    reload && typeof reload === "function" && reload();
+  };
+
+  return (
+    <View className={styles.listLoadError}>
+      <Image
+        className={styles.listLoadErrorImg}
+        src={img.ICON_LIST_LOAD_ERROR}
+      />
+      <Text className={styles.listLoadErrorText}>加载失败</Text>
+      <Button className={styles.listLoadErrorBtn} onClick={handleReload}>
+        <Image src={img?.ICON_LIST_RELOAD} className={styles.reloadIcon} />
+        重试
+      </Button>
+    </View>
+  );
+};
+export default ListLoadError;