<template>
|
<div class="box">
|
<div class="box_h" style="height: 49px;" :style="store.state.type ? 'padding-bottom: 15px;' : ''"></div>
|
<div class="box_tar" style="height: 49px;" :style="store.state.type ? 'padding-bottom: 15px;' : ''">
|
<div class="box_tar_item" v-for="(item, i) in Menu" :key="i" @click.stop="jump(item.path)">
|
<div class="box_tar_item_position" v-if="item.isCode">
|
<img class="box_tar_item_code" :src="item.isActive ? item.activeIcom : item.icon" alt="" />
|
<span :style="{ color: item.isActive ? '#222222' : '#666666' }">{{item.name}}</span>
|
</div>
|
<div class="box_tar_item_normal" v-else>
|
<van-badge :content="store.state.upcomingNum.d" max="99" v-if="item.path === '/index' && store.state.upcomingNum.d > 0">
|
<img :src="item.isActive ? item.activeIcom : item.icon" alt="" />
|
</van-badge>
|
<img :src="item.isActive ? item.activeIcom : item.icon" alt="" v-else />
|
<span :style="{ color: item.isActive ? '#222222' : '#666666' }">{{item.name}}</span>
|
</div>
|
</div>
|
</div>
|
<!-- 扫码组件 -->
|
<v-ScanCode
|
:openCode="openCode"
|
:infos="['第一次扫码', '第二次扫码']"
|
@closePopup="closePopup"
|
@onDecode="onDecode">
|
</v-ScanCode>
|
</div>
|
</template>
|
|
<script setup lang="ts">
|
import { ref, reactive, watch, nextTick, onMounted } from 'vue'
|
import { useRoute, useRouter } from "vue-router";
|
import { useStore } from "vuex"
|
import { MenuVerification } from '@/interface'
|
|
const store = useStore()
|
|
let datas = ref<string[]>([])
|
|
const openCode = ref<boolean>(false)
|
|
const route = useRoute()
|
|
const router = useRouter()
|
|
const Menu = reactive<Array<MenuVerification>>([
|
{
|
icon: require('@/assets/icon/nav_daiban@2x.png'),
|
activeIcom: require('@/assets/icon/nav_daiban_sel@2x.png'),
|
path: '/index',
|
isActive: false,
|
name: '待办'
|
},
|
{
|
icon: require('@/assets/icon/nav_gongzuotai@2x.png'),
|
activeIcom: require('@/assets/icon/nav_gongzuotai_sel@2x.png'),
|
path: '/workbench',
|
isActive: false,
|
name: '工作台'
|
},
|
// {
|
// icon: require('@/assets/icon/nav_saoma@2x.png'),
|
// activeIcom: require('@/assets/icon/nav_saoma@2x.png'),
|
// path: '',
|
// isActive: false,
|
// isCode: true,
|
// name: '扫码'
|
// },
|
// {
|
// icon: require('@/assets/icon/nav_kanban@2x.png'),
|
// activeIcom: require('@/assets/icon/nav_kanban_sel@2x.png'),
|
// path: '/bulletinboard',
|
// isActive: false,
|
// name: '看板'
|
// },
|
{
|
icon: require('@/assets/icon/nav_wode@2x.png'),
|
activeIcom: require('@/assets/icon/nav_wode_sel@2x.png'),
|
path: '/my',
|
isActive: false,
|
name: '我的'
|
}
|
])
|
|
const jump = (path: string): void => {
|
if (path === '') {
|
openCode.value = true
|
return
|
}
|
router.push({ path })
|
}
|
|
// 关闭扫码组件
|
const closePopup = (): void => {
|
openCode.value = false
|
}
|
|
// 获取扫码值
|
const onDecode = (data: string[]): void => {
|
console.log(data)
|
datas.value = data
|
nextTick(() => {
|
openCode.value = false
|
})
|
}
|
|
// 监听函数
|
watch(() => route.path,(news, old): void => {
|
Menu.forEach(item => {
|
item.isActive = item.path === news;
|
})
|
},{ immediate: true })
|
|
onMounted(() =>{
|
store.dispatch('getUpcomingNum')
|
})
|
</script>
|
|
<style lang="scss" scoped>
|
.box {
|
.box_tar {
|
width: 100%;
|
display: flex;
|
background: white;
|
position: fixed;
|
bottom: 0;
|
left: 0;
|
box-shadow: 0px -2px 0px 0px rgba(238, 238, 238, 0.9);
|
.box_tar_item {
|
flex: 1;
|
height: 100%;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
flex-direction: column;
|
position: relative;
|
.box_tar_item_normal {
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
flex-direction: column;
|
.box_tar_item_code {
|
width: 88px;
|
height: 88px;
|
}
|
img {
|
width: 44px;
|
height: 44px;
|
}
|
span {
|
font-size: 20px;
|
font-weight: 400;
|
color: #666666;
|
text-shadow: 0px -2px 0px rgba(238, 238, 238, 0.9);
|
}
|
}
|
.box_tar_item_position {
|
display: flex;
|
flex-direction: column;
|
align-items: center;
|
position: absolute;
|
top: -30px;
|
z-index: 9;
|
.box_tar_item_code {
|
width: 88px;
|
height: 88px;
|
}
|
img {
|
width: 26px;
|
height: 26px;
|
}
|
span {
|
font-size: 20px;
|
font-weight: 400;
|
color: #666666;
|
padding-bottom: 12px;
|
text-shadow: 0px -2px 0px rgba(238, 238, 238, 0.9);
|
}
|
}
|
}
|
}
|
}
|
</style>
|
