新增批发订单模拟待处理数量标点

This commit is contained in:
weipengfei 2024-04-20 14:03:04 +08:00
parent 16fa02aadf
commit fb1e4567fc
2 changed files with 78 additions and 72 deletions

View File

@ -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>

View File

@ -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 {