360 lines
9.6 KiB
Vue
360 lines
9.6 KiB
Vue
<script setup>
|
||
import { computed, onUnmounted, ref } from 'vue'
|
||
import { onHide, onShow } from '@dcloudio/uni-app'
|
||
import { useUserStore } from '@/stores/user'
|
||
import { WORKBENCH_MODULES } from '@/config/workbench-menus'
|
||
import { PAGE_PATHS, WORKBENCH_ROUTE_MAP } from '@/config/api'
|
||
import { filterWorkbenchModules } from '@/utils/workbenchMenuFilter'
|
||
import { getSafeAreaStyle } from '@/utils/safeArea'
|
||
import { useShareToLogin } from '@/utils/shareToLogin'
|
||
import { fetchWechatNoticeStatus } from '@/api/wechat-notices'
|
||
import { createWechatFollowReminder } from '@/utils/wechatFollowReminder'
|
||
|
||
useShareToLogin()
|
||
// #ifdef MP-WEIXIN
|
||
import {
|
||
checkMpUpdate,
|
||
formatMpUpdateLine,
|
||
isMpUpdateUrgent,
|
||
subscribeMpUpdate
|
||
} from '@/utils/mpUpdate'
|
||
// #endif
|
||
|
||
const safeAreaStyle = getSafeAreaStyle()
|
||
const userStore = useUserStore()
|
||
const modules = computed(() =>
|
||
filterWorkbenchModules(WORKBENCH_MODULES, {
|
||
menuAll: userStore.menuAll,
|
||
menuCodes: userStore.menuCodes
|
||
})
|
||
)
|
||
const loggingOut = ref(false)
|
||
const pageActive = ref(false)
|
||
const mpUpdateLine = ref('')
|
||
const mpUpdateUrgent = ref(false)
|
||
const mpUpdateStatus = ref('idle')
|
||
const followReminder = createWechatFollowReminder({
|
||
getSessionKey: () => userStore.isLoggedIn ? userStore.token : '',
|
||
isActive: () => pageActive.value && !loggingOut.value,
|
||
loadStatus: fetchWechatNoticeStatus,
|
||
showPrompt: (options) => new Promise((resolve, reject) => {
|
||
uni.showModal({
|
||
...options,
|
||
success: (result) => resolve(result.confirm === true),
|
||
fail: reject
|
||
})
|
||
}),
|
||
openGuide: () => openPage(PAGE_PATHS.wechatOfficialAccount)
|
||
})
|
||
|
||
const stopFollowReminder = () => {
|
||
pageActive.value = false
|
||
followReminder.cancel()
|
||
}
|
||
onHide(stopFollowReminder)
|
||
onUnmounted(stopFollowReminder)
|
||
|
||
// #ifdef MP-WEIXIN
|
||
const unsubMpUpdate = subscribeMpUpdate((s) => {
|
||
mpUpdateLine.value = formatMpUpdateLine(s)
|
||
mpUpdateUrgent.value = isMpUpdateUrgent(s)
|
||
mpUpdateStatus.value = s.status || 'idle'
|
||
})
|
||
onUnmounted(() => {
|
||
unsubMpUpdate()
|
||
})
|
||
// #endif
|
||
|
||
const displayName = computed(() => {
|
||
const info = userStore.userInfo
|
||
if (!info) return '未登录'
|
||
return info.realName || info.username || '用户'
|
||
})
|
||
|
||
/** 三列宫格补齐空白格，避免末行空位露出网格底色 */
|
||
const menuPadCount = (len) => {
|
||
const rem = Number(len) % 3
|
||
return rem === 0 ? 0 : 3 - rem
|
||
}
|
||
|
||
onShow(async () => {
|
||
pageActive.value = true
|
||
userStore.checkLoginStatus()
|
||
if (!userStore.isLoggedIn) {
|
||
stopFollowReminder()
|
||
uni.reLaunch({ url: PAGE_PATHS.login })
|
||
return
|
||
}
|
||
// 关注状态查询不阻塞工作台菜单加载，也不会把查询失败误判为未关注。
|
||
void followReminder.check()
|
||
await userStore.fetchMenuCodes()
|
||
// #ifdef MP-WEIXIN
|
||
checkMpUpdate()
|
||
// #endif
|
||
})
|
||
|
||
const handleMpUpdateTap = () => {
|
||
// #ifdef MP-WEIXIN
|
||
checkMpUpdate({ force: true, fromUser: true })
|
||
// #endif
|
||
}
|
||
|
||
/** 含 web-view 的页用 redirectTo，避免真机 navigateTo:fail timeout 闪进又弹回工作台 */
|
||
const isMpWebviewRoute = (url) =>
|
||
String(url || '').includes('/pages/common/mp-webview')
|
||
|
||
const openPage = (url) => {
|
||
const failToast = () => uni.showToast({ title: '打开失败，请重试', icon: 'none' })
|
||
if (isMpWebviewRoute(url)) {
|
||
const ret = uni.redirectTo({
|
||
url,
|
||
fail: (err) => {
|
||
// 栈异常时再退到 reLaunch
|
||
const msg = String((err && err.errMsg) || '')
|
||
if (/fail/i.test(msg)) {
|
||
uni.reLaunch({ url, fail: failToast })
|
||
return
|
||
}
|
||
failToast()
|
||
}
|
||
})
|
||
if (ret && typeof ret.catch === 'function') ret.catch(() => {})
|
||
return
|
||
}
|
||
const fail = (err) => {
|
||
const msg = String((err && err.errMsg) || '')
|
||
if (/timeout/i.test(msg)) {
|
||
uni.redirectTo({ url, fail: failToast })
|
||
return
|
||
}
|
||
failToast()
|
||
}
|
||
const ret = uni.navigateTo({ url, fail })
|
||
if (ret && typeof ret.catch === 'function') {
|
||
ret.catch(() => {})
|
||
}
|
||
}
|
||
|
||
const openMenu = (module, menu) => {
|
||
if (!menu.enabled) {
|
||
uni.showToast({ title: '本期暂未开放', icon: 'none' })
|
||
return
|
||
}
|
||
const route = WORKBENCH_ROUTE_MAP[menu.code]
|
||
if (route) {
|
||
openPage(route)
|
||
return
|
||
}
|
||
const title = encodeURIComponent(menu.name || '')
|
||
const moduleTitle = encodeURIComponent(module.title || '')
|
||
const code = encodeURIComponent(menu.code || '')
|
||
openPage(`${PAGE_PATHS.bizPlaceholder}?title=${title}&module=${moduleTitle}&code=${code}`)
|
||
}
|
||
|
||
const handleLogout = async () => {
|
||
if (loggingOut.value) return
|
||
loggingOut.value = true
|
||
stopFollowReminder()
|
||
try {
|
||
await userStore.logout()
|
||
} finally {
|
||
loggingOut.value = false
|
||
}
|
||
}
|
||
|
||
const openOfficialAccount = () => {
|
||
if (loggingOut.value) return
|
||
openPage(PAGE_PATHS.wechatOfficialAccount)
|
||
}
|
||
|
||
</script>
|
||
|
||
<template>
|
||
<view class="mp-page mp-page--tab">
|
||
<view class="mp-header mp-header--workbench" :style="safeAreaStyle">
|
||
<view class="mp-header__body">
|
||
<view class="mp-header__titles">
|
||
<text class="mp-header__title">山峡化工工作台</text>
|
||
<!-- #ifdef MP-WEIXIN -->
|
||
<view
|
||
v-if="mpUpdateLine"
|
||
class="mp-header-version"
|
||
:class="{
|
||
'mp-header-version--urgent': mpUpdateUrgent,
|
||
'mp-header-version--ready': mpUpdateStatus === 'ready',
|
||
'mp-header-version--failed': mpUpdateStatus === 'failed'
|
||
}"
|
||
hover-class="mp-header-version--active"
|
||
@click.stop="handleMpUpdateTap"
|
||
>
|
||
<text class="mp-header-version__text">{{ mpUpdateLine }}</text>
|
||
<text v-if="mpUpdateStatus === 'ready'" class="mp-header-version__cta">立即更新</text>
|
||
</view>
|
||
<!-- #endif -->
|
||
</view>
|
||
<view class="mp-header__user-stack">
|
||
<text class="mp-header__user-line">{{ displayName }}，欢迎您</text>
|
||
<text
|
||
class="mp-header__logout"
|
||
:class="{ 'mp-header__logout--disabled': loggingOut }"
|
||
@click="handleLogout"
|
||
>
|
||
{{ loggingOut ? '退出中…' : '退出登录' }}
|
||
</text>
|
||
</view>
|
||
</view>
|
||
<button
|
||
class="mp-header__follow"
|
||
:disabled="loggingOut"
|
||
hover-class="mp-header__follow--active"
|
||
@click="openOfficialAccount"
|
||
>
|
||
关注服务号
|
||
</button>
|
||
</view>
|
||
|
||
<view class="mp-section">
|
||
<view
|
||
v-for="mod in modules"
|
||
:key="mod.key"
|
||
class="mp-module-block"
|
||
:class="'mp-module-block--' + mod.key"
|
||
>
|
||
<view class="mp-module-block__head">
|
||
<text class="mp-module-block__icon">{{ mod.iconText }}</text>
|
||
<view class="mp-module-block__title-wrap">
|
||
<text class="mp-module-block__title">{{ mod.title }}</text>
|
||
<text class="mp-module-block__desc">{{ mod.desc }}</text>
|
||
</view>
|
||
</view>
|
||
<view class="mp-menu-grid">
|
||
<view
|
||
v-for="(menu, idx) in mod.menus"
|
||
:key="menu.code || menu.name + idx"
|
||
class="mp-menu-card"
|
||
:class="{ 'mp-menu-card--disabled': !menu.enabled }"
|
||
@click="openMenu(mod, menu)"
|
||
>
|
||
<view class="mp-menu-card__icon">{{ menu.icon || '' }}</view>
|
||
<text class="mp-menu-card__name">{{ menu.name }}</text>
|
||
</view>
|
||
<view
|
||
v-for="i in menuPadCount(mod.menus.length)"
|
||
:key="'pad-' + mod.key + '-' + i"
|
||
class="mp-menu-card mp-menu-card--pad"
|
||
/>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<app-env-badge />
|
||
</view>
|
||
</template>
|
||
|
||
<style scoped lang="scss">
|
||
.mp-header--workbench {
|
||
position: relative;
|
||
padding-bottom: 68rpx;
|
||
}
|
||
.mp-header__follow {
|
||
position: absolute;
|
||
right: 32rpx;
|
||
bottom: 20rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
min-height: 0;
|
||
height: auto;
|
||
margin: 0;
|
||
padding: 6rpx 16rpx;
|
||
border: none;
|
||
border-radius: 999rpx;
|
||
background: #d6a343;
|
||
color: #fff;
|
||
font-size: 22rpx;
|
||
font-weight: 600;
|
||
box-shadow: 0 4rpx 14rpx rgba(0, 0, 0, 0.14);
|
||
line-height: 1.3;
|
||
}
|
||
.mp-header__follow::after {
|
||
border: none;
|
||
}
|
||
.mp-header__follow--active {
|
||
background: #e8ba60;
|
||
}
|
||
.mp-header__follow[disabled] {
|
||
color: rgba(255, 255, 255, 0.55);
|
||
background: rgba(255, 255, 255, 0.08);
|
||
}
|
||
|
||
/* 标题下方版本行：常态半透明白字；有更新时大麦黄底醒目 */
|
||
.mp-header-version {
|
||
margin-top: 12rpx;
|
||
max-width: 100%;
|
||
min-height: 48rpx;
|
||
padding: 6rpx 0;
|
||
display: flex;
|
||
flex-direction: row;
|
||
flex-wrap: wrap;
|
||
align-items: center;
|
||
gap: 10rpx;
|
||
box-sizing: border-box;
|
||
}
|
||
.mp-header-version--active {
|
||
opacity: 0.88;
|
||
}
|
||
.mp-header-version__text {
|
||
font-size: 22rpx;
|
||
line-height: 1.4;
|
||
color: rgba(255, 255, 255, 0.88);
|
||
text-align: left;
|
||
}
|
||
.mp-header-version--urgent {
|
||
margin-top: 14rpx;
|
||
padding: 10rpx 16rpx;
|
||
border-radius: 12rpx;
|
||
background: #fff7e8;
|
||
border: 1rpx solid rgba(214, 163, 67, 0.55);
|
||
min-height: 64rpx;
|
||
}
|
||
.mp-header-version--urgent .mp-header-version__text {
|
||
color: #8a5a10;
|
||
font-size: 24rpx;
|
||
font-weight: 600;
|
||
}
|
||
.mp-header-version--ready {
|
||
background: #fff3cd;
|
||
border-color: #d6a343;
|
||
animation: mp-version-pulse 1.6s ease-in-out infinite;
|
||
}
|
||
.mp-header-version--ready .mp-header-version__text {
|
||
color: #7a4e08;
|
||
}
|
||
.mp-header-version__cta {
|
||
flex-shrink: 0;
|
||
font-size: 22rpx;
|
||
font-weight: 700;
|
||
line-height: 1.2;
|
||
color: #fff;
|
||
background: #d6a343;
|
||
padding: 6rpx 14rpx;
|
||
border-radius: 999rpx;
|
||
}
|
||
.mp-header-version--failed {
|
||
background: #fef2f2;
|
||
border-color: #fecaca;
|
||
}
|
||
.mp-header-version--failed .mp-header-version__text {
|
||
color: #b91c1c;
|
||
font-weight: 600;
|
||
}
|
||
@keyframes mp-version-pulse {
|
||
0%,
|
||
100% {
|
||
box-shadow: 0 0 0 0 rgba(214, 163, 67, 0.35);
|
||
}
|
||
50% {
|
||
box-shadow: 0 0 0 8rpx rgba(214, 163, 67, 0);
|
||
}
|
||
}
|
||
</style>
|