107 lines
2.4 KiB
Vue
107 lines
2.4 KiB
Vue
<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> |