c-zhouhf1/zhgh_hgu
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

commit

Browse Source
This commit is contained in:
c-zhouhf1
2025-11-12 09:46:46 +08:00
parent 648f0d116f
commit 54e30e62b4
18 changed files with 1217 additions and 628 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/main/resources/views/platform/zhghh5/sys/home/apps.js
+115 -83
View File
@@ -23,7 +23,7 @@ const apps = {
@click="onClickNav(index)"
>
<div class="nav-icon">
<i v-if="category.icon" :class="category.icon"></i>
<van-icon v-if="category.icon" :name="category.icon" size="28"></van-icon>
<i v-else class="fa fa-book"></i>
</div>
<div class="nav-text">{{ category.name }}</div>
@@ -34,41 +34,31 @@ const apps = {
<!-- 右侧内容 -->
<div class="tree-content">
<!-- 应用列表 -->
<div class="app-list" v-if="applications.length > 0">
<div
v-for="app in applications"
:key="app.id"
class="app-item"
@click="openApp(app)"
>
<div class="app-icon">
<van-image
v-if="app.picIcon"
:src="app.picIcon"
fit="cover"
width="40"
height="40"
radius="4"
></van-image>
<van-icon v-else-if="app.icon" :name="app.icon" size="24"></van-icon>
<van-icon v-else name="apps-o" size="24"></van-icon>
</div>
<div class="app-info">
<div class="app-title">{{ app.name }}</div>
<div class="app-desc" v-if="app.department">{{ app.department }}</div>
</div>
<div class="app-action">
<van-icon
:name="app.isFavorite ? 'star' : 'star-o'"
:class="['favorite-icon', app.isFavorite ? 'active' : '']"
@click.stop="toggleFavorite(app.id)"
></van-icon>
<div :class="['app-grid', { 'app-grid-single': applications.length === 1 }]"
v-if="applications.length > 0">
<div v-for="app in applications"
:key="app.id"
class="app-grid-item"
:class="{ 'is-favorite': app.isFavorite }"
@click="openApp(app)"
@touchstart="onTouchStart(app)"
@touchend="onTouchEnd"
@touchmove="onTouchMove">
<!-- 图标 -->
<div class="app-grid-icon">
<van-icon v-if="app.picIcon" :name="app.picIcon" size="64"
style="border-radius: 12px; width: 64px; height: 64px;"></van-icon>
<van-icon v-else-if="app.icon" :name="app.icon" size="28"></van-icon>
<van-icon v-else name="apps-o" size="28"></van-icon>
</div>
<!-- 名称 -->
<div class="app-grid-name">{{ app.name }}</div>
</div>
</div>
</div>
<!-- 空状态 -->
<van-empty v-else description="暂无应用"></van-empty>
</div>
</div>
@@ -118,7 +108,10 @@ const apps = {
// 弹框相关
showMenuPopup: false,
currentApp: {},
currentMenus: []
currentMenus: [],
touchTimer: null,
isTouchMoved: false,
}
},
computed: {
@@ -129,8 +122,7 @@ const apps = {
// 当前选中的分类ID
currentCategoryId() {
return this.allCategories[this.activeTab]?.id || "all"
},
}
},
mounted() {
// 页面加载时获取分类和应用数据
@@ -225,16 +217,38 @@ const apps = {
.then((result) => {
if (result.code === 0) {
app.isFavorite = !app.isFavorite
this.$toast(app.isFavorite ? "收藏成功" : "取消收藏成功")
this.$toast(app.isFavorite ? ('收藏成功：' + app.name) : ('取消收藏：' + app.name))
} else {
console.error(app.isFavorite ? "取消收藏失败:" : "收藏失败:", result.msg)
console.error(app.isFavorite ? ('取消收藏：' + app.name) : ('收藏失败：' + app.name), result.msg)
}
})
.fail((error) => {
console.error(app.isFavorite ? "取消收藏异常:" : "收藏异常:", error)
console.error(app.isFavorite ? ('取消收藏：' + app.name) : ('收藏异常：' + app.name), error)
})
},
// 长按开始
onTouchStart(app) {
this.isTouchMoved = false
this.touchTimer = setTimeout(() => {
this.toggleFavorite(app.id)
}, 800) // 长按 800ms 触发
},
// 触摸移动（判断是否滑动，避免误触长按）
onTouchMove() {
this.isTouchMoved = true
},
// 触摸结束（清除计时器）
onTouchEnd() {
if (this.touchTimer) {
clearTimeout(this.touchTimer)
this.touchTimer = null
}
},
// 搜索
onSearch() {
this.applications = []
@@ -283,7 +297,7 @@ const apps = {
// 导航到菜单
navigateToMenu(menu) {
// 关闭弹框
this.showMenuPopup = false
// this.showMenuPopup = false
if (menu.href) {
if(menu.href.startsWith('http://') || menu.href.startsWith('https://')){
window.open(menu.href, '_blank')
@@ -295,6 +309,12 @@ const apps = {
}
}
},
// 初始加载消除长按收藏
beforeDestroy() {
if (this.touchTimer) {
clearTimeout(this.touchTimer)
}
},
style: /*language=CSS*/ `
.apps-container {
display: flex;
@@ -385,66 +405,77 @@ const apps = {
background: #fff;
}
.app-list {
flex: 1;
overflow-y: auto;
.app-grid {
display: grid;
/* 改为自适应列数：每格最小 80px，自动换行 */
grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
justify-items: center; /* 子项内容居中（图标和文字） */
justify-content: start; /* 整体网格靠左对齐，避免居中 */
gap: 12px;
padding: 12px;
background: #fff;
overflow-x: hidden;
}
.app-item {
.app-grid-single {
display: flex;
align-items: center;
padding: 12px 16px;
background-color: #fff;
margin-bottom: 1px;
position: relative;
justify-content: start;
padding: 16px 0;
}
.app-icon {
width: 40px;
height: 40px;
border-radius: 4px;
background-color: #f2f3f5;
.app-grid-single .app-grid-item {
max-width: 80px;
margin: 0 12px;
}
.app-grid-item {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
padding: 12px 4px;
border-radius: 8px;
background: #fff;
width: 100%;
max-width: 100%;
}
.app-grid-icon {
width: 64px;
height: 64px;
max-width: 64px;
max-height: 64px;
border-radius: 12px;
background: #f2f3f5;
display: flex;
align-items: center;
justify-content: center;
margin-right: 12px;
margin-bottom: 6px;
overflow: hidden;
border: 2px solid transparent;
transition: all 0.2s ease;
}
.app-info {
flex: 1;
}
.app-title {
font-size: 16px;
font-weight: 500;
margin-bottom: 4px;
color: #323233;
}
.app-desc {
.app-grid-name {
width: 100%;
font-size: 12px;
color: #969799;
}
.app-action {
padding: 0 8px;
}
.favorite-icon {
font-size: 20px;
color: #c8c9cc;
}
.favorite-icon.active {
color: #ff9800;
}
.loading-container {
padding: 20px 0;
color: #323233;
text-align: center;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.app-grid-item.is-favorite .app-grid-icon,
.app-grid-icon.is-favorite {
border-color: #ff9800;
box-shadow: 0 0 0 2px rgba(255, 152, 0, 0.2);
}
/* 菜单弹框样式 */
/deep/ .menu-popup {
height: 100%;
@@ -546,5 +577,6 @@ const apps = {
font-size: 16px;
color: #c8c9cc;
}
`
}
src/main/resources/views/platform/zhghh5/sys/home/home.js
+9 -9
View File
@@ -37,8 +37,8 @@ const home = {
<van-tag class="act-item-wrapper-tag" v-if="$moment().unix() > $moment(item.endDate).unix()">
已结束
</van-tag>
<van-tag class="act-item-wrapper-tag" type="success"
<van-tag class="act-item-wrapper-tag" type="success"
v-else-if="$moment().unix() > $moment(item.startDate).unix() && $moment().unix() < $moment(item.endDate).unix()">
进行中
</van-tag>
@@ -46,7 +46,7 @@ const home = {
<van-tag class="act-item-wrapper-tag" type="success" v-else-if="$moment().unix() < $moment(item.startDate).unix()">
即将开始
</van-tag>
<div class="act-item-cover">
<van-image v-if="item.cover" width="120" height="84" :src="item.cover"></van-image>
</div>
@@ -143,7 +143,7 @@ const home = {
height: 84px;
flex-shrink: 0;
}
.act-list .act-item-cover .van-image{
/*width: 120px;*/
/*height: 84px;*/
@@ -164,7 +164,7 @@ const home = {
top: 10px;
z-index: 1;
}
.act-item-wrapper .content-title{
font-size: 14px;
width: 100%;
@@ -175,23 +175,23 @@ const home = {
text-overflow: ellipsis;
word-break: break-all;
}
.act-item-wrapper .content-text{
font-size: 12px;
color: grey;
padding-bottom: 6px;
}
.section-title{
padding: 0 0 5px 5px;
font-size: 15px;
}
/deep/ .home__swipe img {
width: 100%;
height: 100%;
}
/deep/ .act-item-cover img {
border-radius: 8px;
}
src/main/resources/views/platform/zhghh5/sys/home/index.html
+1 -1
View File
@@ -24,7 +24,7 @@ layout("/layouts/platform_h5.html"){
<van-tabbar v-model="homeTabbarActive" @change="homeTabbarChange">
<van-tabbar-item name="home" icon="wap-home-o">首页</van-tabbar-item>
<van-tabbar-item name="apps" icon="apps-o">应用</van-tabbar-item>
<!-- <van-tabbar-item name="work" icon="gem">工作台</van-tabbar-item>-->
<!-- <van-tabbar-item name="work" icon="gem">工作台</van-tabbar-item>-->
<van-tabbar-item name="todo" icon="records-o">待办</van-tabbar-item>
<van-tabbar-item name="msg" icon="envelop-o">消息</van-tabbar-item>
<van-tabbar-item name="mine" icon="user-o">我的</van-tabbar-item>
src/main/resources/views/platform/zhghh5/sys/home/msg.js
+67 -67
View File
@@ -2,34 +2,34 @@ const msg= {
template: /*language=HTML*/ `
<div class="message-center">
<van-nav-bar title="消息中心" placeholder fixed></van-nav-bar>
<!-- 筛选区域 -->
<van-sticky offset-top="46px">
<!-- <div class="filter-section">-->
<!-- <van-row gutter="10">-->
<!-- <van-col span="12">-->
<!-- <van-field-->
<!-- v-model="filters.type"-->
<!-- is-link-->
<!-- readonly-->
<!-- label="消息类型"-->
<!-- placeholder="选择消息类型"-->
<!-- @click="showTypePicker = true"-->
<!-- />-->
<!-- </van-col>-->
<!-- <van-col span="12" v-if="pageForm.isRead == 0">-->
<!-- <van-button -->
<!-- type="primary" -->
<!-- size="small" -->
<!-- :loading="loading"-->
<!-- @click="markAllAsRead"-->
<!-- style="margin-top: 6px; width: 100%;"-->
<!-- >-->
<!-- 全部已读-->
<!-- </van-button>-->
<!-- </van-col>-->
<!-- </van-row>-->
<!-- </div>-->
<!-- <div class="filter-section">-->
<!-- <van-row gutter="10">-->
<!-- <van-col span="12">-->
<!-- <van-field-->
<!-- v-model="filters.type"-->
<!-- is-link-->
<!-- readonly-->
<!-- label="消息类型"-->
<!-- placeholder="选择消息类型"-->
<!-- @click="showTypePicker = true"-->
<!-- />-->
<!-- </van-col>-->
<!-- <van-col span="12" v-if="pageForm.isRead == 0">-->
<!-- <van-button -->
<!-- type="primary" -->
<!-- size="small" -->
<!-- :loading="loading"-->
<!-- @click="markAllAsRead"-->
<!-- style="margin-top: 6px; width: 100%;"-->
<!-- >-->
<!-- 全部已读-->
<!-- </van-button>-->
<!-- </van-col>-->
<!-- </van-row>-->
<!-- </div>-->
<!-- 标签页 -->
<van-tabs v-model="activeTab" @change="handleTabChange">
<van-tab title="全部消息" name="-1">
@@ -56,34 +56,34 @@ const msg= {
<!-- 消息列表 -->
<van-pull-refresh v-model="refreshing" @refresh="onRefresh">
<van-list
style="padding: 10px"
v-model="loading"
:finished="finished"
finished-text="没有更多了"
@load="onLoad"
style="padding: 10px"
v-model="loading"
:finished="finished"
finished-text="没有更多了"
@load="onLoad"
>
<div
v-for="message in messages"
:key="message.id"
@click="viewMessage(message)"
class="custom-message-item"
:class="{'unread-message': !message.isRead}"
v-for="message in messages"
:key="message.id"
@click="viewMessage(message)"
class="custom-message-item"
:class="{'unread-message': !message.isRead}"
>
<div class="message-header">
<div class="message-title-wrapper">
<van-tag
:type="message.type === 1 ? 'danger' : 'primary'"
size="mini"
style="margin-right: 8px;"
<van-tag
:type="message.type === 1 ? 'danger' : 'primary'"
size="mini"
style="margin-right: 8px;"
>
{{getMessageTypeName(message.type)}}
</van-tag>
<!-- <span class="message-title">{{message.title}}</span>-->
<van-tag
v-if="!message.isRead"
type="warning"
size="mini"
style="margin-left: 8px;"
<!-- <span class="message-title">{{message.title}}</span>-->
<van-tag
v-if="!message.isRead"
type="warning"
size="mini"
style="margin-left: 8px;"
>
未读
</van-tag>
@@ -101,19 +101,19 @@ const msg= {
<!-- 消息类型选择器 -->
<van-popup v-model="showTypePicker" position="bottom">
<van-picker
:columns="typeColumns"
@confirm="onTypeConfirm"
@cancel="showTypePicker = false"
:columns="typeColumns"
@confirm="onTypeConfirm"
@cancel="showTypePicker = false"
/>
</van-popup>
<!-- 消息详情弹窗 -->
<van-popup
v-model="detailVisible"
position="bottom"
:style="{ height: '80%' }"
closeable
close-icon-position="top-right"
<van-popup
v-model="detailVisible"
position="bottom"
:style="{ height: '80%' }"
closeable
close-icon-position="top-right"
>
<div class="message-detail" v-if="currentMessage.id">
<div class="detail-header">
@@ -523,7 +523,7 @@ const msg= {
}
/* 简约动画效果 */
/* 基础过渡效果 */
/deep/ .oa-message-item,
/deep/ .oa-stat-item,
@@ -531,12 +531,12 @@ const msg= {
/deep/ .oa-search-input {
transition: all 0.2s ease;
}
/* 页面进入动画 */
/deep/ .page-enter {
animation: fadeIn 0.3s ease;
}
@keyframes fadeIn {
from {
opacity: 0;
@@ -545,7 +545,7 @@ const msg= {
opacity: 1;
}
}
/* 简化的响应式动画 */
@media (prefers-reduced-motion: reduce) {
* {
@@ -560,37 +560,37 @@ const msg= {
/deep/ .oa-header {
padding: 10px 12px;
}
/deep/ .oa-header-title {
font-size: 15px;
}
/deep/ .oa-stats-panel,
/deep/ .oa-toolbar,
/deep/ .oa-message-list {
margin: 6px 12px;
}
/deep/ .oa-stat-item {
padding: 12px 8px;
}
/deep/ .oa-stat-number {
font-size: 16px;
}
/deep/ .oa-stat-label {
font-size: 11px;
}
/deep/ .oa-message-item {
padding: 12px;
}
/deep/ .oa-message-title {
font-size: 14px;
}
/deep/ .oa-message-content {
font-size: 12px;
}
src/main/resources/views/platform/zhghh5/sys/home/todo.js
+3 -3
View File
@@ -217,7 +217,7 @@ const todo = {
/deep/ .van-tabs__line {
background-color: var(--color-primary, #1989fa);
}
/deep/ .filter-section {
/*margin-bottom: 16px;*/
}
@@ -229,11 +229,11 @@ const todo = {
border-radius: 8px;
align-items: center;
}
.search-form .van-search{
width: 100%;
}
.search-input {
flex: 1;
margin-right: 12px;