book-hi/pages/code/search.vue

<template>
	<view class="book-search">

		<!-- 书籍列表 -->
		<view class="content-wrapper">
			<page-scroll ref="pageScroll" url="/token/activation/infoList" :immediate="true" :slot-empty="true"
				:params="searchParams" @updateList="handleUpdateList">

				<!-- 搜索框 - 固定在顶部 -->
				<view class="search-container">
					<u-search v-model="searchKeyword" placeholder="输入ISBN/书名" :show-action="true" action-text="搜索"
						:clearabled="true" @search="handleSearch" @clear="handleClear"
						@custom="handleSearch"></u-search>
				</view>

				<view class="book-list">
					<view class="book-item" v-for="(item, index) in bookList" :key="index">
						<!-- 书籍封面 -->
						<view class="book-cover">
							<u-image :src="item.cover || defaultCover" width="120rpx" height="160rpx"
								border-radius="8rpx" :fade="true"></u-image>
						</view>

						<!-- 书籍信息 -->
						<view class="book-info">
							<view class="book-title">{{ item.bookName }}</view>
							<view class="book-isbn">ISBN: {{ item.isbn }}</view>
							<view class="book-author">作者: {{ item.author }}</view>
							<view class="book-publish">出版社: {{ item.publish }}</view>
							<view class="book-date">出版时间: {{ formatDate(item.pubDate) }}</view>
						</view>

						<!-- 库存信息 -->
						<view class="book-stock">
							<view class="stock-num">{{ item.stockNum }}</view>
							<view class="stock-label">库存</view>
						</view>
					</view>
				</view>

				<!-- 空状态提示 -->
				<template v-slot:empty>
					<view class="empty-container">
						<image src="https://shuhi.oss-cn-qingdao.aliyuncs.com/mini/no-data.png" class="empty-image"
							mode="aspectFit" />
						<view class="empty-title">暂无搜索结果</view>
						<view class="empty-text">请尝试其他关键词</view>
					</view>
				</template>
			</page-scroll>
		</view>
	</view>
</template>

<script>
	import pageScroll from '@/components/pageScroll/index.vue'

	export default {
		components: {
			pageScroll
		},
		data() {
			return {
				searchKeyword: '',
				bookList: [],
				searchParams: {},
				defaultCover: 'https://shuhi.oss-cn-qingdao.aliyuncs.com/mini/book-default.png'
			};
		},

		// #ifdef MP-ALIPAY
		onPullDownRefresh() {
			this.$refs.pageScroll?.loadData(true, this.searchParams)
		},
		// #endif

		methods: {
			// 处理搜索
			handleSearch() {
				this.searchParams = {
					searchContent: this.searchKeyword.trim()
				};

				// 重新加载数据
				this.$refs.pageScroll?.loadData(true, this.searchParams);
			},

			// 清空搜索
			handleClear() {
				this.searchKeyword = '';
				this.searchParams = {};
				this.bookList = [];
			},

			// 更新列表数据
			handleUpdateList(data) {
				this.bookList = data;
			},

			// 格式化日期
			formatDate(dateStr) {
				if (!dateStr) return '';
				const date = new Date(dateStr);
				return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')}`;
			}
		}
	};
</script>

<style lang="scss" scoped>
	.book-search {
		 min-height: 100vh;
		background-color: #f5f5f5;
	}

	.search-container {
		z-index: 999;
		background-color: #fff;
		padding: 20rpx 30rpx;
		box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.04);
		margin-bottom: 30rpx;
	}

	.book-list {
		padding: 0 30rpx;
		box-sizing: border-box;
	}

	.book-item {
		display: flex;
		background-color: #fff;
		padding: 30rpx;
		margin-bottom: 20rpx;
		border-radius: 16rpx;
		box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.08);

		.book-cover {
			margin-right: 24rpx;
			flex-shrink: 0;
		}

		.book-info {
			flex: 1;

			.book-title {
				font-size: 32rpx;
				font-weight: 600;
				color: #333;
				margin-bottom: 12rpx;
				line-height: 1.4;
				display: -webkit-box;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 2;
				overflow: hidden;
			}

			.book-isbn,
			.book-author,
			.book-publish,
			.book-date {
				font-size: 26rpx;
				color: #666;
				margin-bottom: 8rpx;
				line-height: 1.3;
			}

			.book-isbn {
				color: #999;
				font-family: 'Courier New', monospace;
			}
		}

		.book-stock {
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			min-width: 80rpx;

			.stock-num {
				font-size: 36rpx;
				font-weight: 600;
				color: #52c41a;
				margin-bottom: 8rpx;
			}

			.stock-label {
				font-size: 24rpx;
				color: #999;
			}
		}
	}

	.empty-container {
		display: flex;
		flex-direction: column;
		align-items: center;
		padding-top: 25vh;

		.empty-image {
			width: 200rpx;
			height: 200rpx;
			margin-bottom: 30rpx;
		}

		.empty-title {
			font-size: 32rpx;
			color: #333;
			margin-bottom: 16rpx;
		}

		.empty-text {
			font-size: 28rpx;
			color: #999;
		}
	}
</style>