<template>
|
<div class="box">
|
<div class="box_info">
|
<img :src="store.state.userInfo.avatar ? store.state.userInfo.avatar : avatar" alt="" />
|
<div class="box_info_box">
|
<span>{{store.state.userInfo.companyUser ? store.state.userInfo.companyUser.name : ''}}</span>
|
<div class="box_info_box_x" @click="switchOrganization">
|
<span>{{store.state.userInfo.curComDepartment ? store.state.userInfo.curComDepartment.name : ''}}</span>
|
<img src="@/assets/icon/mine_ic_change@2x.png" alt="" />
|
</div>
|
</div>
|
</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">
|
<img :src="item.icon" alt="" />
|
<span>{{item.name}}</span>
|
</div>
|
<div class="box_function_item_right">
|
<van-icon name="arrow" size="20" color="#CCCCCC" />
|
</div>
|
</div>
|
</div>
|
<div class="box_out" v-if="store.state.env && (store.state.env == 'WX' || store.state.env == 'XCX')" @click="loginOut"><span>退出登录</span></div>
|
</div>
|
<van-popup v-model:show="show" position="bottom" round :style="{ height: '50%' }">
|
<van-picker
|
title="请选择组织"
|
:columns="columns"
|
@confirm="onConfirm"
|
@cancel="onCancel"
|
/>
|
</van-popup>
|
</template>
|
|
<script setup lang="ts">
|
import { ref } from 'vue'
|
import { useRouter } from 'vue-router'
|
import { useStore } from "vuex"
|
import { Dialog, Toast } from 'vant'
|
const VanDialog = Dialog.Component;
|
import { changeCom, getDepartmentListByConditon } from '@/apis/PersonalAPI'
|
import { wxLoginOut } from '@/apis'
|
|
const router = useRouter()
|
|
const store = useStore()
|
|
let show = ref<boolean>(false) // 控制切换组织弹框
|
|
let columns = ref([]); // 组织数据
|
|
let avatar: any = require('@/assets/icon/2@2x.png') // 默认头像
|
|
const MENU = ref([
|
{ name: '个人信息', url: '/personal/personalInformation', icon: require('@/assets/icon/mine_ic_gerenxinxi@2x.png') },
|
// { name: '系统通知', url: '', icon: require('@/assets/icon/mine_ic_xitonggonggao@2x.png') },
|
{ name: '更新手机号', url: '/personal/updatePhone', icon: require('@/assets/icon/mine_ic_shoujihao@2x.png') },
|
{ name: '更新邮箱号', url: '/personal/updateMailbox', icon: require('@/assets/icon/mine_ic_youxianghao@2x.png') },
|
{ name: '扫码绑定账号', url: '', icon: require('@/assets/icon/mine_ic_bangding@2x.png') },
|
{ name: '修改密码', url: '/personal/changePassword', icon: require('@/assets/icon/mine_ic_xiugaimima@2x.png') },
|
])
|
|
// 确认切换组织
|
const onConfirm = (value: any): void => {
|
changeCom(value.id).then(res => {
|
show.value = false
|
Toast.success({ message: '更新组织成功' })
|
store.dispatch('getUserInfos')
|
})
|
};
|
|
// 退出登录
|
const loginOut = () => {
|
wxLoginOut({
|
companyUserId: store.state.userInfo.companyUser.id
|
}).then(res => {
|
if (res.code === 200) {
|
// window.parent.postMessage('阿康', '*')
|
let href = 'https://open.weixin.qq.com/connect/oauth2/authorize?appid=wx6ea339a336f26380&redirect_url=https://www.mes.red/h5/redirect.html&response_type=code&scope=snsapi_base&state=#wechat_redirect'
|
window.open(href)
|
}
|
})
|
}
|
|
// 关闭组织弹框
|
const onCancel = (): void => {
|
show.value = false
|
}
|
|
// 跳转页面
|
const JUMP = (url: string): void => {
|
url ? router.push({ path: url }) : ''
|
}
|
|
// 切换组织
|
const switchOrganization = (): void => {
|
getDepartmentListByConditon({
|
type: 0
|
}).then(res => {
|
if (res.code === 200) {
|
columns.value = []
|
res.data.forEach((item: any) => {
|
let obj: any = {
|
text: item.name, id: item.id
|
}
|
columns.value.push(obj as never)
|
})
|
show.value = true
|
}
|
})
|
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
.box {
|
padding: 30px;
|
.box_info {
|
padding: 0 30px;
|
height: 168px;
|
border-radius: 16px;
|
display: flex;
|
align-items: center;
|
background: url("@/assets/icon/mine_bg@2x.png");
|
background-repeat: no-repeat;
|
background-size: cover;
|
img {
|
width: 88px;
|
height: 88px;
|
}
|
.box_info_box {
|
height: 88px;
|
display: flex;
|
margin-left: 30px;
|
flex-direction: column;
|
justify-content: space-between;
|
.box_info_box_x {
|
display: flex;
|
align-items: center;
|
span {
|
font-size: 26px;
|
font-weight: 400;
|
color: rgba(255, 255, 255, 0.8);
|
}
|
img {
|
width: 26px;
|
height: 26px;
|
margin-left: 10px;
|
}
|
}
|
span {
|
font-size: 34px;
|
font-weight: 500;
|
color: #FFFFFF;
|
}
|
}
|
}
|
.box_function {
|
margin-top: 30px;
|
.box_function_item {
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
height: 98px;
|
border-bottom: 1PX solid #E5E5E5;
|
/*&:last-child {*/
|
/* border: none;*/
|
/*}*/
|
.box_function_item_left {
|
display: flex;
|
align-items: center;
|
img {
|
width: 36px;
|
height: 36px;
|
margin-right: 24px;
|
}
|
span {
|
font-size: 30px;
|
font-weight: 400;
|
color: #222222;
|
}
|
}
|
}
|
}
|
.box_out {
|
position: fixed;
|
bottom: 200px;
|
left: 50%;
|
transform: translate(-50%, 0);
|
width: 350px;
|
height: 88px;
|
background: #F7F7F7;
|
border-radius: 8px;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
font-size: 30px;
|
font-weight: 400;
|
color: #333333;
|
}
|
}
|
</style>
|
