feat: 初始化

src/components/abnormal/index.vue

@@ -0,0 +1,107 @@
+<script setup lang="ts" name="Abnormal">
+import { computed } from "vue";
+import { useRouter } from "vue-router";
+import { ButtonType } from "vant/es/button/types";
+import IconAndText from "./iconAndText.vue";
+
+interface buttonItem {
+    text: string;
+    code: string;
+    type: ButtonType;
+    handler(): void;
+}
+
+interface buttonInfo {
+    back: buttonItem;
+    reload: buttonItem;
+    home: buttonItem;
+}
+
+const props = defineProps<{
+    icon?: string;
+    text?: string;
+    from?: string;
+    buttonHidden?: boolean;
+    buttonList?: Array<string>;
+}>();
+
+const router = useRouter();
+
+const defaultIcon = new URL("../../assets/svg/failed.svg", import.meta.url).href;
+
+const defaultText = "抱歉，出现意外错误了";
+
+const backHandler = () => {
+    router.back();
+};
+
+const homeHandler = () => {
+    router.push({
+        path: "/"
+    });
+};
+
+const reloadHandler = () => {
+    router.push({
+        path: props.from || "/"
+    });
+};
+
+const defaultButtonList = ["back", "reload"]; // back, reload, home
+
+const renderButtonList = (props.buttonList && props.buttonList.length > 0) ? props.buttonList : defaultButtonList;
+
+const buttonItemInfo: buttonInfo = {
+    "reload": {
+        text: "重试",
+        type: "primary",
+        code: "reload",
+        handler: reloadHandler
+    },
+    "back": {
+        text: "返回",
+        type: "default",
+        code: "back",
+        handler: backHandler
+    },
+    "home": {
+        text: "首页",
+        type: "primary",
+        code: "home",
+        handler: homeHandler
+    }
+};
+
+const renderItemList = computed(() => {
+    const arr = [];
+    for (let index = 0; index < renderButtonList.length; index++) {
+        const key = renderButtonList[index];
+        const item = buttonItemInfo[key as keyof typeof buttonItemInfo];
+        arr.push(item);
+    }
+    return arr;
+});
+
+</script>
+
+<template>
+  <div class="xtbg-tips-page">
+    <IconAndText :icon="icon || defaultIcon" :text="text || defaultText" />
+    <div v-if="!buttonHidden" class="xtbg-tips-page-btn">
+      <template v-if="$slots.button">
+        <slot name="button"></slot>
+      </template>
+      <template v-else>
+        <van-button
+          v-for="item in renderItemList"
+          :key="item.code"
+          class="xtbg-tips-page-btn-class"
+          :type="item.type"
+          @click="item.handler"
+        >
+          {{ item.text }}
+        </van-button>
+      </template>
+    </div>
+  </div>
+</template>