Skip to content

B
bigwood
Commit cd5db395 authored by 罗超's avatar 罗超
Browse files
Options

处理首页布局的左侧

parent cdea335d
Hide whitespace changes
Inline Side-by-side
Showing with 237 additions and 28 deletions
src/components/global/svg-icon.vue
View file @ cd5db395
......@@ -60,10 +60,16 @@ svg g [fill]{
transition: fill 0.3s ease;
fill: #3699FF !important;
}
.svg-icon-success g [fill] {
transition: fill 0.3s ease;
fill: #50cd89 !important;
}
.svg-icon-nav g [fill] {
transition: fill 0.3s ease;
fill: #9d9da6 !important;
}
.svg-icon.svg-icon-secondary g [fill] {
transition: fill 0.3s ease;
fill: var(--q-color-secondary) !important;
......
src/i18n/zh-TW/index.ts
View file @ cd5db395
......@@ -5,9 +5,32 @@ export default {
failed: '執行失敗',
success: '執行成功',
appsuffix: "JVS同業預定系統",
siteName:"同業預定系統",
lanuage:"系統語言",
loginout:'登錄信息失效，請重新登錄',
timeout:'當前網絡環境異常，請求超時',
menu:{
hotel:{
first:'酒店預訂',
second:'酒店檢索',
three:'酒店訂單'
},
car:{
first:'車輛預定',
second:'車輛預定',
three:'用車訂單'
},
ticket:{
first:'門票預訂',
second:'門票檢索',
three:'門票訂單'
},
finance:{
first:'帳單',
second:'月度請求書',
three:'匯款說明'
}
},
login:{
notaccess:"沒有同業會員帳戶？",
registlink:"申請註冊",
......
src/layouts/MainLayout.vue
View file @ cd5db395
<template>
<q-layout view="lHh lpr lFf">
<q-header reveal bordered class="bg-primary text-white">
<q-layout view="lHh lpr lFf" style="background: #f5f8fa">
<q-header reveal class="bg-white text-white q-px-md q-py-sm">
<q-toolbar>
<q-btn dense flat round icon="menu" @click="toggleLeftDrawer" />
<q-toolbar-title>
<q-avatar>
<img src="https://cdn.quasar.dev/logo-v2/svg/logo-mono-white.svg">
<q-toolbar-title class="row">
<div class="col row items-center">
<q-btn dense flat round @click="toggleLeftDrawer" class="mobile-only">
<svg-icon icon="Text/Menu.svg" :size="32"></svg-icon>
</q-btn>
<div class="mobile-only q-ml-md text-dark text-h6 text-weight-bold">JVS</div>
</div>
<q-avatar size="40px" rounded class="bg-blue-2">
<img src="https://cdn.quasar.dev/logo-v2/svg/logo-mono-white.svg" v-if="userInfo.photo" />
<span class="text-primary text-h6" v-else>{{ userInfo.name.substring(0, 1) }}</span>
</q-avatar>
Title
</q-toolbar-title>
</q-toolbar>
</q-header>
<q-drawer show-if-above v-model="leftDrawerOpen" side="left" bordered>
<q-drawer show-if-above v-model="leftDrawerOpen" style="background: #1e1e2d; width: 265px" side="left" class="column">
<div style="box-sizing: border-box; height: 66px; border-bottom: 1px dashed #444" class="row items-center q-px-md desktop-only">
<img src="../assets/images/jvs-log.png" alt="" style="height: 30px" />
<div class="text-white text-weight-bold text-subtitle1 q-ml-md">{{ $t('siteName') }}</div>
</div>
<q-scroll-area :thumb-style="scrollStyle.thumbStyle" :bar-style="scrollStyle.barStyle" class="col nav-list q-pl-lg">
<q-list style="color:#9d9da6">
<q-expansion-item class="demo" :class="{'nav-parent':activeParent==x.id}" v-for="(x, i) in menus" :key="i">
<template v-slot:header>
<q-item-section>
<div class="row items-center nav-group">
<svg-icon :icon="x.icon" :size="18" color="nav"></svg-icon>
<span class="q-ml-sm" :class="{'parent-name':activeParent==x.id}">{{ x.name }}</span>
</div>
</q-item-section>
</template>
<q-item active-class="nav-active" :active="y.id==activeMenu" @click="checkMenuHandler(x.id,y.id)" class="q-ml-md rounded-borders q-mr-md q-pl-md sunzi" clickable v-ripple v-for="(y, yi) in x.childs" :key="yi">
<q-item-section>
<div class="row items-center nav-item">
<svg-icon icon="Design/Circle.svg" :size="8" color="nav"></svg-icon>
<span class="q-ml-sm">{{ y.name }}</span>
</div>
</q-item-section>
</q-item>
</q-expansion-item>
</q-list>
</q-scroll-area>
<!-- drawer content -->
</q-drawer>
<q-page-container>
<q-page-container class="q-pa-md">
<router-view />
</q-page-container>
<q-footer bordered class="bg-grey-8 text-white">
<q-footer class="bg-white text-dark">
<q-toolbar>
<q-toolbar-title>
<q-avatar>
<img src="https://cdn.quasar.dev/logo-v2/svg/logo-mono-white.svg">
</q-avatar>
<div>Title</div>
<div class="text-body2">2022© JVS</div>
</q-toolbar-title>
</q-toolbar>
</q-footer>
</q-layout>
</template>
<script>
import { ref } from 'vue'
<script lang="ts">
import { reactive, ref, toRefs } from 'vue'
import { dispatchAction, getStoreGetter } from '../store/utils'
import { UserGetter } from '../store/modules/user/getters'
import svgIcon from '../components/global/svg-icon.vue'
import useScrollModule from '../module/scrollbar/scrollModule'
import { useMenus, Menu } from '../utils/menus'
export default {
setup () {
components: { svgIcon },
setup() {
const leftDrawerOpen = ref(false)
return {
leftDrawerOpen,
toggleLeftDrawer () {
leftDrawerOpen.value = !leftDrawerOpen.value
const data = reactive({
userInfo: {} as any,
leftDrawerOpen: false,
scrollStyle: {} as any,
menus: [] as Menu[],
activeMenu:0,
activeParent:0
})
data.userInfo = getStoreGetter<UserGetter>('user', 'getUser')
data.scrollStyle = useScrollModule().scrollStyle
data.menus = useMenus.getMenus()
const methods = {
toggleLeftDrawer() {
data.leftDrawerOpen = !data.leftDrawerOpen
},
checkMenuHandler(p:number,id:number){
data.activeMenu=id
data.activeParent=p
console.log(data)
}
}
console.log(data.userInfo.accountId)
return {
...toRefs(data),
...methods
}
}
}
</script>
\ No newline at end of file
</script>
<style>
.nav-list .nav-group:hover span,
.nav-list .nav-item:hover span,
.nav-list .nav-item.active span,
.nav-list .nav-group.active span,
.parent-name{
color: #FFFFFF !important;
}
.nav-list .nav-group.active .svg-icon-nav g [fill],
.nav-group:hover .svg-icon-nav g [fill],
.nav-item:hover .svg-icon-nav g [fill],
.nav-list .nav-item.active .svg-icon-nav g [fill],
.nav-active .svg-icon-nav g [fill],
.nav-parent .svg-icon-nav g [fill]{
fill: #FFFFFF !important;
/* color: #FFFFFF !important; */
}
.nav-list .q-focus-helper{
opacity: 0 !important;
}
.nav-active{
color:#FFF !important;
transition: color 0.2s ease;
background-color: #2A2A3C;
}
</style>
src/store/modules/user/actions.ts
View file @ cd5db395
......@@ -56,8 +56,9 @@ const userActions = {
console.log(params)
let loginResult = await UserService.login(param)
if(loginResult.data.resultCode==ApiResult.SUCCESS){
message.successMsg(t("login.success"))
setStoreState('user', 'loginUserInfo', loginResult.data.data)
setStoreState('user', 'userDetail', loginResult.data.data)
setStoreState('user', 'menuList', loginResult.data.data.MenuList)
const token = {
token_type: 'login_auth',
......
src/utils/menus.ts 0 → 100644
View file @ cd5db395
import { i18n } from '../boot/i18n'
interface Menu {
name:string,
url:string,
id:number,
parentId:number,
icon?:string,
childs?:Menu []
}
const {t} =i18n.global
const useMenus={
getMenus():Menu[]{
let menus=[] as Menu[]
menus.push({
name:t('menu.hotel.first'),
url:'',
id:1,
parentId:0,
icon:'Home/Building.svg',
childs:[
{
name:t('menu.hotel.second'),
url:'',
id:2,
parentId:1,
},
{
name:t('menu.hotel.three'),
url:'',
id:3,
parentId:1,
}
]
})
menus.push({
name:t('menu.car.first'),
url:'',
id:4,
parentId:0,
icon:'Electric/Iron.svg',
childs:[
{
name:t('menu.car.second'),
url:'',
id:5,
parentId:4,
},
{
name:t('menu.car.three'),
url:'',
id:6,
parentId:4,
}
]
}),
menus.push({
name:t('menu.ticket.first'),
url:'',
id:7,
parentId:0,
icon:'Shopping/Ticket.svg',
childs:[
{
name:t('menu.ticket.second'),
url:'',
id:8,
parentId:7,
},
{
name:t('menu.ticket.three'),
url:'',
id:9,
parentId:7,
}
]
})
menus.push({
name:t('menu.finance.first'),
url:'',
id:10,
parentId:0,
icon:'Shopping/Money.svg',
childs:[
{
name:t('menu.finance.second'),
url:'',
id:11,
parentId:10,
},
{
name:t('menu.finance.three'),
url:'',
id:12,
parentId:10,
}
]
})
return menus
}
}
export {useMenus, type Menu}
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment