soul-yongping/miniprogram/pages/profile-edit/profile-edit.wxml

<!-- 资料编辑：单页 full=1；首次未完善走三步向导，保存后跳转超级个体名片 -->
<view class="page">
  <view class="nav-bar" style="padding-top: {{statusBarHeight}}px;">
    <view class="nav-back" bindtap="goBack"><icon name="chevron-left" size="44" color="#5EEAD4" customClass="back-icon"></icon></view>
    <text class="nav-title">{{wizardMode ? '分步档案（' + wizardStep + '/3）' : '编辑资料'}}</text>
    <view class="nav-placeholder"></view>
  </view>
  <view style="height: {{statusBarHeight + 44}}px;"></view>

  <view class="loading" wx:if="{{loading}}">加载中...</view>
  <scroll-view wx:else class="scroll-main" scroll-y>
    <!-- —— 三步向导（首次） —— -->
    <block wx:if="{{wizardMode}}">
      <view class="wizard-bar">
        <view class="wizard-step {{wizardStep >= 1 ? 'wizard-step-on' : ''}}">1</view>
        <view class="wizard-line {{wizardStep >= 2 ? 'wizard-line-on' : ''}}"></view>
        <view class="wizard-step {{wizardStep >= 2 ? 'wizard-step-on' : ''}}">2</view>
        <view class="wizard-line {{wizardStep >= 3 ? 'wizard-line-on' : ''}}"></view>
        <view class="wizard-step {{wizardStep >= 3 ? 'wizard-step-on' : ''}}">3</view>
      </view>
      <text class="wizard-sub">分步完善，保存后将进入「我的超级个体名片」，可转发分享</text>

      <block wx:if="{{wizardStep === 1}}">
        <view class="tip-card tip-card-wizard">
          <icon name="info" size="36" color="#00CED1" customClass="tip-icon"></icon>
          <text class="tip-text">第 1 步：先设置对外展示的头像与昵称</text>
        </view>
        <view class="avatar-section">
          <button class="avatar-wrap-btn" open-type="chooseAvatar" bindchooseavatar="onChooseAvatar">
            <view class="avatar-wrap">
              <view class="avatar-inner">
                <image wx:if="{{avatar}}" class="avatar-img" src="{{avatar}}" mode="aspectFill"/>
                <view wx:else class="avatar-placeholder">{{nickname ? nickname[0] : '?'}}</view>
              </view>
              <view class="avatar-camera"><icon name="camera" size="48" color="#ffffff"></icon></view>
            </view>
          </button>
        </view>
        <view class="section section-wizard">
          <view class="form-row">
            <text class="form-label">昵称<text class="required-mark">*</text></text>
            <view class="form-input-wrap" catchtouchstart="onNicknameAreaTouch">
              <input
                class="form-input-inner"
                type="nickname"
                placeholder="请输入昵称"
                value="{{nickname}}"
                focus="{{nicknameInputFocus}}"
                bindinput="onNicknameInput"
                bindchange="onNicknameChange"
                bindblur="onNicknameBlur"
                maxlength="20"
              />
            </view>
            <text class="input-tip">可用微信昵称或手动输入</text>
          </view>
        </view>
      </block>

      <block wx:if="{{wizardStep === 2}}">
        <view class="tip-card tip-card-wizard">
          <icon name="info" size="36" color="#00CED1" customClass="tip-icon"></icon>
          <text class="tip-text">第 2 步：补充职业画像（可后补，尽量填写便于匹配）</text>
        </view>
        <view class="section section-wizard">
          <view class="form-row form-row-2">
            <view class="form-item">
              <text class="form-label">MBTI</text>
              <picker mode="selector" range="{{mbtiOptions}}" value="{{mbtiIndex}}" bindchange="onMbtiPickerChange">
                <view class="form-input-wrap form-picker">{{mbti || '请选择'}}</view>
              </picker>
            </view>
            <view class="form-item">
              <text class="form-label">地区</text>
              <view class="form-input-wrap form-input-suffix">
                <input class="form-input-inner" placeholder="例如：福建厦门" value="{{region}}" bindinput="onRegionInput"/>
                <icon name="map-pin" size="32" color="#8e8e93" customClass="form-suffix"></icon>
              </view>
            </view>
          </view>
          <view class="form-row">
            <text class="form-label">行业</text>
            <view class="form-input-wrap"><input class="form-input-inner" placeholder="例如：新媒体/企业服务" value="{{industry}}" bindinput="onIndustryInput"/></view>
          </view>
          <view class="form-row">
            <text class="form-label">业务体量</text>
            <view class="form-input-wrap"><input class="form-input-inner" placeholder="例如：年 GMV 5000 万+" value="{{businessScale}}" bindinput="onBusinessScaleInput"/></view>
          </view>
          <view class="form-row">
            <text class="form-label">职位</text>
            <view class="form-input-wrap"><input class="form-input-inner" placeholder="例如：创始人 / 业务负责人" value="{{position}}" bindinput="onPositionInput"/></view>
          </view>
          <view class="form-row" wx:if="{{isVip}}">
            <text class="form-label">我擅长</text>
            <view class="form-input-wrap"><input class="form-input-inner" placeholder="例如：私域运营、投融资对接" value="{{skills}}" bindinput="onSkillsInput"/></view>
          </view>
        </view>
      </block>

      <block wx:if="{{wizardStep === 3}}">
        <view class="tip-card tip-card-wizard">
          <icon name="info" size="36" color="#00CED1" customClass="tip-icon"></icon>
          <text class="tip-text">第 3 步：手机号必填；微信号建议填写，便于链接与提现</text>
        </view>
        <view class="section section-wizard">
          <view class="section-title">
            <icon name="phone" size="40" color="#00CED1" customClass="section-icon"></icon>
            <text>核心联系方式</text>
          </view>
          <view class="form-row">
            <text class="form-label">手机号<text class="required-mark">*</text></text>
            <view class="form-input-wrap"><input class="form-input-inner" type="tel" placeholder="11 位手机号" value="{{phone}}" bindinput="onPhoneInput"/></view>
          </view>
          <view class="form-row">
            <text class="form-label">微信号</text>
            <view class="form-input-wrap"><input class="form-input-inner" placeholder="选填" value="{{wechatId}}" bindinput="onWechatInput"/></view>
          </view>
        </view>
        <view class="section" wx:if="{{isVip}}">
          <view class="section-title">
            <icon name="lightbulb" size="40" color="#00CED1" customClass="section-icon"></icon>
            <text>个人故事</text>
          </view>
          <view class="form-row">
            <text class="form-label">你最赚钱的一个月</text>
            <view class="form-textarea-wrap"><textarea class="form-textarea-inner" placeholder="选填" value="{{storyBestMonth}}" bindinput="onStoryBestMonthInput"/></view>
          </view>
          <view class="form-row">
            <text class="form-label">最有成就感的一件事</text>
            <view class="form-textarea-wrap"><textarea class="form-textarea-inner" placeholder="选填" value="{{storyAchievement}}" bindinput="onStoryAchievementInput"/></view>
          </view>
          <view class="form-row">
            <text class="form-label">人生的转折点</text>
            <view class="form-textarea-wrap"><textarea class="form-textarea-inner" placeholder="选填" value="{{storyTurning}}" bindinput="onStoryTurningInput"/></view>
          </view>
        </view>
        <view class="section" wx:if="{{isVip || helpOffer || helpNeed}}">
          <view class="section-title">
            <icon name="handshake" size="40" color="#00CED1" customClass="section-icon"></icon>
            <text>互助需求</text>
          </view>
          <view class="form-row">
            <text class="form-label">我能帮助大家什么</text>
            <view class="form-input-wrap"><input class="form-input-inner" placeholder="选填" value="{{helpOffer}}" bindinput="onHelpOfferInput"/></view>
          </view>
          <view class="form-row">
            <text class="form-label">我需要什么帮助</text>
            <view class="form-input-wrap"><input class="form-input-inner" placeholder="选填" value="{{helpNeed}}" bindinput="onHelpNeedInput"/></view>
          </view>
        </view>
        <view class="section" wx:if="{{isVip}}">
          <view class="section-title">
            <icon name="rocket" size="40" color="#00CED1" customClass="section-icon"></icon>
            <text>项目介绍</text>
          </view>
          <view class="form-row">
            <view class="form-textarea-wrap form-textarea-lg"><textarea class="form-textarea-inner" placeholder="选填" value="{{projectIntro}}" bindinput="onProjectIntroInput"/></view>
          </view>
        </view>
      </block>

      <view class="wizard-actions">
        <view class="wizard-btn-secondary" wx:if="{{wizardStep > 1}}" bindtap="onWizardPrev">上一步</view>
        <view class="wizard-btn-primary {{wizardStep === 1 ? 'wizard-btn-full' : ''}}" bindtap="onWizardNext">
          {{wizardStep === 3 ? (saving ? '保存中...' : '保存并查看名片') : '下一步'}}
        </view>
      </view>
      <view class="bottom-space"></view>
    </block>

    <!-- —— 单页完整编辑（已完善过或 full=1） —— -->
    <block wx:else>
      <view class="tip-card {{fromVip ? 'tip-card-highlight' : ''}}">
        <icon name="info" size="36" color="#00CED1" customClass="tip-icon"></icon>
        <text class="tip-text">{{fromVip ? '恭喜成为 VIP。补全资料后找伙伴、提现与群对接更顺畅；手机号为必填' : '手机号为必填；建议填写微信号，便于提现核对与对方联系。'}}</text>
      </view>

      <view class="avatar-section">
        <button class="avatar-wrap-btn" open-type="chooseAvatar" bindchooseavatar="onChooseAvatar">
          <view class="avatar-wrap">
            <view class="avatar-inner">
              <image wx:if="{{avatar}}" class="avatar-img" src="{{avatar}}" mode="aspectFill"/>
              <view wx:else class="avatar-placeholder">{{nickname ? nickname[0] : '?'}}</view>
            </view>
            <view class="avatar-camera"><icon name="camera" size="48" color="#ffffff"></icon></view>
          </view>
        </button>
      </view>

      <view class="section">
        <view class="form-row">
          <text class="form-label">昵称</text>
          <view class="form-input-wrap" catchtouchstart="onNicknameAreaTouch">
            <input
              class="form-input-inner"
              type="nickname"
              placeholder="请输入昵称"
              value="{{nickname}}"
              focus="{{nicknameInputFocus}}"
              bindinput="onNicknameInput"
              bindchange="onNicknameChange"
              bindblur="onNicknameBlur"
              maxlength="20"
            />
          </view>
          <text class="input-tip">微信用户可点击自动填充昵称，或手动输入</text>
        </view>
        <view class="form-row form-row-2">
          <view class="form-item">
            <text class="form-label">MBTI</text>
            <picker mode="selector" range="{{mbtiOptions}}" value="{{mbtiIndex}}" bindchange="onMbtiPickerChange">
              <view class="form-input-wrap form-picker">{{mbti || '请选择'}}</view>
            </picker>
          </view>
          <view class="form-item">
            <text class="form-label">地区</text>
            <view class="form-input-wrap form-input-suffix">
              <input class="form-input-inner" placeholder="例如：杭州·余杭区" value="{{region}}" bindinput="onRegionInput"/>
              <icon name="map-pin" size="32" color="#8e8e93" customClass="form-suffix"></icon>
            </view>
          </view>
        </view>
        <view class="form-row">
          <text class="form-label">行业</text>
          <view class="form-input-wrap"><input class="form-input-inner" placeholder="例如：新媒体/电商" value="{{industry}}" bindinput="onIndustryInput"/></view>
        </view>
        <view class="form-row">
          <text class="form-label">业务体量</text>
          <view class="form-input-wrap"><input class="form-input-inner" placeholder="例如：年GMV 5000万+" value="{{businessScale}}" bindinput="onBusinessScaleInput"/></view>
        </view>
        <view class="form-row">
          <text class="form-label">职位</text>
          <view class="form-input-wrap"><input class="form-input-inner" placeholder="例如：创始人/联合创始人" value="{{position}}" bindinput="onPositionInput"/></view>
        </view>
        <view class="form-row" wx:if="{{isVip}}">
          <text class="form-label">我擅长</text>
          <view class="form-input-wrap"><input class="form-input-inner" placeholder="例如：短视频制作、IP打造、私域运营" value="{{skills}}" bindinput="onSkillsInput"/></view>
        </view>
      </view>

      <view class="section">
        <view class="section-title">
          <icon name="phone" size="40" color="#00CED1" customClass="section-icon"></icon>
          <text>核心联系方式</text>
        </view>
        <view class="form-row">
          <text class="form-label">手机号<text class="required-mark">*</text></text>
          <view class="form-input-wrap"><input class="form-input-inner" type="tel" placeholder="请输入手机号（必填）" value="{{phone}}" bindinput="onPhoneInput"/></view>
        </view>
        <view class="form-row">
          <text class="form-label">微信号</text>
          <view class="form-input-wrap"><input class="form-input-inner" placeholder="请输入微信号" value="{{wechatId}}" bindinput="onWechatInput"/></view>
        </view>
      </view>

      <view class="section" wx:if="{{isVip}}">
        <view class="section-title">
          <icon name="lightbulb" size="40" color="#00CED1" customClass="section-icon"></icon>
          <text>个人故事</text>
        </view>
        <view class="form-row">
          <text class="form-label">你最赚钱的一个月做的是什么</text>
          <view class="form-textarea-wrap"><textarea class="form-textarea-inner" placeholder="例如：2021年主导电商大促，单月GMV突破500W..." value="{{storyBestMonth}}" bindinput="onStoryBestMonthInput"/></view>
        </view>
        <view class="form-row">
          <text class="form-label">最有成就感的一件事</text>
          <view class="form-textarea-wrap"><textarea class="form-textarea-inner" placeholder="例如：帮助3个素人打造个人IP，每月稳定变现5万+" value="{{storyAchievement}}" bindinput="onStoryAchievementInput"/></view>
        </view>
        <view class="form-row">
          <text class="form-label">人生的转折点</text>
          <view class="form-textarea-wrap"><textarea class="form-textarea-inner" placeholder="例如：辞去大厂工作开始做自媒体..." value="{{storyTurning}}" bindinput="onStoryTurningInput"/></view>
        </view>
      </view>

      <view class="section" wx:if="{{isVip || helpOffer || helpNeed}}">
        <view class="section-title">
          <icon name="handshake" size="40" color="#00CED1" customClass="section-icon"></icon>
          <text>互助需求</text>
        </view>
        <view class="form-row">
          <text class="form-label">我能帮助大家什么</text>
          <view class="form-input-wrap"><input class="form-input-inner" placeholder="例如：短视频脚本、账号冷启动、私域转化" value="{{helpOffer}}" bindinput="onHelpOfferInput"/></view>
        </view>
        <view class="form-row">
          <text class="form-label">我需要什么帮助</text>
          <view class="form-input-wrap"><input class="form-input-inner" placeholder="例如：寻找供应链资源、线下活动合作" value="{{helpNeed}}" bindinput="onHelpNeedInput"/></view>
        </view>
      </view>

      <view class="section" wx:if="{{isVip}}">
        <view class="section-title">
          <icon name="rocket" size="40" color="#00CED1" customClass="section-icon"></icon>
          <text>项目介绍</text>
        </view>
        <view class="form-row">
          <view class="form-textarea-wrap form-textarea-lg"><textarea class="form-textarea-inner" placeholder="详细介绍您的项目，让潜在伙伴更好地了解您..." value="{{projectIntro}}" bindinput="onProjectIntroInput"/></view>
        </view>
      </view>

      <view class="save-btn" bindtap="saveProfile" disabled="{{saving}}">
        {{saving ? '保存中...' : '保存'}}
      </view>
      <view class="bottom-space"></view>
    </block>
  </scroll-view>

  <canvas canvas-id="shareCardCanvas" class="share-card-canvas" style="width: 500px; height: 400px;"></canvas>

  <view class="privacy-mask" wx:if="{{showPrivacyModal}}" catchtouchmove="preventMove">
    <view class="privacy-modal">
      <text class="privacy-title">温馨提示</text>
      <text class="privacy-desc">为获取微信昵称，请先同意《用户隐私保护指引》</text>
      <button id="agree-btn" class="privacy-btn" open-type="agreePrivacyAuthorization" bindagreeprivacyauthorization="handleAgreePrivacy">同意</button>
      <view class="privacy-cancel" bindtap="handleDisagreePrivacy">拒绝</view>
    </view>
  </view>
</view>