uniAppXCX/pages/user/editUser/editUser.vue

<template>
  <view class="container">
    <view class="title">用户昵称</view>
    <view class="input">
      <uni-easyinput
        :errorMessage="error"
        v-model="userInfo.nickname"
        focus
        placeholder="请输入用户昵称"
      ></uni-easyinput>
    </view>
    <view class="tip">请设置2~24个字符，不包括特殊字符哦</view>
    <view class="button" @click="save">保存</view>
  </view>
</template>

<script>
import { userInfoApi, profileApi } from '@/api/user.js'
export default {
  data() {
    return {
      error: false,
      name: '',
      userInfo: {},
    }
  },
  onShow() {
    this.getUserInfo()
  },
  methods: {
    getUserInfo() {
      userInfoApi().then(res => {
        this.userInfo = res.data
        this.name = res.data.nickname
        console.log(this.userInfo, '用户信息')
      })
    },
    save() {
      if (!this.userInfo.nickname) {
        wx.showToast({
          title: '请输入用户名称',
          icon: 'error',
        })
        return
      }
      let params = {
        nickName: this.userInfo.nickname,
      }
      profileApi(params).then(res => {
        console.log(res, 'res')
        wx.showToast({
          title: '修改成功',
        })
        wx.navigateBack({
          delta: 1,
        })
      })
    },
  },
}
</script>

<style scoped lang="scss">
.container {
  background: #f8f8f8;
  padding: 30rpx 20rpx;

  .title {
    margin-bottom: 30rpx;
    color: #333333;
    font-size: 28rpx;
    padding: 0 20rpx;
  }
  .input {
    margin-bottom: 30rpx;
  }
  .tip {
    color: #999999;
    padding-left: 30rpx;
    font-size: 24rpx;
    margin-bottom: 80rpx;
  }
  .button {
    background: #fea200;
    color: #fff;
    text-align: center;
    height: 88rpx;
    line-height: 88rpx;
    font-weight: 400;
    border-radius: 8rpx;
  }
}
</style>
<style scoped>
.container >>> .uni-easyinput__content-input {
  padding-left: 30rpx !important;
  padding-top: 10rpx;
  padding-bottom: 10rpx;
}
</style>