新增批发订单模拟待处理数量标点
This commit is contained in:
parent
16fa02aadf
commit
fb1e4567fc
|
@ -1,25 +1,34 @@
|
|||
<script setup>
|
||||
import { useRoute, useRouter } from 'vue-router'
|
||||
import { ref, onMounted, onUnmounted } from 'vue'
|
||||
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 router = useRouter();
|
||||
const route = useRoute();
|
||||
|
||||
const navTo = (name) => {
|
||||
router.push({ name })
|
||||
}
|
||||
const list = ref(['home', 'order', 'orderSystem', 'saleHome', 'saleOrder', 'convert', 'shop', 'orderCount']);
|
||||
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]);
|
||||
}
|
||||
router.push({ name });
|
||||
};
|
||||
const list = ref([
|
||||
{ name: "home", title: "收银", ico: "Sell", count: 0 },
|
||||
{ name: "order", title: "收银订单", ico: "DataLine", count: 0 },
|
||||
{ name: "orderSystem", title: "平台订单", ico: "DataAnalysis", count: 0 },
|
||||
{ name: "saleHome", title: "批发", ico: "Van", count: 0 },
|
||||
{ name: "saleOrder", title: "批发订单", ico: "Tickets", count: 1 },
|
||||
{ name: "convert", title: "核销", ico: "FullScreen", count: 0 },
|
||||
{ name: "shop", title: "商品", ico: "ShoppingBag", count: 0 },
|
||||
{ name: "orderCount", title: "订单统计", ico: "PieChart", count: 0 },
|
||||
]);
|
||||
const aup = () => {
|
||||
let index = list.value.findIndex((item) => item.name == route.name);
|
||||
if (index == 0) index = list.value.length;
|
||||
if (index > 0) navTo(list.value[index - 1].name);
|
||||
};
|
||||
const adown = () => {
|
||||
let index = list.value.findIndex((item) => item.name == route.name);
|
||||
if (index == list.value.length - 1) index = -1;
|
||||
if (index < list.value.length - 1) navTo(list.value[index + 1].name);
|
||||
};
|
||||
onMounted(() => {
|
||||
mitt.on("up", aup);
|
||||
mitt.on("down", adown);
|
||||
|
@ -29,72 +38,61 @@ 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="2rem"><Sell /></el-icon>
|
||||
<div>收银</div>
|
||||
</div>
|
||||
<div class="list-item" :class="{'active': route.name=='order'}" @click="navTo('order')">
|
||||
<el-icon size="2rem"><DataLine /></el-icon>
|
||||
<div>收银订单</div>
|
||||
</div>
|
||||
<div class="list-item" :class="{'active': route.name=='orderSystem'}" @click="navTo('orderSystem')">
|
||||
<el-icon size="2rem"><DataAnalysis /></el-icon>
|
||||
<div>平台订单</div>
|
||||
</div>
|
||||
<div class="list-item" :class="{'active': route.name=='saleHome'}" @click="navTo('saleHome')">
|
||||
<el-icon size="2rem"><Van /></el-icon>
|
||||
<div>批发</div>
|
||||
</div>
|
||||
<div class="list-item" :class="{'active': route.name=='saleOrder'}" @click="navTo('saleOrder')">
|
||||
<el-icon size="2rem"><Tickets /></el-icon>
|
||||
<div>批发订单</div>
|
||||
</div>
|
||||
<div class="list-item" :class="{'active': route.name=='convert'}" @click="navTo('convert')">
|
||||
<el-icon size="2rem"><FullScreen /></el-icon>
|
||||
<div>核销</div>
|
||||
</div>
|
||||
<div class="list-item" :class="{'active': route.name=='shop'}" @click="navTo('shop')">
|
||||
<el-icon size="2rem"><ShoppingBag /></el-icon>
|
||||
<div>商品</div>
|
||||
</div>
|
||||
<div class="list-item" :class="{'active': route.name=='orderCount'}" @click="navTo('orderCount')">
|
||||
<el-icon size="2rem"><Coin /></el-icon>
|
||||
<div>统计</div>
|
||||
</div>
|
||||
<div class="my-card">
|
||||
<div
|
||||
v-for="item in list"
|
||||
:key="item.name"
|
||||
class="list-item"
|
||||
:class="{ active: route.name == item.name }"
|
||||
@click="navTo(item.name)"
|
||||
>
|
||||
<el-icon size="2rem">
|
||||
<component :is="item.ico" />
|
||||
</el-icon>
|
||||
<div>{{ item.title }}</div>
|
||||
<div v-if="item.count" class="badge">{{ item.count }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.my-card{
|
||||
width: 100%;
|
||||
height: calc(100vh - 100px);
|
||||
.my-card {
|
||||
width: 100%;
|
||||
height: calc(100vh - 100px);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
padding-top: 1.5rem;
|
||||
overflow: auto;
|
||||
.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;
|
||||
padding-top: 1.5rem;
|
||||
overflow: auto;
|
||||
.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;
|
||||
margin-bottom: 1.2rem;
|
||||
position: relative;
|
||||
|
||||
&.active {
|
||||
background-color: #1890ff;
|
||||
transition: 300ms;
|
||||
}
|
||||
&.active {
|
||||
background-color: #1890ff;
|
||||
transition: 300ms;
|
||||
}
|
||||
.badge{
|
||||
position: absolute;
|
||||
top: -0.5rem;
|
||||
right: -0.5rem;
|
||||
background-color: #ff4a00;
|
||||
font-size: 0.7rem;
|
||||
padding: 0.2rem 0.5rem;
|
||||
border-radius: 2rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
/* 修改滚动条的样式 */
|
||||
::-webkit-scrollbar {
|
||||
|
@ -117,4 +115,4 @@ onUnmounted(() => {
|
|||
::-webkit-scrollbar-thumb:hover {
|
||||
background-color: #999; /* 设置鼠标悬停时滑块的背景色 */
|
||||
}
|
||||
</style>
|
||||
</style>
|
||||
|
|
|
@ -200,6 +200,7 @@ onMounted(()=>{
|
|||
<span v-if="item.pay_type == 1">(微信支付)</span>
|
||||
<span v-if="item.pay_type == 9">(商户余额支付)</span>
|
||||
<span v-if="item.pay_type == 10">(对公转账)</span>
|
||||
<span class="manage-btn">待处理</span>
|
||||
</div>
|
||||
<div v-else style="color: #ff4a00">未支付</div>
|
||||
</div>
|
||||
|
@ -335,6 +336,13 @@ onMounted(()=>{
|
|||
justify-content: space-between;
|
||||
font-size: 0.9rem;
|
||||
color: #777;
|
||||
.manage-btn{
|
||||
color: #fff;
|
||||
background-color: #e6a23c;
|
||||
border-radius: 0.2rem;
|
||||
padding: 0 0.2rem;
|
||||
margin-left: 0.5rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
.item-active {
|
||||
|
|
Loading…
Reference in New Issue