library-wechat/pages/search/search.vue

<template>
	<view style="background-color: #fff; padding-bottom:5px;">
		<view class="my-search-container">
			<view class="my-search-wrapper">
				<picker 
					mode="selector" 
					:range="rangeText" 
					:value="selectIndex" 
					@change="onPickerChange"
					class="picker-select"
				>
					<view class="picker-display">
						{{ selectValueText || '请选择分类' }}
						<uni-icons type="arrowdown" size="14" color="#999" style="margin-left: 4px;" />
					</view>
				</picker>
				<uni-search-bar
					class="my-search-bar"
					@confirm="onSearch"
					@focus="onFocus"
					@blur="onBlur"
					@clear="onClear"
					@cancel="onCancel"
					@input="onInput"
					cancelButton="none"
					bgColor="#f7f7f7"
					v-model="value"
					placeholder="请输入搜索内容"
				>
					<uni-icons slot="clearIcon" type="clear" color="#999999" />
				</uni-search-bar>
			</view>

			<view class="search-btn-container" @click="onSearch">
				<button class="search-btn" type="primary" >搜索</button>
			</view>

      <!-- 有数据才显示 -->
      <view class="filter-container">
        <view class="total-reslut"  v-if="listData.length > 0"> 
          搜索到 {{ total }} 条记录，共 {{ totalPage }} 页，当前第 {{ page }} 页
        </view>
        <view>筛选</view>
      </view>
		</view>

    <!-- 有数据才显示列表 -->
    <view style="padding-top: 154px;" v-if="listData.length > 0">
      <scroll-view
        scroll-y
        style="height: calc(100vh - 80px);"
        @scrolltolower="onScrollLower"
      >
        <book-list-item
          class="hot-list-item"
          v-for="(item, index) in listData"
          :key="index"
          :data="item"
          :ranking="index + 1"
          @click="onItemClick(item)"
        ></book-list-item>

        <view class="load-more" v-if="total > listData.length">
          上拉加载更多...
        </view>
        <view class="load-more" v-if="total <= listData.length && listData.length > 0">
          没有更多数据了
        </view>
		  </scroll-view>
    </view>
	</view>
</template>

<script>
import BookListItem from "@/components/book-list-item/book-list-item.vue";

export default {
	components: {
		BookListItem
	},
	data() {
		return {
			selectValue: '',
			selectValueText: '',
			selectIndex: 0,
			value:'',
			range: [
				{ value: 0, text: "任意词" },
				{ value: 1, text: "题名" },
				{ value: 2, text: "著者" },
				{ value: 3, text: "ISBN" },
				{ value: 4, text: "主题" },
				{ value: 5, text: "出版社" },
				{ value: 6, text: "分类号" }
			],
			rangeText: [],
			listData:[],
			size: 10,
			page: 1,
			total: 0,
			totalPage: 0
		};
	},
	onLoad() {
		this.rangeText = this.range.map(item => item.text);
		this.selectValue = this.range[0].value;
		this.selectValueText = this.range[0].text;
	},
	methods: {
		onPickerChange(e) {
			const index = e.detail.value;
			this.selectIndex = index;
			this.selectValue = this.range[index].value;
			this.selectValueText = this.range[index].text;
		},
		async getBookList() {
			uni.showLoading({ title: '搜索中...' });
			await new Promise(resolve => setTimeout(resolve, 500));

			const mockList = [];
			for (let i = 0; i < this.size; i++) {
				const idx = (this.page - 1) * this.size + i + 1;
				mockList.push({
					id: idx,
					title: `穆尔西医生带你走出孤独`,
					desc: `关键词：${this.value}｜检索类型：${this.selectValueText}`,
					nickname: `穆尔西`,
					imgCover:'http://wxtest.twgbz.cn/spider/bookcover/978-7-5546-1700-7',
					publish: "中国青年出版社",
				});
			}

			this.total = 37;
			this.totalPage = 4;

			if (this.page === 1) {
				this.listData = mockList;
			} else {
				this.listData = [...this.listData, ...mockList];
			}
			uni.hideLoading();
		},
		onScrollLower() {
			if (this.listData.length >= this.total) return;
			this.page++;
			this.getBookList();
		},
		onSearch() {
			this.page = 1;
			this.getBookList();
			uni.showToast({ title: '搜索：' + this.value, icon: 'none' });
		},
		onItemClick(item) {
			// uni.showToast({ title: '点击了：' + item.title, icon: 'none' });
      uni.navigateTo({
        url: "/subpkg/pages/book-detail/book-detail?isbn=" + item.isbn
      })
		},
		onFocus() {},
		onBlur() {},
		onClear() { 
			this.value = '';
			this.listData = []; // 清空列表
			this.total = 0;
		},
		onCancel() {},
		onInput(val) { this.value = val; }
	}
}
</script>

<style lang="scss" scoped>
.my-search-container {
	display: flex;
	flex-direction: column;
	padding: 15px 20px;
	background: #fff;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 99;
  height: 124px;
	.my-search-wrapper{
		display: flex;
		align-items: center;
		width: 100%;
    padding: 5px 0;
		background-color: #f7f7f7;
		border-radius: 36px;
		overflow: hidden;
	}
	.picker-select {
		width: 60px;
		border-right: 1px solid #c9c9c9;
	}
	.picker-display {
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 6px 0;
		font-size: 14px;
		color: #333;
	}
	.my-search-bar {
		flex: 1;
		::v-deep .uni-searchbar {
			padding: 0 !important;
			background: transparent !important;
		}
	}
	.search-btn-container{
		width: 100%;
		margin-top: 10px;
		.search-btn{
			background-color: #01a4fe;
			font-size: 15px;
			border-radius: 20px;
		}
	}
}
.filter-container {
	display: flex;
	justify-content: flex-end;
	padding-top: 10px;
	font-size: 13px;
	color: #666;
}
.load-more {
	text-align: center;
	padding: 10px;
	font-size: 13px;
	color: #999;
}
.total-reslut{
  flex: 1;
  line-height: 20px;
  font-size: 13px;
  color: #01a4fe;
  font-weight: 400;
}
</style>