add searchable

miniprogram/components/journal-list/index.wxml

@@ -1,40 +1,77 @@
 <!--components/journal-list/index.wxml-->
-<scroll-view
-	class="journal-list"
-	scroll-y
-	bindscrolltolower="onScrollToLower"
->
-	<t-cell-group>
-		<t-cell
-			class="item {{selectedId === item.id ? 'selected' : ''}}"
-			wx:for="{{list}}"
-			wx:key="id"
-			title="{{item.date}}"
-			description="{{item.idea}}"
-			bind:tap="onSelectItem"
-			data-id="{{item.id}}"
-		>
-			<image
-				slot="left-icon"
-				wx:if="{{item.thumbUrl}}"
-				class="thumb"
-				src="{{item.thumbUrl}}"
-				mode="aspectFill"
-			/>
-			<t-icon wx:if="{{!item.thumbUrl}}" slot="left-icon" name="image-off" color="gray" size="96rpx" />
-			<t-icon
-				wx:if="{{selectedId === item.id}}"
-				slot="note"
-				class="check"
-				name="check"
-				size="48rpx"
-				color="var(--theme-wx)"
-			/>
-		</t-cell>
-	</t-cell-group>
-	<view wx:if="{{isFetching}}" class="loading">
-		<t-loading theme="dots" size="40rpx" />
+<view class="journal-list">
+	<view wx:if="{{searchable}}" class="search-bar">
+		<t-search
+			value="{{searchValue}}"
+			placeholder="搜索日记内容或地点"
+			bind:change="onSearchChange"
+			bind:submit="onSearchSubmit"
+			bind:clear="onSearchClear"
+		/>
 	</view>
-	<view wx:if="{{isFinished && list.length > 0}}" class="finished">没有更多了</view>
-	<view wx:if="{{!isFetching && list.length === 0}}" class="empty">暂无记录</view>
-</scroll-view>
+
+	<scroll-view
+		class="scroll-content"
+		scroll-y
+		bindscrolltolower="onScrollToLower"
+	>
+		<block wx:if="{{list.length > 0}}">
+			<t-cell-group>
+				<t-cell
+					class="item {{selectedId === item.id ? 'selected' : ''}}"
+					wx:for="{{list}}"
+					wx:key="id"
+					hover
+					bind:tap="onSelectItem"
+					data-id="{{item.id}}"
+				>
+					<image
+						slot="left-icon"
+						wx:if="{{item.thumbUrl}}"
+						class="thumb"
+						src="{{item.thumbUrl}}"
+						mode="aspectFill"
+					/>
+					<t-icon wx:else slot="left-icon" name="image" color="gray" size="96rpx" />
+					<view slot="title">
+						<text class="date">{{item.date}}</text>
+						<text wx:if="{{item.idea}}"> · {{item.idea}}</text>
+					</view>
+					<text wx:if="{{item.location}}" class="location" slot="description">{{item.location}}</text>
+					<t-icon
+						wx:if="{{mode === 'select' && selectedId === item.id}}"
+						slot="right-icon"
+						class="check"
+						name="check"
+						size="48rpx"
+						color="var(--theme-wx)"
+					/>
+					<t-icon
+						wx:elif="{{mode === 'navigate'}}"
+						slot="right-icon"
+						name="chevron-right"
+					/>
+				</t-cell>
+			</t-cell-group>
+
+			<view wx:if="{{isFetching}}" class="loading">
+				<t-loading theme="circular" size="40rpx" text="加载中..." />
+			</view>
+
+			<view wx:elif="{{isFinished}}" class="finished">
+				{{searchable && searchValue ? '已显示全部结果' : '没有更多了'}}
+			</view>
+		</block>
+		<block wx:elif="{{isFetching}}">
+			<view class="loading">
+				<t-loading theme="circular" size="40rpx" text="加载中..." />
+			</view>
+		</block>
+		<block wx:elif="{{searchable && searchValue}}">
+			<t-empty icon="search" description="未找到相关日记" />
+		</block>
+		<block wx:else>
+			<t-empty icon="image" description="暂无记录" />
+		</block>
+	</scroll-view>
+</view>