fix(fe): 修社区图片撑破网格;发帖限 3 张;上传偶发失败自动重试 #5

Merged
Blizzard merged 33 commits from feat/dev into main 2026-07-31 10:43:15 +00:00
2 changed files with 41 additions and 39 deletions
Showing only changes of commit 95471d0549 - Show all commits
+14 -16
View File
@@ -1,37 +1,35 @@
<view class="pf th-{{theme}}"> <view class="pf th-{{theme}}">
<!-- 头图。没传背景图就用主题色渐变,不留空白块 --> <!-- 头图:只有设了自定义头图才显示,没设就是干净白卡(不再留一块空色块) -->
<view class="pf-bg">
<image wx:if="{{card.bg_url}}" class="pf-bg-img" src="{{card.bg_url}}" mode="aspectFill"></image> <image wx:if="{{card.bg_url}}" class="pf-bg-img" src="{{card.bg_url}}" mode="aspectFill"></image>
</view>
<view class="pf-body"> <view class="pf-body">
<!-- 身份行:头像 + 昵称/签名,左对齐 -->
<view class="pf-top">
<view class="pf-av"> <view class="pf-av">
<image wx:if="{{card.avatar_url}}" class="pf-av-img" src="{{card.avatar_url}}" mode="aspectFill"></image> <image wx:if="{{card.avatar_url}}" class="pf-av-img" src="{{card.avatar_url}}" mode="aspectFill"></image>
<block wx:else>{{initial}}</block> <block wx:else>{{initial}}</block>
</view> </view>
<view class="pf-id">
<view class="pf-name">{{card.nickname || '毛孩子家长'}}<text wx:if="{{card.is_bot}}" class="ai-tag">AI</text></view> <view class="pf-name">{{card.nickname || '毛孩子家长'}}<text wx:if="{{card.is_bot}}" class="ai-tag">AI</text></view>
<view class="pf-bio">{{card.bio || '这个人很懒,还没写签名'}}</view> <view class="pf-bio">{{card.bio || '这个人很懒,还没写签名'}}</view>
</view>
</view>
<view class="pf-stats"> <!-- 社交数:小一行,数字+标签内联 -->
<view class="pf-social">
<view class="pf-stat"><text class="pf-n">{{card.post_count || 0}}</text><text class="pf-l">帖子</text></view> <view class="pf-stat"><text class="pf-n">{{card.post_count || 0}}</text><text class="pf-l">帖子</text></view>
<view class="pf-stat" data-kind="following" bindtap="onRelations"> <view class="pf-stat" data-kind="following" bindtap="onRelations"><text class="pf-n">{{card.following_count || 0}}</text><text class="pf-l">关注</text></view>
<text class="pf-n">{{card.following_count || 0}}</text><text class="pf-l">关注</text> <view class="pf-stat" data-kind="followers" bindtap="onRelations"><text class="pf-n">{{card.follower_count || 0}}</text><text class="pf-l">粉丝</text></view>
</view>
<view class="pf-stat" data-kind="followers" bindtap="onRelations">
<text class="pf-n">{{card.follower_count || 0}}</text><text class="pf-l">粉丝</text>
</view>
</view> </view>
<!-- 养宠数据。这是这个 App 独有的东西,比帖子数更能说明「这人是个认真的铲屎官 --> <!-- 养宠数据这个 App 独有,做成高亮带,比帖子数更能说明是个认真的铲屎官 -->
<view wx:if="{{card.stats}}" class="pf-keep"> <view wx:if="{{card.stats}}" class="pf-keep">
<view class="pf-keep-i"><text class="pf-kn">{{card.stats.days || 0}}</text><text class="pf-kl">养宠天数</text></view> <view class="pf-keep-i"><text class="pf-kn">{{card.stats.days || 0}}</text><text class="pf-kl">养宠天数</text></view>
<view class="pf-keep-i"><text class="pf-kn">{{card.stats.records || 0}}</text><text class="pf-kl">累计记录</text></view> <view class="pf-keep-i"><text class="pf-kn">{{card.stats.records || 0}}</text><text class="pf-kl">累计记录</text></view>
<view class="pf-keep-i"><text class="pf-kn">{{card.stats.streak || 0}}</text><text class="pf-kl">连续打卡</text></view> <view class="pf-keep-i"><text class="pf-kn">{{card.stats.streak || 0}}</text><text class="pf-kl">连续打卡</text></view>
</view> </view>
<!-- 宠物名片墙:给别人看的(受「展示我的毛孩子」开关控制)。「我的」页 <!-- 宠物名片墙:给别人看的(受开关控制)。「我的」页 hideWall 藏掉 -->
hideWall 把它藏掉(下面有更详细的「我的毛孩子」卡,避免重复),
别人访问 / 预览时照常显示 -->
<scroll-view wx:if="{{card.show_pets && card.pets.length && !hideWall}}" class="pf-wall" <scroll-view wx:if="{{card.show_pets && card.pets.length && !hideWall}}" class="pf-wall"
scroll-x="{{true}}" enhanced="{{true}}" show-scrollbar="{{false}}"> scroll-x="{{true}}" enhanced="{{true}}" show-scrollbar="{{false}}">
<view wx:for="{{card.pets}}" wx:key="id" class="pf-pet" data-id="{{item.id}}" bindtap="onPet"> <view wx:for="{{card.pets}}" wx:key="id" class="pf-pet" data-id="{{item.id}}" bindtap="onPet">
@@ -44,8 +42,8 @@
</view> </view>
</scroll-view> </scroll-view>
<!-- 装扮按钮挪到「我的」页和「预览」并排了,这里只留别人主页的关注键 --> <!-- 别人主页的关注键(装扮按钮挪到「我的」页 -->
<view wx:if="{{!preview && !card.is_self}}" class="btn {{card.followed ? 'btn-ghost' : 'btn-dark'}} btn-block" bindtap="onFollow"> <view wx:if="{{!preview && !card.is_self}}" class="btn {{card.followed ? 'btn-ghost' : 'btn-dark'}} btn-block pf-follow" bindtap="onFollow">
<pt-icon wx:if="{{!card.followed}}" name="plus" size="{{28}}"></pt-icon>{{card.followed ? '已关注' : '关注 TA'}} <pt-icon wx:if="{{!card.followed}}" name="plus" size="{{28}}"></pt-icon>{{card.followed ? '已关注' : '关注 TA'}}
</view> </view>
</view> </view>
+21 -17
View File
@@ -11,41 +11,43 @@
background:#fff;border-radius:var(--r-lg);overflow:hidden; background:#fff;border-radius:var(--r-lg);overflow:hidden;
box-shadow:var(--sd-1);margin-bottom:var(--sp-5); box-shadow:var(--sd-1);margin-bottom:var(--sp-5);
} }
.pf-bg{height:180rpx;background:linear-gradient(135deg,var(--pf-a),var(--pf-b))} /* 头图:设了才显示 */
.pf-bg-img{width:100%;height:100%;display:block} .pf-bg-img{width:100%;height:200rpx;display:block}
.pf-body{padding:0 var(--sp-5) var(--sp-5);text-align:center} .pf-body{padding:var(--sp-5)}
/* 头像压在头图上,负 margin 提上去一半 */
/* 身份行:头像 + 昵称/签名 左对齐 */
.pf-top{display:flex;align-items:center;gap:var(--sp-4)}
.pf-av{ .pf-av{
/* 必须定位:头像要压在头图上面,靠 DOM 顺序不够——只要头图是定位元素就会反盖过来 */ flex:none;width:120rpx;height:120rpx;border-radius:50%;
position:relative;z-index:1; background:var(--pf-b);color:var(--pf-ink);overflow:hidden;
width:144rpx;height:144rpx;margin:-72rpx auto var(--sp-3);
border-radius:50%;background:var(--pf-b);color:var(--pf-ink);
display:flex;align-items:center;justify-content:center; display:flex;align-items:center;justify-content:center;
font-size:var(--fs-xl);font-weight:var(--fw-b); font-size:var(--fs-xl);font-weight:var(--fw-b);
border:6rpx solid #fff;overflow:hidden;box-shadow:var(--sd-1);
} }
.pf-av-img{width:100%;height:100%;display:block} .pf-av-img{width:100%;height:100%;display:block}
.pf-name{font-size:var(--fs-lg);font-weight:var(--fw-b);color:var(--text)} .pf-id{flex:1;min-width:0}
.pf-name{font-size:var(--fs-xl);font-weight:var(--fw-b);color:var(--text)}
.pf-bio{ .pf-bio{
font-size:var(--fs-sm);color:var(--muted);margin-top:6rpx; font-size:var(--fs-sm);color:var(--muted);margin-top:8rpx;
line-height:1.5;word-break:break-all; line-height:1.5;word-break:break-all;
} }
.pf-stats{display:flex;margin:var(--sp-4) 0} /* 社交数:小一行,数字+标签内联,左对齐 */
.pf-stat{flex:1;display:flex;flex-direction:column;align-items:center;gap:4rpx} .pf-social{display:flex;gap:var(--sp-6);margin-top:var(--sp-4)}
.pf-n{font-size:var(--fs-lg);font-weight:var(--fw-b);color:var(--text)} .pf-stat{display:flex;align-items:baseline;gap:6rpx}
.pf-n{font-size:var(--fs-md);font-weight:var(--fw-b);color:var(--text)}
.pf-l{font-size:var(--fs-cap);color:var(--muted)} .pf-l{font-size:var(--fs-cap);color:var(--muted)}
/* 养宠数据高亮带 */
.pf-keep{ .pf-keep{
display:flex;background:var(--pf-b);border-radius:var(--r-md); display:flex;background:var(--pf-b);border-radius:var(--r-md);
padding:var(--sp-3) 0;margin-bottom:var(--sp-4); padding:var(--sp-4) 0;margin-top:var(--sp-4);
} }
.pf-keep-i{flex:1;display:flex;flex-direction:column;align-items:center;gap:2rpx} .pf-keep-i{flex:1;display:flex;flex-direction:column;align-items:center;gap:2rpx}
.pf-kn{font-size:var(--fs-md);font-weight:var(--fw-b);color:var(--pf-ink)} .pf-kn{font-size:var(--fs-lg);font-weight:var(--fw-b);color:var(--pf-ink)}
.pf-kl{font-size:var(--fs-cap);color:var(--pf-ink);opacity:.75} .pf-kl{font-size:var(--fs-cap);color:var(--pf-ink);opacity:.75}
.pf-wall{white-space:nowrap;margin-bottom:var(--sp-4)} .pf-wall{white-space:nowrap;margin-top:var(--sp-4)}
.pf-pet{ .pf-pet{
display:inline-block;width:150rpx;vertical-align:top; display:inline-block;width:150rpx;vertical-align:top;
margin-right:var(--sp-3);white-space:normal; margin-right:var(--sp-3);white-space:normal;
@@ -59,3 +61,5 @@
.pf-pet-img{width:100%;height:100%;display:block} .pf-pet-img{width:100%;height:100%;display:block}
.pf-pet-n{font-size:var(--fs-cap);font-weight:var(--fw-b);color:var(--text);text-align:center} .pf-pet-n{font-size:var(--fs-cap);font-weight:var(--fw-b);color:var(--text);text-align:center}
.pf-pet-s{font-size:var(--fs-cap);color:var(--muted);text-align:center} .pf-pet-s{font-size:var(--fs-cap);color:var(--muted);text-align:center}
.pf-follow{margin-top:var(--sp-4)}