rongzidanbao-ui/pages/mine/info/index.vue

<template>
  <view class="container">
	<view class="lists mb12" @click.stop="handleToAvatar">
		<view class="tit">头像照片</view>
		<view class="txt"></view>
		<image v-if="avatar" :src="avatar" class="avaimg" mode="aspectFill"></image>
		<image v-else  :src="avatarimg" class="avaimg" mode="aspectFill"></image>
		<image :src="rimg" class="rimg"></image>
	</view>
	<view class="lists">
		<view class="tit">用户名称</view>
		<view class="txt">{{user.nickName}}</view>
		<image :src="rimg" class="rimg"></image>
	</view>
	<view class="lists">
		<view class="tit">职 务</view>
		<view class="txt">{{postGroup}}</view>
		<image :src="rimg" class="rimg"></image>
	</view>
	<view class="lists">
		<view class="tit">联系方式</view>
		<view class="txt">{{user.phonenumber}}</view>
		<image :src="rimg" class="rimg"></image>
	</view>
	<view class="lists">
		<view class="tit">角色</view>
		<view class="txt">{{roleGroup}}</view>
		<image :src="rimg" class="rimg"></image>
	</view>
    <!-- <uni-list>
      <uni-list-item showExtraIcon="true" :extraIcon="{type: 'person-filled'}" title="昵称" :rightText="user.nickName" />
      <uni-list-item showExtraIcon="true" :extraIcon="{type: 'phone-filled'}" title="手机号码" :rightText="user.phonenumber" />
      <uni-list-item showExtraIcon="true" :extraIcon="{type: 'email-filled'}" title="邮箱" :rightText="user.email" />
      <uni-list-item showExtraIcon="true" :extraIcon="{type: 'auth-filled'}" title="岗位" :rightText="postGroup" />
      <uni-list-item showExtraIcon="true" :extraIcon="{type: 'staff-filled'}" title="角色" :rightText="roleGroup" />
      <uni-list-item showExtraIcon="true" :extraIcon="{type: 'calendar-filled'}" title="创建日期" :rightText="user.createTime" />
    </uni-list> -->
  </view>
</template>

<script>
  import { getUserProfile } from "@/api/system/user"

  export default {
    data() {
      return {
        user: {},
        roleGroup: "",
        postGroup: "",
		avatarimg:require("@/static/images/mine/profile.png"),
		rimg:require("@/static/images/mine/rimg.png"),
      }
    },
	computed: {
		avatar() {
			return this.$store.state.user.avatar
		},
	},
    onLoad() {
      this.getUser()
    },
    methods: {
      getUser() {
        getUserProfile().then(response => {
          this.user = response.data
          this.roleGroup = response.roleGroup
          this.postGroup = response.postGroup
        })
      },
	  handleToAvatar() {
	  	this.$tab.navigateTo('/pages/mine/avatar/index')
	  },
    }
  }
</script>

<style lang="scss">
  page {
    background-color: #E6E6E6;
  }
  .lists{background-color: #ffffff;min-height: 120rpx;box-sizing: border-box;
	  display: flex;align-items: center;padding: 30rpx 36rpx 30rpx 34rpx;border-bottom: 2rpx solid #E6E6E6;
	  .tit{font-weight: bold;font-size: 30rpx;color: #343434;flex: 0 0 auto;}
	  .rimg{flex: 0 0 auto;width: 16rpx;height: 22rpx;margin-left: 28rpx;}
	  .txt{flex: 1;text-align: right;margin-left: 28rpx;font-weight: 500;font-size: 30rpx;color: #343434;}
		.avaimg{width: 110rpx;height: 110rpx;border-radius:10rpx;flex: 0 0 auto;}
  }
</style>