442 lines
10 KiB
Vue
442 lines
10 KiB
Vue
<template>
|
|
<view class="workbench-page">
|
|
<common-navbar
|
|
title="应用中心"
|
|
:showBack="false"
|
|
backgroundColor="#f4f5e8"
|
|
:showShadow="false"
|
|
>
|
|
<template #left>
|
|
<text class="app-version">v{{ appVersion }}</text>
|
|
</template>
|
|
<template #right>
|
|
<view class="settings-entry" @click="openSettings">
|
|
<u-icon name="setting-fill" color="#242820" size="32"></u-icon>
|
|
<text class="settings-text">设置</text>
|
|
</view>
|
|
</template>
|
|
</common-navbar>
|
|
|
|
<view class="menu-grid">
|
|
<view
|
|
v-for="(item, index) in visibleMenuItems"
|
|
:key="item.router"
|
|
class="menu-card"
|
|
:class="`menu-card--${index % 6}`"
|
|
hover-class="menu-card--active"
|
|
@click="navTo(item.url)"
|
|
>
|
|
<image class="card-background" :src="staticSrc(item.backgroundImage)" mode="aspectFit"></image>
|
|
<view class="card-scrim"></view>
|
|
<text class="card-mark">“</text>
|
|
<view class="card-content">
|
|
<view class="card-title">{{ item.name }}</view>
|
|
<view class="card-subtitle">{{ item.subtitle }}</view>
|
|
</view>
|
|
<view class="card-arrow">
|
|
<u-icon name="arrow-right" color="#5b6257" size="22"></u-icon>
|
|
</view>
|
|
</view>
|
|
<view v-if="!visibleMenuItems.length" class="empty-state">暂无可用功能</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
<script>
|
|
import CommonNavbar from "@/components/common-navbar/index";
|
|
import scanMixin from '@/common/scanMixin.js';
|
|
import { hasResourceRouter } from '@/common/userSession.js';
|
|
import manifest from '@/manifest.json';
|
|
/**
|
|
* Copyright (c) 2013-Now http://aidex.vip All rights reserved.
|
|
*/
|
|
export default {
|
|
components: {
|
|
CommonNavbar,
|
|
},
|
|
mixins: [scanMixin],
|
|
data() {
|
|
return {
|
|
show: false,
|
|
head: "/static/aidex/images/head.png",
|
|
imgList: [
|
|
{ image: "/static/aidex/banner/banner01.png" },
|
|
//{image: '/static/aidex/banner/banner02.png'},
|
|
//{image: '/static/aidex/banner/banner03.png'}
|
|
],
|
|
todoCount: 3,
|
|
menuGroups: [
|
|
{
|
|
title: '销售管理',
|
|
items: [
|
|
{
|
|
name: '成品配布',
|
|
subtitle: 'FINISHED GOODS',
|
|
backgroundImage: '/static/workbench/finished-goods.png',
|
|
url: '/pages/saleship/salepickscan',
|
|
router: 'CashCommodityClothOrder',
|
|
icon: 'icon-hetongguanli',
|
|
color: 'icon-color05'
|
|
}
|
|
]
|
|
},
|
|
{
|
|
title: '成品管理',
|
|
items: [
|
|
{
|
|
name: '加工进仓',
|
|
subtitle: 'PROCESSING IN',
|
|
backgroundImage: '/static/workbench/processing-in.png',
|
|
url: '/pages/storegoods/storeGoodsProcessInList',
|
|
router: 'FpProcessingEntryOrder',
|
|
icon: 'icon-hetongguanli',
|
|
color: 'icon-color04'
|
|
},
|
|
{
|
|
name: '加工出仓',
|
|
subtitle: 'PROCESSING OUT',
|
|
backgroundImage: '/static/workbench/processing-out.png',
|
|
url: '/pages/storegoods/storeGoodsProcessOutList',
|
|
router: 'FpProcessingDeliverFromGodownOrder',
|
|
icon: 'icon-hetongguanli',
|
|
color: 'icon-color05'
|
|
},
|
|
{
|
|
name: '加工退货进仓',
|
|
subtitle: 'RETURN ENTRY',
|
|
backgroundImage: '/static/workbench/return-entry.png',
|
|
url: '/pages/storegoods/storeGoodsProcessReturnInList',
|
|
router: 'FpProcessingReturnEntryOrder',
|
|
icon: 'icon-hetongguanli',
|
|
color: 'icon-color02'
|
|
},
|
|
{
|
|
name: '采购进仓',
|
|
subtitle: 'PURCHASE ENTRY',
|
|
backgroundImage: '/static/workbench/purchase-entry.png',
|
|
url: '/pages/storegoods/storeGoodsPurchaseInList',
|
|
router: 'FinishPurchaseWarehouseEntry',
|
|
icon: 'icon-hetongguanli',
|
|
color: 'icon-color03'
|
|
}
|
|
]
|
|
}
|
|
]
|
|
};
|
|
},
|
|
|
|
onLoad() {
|
|
this.registerScanBroadcast(this.handleScanCode);
|
|
},
|
|
// onUnload, onHide, onShow 已由 scanMixin 自动处理
|
|
|
|
computed: {
|
|
appVersion() {
|
|
return manifest.versionName;
|
|
},
|
|
visibleMenuGroups() {
|
|
return this.menuGroups
|
|
.map((group) => ({
|
|
...group,
|
|
items: group.items.filter((item) => hasResourceRouter(item.router))
|
|
}))
|
|
.filter((group) => group.items.length > 0);
|
|
},
|
|
visibleMenuItems() {
|
|
return this.visibleMenuGroups.reduce((items, group) => {
|
|
return items.concat(group.items);
|
|
}, []);
|
|
}
|
|
},
|
|
methods: {
|
|
staticSrc(path) {
|
|
let base = '';
|
|
// #ifdef H5
|
|
base = (process.env.BASE_URL || '/').replace(/\/$/, '');
|
|
// #endif
|
|
return `${base}${path}`;
|
|
},
|
|
// 自定义扫码处理回调 - 处理本页面特有的扫码逻辑
|
|
handleScanCode(scanResult) {
|
|
console.log('工作台-扫码结果:', scanResult);
|
|
const cleanResult = scanResult.trim().replace(/[\r\n]/g, '');
|
|
uni.navigateTo({
|
|
url: '/pages/saleship/salepickscandetail?order_no=' + cleanResult
|
|
});
|
|
},
|
|
|
|
navTo(url) {
|
|
uni.navigateTo({
|
|
url: url,
|
|
});
|
|
},
|
|
openSettings() {
|
|
uni.navigateTo({
|
|
url: '/pages/sys/user/setting'
|
|
});
|
|
},
|
|
imgListClick(index) {
|
|
console.log(`点击了第${index + 1}页图片`);
|
|
},
|
|
itemClick(index) {
|
|
console.log(index);
|
|
},
|
|
// 处理扫码（手动点击扫码按钮）
|
|
handleScan() {
|
|
if (this.usePhoneScanFallback) {
|
|
this.openPhoneScan();
|
|
return;
|
|
}
|
|
// #ifdef APP-PLUS || MP-WEIXIN
|
|
uni.scanCode({
|
|
scanType: ['qrCode', 'barCode'], // 同时支持二维码和条形码
|
|
success: (res) => {
|
|
console.log('扫码成功：', res);
|
|
const cleanResult = res.result.trim().replace(/[\r\n]/g, '');
|
|
uni.navigateTo({
|
|
url: '/pages/saleship/salepickscandetail?order_no=' + cleanResult
|
|
})
|
|
},
|
|
fail: (err) => {
|
|
console.error('扫码失败：', err);
|
|
uni.showToast({
|
|
title: '扫码失败',
|
|
icon: 'none'
|
|
});
|
|
}
|
|
});
|
|
// #endif
|
|
|
|
// #ifdef H5
|
|
uni.showToast({
|
|
title: "H5环境不支持扫码功能",
|
|
icon: "error",
|
|
});
|
|
// #endif
|
|
},
|
|
// 处理扫码成功
|
|
handleScanSuccess(result) {
|
|
try {
|
|
// 这里可以根据实际需求处理扫码结果
|
|
// 例如：验证扫码结果的格式或内容
|
|
if (this.validateScanResult(result)) {
|
|
// 扫码验证通过，执行其他逻辑
|
|
uni.showToast({
|
|
title: "执行成功",
|
|
icon: "success",
|
|
});
|
|
} else {
|
|
uni.showToast({
|
|
title: "无效的二维码",
|
|
icon: "none",
|
|
});
|
|
}
|
|
} catch (error) {
|
|
console.error("处理扫码结果失败：", error);
|
|
uni.showToast({
|
|
title: "处理失败",
|
|
icon: "none",
|
|
});
|
|
}
|
|
},
|
|
// registerScanBroadcast 和 unregisterScanBroadcast 已由 scanMixin 提供
|
|
},
|
|
};
|
|
</script>
|
|
<style lang="scss">
|
|
page {
|
|
min-height: 100%;
|
|
background: #f4f5e8;
|
|
}
|
|
|
|
.workbench-page {
|
|
min-height: 100vh;
|
|
padding-bottom: 40rpx;
|
|
background:
|
|
linear-gradient(180deg, rgba(255, 255, 255, 0.42), rgba(255, 255, 255, 0) 220rpx),
|
|
#f4f5e8;
|
|
}
|
|
|
|
.workbench-page .navbar_left,
|
|
.workbench-page .navbar_right {
|
|
min-width: 68px !important;
|
|
}
|
|
|
|
.workbench-page .navbar_center {
|
|
padding: 0 8px !important;
|
|
}
|
|
|
|
.app-version {
|
|
color: #444a40;
|
|
font-size: 24rpx;
|
|
font-weight: 500;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.settings-entry {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: flex-end;
|
|
color: #242820;
|
|
font-size: 26rpx;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.settings-text {
|
|
margin-left: 8rpx;
|
|
}
|
|
|
|
.menu-grid {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
padding: 14rpx 19rpx 40rpx;
|
|
}
|
|
|
|
.menu-card {
|
|
position: relative;
|
|
box-sizing: border-box;
|
|
width: calc(50% - 30rpx);
|
|
height: 218rpx;
|
|
margin: 14rpx 15rpx;
|
|
overflow: hidden;
|
|
border-radius: 12rpx 28rpx 12rpx 28rpx;
|
|
color: #ffffff;
|
|
box-shadow: 0 12rpx 24rpx rgba(49, 58, 45, 0.14);
|
|
transition: transform 120ms ease, opacity 120ms ease;
|
|
}
|
|
|
|
.menu-card--active {
|
|
opacity: 0.88;
|
|
transform: scale(0.97);
|
|
}
|
|
|
|
.menu-card--0 {
|
|
background: linear-gradient(145deg, #ed4052, #cf263e);
|
|
}
|
|
|
|
.menu-card--1 {
|
|
background: linear-gradient(145deg, #1787f0, #1768d6);
|
|
}
|
|
|
|
.menu-card--2 {
|
|
background: linear-gradient(145deg, #6558eb, #4639c8);
|
|
}
|
|
|
|
.menu-card--3 {
|
|
background: linear-gradient(145deg, #ff6a2b, #ea3d19);
|
|
}
|
|
|
|
.menu-card--4 {
|
|
background: linear-gradient(145deg, #149de4, #1977d1);
|
|
}
|
|
|
|
.menu-card--5 {
|
|
background: linear-gradient(145deg, #20bea8, #0c9789);
|
|
}
|
|
|
|
.card-background {
|
|
position: absolute;
|
|
z-index: 0;
|
|
top: 18rpx;
|
|
right: -4rpx;
|
|
width: 150rpx;
|
|
height: 120rpx;
|
|
opacity: 0.72;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.card-scrim {
|
|
position: absolute;
|
|
z-index: 1;
|
|
top: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
left: 0;
|
|
background: linear-gradient(105deg, rgba(0, 0, 0, 0.16) 0%, rgba(0, 0, 0, 0.02) 58%);
|
|
pointer-events: none;
|
|
}
|
|
|
|
.card-mark {
|
|
position: absolute;
|
|
z-index: 2;
|
|
top: 10rpx;
|
|
left: 18rpx;
|
|
color: rgba(255, 255, 255, 0.2);
|
|
font-family: Georgia, serif;
|
|
font-size: 74rpx;
|
|
font-weight: 700;
|
|
line-height: 1;
|
|
}
|
|
|
|
.card-content {
|
|
position: absolute;
|
|
z-index: 2;
|
|
right: 16rpx;
|
|
bottom: 42rpx;
|
|
left: 22rpx;
|
|
}
|
|
|
|
.card-title {
|
|
overflow: hidden;
|
|
font-size: 40rpx;
|
|
font-weight: 700;
|
|
line-height: 1.25;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.card-subtitle {
|
|
margin-top: 8rpx;
|
|
color: rgba(255, 255, 255, 0.76);
|
|
font-size: 22rpx;
|
|
font-weight: 500;
|
|
letter-spacing: 1rpx;
|
|
line-height: 1.2;
|
|
}
|
|
|
|
.card-arrow {
|
|
position: absolute;
|
|
z-index: 3;
|
|
right: 0;
|
|
bottom: 0;
|
|
display: flex;
|
|
width: 48rpx;
|
|
height: 42rpx;
|
|
align-items: center;
|
|
justify-content: center;
|
|
border-radius: 8rpx 0 0 0;
|
|
background: rgba(244, 245, 232, 0.94);
|
|
}
|
|
|
|
.empty-state {
|
|
width: 100%;
|
|
padding: 120rpx 0;
|
|
color: #7e8578;
|
|
font-size: 28rpx;
|
|
text-align: center;
|
|
}
|
|
|
|
@media screen and (max-width: 350px) {
|
|
.menu-grid {
|
|
padding-right: 15rpx;
|
|
padding-left: 15rpx;
|
|
}
|
|
|
|
.menu-card {
|
|
width: calc(50% - 22rpx);
|
|
height: 206rpx;
|
|
margin-right: 11rpx;
|
|
margin-left: 11rpx;
|
|
}
|
|
|
|
.card-title {
|
|
font-size: 36rpx;
|
|
}
|
|
}
|
|
|
|
@media (prefers-reduced-motion: reduce) {
|
|
.menu-card {
|
|
transition: none;
|
|
}
|
|
}
|
|
</style>
|