网站首页面:头部

develoop
significative 3 months ago
parent bbeb4d0ffd
commit eb8384491a
  1. 6
      src/Layout/main/index.vue
  2. 74
      src/Layout/tabbar/index.vue
  3. 42
      src/api/configuration.ts
  4. 22
      src/router/module/constRouter/index.ts
  5. 32
      src/store/module/adminInfo.ts
  6. 2
      src/store/module/user.ts

@ -6,10 +6,10 @@
</section> --> </section> -->
<div class="view-container"> <div class="view-container">
<div class="banner"> <div class="banner">
<img src="../../assets/images/banner4.jpg" alt=""> <img :src="adminInfoStore.info.promotionalImages" alt="" style="max-height: 409px;">
<div class="source-box"> <div class="source-box">
<div class="source"> <div class="source">
开源智慧教程管理系统 {{ adminInfoStore.info.name }}
</div> </div>
<div class="describe">首次开源</div> <div class="describe">首次开源</div>
</div> </div>
@ -20,6 +20,8 @@
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import useAdminInfoStore from '@/store/module/adminInfo'
const adminInfoStore = useAdminInfoStore()
import { } from 'vue' import { } from 'vue'
import { useRoute } from 'vue-router' import { useRoute } from 'vue-router'
const $route = useRoute() const $route = useRoute()

@ -1,24 +1,50 @@
<template> <template>
<div :class="!flog&&false ? 'tabbar' : 'tabbar-active'"> <div :class="!flog && false ? 'tabbar' : 'tabbar-active'">
<div class="container"> <div class="container">
<div class="logo-box"> <div class="logo-box">
<div class="logo"><img src="../../assets/images/LOGO.png"></div> <div class="logo"><img :src="adminInfoStore.info.logo"></div>
<div class="lesson">课图</div> <div class="lesson">课图</div>
</div> </div>
<div class="menu"> <div class="menu">
<ul> <ul>
<li :class="{ active: settingStore.useIndex === index }" v-for="(item, index) in constRouter[0].children" <template v-for="(item, index) in constRouter[0].children">
v-show="!item.meta.hidden" :key="item.path" @click="goToRouter(item, index)"> <li v-if="index < 2" :class="{ active: settingStore.useIndex === index }" v-show="!item.meta.hidden"
<div>{{ item.meta.title }}</div> @click="goToRouter(item, index)">
</li> <div>{{ item.meta.title }}</div>
<li v-if="$route.path != '/home'" @click="$router.push('/')">回到首页</li> </li>
</template>
<li @click="skip('http://localhost:5173/#/curriculumCenter/basicCourseInformation')">学习路径</li>
<template v-for="(item, index) in constRouter[0].children">
<li v-if="index >= 2" :class="{ active: settingStore.useIndex === index }" v-show="!item.meta.hidden"
@click="goToRouter(item, index)">
<div>{{ item.meta.title }}</div>
</li>
</template>
<div v-if="isLogin">
<img :src="data.icon" alt="" style="width: 24px; height: 24px; margin: 0 10px; border-radius: 50%" />
<el-dropdown @command="handleCommand">
<span class="el-dropdown-link" style="color: #fff;">
{{ data.username }}
<el-icon class="el-icon--right">
<arrow-down />
</el-icon>
</span>
<template #dropdown>
<el-dropdown-menu>
<el-dropdown-item command="A">退出登录</el-dropdown-item>
</el-dropdown-menu>
</template>
</el-dropdown>
</div>
<li v-else @click="skip('http://localhost:5173/#/login?redirect=/configurationPage')">登录注册</li>
<!-- <li v-if="$route.path != '/home'" @click="$router.push('/')">回到首页</li> -->
</ul> </ul>
<div class="entry"> <div class="entry">
<!-- <div>企业入口</div> <!-- <div>企业入口</div>
<div>教师入口</div> <div>教师入口</div>
<div>学生入口</div> --> <div>学生入口</div> -->
<div>登录注册入口</div> <!-- <div>登录注册</div> -->
</div> </div>
</div> </div>
</div> </div>
@ -26,8 +52,11 @@
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import useAdminInfoStore from '@/store/module/adminInfo'
const adminInfoStore = useAdminInfoStore()
import { userGetInfoService } from '@/api/configuration';
import { constRouter } from '@/router/module/constRouter' import { constRouter } from '@/router/module/constRouter'
import { useRouter,useRoute } from 'vue-router' import { useRouter, useRoute } from 'vue-router'
import { onMounted, ref } from 'vue' import { onMounted, ref } from 'vue'
import useSettingStore from '@/store/module/setting' import useSettingStore from '@/store/module/setting'
const $router = useRouter() const $router = useRouter()
@ -35,7 +64,7 @@ const $route = useRoute()
const settingStore = useSettingStore() const settingStore = useSettingStore()
const goToRouter = (item: any, index: number) => { const goToRouter = (item: any, index: number) => {
console.log( $route); console.log($route);
settingStore.setuseIndex(index) settingStore.setuseIndex(index)
$router.push({ path: `${item.path}` }) $router.push({ path: `${item.path}` })
@ -50,6 +79,31 @@ onMounted(() => {
} }
}) })
}) })
const isLogin = ref(false)
const data = ref<any>({})
userGetInfoService().then(res => {
// @ts-ignore
if (res.code === 200) {
isLogin.value = true
data.value = res.data
}
})
function skip(url: string) {
location.assign(url)
}
// 退
function logout() {
isLogin.value = false
}
const handleCommand = (command: string) => {
switch (command) {
case 'A':
logout()
break
}
}
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>

