fqsz/pages/personalCenter/personalCenter.wxml

<view class="container">
  <!-- 头像 -->
  <view class="avatar" bindtap="chooseAvatar">
    <image src="{{userInfo.avatarUrl}}" mode="aspectFill"></image>
  </view>
  <!-- 昵称 -->
  <view class="nickname-wrapper">
    <input class="input-box" placeholder="请输入昵称" value="{{userInfo.nickName}}" bindinput="onNicknameInput" />
    <button class="save-button" bindtap="saveNickname">保存</button>
  </view>
  <!-- 手机号输入 -->
  <view class="input-wrapper">
    <input class="input-box" placeholder="请输入手机号" type="number" bindinput="onPhoneInput" />
  </view>
  <!-- 验证码输入 -->
  <view class="input-wrapper">
    <input class="input-box" placeholder="请输入验证码" bindinput="onCodeInput" />
    <button class="get-code-button" bindtap="getVerificationCode">{{codeBtnText}}</button>
  </view>
  <!-- 登录按钮 -->
  <button wx:if="{{!hasUserInfo}}" bindtap="login">登录</button>
  <!-- 登出按钮 -->
  <button wx:if="{{hasUserInfo}}" bindtap="logout">登出</button>
</view>