first commit
This commit is contained in:
@@ -0,0 +1,553 @@
|
||||
<template>
|
||||
<view class="function-page">
|
||||
<!-- 统一顶部导航 -->
|
||||
<view class="unified-header">
|
||||
<view class="header-content">
|
||||
<view class="header-left">
|
||||
<!-- <i class="fas fa-search header-icon" @click="handleSearch"></i> -->
|
||||
</view>
|
||||
<view class="header-title">功能</view>
|
||||
<view class="header-right">
|
||||
<!-- <i class="fas fa-bell header-icon" @click="handleNotification">
|
||||
<view class="badge" v-if="unreadCount > 0">{{ unreadCount }}</view>
|
||||
</i> -->
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 最近使用 -->
|
||||
<view class="recent-section" v-if="recentFunctions.length > 0">
|
||||
<view class="section-title">最近使用</view>
|
||||
<view class="recent-functions">
|
||||
<view
|
||||
class="recent-item"
|
||||
v-for="(func, index) in recentFunctions"
|
||||
:key="index"
|
||||
@click="handleFunction(func)"
|
||||
>
|
||||
<view class="recent-icon">
|
||||
<i
|
||||
class="icon-text"
|
||||
:class="func.icon"
|
||||
:style="{ color: func.color }"
|
||||
></i>
|
||||
</view>
|
||||
<text class="recent-label">{{ func.label }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 分类导航 -->
|
||||
<view class="category-tabs">
|
||||
<scroll-view scroll-x class="tabs-scroll">
|
||||
<view class="tabs">
|
||||
<view
|
||||
class="tab-item"
|
||||
:class="{ active: activeCategory === category.key }"
|
||||
v-for="category in categories"
|
||||
:key="category.key"
|
||||
@click="switchCategory(category.key)"
|
||||
>
|
||||
<text>{{ category.label }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
</view>
|
||||
|
||||
<!-- 功能列表 -->
|
||||
<scroll-view scroll-y class="unified-content">
|
||||
<view class="function-list">
|
||||
<view
|
||||
class="function-group"
|
||||
v-for="(group, groupIndex) in currentFunctions"
|
||||
:key="groupIndex"
|
||||
>
|
||||
<view class="group-functions">
|
||||
<view
|
||||
class="function-item"
|
||||
v-for="(func, funcIndex) in group.functions"
|
||||
:key="funcIndex"
|
||||
@click="handleFunction(func)"
|
||||
>
|
||||
<view class="function-icon">
|
||||
<i
|
||||
class="icon-text"
|
||||
:class="func.icon"
|
||||
:style="{ color: func.color }"
|
||||
></i>
|
||||
</view>
|
||||
<view class="function-content">
|
||||
<text class="function-name">{{ func.name }}</text>
|
||||
<text class="function-desc">{{ func.description }}</text>
|
||||
</view>
|
||||
<view class="function-arrow">
|
||||
<text class="arrow-icon">›</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { ref, reactive, computed } from "vue";
|
||||
|
||||
// 图标
|
||||
const FA = {
|
||||
clock: "fas fa-clock",
|
||||
route: "fas fa-route",
|
||||
calendar: "fas fa-calendar-alt",
|
||||
tasks: "fas fa-tasks",
|
||||
sync: "fas fa-sync-alt",
|
||||
money: "fas fa-money-bill-wave",
|
||||
file: "fas fa-file-alt",
|
||||
userFriends: "fas fa-user-friends",
|
||||
folder: "fas fa-folder-open",
|
||||
chatBar: "far fa-chart-bar",
|
||||
};
|
||||
|
||||
export default {
|
||||
setup() {
|
||||
// 响应式数据
|
||||
const activeCategory = ref("datas");
|
||||
const unreadCount = ref(2);
|
||||
|
||||
// 分类数据
|
||||
const categories = reactive([
|
||||
{ key: "datas", label: "业务数据" },
|
||||
{ key: "hr", label: "人事管理" },
|
||||
{ key: "finance", label: "财务报销" },
|
||||
{ key: "work", label: "工作协同" },
|
||||
{ key: "resource", label: "资源管理" },
|
||||
]);
|
||||
|
||||
// 最近使用功能
|
||||
const recentFunctions = reactive([
|
||||
{ icon: FA.calendar, color: "#FF6B6B", label: "请假", action: "leave" },
|
||||
{
|
||||
icon: FA.money,
|
||||
color: "#4ECDC4",
|
||||
label: "报销",
|
||||
action: "reimbursement",
|
||||
},
|
||||
{ icon: FA.route, color: "#45B7D1", label: "打卡", action: "checkin" },
|
||||
]);
|
||||
|
||||
// 功能数据
|
||||
const functionData = reactive({
|
||||
datas: [
|
||||
{
|
||||
functions: [
|
||||
{
|
||||
name: "业务数据",
|
||||
description: "查看业务数据",
|
||||
icon: FA.chatBar,
|
||||
color: "#0081ff",
|
||||
action: "businessData",
|
||||
},
|
||||
{
|
||||
name: "业务审批",
|
||||
description: "审批相关业务流程",
|
||||
icon: "fas fa-check-circle",
|
||||
color: "#0081ff",
|
||||
action: "approval",
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
hr: [
|
||||
{
|
||||
functions: [
|
||||
{
|
||||
name: "考勤打卡",
|
||||
description: "支持定位打卡、WiFi打卡",
|
||||
icon: FA.route,
|
||||
color: "#0081ff",
|
||||
action: "attendance",
|
||||
},
|
||||
{
|
||||
name: "请假申请",
|
||||
description: "选择类型、日期、理由，附附件",
|
||||
icon: FA.calendar,
|
||||
color: "#0081ff",
|
||||
action: "leave",
|
||||
},
|
||||
{
|
||||
name: "加班申请",
|
||||
description: "申请加班，记录加班时长",
|
||||
icon: FA.tasks,
|
||||
color: "#0081ff",
|
||||
action: "overtime",
|
||||
},
|
||||
{
|
||||
name: "调休记录",
|
||||
description: "查看调休申请和记录",
|
||||
icon: FA.sync,
|
||||
color: "#0081ff",
|
||||
action: "compensatory",
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
finance: [
|
||||
{
|
||||
functions: [
|
||||
{
|
||||
name: "报销提交",
|
||||
description: "选择报销类型、上传发票、填写金额",
|
||||
icon: FA.money,
|
||||
color: "#0081ff",
|
||||
action: "reimbursement",
|
||||
},
|
||||
{
|
||||
name: "报销进度",
|
||||
description: "查看报销申请进度",
|
||||
icon: FA.file,
|
||||
color: "#0081ff",
|
||||
action: "reimbursement-progress",
|
||||
},
|
||||
{
|
||||
name: "报销历史",
|
||||
description: "查看历史报销记录",
|
||||
icon: FA.tasks,
|
||||
color: "#0081ff",
|
||||
action: "reimbursement-history",
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
work: [
|
||||
{
|
||||
functions: [
|
||||
{
|
||||
name: "待办任务",
|
||||
description: "关联项目、设置截止时间",
|
||||
icon: FA.tasks,
|
||||
color: "#0081ff",
|
||||
action: "todo",
|
||||
},
|
||||
{
|
||||
name: "已办任务",
|
||||
description: "查看已完成的任务",
|
||||
icon: FA.tasks,
|
||||
color: "#0081ff",
|
||||
action: "completed",
|
||||
},
|
||||
{
|
||||
name: "会议预订",
|
||||
description: "选择会议室、邀请参会人",
|
||||
icon: FA.calendar,
|
||||
color: "#0081ff",
|
||||
action: "meeting",
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
resource: [
|
||||
{
|
||||
functions: [
|
||||
{
|
||||
name: "客户目录",
|
||||
description: "按行业、区域分类，显示联系方式",
|
||||
icon: FA.userFriends,
|
||||
color: "#0081ff",
|
||||
action: "customer",
|
||||
},
|
||||
{
|
||||
name: "企业文件库",
|
||||
description: "按部门权限查看，支持在线预览",
|
||||
icon: FA.folder,
|
||||
color: "#0081ff",
|
||||
action: "files",
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
});
|
||||
|
||||
// 计算当前分类的功能
|
||||
const currentFunctions = computed(() => {
|
||||
return functionData[activeCategory.value] || [];
|
||||
});
|
||||
|
||||
// 方法
|
||||
const handleSearch = () => {
|
||||
uni.showToast({
|
||||
title: "搜索功能",
|
||||
});
|
||||
};
|
||||
|
||||
//跳转通知页面
|
||||
const handleNotification = () => {
|
||||
uni.switchTab({
|
||||
url: "/pages/message/message",
|
||||
});
|
||||
};
|
||||
|
||||
const switchCategory = (category) => {
|
||||
activeCategory.value = category;
|
||||
};
|
||||
|
||||
const handleFunction = (func) => {
|
||||
//跳转业务数据页面
|
||||
if (func.action === "businessData") {
|
||||
uni.navigateTo({
|
||||
url: "/pages/businessDatas/index",
|
||||
});
|
||||
return;
|
||||
}
|
||||
//跳转到业务审批界面
|
||||
if (func.action === "approval") {
|
||||
uni.navigateTo({
|
||||
url: "/pages/tasks/approval",
|
||||
});
|
||||
return;
|
||||
}
|
||||
//跳转任务页面
|
||||
if (func.action === "todo") {
|
||||
uni.navigateTo({
|
||||
url: "/pages/tasks/index",
|
||||
});
|
||||
return;
|
||||
}
|
||||
//跳转考勤页面
|
||||
if (func.action === "attendance") {
|
||||
uni.navigateTo({
|
||||
url: "/pages/hr/attendance/index",
|
||||
});
|
||||
return;
|
||||
}
|
||||
uni.showToast({
|
||||
title: `功能开发中...`,
|
||||
});
|
||||
};
|
||||
|
||||
return {
|
||||
activeCategory,
|
||||
unreadCount,
|
||||
categories,
|
||||
recentFunctions,
|
||||
currentFunctions,
|
||||
handleSearch,
|
||||
handleNotification,
|
||||
switchCategory,
|
||||
handleFunction,
|
||||
};
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.function-page {
|
||||
height: 100vh;
|
||||
background-color: var(--background);
|
||||
position: relative;
|
||||
padding-top: calc(var(--status-bar-height) + 88rpx);
|
||||
}
|
||||
|
||||
/* 支持安全区域的设备 */
|
||||
@supports (padding: max(0px)) {
|
||||
.function-page {
|
||||
padding-top: calc(
|
||||
var(--status-bar-height) + 88rpx + env(safe-area-inset-top)
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
.navbar-content {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.search-box {
|
||||
flex: 1;
|
||||
background-color: rgba(255, 255, 255, 0.2);
|
||||
border-radius: 25rpx;
|
||||
padding: 15rpx 20rpx;
|
||||
margin-right: 20rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.search-placeholder {
|
||||
color: rgba(255, 255, 255, 0.8);
|
||||
font-size: 28rpx;
|
||||
margin-left: 10rpx;
|
||||
}
|
||||
|
||||
.notification {
|
||||
position: relative;
|
||||
padding: 10rpx;
|
||||
}
|
||||
|
||||
.recent-section {
|
||||
background: var(--white);
|
||||
padding: 30rpx;
|
||||
border-bottom: 1rpx solid var(--border-light);
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-size: 28rpx;
|
||||
font-weight: 600;
|
||||
color: var(--text-color);
|
||||
margin-bottom: 20rpx;
|
||||
}
|
||||
|
||||
.recent-functions {
|
||||
display: flex;
|
||||
gap: 30rpx;
|
||||
}
|
||||
|
||||
.recent-item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.recent-icon {
|
||||
margin-bottom: 10rpx;
|
||||
}
|
||||
|
||||
.recent-label {
|
||||
font-size: 24rpx;
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
.category-tabs {
|
||||
background: var(--white);
|
||||
border-bottom: 1rpx solid var(--border-light);
|
||||
}
|
||||
|
||||
.tabs-scroll {
|
||||
white-space: nowrap;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.tabs {
|
||||
display: flex;
|
||||
padding: 0 30rpx;
|
||||
min-width: max-content;
|
||||
}
|
||||
|
||||
.tab-item {
|
||||
padding: 30rpx 20rpx;
|
||||
font-size: 28rpx;
|
||||
color: var(--text-secondary);
|
||||
white-space: nowrap;
|
||||
position: relative;
|
||||
flex-shrink: 0;
|
||||
min-width: max-content;
|
||||
}
|
||||
|
||||
.tab-item.active {
|
||||
color: var(--primary-color);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.tab-item.active::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
width: 60rpx;
|
||||
height: 4rpx;
|
||||
background-color: var(--primary-color);
|
||||
border-radius: 2rpx;
|
||||
}
|
||||
|
||||
.page-content {
|
||||
height: calc(100vh - 300rpx);
|
||||
}
|
||||
|
||||
.function-list {
|
||||
padding: 30rpx;
|
||||
}
|
||||
|
||||
.function-group {
|
||||
margin-bottom: 40rpx;
|
||||
}
|
||||
|
||||
.group-title {
|
||||
font-size: 30rpx;
|
||||
font-weight: 600;
|
||||
color: var(--text-color);
|
||||
margin-bottom: 20rpx;
|
||||
}
|
||||
|
||||
.group-functions {
|
||||
background: var(--white);
|
||||
border-radius: 16rpx;
|
||||
overflow: hidden;
|
||||
box-shadow: var(--shadow);
|
||||
}
|
||||
|
||||
.function-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 30rpx;
|
||||
border-bottom: 1rpx solid var(--border-light);
|
||||
}
|
||||
|
||||
.function-item:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.function-icon {
|
||||
margin-right: 20rpx;
|
||||
}
|
||||
|
||||
.function-content {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.function-name {
|
||||
font-size: 30rpx;
|
||||
font-weight: 600;
|
||||
color: var(--text-color);
|
||||
margin-bottom: 8rpx;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.function-desc {
|
||||
font-size: 24rpx;
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
.function-arrow {
|
||||
margin-left: 20rpx;
|
||||
}
|
||||
|
||||
.search-icon,
|
||||
.notification-icon {
|
||||
font-size: 32rpx;
|
||||
margin-right: 10rpx;
|
||||
color: var(--white);
|
||||
}
|
||||
|
||||
.badge {
|
||||
position: absolute;
|
||||
top: 0rpx;
|
||||
right: 15rpx;
|
||||
background-color: var(--error);
|
||||
color: var(--white);
|
||||
font-size: 20rpx;
|
||||
padding: 2rpx 8rpx;
|
||||
border-radius: 50%;
|
||||
// min-width: 30rpx;
|
||||
text-align: center;
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
.icon-text {
|
||||
font-size: 40rpx;
|
||||
}
|
||||
|
||||
.arrow-icon {
|
||||
font-size: 32rpx;
|
||||
color: var(--text-muted);
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user