234 lines
7.3 KiB
Vue
234 lines
7.3 KiB
Vue
<template>
|
|
<view class="container">
|
|
<!-- 用户信息区域 -->
|
|
<view class="user-info">
|
|
<image class="avatar" :src="userInfo.avatar" mode="aspectFill"></image>
|
|
<view class="user-detail">
|
|
<text class="username">{{ userInfo.name }}</text>
|
|
<text class="phone">{{ userInfo.phone }}</text>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 插画区域 -->
|
|
<view class="illustration">
|
|
<image src="/static/banner.png" mode="aspectFit"></image>
|
|
</view>
|
|
|
|
<!-- 申请报备区域 -->
|
|
<view class="section">
|
|
<view class="section-title">申请报备</view>
|
|
<view class="grid-box">
|
|
<view class="grid-item" @click="handleNavigate('/pages/evection/index')">
|
|
<image src="/static/evection.png" mode="aspectFit"></image>
|
|
<text class="centered-text">出差报备</text>
|
|
</view>
|
|
<view class="grid-item" @click="handleNavigate('/pages/holiday/index')">
|
|
<image src="/static/holiday.png" mode="aspectFit"></image>
|
|
<text class="centered-text">休假报备</text>
|
|
</view>
|
|
<view class="grid-item" @click="handleNavigate('/pages/stagger-holidays/index')">
|
|
<image src="/static/lx_icon.png" mode="aspectFit"></image>
|
|
<text class="centered-text">轮休申请</text>
|
|
</view>
|
|
<view class="grid-item" @click="handleNavigate('/pages/temporary-outing/index')">
|
|
<image src="/static/go_out.png" mode="aspectFit"></image>
|
|
<text class="centered-text">临时外出申请</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 考勤打卡区域 -->
|
|
<view class="section" v-if="isPd == 1">
|
|
<view class="section-title">考勤打卡</view>
|
|
<view class="grid-box">
|
|
<view class="grid-item" @click="handleNavigate('/pages/clock/index')">
|
|
<image src="/static/clockIn.png" mode="aspectFit"></image>
|
|
<text class="centered-text">考勤打卡</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import { selectFaceInfo, getUsetInfo } from '@/api/index.js'
|
|
export default {
|
|
data() {
|
|
return {
|
|
userInfo: {
|
|
token: '',
|
|
userId: '',
|
|
name: '',
|
|
phone: '',
|
|
avatar: '/static/defaultHead.png',
|
|
},
|
|
isPd: 0,
|
|
}
|
|
},
|
|
mounted() {
|
|
// 在组件挂载后读取存储的数据
|
|
this.userInfo.token = uni.getStorageSync('token') || ''
|
|
this.userInfo.userId = uni.getStorageSync('userId') || ''
|
|
this.userInfo.name = uni.getStorageSync('username') || ''
|
|
this.userInfo.phone = uni.getStorageSync('phone') || ''
|
|
if (/^1\d{10}$/.test(this.userInfo.phone)) {
|
|
this.userInfo.phone = this.maskPhoneNumber(this.userInfo.phone)
|
|
}
|
|
this.isPd = uni.getStorageSync('isPd') || 0
|
|
console.log('isPd', this.isPd)
|
|
if (Number(this.isPd) !== 0) {
|
|
this.selectFaceInfoEvent()
|
|
}
|
|
},
|
|
onLoad() {},
|
|
onShow() {
|
|
this.getUsetInfoEvent()
|
|
},
|
|
methods: {
|
|
// 获取用户信息
|
|
getUsetInfoEvent() {
|
|
getUsetInfo(uni.getStorageSync('userId')).then((res) => {
|
|
if (res.res == 1) {
|
|
if (res.obj && res.obj.appliedFace) {
|
|
if (
|
|
res.obj.appliedFace == '' ||
|
|
res.obj.appliedFace == null ||
|
|
res.obj.appliedFace == 'null'
|
|
) {
|
|
this.userInfo.avatar = '/static/defaultHead.png'
|
|
} else {
|
|
this.userInfo.avatar = res.obj.appliedFace
|
|
}
|
|
}
|
|
}
|
|
})
|
|
},
|
|
|
|
maskPhoneNumber(phoneNumber) {
|
|
return phoneNumber.replace(/(\d{3})\d{4}(\d{4})/, '$1****$2')
|
|
},
|
|
|
|
// 提示用户录入人脸
|
|
selectFaceInfoEvent() {
|
|
selectFaceInfo().then((res) => {
|
|
if (res.obj == '103') {
|
|
uni.showModal({
|
|
title: '提示',
|
|
content: '您当前还未录入人脸信息，请先录入',
|
|
success: (res) => {
|
|
if (res.confirm) {
|
|
uni.navigateTo({
|
|
url: '/pages/face/index',
|
|
})
|
|
}
|
|
},
|
|
})
|
|
}
|
|
})
|
|
},
|
|
handleNavigate(url) {
|
|
uni.navigateTo({
|
|
url,
|
|
})
|
|
},
|
|
},
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.container {
|
|
min-height: 100vh;
|
|
padding: 30rpx;
|
|
background-color: #fff;
|
|
}
|
|
|
|
.user-info {
|
|
display: flex;
|
|
align-items: center;
|
|
margin-bottom: 30rpx;
|
|
|
|
.avatar {
|
|
width: 100rpx;
|
|
height: 100rpx;
|
|
border-radius: 50%;
|
|
margin-right: 20rpx;
|
|
}
|
|
|
|
.user-detail {
|
|
display: flex;
|
|
flex-direction: column;
|
|
|
|
.username {
|
|
font-size: 32rpx;
|
|
font-weight: bold;
|
|
color: #333;
|
|
margin-bottom: 6rpx;
|
|
}
|
|
|
|
.phone {
|
|
font-size: 28rpx;
|
|
color: #666;
|
|
}
|
|
}
|
|
}
|
|
|
|
.illustration {
|
|
margin: 40rpx 0;
|
|
text-align: center;
|
|
|
|
image {
|
|
width: 100%;
|
|
height: 300rpx;
|
|
}
|
|
}
|
|
|
|
.section {
|
|
margin-bottom: 40rpx;
|
|
|
|
.section-title {
|
|
font-size: 32rpx;
|
|
font-weight: bold;
|
|
color: #333;
|
|
margin-bottom: 20rpx;
|
|
}
|
|
|
|
.grid-box {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
// margin: 0 -10rpx;
|
|
|
|
.grid-item {
|
|
// width: calc(30% - 20rpx);
|
|
width: calc((100% - 10rpx) / 2);
|
|
margin-right: 10rpx;
|
|
margin-top: 10rpx;
|
|
padding: 30rpx;
|
|
background-color: #f8f8f8;
|
|
border-radius: 12rpx;
|
|
text-align: center;
|
|
box-sizing: border-box;
|
|
|
|
image {
|
|
width: 80rpx;
|
|
height: 80rpx;
|
|
margin-bottom: 16rpx;
|
|
}
|
|
|
|
text {
|
|
font-size: 28rpx;
|
|
color: #333;
|
|
}
|
|
}
|
|
|
|
.grid-item:nth-child(2n) {
|
|
margin-right: 0;
|
|
}
|
|
}
|
|
}
|
|
|
|
.centered-text {
|
|
text-align: center;
|
|
display: block;
|
|
}
|
|
</style>
|