<template> <!-- 自定义工作台头部 --> <NavBar :count="state.count" :title="'工作台'"></NavBar> <view class="contaner" :style="{ marginTop: navbarRect.height + navbarRect.top + 'px', height: navbarRect.safeHeight + 'px', }" > <!-- 筛选条件 --> <view class="time-filter"> <up-text v-for="item in timeList" :key="item.id" :text="item.name" :color="`${ stateNew.filterTimeValue === item.name ? '#00DCEE' : '#999999' }`" :size="'32rpx'" @click="handleFilter(item)" ></up-text> </view> <!-- 数据汇总面板 --> <view class="summary"> <view class="panel" v-for="(item, index) in summaryList" :key="index"> <image :src="`https://backend-common.obs.cn-east-3.myhuaweicloud.com/static/pages/${item.imgUrl}`" /> <view class="box"> <view class="num">{{ formatMoney(item.num, 2) }}</view> <view class="title">{{ item.title }}</view> </view> </view> </view> <!-- 其他核心模块 --> <view class="core-content"> <view> <text class="title">收货入库</text> <up-grid :border="false"> <up-grid-item v-for="(item, index) in stateNew.receiveList" :key="index" @click="handleClick(item)" > <up-badge max="99" :value="item.num" :absolute="true" :offset="[10, 10]" ></up-badge> <up-image :src="`/static/img/home/${item.icon}`" width="184rpx" height="162rpx" ></up-image> <view class="name">{{ item.title }}</view> </up-grid-item> </up-grid> </view> <view style="margin-top: 30rpx"> <text class="title title-shipment">出货销售</text> <up-grid :border="false"> <up-grid-item v-for="(item, index) in stateNew.shipmentList" :key="index" > <up-badge max="99" :value="item.num" :absolute="true" :offset="[10, 10]" ></up-badge> <up-image :src="`/static/img/home/${item.icon}`" width="184rpx" height="162rpx" ></up-image> <view class="name">{{ item.title }}</view> </up-grid-item> </up-grid> </view> </view> <!-- <up-empty v-if=" !isShowModule(receiveList.concat(shipmentList)) && !isShowModule(appList) " mode="permission" icon="http://cdn.uviewui.com/uview/empty/permission.png" :text="'暂无相关权限, 请联系管理员'" > </up-empty> --> </view> <TabBar /> </template> <script setup lang="ts"> import { timeList, homeInitData } from "@/utils/data"; import { useMemberStore } from "@/store/index"; import { MessageApi, ProfileApi, ReceiveApi, ShipmentApi, } from "@/services/index"; import TabBar from "@/components/TabBar/index.vue"; import { formatMoney } from "@/utils"; import { onBackPress, onShow } from "@dcloudio/uni-app"; import pinia from "@/store"; const store = useMemberStore(pinia); const navbarRect = reactive({ height: 42, top: 48, safeHeight: 500, }); const getSafeHeight = () => { // #ifdef APP-PLUS || MP-WEIXIN uni.getSystemInfo({ success: (res) => { navbarRect.safeHeight = res.windowHeight - 50 - navbarRect.top - navbarRect.height; }, }); // #endif }; const stateNew = reactive({ filterTimeValue: "本月", receiveList: homeInitData.receiveList, shipmentList: homeInitData.shipmentList, }); const handleFilter = (item: { id: number; name: string }) => { stateNew.filterTimeValue = item.name; }; const summaryList = reactive([ { title: "总收货/KG", num: 0, imgUrl: "01.png", }, { title: "收货总支出/元", num: 0, imgUrl: "02.png", }, { title: "总出货/KG", num: 0, imgUrl: "03.png", }, { title: "出货总收入/元", num: 0, imgUrl: "04.png", }, ]); const state = reactive({ count: 0, }); const init = () => { // 消息统计 MessageApi.getUserNoticeInfoNumVo().then((res: any) => { if (res.code === 200) { state.count = res.data.unreadNoticeNum; } }); // 收货入库相关信息 ReceiveApi.countOrderByMonth().then((res) => { if (res.code === 200) { const { totalReceipt, totalExpenditure, toBePriced, toBeTare, audit, toBePaid, } = res.data; summaryList[0].num = totalReceipt; summaryList[1].num = totalExpenditure; stateNew.receiveList[0].num = toBePriced; stateNew.receiveList[1].num = toBeTare; stateNew.receiveList[2].num = audit; stateNew.receiveList[3].num = toBePaid; } }); // 出货相关信息 ShipmentApi.countOrderByMonth().then((res) => { if (res.code === 200) { const { totalShipment, totalIncome, toBeShipped, roughWeight, shipmentReview, toBeSettled, } = res.data; summaryList[2].num = totalShipment; summaryList[3].num = totalIncome; stateNew.shipmentList[0].num = toBeShipped; stateNew.shipmentList[1].num = roughWeight; stateNew.shipmentList[2].num = shipmentReview; stateNew.shipmentList[3].num = toBeSettled; } }); // 重新获取权限 ProfileApi.getUserInfo().then((res: any) => { if (res.code === 200) { store.setProfile({ ...res.data, token: store.profile.token }); } }); }; const handleClick = (item: any) => { uni.navigateTo({ url: item.path, // 要跳转到的页面路径 }); }; onMounted(() => { // #ifdef MP-WEIXIN let menuButtonInfo = uni.getMenuButtonBoundingClientRect(); navbarRect.height = menuButtonInfo.height; navbarRect.top = menuButtonInfo.top; getSafeHeight(); // #endif // #ifndef MP-WEIXIN const systemInfo = uni.getSystemInfoSync(); navbarRect.safeHeight = (systemInfo.safeArea as any).height; getSafeHeight(); // #endif }); onShow(() => { if (store.profile?.token) { init(); } else { // 当应用启动时,检查是否已显示过启动页 if (Boolean(uni.getStorageSync("hasLaunched"))) { // 如果已显示过,不再显示启动页 uni.reLaunch({ url: "/pagesLogin/login/index", }); } else { // 如果未显示过,标记为已显示,并保存到存储 uni.setStorageSync("hasLaunched", true); uni.reLaunch({ url: "/pagesLaunch/index" }); } } }); </script> <style lang="scss" scoped> .contaner { padding: 17rpx; /* #ifdef H5 */ height: calc(100vh - 67px - 70px) !important; /* #endif */ overflow: auto; .time-filter { display: flex; text-align: center; align-items: center; justify-content: center; padding: 16rpx 130rpx; > view { justify-content: center; } } .summary { .panel { width: 50%; display: inline-block; height: 155rpx; position: relative; // background: url('/static/img/01.png'); image { width: 100%; height: 100%; } .box { position: absolute; padding: 20rpx 0rpx 0rpx 40rpx; margin-top: -155rpx; .num { font-size: 40rpx; font-family: Source Han Sans CN; font-weight: bold; color: #ffffff; } .title { font-size: 24rpx; font-family: Source Han Sans CN; font-weight: 400; color: #ffffff; } } } } .core-content { padding: 22rpx; background: #ffffff; box-shadow: 0rpx 0rpx 10rpx 0rpx rgba(5, 68, 37, 0.12); border-radius: 13rpx; position: relative; .title { font-size: 28rpx; font-family: Source Han Sans CN; font-weight: 500; color: #000000; padding-left: 20rpx; &::before { content: ""; position: absolute; margin-top: 6px; margin-left: -20rpx; width: 6rpx; height: 26rpx; background: #22d594; box-shadow: 0rpx 0rpx 10rpx 0rpx rgba(5, 68, 37, 0.12); border-radius: 3rpx; } } .title-shipment { &::before { content: ""; background: #ff782b; } } .name { font-weight: 400; font-size: 28rpx; color: #000000; } ::v-deep.u-grid-item { padding: 22rpx 0rpx 0rpx 0rpx; } ::v-deep.u-badge { z-index: 999; } } } </style>