Initial commit
This commit is contained in:
1
miniprogram/pages/pet-detail/pet-detail.json
Normal file
1
miniprogram/pages/pet-detail/pet-detail.json
Normal file
@@ -0,0 +1 @@
|
||||
{ "navigationStyle": "custom", "usingComponents": { "post-card": "/components/post-card/post-card" } }
|
||||
78
miniprogram/pages/pet-detail/pet-detail.ts
Normal file
78
miniprogram/pages/pet-detail/pet-detail.ts
Normal file
@@ -0,0 +1,78 @@
|
||||
import { api } from '../../utils/api'
|
||||
import { getAvatarGradient, getPetEmoji } from '../../utils/format'
|
||||
|
||||
const app = getApp<{ userInfo: any }>()
|
||||
|
||||
Page({
|
||||
data: {
|
||||
statusBarHeight: 0,
|
||||
userId: '',
|
||||
user: {} as any,
|
||||
posts: [] as any[],
|
||||
avatarGradient: '',
|
||||
isMe: false,
|
||||
isFollowing: false,
|
||||
loading: false,
|
||||
},
|
||||
|
||||
onLoad(query: { userId?: string }) {
|
||||
const info = wx.getSystemInfoSync()
|
||||
this.setData({ statusBarHeight: info.statusBarHeight })
|
||||
|
||||
const userId = query.userId || ''
|
||||
const myId = app.globalData?.userInfo?._id || ''
|
||||
this.setData({ userId, isMe: userId === myId })
|
||||
this.loadUser(userId)
|
||||
},
|
||||
|
||||
async loadUser(userId: string) {
|
||||
this.setData({ loading: true })
|
||||
try {
|
||||
const [user, postsRes] = await Promise.all([
|
||||
api.getUserProfile(userId),
|
||||
api.getUserPosts(userId),
|
||||
])
|
||||
const enrichedPets = (user.pets || []).map((p: any) => ({
|
||||
...p,
|
||||
emoji: getPetEmoji(p.species, p.breed),
|
||||
}))
|
||||
this.setData({
|
||||
user: { ...user, pets: enrichedPets },
|
||||
avatarGradient: getAvatarGradient(userId),
|
||||
posts: postsRes.list,
|
||||
})
|
||||
} catch {
|
||||
wx.showToast({ title: '加载失败', icon: 'none' })
|
||||
} finally {
|
||||
this.setData({ loading: false })
|
||||
}
|
||||
},
|
||||
|
||||
async onFollow() {
|
||||
try {
|
||||
const res = await api.followUser(this.data.userId)
|
||||
this.setData({ isFollowing: res.following })
|
||||
} catch {
|
||||
wx.showToast({ title: '操作失败', icon: 'none' })
|
||||
}
|
||||
},
|
||||
|
||||
onMessage() {
|
||||
wx.navigateTo({ url: `/pages/chat/chat?userId=${this.data.userId}` })
|
||||
},
|
||||
|
||||
onBack() {
|
||||
wx.navigateBack()
|
||||
},
|
||||
|
||||
onMore() {
|
||||
wx.showActionSheet({
|
||||
itemList: ['举报', '拉黑'],
|
||||
success: res => {
|
||||
if (res.tapIndex === 0) {
|
||||
wx.showToast({ title: '已提交举报', icon: 'success' })
|
||||
}
|
||||
},
|
||||
})
|
||||
},
|
||||
})
|
||||
65
miniprogram/pages/pet-detail/pet-detail.wxml
Normal file
65
miniprogram/pages/pet-detail/pet-detail.wxml
Normal file
@@ -0,0 +1,65 @@
|
||||
<view class="detail-page">
|
||||
<view class="safe-top" style="height: {{statusBarHeight}}px"></view>
|
||||
|
||||
<!-- 顶部导航 -->
|
||||
<view class="detail-nav">
|
||||
<view class="nav-back" bindtap="onBack">‹</view>
|
||||
<view class="nav-title">{{user.nickName || '宠物主页'}}</view>
|
||||
<view class="nav-more" bindtap="onMore">⋯</view>
|
||||
</view>
|
||||
|
||||
<scroll-view scroll-y="true" class="detail-scroll" enhanced="true" show-scrollbar="false">
|
||||
<!-- 用户卡片 -->
|
||||
<view class="user-card">
|
||||
<view class="card-top">
|
||||
<view class="card-avatar" style="background: {{avatarGradient}}">
|
||||
<text>{{user.nickName ? user.nickName[0] : '?'}}</text>
|
||||
</view>
|
||||
<view class="card-meta">
|
||||
<text class="card-name">{{user.nickName}}</text>
|
||||
<text class="card-location">📍 {{user.location || '未知位置'}}</text>
|
||||
<text class="card-bio">{{user.bio || '还没有介绍~'}}</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 宠物列表 -->
|
||||
<view wx:if="{{user.pets && user.pets.length > 0}}" class="pets-row">
|
||||
<view
|
||||
wx:for="{{user.pets}}"
|
||||
wx:key="_id"
|
||||
class="pet-chip"
|
||||
>
|
||||
<text class="chip-emoji">{{item.emoji}}</text>
|
||||
<view class="chip-info">
|
||||
<text class="chip-name">{{item.name}}</text>
|
||||
<text class="chip-breed">{{item.breed}} · {{item.age}}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 操作按钮 -->
|
||||
<view wx:if="{{!isMe}}" class="action-row">
|
||||
<view
|
||||
class="follow-action {{isFollowing ? 'following' : ''}}"
|
||||
bindtap="onFollow"
|
||||
>
|
||||
{{isFollowing ? '✓ 已关注' : '+ 关注'}}
|
||||
</view>
|
||||
<view class="msg-action" bindtap="onMessage">💬 发消息</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 帖子 -->
|
||||
<view class="posts-section">
|
||||
<view class="section-hd">
|
||||
<text class="section-title">TA 的动态</text>
|
||||
</view>
|
||||
<post-card wx:for="{{posts}}" wx:key="_id" post="{{item}}" />
|
||||
<view wx:if="{{!loading && posts.length === 0}}" class="empty-posts">
|
||||
<text>还没有发布过动态</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view style="height: 60rpx;"></view>
|
||||
</scroll-view>
|
||||
</view>
|
||||
29
miniprogram/pages/pet-detail/pet-detail.wxss
Normal file
29
miniprogram/pages/pet-detail/pet-detail.wxss
Normal file
@@ -0,0 +1,29 @@
|
||||
.detail-page { min-height: 100vh; background: linear-gradient(180deg, #fff8f2 0%, #f5f0ff 100%); }
|
||||
.detail-nav { display: flex; align-items: center; padding: 16rpx 28rpx; gap: 16rpx; }
|
||||
.nav-back { font-size: 60rpx; color: #272235; font-weight: 300; padding: 0 10rpx; line-height: 1; }
|
||||
.nav-title { flex: 1; font-size: 32rpx; font-weight: 900; color: #272235; text-align: center; }
|
||||
.nav-more { font-size: 36rpx; color: #9b8fa8; padding: 0 10rpx; }
|
||||
.detail-scroll { min-height: 80vh; }
|
||||
|
||||
.user-card { margin: 0 28rpx 28rpx; background: rgba(255,255,255,0.88); border-radius: 48rpx; border: 1rpx solid rgba(255,255,255,0.72); padding: 28rpx; box-shadow: 0 18rpx 40rpx rgba(95,49,104,0.12); }
|
||||
.card-top { display: flex; gap: 24rpx; margin-bottom: 24rpx; }
|
||||
.card-avatar { width: 120rpx; height: 120rpx; border-radius: 36rpx; display: flex; align-items: center; justify-content: center; font-size: 52rpx; font-weight: 800; color: rgba(39,34,53,0.72); flex-shrink: 0; }
|
||||
.card-meta { flex: 1; }
|
||||
.card-name { display: block; font-size: 34rpx; font-weight: 900; color: #272235; margin-bottom: 8rpx; }
|
||||
.card-location { display: block; font-size: 24rpx; color: #9b8fa8; margin-bottom: 10rpx; }
|
||||
.card-bio { display: block; font-size: 26rpx; color: #6a6178; line-height: 1.5; }
|
||||
|
||||
.pets-row { display: flex; gap: 16rpx; flex-wrap: wrap; margin-bottom: 24rpx; }
|
||||
.pet-chip { display: flex; align-items: center; gap: 12rpx; background: linear-gradient(135deg, rgba(255,255,255,0.8), rgba(201,247,223,0.6)); border: 1rpx solid rgba(255,255,255,0.72); border-radius: 24rpx; padding: 16rpx 20rpx; }
|
||||
.chip-emoji { font-size: 36rpx; }
|
||||
.chip-name { display: block; font-size: 26rpx; font-weight: 800; color: #272235; }
|
||||
.chip-breed { display: block; font-size: 22rpx; color: #9b8fa8; }
|
||||
|
||||
.action-row { display: flex; gap: 16rpx; }
|
||||
.follow-action { flex: 1; background: linear-gradient(135deg, #ff4f91, #ff9f1c); color: #fff; border-radius: 999rpx; padding: 20rpx; text-align: center; font-size: 28rpx; font-weight: 800; box-shadow: 0 10rpx 22rpx rgba(255,79,145,0.28); }
|
||||
.follow-action.following { background: rgba(255,255,255,0.80); border: 1rpx solid rgba(43,37,61,0.12); color: #9b8fa8; box-shadow: none; }
|
||||
.msg-action { flex: 1; background: rgba(255,255,255,0.80); border: 1rpx solid rgba(43,37,61,0.10); border-radius: 999rpx; padding: 20rpx; text-align: center; font-size: 28rpx; font-weight: 800; color: #272235; }
|
||||
|
||||
.section-hd { padding: 20rpx 28rpx 10rpx; }
|
||||
.section-title { font-size: 26rpx; font-weight: 900; color: #9b8fa8; }
|
||||
.empty-posts { text-align: center; font-size: 26rpx; color: #9b8fa8; padding: 60rpx; }
|
||||
Reference in New Issue
Block a user