339 lines
6.7 KiB
Vue
339 lines
6.7 KiB
Vue
<template>
|
|
<view class="home-page">
|
|
<!-- 顶部用户信息 -->
|
|
<view class="home-header">
|
|
<view class="home-user-row" @click="goUserInfo">
|
|
<view class="home-avatar">
|
|
<text class="home-avatar-text">{{avatarText}}</text>
|
|
</view>
|
|
<view class="home-user-info">
|
|
<text class="home-user-name">{{welTitle}}</text>
|
|
<text class="home-date">{{currentDate}}</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 统计卡片 -->
|
|
<view class="stat-section">
|
|
<navigator class="stat-card" url="../wf/index?category=duty" hover-class="stat-card-hover">
|
|
<view class="stat-card-head">
|
|
<text class="stat-card-title tc-green">待办</text>
|
|
<text class="stat-card-icon-r">📋</text>
|
|
</view>
|
|
<view class="stat-card-body">
|
|
<text class="stat-card-num">{{duty_count}}</text>
|
|
<text class="stat-card-unit">条</text>
|
|
</view>
|
|
</navigator>
|
|
<navigator class="stat-card" url="../wf/index?category=owner" hover-class="stat-card-hover">
|
|
<view class="stat-card-head">
|
|
<text class="stat-card-title tc-blue">我的</text>
|
|
<text class="stat-card-icon-r">📁</text>
|
|
</view>
|
|
<view class="stat-card-body">
|
|
<text class="stat-card-num">{{owner_count}}</text>
|
|
<text class="stat-card-unit">项</text>
|
|
</view>
|
|
</navigator>
|
|
</view>
|
|
|
|
<!-- 常用流程 -->
|
|
<view class="flow-section">
|
|
<view v-for="group in wfOptions" :key="group.category" class="flow-group">
|
|
<view class="section-header">
|
|
<view class="section-title">
|
|
<view class="section-dot"></view>
|
|
<text>{{ group.category }}</text>
|
|
</view>
|
|
</view>
|
|
<view class="flow-grid">
|
|
<view class="flow-grid-item" v-for="(item, index) in group.items" :key="index" @click="pageEnter(item)" hover-class="flow-item-hover">
|
|
<view class="flow-icon-wrap" :class="'flow-icon-c' + (index % 3)">
|
|
<image class="flow-icon" :src="item.icon_path?item.icon_path:'/static/yuding.png'" mode="aspectFill" />
|
|
</view>
|
|
<text class="flow-name">{{item.name}}</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import tool from "../../utils/tools.js";
|
|
import { auth } from '@/utils/auth.js'
|
|
export default {
|
|
data() {
|
|
return {
|
|
welTitle: "",
|
|
avatarText: "",
|
|
imageSrc:"",
|
|
currentDate: tool.getTodayDate(),
|
|
wfOptions: [],
|
|
duty_count: 0,
|
|
owner_count: 0
|
|
}
|
|
},
|
|
mounted() {
|
|
this.initWelTitle();
|
|
this.getWfOptions();
|
|
},
|
|
onShow() {
|
|
// #ifdef MP-WEIXIN
|
|
uni.hideHomeButton()
|
|
// #endif
|
|
this.getTicketCount();
|
|
},
|
|
methods: {
|
|
getTicketCount() {
|
|
this.$api.getTicket({category:"duty", page:1, page_size:1}).then(res=>{
|
|
this.duty_count = res.count;
|
|
})
|
|
this.$api.getTicket({category:"owner", page:1, page_size:1}).then(res=>{
|
|
this.owner_count = res.count;
|
|
})
|
|
},
|
|
getWfOptions() {
|
|
let permissions = auth.getPermissions();
|
|
const groups = {};
|
|
this.$api.getWorkflow({ page: 0 }).then((res) => {
|
|
res.forEach((item) => {
|
|
if(item.key && permissions.includes(item.key)) {
|
|
let cate = item.cate;
|
|
if (!cate){cate="未分组"}
|
|
if (!groups[cate]) {
|
|
groups[cate] = [];
|
|
}
|
|
groups[cate].push(item);
|
|
}
|
|
})
|
|
// 转换为数组形式，便于模板遍历
|
|
this.wfOptions = Object.keys(groups).map(category => ({
|
|
category,
|
|
items: groups[category]
|
|
}));
|
|
});
|
|
},
|
|
initWelTitle() {
|
|
let userInfo = uni.getStorageSync("userInfo")
|
|
let name = userInfo.name;
|
|
this.welTitle = `${name}，您好！`
|
|
this.avatarText = name ? name.slice(-2) : '👤'
|
|
},
|
|
goUserInfo() {
|
|
uni.navigateTo({
|
|
url: "/pages/system/userInfo"
|
|
})
|
|
},
|
|
pageEnter(item){
|
|
const viewPath = item.view_path;
|
|
let view_path = item.view_path2?item.view_path2:item.view_path;
|
|
uni.navigateTo({
|
|
url:`/pages${view_path}?mode=add`
|
|
}).catch(e=>{
|
|
console.log(e)
|
|
if (e.errMsg.indexOf("not found")!=-1){
|
|
uni.showToast({
|
|
title: '该页面暂未完成',
|
|
icon: 'none'
|
|
});
|
|
}
|
|
})
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
<style lang="scss" scoped>
|
|
.home-page {
|
|
min-height: 100vh;
|
|
background: #F5F7FA;
|
|
padding-bottom: 40rpx;
|
|
}
|
|
|
|
// ========== 顶部用户信息 ==========
|
|
.home-header {
|
|
background: #FFFFFF;
|
|
padding: 28rpx 32rpx;
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.home-user-row {
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.home-avatar {
|
|
width: 80rpx;
|
|
height: 80rpx;
|
|
border-radius: 50%;
|
|
background: linear-gradient(135deg, #2BA471, #48C68B);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
margin-right: 20rpx;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.home-avatar-text {
|
|
color: #FFFFFF;
|
|
font-size: 28rpx;
|
|
font-weight: 700;
|
|
}
|
|
|
|
.home-user-info {
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.home-user-name {
|
|
font-size: 32rpx;
|
|
font-weight: 700;
|
|
color: #1A2E25;
|
|
}
|
|
|
|
.home-date {
|
|
font-size: 24rpx;
|
|
color: #999;
|
|
margin-top: 4rpx;
|
|
}
|
|
|
|
// ========== 统计卡片 ==========
|
|
.stat-section {
|
|
display: flex;
|
|
gap: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
.stat-card {
|
|
flex: 1;
|
|
background: #FFFFFF;
|
|
border-radius: 0;
|
|
padding: 24rpx;
|
|
text-decoration: none;
|
|
}
|
|
|
|
.stat-card-hover {
|
|
opacity: 0.96;
|
|
transform: scale(0.98);
|
|
}
|
|
|
|
.stat-card-head {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
margin-bottom: 12rpx;
|
|
}
|
|
|
|
.stat-card-title {
|
|
font-size: 26rpx;
|
|
font-weight: 700;
|
|
}
|
|
|
|
.tc-green { color: #2BA471; }
|
|
.tc-blue { color: #3594E6; }
|
|
|
|
.stat-card-icon-r {
|
|
font-size: 36rpx;
|
|
opacity: 0.5;
|
|
}
|
|
|
|
.stat-card-body {
|
|
display: flex;
|
|
align-items: baseline;
|
|
}
|
|
|
|
.stat-card-num {
|
|
font-size: 60rpx;
|
|
font-weight: 800;
|
|
color: #1A2E25;
|
|
line-height: 1;
|
|
margin-right: 8rpx;
|
|
}
|
|
|
|
.stat-card-unit {
|
|
font-size: 24rpx;
|
|
color: #999;
|
|
}
|
|
|
|
// ========== 常用流程 ==========
|
|
.flow-section {
|
|
padding: 0;
|
|
}
|
|
|
|
.flow-group {
|
|
background: #FFFFFF;
|
|
border-radius: 0;
|
|
padding: 32rpx 24rpx;
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.section-header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
margin-bottom: 24rpx;
|
|
padding: 0 8rpx;
|
|
}
|
|
|
|
.section-title {
|
|
display: flex;
|
|
align-items: center;
|
|
font-size: 32rpx;
|
|
font-weight: 700;
|
|
color: #1A2E25;
|
|
}
|
|
|
|
.section-dot {
|
|
width: 8rpx;
|
|
height: 36rpx;
|
|
background: #2BA471;
|
|
border-radius: 4rpx;
|
|
margin-right: 16rpx;
|
|
}
|
|
|
|
.flow-grid {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.flow-grid-item {
|
|
width: 33.33%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
padding: 16rpx 0;
|
|
margin-bottom: 8rpx;
|
|
}
|
|
|
|
.flow-item-hover {
|
|
opacity: 0.6;
|
|
}
|
|
|
|
.flow-icon-wrap {
|
|
width: 96rpx;
|
|
height: 96rpx;
|
|
border-radius: 24rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
margin-bottom: 14rpx;
|
|
}
|
|
|
|
// 三色循环
|
|
.flow-icon-c0 { background: #C6EADA; }
|
|
.flow-icon-c1 { background: #C4DEFF; }
|
|
.flow-icon-c2 { background: #FFE0C8; }
|
|
|
|
.flow-icon {
|
|
width: 48rpx;
|
|
height: 48rpx;
|
|
}
|
|
|
|
.flow-name {
|
|
font-size: 24rpx;
|
|
color: #444;
|
|
text-align: center;
|
|
line-height: 1.4;
|
|
}
|
|
</style>
|