juzi/taobao/pages/profile/profile.axml

<import src="../../components/brand-header.axml" />
<template is="brand-header" data="{{brandHeader: brandHeader}}" />
<!-- ═════ 03 档案填写 —— 对照 H5 index.html #s-profile(L61-108) + #p-photoguide(L311-327) ═════ -->
<view class="profile" style="--brand-header-height:{{brandHeader.height}}px;margin-top:{{brandHeader.height}}px;height:calc(100vh - {{brandHeader.height}}px);">
  <view class="session-guard" a:if="{{identityChecking || identityError}}">
    <view>{{identityChecking ? '正在确认当前淘宝账号…' : identityError}}</view>
    <button a:if="{{identityError}}" class="btn-primary" onTap="onRetryIdentity">重新验证</button>
  </view>
  <!-- H5 .profile-bg -->
  <image class="profile-bg" src="{{bgUrl}}" mode="aspectFill" />

  <!-- H5 .profile-body -->
  <view class="profile-body" hidden="{{identityChecking || identityError}}">
    <view class="page-title">您的肌肤状态</view>

    <!-- H5 .form-row.two:出生年月 + 性别 -->
    <view class="form-row two">
      <view class="field">
        <view class="field-label">您的出生年月</view>
        <view class="pick" onTap="onOpenBirth">
          <text class="pick-value">{{birthText}}</text>
          <view class="chev down"></view>
        </view>
      </view>
      <view class="field">
        <view class="field-label">您的性别</view>
        <view class="pick" onTap="onOpenGender">
          <text class="pick-value">{{genderText}}</text>
          <view class="chev down"></view>
        </view>
      </view>
    </view>

    <!-- H5 .field:所在地区 -->
    <view class="field">
      <view class="field-label">您的所在地区</view>
      <view class="pick" onTap="onOpenRegion">
        <text class="pick-value">{{regionText}}</text>
        <view class="chev down"></view>
      </view>
    </view>

    <!-- H5 .field.profile-skin-field:日常肤质轮播 -->
    <view class="field profile-skin-field">
      <view class="field-label">您的日常肤质</view>
      <view class="skin-card">
        <view class="skin-axis">
          <view class="axis-item"><view class="chip chip-dry"></view><text>偏干</text></view>
          <view class="axis-item"><view class="chip chip-oily"></view><text>偏油</text></view>
          <view class="axis-item"><view class="chip chip-balance"></view><text>水油平衡</text></view>
        </view>
        <view class="skin-stage">
          <view class="skin-arrow prev {{skinIndex === 0 ? 'disabled' : ''}}" onTap="onSkinPrev">
            <view class="chev left"></view>
          </view>
          <view class="skin-carousel" onTouchStart="onSkinTouchStart" onTouchMove="onSkinTouchMove" onTouchEnd="onSkinTouchEnd" onTouchCancel="onSkinTouchCancel">
            <view class="skin-track {{skinDragging ? 'dragging' : ''}}" style="transform: translateX(-{{skinPercent}}%) translateX({{skinDragOffset}}px);">
              <view class="skin-item" a:for="{{skins}}" a:key="name">
                <image class="skin-img" src="{{item.img}}" mode="aspectFit" />
                <text class="skin-name">{{item.name}}</text>
                <!-- H5 第一条描述里带 <br>:全脸干燥，容易紧绷、/缺乏光泽 -->
                <view class="skin-desc">
                  <view class="skin-desc-line">{{item.desc}}</view>
                  <view class="skin-desc-line" a:if="{{item.desc2}}">{{item.desc2}}</view>
                </view>
              </view>
            </view>
          </view>
          <view class="skin-arrow next {{skinIndex === skinLastIndex ? 'disabled' : ''}}" onTap="onSkinNext">
            <view class="chev right"></view>
          </view>
        </view>
        <view class="skin-dots">
          <view a:for="{{skins}}" a:key="name" class="dot {{index === skinIndex ? 'on' : ''}}"></view>
        </view>
      </view>
    </view>

    <button class="btn-primary btn-submit" hover-class="btn-press" onTap="onSubmit">提交</button>
  </view>

  <!-- ═══ 弹层:出生年月/性别/地区滚轮 ═══ -->
  <view class="overlay overlay-sheet" a:if="{{picker && !identityChecking && !identityError}}" onTap="onPickerClose">
    <view class="picker-sheet {{picker === 'gender' ? 'gender-sheet' : ''}}" catchTap="noop">
      <view class="picker-btn-bar">
        <view class="picker-cancel" onTap="onPickerClose">取消</view>
        <view class="picker-title">{{pickerTitle}}</view>
        <view class="picker-ensure" onTap="onPickerConfirm">确定</view>
      </view>
      <picker-view a:if="{{picker === 'gender'}}" class="native-picker gender-picker" value="{{pickerValue}}" onChange="onPickerChange" indicator-style="height:44px; border-top:1px solid #EFEFEF; border-bottom:1px solid #EFEFEF; background-color:rgba(245,240,120,.18);">
        <picker-view-column>
          <view class="picker-cell" a:for="{{genderRange}}" a:key="*this">{{item}}</view>
        </picker-view-column>
      </picker-view>
      <picker-view a:else class="native-picker" value="{{pickerValue}}" onChange="onPickerChange">
        <picker-view-column>
          <view class="picker-cell" a:for="{{picker === 'birth' ? birthRange[0] : regionRange[0]}}" a:key="*this">{{item}}</view>
        </picker-view-column>
        <picker-view-column>
          <view class="picker-cell" a:for="{{picker === 'birth' ? birthRange[1] : regionRange[1]}}" a:key="*this">{{item}}</view>
        </picker-view-column>
      </picker-view>
    </view>
  </view>

  <!-- ═══ 弹窗:拍照引导(H5 #p-photoguide:L311-327) ═══ -->
  <view class="overlay overlay-guide" a:if="{{showGuide && !identityChecking && !identityError}}" onTap="onCloseGuide">
    <view class="guide-bg">
      <image class="guide-bg-img" src="{{guideBgUrl}}" mode="aspectFill" />
      <!-- 背景只保留启动页底图 + Slogan -->
      <view class="splash-slogan">
        <view class="splash-slogan-copy-clip">
          <image class="splash-slogan-copy" src="{{sloganUrl}}" mode="scaleToFill" />
        </view>
        <view class="splash-slogan-brand">1'me,</view>
        <view class="splash-slogan-english">FROM THE INSIDE OUT</view>
      </view>
      <!-- H5 的 .guide-bg::after 是 .guide-bg 的最后一个子层,会盖在 Slogan 上 → 这里放在 Slogan 之后 -->
      <view class="guide-dim"></view>
    </view>
    <view class="popup guide-popup" catchTap="noop">
      <button class="popup-close" onTap="onCloseGuide">
        <image class="popup-close-img" src="{{closeIconUrl}}" mode="aspectFit" />
      </button>
      <view class="popup-title popup-title-center">
        <view>请拍摄或上传</view>
        <view>正面及左右侧面照片</view>
      </view>
      <view class="guide-description">
        <view class="guide-line">为使测试结果更准确，请关闭美颜/滤镜、并确</view>
        <view class="guide-line">保光线充足均匀。</view>
      </view>
      <button class="btn-primary popup-btn" hover-class="btn-press" onTap="onStartCamera">开始</button>
    </view>
  </view>

  <!-- H5 .toast -->
  <view class="toast {{toastOn ? 'show' : ''}}">{{toastText}}</view>
</view>