mkm
/
OA
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity
OA/pages/user/user.vue

480 lines
9.2 KiB
Vue
Raw Permalink Blame History

<template>
<view class="my">
<view class="head_box" style="position: relative;">
<!-- #ifdef APP-PLUS||H5 -->
<view style="height: var(--status-bar-height)"></view>
<!-- #endif -->
<view class="personage">
<view class="box" @click="msg">
<u-icon name="bell" color="#fff" size="28"></u-icon>
<view>
<view>
<u-badge numberType="limit" :type="type" max="99" :value="value"></u-badge>
</view>
</view>
</view>
<view class="my_msg ">
<view class="my_msg-con">
<u--image :showLoading="true" :src="`${HTTP_IMG_URL}${oaUserInfo.thumb}`" width="130.28rpx"
height="130.28rpx" shape="circle" v-if="oaUserInfo.thumb">
</u--image>
<u--image :showLoading="true" v-else src="@/static/img/public/avatar.png" width="130.28rpx"
height="130.28rpx" shape="circle">
</u--image>
<view @click="login" class="name_work" v-if="!$store.state.app.token">
<view class="name">
<text class="nickname">立即登录</text>
</view>
<view class="work">
登录后可查看更多
</view>
</view>
<view class="name_work" style="margin-top: 10rpx;" v-else>
<view class="name">
<text class="nickname">姓名:{{ oaUserInfo.nickname }}</text>
</view>
<view class="work">
<view class="wr_item">
<view class="wr_t_left">{{ oaUserInfo.department_name}}</view>
<!-- <view class="wr_t_right">技术专业</view> -->
</view>
</view>
</view>
</view>
<view class="compile" @click="navTo('/pages/users/myInformation/index')">
<view class="iconfont icon-bianji"></view>
<view class="">编辑</view>
</view>
</view>
<!-- <view class="my_class">
<view class="my_class-con" v-for="(item,i) in list" :key="i" @click="navTo(item.paths)">
<view class="name">{{item.value}}</view>
<view class="title">{{item.title}}</view>
</view>
</view> -->
</view>
</view>
<view class="other_guide">
<block v-for="(item,i) in myOaData" :key="i">
<view class="other_item" @click="navTo(item.paths)">
<view class="other_item-con">
<!-- <view class="iconfont2" :class="item.icon"></view> -->
<image :src="item.icon"></image>
<view class="text">{{ item.name }}</view>
</view>
<view class="iconfont icon-xiangyou"></view>
</view>
</block>
</view>
<view class="log_out" v-if="$store.state.app.token" @click="modelShow=true">退出登录</view>
<view class="log_out" v-else @click="login">登录账号</view>
<u-modal :show="modelShow" title="警告" content='确定要退出登录吗' closeOnClickOverlay showCancelButton
@close="modelShow=false" @cancel="modelShow=false" @confirm="logout"></u-modal>
</view>
</template>
<script>
// import bj from "@/static/animation/home.json"
import {
mapActions
} from 'vuex'
import {
HTTP_REQUEST_URL
} from '@/config/app.js'
import {
userInfo
} from '@/api/oaUser.js'
import {
msgcount
} from '@/api/oa.js'
import {
Toast
} from '@/libs/uniApi.js'
export default {
data() {
return {
options: {
data: '',
},
type: "warning",
value: 100,
uniMP: false,
myOaData: [
// {
// name: '工资详情',
// icon: require('@/static/images/w1.png'),
// paths: '/pages/users/salarydetails/index'
// },
{
name: '公告',
icon: require('@/static/images/w2.png'),
paths: '/pages/users/user_document/index'
},
// {
// name: '绑定公众号',
// icon: require('@/static/images/w3.png')
// },
// {
// name: '文章',
// icon: require('@/static/images/w4.png'),
// paths: '/pages/users/article/index'
// },
{
name: '修改密码',
icon: require('@/static/images/w4.png'),
paths: '/pages/oaLogin/editpwd'
}
],
// list: [{
// title: '绩效考核',
// value: 10,
// paths: '/pages/users/user_document/index'
// },
// {
// title: '部门奖金',
// value: 1000,
// paths: '/pages/users/user_document/index'
// },
// {
// title: '公司奖金',
// value: 1000,
// paths: '/pages/users/user_document/index'
// }
// ],
src: 'https://cdn.uviewui.com/uview/album/1.jpg',
modelShow: false,
HTTP_IMG_URL: ''
}
},
onLoad() {
// this.options.data = bj;
this.HTTP_IMG_URL = HTTP_REQUEST_URL
},
onShow() {
if (uni.getStorageSync('uniMP')) this.uniMP = true;
this.getOaUserInfo();
this.listmsg()
},
onHide() {
this.modelShow = false;
},
computed: {
eyeType() {
return this.$store.state.config.eyeType;
},
oaUserInfo() {
return this.$store.state.app.userInfo
},
},
watch: {
modelShow: function(n, o) {
}
},
methods: {
async listmsg() {
let res = await msgcount()
this.value=res.data.msg_num
},
msg(){
uni.navigateTo({
url:'/pages/message/index'
})
},
leftClick(e) {
uni.sendHostEvent('closeApp', e, (ret) => {
//发送消息成功回调
//console.log('关闭应用' + JSON.stringify(ret));
});
},
login() {
uni.reLaunch({
url: '/pages/oaLogin/oaLogin'
})
},
logout() {
let that = this;
uni.reLaunch({
url: '/pages/oaLogin/oaLogin?clear=' + true,
success() {
that.$store.commit('CLEAR');
}
})
},
async getOaUserInfo() {
const res = await userInfo();
this.$store.commit('setUserInfo', res.data);
uni.stopPullDownRefresh()
},
navTo(url) {
if (url) {
uni.showLoading({
title: '加载中',
mask: true
});
uni.navigateTo({
url: url,
success() {
uni.hideLoading()
},
fail(e) {
uni.hideLoading()
//console.log(e);
},
})
} else Toast('暂未开放')
},
alterMyInfo() {
uni.navigateTo({
url: '/pages/views/personal_center'
})
}
},
onPullDownRefresh() {
this.getOaUserInfo()
}
}
</script>
<style lang="scss">
.my {
padding-bottom: 160rpx;
.head_box {
position: relative;
width: 100vw;
height: 400rpx;
margin-bottom: 30rpx;
background: #3274F9;
}
}
.my_head {
height: 90.39rpx;
position: relative;
.department {
// padding-top: 38.6rpx;
font-size: 31.58rpx;
color: #fff;
.section {
margin-right: 57.89rpx;
}
}
}
.personage {
// position: relative;
padding-bottom: 28rpx;
border-radius: 12px;
// background-color: #fff;
color: #fff;
width: 694rpx;
margin-left: 50%;
transform: translate(-50%);
.name_work {
margin-left: 31.58rpx;
font-size: 28.07rpx;
.name {
.nickname {
font-size: 32rpx;
font-weight: 500;
margin-right: 30rpx;
}
}
.work {
margin-top: 14.04rpx;
.wr_item {
display: flex;
.wr_t_left {
flex-shrink: 0;
margin-right: 12rpx;
}
}
}
.omit {
white-space: nowrap;
/* 禁止换行 */
overflow: hidden;
/* 溢出隐藏 */
text-overflow: ellipsis;
/* 使用省略号代表被截断的文本 */
}
}
.my_msg {
display: flex;
justify-content: space-between;
padding-top: 150rpx;
.compile {
display: flex;
flex-direction: column;
align-items: center;
margin-right: 30rpx;
}
.my_msg-con {
display: flex;
}
}
.my_class {
width: 694rpx;
height: 170rpx;
background: rgba(255, 255, 255, 0.17);
border-radius: 21rpx 21rpx;
margin-top: 53rpx;
display: flex;
.my_class-con {
width: 33.3%;
text-align: center;
.name {
ont-size: 39px;
font-family: PingFang SC-Regular, PingFang SC;
font-weight: 400;
color: #FFFFFF;
margin-top: 32rpx;
margin-bottom: 21rpx;
margin-left: -10rpx;
}
.title {
font-size: 25rpx;
font-family: PingFang SC-Regular, PingFang SC;
font-weight: 400;
color: #FFFFFF;
}
}
}
.assess {
height: 170.18rpx;
}
.ass_cent {
width: 100%;
padding: 31.58rpx 66.67rpx;
position: absolute;
left: 0;
bottom: 0;
height: 170.18rpx;
border-radius: 12px;
background-color: rgba(#fff, 0.18);
justify-content: space-around;
.cent_item {
font-size: 24.56rpx;
color: #fff;
text-align: center;
.num {
font-size: 38.6rpx;
margin-bottom: 21.05rpx;
}
}
}
}
.other_guide {
width: 694.74rpx;
margin: 0 auto;
padding: 28.07rpx;
background-color: #fff;
border-radius: 12px;
.other_item {
display: flex;
justify-content: space-between;
height: 87.72rpx;
line-height: 87.72rpx;
border-bottom: 1px solid #F0F5F7;
.other_item-con {
display: flex;
.text {
font-size: 28.07rpx;
margin-left: 20.56rpx;
}
image {
width: 42rpx;
height: 42rpx;
margin: auto 0;
}
}
.left {
align-items: center;
}
.iconfont2 {
font-size: 42.11rpx;
}
}
}
.box {
position: absolute;
right: 30rpx;
display: flex;
top: 20rpx;
}
.log_out {
color: #fff;
border-radius: 100px;
text-align: center;
line-height: 84.21rpx;
margin: 0 auto;
margin-top: 84.21rpx;
width: 694rpx;
height: 84.21rpx;
background: #3274F9;
box-shadow: 0px 9px 26px 1px #E9EFF5;
}
</style>
Reference in New Issue View Git Blame Copy Permalink