| ¶Ô±ÈÐÂÎļþ |
| | |
| | | <template> |
| | | <view> |
| | | <div class="box"> |
| | | <div class="box_info" :style="{background: 'url(' + img + ')'}"> |
| | | <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> |
| | | </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; |
| | | image { |
| | | width: 88rpx; |
| | | height: 88rpx; |
| | | } |
| | | .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> |