89 lines
2.6 KiB
Vue
89 lines
2.6 KiB
Vue
<script setup>
|
|
import { useRoute, useRouter } from 'vue-router'
|
|
import { ref, onMounted, onUnmounted } from 'vue'
|
|
import mitt from "@/utils/mitt.js";
|
|
|
|
const router = useRouter()
|
|
const route = useRoute()
|
|
|
|
const navTo = (name) => {
|
|
router.push({ name })
|
|
}
|
|
const list = ref(['home', 'order', 'orderSystem', 'convert', 'shop', 'orderList']);
|
|
const aup = ()=>{
|
|
let index = list.value.indexOf(route.name);
|
|
if(index==0) index = list.value.length;
|
|
if(index>0) navTo(list.value[index-1]);
|
|
}
|
|
const adown = ()=>{
|
|
let index = list.value.indexOf(route.name);
|
|
if(index==list.value.length-1) index = -1;
|
|
if(index<list.value.length-1) navTo(list.value[index+1]);
|
|
}
|
|
onMounted(() => {
|
|
mitt.on("up", aup);
|
|
mitt.on("down", adown);
|
|
});
|
|
|
|
onUnmounted(() => {
|
|
mitt.off("aup", aup);
|
|
mitt.off("adown", adown);
|
|
});
|
|
|
|
</script>
|
|
|
|
|
|
<template>
|
|
<div class="my-card">
|
|
<div class="list-item" :class="{'active': route.name=='home'}" @click="navTo('home')">
|
|
<el-icon size="30"><Sell /></el-icon>
|
|
<div>收银</div>
|
|
</div>
|
|
<div class="list-item" :class="{'active': route.name=='order'}" @click="navTo('order')">
|
|
<el-icon size="30"><DataLine /></el-icon>
|
|
<div>收银订单</div>
|
|
</div>
|
|
<div class="list-item" :class="{'active': route.name=='orderSystem'}" @click="navTo('orderSystem')">
|
|
<el-icon size="30"><DataAnalysis /></el-icon>
|
|
<div>平台订单</div>
|
|
</div>
|
|
<div class="list-item" :class="{'active': route.name=='convert'}" @click="navTo('convert')">
|
|
<el-icon size="30"><FullScreen /></el-icon>
|
|
<div>核销</div>
|
|
</div>
|
|
<div class="list-item" :class="{'active': route.name=='shop'}" @click="navTo('shop')">
|
|
<el-icon size="30"><ShoppingBag /></el-icon>
|
|
<div>商品</div>
|
|
</div>
|
|
<div class="list-item" :class="{'active': route.name=='orderList'}" @click="navTo('orderList')">
|
|
<el-icon size="30"><Coin /></el-icon>
|
|
<div>统计</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped lang="scss">
|
|
.my-card{
|
|
width: 100%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
padding-top: 1.5rem;
|
|
.list-item{
|
|
width: 4.5rem;
|
|
height: 4.5rem;
|
|
border-radius: 0.7rem;
|
|
cursor: pointer;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
align-items: center;
|
|
margin-bottom: 1.2rem;
|
|
|
|
&.active {
|
|
background-color: #1890ff;
|
|
transition: 300ms;
|
|
}
|
|
}
|
|
}
|
|
</style> |