upload project
This commit is contained in:
commit
06961cae04
422 changed files with 110626 additions and 0 deletions
193
pages/user-profile/user-profile.wxml
Normal file
193
pages/user-profile/user-profile.wxml
Normal file
|
|
@ -0,0 +1,193 @@
|
|||
<view class="user-profile-page">
|
||||
<!-- 顶部导航栏 -->
|
||||
<view class="nav-bar" style="height: {{navBarHeight}}px; padding-top: {{statusBarHeight}}px;">
|
||||
<view class="nav-left" bindtap="onBack">
|
||||
<image class="back-icon" src="/images/back.png" mode="aspectFit"></image>
|
||||
</view>
|
||||
<view class="nav-title">个人资料</view>
|
||||
<view class="nav-right"></view>
|
||||
</view>
|
||||
|
||||
<!-- 加载状态 -->
|
||||
<view class="loading-container" wx:if="{{loading}}">
|
||||
<image class="loading-img" src="/images/loading.png" mode="aspectFit"></image>
|
||||
<text class="loading-text">加载中...</text>
|
||||
</view>
|
||||
|
||||
<!-- 错误状态 -->
|
||||
<view class="error-container" wx:elif="{{error}}">
|
||||
<image class="error-img" src="/images/error.png" mode="aspectFit"></image>
|
||||
<text class="error-text">{{error}}</text>
|
||||
<button class="retry-btn" bindtap="loadUserProfile">重试</button>
|
||||
</view>
|
||||
|
||||
<!-- 用户资料内容 -->
|
||||
<view class="profile-content" wx:else>
|
||||
<!-- 封面区域 -->
|
||||
<view class="cover-section">
|
||||
<image class="cover-image" src="{{userInfo.coverImage || '/images/default-cover.png'}}" mode="aspectFill"></image>
|
||||
</view>
|
||||
|
||||
<!-- 用户基本信息区域 -->
|
||||
<view class="user-info-section">
|
||||
<!-- 头像和昵称信息 -->
|
||||
<view class="avatar-info">
|
||||
<image class="user-avatar" src="{{userInfo.avatar}}" mode="aspectFill"></image>
|
||||
<view class="user-basic-info">
|
||||
<text class="user-nickname">{{userInfo.nickname}}</text>
|
||||
<text class="user-id">ID: {{userInfo.customId}}</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 操作按钮区域 -->
|
||||
<view class="action-buttons">
|
||||
<!-- 非当前用户显示的操作按钮 -->
|
||||
<block wx:if="{{!isCurrentUser}}">
|
||||
<!-- 好友状态下显示消息按钮 -->
|
||||
<block wx:if="{{isFriend}}">
|
||||
<button class="message-btn" type="primary" size="mini" bindtap="onSendMessage">
|
||||
<image class="btn-icon" src="/images/message.png" mode="aspectFit"></image>
|
||||
<text class="btn-text">发消息</text>
|
||||
</button>
|
||||
</block>
|
||||
<!-- 非好友状态下显示添加好友按钮 -->
|
||||
<block wx:elif="{{!isFriend}}">
|
||||
<button class="add-friend-btn" type="primary" size="mini" bindtap="onAddFriend">
|
||||
<image class="btn-icon" src="/images/add-friend.png" mode="aspectFit"></image>
|
||||
<text class="btn-text">加好友</text>
|
||||
</button>
|
||||
</block>
|
||||
<!-- 关注/取消关注按钮 -->
|
||||
<button class="follow-btn" type="default" size="mini" bindtap="onFollowToggle">
|
||||
<text class="btn-text">{{isFollowing ? '已关注' : '关注'}}</text>
|
||||
</button>
|
||||
</block>
|
||||
<!-- 当前用户显示编辑资料按钮 -->
|
||||
<block wx:elif="{{isCurrentUser}}">
|
||||
<button class="edit-btn" type="primary" size="mini">
|
||||
<image class="btn-icon" src="/images/edit.png" mode="aspectFit"></image>
|
||||
<text class="btn-text">编辑资料</text>
|
||||
</button>
|
||||
</block>
|
||||
</view>
|
||||
|
||||
<!-- 用户个人简介 -->
|
||||
<view class="user-intro" wx:if="{{userInfo.bio}}">
|
||||
<text class="intro-text">{{userInfo.bio}}</text>
|
||||
</view>
|
||||
|
||||
<!-- 用户基本信息详情 -->
|
||||
<view class="user-details">
|
||||
<view class="detail-item">
|
||||
<text class="detail-label">性别</text>
|
||||
<text class="detail-value">{{userInfo.formattedGender}}</text>
|
||||
</view>
|
||||
<view class="detail-item">
|
||||
<text class="detail-label">地区</text>
|
||||
<text class="detail-value">{{userInfo.formattedLocation}}</text>
|
||||
</view>
|
||||
<view class="detail-item">
|
||||
<text class="detail-label">生日</text>
|
||||
<text class="detail-value">{{userInfo.birthday || '未设置'}}</text>
|
||||
</view>
|
||||
<view class="detail-item">
|
||||
<text class="detail-label">星座</text>
|
||||
<text class="detail-value">{{userInfo.constellation || '未设置'}}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 统计数据区域 -->
|
||||
<view class="stats-section">
|
||||
<view class="stat-item">
|
||||
<text class="stat-number">{{stats.friendsCount}}</text>
|
||||
<text class="stat-label">好友</text>
|
||||
</view>
|
||||
<view class="stat-divider"></view>
|
||||
<view class="stat-item">
|
||||
<text class="stat-number">{{stats.postsCount}}</text>
|
||||
<text class="stat-label">动态</text>
|
||||
</view>
|
||||
<view class="stat-divider"></view>
|
||||
<view class="stat-item">
|
||||
<text class="stat-number">{{stats.likesCount}}</text>
|
||||
<text class="stat-label">获赞</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 动态列表标题 -->
|
||||
<view class="feed-section-header">
|
||||
<text class="section-title">TA的动态</text>
|
||||
</view>
|
||||
|
||||
<!-- 动态列表区域 -->
|
||||
<view class="feed-section">
|
||||
<!-- 动态项 -->
|
||||
<view class="feed-item" wx:for="{{feedList}}" wx:key="id" data-feed-index="{{index}}" bindtap="onFeedTap">
|
||||
<!-- 动态内容 -->
|
||||
<view class="feed-content" wx:if="{{item.content}}">
|
||||
<text class="content-text">{{item.content}}</text>
|
||||
</view>
|
||||
|
||||
<!-- 动态媒体（图片） -->
|
||||
<view class="feed-media" wx:if="{{item.imageMedia && item.imageMedia.length > 0}}">
|
||||
<!-- 最多3张图的网格 -->
|
||||
<view class="media-grid" wx:if="{{item.imageMedia.length <= 3}}">
|
||||
<image
|
||||
wx:for="{{item.imageMedia}}"
|
||||
wx:for-item="mediaItem"
|
||||
wx:for-index="imgIndex"
|
||||
wx:key="imgIndex"
|
||||
class="media-image small"
|
||||
src="{{mediaItem.url}}"
|
||||
mode="aspectFill"
|
||||
data-index="{{imgIndex}}"
|
||||
data-feed-index="{{index}}"
|
||||
bindtap="onImageTap"
|
||||
></image>
|
||||
</view>
|
||||
|
||||
<!-- 超过3张图的网格 -->
|
||||
<view class="media-grid" wx:else>
|
||||
<view class="media-row" wx:for="{{item.imageRowCount}}" wx:for-item="row" wx:for-index="rowIndex" wx:key="rowIndex">
|
||||
<image
|
||||
wx:for="{{item.imageMedia}}"
|
||||
wx:for-item="mediaItem"
|
||||
wx:for-index="mediaIndex"
|
||||
wx:key="mediaIndex"
|
||||
wx:if="{{mediaIndex >= rowIndex * 3 && mediaIndex < (rowIndex + 1) * 3}}"
|
||||
class="media-image grid"
|
||||
src="{{mediaItem.url}}"
|
||||
mode="aspectFill"
|
||||
data-index="{{mediaIndex}}"
|
||||
data-feed-index="{{index}}"
|
||||
bindtap="onImageTap"
|
||||
></image>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 动态时间 -->
|
||||
<view class="feed-footer">
|
||||
<text class="feed-time">{{item.formattedTime}}</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 无动态提示 -->
|
||||
<view class="no-feeds" wx:if="{{feedList.length === 0}}">
|
||||
<image class="no-feeds-img" src="/images/no-content.png" mode="aspectFit"></image>
|
||||
<text class="no-feeds-text">暂无动态</text>
|
||||
</view>
|
||||
|
||||
<!-- 加载更多提示 -->
|
||||
<view class="loading-more" wx:if="{{loadingMore}}">
|
||||
<text class="loading-more-text">加载更多...</text>
|
||||
</view>
|
||||
|
||||
<!-- 没有更多数据提示 -->
|
||||
<view class="no-more" wx:if="{{!hasMoreData && feedList.length > 0}}">
|
||||
<text class="no-more-text">没有更多了</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
Loading…
Add table
Add a link
Reference in a new issue