Blizzard
75 lines
2.7 KiB
Plaintext
75 lines
2.7 KiB
Plaintext
<!--pages/wiki/index.wxml-->
|
|
<view class="wiki-page">
|
|
|
|
<view class="wiki-scroll-area">
|
|
<view class="search-section">
|
|
<t-search placeholder="搜索植物名称，如：龟背竹" value="{{searchQuery}}" bind:change="onSearchInput" shape="round" />
|
|
</view>
|
|
|
|
<view class="category-scroll">
|
|
<t-tag
|
|
wx:for="{{['全部', '观叶', '观花', '多肉']}}"
|
|
wx:key="*this"
|
|
variant="{{activeCategory === item ? 'dark' : 'outline'}}"
|
|
theme="{{activeCategory === item ? 'primary' : 'default'}}"
|
|
shape="mark"
|
|
size="medium"
|
|
style="margin-right: 16rpx;"
|
|
bind:tap="setCategory"
|
|
data-cat="{{item}}"
|
|
>
|
|
{{item}}
|
|
</t-tag>
|
|
</view>
|
|
|
|
<view class="wiki-list">
|
|
<view wx:for="{{displayedList}}" wx:key="id" class="wiki-card" bindtap="goToDetail" data-item="{{item}}">
|
|
<view class="wiki-image">
|
|
<t-image src="/assets/{{item.images[0]}}" mode="aspectFill" width="100%" height="100%" />
|
|
</view>
|
|
<view class="wiki-info">
|
|
<view class="wiki-top">
|
|
<text class="wiki-name">{{item.name}}</text>
|
|
<text class="scientific-name">{{item.scientificName}}</text>
|
|
</view>
|
|
<t-tag size="small" variant="light" theme="success">{{item.category}}</t-tag>
|
|
</view>
|
|
<t-icon name="chevron-right" size="48rpx" color="#ccc" />
|
|
</view>
|
|
</view>
|
|
|
|
<!-- Spacer -->
|
|
<view style="height: 160rpx;"></view>
|
|
</view>
|
|
|
|
<t-fab icon="scan" text="植物识别" bind:click="openIdentifyModal" aria-label="植物识别"></t-fab>
|
|
|
|
<!-- Identify Popup -->
|
|
<t-popup visible="{{showIdentifyModal}}" bind:visible-change="onPopupVisibleChange" placement="bottom">
|
|
<view class="popup-content">
|
|
<view class="popup-header">
|
|
<text class="popup-title">识别植物</text>
|
|
</view>
|
|
|
|
<view class="upload-options-grid">
|
|
<view class="upload-opt-item">
|
|
<view class="opt-icon-circle" style="background: #E8F5E9;">
|
|
<t-icon name="camera" size="64rpx" color="#2E7D32" />
|
|
</view>
|
|
<text>拍照识别</text>
|
|
</view>
|
|
<view class="upload-opt-item">
|
|
<view class="opt-icon-circle" style="background: #E3F2FD;">
|
|
<t-icon name="image" size="64rpx" color="#1565C0" />
|
|
</view>
|
|
<text>从相册上传</text>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="popup-footer">
|
|
<t-button block variant="outline" bind:tap="closeIdentifyModal">取消</t-button>
|
|
</view>
|
|
</view>
|
|
</t-popup>
|
|
</view>
|