<template>
|
<view class="cu-page ops-home">
|
<view class="cu-hero">
|
<view class="cu-profile-bar">
|
<view class="cu-profile-bar__info">
|
<view class="cu-avatar">{{ userInitial }}</view>
|
<view>
|
<view class="cu-hero__hi">{{ greeting }}</view>
|
<view class="cu-hero__name">{{ userInfo.realname || '运维人员' }}</view>
|
</view>
|
</view>
|
<view class="cu-profile-actions">
|
<view class="cu-profile-action cu-profile-action--pill" @click="loginOut">
|
<u-icon name="minus-circle-fill" color="#ffffff" size="18" />
|
<text class="cu-profile-action__text">退出</text>
|
</view>
|
</view>
|
</view>
|
</view>
|
|
<view class="ops-home__body">
|
<view class="home_con">
|
<image class="bg" src="@/static/home/home_bg.jpg" mode=""></image>
|
<view class="h1">阜宁文体中心</view>
|
<view class="h2">欢迎你</view>
|
</view>
|
<view class="title">业务办理</view>
|
<view class="list">
|
<view v-for="item in list1" :key="item.name" class="item" @click="itemClick(item)">
|
<image :src="item.img"></image>
|
<view class="name">{{ item.name }}</view>
|
</view>
|
</view>
|
<view class="title">业务查询</view>
|
<view class="list list--last">
|
<view v-for="item in list2" :key="item.name" class="item" @click="itemClick(item)">
|
<image :src="item.img"></image>
|
<view class="name">{{ item.name }}</view>
|
<view v-if="item.name == '待办中心' && taskNum" class="superscript">{{ taskNum }}</view>
|
</view>
|
</view>
|
</view>
|
</view>
|
</template>
|
|
<script>
|
import { logoutPost, myNoticesH5 } from '@/api'
|
import { goRoleSelect } from '@/utils/roleSwitch.js'
|
export default {
|
data() {
|
return {
|
userInfo: uni.getStorageSync('userInfo') || {},
|
list1: [{
|
name: '新增工单',
|
url: '/pages/workOrder/edit',
|
img: require('@/static/home/ic_xinzenggongdan@2x.png'),
|
auth: 'weixin:menu:visitcar'
|
},
|
{
|
name: '工单服务',
|
url: '/pages/workOrder/list',
|
img: require('@/static/home/ic_fangkeba.png'),
|
auth: 'weixin:menu:visitcar'
|
},
|
{
|
name: '设备运维',
|
url: '/pages/operation/device',
|
img: require('@/static/home/ic_fangkebaobe@2x.png'),
|
auth: 'weixin:menu:visitcar'
|
},
|
{
|
name: '库存盘点',
|
url: '/pages/inventory/index',
|
img: require('@/static/home/ic_pandian@2x.png'),
|
auth: 'weixin:menu:visitcar'
|
},
|
],
|
list2: [{
|
name: '巡检任务',
|
url: '/pages/polling/task',
|
img: require('@/static/home/ic_renwuzhongxin@2x.png'),
|
auth: 'weixin:menu:visitcar'
|
},
|
{
|
name: '运维记录',
|
url: '/pages/operation/record',
|
img: require('@/static/home/ic_wodehuiyi@2x.png'),
|
auth: 'weixin:menu:visitcar'
|
},
|
{
|
name: '待办中心',
|
url: '/pages/workOrder/wait',
|
img: require('@/static/home/ic_daiban@2x.png'),
|
auth: 'weixin:menu:visitcar'
|
},
|
],
|
taskNum: 0
|
}
|
},
|
computed: {
|
greeting () {
|
const h = new Date().getHours()
|
if (h < 12) return '早上好'
|
if (h < 18) return '下午好'
|
return '晚上好'
|
},
|
userInitial () {
|
const name = (this.userInfo.realname || '运').trim()
|
return name.charAt(0)
|
}
|
},
|
onShow() {
|
this.userInfo = uni.getStorageSync('userInfo') || {}
|
myNoticesH5({ page: 1, capacity: 1, model: { status: 0 } }).then(res => {
|
this.taskNum = res.data.total
|
})
|
},
|
methods: {
|
itemClick(item) {
|
uni.navigateTo({
|
url: item.url
|
})
|
},
|
loginOut() {
|
logoutPost().catch(() => {}).finally(() => goRoleSelect())
|
},
|
}
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
.ops-home__body {
|
margin-top: -28rpx;
|
padding: 0 30rpx 48rpx;
|
}
|
|
.home_con {
|
width: 100%;
|
height: 270rpx;
|
border-radius: 16rpx;
|
margin-bottom: 40rpx;
|
padding: 36rpx 40rpx;
|
position: relative;
|
color: #fff;
|
box-sizing: border-box;
|
overflow: hidden;
|
box-shadow: 0 8rpx 32rpx rgba(15, 35, 95, 0.08);
|
|
.bg {
|
position: absolute;
|
left: 0;
|
top: 0;
|
width: 100%;
|
height: 100%;
|
z-index: 0;
|
}
|
|
.h1,
|
.h2 {
|
position: relative;
|
z-index: 1;
|
}
|
|
.h1 {
|
font-weight: bold;
|
font-size: 44rpx;
|
margin-bottom: 14rpx;
|
}
|
}
|
|
.title {
|
font-weight: 500;
|
font-size: 34rpx;
|
}
|
|
.list {
|
margin-top: 30rpx;
|
margin-bottom: 40rpx;
|
display: flex;
|
|
&--last {
|
margin-bottom: 48rpx;
|
}
|
|
.item {
|
display: flex;
|
flex-direction: column;
|
align-items: center;
|
width: 25%;
|
position: relative;
|
|
image {
|
width: 88rpx;
|
height: 88rpx;
|
margin-bottom: 20rpx;
|
}
|
|
.name {
|
font-size: 26rpx;
|
}
|
|
.superscript {
|
height: 40rpx;
|
width: 40rpx;
|
position: absolute;
|
top: -16rpx;
|
right: 24rpx;
|
background-color: red;
|
color: #fff;
|
font-size: 24rpx;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
border-radius: 50%;
|
}
|
}
|
}
|
</style>
|
