patrol/patrol-ui-app/pages/profile/profile.vue

<template>
  <view class="container">
    <view class="user-info">
      <view class="info-item">
        <view class="label">头像：</view>
        <view class="info" @click="handleAvatarClick">
          <u-avatar size="60" :src="userInfo.avatar"></u-avatar>
          <u-icon class="btn" name="arrow-right"></u-icon>
        </view>
      </view>
      <view class="info-item">
        <view class="label">昵称：</view>
        <view v-if="!nameEditOn" class="info">
          <view class="value">{{ userInfo.nickname }}</view>
          <u-icon
            class="btn"
            name="edit-pen"
            @click="
              tempName = userInfo.nickname
              nameEditOn = true
            "
          ></u-icon>
        </view>
        <view v-else class="name-edit">
          <u--input maxlength="10" border="bottom" v-model="tempName"></u--input>
          <view class="edit-btn-group">
            <u-tag class="edit-btn" text="保存" plain size="mini" type="primary" @click="handleSaveBtnClick"></u-tag>
            <u-tag
              class="edit-btn"
              text="取消"
              plain
              size="mini"
              type="info"
              @click="
                tempName = ''
                nameEditOn = false
              "
            ></u-tag>
          </view>
        </view>
      </view>
      <view class="info-item">
        <view class="label">手机：</view>
        <view class="info">
          <view class="value">{{ userInfo.mobile }}</view>
          <u-icon class="btn" name="edit-pen"></u-icon>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { getUserInfo, updateAvatar, updateNickname } from '../../api/user'

export default {
  data() {
    return {
      userInfo: {
        nickname: '',
        avatar: '',
        mobile: ''
      },
      avatarFiles: [],
      nameEditOn: false,
      tempName: ''
    }
  },
  onLoad() {
    this.loadUserInfoData()
  },
  methods: {
    loadUserInfoData() {
      getUserInfo().then(res => {
        this.userInfo = res.data
      })
    },
    handleAvatarClick() {
      uni.chooseImage({
        success: chooseImageRes => {
          const tempFilePaths = chooseImageRes.tempFilePaths
          updateAvatar(tempFilePaths[0]).then(res => {
            this.userInfo.avatar = res.data
            this.$store.commit('SET_USER_INFO', this.userInfo)
          })
        }
      })
    },
    handleSaveBtnClick() {
      updateNickname({ nickname: this.tempName }).then(res => {
        this.nameEditOn = false;
        this.userInfo.nickname = this.tempName
        this.$store.commit('SET_USER_INFO', this.userInfo)
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.user-info {
  .info-item {
    padding: 20rpx 60rpx;
    border-bottom: $custom-border-style;
    @include flex-space-between;
    .label {
      font-size: 30rpx;
    }
    .info {
      @include flex-right;
      .value {
        font-size: 30rpx;
      }
      .btn {
        margin-left: 30rpx;
      }
    }
    .name-edit {
      @include flex-left;
      .edit-btn-group {
        @include flex;
        .edit-btn {
          margin-left: 20rpx;
        }
      }
    }
  }
}
</style>