feat(miniapp): align UI with H5 and harden device debugging
五个页面按 h5/css 的 style.css → ui-20261009 → ui-20261012 覆盖顺序逐条重排， 换算规则固定为 calc(N * var(--u)) → 2N rpx，固定 px 的字号保持 px。 - app.acss：换回 H5 设计 token（方角小倒角按钮 10rpx、卡片 14rpx、.chev 折线箭头） - splash/profile/history：底图与按钮文字图改用 H5 资源，隐私/政策弹窗按 H5 重排 - report：环形分用 conic-gradient、人脸裁切窗口叠加 face_maps、标记点百分比盒、 侧脸皱纹 pending/unavailable 文案；用 Playwright 抓 H5 94 个选择器几何比对， 整页高 2438.7 vs 2438.67 - camera：淘宝 <camera> 组件在真机整页崩溃（嵌了微信专有的 <cover-view>）， 改为默认系统相机 + `config.nativeCamera` 开关 + pages/camtest 冒烟页验证组件 - permissions：淘宝用带前缀的 scope.camera（裸名返回 5022 Scope:camera信息不存在）， 先试带前缀再退回裸名，拒绝后不再重复弹窗 - voice：非 HTTPS 资源导致的异常不再冒泡成整页崩溃；app.js 加开发版错误 toast - 开发版入口：权限诊断（启动页/相机页）、相机组件测试 - 测试 20/20（新增权限与相机能力用例）
This commit is contained in:
@@ -1,141 +1,494 @@
|
||||
/* ═════ 档案填写页样式 ═════ */
|
||||
/* ═════ 03 档案填写 —— 逐条对照 H5:
|
||||
style.css #s-profile(L105-205) .profile-bg/.profile-body/.page-title/.field/.field-label/
|
||||
.form-row.two/.pick/.pick-value/.pick .chev/.skin-card/.skin-axis/.axis-item/.chip/
|
||||
.skin-stage/.skin-arrow/.skin-carousel/.skin-track/.skin-item/.skin-name/.skin-desc/
|
||||
.skin-dots/.btn-submit/.ms-mobile-select(滚轮外观)/.overlay/.popup/.privacy 类
|
||||
ui-20261009.css L31-32,L89-92
|
||||
ui-20261012.css L34-69(.popup 与 #p-photoguide 定位), L169-198(#s-profile 的 --profile-space 收缩规则)
|
||||
换算:calc(N * var(--u)) → 2N rpx;字号/行高/圆角固定 px 原样保留。
|
||||
注:H5 的 --profile-space = min(var(--u), max(.3px, calc((100vh - 420px)/306))),
|
||||
这里写成同构的 min(2rpx, max(.6rpx, ...)),并用 var(--profile-space, 2rpx) 兜底。 ═════ */
|
||||
|
||||
page { background: #0e0f18; }
|
||||
|
||||
/* H5 #s-profile(style.css L105 + ui-20261012 L172-175) */
|
||||
.profile {
|
||||
position: relative;
|
||||
min-height: 100vh;
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
overflow: hidden;
|
||||
overscroll-behavior: none;
|
||||
background: #0e0f18;
|
||||
--profile-space: min(2rpx, max(0.6rpx, calc((100vh - 420px) / 306)));
|
||||
}
|
||||
|
||||
/* H5 .profile-bg(ui-20261009 L31:bg-profile-h5,cover) */
|
||||
.profile-bg {
|
||||
position: fixed;
|
||||
left: 0; top: 0;
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
/* 上半部分露出背景图,表单区由白色卡片承载 */
|
||||
}
|
||||
|
||||
/* H5 .profile-body(style.css L113-117 + ui-20261012 L179-184) */
|
||||
.profile-body {
|
||||
position: relative;
|
||||
padding: 48rpx 32rpx 64rpx;
|
||||
z-index: 1;
|
||||
height: 100%;
|
||||
min-height: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.page-title {
|
||||
color: #FFFFFF;
|
||||
font-size: 44rpx;
|
||||
font-weight: 600;
|
||||
text-align: center;
|
||||
margin-bottom: 48rpx;
|
||||
padding: 68rpx 128rpx 80rpx; /* calc(34*u) calc(64*u) calc(40*u) */
|
||||
padding-top: max(env(safe-area-inset-top), calc(34 * var(--profile-space, 2rpx)));
|
||||
padding-bottom: max(env(safe-area-inset-bottom), calc(40 * var(--profile-space, 2rpx)));
|
||||
}
|
||||
|
||||
.form-row {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.field { margin-bottom: 32rpx; }
|
||||
.field-half { width: 48%; }
|
||||
.field-label {
|
||||
color: #FFFFFF;
|
||||
font-size: 28rpx;
|
||||
margin-bottom: 16rpx;
|
||||
/* H5 .page-title(style.css L118-122 + ui-20261009 L92 + ui-20261012 L185)
|
||||
注:#s-profile 根节点自身不接收 padding-top(safe-area),与 H5 一致 */
|
||||
.profile .page-title {
|
||||
color: #fff;
|
||||
font-size: 21.5px;
|
||||
font-weight: 600;
|
||||
letter-spacing: 2rpx; /* calc(1 * var(--u)) */
|
||||
text-align: center;
|
||||
margin-bottom: calc(22 * var(--profile-space, 2rpx));
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.pick {
|
||||
|
||||
/* H5 .field / .field-label(ui-20261012 L186-187) */
|
||||
.profile .field {
|
||||
margin-bottom: calc(19 * var(--profile-space, 2rpx));
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.profile .field-label {
|
||||
display: block;
|
||||
text-align: center;
|
||||
color: #fff;
|
||||
font-size: 14.5px;
|
||||
font-weight: 400;
|
||||
margin-bottom: calc(9 * var(--profile-space, 2rpx));
|
||||
letter-spacing: 1rpx; /* calc(.5 * var(--u)) */
|
||||
}
|
||||
|
||||
/* H5 .form-row.two */
|
||||
.profile .form-row.two {
|
||||
display: flex;
|
||||
gap: 46rpx; /* calc(23 * var(--u)) */
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.profile .form-row.two .field { flex: 1; min-width: 0; }
|
||||
|
||||
/* H5 .pick(style.css L133-142) —— 三个选择控件同一套外观 */
|
||||
.profile .pick {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
height: 88rpx;
|
||||
background: #FFFFFF;
|
||||
border-radius: 16rpx;
|
||||
padding: 0 24rpx;
|
||||
gap: 6px;
|
||||
width: 100%;
|
||||
height: 74rpx; /* calc(37 * var(--u)) */
|
||||
padding: 0 26rpx 0 24rpx; /* 0 calc(13*u) 0 calc(12*u) */
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.pick-value {
|
||||
background: #fff;
|
||||
border-radius: 10rpx; /* calc(5 * var(--u)) */
|
||||
font-size: 13.5px;
|
||||
color: #282828;
|
||||
font-size: 28rpx;
|
||||
text-align: left;
|
||||
}
|
||||
.chev {
|
||||
color: #868686;
|
||||
font-size: 28rpx;
|
||||
.profile .pick:active { background: #F7F7F7; }
|
||||
.profile .pick-value {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.profile .pick .chev {
|
||||
flex: none;
|
||||
width: 16rpx; /* calc(8 * var(--u)) */
|
||||
height: 16rpx;
|
||||
margin-top: -8rpx; /* calc(-4 * var(--u)) */
|
||||
border-width: 0 1.5px 1.5px 0;
|
||||
}
|
||||
.profile .pick-host { display: block; width: 100%; }
|
||||
|
||||
/* ─── 肤质卡 ─── */
|
||||
.skin-card {
|
||||
background: #FFFFFF;
|
||||
border-radius: 24rpx;
|
||||
padding: 32rpx 24rpx;
|
||||
/* ─── H5 .skin-card(style.css L144-148 + ui-20261012 L189) ─── */
|
||||
.profile .skin-card {
|
||||
background: #fff;
|
||||
border-radius: 10rpx; /* calc(5 * var(--u)) */
|
||||
padding-top: calc(21 * var(--profile-space, 2rpx));
|
||||
padding-bottom: calc(24 * var(--profile-space, 2rpx));
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
box-sizing: border-box;
|
||||
flex: 1 1 auto;
|
||||
min-height: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
.skin-axis {
|
||||
/* H5 .skin-axis / .axis-item / .chip */
|
||||
.profile .skin-axis {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin-bottom: 24rpx;
|
||||
gap: 24rpx; /* calc(12 * var(--u)) */
|
||||
margin-bottom: calc(18 * var(--profile-space, 2rpx));
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.axis-item {
|
||||
display: flex;
|
||||
.profile .axis-item {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
font-size: 24rpx;
|
||||
color: #868686;
|
||||
margin: 0 16rpx;
|
||||
gap: 10rpx; /* calc(5 * var(--u)) */
|
||||
font-size: 9px;
|
||||
color: #282828;
|
||||
}
|
||||
.chip {
|
||||
display: inline-block;
|
||||
width: 20rpx;
|
||||
height: 20rpx;
|
||||
.profile .chip {
|
||||
width: 16rpx; /* calc(8 * var(--u)) */
|
||||
height: 16rpx;
|
||||
border-radius: 50%;
|
||||
margin-right: 8rpx;
|
||||
display: inline-block;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.chip-dry { background: #EAE6E1; }
|
||||
.chip-oily { background: #F5F078; }
|
||||
.chip-balance { background: #DBF6D6; }
|
||||
|
||||
.skin-stage {
|
||||
/* H5 .skin-stage / .skin-arrow(ui-20261012 L191) */
|
||||
.profile .skin-stage {
|
||||
position: relative;
|
||||
padding: 0 56rpx; /* 0 calc(28 * var(--u)) */
|
||||
box-sizing: border-box;
|
||||
flex: 1 1 auto;
|
||||
min-height: 0;
|
||||
display: flex;
|
||||
}
|
||||
.profile .skin-arrow {
|
||||
position: absolute;
|
||||
top: 84rpx; /* calc(42 * var(--u)) */
|
||||
z-index: 1;
|
||||
width: 52rpx; /* calc(26 * var(--u)) */
|
||||
height: 52rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.skin-arrow {
|
||||
width: 64rpx;
|
||||
font-size: 56rpx;
|
||||
color: #868686;
|
||||
text-align: center;
|
||||
flex-shrink: 0;
|
||||
.profile .skin-arrow.prev { left: 10rpx; } /* calc(5 * var(--u)) */
|
||||
.profile .skin-arrow.next { right: 10rpx; }
|
||||
.profile .skin-arrow .chev {
|
||||
width: 18rpx; /* calc(9 * var(--u)) */
|
||||
height: 18rpx;
|
||||
border-width: 0 1.5px 1.5px 0;
|
||||
}
|
||||
.skin-swiper {
|
||||
.profile .skin-arrow.disabled { opacity: .2; }
|
||||
|
||||
/* H5 .skin-carousel / .skin-track(ui-20261012 L192-193) */
|
||||
.profile .skin-carousel {
|
||||
overflow: hidden;
|
||||
flex: 1;
|
||||
height: 460rpx;
|
||||
min-width: 0;
|
||||
min-height: 0;
|
||||
display: flex;
|
||||
touch-action: none;
|
||||
user-select: none;
|
||||
-webkit-user-select: none;
|
||||
}
|
||||
.skin-item {
|
||||
.profile .skin-track {
|
||||
display: flex;
|
||||
flex: 0 0 100%;
|
||||
min-width: 0;
|
||||
min-height: 0;
|
||||
transition: transform .32s cubic-bezier(.22, .61, .36, 1);
|
||||
}
|
||||
/* H5 .skin-item / .skin-item img / .skin-name / .skin-desc */
|
||||
.profile .skin-item {
|
||||
flex: 0 0 100%;
|
||||
min-width: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
padding: 0 16rpx;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.skin-img {
|
||||
width: 280rpx;
|
||||
height: 280rpx;
|
||||
.profile .skin-img {
|
||||
width: 218rpx; /* calc(109 * var(--u)) */
|
||||
height: 218rpx;
|
||||
flex-shrink: 1;
|
||||
min-height: 0;
|
||||
}
|
||||
.skin-name {
|
||||
font-size: 32rpx;
|
||||
font-weight: 600;
|
||||
margin-top: 16rpx;
|
||||
.profile .skin-name {
|
||||
font-size: 12.5px;
|
||||
font-weight: 700;
|
||||
color: #000;
|
||||
margin-top: calc(16 * var(--profile-space, 2rpx));
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.skin-desc {
|
||||
font-size: 24rpx;
|
||||
color: #868686;
|
||||
.profile .skin-desc {
|
||||
font-size: 11.5px; /* ui-20261009 L32 */
|
||||
color: #282828;
|
||||
line-height: 1.55;
|
||||
text-align: center;
|
||||
margin-top: 8rpx;
|
||||
margin-top: 10rpx; /* calc(5 * var(--u)) */
|
||||
width: 300rpx; /* calc(150 * var(--u)) */
|
||||
max-width: 300rpx;
|
||||
min-height: 35.65px; /* calc(2 * 1.55 * 11.5px) */
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.skin-dots {
|
||||
/* H5 第一条描述含 <br>:用两个块级行还原硬换行 */
|
||||
.profile .skin-desc-line { display: block; }
|
||||
|
||||
/* H5 .skin-dots / .skin-dots i */
|
||||
.profile .skin-dots {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin-top: 16rpx;
|
||||
gap: 10rpx; /* calc(5 * var(--u)) */
|
||||
margin-top: calc(22 * var(--profile-space, 2rpx));
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.dot {
|
||||
width: 12rpx;
|
||||
height: 12rpx;
|
||||
.profile .skin-dots .dot {
|
||||
width: 16rpx; /* calc(8 * var(--u)) */
|
||||
height: 16rpx;
|
||||
border-radius: 50%;
|
||||
background: #E5E5E5;
|
||||
margin: 0 6rpx;
|
||||
background: #D6D6D6;
|
||||
transition: background .25s;
|
||||
}
|
||||
.dot.on { background: #282828; }
|
||||
.profile .skin-dots .dot.on { background: #000; }
|
||||
|
||||
.btn-submit { margin-top: 24rpx; }
|
||||
.picker-sheet { background: white; width: 100%; align-self: flex-end; border-radius: 24rpx 24rpx 0 0; }
|
||||
.picker-actions { display: flex; justify-content: space-between; padding: 32rpx; }
|
||||
.native-picker { width: 100%; height: 440rpx; text-align: center; line-height: 80rpx; }
|
||||
/* H5 .btn-submit */
|
||||
.profile .btn-submit {
|
||||
margin: calc(25 * var(--profile-space, 2rpx)) auto 0;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.btn-press { transform: scale(.96); }
|
||||
|
||||
/* ═══ 滚轮弹层:H5 vendor/mobile-select 外观(style.css L191-205) ═══ */
|
||||
.profile .overlay-sheet {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
z-index: 60;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: flex-end;
|
||||
background: rgba(0, 0, 0, .55);
|
||||
}
|
||||
.picker-sheet {
|
||||
width: 100%;
|
||||
background: #fff;
|
||||
border-radius: 12px 12px 0 0;
|
||||
overflow: hidden;
|
||||
padding-bottom: env(safe-area-inset-bottom);
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.picker-btn-bar {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
height: 50px;
|
||||
line-height: 50px;
|
||||
font-size: 15px;
|
||||
border-bottom: 1px solid #F0F0F0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.picker-cancel,
|
||||
.picker-ensure {
|
||||
width: 64px;
|
||||
height: 50px;
|
||||
line-height: 50px;
|
||||
text-align: center;
|
||||
font-size: 15px;
|
||||
}
|
||||
.picker-cancel { color: #757575; }
|
||||
.picker-ensure { color: #282828; font-weight: 600; }
|
||||
.picker-title {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 0;
|
||||
transform: translateX(-50%);
|
||||
font-size: 15px;
|
||||
font-weight: 600;
|
||||
color: #282828;
|
||||
}
|
||||
.native-picker {
|
||||
width: 100%;
|
||||
height: 220px;
|
||||
font-size: 16px;
|
||||
color: #282828;
|
||||
}
|
||||
.picker-cell {
|
||||
font-size: 16px;
|
||||
color: #282828;
|
||||
text-align: center;
|
||||
line-height: 44px;
|
||||
}
|
||||
|
||||
/* ═══ 拍照引导弹窗 H5 #p-photoguide(L311-327) ═══ */
|
||||
.profile .overlay-guide {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
z-index: 50;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: #101823;
|
||||
}
|
||||
.profile .guide-bg {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
}
|
||||
.profile .guide-bg-img {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.profile .guide-dim {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background: rgba(0, 0, 0, .5);
|
||||
}
|
||||
/* H5 .splash-slogan.splash-slogan-updated(ui-20261012 L9-20) */
|
||||
.profile .splash-slogan {
|
||||
position: absolute;
|
||||
left: calc(50% - 1.041667px);
|
||||
top: max(6.838833%, calc(env(safe-area-inset-top) + 48px));
|
||||
width: 249.305556px;
|
||||
height: 75.347222px;
|
||||
transform: translateX(-50%);
|
||||
text-align: center;
|
||||
color: #fff;
|
||||
font-size: 23px;
|
||||
font-weight: 400;
|
||||
line-height: 1.16;
|
||||
letter-spacing: 0;
|
||||
text-shadow: none;
|
||||
}
|
||||
.profile .splash-slogan-copy-clip {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
top: 51.236111px;
|
||||
height: 24.111111px;
|
||||
overflow: hidden;
|
||||
}
|
||||
.profile .splash-slogan-copy {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: -51.236111px;
|
||||
width: 100%;
|
||||
height: 75.347222px;
|
||||
}
|
||||
.profile .splash-slogan-brand,
|
||||
.profile .splash-slogan-english {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
font-family: Arial, sans-serif;
|
||||
font-size: 23px;
|
||||
font-weight: 400;
|
||||
line-height: 1;
|
||||
white-space: nowrap;
|
||||
color: #fff;
|
||||
}
|
||||
.profile .splash-slogan-brand { top: -4px; font-size: 28px; }
|
||||
.profile .splash-slogan-english { top: 26.736111px; }
|
||||
|
||||
/* H5 #p-photoguide .popup(ui-20261012 L34-38) */
|
||||
.profile .popup {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
width: 307.986111px;
|
||||
height: 313.194444px;
|
||||
min-height: 313.194444px;
|
||||
top: -42.881944px;
|
||||
padding: 0;
|
||||
background: #fff;
|
||||
border-radius: 8.680556px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
text-align: left;
|
||||
box-sizing: border-box;
|
||||
text-rendering: geometricPrecision;
|
||||
}
|
||||
.profile .popup-close {
|
||||
position: absolute;
|
||||
top: 10.055556px;
|
||||
right: 10.055556px;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: none;
|
||||
border: none;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.profile .popup-close::after { border: none; }
|
||||
.popup-close-img {
|
||||
width: 17.708333px;
|
||||
height: 17.361111px;
|
||||
}
|
||||
/* H5 #p-photoguide .popup-title(L44) */
|
||||
.profile .popup-title {
|
||||
position: absolute;
|
||||
left: 37.5px;
|
||||
top: 61.388889px;
|
||||
margin: 0;
|
||||
font-size: 23.148148px;
|
||||
line-height: 28.935185px;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0;
|
||||
color: #282828;
|
||||
white-space: nowrap;
|
||||
text-align: left;
|
||||
}
|
||||
/* H5 .guide-description(L45-52) */
|
||||
.profile .guide-description {
|
||||
position: absolute;
|
||||
left: 37.847222px;
|
||||
top: 135.069444px;
|
||||
width: 237px;
|
||||
margin: 0;
|
||||
font-size: 11.574074px;
|
||||
line-height: 17.361111px;
|
||||
font-weight: 400;
|
||||
letter-spacing: 0;
|
||||
}
|
||||
.profile .guide-line { white-space: nowrap; }
|
||||
/* H5 #p-photoguide .popup-btn(L57-64) */
|
||||
.profile .popup-btn {
|
||||
position: absolute;
|
||||
left: 63.194444px;
|
||||
top: 219.791667px;
|
||||
margin: 0;
|
||||
width: 181.25px;
|
||||
height: 38.888889px;
|
||||
line-height: 38.888889px;
|
||||
font-size: 14.467593px;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0;
|
||||
border-radius: 6.944444px;
|
||||
}
|
||||
@media (max-height: 440px) {
|
||||
.profile .popup { top: 0; }
|
||||
}
|
||||
|
||||
/* ─── H5 .toast ─── */
|
||||
.toast {
|
||||
position: fixed;
|
||||
left: 50%;
|
||||
bottom: 15%;
|
||||
transform: translateX(-50%) translateY(8px);
|
||||
max-width: 86%;
|
||||
background: rgba(20, 20, 20, .85);
|
||||
color: #fff;
|
||||
font-size: 13px;
|
||||
line-height: 1.5;
|
||||
text-align: center;
|
||||
padding: 9px 18px;
|
||||
border-radius: 18px;
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
transition: all .25s ease;
|
||||
z-index: 99;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
|
||||
|
||||
@@ -1,91 +1,130 @@
|
||||
<!-- ═════ 03 档案填写 ═════ -->
|
||||
<!-- ═════ 03 档案填写 —— 对照 H5 index.html #s-profile(L61-108) + #p-photoguide(L311-327) ═════ -->
|
||||
<view class="profile">
|
||||
<!-- H5 .profile-bg -->
|
||||
<image class="profile-bg" src="{{bgUrl}}" mode="aspectFill" />
|
||||
|
||||
<!-- H5 .profile-body -->
|
||||
<view class="profile-body">
|
||||
<view class="page-title">您的肌肤状态</view>
|
||||
|
||||
<!-- 出生年月 + 性别(原生 picker 底部滚轮) -->
|
||||
<view class="form-row">
|
||||
<view class="field field-half">
|
||||
<!-- H5 .form-row.two:出生年月 + 性别 -->
|
||||
<view class="form-row two">
|
||||
<view class="field">
|
||||
<view class="field-label">您的出生年月</view>
|
||||
<view onTap="onOpenBirth">
|
||||
<view class="pick">
|
||||
<text class="pick-value">{{birthText}}</text>
|
||||
<text class="chev">⌄</text>
|
||||
</view>
|
||||
<view class="pick" onTap="onOpenBirth">
|
||||
<text class="pick-value">{{birthText}}</text>
|
||||
<view class="chev down"></view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="field field-half">
|
||||
<view class="field">
|
||||
<view class="field-label">您的性别</view>
|
||||
<picker mode="selector" range="{{genderRange}}" onChange="onGenderChange">
|
||||
<picker class="pick-host" mode="selector" range="{{genderRange}}" onChange="onGenderChange">
|
||||
<view class="pick">
|
||||
<text class="pick-value">{{genderText}}</text>
|
||||
<text class="chev">⌄</text>
|
||||
<view class="chev down"></view>
|
||||
</view>
|
||||
</picker>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 所在地区(省+市联动) -->
|
||||
<!-- H5 .field:所在地区 -->
|
||||
<view class="field">
|
||||
<view class="field-label">您的所在地区</view>
|
||||
<view onTap="onOpenRegion">
|
||||
<view class="pick">
|
||||
<text class="pick-value">{{regionText}}</text>
|
||||
<text class="chev">⌄</text>
|
||||
</view>
|
||||
<view class="pick" onTap="onOpenRegion">
|
||||
<text class="pick-value">{{regionText}}</text>
|
||||
<view class="chev down"></view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 日常肤质(轮播卡) -->
|
||||
<view class="field">
|
||||
<!-- H5 .field.profile-skin-field:日常肤质轮播 -->
|
||||
<view class="field profile-skin-field">
|
||||
<view class="field-label">您的日常肤质</view>
|
||||
<view class="skin-card">
|
||||
<view class="skin-axis">
|
||||
<text class="axis-item"><text class="chip chip-dry"></text>偏干</text>
|
||||
<text class="axis-item"><text class="chip chip-oily"></text>偏油</text>
|
||||
<text class="axis-item"><text class="chip chip-balance"></text>水油平衡</text>
|
||||
<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" onTap="onSkinPrev">‹</view>
|
||||
<swiper class="skin-swiper" current="{{skinIndex}}" onChange="onSkinChange" circular="{{false}}">
|
||||
<swiper-item a:for="{{skins}}" a:key="name">
|
||||
<view class="skin-item">
|
||||
<image src="{{item.img}}" class="skin-img" mode="aspectFit" lazy-load />
|
||||
<view class="skin-name">{{item.name}}</view>
|
||||
<view class="skin-desc">{{item.desc}}</view>
|
||||
<view class="skin-arrow prev {{skinIndex === 0 ? 'disabled' : ''}}" onTap="onSkinPrev">
|
||||
<view class="chev left"></view>
|
||||
</view>
|
||||
<view class="skin-carousel" onTouchStart="onSkinTouchStart" onTouchEnd="onSkinTouchEnd">
|
||||
<view class="skin-track" style="transform: translateX(-{{skinPercent}}%);">
|
||||
<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>
|
||||
</swiper-item>
|
||||
</swiper>
|
||||
<view class="skin-arrow" onTap="onSkinNext">›</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="skin-arrow next {{skinIndex === skinLastIndex ? 'disabled' : ''}}" onTap="onSkinNext">
|
||||
<view class="chev right"></view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="skin-dots">
|
||||
<text a:for="{{skins}}" a:key="name" class="dot {{index === skinIndex ? 'on' : ''}}"></text>
|
||||
<view a:for="{{skins}}" a:key="name" class="dot {{index === skinIndex ? 'on' : ''}}"></view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<button class="btn-primary btn-submit" onTap="onSubmit">提交</button>
|
||||
<button class="btn-primary btn-submit" hover-class="btn-press" onTap="onSubmit">提交</button>
|
||||
</view>
|
||||
|
||||
<!-- ═══ 弹窗:拍照引导 ═══ -->
|
||||
<view class="overlay" a:if="{{showGuide}}" onTap="onCloseGuide">
|
||||
<view class="popup" catchTap="noop">
|
||||
<button class="popup-close" onTap="onCloseGuide">✕</button>
|
||||
<view class="popup-title">
|
||||
<text>请拍摄或上传</text>
|
||||
<text>正面及左右侧面照片</text>
|
||||
</view>
|
||||
<button class="btn-primary popup-btn" onTap="onStartCamera">开始</button>
|
||||
</view>
|
||||
</view>
|
||||
<view class="overlay" a:if="{{picker}}" onTap="onPickerClose">
|
||||
<!-- ═══ 弹层:出生年月/地区滚轮(保留现有 picker-view 自绘实现,仅统一外观) ═══ -->
|
||||
<view class="overlay overlay-sheet" a:if="{{picker}}" onTap="onPickerClose">
|
||||
<view class="picker-sheet" catchTap="noop">
|
||||
<view class="picker-actions"><text onTap="onPickerClose">取消</text><text onTap="onPickerConfirm">确定</text></view>
|
||||
<picker-view value="{{pickerValue}}" onChange="onPickerChange" class="native-picker">
|
||||
<picker-view-column><view a:for="{{picker === 'birth' ? birthRange[0] : regionRange[0]}}" a:key="*this">{{item}}</view></picker-view-column>
|
||||
<picker-view-column><view a:for="{{picker === 'birth' ? birthRange[1] : regionRange[1]}}" a:key="*this">{{item}}</view></picker-view-column>
|
||||
<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 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}}" 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>
|
||||
|
||||
@@ -1,11 +1,13 @@
|
||||
/* ═════ 档案填写页:出生年月/性别/地区(原生 picker)+ 日常肤质选择(对齐 H5 #s-profile) ═════
|
||||
* 档案字段与 H5 一致:{ real_age, gender, region, daily_skin_type } */
|
||||
/* ═════ 档案填写页:出生年月/性别/地区 + 日常肤质轮播 → 拍照
|
||||
对照 H5 index.html #s-profile(L61-108)、#p-photoguide(L311-327)
|
||||
档案字段与 H5 一致:{ real_age, gender, region, daily_skin_type }
|
||||
选择器弹层保持现有实现(自绘 picker-view 滚轮 + 原生 selector),只调整触发控件外观。 ═════ */
|
||||
var api = require('../../utils/api.js');
|
||||
var REGION_DATA = require('../../utils/region-data.js');
|
||||
|
||||
// 肤质选项(与 H5 SKINS 一致,图片远程加载)
|
||||
// 肤质选项(与 H5 SKINS 一致,图片远程加载;第一条描述在 H5 里含 <br>,拆成两行)
|
||||
var SKINS = [
|
||||
{ img: 'img/ui-20261009/skin-0-dry.png', name: '干性肌肤', desc: '全脸干燥，容易紧绷、缺乏光泽' },
|
||||
{ img: 'img/ui-20261009/skin-0-dry.png', name: '干性肌肤', desc: '全脸干燥，容易紧绷、', desc2: '缺乏光泽' },
|
||||
{ img: 'img/ui-20261009/skin-1-mixeddry.png', name: '混合偏干肌肤', desc: '两颊偏干，T区油脂较少或偶尔出油' },
|
||||
{ img: 'img/ui-20261009/skin-2-neutral.png', name: '中性肌肤', desc: '水油平衡，肤感舒适，无明显干燥出油' },
|
||||
{ img: 'img/ui-20261009/skin-3-oily.png', name: '油性肌肤', desc: '全脸易出油，容易泛油光、毛孔明显' },
|
||||
@@ -21,7 +23,10 @@ function ageFromBirth(y, m) { return NOW_Y - y - (NOW_M < m ? 1 : 0); } // 未
|
||||
|
||||
Page({
|
||||
data: {
|
||||
bgUrl: api.assetUrl('img/bg-splash.jpg'),
|
||||
bgUrl: api.assetUrl('img/ui-20261009/bg-profile-h5.jpg'),
|
||||
guideBgUrl: api.assetUrl('img/ui-20261009/bg-splash-h5.jpg'),
|
||||
sloganUrl: api.assetUrl('img/ui-20261012/splash-slogan.png'),
|
||||
closeIconUrl: api.assetUrl('img/ui-20261009/icon-close.png'),
|
||||
|
||||
// 出生年月(两列滚轮:年+月,默认 30 岁 1 月)
|
||||
birthRange: [YEARS, MONTHS],
|
||||
@@ -44,11 +49,14 @@ Page({
|
||||
|
||||
// 肤质轮播
|
||||
skins: SKINS.map(function (s) {
|
||||
return { img: api.assetUrl(s.img), name: s.name, desc: s.desc };
|
||||
return { img: api.assetUrl(s.img), name: s.name, desc: s.desc, desc2: s.desc2 || '' };
|
||||
}),
|
||||
skinIndex: 0,
|
||||
skinPercent: 0,
|
||||
skinLastIndex: SKINS.length - 1,
|
||||
|
||||
showGuide: false, picker: '', pickerValue: [0, 0]
|
||||
showGuide: false, picker: '', pickerTitle: '', pickerValue: [0, 0],
|
||||
toastText: '', toastOn: false
|
||||
},
|
||||
onLoad: function () {
|
||||
if (!api.user()) { my.redirectTo({ url: '/pages/splash/splash' }); return; }
|
||||
@@ -60,6 +68,8 @@ Page({
|
||||
this.setData(saved);
|
||||
}
|
||||
} catch (_) {}
|
||||
// H5 goSkin(0) 的等价初始化:轨道位移与当前下标同步
|
||||
this.setData({ skinIndex: this.data.skinIndex || 0, skinPercent: (this.data.skinIndex || 0) * 100 });
|
||||
},
|
||||
onShow: function () {
|
||||
if (!api.user() || this.ownerId !== api.user().id) {
|
||||
@@ -67,11 +77,25 @@ Page({
|
||||
my.redirectTo({ url: '/pages/splash/splash' });
|
||||
}
|
||||
},
|
||||
onOpenBirth: function () { this.setData({ picker: 'birth', pickerValue: this.data.birthIndex.slice() }); },
|
||||
|
||||
// H5 .toast
|
||||
toast: function (msg) {
|
||||
var that = this;
|
||||
this.setData({ toastText: msg, toastOn: true });
|
||||
clearTimeout(this.toastTimer);
|
||||
this.toastTimer = setTimeout(function () {
|
||||
that.setData({ toastOn: false });
|
||||
}, Math.max(1800, String(msg).length * 130));
|
||||
},
|
||||
|
||||
onOpenBirth: function () {
|
||||
// H5 的 mobile-select title 为「出生年月」/「所在地区」
|
||||
this.setData({ picker: 'birth', pickerTitle: '出生年月', pickerValue: this.data.birthIndex.slice() });
|
||||
},
|
||||
onOpenRegion: function () {
|
||||
var index = this.data.regionIndex.slice();
|
||||
// A canceled draft may have changed the cities while the saved province stayed put.
|
||||
this.setData({ picker: 'region', pickerValue: index,
|
||||
this.setData({ picker: 'region', pickerTitle: '所在地区', pickerValue: index,
|
||||
regionRange: [REGION_DATA.map(function (p) { return p[0]; }), REGION_DATA[index[0]][1]] });
|
||||
},
|
||||
onPickerChange: function (e) {
|
||||
@@ -91,13 +115,13 @@ Page({
|
||||
/* ─── 出生年月 ─── */
|
||||
onBirthChange: function (e) {
|
||||
var idx = e.detail.value;
|
||||
var y = parseInt(YEARS[idx[0]], 10);
|
||||
var m = idx[1] + 1;
|
||||
var yv = parseInt(YEARS[idx[0]], 10);
|
||||
var mv = idx[1] + 1;
|
||||
this.setData({
|
||||
birthIndex: idx,
|
||||
birthText: y + '年' + m + '月',
|
||||
birth: y + '-' + (m < 10 ? '0' : '') + m,
|
||||
age: ageFromBirth(y, m)
|
||||
birthText: yv + '年' + mv + '月',
|
||||
birth: yv + '-' + (mv < 10 ? '0' : '') + mv,
|
||||
age: ageFromBirth(yv, mv)
|
||||
});
|
||||
},
|
||||
|
||||
@@ -121,30 +145,39 @@ Page({
|
||||
this.setData({ regionIndex: idx, regionText: text });
|
||||
},
|
||||
|
||||
/* ─── 肤质轮播 ─── */
|
||||
onSkinChange: function (e) {
|
||||
this.setData({ skinIndex: e.detail.current });
|
||||
/* ─── 肤质轮播(H5 goSkin 的等价实现:轨道 translateX) ─── */
|
||||
applySkin: function (index) {
|
||||
var i = Math.max(0, Math.min(SKINS.length - 1, index));
|
||||
this.setData({ skinIndex: i, skinPercent: i * 100 });
|
||||
},
|
||||
onSkinPrev: function () {
|
||||
if (this.data.skinIndex > 0) this.setData({ skinIndex: this.data.skinIndex - 1 });
|
||||
onSkinPrev: function () { this.applySkin(this.data.skinIndex - 1); },
|
||||
onSkinNext: function () { this.applySkin(this.data.skinIndex + 1); },
|
||||
onSkinTouchStart: function (e) {
|
||||
var t = (e.changedTouches || e.touches || [])[0];
|
||||
this.touchX = t ? (t.clientX != null ? t.clientX : t.pageX) : 0;
|
||||
},
|
||||
onSkinNext: function () {
|
||||
if (this.data.skinIndex < SKINS.length - 1) this.setData({ skinIndex: this.data.skinIndex + 1 });
|
||||
onSkinTouchEnd: function (e) {
|
||||
var t = (e.changedTouches || e.touches || [])[0];
|
||||
if (!t) return;
|
||||
var x = t.clientX != null ? t.clientX : t.pageX;
|
||||
var dx = x - (this.touchX || 0);
|
||||
if (Math.abs(dx) < 40) return;
|
||||
this.applySkin(this.data.skinIndex + (dx < 0 ? 1 : -1));
|
||||
},
|
||||
|
||||
/* ─── 提交 → 拍照引导弹窗 ─── */
|
||||
/* ─── 提交 → 拍照引导弹窗(H5 data-action="submit-profile") ─── */
|
||||
onSubmit: function () {
|
||||
var d = this.data;
|
||||
if (!d.birth || !(d.age >= 1 && d.age <= 99)) {
|
||||
my.showToast({ content: '请选择出生年月', type: 'none' });
|
||||
this.toast('请选择出生年月');
|
||||
return;
|
||||
}
|
||||
if (!d.genderText) {
|
||||
my.showToast({ content: '请选择性别', type: 'none' });
|
||||
this.toast('请选择性别');
|
||||
return;
|
||||
}
|
||||
if (!d.regionText) {
|
||||
my.showToast({ content: '请选择所在地区', type: 'none' });
|
||||
this.toast('请选择所在地区');
|
||||
return;
|
||||
}
|
||||
this.setData({ showGuide: true });
|
||||
@@ -154,7 +187,7 @@ Page({
|
||||
this.setData({ showGuide: false });
|
||||
},
|
||||
|
||||
// 「开始」:档案入全局态,进入拍照页
|
||||
// H5 data-action="start-camera":档案入全局态,进入拍照页
|
||||
onStartCamera: function () {
|
||||
if (!api.user()) { my.redirectTo({ url: '/pages/splash/splash' }); return; }
|
||||
var d = this.data;
|
||||
|
||||
Reference in New Issue
Block a user