115 lines
4.7 KiB
Vue
115 lines
4.7 KiB
Vue
<template>
|
|
<router-view />
|
|
<van-tabbar route v-if="!hide_bottom_tab && user.enabled && user.is_registered && current_role && user.real_name" :before-change="tab_change_check">
|
|
<van-tabbar-item name="首页" replace to="/" icon="home-o">首页</van-tabbar-item>
|
|
<template v-if="is_student">
|
|
<van-tabbar-item name="课程" replace to="/clazz" icon="calendar-o">课程</van-tabbar-item>
|
|
<van-tabbar-item name="打卡" replace to="/daka" icon="completed-o">打卡</van-tabbar-item>
|
|
</template>
|
|
<template v-if="is_teacher">
|
|
<van-tabbar-item name="教学资源库" replace to="/course/summary" icon="music-o">教学资源库</van-tabbar-item>
|
|
<van-tabbar-item name="课程" replace to="/clazz" icon="calendar-o">课程</van-tabbar-item>
|
|
<van-tabbar-item name="打卡" replace to="/daka" icon="completed-o">打卡</van-tabbar-item>
|
|
</template>
|
|
<template v-if="is_admin">
|
|
<van-tabbar-item name="教师管理" replace to="/admin/teachers" icon="manager-o">教师管理</van-tabbar-item>
|
|
<van-tabbar-item name="课程体系类型" replace to="/admin/course-category" icon="music-o">课程体系类型</van-tabbar-item>
|
|
</template>
|
|
<template v-if="is_tester">
|
|
</template>
|
|
<van-tabbar-item name="我的" replace :to="`/${current_role}/profile`" :badge="user.unread_tongzhi_count" :badge-props="badge_props" icon="user-o">我的</van-tabbar-item>
|
|
</van-tabbar>
|
|
<van-tabbar route v-else-if="is_guest" :before-change="tab_change_check">
|
|
<van-tabbar-item name="首页" replace to="/" icon="home-o">首页</van-tabbar-item>
|
|
<van-tabbar-item name="我的" replace to="/guest/profile" icon="user-o">我的</van-tabbar-item>
|
|
</van-tabbar>
|
|
<van-overlay :show="!!loading" :style="{zIndex: 3000}">
|
|
<div class="loading">
|
|
<van-loading type="spinner" color="#ffffff" />
|
|
</div>
|
|
</van-overlay>
|
|
</template>
|
|
|
|
<script lang="ts">
|
|
import {computed, defineComponent, onMounted, watch} from 'vue';
|
|
import {Tabbar, TabbarItem, Overlay, Loading, BadgeProps, showConfirmDialog} from 'vant';
|
|
import useUser from "~/store/user";
|
|
import {isIOS, WebViewEntryUrl} from '~/utils';
|
|
import {HtyBaseRoles, HtyStates, HtySuperRoles} from "~/types";
|
|
import useLoading from "~/store/loading";
|
|
import usePool from "~/store/pool";
|
|
|
|
export default defineComponent({
|
|
name: "App",
|
|
components: {
|
|
[Tabbar.name!]: Tabbar,
|
|
[TabbarItem.name!]: TabbarItem,
|
|
[Overlay.name!]: Overlay,
|
|
[Loading.name!]: Loading
|
|
},
|
|
setup() {
|
|
let {store} = useUser();
|
|
const { loading } = useLoading();
|
|
const {getKey} = usePool()
|
|
if (isIOS()) {
|
|
console.log('href...', window.location.href)
|
|
window.localStorage.setItem(WebViewEntryUrl, window.location.href);
|
|
}
|
|
|
|
const user = computed(() => store.current)
|
|
const is_student = computed(() => store.currentRole === HtyBaseRoles.STUDENT);
|
|
const is_teacher = computed(() => store.currentRole === HtyBaseRoles.TEACHER);
|
|
const is_admin = computed(() => store.currentRole === HtySuperRoles.ADMIN)
|
|
const is_tester = computed(() => store.currentRole === HtySuperRoles.TESTER);
|
|
const is_supervisor = computed(() => store.currentRole === HtySuperRoles.SUPERVISOR);
|
|
const current_role = computed(() => store.currentRole?.toLowerCase())
|
|
const is_guest = computed(() => !user.value.is_registered || !user.value.enabled)
|
|
|
|
console.log(user.value, is_guest.value)
|
|
|
|
const badge_props: Partial<BadgeProps> = { showZero: false, max: 99 }
|
|
|
|
onMounted(() => {
|
|
let vconsole = document.getElementById("__vconsole");
|
|
if (vconsole) {
|
|
vconsole.hidden = true;
|
|
}
|
|
})
|
|
|
|
watch(() => store.current, () => {
|
|
let haveTester = store.current.roles?.some(r => r.role_status === HtyStates.ACTIVE && r.labels?.some(l => l.label_name === 'SYS_TESTER' && l.label_status === HtyStates.ACTIVE));
|
|
console.log('has tester...', haveTester, store.current.roles)
|
|
let vconsole = document.getElementById("__vconsole");
|
|
if (vconsole) {
|
|
vconsole.hidden = !haveTester;
|
|
}
|
|
})
|
|
|
|
const tab_change_check = (name: number | string) => {
|
|
console.log('tab change...', name, is_guest.value, is_teacher.value, store.currentRole)
|
|
if (store.editing) {
|
|
return showConfirmDialog({
|
|
title: "注意！",
|
|
message: `您正在编辑的内容将会丢失，确认跳转到【${name}】页面？`
|
|
})
|
|
}
|
|
return true;
|
|
}
|
|
|
|
const hide_bottom_tab = computed(() => getKey("hide_bottom_tab"))
|
|
|
|
|
|
return {user, is_student, is_teacher, is_admin, is_tester, is_guest, current_role, loading, badge_props, tab_change_check, hide_bottom_tab}
|
|
}
|
|
});
|
|
</script>
|
|
|
|
<style scoped lang="less">
|
|
.loading {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
height: 100%;
|
|
}
|
|
</style>
|