456

xs-app/manifest.json

@@ -54,7 +54,8 @@
         "setting" : {
             "urlCheck" : false
         },
-        "usingComponents" : true
+        "usingComponents" : true,
+		"optimization":{"subPackages":true}
     },
     "mp-alipay" : {
         "usingComponents" : true

xs-app/pages.json

@@ -106,6 +106,7 @@
 			}
 		}
 	],
+
 	"tabBar": {
 		"list": [
 			{

xs-app/pages/search/search-list.vue

@@ -1,14 +1,82 @@
 <template>
 	<view class="list_content">
-		列表
+		<view class="item" v-for="(item,index) in dataList" :key="index">
+			<view class="item__book-cover">
+			    <image class="image" :src="item.book_cover" mode="aspectFill"></image>
+			</view>
+			<view class="item__info">
+				<text class="item__info__book-name" v-html="highlightText(item.book_name)"></text>
+				<view class="item__info__author">
+					{{item.author_name}} 著 | {{item.book_is_action==1?'完结':'连载'}}
+				</view>
+				<view class="item__info__brief">
+					{{item.book_brief}}
+				</view>
+			</view>
+		</view>
 	</view>
 </template>
 
-<script setup lang="ts">
+<script setup lang="ts">	
+	const props = defineProps({
+		searchContent:String,
+		dataList: Object,
+	})
+	
+	function highlightText(text:string) {
+	    let searchText = props.searchContent.toLowerCase()
+	    if (searchText && text.toLowerCase().includes(searchText)) {
+	      const replaceText = text.toLowerCase().replace(new RegExp(searchText, 'gi'), match => `<span style="color: #FE4977;">${match}</span>`);
+	      return replaceText
+	    }
+	    return text
+	}
 </script>
 
 <style lang="scss">
 	.list_content{
+		display: flex;
+		flex-direction: column;
 		
+	    .item{
+			display: flex;
+			flex-direction: row;
+			padding: 20rpx 20rpx;
+			// background-color: green;
+			&__book-cover{
+				width: 194rpx;
+				height: 259rpx;
+				flex-shrink: 0; //设置flex元素所有比例.默认是1,为0的时候不进行缩放
+				.image {
+					width: 100%;
+					height: 100%;
+				}
+			}
+			&__info {
+				display: flex;
+				flex-direction: column;
+				margin-left: 20rpx;
+				&__book-name{
+					margin-top: 10rpx;
+					font-size: 20px;
+					color: #000000;
+				}
+				&__author{
+					margin-top: 30rpx;
+					font-size: 15px;
+					color: #6F6F6F;
+				}
+				&__brief{
+					margin-top: 30rpx;
+					display: -webkit-box;
+					font-size: 15px;
+					color: #6F6F6F;
+					-webkit-line-clamp: 2;
+					-webkit-box-orient: vertical;
+					overflow: hidden;
+					text-overflow: ellipsis;
+				}
+			}
+		}
 	}
 </style>

xs-app/pages/search/search-nav.vue

@@ -55,6 +55,7 @@
 		flex-direction: column;
 		width: 100%;
 		left: 0;
+		z-index: 10;
 		/* #ifdef H5 */
 		top: 44px;
 		/* #endif */

xs-app/pages/search/search.vue

@@ -5,7 +5,7 @@
 			<record v-if="!is_search" :data_list='data_record_list'
 			@clickDeleteAll='recordClickDeleteAll'
 			@clickItem='recordClickItem'></record>
-			<list v-else></list>
+			<list v-else :searchContent='search_content' :dataList='data_results_list'></list>
 		</view>
 	</view>
 </template>
@@ -26,6 +26,7 @@
 	let search_content = ref('')
 	let is_search = ref(false)
 	let data_record_list = ref([])
+	let data_results_list = ref([])
 	
 	initData()
 	
@@ -61,6 +62,7 @@
 			return
 		}
 		is_search.value = true
+		search_content.value = r
 		
 		data_record_list.value = SearchManager.addName(r)
 		searchBook(r)
@@ -73,7 +75,8 @@
 			util.hideLoading()
 			if(!err&&data) {
 				if(data.code==config.url_confg.StatesCode.SUCCESS){
-					// console.log('data=',data)
+					console.log('data=',data)
+					data_results_list.value = data.content
 				}
 			}
 		})