toutoukan_front/miniprogram/pages/setting/setting.wxml

<wxs src="./format.wxs" module="tools" />
<view class="setting-page">

  <!-- 用户信息卡片 -->
  <view class="user-card">
    <view class="avatar-container" bindtap="changeAvatar">
      <image class="avatar" src="{{userInfo.avatar_url}}" mode="aspectFill"></image>
      <view class="avatar-overlay">
        <image class="edit-icon" src="/images/edit-icon.png" mode="widthFix"></image>
      </view>
    </view>
    
    <view class="user-info">
      <view class="username">{{userInfo.username}}</view>
      <view class="user-id">ID: {{userInfo.uid}}</view>
    </view>
  </view>

  <!-- 主要设置区域 -->
  <view class="settings-container">
    <!-- 账户设置 -->
    <view class="setting-section">
      <text class="section-title">账户设置</text>
      
      <view class="setting-card">
        <view class="setting-item" bindtap="editNickname">
          <view class="item-icon">
            <t-icon name="article" size="40rpx" />
          </view>
          <view class="item-content">
            <text class="item-label">昵称</text>
            <text class="item-value">{{userInfo.username}}</text>
          </view>
          <view class="item-arrow">
            <image src="/images/arrow-right.png" mode="widthFix"></image>
          </view>
        </view>
        
        <view class="item-divider"></view>
        
        <view class="setting-item" bindtap="editGender">
      <view class="item-icon">
        <t-icon name="accessibility" size="40rpx" />
      </view>
      <view class="item-content">
        <text class="item-label">性别</text>
        <text class="item-value">{{tools.formatGender(userInfo.gender)}}</text>
      </view>
      <view class="item-arrow">
        <image src="/images/arrow-right.png" mode="widthFix"></image>
      </view>
    </view>
        
        <view class="item-divider"></view>
        
        <view class="setting-item" bindtap="editBirthdate">
          <view class="item-icon">
            <t-icon name="calendar-1" size="40rpx" />
          </view>
          <view class="item-content">
            <text class="item-label">生日</text>
            <text class="item-value">{{userInfo.birthdate_date}}</text>
          </view>
          <view class="item-arrow">
            <image src="/images/arrow-right.png" mode="widthFix"></image>
          </view>
        </view>
        
        <view class="item-divider"></view>
        
        <view class="setting-item" bindtap="editPhone">
          <view class="item-icon">
            <t-icon name="call" size="40rpx" />
          </view>
          <view class="item-content">
            <text class="item-label">手机号</text>
            <text class="item-value">{{userInfo.telephone}}</text>
          </view>
          <view class="item-arrow">
            <image src="/images/arrow-right.png" mode="widthFix"></image>
          </view>
        </view>
      </view>
    </view>
    
    <!-- 安全设置 -->
    <view class="setting-section">
      <text class="section-title">安全设置</text>
      
      <view class="setting-card">
        <view class="setting-item" bindtap="changePassword">
          <view class="item-icon">
            <t-icon name="fingerprint-1" size="40rpx" />
          </view>
          <view class="item-content">
            <text class="item-label">修改密码</text>
          </view>
          <view class="item-arrow">
            <image src="/images/arrow-right.png" mode="widthFix"></image>
          </view>
        </view>
        
        <view class="item-divider"></view>
        
        <view class="setting-item" bindtap="managePrivacy">
          <view class="item-icon">
            <t-icon name="hard-drive" size="40rpx" />
          </view>
          <view class="item-content">
            <text class="item-label">隐私设置</text>
          </view>
          <view class="item-arrow">
            <image src="/images/arrow-right.png" mode="widthFix"></image>
          </view>
        </view>
      </view>
    </view>
    
    <!-- 其他设置 -->
    <view class="setting-section">
      <text class="section-title">其他</text>
      
      <view class="setting-card">
        <view class="setting-item" bindtap="showAbout">
          <view class="item-icon">
            <t-icon name="lighthouse" size="40rpx" />
          </view>
          <view class="item-content">
            <text class="item-label">关于我们</text>
          </view>
          <view class="item-arrow">
            <image src="/images/arrow-right.png" mode="widthFix"></image>
          </view>
        </view>
      </view>
    </view>
    
    <!-- 退出登录按钮 -->
    <view class="logout-btn" bindtap="logout">
      <text class="logout-text">退出登录</text>
    </view>
  </view>
</view>