@ -0,0 +1,42 @@
import requset from '@/utils/requset'
import { ElLoading, ElMessage } from 'element-plus'
import pinia from '@/store';
import userStore from '@/store/module/user';
const user = userStore(pinia)
enum Api {
get系统配置 = '/api/systemSettings/save',
}
// 提示批量处理
const initOptions = { text: '加载中', success: '成功', error: '失败' }
function proxrequset(requset, options: any = initOptions) {
return async (...arg) => {
if (!options) return requset(...arg)
const loadingInstance = ElLoading.service({ text: options.text })
try {
await requset(...arg)
ElMessage.success(options.success)
} catch (error) {
ElMessage.error(options.error)
} finally {
loadingInstance.close()
}
return requset
}
}
export function getSysSettingApi() {
return requset.get(Api.get系统配置)
}
export const proxGetSysSettingApi = proxrequset(getSysSettingApi)
export const userGetInfoService = () =>
requset.get('/api/user/info', {
headers: { Authorization: `Bearer ${user.token}` },
})

@ -32,23 +32,23 @@ export const constRouter: any = [
}, },
], ],
}, },
{ // {
path: '/professionalProfile', // 课程 // path: '/professionalProfile', // 课程
component: () => import('@/views/professionalProfile/index.vue'), // component: () => import('@/views/professionalProfile/index.vue'),
name: 'ProfessionalProfile', // name: 'ProfessionalProfile',
meta: { // meta: {
icon: '', // icon: '',
title: '课程', // title: '课程',
hidden: false, // hidden: false,
}, // },
}, // },
{ {
path: '/professionalListProfile', // 课程 path: '/professionalListProfile', // 课程
component: () => import('@/views/professionalListProfile/index.vue'), component: () => import('@/views/professionalListProfile/index.vue'),
name: 'professionalListProfile', name: 'professionalListProfile',
meta: { meta: {
icon: '', icon: '',
title: '课程列表', title: '课程',
hidden: false, hidden: false,
}, },
}, },

@ -0,0 +1,32 @@
import { defineStore } from 'pinia'
import { reactive } from 'vue';
import { getSysSettingApi } from '@/api/configuration';
const useAdminInfoStore = defineStore('adminInfo', () => {
const info = reactive({
address: '',
copyrightInformation: '',
id: '',
loginAddress: '',
logo: '',
name: '',
phone: '',
promotionalImages: '',
qqNumber: '',
qrCode: '',
recordNumber: '',
title: '',
mailbox: '',
home: ''
})
function upAdminInfo() {
getSysSettingApi().then(res => {
if (res.code === 200) Object.assign(info, res.data)
})
}
upAdminInfo()
return { info }
})
export default useAdminInfoStore

@ -2,7 +2,7 @@ import { defineStore } from 'pinia'
const userStore = defineStore('userStore', { const userStore = defineStore('userStore', {
state() { state() {
return { return {
token: '', token: 'eyJhbGciOiJIUzUxMiJ9.eyJzdWIiOiJ4aWFvMTExMSIsImNyZWF0ZWQiOjE3MjQ2NTQxNjMxMjIsImV4cCI6MTcyNTI1ODk2M30.uIEZhGG6-XGomV0aqpamOn54VxP4ItfM_ip9EgI0ohcYPyEnln6dXBoG8eVBNlbigglIjw5V1N5bHPdIAifeaA',
} }
}, },
actions: { actions: {

Loading…
Cancel
Save