lanan-repair-app/pages/my/myInfo.vue

<template>
  <view class="container">
    <VNavigationBarVue backgroundColor="#fff" title="个人信息" titleColor="#333"></VNavigationBarVue>
    <view class="body">
      <view class="formItem">
        <image class="formIcon" mode="aspectFit" src="/static/icons/userInfo_1.png"></image>
        <text class="formLabel">头像</text>
        <view class="formValue">
          <image :src="customInfo.avatar || defaultAvatar" class="avatar" mode="aspectFill"
                 style="width: 64rpx;height: 64rpx"></image>
        </view>
        <u-icon color="#999" name="arrow-right" size="12"></u-icon>
      </view>
      <view class="formItem">
        <image class="formIcon" mode="aspectFit" src="/static/icons/userInfo_2.png"></image>
        <text class="formLabel">账号昵称</text>
        <text class="formValue">{{ customInfo.name }}</text>
        <u-icon color="#999" name="arrow-right" size="12"></u-icon>
      </view>
      <view style="padding-bottom: 60rpx;border-bottom: 1px solid #ddd" class="formItem">
        <image class="formIcon" mode="aspectFit" src="/static/icons/userInfo_3.png"></image>
        <text class="formLabel">绑定电话</text>
        <text class="formValue">{{ customInfo.phone }}</text>
        <u-icon color="#999" name="arrow-right" size="12"></u-icon>
      </view>

      <view class="btn">
        退出登录
      </view>
    </view>
  </view>
</template>

<script>
import VNavigationBarVue from '../../components/VNavigationBar.vue';

export default {
  components: {
    VNavigationBarVue
  },
  data() {
    return {
      customInfo: {
        phone: '157****4960',
        name: '千舟寻渡',
        avatar: ''
      },
      defaultAvatar: require('@/static/icons/avatar.png')
    };
  },
  onShow(data) {
    //当前登录用户信息
    // this.customInfo = uni.getStorageSync('customerInfo') ? JSON.parse(uni.getStorageSync('customerInfo')) : {}
  },
}
</script>

<style lang="less" scoped>
.container {
  height: 100%;
  background: #fff;

  .body {
    border-top: 1px solid #ddd;
    padding: 20rpx 32rpx;
  }

  .formItem {
    box-sizing: border-box;
    padding: 40rpx 0;

    display: flex;
    align-items: center;
    justify-content: space-between;
    column-gap: 20rpx;
  }

  .formIcon {
    width: 44rpx;
    height: 44rpx;
  }

  .formLabel {
    font-size: 32rpx;
    color: #333333;
  }

  .formValue {
    flex: 1;
    width: 0;
    text-align: right;
    font-size: 32rpx;
    color: #999999;
  }

  .formBtn {
    width: 24rpx;
    height: 24rpx;
  }

  .avatar {
    width: 108rpx;
    height: 108rpx;
  }

  .btn {
    width: 520rpx;
    height: 80rpx;
    border-radius: 40rpx 40rpx 40rpx 40rpx;
    border: 1rpx solid #999999;

    margin: 60rpx auto;

    display: flex;
    align-items: center;
    justify-content: center;

    font-size: 32rpx;
    color: #999999;
  }
}
</style>