wydy/wy-mobile/pages/user/person/person.vue

<template>
  <view>
    <view class="person-head">
	  <view class="cu-avatar xl round margin-left-sm" @tap="ChooseImage" :style="backgroundStyle" ></view>
      <view class="person-head-box">
        <view class="person-head-nickname">{{userInfo.name}}</view>
        <view class="person-head-username">ID：{{userInfo.loginName}}</view>
      </view>
    </view>
	<u-cell-group :border="false" customStyle="padding: 5px">
		<u-cell
		    title="公司"
			icon="home-fill"
			:iconStyle="{color: '#0081ff'}"
			:value="userInfo.companyDTO && userInfo.companyDTO.name"
		></u-cell>
		<u-cell
		    title="部门"
			icon="list-dot"
			:iconStyle="{color: '#0081ff'}"
			:value="userInfo.officeDTO && userInfo.officeDTO.name"
		></u-cell>
		<u-cell
		    title="岗位"
			icon="account-fill"
			:iconStyle="{color: '#0081ff'}"
			:value="userInfo.post && userInfo.post.name"
		></u-cell>
		<u-cell
		    title="角色"
			icon="man-add-fill"
			:iconStyle="{color: '#0081ff'}"
			:value="userInfo.roleNames"
		></u-cell>
		<u-cell
		    title="联系电话"
			icon="phone-fill"
			:iconStyle="{color: '#0081ff'}"
			:value="userInfo.phone"
		></u-cell>
		<u-cell
		    title="邮箱"
			icon="email-fill"
			:iconStyle="{color: '#0081ff'}"
			:value="userInfo.email"
		></u-cell>
		<u-cell
		    title="修改密码"
			icon="edit-pen"
		    isLink
			:iconStyle="{color: '#e54d42'}"
		    url="/pages/user/setting/password/password"
		></u-cell>
	</u-cell-group>

	<view class="padding-xl">
		<u-button type="primary" text="退出登录" @click="outlogin"></u-button>
		<u-gap height="80" bgColor="#fff"></u-gap>
	</view>

  </view>

</template>

<script>
  import {mapState, mapMutations, mapActions} from 'vuex'
  import userService from "@/api/sys/userService"
  import loginService from "@/api/auth/loginService"
  import fileService from "@/api/file/fileService.js"
  export default {
	name: "person",
	computed: { ...mapState({
		 userInfo: (state) => state.user.userInfo,
		 avatar: (state) => state.user.avatar
		}),
		backgroundStyle() {  
		      return {  
		        'background-image': `url(${this.avatar})`,  
		      };  
		}  
	},
    methods: {
	  ...mapActions(['refreshUserInfo']),
      /**
       * 修改密码
       */
      toPassword() {
        uni.navigateTo({
          url: '/pages/user/setting/password/password'
        })
      },
	 ChooseImage() {
	 	uni.chooseImage({
	 		count: 4, //默认9
	 		sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
	 		sourceType: ['album'], //从相册选择
	 		success: (res) => {
				this.upload(res.tempFilePaths[0])
	 		}
	 	});
	 },
	 upload(filePath) {
		fileService.upload(filePath).then((data) =>{
			userService.saveInfo({
				id: this.userInfo.id,
				photo: data
			}).then(()=>{
				this.refreshUserInfo()
			})
		})
	 },
	  outlogin() {
		    uni.showLoading()
			loginService.logout().then((data)=>{
	  		  		this.$store.commit('logout');
					uni.clearStorage();
	  		  		uni.reLaunch({
	  		  			url: '/pages/login/login'
	  		  		})
	  		})
	  }
    }
  }
</script>

<style>
  .person-head {
    display: flex;
    flex-direction: row;
    align-items: center;
    height: 150px;
    padding-left: 20px;
    background: linear-gradient(to right, #365fff, #36bbff);
  }

  .person-head-box {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    margin-left: 10px;
  }

  .person-head-nickname {
    font-size: 18px;
    font-weight: 500;
    color: #fff;
  }

  .person-head-username {
    font-size: 14px;
    font-weight: 500;
    color: #fff;
  }

  .person-list {
    line-height: 0;
  }
  .cu-list.card-menu {
      overflow: hidden;
      margin-right: 5px;
      margin-left: 5px;
      border-radius: 7px;
  }
  .cu-list.card-menu.margin-top-20 {
      margin-top: -20px;
  }
  .cu-list.menu>.cu-item .content>uni-view:first-child {
      display: -webkit-box;
      display: -webkit-flex;
      display: flex;
      -webkit-box-align: center;
      /* -webkit-align-items: center; */
      /* align-items: center; */
      display: inline-block;
      margin-right: 5px;
      width: 1.6em;
      text-align: center;
  }
</style>