更新代码

pages/index/search/index.vue

@@ -3,19 +3,20 @@
 		<u-sticky :enable="true">
 			<view class="search-box">
 				<u-search bg-color="#f2f2f2" style="width: 100%;" placeholder="搜索更多资源" :focus="true" :show-action="true"
-					:animation="true" action-text="取消" @custom="goBack()" @search="doSearch(false)"></u-search>
+					:animation="true" action-text="取消" v-model="datas.keyword" @custom="goBack()"
+					@search="doSearch(false)"></u-search>
 			</view>
 		</u-sticky>
 	</view>
 	<view class="search-keyword">
-		<view class="keyword-block" v-if="datas.hotKeywordList.length !=0">
+		<view class="keyword-block" v-if="datas.hotKeywordList.length != 0">
 			<view class="keyword-list-header">
 				<view>热搜</view>
 			</view>
-			<view class="keyword" v-if="forbid==''">
-				<view v-for="(keyword,index) in datas.hotKeywordList" @tap="doSearchs(keyword)" :key="index"
+			<view class="keyword" v-if="forbid == ''">
+				<view v-for="(keyword, index) in datas.hotKeywordList" @tap="doSearchs(keyword)" :key="index"
 					v-if="keyword">
-					{{keyword}}
+					{{ keyword }}
 				</view>
 			</view>
 			<view class="hide-hot-tis" v-else>
@@ -26,59 +27,76 @@
 </template>
 
 <script setup>
-	import {
-		reactive
-	} from 'vue';
-	import {
-		onShow
-	} from '@dcloudio/uni-app'
-	let datas = reactive({
-		hotKeywordList: [], //热搜
-	})
-	onShow(() => {
-		getList()
-	})
+import { selectCourseTitles } from '@/api/index/index.js'
+import {
+	reactive
+} from 'vue';
+import {
+	onShow
+} from '@dcloudio/uni-app'
+let datas = reactive({
+	hotKeywordList: [], //热搜
+	keywordList: [],// 搜索列表
+	keyword: "",// 搜索关键字
+})
+onShow(() => {
+	getList()
+})
 
-	function getList() {
-		if (uni.getStorageSync('moreSearch')) {
-			datas.hotKeywordList = (uni.getStorageSync('moreSearch')).split(',')
-		} else {
-			datas.hotKeywordList = []
-		}
+function getList() {
+	if (uni.getStorageSync('moreSearch')) {
+		datas.hotKeywordList = (uni.getStorageSync('moreSearch')).split(',')
+	} else {
+		datas.hotKeywordList = []
 	}
+}
+// 搜索
+async function doSearch() {
+	let res = await selectCourseTitles({
+		title: datas.keyword,
+		limit: 20,
+		page: 1,
+	})
+	datas.keywordList = res.data.list
+}
+
+// 取消返回首页
+function goBack() {
+	uni.navigateBack()
+}
 </script>
 
 <style scoped lang="scss">
-	.search-box {
-		width: 100%;
-		/* background-color: rgb(242, 242, 242); */
-		padding: 15upx 2.5%;
-		display: flex;
-		justify-content: space-between;
-		// position: sticky;
-		// top: 0;
-		background-color: #ffffff;
-	}
+.search-box {
+	width: 100%;
+	/* background-color: rgb(242, 242, 242); */
+	padding: 15upx 2.5%;
+	display: flex;
+	justify-content: space-between;
+	// position: sticky;
+	// top: 0;
+	background-color: #ffffff;
+}
 
-	.search-keyword {
-		width: 100%;
-	}
+.search-keyword {
+	width: 100%;
+}
 
-	.keyword-block {
-		padding: 10upx 0;
-	}
+.keyword-block {
+	padding: 10upx 0;
+}
 
-	.keyword-block .keyword-list-header {
-		width: 94%;
-		padding: 10upx 3%;
-		font-size: 27upx;
-		color: #333;
-		display: flex;
-		justify-content: space-between;
-	}
+.keyword-block .keyword-list-header {
+	width: 94%;
+	padding: 10upx 3%;
+	font-size: 27upx;
+	color: #333;
+	display: flex;
+	justify-content: space-between;
+}
 
-	.keyword-block .keyword-list-header image {
-		width: 40upx;
-		height: 40upx;
-	}
+.keyword-block .keyword-list-header image {
+	width: 40upx;
+	height: 40upx;
+}
 </style>