feat: 样式修改
This commit is contained in:
Blizzard
+258
-178
@@ -1,200 +1,280 @@
|
||||
<wxs src="../../utils/tools.wxs" module="tools" />
|
||||
<view class="profile-page">
|
||||
<!-- Sub-views handled by conditional rendering to match prototype single-page feel -->
|
||||
|
||||
<!-- FAVORITES VIEW -->
|
||||
<view wx:if="{{view === 'favorites'}}" class="favorites-page info-view-anim">
|
||||
<view class="back-nav sticky-nav">
|
||||
<t-button variant="text" icon="arrow-left" bind:tap="setView" data-view="profile">我的收藏</t-button>
|
||||
</view>
|
||||
|
||||
<t-tabs value="{{favTab}}" bind:change="onFavTabChange" theme="card">
|
||||
<t-tab-panel label="全部" value="all" />
|
||||
<t-tab-panel label="植物" value="plant" />
|
||||
<t-tab-panel label="文章" value="article" />
|
||||
</t-tabs>
|
||||
|
||||
<view class="tab-content">
|
||||
<view class="fav-grid">
|
||||
<block wx:if="{{filteredFavorites.length > 0}}">
|
||||
<view wx:for="{{filteredFavorites}}" wx:key="id" class="fav-card">
|
||||
<t-image src="{{item.image}}" class="fav-img" mode="aspectFill" width="100%" height="240rpx" />
|
||||
<view class="fav-info">
|
||||
<text class="fav-name">{{item.name}}</text>
|
||||
<view class="fav-meta-row">
|
||||
<t-icon name="{{item.type === 'plant' ? 'heart' : 'book'}}" size="32rpx" color="#90A4AE" />
|
||||
<text class="fav-type">{{item.meta}}</text>
|
||||
</view>
|
||||
<!-- ======== FAVORITES VIEW ======== -->
|
||||
<view wx:if="{{view === 'favorites'}}" class="sub-view info-view-anim">
|
||||
<view class="sub-nav" bindtap="goBack">
|
||||
<t-icon name="chevron-left" size="40rpx" />
|
||||
<text class="sub-nav-title">我的收藏</text>
|
||||
</view>
|
||||
|
||||
<view class="category-filter">
|
||||
<view class="filter-chip {{favTab === 'all' ? 'active' : ''}}" bindtap="onFavTabChange" data-value="all">全部</view>
|
||||
<view class="filter-chip {{favTab === 'plant' ? 'active' : ''}}" bindtap="onFavTabChange" data-value="plant">植物</view>
|
||||
<view class="filter-chip {{favTab === 'article' ? 'active' : ''}}" bindtap="onFavTabChange" data-value="article">文章</view>
|
||||
</view>
|
||||
|
||||
<scroll-view scroll-y class="sub-scroll">
|
||||
<view wx:if="{{filteredFavorites.length > 0}}" class="fav-grid">
|
||||
<view wx:for="{{filteredFavorites}}" wx:key="id" class="fav-card">
|
||||
<t-image src="{{item.image}}" mode="aspectFill" width="100%" height="240rpx" class="fav-img" />
|
||||
<view class="fav-info">
|
||||
<text class="fav-name">{{item.name}}</text>
|
||||
<view class="fav-meta-row">
|
||||
<t-icon name="{{item.type === 'plant' ? 'heart' : 'book'}}" size="28rpx" color="#90A4AE" />
|
||||
<text class="fav-type">{{item.meta}}</text>
|
||||
</view>
|
||||
</view>
|
||||
</block>
|
||||
<block wx:else>
|
||||
<view class="empty-state">
|
||||
<t-icon name="star" size="64rpx" color="#ccc" />
|
||||
<text style="margin-top: 16rpx;">暂无收藏内容</text>
|
||||
</view>
|
||||
</view>
|
||||
<view wx:else class="empty-state">
|
||||
<text class="empty-text">暂无收藏内容</text>
|
||||
</view>
|
||||
</scroll-view>
|
||||
</view>
|
||||
|
||||
<!-- ======== POSTS VIEW ======== -->
|
||||
<view wx:elif="{{view === 'posts'}}" class="sub-view info-view-anim">
|
||||
<view class="sub-nav" bindtap="goBack">
|
||||
<t-icon name="chevron-left" size="40rpx" />
|
||||
<text class="sub-nav-title">我的发布</text>
|
||||
</view>
|
||||
|
||||
<scroll-view scroll-y class="sub-scroll">
|
||||
<view wx:for="{{myPublishedPosts}}" wx:key="id" class="my-post-card">
|
||||
<view class="my-post-time">{{item.time}}</view>
|
||||
<view class="my-post-content-wrap">
|
||||
<text class="post-text">{{item.content}}</text>
|
||||
<view wx:if="{{item.images.length > 0}}" class="my-post-images">
|
||||
<t-image wx:for="{{item.images}}" wx:for-item="img" wx:key="*this"
|
||||
src="{{img}}" mode="aspectFill" width="140rpx" height="140rpx"
|
||||
shape="round" />
|
||||
</view>
|
||||
<view class="my-post-footer">
|
||||
<view class="footer-item"><t-icon name="heart" size="28rpx" /> <text>{{item.likes.length}}</text></view>
|
||||
<view class="footer-item"><t-icon name="chat" size="28rpx" /> <text>{{item.comments.length}}</text></view>
|
||||
<view class="footer-item" catchtap="deletePost" data-id="{{item.id}}" style="margin-left:auto; color: #EF5350;">
|
||||
<t-icon name="delete" size="28rpx" />
|
||||
</view>
|
||||
</block>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
</view>
|
||||
|
||||
<!-- POSTS VIEW -->
|
||||
<view wx:elif="{{view === 'posts'}}" class="posts-page-detail info-view-anim">
|
||||
<view class="back-nav sticky-nav">
|
||||
<t-button variant="text" icon="arrow-left" bind:tap="setView" data-view="profile">我的发布</t-button>
|
||||
</view>
|
||||
|
||||
<!-- Tabs for Published / Drafts -->
|
||||
<t-tabs value="{{postsTab}}" bind:change="onPostsTabChange" theme="card">
|
||||
<t-tab-panel label="已发布" value="published" />
|
||||
<t-tab-panel label="草稿箱" value="drafts" />
|
||||
</t-tabs>
|
||||
|
||||
<!-- Published Posts -->
|
||||
<view wx:if="{{postsTab === 'published'}}" class="my-posts-list">
|
||||
<block wx:if="{{myPublishedPosts.length > 0}}">
|
||||
<view wx:for="{{myPublishedPosts}}" wx:key="id" class="my-post-card">
|
||||
<view class="my-post-time">{{item.time}}</view>
|
||||
<view class="my-post-content-wrap">
|
||||
<text class="post-text">{{item.content}}</text>
|
||||
<view wx:if="{{item.images.length > 0}}" class="my-post-images">
|
||||
<t-image wx:for="{{item.images}}" wx:for-item="img" wx:key="*this" src="{{img}}" mode="aspectFill" width="160rpx" height="160rpx" style="margin-right: 16rpx; display: inline-block; border-radius: 8rpx;" />
|
||||
</view>
|
||||
<view class="my-post-footer">
|
||||
<view class="footer-item"><t-icon name="heart" size="32rpx" /> <text>{{item.likes.length}}</text></view>
|
||||
<view class="footer-item"><t-icon name="chat" size="32rpx" /> <text>{{item.comments.length}}</text></view>
|
||||
<view class="footer-item delete-btn" bindtap="deletePost" data-id="{{item.id}}"><t-icon name="delete" size="32rpx" color="#EF5350" /></view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</block>
|
||||
<view wx:else class="empty-state">
|
||||
<t-icon name="file-copy" size="64rpx" color="#ccc" />
|
||||
<text style="margin-top: 16rpx;">暂无已发布的动态</text>
|
||||
</view>
|
||||
<!-- ======== BADGES VIEW ======== -->
|
||||
<view wx:elif="{{view === 'badges'}}" class="sub-view info-view-anim">
|
||||
<view class="sub-nav" bindtap="goBack">
|
||||
<t-icon name="chevron-left" size="40rpx" />
|
||||
<text class="sub-nav-title">成就徽章</text>
|
||||
</view>
|
||||
|
||||
<!-- Draft Posts -->
|
||||
<view wx:if="{{postsTab === 'drafts'}}" class="my-posts-list">
|
||||
<block wx:if="{{myDrafts.length > 0}}">
|
||||
<view wx:for="{{myDrafts}}" wx:key="id" class="my-post-card draft-card">
|
||||
<view class="draft-badge">草稿</view>
|
||||
<view class="my-post-content-wrap">
|
||||
<text class="post-text">{{item.content || '(无文字内容)'}}</text>
|
||||
<view wx:if="{{item.images.length > 0}}" class="my-post-images">
|
||||
<t-image wx:for="{{item.images}}" wx:for-item="img" wx:key="*this" src="{{img}}" mode="aspectFill" width="160rpx" height="160rpx" style="margin-right: 16rpx; display: inline-block; border-radius: 8rpx;" />
|
||||
</view>
|
||||
<view class="my-post-footer">
|
||||
<view class="footer-item edit-btn" bindtap="editDraft" data-index="{{index}}">
|
||||
<t-icon name="edit" size="32rpx" color="#558B2F" />
|
||||
<text style="color: #558B2F;">编辑</text>
|
||||
</view>
|
||||
<view class="footer-item delete-btn" bindtap="deleteDraft" data-index="{{index}}">
|
||||
<t-icon name="delete" size="32rpx" color="#EF5350" />
|
||||
<text style="color: #EF5350;">删除</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</block>
|
||||
<view wx:else class="empty-state">
|
||||
<t-icon name="file-add" size="64rpx" color="#ccc" />
|
||||
<text style="margin-top: 16rpx;">暂无草稿</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- BADGES VIEW -->
|
||||
<view wx:elif="{{view === 'badges'}}" class="badges-page info-view-anim">
|
||||
<view class="back-nav sticky-nav">
|
||||
<t-button variant="text" icon="arrow-left" bind:tap="setView" data-view="profile">成就徽章</t-button>
|
||||
</view>
|
||||
|
||||
<scroll-view scroll-y class="badges-content">
|
||||
<scroll-view scroll-y class="sub-scroll">
|
||||
<!-- Level Card -->
|
||||
<view class="level-card-large">
|
||||
<view class="level-header">
|
||||
<view class="level-info-large">
|
||||
<text class="level-label">当前等级</text>
|
||||
<text class="level-value">Lv.4 资深植人</text>
|
||||
</view>
|
||||
<t-icon name="trophy" size="80rpx" color="#FFD700" />
|
||||
</view>
|
||||
|
||||
<view class="level-progress-section">
|
||||
<view class="progress-text">
|
||||
<text>经验值</text>
|
||||
<text>350 / 500</text>
|
||||
</view>
|
||||
<t-progress percentage="70" theme="plump" color="#FFD700" track-color="rgba(255,255,255,0.3)" />
|
||||
<text class="next-level-tip">距离 Lv.5 园艺大师 还需 150 经验</text>
|
||||
</view>
|
||||
<view class="level-card-bg"></view>
|
||||
<view class="level-header">
|
||||
<view class="level-info-large">
|
||||
<text class="level-label">当前等级</text>
|
||||
<text class="level-value">Lv.4 资深植人</text>
|
||||
</view>
|
||||
<t-icon name="trophy" size="80rpx" color="#FFD700" />
|
||||
</view>
|
||||
<view class="level-progress-section">
|
||||
<view class="progress-text">
|
||||
<text>经验值</text>
|
||||
<text>350 / 500</text>
|
||||
</view>
|
||||
<view class="level-progress-bar-bg">
|
||||
<view class="level-progress-bar-fill" style="width: 70%;"></view>
|
||||
</view>
|
||||
<text class="next-level-tip">距离 Lv.5 园艺大师 还需 150 经验</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
|
||||
<view class="section-title-badges">所有徽章 (3/6)</view>
|
||||
<t-grid column="{{3}}" gutter="24rpx">
|
||||
<t-grid-item wx:for="{{badges}}" wx:key="id" text="{{item.name}}" description="{{item.desc}}" image="{{item.unlocked ? '/assets/icons/'+item.icon+'.png' : '/assets/icons/lock.png'}}" />
|
||||
<!-- TDesign grid item image might need full path or use slot for svg if needed, using png for now -->
|
||||
</t-grid>
|
||||
|
||||
<view class="badges-grid">
|
||||
<view wx:for="{{badges}}" wx:key="id" class="badge-item {{item.unlocked ? 'unlocked' : 'locked'}}">
|
||||
<view class="badge-icon-circle" style="background: {{item.unlocked ? item.color + '20' : '#F5F5F5'}}">
|
||||
<t-icon wx:if="{{item.unlocked}}" name="{{item.iconName}}" size="48rpx" color="{{item.color}}" />
|
||||
<t-icon wx:else name="lock-on" size="40rpx" color="#BDBDBD" />
|
||||
</view>
|
||||
<text class="badge-name">{{item.name}}</text>
|
||||
<text class="badge-desc">{{item.desc}}</text>
|
||||
<text wx:if="{{item.progress}}" class="badge-progress">{{item.progress}}</text>
|
||||
</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
</view>
|
||||
|
||||
<!-- MAIN PROFILE VIEW -->
|
||||
<view wx:else class="main-profile-view">
|
||||
<view class="profile-header">
|
||||
<view class="user-main">
|
||||
<view class="user-avatar">
|
||||
<t-avatar image="https://api.dicebear.com/7.x/avataaars/svg?seed=Lucky" size="large" />
|
||||
<!-- ======== ABOUT VIEW ======== -->
|
||||
<view wx:elif="{{view === 'about'}}" class="sub-view info-view-anim">
|
||||
<view class="sub-nav" bindtap="goBack">
|
||||
<t-icon name="chevron-left" size="40rpx" />
|
||||
<text class="sub-nav-title">关于我们</text>
|
||||
</view>
|
||||
<scroll-view scroll-y class="sub-scroll">
|
||||
<view class="about-section">
|
||||
<view class="about-logo-area">
|
||||
<view class="about-logo">
|
||||
<t-icon name="flower" size="72rpx" color="#558B2F" />
|
||||
</view>
|
||||
<text class="about-app-name">植物护理助手</text>
|
||||
<text class="about-version">版本 {{appVersion}}</text>
|
||||
</view>
|
||||
<view class="user-text">
|
||||
<text class="user-name">布偶猫园长</text>
|
||||
<t-tag theme="warning" variant="light" size="small">Lv.4 资深植人</t-tag>
|
||||
<view class="about-desc">
|
||||
<text>一款专注于家庭植物养护的小程序。帮助你记录植物成长、制定养护计划、识别未知植物，与花友们分享养花心得。</text>
|
||||
</view>
|
||||
<view class="about-footer">
|
||||
<text class="about-copyright">© 2026 Sundynix · All Rights Reserved</text>
|
||||
</view>
|
||||
</view>
|
||||
<t-icon name="setting" size="48rpx" />
|
||||
</view>
|
||||
|
||||
<scroll-view scroll-y class="profile-content">
|
||||
<view class="stats-grid">
|
||||
<view class="stat-col">
|
||||
<text class="stat-num">12</text>
|
||||
<text class="stat-label">植物</text>
|
||||
</view>
|
||||
<view class="stat-col">
|
||||
<text class="stat-num">328</text>
|
||||
<text class="stat-label">养护</text>
|
||||
</view>
|
||||
<view class="stat-col">
|
||||
<text class="stat-num">15</text>
|
||||
<text class="stat-label">关注</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="profile-menu">
|
||||
<t-cell-group title="常用功能" theme="card">
|
||||
<t-cell title="我的收藏" hover arrow bind:tap="setView" data-view="favorites">
|
||||
<t-icon slot="left-icon" name="star" color="#FFA000" style="margin-right: 16rpx;" />
|
||||
</t-cell>
|
||||
<t-cell title="我的发布" hover arrow bind:tap="setView" data-view="posts">
|
||||
<t-icon slot="left-icon" name="file-copy" color="#1976D2" style="margin-right: 16rpx;" />
|
||||
</t-cell>
|
||||
<t-cell title="识别记录" hover arrow>
|
||||
<t-icon slot="left-icon" name="scan" color="#388E3C" style="margin-right: 16rpx;" />
|
||||
</t-cell>
|
||||
<t-cell title="成就徽章" note="已获 3 个" hover arrow bind:tap="setView" data-view="badges">
|
||||
<t-icon slot="left-icon" name="control-platform" color="#AB47BC" style="margin-right: 16rpx;" />
|
||||
</t-cell>
|
||||
</t-cell-group>
|
||||
|
||||
<t-cell-group title="更多服务" theme="card" style="margin-top: 24rpx;">
|
||||
<t-cell title="帮助与反馈" hover arrow>
|
||||
<t-icon slot="left-icon" name="help-circle" color="#757575" style="margin-right: 16rpx;" />
|
||||
</t-cell>
|
||||
</t-cell-group>
|
||||
|
||||
</view>
|
||||
|
||||
<!-- Spacer -->
|
||||
<view style="height: 40rpx;"></view>
|
||||
</scroll-view>
|
||||
</view>
|
||||
|
||||
<!-- ======== MAIN PROFILE VIEW ======== -->
|
||||
<view wx:else class="main-profile-view">
|
||||
<!-- Header -->
|
||||
<view class="profile-header">
|
||||
<view class="user-main">
|
||||
<view class="user-avatar" bindtap="openProfileEditor">
|
||||
<t-avatar wx:if="{{userAvatar}}" image="{{userAvatar}}" size="120rpx" />
|
||||
<t-avatar wx:else icon="user" size="120rpx" />
|
||||
</view>
|
||||
<view class="user-text" bindtap="openProfileEditor">
|
||||
<view class="user-name">{{userName}}</view>
|
||||
<view class="level-badge">Lv.4 资深植人</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="settings-btn" bindtap="goToNotificationSettings">
|
||||
<t-icon name="setting" size="40rpx" color="#666" />
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- Stats Card (Fixed) -->
|
||||
<view class="stats-section">
|
||||
<view class="stats-card">
|
||||
<view class="stat-item">
|
||||
<text class="stat-num">{{plantCount}}</text>
|
||||
<text class="stat-label">植物</text>
|
||||
</view>
|
||||
<view class="stat-divider"></view>
|
||||
<view class="stat-item">
|
||||
<text class="stat-num">{{taskDoneCount}}</text>
|
||||
<text class="stat-label">养护</text>
|
||||
</view>
|
||||
<view class="stat-divider"></view>
|
||||
<view class="stat-item">
|
||||
<text class="stat-num">{{postCount}}</text>
|
||||
<text class="stat-label">动态</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<scroll-view scroll-y class="profile-content" enhanced show-scrollbar="{{false}}">
|
||||
<!-- Menu -->
|
||||
<view class="profile-menu">
|
||||
<view class="menu-group-title">常用功能</view>
|
||||
|
||||
<view class="menu-item" bindtap="setView" data-view="favorites">
|
||||
<view class="menu-left">
|
||||
<view class="menu-icon-bg" style="background: #FFF3E0">
|
||||
<t-icon name="star" size="36rpx" color="#FF9800" />
|
||||
</view>
|
||||
<text class="menu-text">我的收藏</text>
|
||||
</view>
|
||||
<t-icon name="chevron-right" size="36rpx" color="#ccc" />
|
||||
</view>
|
||||
|
||||
<view class="menu-item" bindtap="setView" data-view="posts">
|
||||
<view class="menu-left">
|
||||
<view class="menu-icon-bg" style="background: #E3F2FD">
|
||||
<t-icon name="file-copy" size="36rpx" color="#2196F3" />
|
||||
</view>
|
||||
<text class="menu-text">我的发布</text>
|
||||
</view>
|
||||
<t-icon name="chevron-right" size="36rpx" color="#ccc" />
|
||||
</view>
|
||||
|
||||
<view class="menu-item" bindtap="goToIdentifyHistory">
|
||||
<view class="menu-left">
|
||||
<view class="menu-icon-bg" style="background: #E8F5E9">
|
||||
<t-icon name="scan" size="36rpx" color="#4CAF50" />
|
||||
</view>
|
||||
<text class="menu-text">识别记录</text>
|
||||
</view>
|
||||
<t-icon name="chevron-right" size="36rpx" color="#ccc" />
|
||||
</view>
|
||||
|
||||
<view class="menu-item" bindtap="setView" data-view="badges">
|
||||
<view class="menu-left">
|
||||
<view class="menu-icon-bg" style="background: #F3E5F5">
|
||||
<t-icon name="award" size="36rpx" color="#9C27B0" />
|
||||
</view>
|
||||
<text class="menu-text">成就徽章</text>
|
||||
</view>
|
||||
<view class="menu-right-info">
|
||||
<text class="menu-badge-text">已获 3 个</text>
|
||||
<t-icon name="chevron-right" size="36rpx" color="#ccc" />
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="menu-group-title" style="margin-top: 32rpx;">更多服务</view>
|
||||
|
||||
<view class="menu-item" bindtap="goToAbout">
|
||||
<view class="menu-left">
|
||||
<view class="menu-icon-bg" style="background: #F5F5F5">
|
||||
<t-icon name="help-circle" size="36rpx" color="#616161" />
|
||||
</view>
|
||||
<text class="menu-text">帮助与关于</text>
|
||||
</view>
|
||||
<t-icon name="chevron-right" size="36rpx" color="#ccc" />
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view style="height: 100rpx;"></view>
|
||||
</scroll-view>
|
||||
</view>
|
||||
|
||||
<!-- Profile Edit Popup -->
|
||||
<t-popup visible="{{showProfileEditor}}" placement="bottom" bind:visible-change="onProfilePopupChange">
|
||||
<view class="profile-edit-popup">
|
||||
<view class="popup-header">
|
||||
<text class="popup-title">编辑资料</text>
|
||||
<view class="popup-close" bindtap="closeProfileEditor">
|
||||
<t-icon name="close" size="40rpx" color="#999" />
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="edit-row" bindtap="onChooseAvatar">
|
||||
<text class="edit-row-label">头像</text>
|
||||
<view class="edit-row-right">
|
||||
<t-avatar
|
||||
wx:if="{{tempAvatar || userAvatar}}"
|
||||
image="{{tempAvatar || userAvatar}}"
|
||||
size="96rpx"
|
||||
/>
|
||||
<t-avatar wx:else icon="user" size="96rpx" />
|
||||
<t-icon name="chevron-right" size="32rpx" color="#C5C5C5" />
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="edit-row">
|
||||
<text class="edit-row-label">昵称</text>
|
||||
<input
|
||||
class="nickname-input"
|
||||
type="text"
|
||||
placeholder="请输入昵称"
|
||||
placeholder-style="color: #C5C5C5;"
|
||||
value="{{tempNickname}}"
|
||||
bindinput="onNicknameInput"
|
||||
/>
|
||||
</view>
|
||||
|
||||
<view class="edit-actions">
|
||||
<t-button theme="primary" block shape="round" bind:tap="saveProfile">保存</t-button>
|
||||
</view>
|
||||
</view>
|
||||
</t-popup>
|
||||
|
||||
</view>
|
||||
|
||||
Reference in New Issue
Block a user