<template>
|
<uni-base-page :footer="false">
|
<view slot="page">
|
<view v-if="loginInfo.hasLogin">
|
<!-- 通报批评、消息预警、公告、报告 -->
|
<uni-notice-bar :show-icon="true" :scrollable="true" :speed="30" :single="true"
|
:text="msg" class="notice-bar"></uni-notice-bar>
|
<!-- 用户系统菜单模块 -->
|
<view class="example-body">
|
<view class="menu-header">
|
<text class="menu-title">系统功能</text>
|
<view class="decorative-line"></view>
|
</view>
|
<uni-grid :column="col" :showBorder="false" class="menu-grid">
|
<uni-grid-item v-for="(item, index) in userMenu" :index="index" :key="index" class="grid-item">
|
<navigator navigateTo class="grid-item-box" hover-class="none"
|
:url="`../${item.path}`">
|
<view class="icon-container">
|
<image v-if="item.icoimg" class="imgMenu" :src="`${item.icoimg}`"></image>
|
<image v-else class="imgMenu default-icon" src="/static/img/imgMenu/WARBAAHtml.png"></image>
|
<view class="icon-badge" v-if="item.badge">{{ item.badge }}</view>
|
</view>
|
<text class="text" style="text-align: center;padding:5px 0px 5px 0px">{{ item.pagE_VIEW }}</text>
|
</navigator>
|
</uni-grid-item>
|
</uni-grid>
|
</view>
|
</view>
|
<view v-if="!loginInfo.hasLogin">
|
<view class="guest-container">
|
<view class="title">
|
您好，游客。
|
</view>
|
<view class="ul">
|
<view>这是 广深MES 首页。</view>
|
<view>在 “我的” 中点击 “登录” 可以 “登录您的账户”</view>
|
</view>
|
<view class="login-prompt">
|
<text class="login-note">登录后可访问全部功能</text>
|
</view>
|
</view>
|
</view>
|
</view>
|
</uni-base-page>
|
</template>
|
|
<script>
|
export default {
|
data() {
|
return {
|
loginInfo: this.$loginInfo,
|
// 优化后的主题颜色方案，增加层次感
|
primaryColor: '#1677FF',
|
primaryLight: '#E6F7FF',
|
secondaryColor: '#36CFC9',
|
successColor: '#52C41A',
|
warningColor: '#FAAD14',
|
errorColor: '#F5222D',
|
// 中性色优化
|
neutral1: '#FFFFFF',
|
neutral2: '#F7F8FA',
|
neutral3: '#E5E6EB',
|
neutral4: '#C9CDD4',
|
neutral5: '#86909C',
|
neutral6: '#4E5969',
|
neutral7: '#1F2329',
|
|
userMenu: [],
|
imgUrls: [
|
"../../static/img/SN-GG.png",
|
"../../static/img/SN-GG1.png"
|
],
|
col: 4, //菜单列数
|
msg: "宁波广深科技有限公司"
|
};
|
},
|
methods: {
|
getMenu(isShowMask) {
|
if (isShowMask) uni.showLoading({
|
mask: true,
|
title: "加载中..."
|
});
|
this.$getUserMenu({
|
type: 'sys',
|
programId: this.loginInfo.sysNumber,
|
success: (res) => {
|
this.userMenu = res;
|
uni.stopPullDownRefresh();
|
},
|
fail: (err) => {
|
|
},
|
complete() {
|
if (isShowMask) uni.hideLoading();
|
}
|
});
|
},
|
getIsMsg() {
|
this.$post({
|
url: "/MessageCenter/getPushFailed",
|
data: {
|
createBy: this.$loginInfo.account,
|
isShow: 1
|
},
|
}).then(res => {
|
if (res.data.tbBillList.length > 0) {
|
this.msg = "您有新的异常待处理/您有新的异常待处理";
|
//展示图标
|
uni.showTabBarRedDot({
|
index: 1
|
});
|
} else {
|
this.msg = "宁波广深科技有限公司";
|
//展示图标
|
uni.hideTabBarRedDot({
|
index: 1
|
});
|
}
|
})
|
},
|
checkForUpdate() {
|
this.$post({
|
url: "/Login/getAppUpgradeInfo",
|
data: {}
|
}).then(res => {
|
|
let newVersion = res.data.version;
|
let currentVersion = uni.getSystemInfoSync(); // 获取当前 APK 版本号
|
|
if (newVersion > currentVersion.appVersion) {
|
uni.showModal({
|
title: "发现新版本",
|
content: "是否下载最新版本?",
|
success: (modalRes) => {
|
if (modalRes.confirm) {
|
this.downloadNewApk(res.data.apkUrl);
|
}
|
}
|
});
|
this.updateChecked = true; // 标记更新已检查过
|
}
|
})
|
},
|
|
downloadNewApk(apkUrl) {
|
uni.showToast({
|
title: "开始下载更新...",
|
icon: "none",
|
duration: 2000
|
});
|
|
uni.downloadFile({
|
url: apkUrl,
|
success: (res) => {
|
if (res.statusCode === 200) {
|
plus.runtime.install(res.tempFilePath, {
|
force: true
|
}, function() {
|
console.log("安装成功，重启应用");
|
}, function(e) {
|
console.error("安装失败:", e);
|
});
|
}
|
},
|
fail: (err) => {
|
console.error("下载失败:", err);
|
uni.showToast({
|
title: "下载失败，请检查网络",
|
icon: "none",
|
duration: 2000
|
});
|
}
|
});
|
}
|
},
|
|
onLoad() {
|
if (!this.loginInfo.hasLogin) {
|
uni.showModal({
|
title: '未登录',
|
content: '您未登录，需要登录后才能继续',
|
/**
|
* 如果需要强制登录，不显示取消按钮
|
*/
|
showCancel: !this.loginInfo.forcedLogin,
|
success: (res) => {
|
if (res.confirm) {
|
/**
|
* 如果需要强制登录，使用reLaunch方式
|
*/
|
if (this.loginInfo.forcedLogin) {
|
uni.reLaunch({
|
url: 'login'
|
});
|
} else {
|
uni.navigateTo({
|
url: 'login'
|
});
|
}
|
}
|
}
|
});
|
} else {
|
this.getMenu(true);
|
this.checkForUpdate();
|
}
|
},
|
onShow() {
|
this.getIsMsg();
|
},
|
onPullDownRefresh() {
|
if (this.loginInfo.hasLogin)
|
this.getMenu(true);
|
}
|
}
|
</script>
|
|
<style>
|
/* 全局样式重置 */
|
page {
|
background-color: #F7F8FA;
|
color: #1F2329;
|
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu;
|
display: flex;
|
flex-direction: column;
|
height: 100vh;
|
}
|
|
/* 优化后的文本样式 */
|
.text {
|
font-weight: 500;
|
color: #4E5969;
|
font-size: 24rpx;
|
margin-top: 10rpx;
|
white-space: nowrap;
|
overflow: hidden;
|
text-overflow: ellipsis;
|
}
|
|
.example-body {
|
padding: 30rpx;
|
flex: 1;
|
display: flex;
|
flex-direction: column;
|
}
|
|
/* 菜单头部样式 */
|
.menu-header {
|
margin-bottom: 30rpx;
|
position: relative;
|
}
|
|
.menu-title {
|
font-size: 36rpx;
|
font-weight: 600;
|
color: #1F2329;
|
display: inline-block;
|
position: relative;
|
padding-bottom: 10rpx;
|
}
|
|
.decorative-line {
|
height: 4rpx;
|
width: 120rpx;
|
background: linear-gradient(to right, #1677FF, #36CFC9);
|
border-radius: 2rpx;
|
margin-top: 10rpx;
|
}
|
|
/* 网格菜单优化 */
|
.menu-grid {
|
flex: 1;
|
display: flex;
|
flex-wrap: wrap;
|
justify-content: space-between;
|
}
|
|
.grid-item {
|
display: flex;
|
flex-wrap: wrap;
|
height: 100% !important;
|
display: flex;
|
flex-direction: column;
|
align-items: stretch;
|
margin-bottom: 20rpx;
|
}
|
|
.grid-item-box {
|
flex: 1;
|
display: flex;
|
flex-direction: column;
|
align-items: center;
|
justify-content: center;
|
padding: 20rpx;
|
background-color: #FFFFFF;
|
border-radius: 20rpx;
|
box-shadow: 0 6rpx 20rpx rgba(0, 0, 0, 0.08);
|
transition: all 0.3s ease;
|
position: relative;
|
overflow: hidden;
|
}
|
|
.grid-item-box::before {
|
content: '';
|
position: absolute;
|
top: 0;
|
left: 0;
|
width: 100%;
|
height: 4rpx;
|
background: linear-gradient(to right, #1677FF, #36CFC9);
|
opacity: 0;
|
transition: opacity 0.3s ease;
|
}
|
|
.grid-item-box:hover {
|
transform: translateY(-8rpx);
|
box-shadow: 0 12rpx 30rpx rgba(22, 119, 255, 0.15);
|
}
|
|
.grid-item-box:hover::before {
|
opacity: 1;
|
}
|
|
/* 图标容器优化 */
|
.icon-container {
|
width: 140rpx;
|
height: 140rpx;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
margin-bottom: 15rpx;
|
position: relative;
|
}
|
|
.imgMenu {
|
width: 100rpx;
|
height: 100rpx;
|
border-radius: 50%;
|
background-color: #F7F8FA;
|
padding: 16rpx;
|
box-sizing: border-box;
|
transition: transform 0.3s ease;
|
}
|
|
.imgMenu.default-icon {
|
background-color: #E6F7FF;
|
color: #1677FF;
|
}
|
|
.grid-item-box:hover .imgMenu {
|
transform: scale(1.1);
|
}
|
|
.icon-badge {
|
position: absolute;
|
top: -10rpx;
|
right: -10rpx;
|
width: 30rpx;
|
height: 30rpx;
|
background-color: #F5222D;
|
color: #FFFFFF;
|
border-radius: 50%;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
font-size: 18rpx;
|
box-shadow: 0 2rpx 8rpx rgba(245, 34, 45, 0.3);
|
}
|
|
/* 通知栏样式优化 */
|
.notice-bar {
|
background: linear-gradient(90deg, #1677FF, #36CFC9);
|
color: #FFFFFF;
|
font-weight: 500;
|
padding: 20rpx 30rpx;
|
border-radius: 10rpx;
|
margin-bottom: 20rpx;
|
box-shadow: 0 4rpx 12rpx rgba(22, 119, 255, 0.2);
|
}
|
|
/* 未登录状态样式优化 */
|
.guest-container {
|
flex: 1;
|
display: flex;
|
flex-direction: column;
|
justify-content: center;
|
align-items: center;
|
padding: 0 40rpx;
|
}
|
|
.title {
|
font-size: 36rpx;
|
font-weight: 600;
|
color: #1F2329;
|
margin: 40rpx 0 30rpx;
|
text-align: center;
|
}
|
|
.ul {
|
background-color: #FFFFFF;
|
border-radius: 20rpx;
|
padding: 30rpx;
|
box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.08);
|
width: 100%;
|
max-width: 600rpx;
|
}
|
|
.ul view {
|
font-size: 28rpx;
|
color: #4E5969;
|
line-height: 1.8;
|
margin-bottom: 20rpx;
|
}
|
|
.login-prompt {
|
margin-top: 40rpx;
|
padding: 15rpx 30rpx;
|
background-color: #E6F7FF;
|
border-radius: 30rpx;
|
font-size: 24rpx;
|
color: #1677FF;
|
}
|
|
.login-note {
|
font-weight: 500;
|
}
|
</style>
|
