Files
sundynix-pets/pets-fe/pages/mine/mine.wxml
T
Blizzard 1584aabcc5 feat(fe): Phase D —— 主页装扮,「我的」和「宠友主页」共用一套渲染
## profile-head 组件
头图 / 头像 / 昵称 / 签名 / 帖子关注粉丝 / 养宠数据 / 宠物名片墙,
pages/mine 和 pages/user 用的是同一个组件、同一个接口
(GET /users/:id/profile)。

这件事必须一开始就做对:自己看和别人看要是两套渲染,会慢慢长歪,
装扮功能也就失去意义了——你调半天颜色,结果只有自己那页变了。
两边唯一的差别是底部按钮:自己看是「装扮我的主页」,别人看是「关注 TA」。

顺带把 mine 的头部从 /user/summary 切到了 /users/:id/profile。原来两边
字段对不上,装扮效果在「我的」页根本预览不到。

主题只在组件 wxss 里定义 --pf-a/--pf-b/--pf-ink 三个变量,下面所有着色
都走变量。后端存 key 不存色值,就是为了这套配色随时能在前端改。

## pages/decorate 装扮页
头图上传 / 五套主题色 / 个性签名 60 字 / 宠物墙开关,顶部实时预览。

预览用的就是 profile-head 本身,不是仿一个——仿的迟早会和真的长得不一样。
喂给它一份改过的 card 就行,组件那边不需要知道自己在被预览。

头图有个坑单独处理了:bg_file_id 只在真动过的时候才传。新上传带新 id,
点「恢复默认渐变」带空串,都没动就不传字段。否则「只改个主题色」会把
已有头图冲掉。上传时先用本地临时路径顶上,不让用户对着转圈等。

联调验证(本地 9090,真上传了一张图走完存储链路):
  上传             → file id + MinIO url
  保存装扮          → bg_url 落库,主题 violet,签名落库
  主页读回          → bio/theme/show_pets/bg_url/宠物墙/养宠数据 全对
  只改主题          → theme 变 sky,头图还在(没被冲掉)
  恢复默认渐变       → bg_url 清空,theme 和 bio 都没被动
  别人视角          → is_self=false、followed=false,装扮和宠物墙都能看到

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
2026-07-29 18:02:07 +08:00

55 lines
2.7 KiB
Plaintext
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<nav-bar title="我的"></nav-bar>
<scroll-view class="page-scroll" scroll-y="{{true}}" enhanced="{{true}}" show-scrollbar="{{false}}">
<view class="page-body">
<!-- 和「宠友主页」同一个组件。自己看到的就是别人看到的,装扮才有意义 -->
<profile-head card="{{card}}" bind:relations="goRelations"
bind:decorate="goDecorate" bind:pet="onPickPet"></profile-head>
<view class="btn btn-ghost btn-block me-preview" bindtap="previewPublic">
<pt-icon name="user" size="{{30}}"></pt-icon>看看别人眼里的我
</view>
<!-- 我的毛孩子 -->
<view class="card">
<view class="section-head">
<view class="sh-title">我的毛孩子</view>
<view class="link" bindtap="onAddPet"> 添加</view>
</view>
<view wx:for="{{pets}}" wx:key="id" class="pet-row" data-id="{{item.id}}" bindtap="onPickPet">
<view class="pet-emoji">{{item.emoji}}</view>
<view class="pet-info">
<view class="tt-b">{{item.name}}</view>
<view class="tt-p">{{item.age}}{{item.weight}}{{item.stage}}</view>
</view>
<view class="pr-arrow"><pt-icon name="next" size="{{28}}"></pt-icon></view>
</view>
<view wx:if="{{!pets.length}}" class="empty">还没有毛孩子,先建一份档案</view>
</view>
<!-- 常用入口。设置类的都收进设置页了,这里只留高频的 -->
<view class="profile-list">
<view class="profile-row" data-type="editPet" bindtap="openSheet">
<view class="pr-ic"><pt-icon name="user" size="{{34}}"></pt-icon></view>
<text class="pr-label">宠物档案</text><view class="pr-arrow"><pt-icon name="next" size="{{28}}"></pt-icon></view>
</view>
<view class="profile-row" bindtap="goPlan">
<view class="pr-ic"><pt-icon name="plan" size="{{34}}"></pt-icon></view>
<text class="pr-label">养护计划</text><view class="pr-arrow"><pt-icon name="next" size="{{28}}"></pt-icon></view>
</view>
<view class="profile-row" data-type="managePets" bindtap="openSheet">
<view class="pr-ic"><pt-icon name="community" size="{{34}}"></pt-icon></view>
<text class="pr-label">多宠物管理</text><text class="pr-val">{{card.stats.pet_count || 0}} 只</text>
<view class="pr-arrow"><pt-icon name="next" size="{{28}}"></pt-icon></view>
</view>
<view class="profile-row" bindtap="goSettings">
<view class="pr-ic"><pt-icon name="settings" size="{{34}}"></pt-icon></view>
<text class="pr-label">设置</text><view class="pr-arrow"><pt-icon name="next" size="{{28}}"></pt-icon></view>
</view>
</view>
</view>
</scroll-view>
<fab bind:tap="onFab"></fab>
<bottom-sheet show="{{sheetShow}}" type="{{sheetType}}" bind:close="closeSheet"></bottom-sheet>