<template>
|
<view>
|
<div class="box">
|
<!-- :style="{background: 'url(' + img + ')'}" -->
|
<div class="box_info">
|
<image :src="avatar" mode="widthFix" />
|
<div class="box_info_box">
|
<text>{{userInfo.realname}}</text>
|
<div class="box_info_box_x" @click="switchOrganization">
|
<text>{{userInfo.curComDepartment ? userInfo.curComDepartment.name : ''}}</text>
|
<image src="@/static/mine_ic_change@2x.png" alt="" />
|
</div>
|
</div>
|
<image class="bg" src="@/static/mine_bg@2x.png" mode="widthFix"></image>
|
</div>
|
<div class="box_function">
|
<div class="box_function_item" v-for="(item, index) in MENU" :key="index" @click="jump(item.url)">
|
<div class="box_function_item_left">
|
<image :src="item.icon" alt="" />
|
<text>{{item.name}}</text>
|
</div>
|
<div class="box_function_item_right">
|
<van-icon name="arrow" size="20" color="#CCCCCC" />
|
</div>
|
</div>
|
</div>
|
<div class="box_out" @click="loginOut"><text>退出登录</text></div>
|
</div>
|
<!-- 部门选择器 -->
|
<u-picker :show="show" :columns="columns" @confirm="onConfirm" @cancel="show = false"></u-picker>
|
<myTabbar :index="2" />
|
</view>
|
</template>
|
|
<script>
|
import { changeCom, getDepartmentListByConditon } from '@/util/api/PersonalAPI'
|
import myTabbar from "@/components/myTabber.vue"
|
import { wxLoginOut } from '@/util/api'
|
import { mapState } from 'vuex'
|
export default {
|
components: {
|
myTabbar
|
},
|
computed: mapState([
|
'userInfo'
|
]),
|
data() {
|
return {
|
MENU: [
|
{ name: '个人信息', url: '/pages/personal/personal', icon: require('@/static/mine_ic_gerenxinxi@2x.png') },
|
// { name: '系统通知', url: '', icon: require('@/assets/icon/mine_ic_xitonggonggao@2x.png') },
|
{ name: '更新手机号', url: '/pages/updatePhone/updatePhone', icon: require('@/static/mine_ic_shoujihao@2x.png') },
|
{ name: '更新邮箱号', url: '/pages/updateMailbox/updateMailbox', icon: require('@/static/mine_ic_youxianghao@2x.png') },
|
{ name: '扫码绑定账号', url: '', icon: require('@/static/mine_ic_bangding@2x.png') },
|
{ name: '修改密码', url: '/pages/changePassword/changePassword', icon: require('@/static/mine_ic_xiugaimima@2x.png') },
|
],
|
img: require('@/static/mine_bg@2x.png'),
|
avatar: require('@/static/2@2x.png'),
|
show: false,
|
columns: []
|
}
|
},
|
onLoad() {
|
uni.hideTabBar()
|
},
|
methods: {
|
// 退出登录
|
loginOut() {
|
wxLoginOut({
|
companyUserId: this.userInfo.companyUser.id
|
}).then(res => {
|
if (res.code === 200) {
|
this.$store.commit('clearCache')
|
uni.reLaunch({
|
url: '/pages/login/login'
|
});
|
}
|
})
|
},
|
// 确认切换组织
|
onConfirm(e) {
|
changeCom(e.value[0].id).then(res => {
|
if (res.code === 200) {
|
this.show = false
|
uni.showToast({ title: '更新组织成功', icon: 'success', duration: 2000 });
|
this.$store.dispatch('getUserInfos')
|
}
|
})
|
},
|
// 获取组织
|
switchOrganization() {
|
getDepartmentListByConditon({
|
type: 0
|
}).then(res => {
|
if (res.code === 200) {
|
this.columns = []
|
let arr = []
|
res.data.forEach((item) => {
|
let obj = {
|
text: item.name, id: item.id
|
}
|
arr.push(obj)
|
})
|
this.columns.push(arr)
|
this.show = true
|
}
|
})
|
},
|
// 跳转页面
|
jump(url) {
|
if (!url) return
|
uni.navigateTo({ url })
|
}
|
}
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
.box {
|
width: 100%;
|
padding: 30rpx;
|
box-sizing: border-box;
|
.box_info {
|
padding: 0 30rpx;
|
height: 168rpx;
|
border-radius: 16rpx;
|
display: flex;
|
align-items: center;
|
background-repeat: no-repeat;
|
background-size: cover;
|
position: relative;
|
image {
|
width: 88rpx;
|
height: 88rpx;
|
}
|
.bg {
|
width: 100%;
|
height: 168rpx;
|
position: absolute;
|
top: 0;
|
left: 0;
|
z-index: -1;
|
}
|
.box_info_box {
|
height: 88rpx;
|
display: flex;
|
margin-left: 30rpx;
|
flex-direction: column;
|
justify-content: space-between;
|
.box_info_box_x {
|
display: flex;
|
align-items: center;
|
text {
|
font-size: 26rpx;
|
font-weight: 400;
|
color: rgba(255, 255, 255, 0.8);
|
}
|
image {
|
width: 26rpx;
|
height: 26rpx;
|
margin-left: 10rpx;
|
}
|
}
|
text {
|
font-size: 34rpx;
|
font-weight: 500;
|
color: #FFFFFF;
|
}
|
}
|
}
|
.box_function {
|
margin-top: 30rpx;
|
.box_function_item {
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
height: 98rpx;
|
border-bottom: 1rpx solid #E5E5E5;
|
/*&:last-child {*/
|
/* border: none;*/
|
/*}*/
|
.box_function_item_left {
|
display: flex;
|
align-items: center;
|
image {
|
width: 36rpx;
|
height: 36rpx;
|
margin-right: 24rpx;
|
}
|
text {
|
font-size: 30rpx;
|
font-weight: 400;
|
color: #222222;
|
}
|
}
|
}
|
}
|
.box_out {
|
position: fixed;
|
bottom: 200rpx;
|
left: 50%;
|
transform: translate(-50%, 0);
|
width: 350rpx;
|
height: 88rpx;
|
background: #F7F7F7;
|
border-radius: 44rpx;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
font-size: 30rpx;
|
font-weight: 400;
|
color: #333333;
|
}
|
}
|
</style>
|
