crm-mobile/pages_personal/user.vue

<template>
  <view class="uni-app">
    <view class="status-bar" />
    <view class="main-container">
      <wk-nav-bar />

      <view v-if="userInfo" class="container">
        <view class="main linear-gradient">
          <view class="content" @click="handleToUpdate">
            <view class="avatar-box">
              <wk-avatar
                :name="userInfo.realname"
                :avatar="userInfo.img"
                :size="18"
                :preview="false"
                class="avatar" />
            </view>
            <view class="info">
              <view class="realname">
                {{ userInfo.realname }}
              </view>
              <view class="dept">
                {{ userDesc }}
              </view>
            </view>
            <image v-if="!id" :src="$static('images/icon/edit_white.png')" class="edit-icon" />
          </view>
					
          <view class="company">
            <text class="wk wk-customer" />
            {{ companyInfo.companyName || appName }}
          </view>
        </view>
				
        <view class="base-info">
          <view class="cell">
            <view class="cell-title">
              姓名
            </view>
            <view class="cell-body">
              {{ userInfo.realname || '' }}
            </view>
          </view>
					
          <view class="cell">
            <view class="cell-title">
              性别
            </view>
            <view class="cell-body">
              {{ getSex(userInfo.sex) }}
            </view>
          </view>
					
          <view class="cell">
            <view class="cell-title">
              手机
            </view>
            <view class="cell-body">
              {{ userInfo.mobile || '' }}
            </view>
            <image
              :src="$static('images/icon/call_voice.png')"
              class="call-icon"
              @click="ringUp(userInfo.mobile)" />
          </view>
					
          <view class="cell">
            <view class="cell-title">
              邮箱
            </view>
            <view class="cell-body">
              {{ userInfo.email || '' }}
            </view>
          </view>
					
          <view class="cell">
            <view class="cell-title">
              部门
            </view>
            <view class="cell-body">
              {{ userInfo.deptName || '' }}
            </view>
          </view>
					
          <view class="cell">
            <view class="cell-title">
              岗位
            </view>
            <view class="cell-body">
              {{ userInfo.post || '' }}
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
  import { 
    AdminQueryLoginUser,
    AdminQueryUserInfo,
    QueryCompanyConfig
  } from 'API/admin.js'
	
  import { appName } from '@/config.js'
  import { mapMutations } from 'vuex'
	
  export default {
    name: 'UserInfo',
    data() {
      return {
        id: null,
        userInfo: null,
        companyInfo: {},
				
        refreshPage: false
      }
    },
    computed: {
      userDesc() {
        if (!this.userInfo) return ''
        let str = ''
        str = `${this.userInfo.deptName || ''}-${this.userInfo.post || ''}`
        if (
          str.startsWith('-') ||
          str.endsWith('-')
        ) {
          return str.replace(/-/g, '')
        }
        return str
      },
      appName() {
        return appName
      }
    },
    onLoad(opt) {
      this.id = opt.id || null
      this.getUserInfo()
      this.getCompanyConfig()
    },
    onShow() {
      if (this.refreshPage) {
        this.$nextTick(() => {
          this.refreshPage = false
          this.getUserInfo()
        })
      }
    },
    methods: {
			...mapMutations({
				setUserInfo: 'user/SET_USER_INFO'
			}),
			
			getUserInfo() {
				if (this.id) {
					AdminQueryUserInfo({
						userId: this.id
					}).then(res => {
						this.userInfo = res
					}).catch(() => {})
				} else {
					AdminQueryLoginUser().then(res => {
						this.userInfo = res
						this.setUserInfo(res)
					}).catch(() => {})
				}
			},
			
			getCompanyConfig() {
				QueryCompanyConfig().then(res => {
					this.companyInfo = res || {}
				}).catch()
			},
			
			getSex(sex) {
				if (isNaN(Number(sex))) return sex
				if (Number(sex) === 1) return '男'
				else if (Number(sex) === 2) return '女'
				return ''
			},
			
			ringUp(tel) {
				if (!tel) {
					this.$toast('暂无电话')
					return
				}
				uni.makePhoneCall({
					phoneNumber: tel
				})
			},
			
			handleToUpdate() {
				if (this.id) return
				this.$Router.navigateTo('/pages_personal/updateUser')
			}
    }
  }
</script>

<style scoped lang="scss">
	.main-container {
		.container {
			flex: 1;
			width: 100%;
			display: flex;
			flex-direction: column;
			.main {
				width: 100%;
				padding: 0 38rpx;
				.content {
					padding-top: 50rpx;
					@include left;
					.avatar-box {
						width: 136rpx;
						height: 136rpx;
						border: 5rpx solid white;
						border-radius: 50%;
						margin-right: 32rpx;
						.avatar {
							width: 100%;
							height: 100%;
						}
					}
					.info {
						flex: 1;
						color: white;
						.realname {
							font-size: 46rpx;
							margin-bottom: 15rpx;
						}
						.dept {
							font-size: $wk-font-base;
						}
					}
					.edit-icon {
						width: 45rpx;
						height: 45rpx;
					}
				}
				.company {
					width: 100%;
					font-size: $wk-font-base;
					color: white;
					padding: 45rpx 0 24rpx;
					@include left;
					.wk-customer {
						margin-right: 24rpx;
					}
				}
			}
			
			.base-info {
				flex: 1;
				overflow: auto;
				background-color: white;
				padding: 0 32rpx;
				
				.cell {
					position: relative;
					padding: 15rpx 0;
					border-bottom: 1rpx solid $border-color;
					.cell-title {
						color: $light;
						font-size: $wk-font-sm;
					}
					.cell-body {
						min-height: 45rpx;
						color: $dark;
						font-size: $wk-font-medium;
						margin-top: 10rpx;
					}
					.call-icon {
						position: absolute;
						top: 50%;
						right: 20rpx;
						transform: translateY(-50%);
						width: 56rpx;
						height: 56rpx;
					}
				}
			}
		}
	}
</style>