<view class="page">
  <view class="page-header page-header-pink" style="padding-top: {{statusBarHeight + 24}}px;">
    <view class="page-header-title">LumiFlow</view>
    <view class="page-header-subtitle">完善个人资料</view>
  </view>

  <view class="page-content">
    <view class="section-title">设置头像</view>
    <view class="avatar-area">
      <view class="avatar-wrap" bindtap="onPickAvatar">
        <image class="avatar-img" src="{{avatarUrl}}" mode="aspectFill"></image>
        <view class="avatar-edit-hint">点击更换</view>
      </view>
    </view>

    <view class="section-title">设置昵称</view>
    <view class="input-wrap">
      <input type="nickname" class="weui-input nickname-input" value="{{nickname}}" bindinput="onNicknameInput" bindblur="onNicknameBlur" placeholder="请输入昵称" />
    </view>

    <view class="section-title">授权手机号</view>
    <view class="phone-area">
      <block wx:if="{{phone}}">
        <view class="phone-done">
          <text class="phone-icon">✓</text>
          <text class="phone-text">{{phone}}</text>
        </view>
      </block>
      <block wx:else>
        <button class="phone-btn" open-type="getPhoneNumber" bindgetphonenumber="onGetPhoneNumber" disabled="{{loading}}">
          授权手机号
        </button>
        <view class="phone-hint">手机号用于接收服务通知，必须授权</view>
      </block>
    </view>

    <button class="submit-btn" bindtap="onSubmit" loading="{{loading}}" disabled="{{loading}}">
      完成注册
    </button>

    <view class="agreement" bindtap="onAgreement">注册即表示同意《用户协议》和《隐私政策》</view>
  </view>
</view>
